2022-02-02 13:59:36 +01:00
12 changed files with 96 additions and 29 deletions
--- 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`
--- 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>
--- 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",
--- 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(<App />)
-  const linkElement = screen.getByText(/Not Wordle/)
+  const linkElement = screen.getByText(WORDLE_TITLE)
  expect(linkElement).toBeInTheDocument()
 })
--- 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 (
    <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 mt-12">
-        <h1 className="text-xl grow font-bold dark:text-white">Not Wordle</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)}
@ -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}
      </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 !== ''}
--- 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>
--- 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 (
-      <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 dark:text-gray-100">
-        Guess Distribution
+        {GUESS_DISTRIBUTION_TEXT}
      </h4>
      <Histogram gameStats={gameStats} />
      {(isGameLost || isGameWon) && (
        <div className="mt-5 sm:mt-6 columns-2 dark:text-white">
          <div>
-            <h5>New word in</h5>
+            <h5>{NEW_WORD_TEXT}</h5>
            <Countdown
              className="text-lg font-medium text-gray-900 dark:text-gray-100"
              date={tomorrow}
@ -57,7 +71,7 @@ export const StatsModal = ({
              handleShare()
            }}
          >
-            Share
+            {SHARE_TEXT}
          </button>
        </div>
      )}
--- 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>
  )
 }
--- 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'
--- 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)
  )
 }