WordIT(a clone of Wordle)

Hi, its my first post on Dev.to . So what better than writing about something I am building. Bugscoder you can check me out here. So I was building a clone of the famous game Wordle with ReactJS.
I won't explain each and everything but I am here is the Wordit github link. Check out the code here. You can ask me anything. The code is completely documented so you wont face much obstacle.

Firstly -

Firstly we should basically point out all the data we need to track.

• >--solution
• --Its the 5 letter word, e.g. 'guess'
• >--Past guesses
• --Past guesses is an array of words and each past guess is an array of letters [{},{},{},{},{}]
• --Each object is a letter of the guess word in the form of key value pair [{key:'a', color:'yellow'}]
• >--Current guess
• >--Keypad letters(the keypad which appears at the bottom of the game)
• --array of letter objects [{key:'a', color:'green'}]
• >--Number of turns left
• --an integer from 0 - 6

This is all for the data which we need to track.We will follow the color scheme for the matched letters as per the original game i.e. green for correct position of matched word and yellow for incorrect position of the matched word.

What about the game process

• >--entering words:
• --user enters a letter & a square is filled with that letter
• --when a user hits delete/backspace it deletes the previous letter
• --when a user hits enter it submits the word
• --if all the squares are not filled then the word id not submitted
• --if the word is already present or used then the word is not submitted
• >--checking the submitted words:
• --each letter is checked to see if it matches the solution
• --each letter is assigned a color based on its position in the solution
• --correct position is the solution is assigned green color
• --partial matches (the words are present in the solution but at incorrect position) are assigned yellow color
• --non matches are assigned grey color
• --the guess is added to the grid with the color
• --the current guess moves to the next row
• --the keypad letters are updated
• >--Ending the game:
• --when the guessed word is fully matched "well done" modal pops
• --When user runs out of guesses modal says 'Better luck next time'

This is what we are going to build.

We create a db.json file which contains all the solutions or the 5 letter words. We need another library to read this json file. We will be using the json-server package to read the json file

After installing the npm package you need to run
json-server path-to-db.json --port 3001