From 60c6bc97c01232aa6e8f61ad0a7b741df115aa58 Mon Sep 17 00:00:00 2001
From: gbear605 <developer@vivissi.com>
Date: Sat, 29 Jan 2022 14:33:12 -0500
Subject: [PATCH 1/6] Extract English strings to constants file

---
 src/App.test.tsx                     |  3 ++-
 src/App.tsx                          | 25 ++++++++++++++++++-------
 src/components/keyboard/Keyboard.tsx |  5 +++--
 src/components/modals/StatsModal.tsx | 21 +++++++++++++++++----
 src/components/stats/StatBar.tsx     | 14 ++++++++++----
 src/constants/strings.ts             | 18 ++++++++++++++++++
 src/lib/share.ts                     |  3 ++-
 7 files changed, 70 insertions(+), 19 deletions(-)

diff --git a/src/App.test.tsx b/src/App.test.tsx
index 8bc9bb3..dc68a3d 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import App from './App'
+import { WORDLE_TITLE } from './constants/strings'
 
 test('renders App component', () => {
   render(<App />)
-  const linkElement = screen.getByText(/Not Wordle/)
+  const linkElement = screen.getByText(WORDLE_TITLE)
   expect(linkElement).toBeInTheDocument()
 })
diff --git a/src/App.tsx b/src/App.tsx
index f0816d2..5cbf5b0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,7 +7,15 @@ import { Keyboard } from './components/keyboard/Keyboard'
 import { AboutModal } from './components/modals/AboutModal'
 import { InfoModal } from './components/modals/InfoModal'
 import { StatsModal } from './components/modals/StatsModal'
