Poerdl

This is a clone project of the popular word guessing game we all know and love. Made using React, Typescript, and Tailwind.

Try out the demo on pennard.de!

Build and run

To Run Locally:

Clone the repository and perform the following command line actions:

$> npm ci
$> npm run dev

To build/run docker container:

Development

$> docker build -t game:dev .
$> docker run -d -p 3000:3000 game:dev

Open http://localhost:3000 in browser.

Production

$> docker build --target=prod -t game:prod .
$> docker run -d -p 80:80 game:prod

Open http://localhost in browser.

Projects built using this repo

Other languages

• Arwordle: Arabic
• Boludle: Argentinian
• Gerdle: Cornish (Kernowek)
• Keclap: Sundanese
• Kelmaly: Arabic
• Latindictionary.io: Latin
• Lexoula: Ελληνικά (Greek)
• Malay: Bahasa Malaysia
• Parolette: Italian
• Parolle.it: Italian
• Pashtoodle: Pashto
• Persian: Persian (Farsi)
• Rudle: Russian
• Sindhal: Sindhi
• Szózat: Hungarian
• Tlembung: Japanese
• Tugma: Hiligaynon (spoken in the Philippines)
• Ukrainian: Ukrainian
• Urdle: Urdu
• Vārdulis: Latvian
• Word-leh!: Singlish
• Wordlar: Uzbek
• Wordle (BOS): Bosnian
• Wordle (Spanish): Spanish/Espanol
• Wordle-RO: Romanian
• Wortel: Afrikaans
• Wörtchen: German
• kelma.mt: Maltese
• Слівце: Ukrainian
• ਪੰਜਾਬੀ: Punjabi
• சொல்லாடல் Soladle: Tamil
• 字知之明: Traditional Chinese
• 꼬들 - 한국어: Korean
• 한글 풀어쓰기 5자: Korean

Fun themes

• 'en si lì'ur: Na'vi, the constructed language from James Cameron's AVATAR (2009)
• Airportle: Airport Codes
• Anidal: Animals
• Birdle - Emojis: Bird emojis
• Birdle: Birds
• Buildly: Construction themed
• Crosswordle: Crossword mashup
• Dundle: The Office
• FFXIVrdle: Final Fantasy XIV
• Harry Potter: Harry Potter
• JoJodle: JoJo’s Bizarre Adventure
• Mahjong Handle: Mahjong Hands
• Movie Wordle: Bollywood
• Murdle: Spooky hangman mashup
• Poker Handle: Poker
• Quettale: Quenya, Elven language in LOTR
• Radiole: Radio-themed (for World Radio Day)
• Squirdle: Pokeman
• Taylordle: Taylor Swift
• Trekle: Star Trek
• Weedel: Video game characters
• Wordle.cl: Chilean modisms, cities, places
• Wrdl: Words that are 5 letters long after getting rid of their vowels

Math, Acronyms, Science, Tech, and more

• AI-powered: Includes an AI component
• Genel: Gene symbols
• Jazle: Javascript
• Mathler: Find the solution that equals X
• Morsel: Morse
• Numble: Maths
• Opsle: Ops
• Passwordle: Passwords
• Primel: Prime numbers
• Rundle: Like wordle, but only last three guesses are considered.
• Stockle: Guess the stock or ETF
• Syscordle: SYSCALL
• UNLOCOdle: UNLOCODEs

Want to add one to the list? Just make a pull request or let us know via a comment here

FAQ

How can I change the length of a guess?

• 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.

How can I create a version in another language?

• In .env:
  • Update the title and the description
• 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'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, prepend \u202E (the unicode right-to-left override character) to the return statement of the inner function in generateEmojiGrid in src/lib/share.ts

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
• If you are self-hosting Plausible Analytics, add REACT_APP_PLAUSIBLE_HOST=https://my-plausible-server-base-url, where my-plausible-server-base-url is the base url for your self-hosted Plausible instance (it assumes https://my-plausible-server-base-url/js/plausible.js is where plausible js script is hosted).