Reactle

This is an open-source option for building word guessing games! Made using React, Typescript, and Tailwind.

Build and run

To Run Locally:

Clone the repository and perform the following command line actions:

$> cd reactle
$> npm install
$> npm run start

To build/run docker container:

Development

$> docker compose up

$> 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. Please follow this tutorial for a complete discussion on building a Docker image for Reactle.

Production

$> 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. See the entry in the FAQ below about requirements for sharing of results.

FAQ

How can I change the length of a guess?

The default configuration is for solutions and guesses of length five, but it is flexible enough to handle other lengths, even variable lengths each day.

To configure for a different constant length:

Update the WORDS array in src/constants/wordlist.ts to include only words of the new length.
Update the VALID_GUESSES array in src/constants/validGuesses.ts to include only words of the new length.

To configure for variable lengths:

Update the WORDS array in src/constants/wordlist.ts to include words of any of the variable lengths desired.
Update the VALID_GUESSES array in src/constants/validGuesses.ts to include words of any of the variable lengths desired.

Note that guesses are validated against both the length of the solution, and presence in VALID_GUESSES.

How can I create a version in another language?

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
Update the "DatePicker" modal in src/components/modals/DatePickerModal.tsx
Update the statistics migration components modal in:
To ensure that migration codes are unique to your application, update the Blowfish encryption key and initialization vector with random 30 character and 8 character strings in src/constants/settings.ts
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 in generateEmojiGrid in src/lib/share.ts
To enable replaying past days' games, set ENABLE_ARCHIVED_GAMES to true
Set DATE_LOCALE to a suitable locale string as defined in date-fns.

How can I add usage tracking?

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

Why does sharing of results not work?

For mobile and wearable devices and smart TVs, sharing of results is initially attempted using the Web Share API. For other devices or when sharing to the Web Share API fails, the results are written to the clipboard. Both these methods will succeed only in a secure context, which require you to implement the HTTPS protocol when hosting this repo on a public domain.

Projects built using this repo

Other languages

Ar: Arabic
BerSüz: Tatar
Boludle: Argentinian
Gerdle: Cornish (Kernowek)
Ijambo: Kirundi (spoken in Burundi)
Katadel: Jawi (Malay Arabic script)
Kerdle: Cornish/Kernewek (Standard Written Form)
Labzle: Balochi
Latindictionary.io: Latin
Lexoula: Ελληνικά (Greek)
Malay: Bahasa Malaysia
Mondle: Mongolian
Nordle: Norwegian
Parig: Western Armenian
Parolette: Italian
Parolle.it: Italian
Pashtoodle: Pashto
Persian: Persian (Farsi)
Pinoledle: Nicaraguan
Pinyin: Pinyin (romanization system for Mandarin Chinese)
Rudle: Russian
Sindhal: Sindhi
Szózat: Hungarian
So'zzana: O'zbek (Lotin)
Tatar: Tatar (Turkic Language)
Tàu Tâi-gí (Taigi Wordle): Taigi (Taiwanese)
Tlembung: Javanese
Tugma: Hiligaynon (spoken in the Philippines)
Ukrainian: Ukrainian
Urdle: Urdu
Vārdulis: Latvian
Wokle: Bininj Kunwok
Word-leh!: Singlish
Bukvar - Wordle (BOS): Bosnian
Wordle (Spanish): Spanish/Espanol
Wordle-RO: Romanian
Wortel: Afrikaans
Wörtchen: German
kelma.mt: Maltese
Žodelė: Lithuanian
Слівце: Ukrainian
ਪੰਜਾਬੀ: Punjabi
字知之明: Traditional Chinese
꼬들 - 한국어: Korean
ไทย: Thai
சொல்லாடல்: Tamil

Fun themes

Airportle: Airport Codes
Alterdle: Fully customisable, users can change the number of words to guess and the word length
Anidal: Animals
Birdle - Emojis: Bird emojis
Birdle: Birds
Bluedle: Bluey based
Buildly: Construction themed
Canuckle: Canadian themed
Crosswordle: Crossword mashup
DALL-e-dle: Provides a DALL-E generated image of the word as a clue
Discwordle: Terry Pratchett's Discworld
Dundle: The Office
FFXIVrdle: Final Fantasy XIV
Harderdl: For those who find too easy (might need pen and paper to solve)
Harry Potter: Harry Potter
JoJodle: JoJo’s Bizarre Adventure
Mahjong Handle: Mahjong Hands
Fletcherdle: American singer-songwriter FLETCHER
Foodle: Food themed
Lyricle: Lyrics
Midnightle: Taylor Swift's Midnights album
Murdle: Spooky hangman mashup
Octordle Unlimited: Octordle Unlimited
Pawnle: Parks and Recreation
Poker Handle: Poker
Poker Handle 2: Poker
Polygonle: Shape-based clue for each character
Quettale: Quenya, Elven language in LOTR
Radiole: Radio-themed (for World Radio Day)
Spotle: With an extra "incognito" block
Squirdle: Pokeman
Taylordle: Taylor Swift
Trekle: Star Trek
Turdle: Make the turtle jump!
Weedel: Video game characters
Wordle Unlimited: Unlimited
Wrdl: Words that are 5 letters long after getting rid of their vowels
WROUD: W R O U D is a simple word game that challenges people to find a six-letter word in 3 guesses from a cloud of letters.
香港麻雀糊 dle: Mahjong hands under Hong Kong rules

Fun themes in other languages

German Harry Potter Wordle
Spotle: Spotle, but in Portuguese

Math, Acronyms, Science, Tech, and more

AI-powered: Includes an AI component
Cloudle: Cloud technology
Colordle: Guess the hexadecimal color code of the background
Genele: Gene symbols
Jazle: Javascript
Mathler: Find the solution that equals X
Morsel: Morse
Numble: Maths
Opsle: Ops
Passwordle: Passwords
Perfdle: Performance Testers and Engineers, DevOps, and Observability
Primel: Prime numbers
Qwordle: Quantum version (uses entangled word-pairs)
Quantle: Another quantum variant where guesses are quantum equations
Rundle: Only last three guesses are considered.
Stockle: Guess the stock or ETF
Syscordle: SYSCALL
UNLOCOdle: UNLOCODEs
Visionle: Guess the label of randomly chosen image from ImageNet/ImageNet-Sketch dataset (Machine learning)
Zip-zap-bam!: Word ladder game.
0xdle: Hexadecimal

Want to add one to the list? Please make a pull request.

amitrajput1992 / react-wordle