A clone of the popular game Wordle made using React, Typescript, and Tailwind

Last update: Jan 8, 2023

Related tags

Overview

Wordle Clone

Go play the real Wordle here
Read the story behind it here
Try a demo of this clone project here

Inspiration: This game is an open source clone of the immensely popular online word guessing game Wordle. Like many others all over the world, I saw the signature pattern of green, yellow, and white squares popping up all over social media and the web and had to check it out. After a few days of play, I decided it would be great for my learning to try to rebuild Wordle in React!

Design Decisions: I used a combination of React, Typescript, and Tailwind to build this Wordle Clone. When examining the original Wordle, I assumed the list might come from an external API or database, but after investigating in chrome dev tools I found that the list of words is simply stored in an array on the front end. I'm using the same list as the OG Wordle uses, but watch out for spoilers if you go find the file in this repo! The word match functionality is simple: the word array index increments each day from a fixed game epoch timestamp (only one puzzle per day!) roughly like so:

WORDS[Math.floor((NOW_IN_MS - GAME_EPOCH_IN_MS) / ONE_DAY_IN_MS)]

React enabled me to componentize the littlest parts of the game - keys and letter cells - and use them as the building blocks for the keyboard, word grid, and winning solution graphic. As for handling state, I used the built in useState and useEffect hooks to track guesses, whether the game is won, and to conditionally render popups.

In addition to other things, Typescript helped ensure type safety for the statuses of each guessed letter, which were used in many areas of the app and needed to be accurate for the game to work correctly.

I implemented Tailwind mostly because I wanted to learn how to use Tailwind CSS, but I also took advantage of Tailwind UI with their headless package to build the modals and notifications. This was such an easy way to build simple popups for how to play, winning the game, and invalid words.

To Run Locally: Clone the repository and perform the following command line actions:

$ cd wordle
$ npm init
$ npm run start

I'm looking for a junior developer role

Please feel free to contact me on linkedin and learn more about me here

Comments

Compiling a list of projects built using this repo
Hey folks! :)

I've seen a lot of cool projects in the wild built using this code and I wanted to make an effort to compile a list of links and add them to the README.

Here are the ones I know of already:

https://www.taylordle.com/

https://converged.yt/primel/

https://nezza.github.io/syscordle/

https://www.mathler.com/

Anyone have one they've made or seen they'd like to add?
opened by cwackerfuss 131
Draft: Experiment to fix 100vh issues on mobile browsers.

Added a custom hook that grabs the window's dimensions. On load, we then calculate the inner height of the window if we think the user is on a device smaller than a tablet. Added a little additional padding between the top navbar and the grid so that messages do not overlay the grid too much.

Tailwind was extended with a custom height that reads from this css variable.

This worked in test and on the browser emulating mobile devices. If everyone could test on additional devices, that would be very helpful.

Solution found from here: https://stackoverflow.com/questions/58886797/how-to-access-the-real-100vh-on-ios-in-css

Fixes https://github.com/cwackerfuss/react-wordle/issues/285

opened by TheKnowles 24
Character problem in words like "ç" and "i"

I'm just learning coding for hobby purposes. I get an error when I replace all of the wordlist.ts with Turkish words containing Turkish letters such as ç,i and build it. If I change only today's word in wordlist.ts, it builds and there is no problem. But this time, if it is a Turkish word with the letter i or ç in it, I need to use it like I or C in English. When I try with ç and i it gives the error word not found. Where am I doing wrong?

Additional context Add any other context or screenshots about the feature request here.

opened by Cryptoseen 23
Adjust page size for mobile displays

Opening a new PR for this per discussion in #294.

Setting height to 100vh causes an excessive page height on some mobile browsers, e.g. iOS Safari. The original Wordle avoids this by using height: 100% instead; this PR applies that same styling to Reactle, which appears to resolve the page height issues.

Chozordle is a demo example of this change.

opened by Bearborg 21
Make layout responsive to height

Addresses some of the issues in #429.

Add new custom media query with min-height. See https://tailwindcss.com/docs/screens#custom-media-queries

Cells and Keys now smaller and grow only once the min-height has been reached. Also some tweaks to padding.

I'll need feedback from iPhone users.

opened by igitur 19
Implement Web Share API
This PR implements the Web Share API when

the device is on a mobile browser (implemented by a complicated regular expression)

and navigator.canShare() returns true

and navigator.share exists

I got the regular expressions from another open-source project on Github and I guess we'll just have to trust it.

The reason for the first requirement is that on Chrome for Desktop / Windows 10, the Web Share API is also available, but, on my PC at least, I can share it only to the default Windows 10 Mail app. I'd rather have it copied to the clipboard, like Wordle.

