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 62990c8..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,9 +30,24 @@ $ 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:_ + +- 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` 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", diff --git a/src/App.test.tsx b/src/App.test.tsx index 0397eec..9ae34a6 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,6 +1,7 @@ import React from 'react' import { render, screen } from '@testing-library/react' import App from './App' +import { WORDLE_TITLE } from './constants/strings' beforeEach(() => { Object.defineProperty(window, 'matchMedia', { @@ -20,6 +21,6 @@ beforeEach(() => { 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 9c14848..aab1663 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,7 +10,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 { @@ -143,7 +151,9 @@ function App() { return (
-

Not Wordle

+

+ {WORDLE_TITLE} +

handleDarkMode(!isDarkMode)} @@ -176,7 +186,7 @@ function App() { isGameLost={isGameLost} isGameWon={isGameWon} handleShare={() => { - setSuccessAlert('Game copied to clipboard') + setSuccessAlert(GAME_COPIED_MESSAGE) return setTimeout(() => setSuccessAlert(''), ALERT_TIME_MS) }} /> @@ -190,12 +200,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 0bdf4b1..55d764e 100644 --- a/src/components/modals/StatsModal.tsx +++ b/src/components/modals/StatsModal.tsx @@ -5,6 +5,12 @@ 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, + SHARE_TEXT, +} from '../../constants/strings' type Props = { isOpen: boolean @@ -27,22 +33,30 @@ export const StatsModal = ({ }: Props) => { if (gameStats.totalGames <= 0) { return ( - + ) } return ( - +

- Guess Distribution + {GUESS_DISTRIBUTION_TEXT}

{(isGameLost || isGameWon) && (
-
New word in
+
{NEW_WORD_TEXT}
- Share + {SHARE_TEXT}
)} diff --git a/src/components/stats/StatBar.tsx b/src/components/stats/StatBar.tsx index 0c3ab43..482f7e3 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 (
- - - - + + + +
) } diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 13411b6..48318c0 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 SHARE_TEXT = 'Share' +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) ) } 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: [],