-import { WIN_MESSAGES } from './constants/strings'
+import {
+  WORDLE_TITLE,
+  WIN_MESSAGES,
+  GAME_COPIED_MESSAGE,
+  ABOUT_GAME_MESSAGE,
+  NOT_ENOUGH_LETTERS_MESSAGE,
+  WORD_NOT_FOUND_MESSAGE,
+  CORRECT_WORD_MESSAGE,
+} from './constants/strings'
 import { isWordInWordList, isWinningWord, solution } from './lib/words'
 import { addStatsForCompletedGame, loadStats } from './lib/stats'
 import {
@@ -114,7 +122,7 @@ function App() {
   return (
     <div className="py-8 max-w-7xl mx-auto sm:px-6 lg:px-8">
       <div className="flex w-80 mx-auto items-center mb-8">
-        <h1 className="text-xl grow font-bold">Not Wordle</h1>
+        <h1 className="text-xl grow font-bold">{WORDLE_TITLE}</h1>
         <InformationCircleIcon
           className="h-6 w-6 cursor-pointer"
           onClick={() => setIsInfoModalOpen(true)}
@@ -143,7 +151,7 @@ function App() {
         isGameLost={isGameLost}
         isGameWon={isGameWon}
         handleShare={() => {
-          setSuccessAlert('Game copied to clipboard')
+          setSuccessAlert(GAME_COPIED_MESSAGE)
           return setTimeout(() => setSuccessAlert(''), ALERT_TIME_MS)
         }}
       />
@@ -157,12 +165,15 @@ function App() {
         className="mx-auto mt-8 flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 select-none"
         onClick={() => setIsAboutModalOpen(true)}
       >
-        About this game
+        {ABOUT_GAME_MESSAGE}
       </button>
 
-      <Alert message="Not enough letters" isOpen={isNotEnoughLetters} />
-      <Alert message="Word not found" isOpen={isWordNotFoundAlertOpen} />
-      <Alert message={`The word was ${solution}`} isOpen={isGameLost} />
+      <Alert message={NOT_ENOUGH_LETTERS_MESSAGE} isOpen={isNotEnoughLetters} />
+      <Alert
+        message={WORD_NOT_FOUND_MESSAGE}
+        isOpen={isWordNotFoundAlertOpen}
+      />
+      <Alert message={CORRECT_WORD_MESSAGE(solution)} isOpen={isGameLost} />
       <Alert
         message={successAlert}
         isOpen={successAlert !== ''}
diff --git a/src/components/keyboard/Keyboard.tsx b/src/components/keyboard/Keyboard.tsx
index 0c8f9a6..2c97e61 100644
--- a/src/components/keyboard/Keyboard.tsx
+++ b/src/components/keyboard/Keyboard.tsx
@@ -2,6 +2,7 @@ import { KeyValue } from '../../lib/keyboard'
 import { getStatuses } from '../../lib/statuses'
 import { Key } from './Key'
 import { useEffect } from 'react'
+import { ENTER_TEXT, DELETE_TEXT } from '../../constants/strings'
 
 type Props = {
   onChar: (value: string) => void
@@ -69,7 +70,7 @@ export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
       </div>
       <div className="flex justify-center">
         <Key width={65.4} value="ENTER" onClick={onClick}>
-          Enter
+          {ENTER_TEXT}
         </Key>
         <Key value="Z" onClick={onClick} status={charStatuses['Z']} />
         <Key value="X" onClick={onClick} status={charStatuses['X']} />
@@ -79,7 +80,7 @@ export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
         <Key value="N" onClick={onClick} status={charStatuses['N']} />
         <Key value="M" onClick={onClick} status={charStatuses['M']} />
         <Key width={65.4} value="DELETE" onClick={onClick}>
-          Delete
+          {DELETE_TEXT}
         </Key>
       </div>
     </div>
diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx
index 770c6cc..48e1892 100644
--- a/src/components/modals/StatsModal.tsx
+++ b/src/components/modals/StatsModal.tsx
@@ -5,6 +5,11 @@ import { GameStats } from '../../lib/localStorage'
 import { shareStatus } from '../../lib/share'
 import { tomorrow } from '../../lib/words'
 import { BaseModal } from './BaseModal'
+import {
+  STATISTICS_TITLE,
+  GUESS_DISTRIBUTION_TEXT,
+  NEW_WORD_TEXT,
+} from '../../constants/strings'
 
 type Props = {
   isOpen: boolean
@@ -27,22 +32,30 @@ export const StatsModal = ({
 }: Props) => {
   if (gameStats.totalGames <= 0) {
     return (
-      <BaseModal title="Statistics" isOpen={isOpen} handleClose={handleClose}>
+      <BaseModal
+        title={STATISTICS_TITLE}
+        isOpen={isOpen}
+        handleClose={handleClose}
+      >
         <StatBar gameStats={gameStats} />
       </BaseModal>
     )
   }
   return (
-    <BaseModal title="Statistics" isOpen={isOpen} handleClose={handleClose}>
+    <BaseModal
+      title={STATISTICS_TITLE}
+      isOpen={isOpen}
+      handleClose={handleClose}
+    >
       <StatBar gameStats={gameStats} />
       <h4 className="text-lg leading-6 font-medium text-gray-900">
-        Guess Distribution
+        {GUESS_DISTRIBUTION_TEXT}
       </h4>
       <Histogram gameStats={gameStats} />
       {(isGameLost || isGameWon) && (
         <div className="mt-5 sm:mt-6 columns-2">
           <div>
-            <h5>New word in</h5>
+            <h5>{NEW_WORD_TEXT}</h5>
             <Countdown
               className="text-lg font-medium text-gray-900"
               date={tomorrow}
diff --git a/src/components/stats/StatBar.tsx b/src/components/stats/StatBar.tsx
index 076afc8..c804996 100644
--- a/src/components/stats/StatBar.tsx
+++ b/src/components/stats/StatBar.tsx
@@ -1,4 +1,10 @@
 import { GameStats } from '../../lib/localStorage'
+import {
+  TOTAL_TRIES_TEXT,
+  SUCCESS_RATE_TEXT,
+  CURRENT_STREAK_TEXT,
+  BEST_STREAK_TEXT,
+} from '../../constants/strings'
 
 type Props = {
   gameStats: GameStats
@@ -22,10 +28,10 @@ const StatItem = ({
 export const StatBar = ({ gameStats }: Props) => {
   return (
     <div className="flex justify-center my-2">
-      <StatItem label="Total tries" value={gameStats.totalGames} />
-      <StatItem label="Success rate" value={`${gameStats.successRate}%`} />
-      <StatItem label="Current streak" value={gameStats.currentStreak} />
-      <StatItem label="Best streak" value={gameStats.bestStreak} />
+      <StatItem label={TOTAL_TRIES_TEXT} value={gameStats.totalGames} />
+      <StatItem label={SUCCESS_RATE_TEXT} value={`${gameStats.successRate}%`} />
+      <StatItem label={CURRENT_STREAK_TEXT} value={gameStats.currentStreak} />
+      <StatItem label={BEST_STREAK_TEXT} value={gameStats.bestStreak} />
     </div>
   )
 }
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 13411b6..bfb3c9c 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -1 +1,19 @@
+export const WORDLE_TITLE = 'Not Wordle'
+
 export const WIN_MESSAGES = ['Great Job!', 'Awesome', 'Well done!']
+export const GAME_COPIED_MESSAGE = 'Game copied to clipboard'
+export const ABOUT_GAME_MESSAGE = 'About this game'
+export const NOT_ENOUGH_LETTERS_MESSAGE = 'Not enough letters'
+export const WORD_NOT_FOUND_MESSAGE = 'Word not found'
+export const CORRECT_WORD_MESSAGE = (solution: string) =>
+  `The word was ${solution}`
+export const ENTER_TEXT = 'Enter'
+export const DELETE_TEXT = 'Delete'
+export const STATISTICS_TITLE = 'Statistics'
+export const GUESS_DISTRIBUTION_TEXT = 'Guess Distribution'
+export const NEW_WORD_TEXT = 'New word in'
+
+export const TOTAL_TRIES_TEXT = 'Total tries'
+export const SUCCESS_RATE_TEXT = 'Success rate'
+export const CURRENT_STREAK_TEXT = 'Current streak'
+export const BEST_STREAK_TEXT = 'Best streak'
diff --git a/src/lib/share.ts b/src/lib/share.ts
index 7e7b6ee..80b7986 100644
--- a/src/lib/share.ts
+++ b/src/lib/share.ts
@@ -1,9 +1,10 @@
 import { getGuessStatuses } from './statuses'
 import { solutionIndex } from './words'
+import { WORDLE_TITLE } from '../constants/strings'
 
 export const shareStatus = (guesses: string[], lost: boolean) => {
   navigator.clipboard.writeText(
-    `Not Wordle ${solutionIndex} ${lost ? 'X' : guesses.length}/6\n\n` +
+    `${WORDLE_TITLE} ${solutionIndex} ${lost ? 'X' : guesses.length}/6\n\n` +
       generateEmojiGrid(guesses)
   )
 }

From d9e2f145eb37245206c4294f22b0b61c9d67eee0 Mon Sep 17 00:00:00 2001
From: gbear605 <developer@vivissi.com>
Date: Sat, 29 Jan 2022 14:33:44 -0500
Subject: [PATCH 2/6] Update meta files to have consistent name

---
 public/index.html    | 7 ++-----
 public/manifest.json | 4 ++--
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index daf076e..e8d8565 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Not Wordle" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Wordle Clone</title>
+    <title>Not Wordle</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..71aba26 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Not Wordle",
+  "name": "Not Wordle",
   "icons": [
     {
       "src": "favicon.ico",

From 155df865b86df7246776912219324bf6412b3bbf Mon Sep 17 00:00:00 2001
From: gbear605 <developer@vivissi.com>
Date: Sat, 29 Jan 2022 14:34:18 -0500
Subject: [PATCH 3/6] Add instructions for creating a different language clone

---
 README.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/README.md b/README.md
index 62990c8..568785b 100644
--- a/README.md
+++ b/README.md
@@ -35,3 +35,16 @@ $ docker run -d -p 3000:3000 notwordle
 ```
 open http://localhost:3000 in browser.
 
+_To create a version in a different language:_
+
+- Update the title, the description, and the "You need to enable JavaScript" message in `public/index.html`
+- Update the language attribute in the HTML tag in `public/index.html`
+- Update the name and short name in `public/manifest.json`
+- Update the strings in `src/constants/strings.ts`
+- Add all of the five letter words in the language to `src/constants/validGuesses.ts`, replacing the English words
+- Add a list of goal words in the language to `src/constants/wordlist.ts`, replacing the English words
+- Update the "About" modal in `src/components/modals/AboutModel.tsx`
+- Update the "Info" modal in `src/components/modals/InfoModal.tsx`
+- If the language has letters that are not present in English, add them to the `CharValue` type in `src/lib/statuses.ts` and update the keyboard in `src/lib/components/keyboard/Keyboard.tsx`
+- If the language's letters are made of multiple unicode characters, use a grapheme splitter at various points throughout the app or normalize the input so that all of the letters are made of a single character
+- If the language is written right-to-left, add `dir="rtl"` to the HTML tag in `public/index.html` and prepend `\u202E` (the unicode right-to-left override character) to the return statement of the inner function in `generateEmojiGrid` in `src/lib/share.ts`

From 61d34186f196cf626318c0f59a9d37e83b8f30b5 Mon Sep 17 00:00:00 2001
From: gbear605 <developer@vivissi.com>
Date: Sat, 29 Jan 2022 14:34:34 -0500
Subject: [PATCH 4/6] Apply prettier

---
 .vscode/settings.json | 2 +-
 README.md             | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d1b4edb..1b6457c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"
-}
\ No newline at end of file
+}
diff --git a/README.md b/README.md
index 568785b..96df800 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,7 @@ I implemented Tailwind mostly because I wanted to learn how to use Tailwind CSS,
 
 _To Run Locally:_
 Clone the repository and perform the following command line actions:
+
 ```bash
 $ cd wordle
 $ npm install
@@ -29,10 +30,12 @@ $ npm run start
 ```
 
 _To build/run docker container:_
+
 ```bash
 $ docker build -t notwordle .
 $ docker run -d -p 3000:3000 notwordle
 ```
+
 open http://localhost:3000 in browser.
 
 _To create a version in a different language:_

From d9419c410f7ed2a17153c5102e61513af1d77469 Mon Sep 17 00:00:00 2001
From: gbear605 <developer@vivissi.com>
Date: Sat, 29 Jan 2022 14:52:34 -0500
Subject: [PATCH 5/6] Extract share button text

---
 src/components/modals/StatsModal.tsx | 3 ++-
 src/constants/strings.ts             | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx
index 48e1892..a6843bc 100644
--- a/src/components/modals/StatsModal.tsx
+++ b/src/components/modals/StatsModal.tsx
@@ -9,6 +9,7 @@ import {
   STATISTICS_TITLE,
   GUESS_DISTRIBUTION_TEXT,
   NEW_WORD_TEXT,
+  SHARE_TEXT,
 } from '../../constants/strings'
 
 type Props = {
@@ -70,7 +71,7 @@ export const StatsModal = ({
               handleShare()
             }}
           >
-            Share
+            {SHARE_TEXT}
           </button>
         </div>
       )}
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index bfb3c9c..48318c0 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -12,7 +12,7 @@ export const DELETE_TEXT = 'Delete'
 export const STATISTICS_TITLE = 'Statistics'
 export const GUESS_DISTRIBUTION_TEXT = 'Guess Distribution'
 export const NEW_WORD_TEXT = 'New word in'
-
+export const SHARE_TEXT = 'Share'
 export const TOTAL_TRIES_TEXT = 'Total tries'
 export const SUCCESS_RATE_TEXT = 'Success rate'
 export const CURRENT_STREAK_TEXT = 'Current streak'

From 9dcd05c0e1ae0fc1d71efa6d930a3dfb2da6605a Mon Sep 17 00:00:00 2001
From: gbear605 <developer@vivissi.com>
Date: Sat, 29 Jan 2022 18:40:35 -0500
Subject: [PATCH 6/6] Apply prettier

---
 src/App.tsx        | 4 +++-
 tailwind.config.js | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2e07bfb..238fd54 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -151,7 +151,9 @@ function App() {
   return (
     <div className="py-8 max-w-7xl mx-auto sm:px-6 lg:px-8">
       <div className="flex w-80 mx-auto items-center mb-8">
-        <h1 className="text-xl grow font-bold dark:text-white">{WORDLE_TITLE}</h1>
+        <h1 className="text-xl grow font-bold dark:text-white">
+          {WORDLE_TITLE}
+        </h1>
         <SunIcon
           className="h-6 w-6 cursor-pointer dark:stroke-white"
           onClick={() => handleDarkMode(!isDarkMode)}
diff --git a/tailwind.config.js b/tailwind.config.js
index 400a2aa..df98a4b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   darkMode: 'class',
-  theme: {   
+  theme: {
     extend: {},
   },
   plugins: [],