Fixes #206
opened by igitur 17
Improved the animations. Hopefully this won't glitch

The previous animation we had for the svg was a little bit glitchy and hence I am suggesting some improved animations. As a bonus I have added some animations to the keyboard.

opened by abrarhayat 16
MAX_WORD_LENGTH - Issue with length of string in Unicode characters

When using unicode character like "மு" (\u0BAE\u0BC1), the length return as 2, but the "actual"length should be 1. This affected the MAX_WORD_LENGTH throughout the code.

How to fix this?

opened by muhelen 16
Add timer
This PR adds a simple timer to the game. It has the following changes:

Adds a time state variable to the App component

Adds a hasGuessingStarted state variable to the App component

Adds a Timer component which updates the time once per second and displays it

Adds an "Average Time" stat

Adds the time for the current game in the 'Share' button
opened by alexaylwin 14
Update settings.ts to allow solutions of varying sizes

Set MAX_WORD_LENGTH and MAX_CHALLENGES dynamically based on the solution of the day, allowing words of varying sizes on different days.

This change allows having a word list composed of words of varying sizes, without having to change the setting each day for a word of a new size. This is particularly useful for languages/games where the number of possible solutions with a fixed size is too small to allow for a reasonable game to be designed.

opened by aghasemi 13
Moved hard mode to settings modal

Removed unclear toggable hardmode icons. Moved hard mode setting to a settings modal popup. This setup closely aligns with the source material.

Fixes https://github.com/cwackerfuss/react-wordle/issues/37

opened by TheKnowles 13
Bump @types/jest from 27.4.0 to 29.2.5
Bumps @types/jest from 27.4.0 to 29.2.5.

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies javascript
opened by dependabot[bot] 1
Bump @types/node from 16.11.19 to 18.11.18
Bumps @types/node from 16.11.19 to 18.11.18.

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies javascript
opened by dependabot[bot] 1
[a11y] Colour scheme is not usable by people with red/green colour deficiency
Describe the bug The teal used to mark present letters, and the grey for absent letters, look indistinguishable to somebody with a red/green colour deficiency (protanopia, deuteranopia).

Expected behavior Colours should either be a11y-friendly, or there should be an option to choose alternative palettes that are tailored to a specific colour deficiency.

Desktop (please complete the following information):

Windows 11, Chrome 108.0.5359.125
opened by LakeQueen 1
Bump @headlessui/react from 1.4.2 to 1.7.7
Bumps @headlessui/react from 1.4.2 to 1.7.7.

Release notes

Sourced from @headlessui/react's releases.

@headlessui/react@v1.7.7

Fixed

Improve scroll restoration after Dialog closes (b20e48dd)

@headlessui/react@v1.7.6

Fixed

