This is a clone project of the popular word guessing game we all know and love. Made using React, Typescript, and Tailwind.
Clone the repository and perform the following command line actions:
$> cd react-wordle
$> npm install
$> npm run start
$> docker build -t reactle:dev -f docker/Dockerfile .
$> docker run -d -p 3000:3000 --name reactle-dev reactle:dev
Open http://localhost:3000 in browser.
$> docker build --target=prod -t reactle:prod -f docker/Dockerfile .
$> docker run -d -p 80:8080 --name reactle-prod reactle:prod
Open http://localhost in browser.
- Update the
MAX_WORD_LENGTH
variable in src/constants/settings.ts to the desired length. - Update the
WORDS
array in src/constants/wordlist.ts to only include words of the new length. - Update the
VALID_GUESSES
array in src/constants/validGuesses.ts arrays to only include words of the new length.
- In .env:
- Update the title and the description
- Set the
REACT_APP_LOCALE_STRING
to your locale
- In public/index.html:
- Update the "You need to enable JavaScript" message
- Update the language attribute in the HTML tag
- If the language is written right-to-left, add
dir="rtl"
to the HTML tag
- 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 "Settings" modal in src/components/modals/SettingsModal.tsx
- Update the "Info" modal in src/components/modals/InfoModal.tsx
- If the language has letters that are not present in English update the keyboard in src/components/keyboard/Keyboard.tsx
- If the language is written right-to-left, prepend
\u202E
(the unicode right-to-left override character) to the return statement of the inner function ingenerateEmojiGrid
in src/lib/share.ts
This repository includes support for Google Analytics or Plausible Analytics, but, by default, this is disabled.
To enable Google Analytics:
- Create a Google Analytics 4 property and obtain the measurement ID (of the format
G-XXXXXXXXXX
) - In .env, add
REACT_APP_GOOGLE_MEASUREMENT_ID=G-XXXXXXXXXX
Keep in mind that your region might have legislation about obtaining a user's consent before enabling trackers. This is up to downstream repos to implement.
To enable Plausible Analytics:
- Create a new website with Plausible Analytics with a given domain, e.g.
example.app
- In .env, add
REACT_APP_PLAUSIBLE_DOMAIN=example.app