From 60c6bc97c01232aa6e8f61ad0a7b741df115aa58 Mon Sep 17 00:00:00 2001 From: gbear605 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() - 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 (
-

Not Wordle

+

{WORDLE_TITLE}

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} - - - + + + void @@ -69,7 +70,7 @@ export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
- Enter + {ENTER_TEXT} @@ -79,7 +80,7 @@ export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => { - Delete + {DELETE_TEXT}
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 ( - + ) } return ( - +

- Guess Distribution + {GUESS_DISTRIBUTION_TEXT}

{(isGameLost || isGameWon) && (
-
New word in
+
{NEW_WORD_TEXT}
{ return (
- - - - + + + +
) } 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 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 @@ - + - Wordle Clone + Not Wordle 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 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 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 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}
)} 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 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 (
-

{WORDLE_TITLE}

+

+ {WORDLE_TITLE} +

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: [],