Fix regression where displayValue crashes (#2087)

Fix displayValue syncing when Combobox.Input is unmounted and re-mounted in different trees (#2090)

Fix FocusTrap escape due to strange tabindex values (#2093)

Improve scroll locking on iOS (#2100, 28234b0e)

@headlessui/react@v1.7.5

Fixed

Reset form-like components when the parent <form> resets (#2004)

Add warning when using <Popover.Button /> multiple times (#2007)

Ensure Popover doesn't crash when focus is going to window (#2019)

Ensure shift+home and shift+end works as expected in the Combobox.Input component (#2024)

Improve syncing of the Combobox.Input value (#2042)

Fix crash when using multiple mode without value prop (uncontrolled) for Listbox and Combobox components (#2058)

Apply enter and enterFrom classes in SSR for Transition component (#2059)

Allow passing in your own id prop (#2060)

Fix Dialog unmounting problem due to incorrect transitioncancel event in the Transition component on Android (#2071)

Ignore pointer events in Listbox, Menu, and Combobox when cursor hasn't moved (#2069)

Allow clicks inside dialog panel when target is inside shadow root (#2079)

@headlessui/react@v1.7.4

Fixed

Fix <Popover.Button as={Fragment} /> crash (#1889)

Expose close function for Menu and Menu.Item components (#1897)

Fix useOutsideClick, add improvements for ShadowDOM (#1914)

Fire <Combobox.Input>'s onChange handler when changing the value internally (#1916)

Add client-only to mark everything as client components (#1981)

Added

Warn when changing components between controlled and uncontrolled (#1878)

@headlessui/react@v1.7.3

Fixed

Improve Portal detection for Popover components (#1842)

Fix useOutsideClick swallowing events inside ShadowDOM (#1876)

Fix Tab incorrectly activating on focus event (#1887)

@headlessui/react@v1.7.2

Fixed

... (truncated)

Changelog

Sourced from @headlessui/react's changelog.

[1.7.7] - 2022-12-16

Fixed

Improve scroll restoration after Dialog closes (b20e48dd)

[1.7.6] - 2022-12-15

Fixed

Fix regression where displayValue crashes (#2087)

Fix displayValue syncing when Combobox.Input is unmounted and re-mounted in different trees (#2090)

Fix FocusTrap escape due to strange tabindex values (#2093)

Improve scroll locking on iOS (#2100, 28234b0e)

[1.7.5] - 2022-12-08

Fixed

Reset form-like components when the parent <form> resets (#2004)

Add warning when using <Popover.Button /> multiple times (#2007)

Ensure Popover doesn't crash when focus is going to window (#2019)

Ensure shift+home and shift+end works as expected in the Combobox.Input component (#2024)

Improve syncing of the Combobox.Input value (#2042)

Fix crash when using multiple mode without value prop (uncontrolled) for Listbox and Combobox components (#2058)

Apply enter and enterFrom classes in SSR for Transition component (#2059)

Allow passing in your own id prop (#2060)

Fix Dialog unmounting problem due to incorrect transitioncancel event in the Transition component on Android (#2071)

Ignore pointer events in Listbox, Menu, and Combobox when cursor hasn't moved (#2069)

Allow clicks inside dialog panel when target is inside shadow root (#2079)

[1.7.4] - 2022-11-03

Fixed

Fix <Popover.Button as={Fragment} /> crash (#1889)

Expose close function for Menu and Menu.Item components (#1897)

Fix useOutsideClick, add improvements for ShadowDOM (#1914)

Fire <Combobox.Input>'s onChange handler when changing the value internally (#1916)

Add client-only to mark everything as client components (#1981)

Added

Warn when changing components between controlled and uncontrolled (#1878)

[1.7.3] - 2022-09-30

Fixed

Improve Portal detection for Popover components (#1842)

... (truncated)

Commits

b7c9e57 1.7.7 - @headlessui/react

5e480e1 update changelog

5994283 improve scrolling to in-page location

92e9302 1.7.6 - @headlessui/react

98b0817 update CHANGELOG

45fde14 improve scroll offset

3cb8079 update aria-haspopup to use the correct role (#2101)

962528c Improve scroll locking on iOS (#2100)

d31bb5c Fix FocusTrap escape due to strange tabindex values (#2093)

1f2de63 Fix displayValue syncing when Combobox.Input is unmounted and re-mounted ...

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies javascript
opened by dependabot[bot] 1
Bump nginx from 1.20.2-alpine to 1.23.3-alpine in /docker
Bumps nginx from 1.20.2-alpine to 1.23.3-alpine.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies docker
opened by dependabot[bot] 1
Bump lint-staged from 12.3.2 to 13.1.0
Bumps lint-staged from 12.3.2 to 13.1.0.

Release notes

Sourced from lint-staged's releases.

v13.1.0

13.1.0 (2022-12-04)

Features

expose cli entrance from "lint-staged/bin" (#1237) (eabf1d2)

v13.0.4

13.0.4 (2022-11-25)

Bug Fixes

deps: update all dependencies (336f3b5)

deps: update all dependencies (ec995e5)

v13.0.3

13.0.3 (2022-06-24)

Bug Fixes

correctly handle git stash when using MSYS2 (#1178) (0d627a5)

v13.0.2

13.0.2 (2022-06-16)

Bug Fixes

use new --diff and --diff-filter options when checking task modifications (1a5a66a)

v13.0.1

13.0.1 (2022-06-08)

Bug Fixes

correct spelling of "0 files" (f27f1d4)

suppress error from process.kill when killing tasks on failure (f2c6bdd)

deps: update pidtree@^0.6.0 to fix screen size error in WSL (1a77e42)

ignore "No matching pid found" error (cb8a432)

prevent possible race condition when killing tasks on failure (bc92aff)

Performance Improvements

use EventsEmitter instead of setInterval for killing tasks on failure (c508b46)

... (truncated)

Commits

eabf1d2 feat: expose cli entrance from "lint-staged/bin" (#1237)

a987e6a docs: add note about multiple configs files to README

c4fb7b8 docs: add note about git hook TTY to README

e2bfce1 test: remove Windows snapshot workaround

81ea7fd test: allow file protocol in git submodule test

3ea9b7e test: update Jest snapshot format

0c635c7 ci: install latest npm for older Node.js versions

5f1a00e ci: bump GitHub Actions' versions

336f3b5 fix(deps): update all dependencies

ec995e5 fix(deps): update all dependencies

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies javascript
opened by dependabot[bot] 1