#22Wordle

Overview

Implement a classic Wordle game where the player guesses a 5-letter word and tiles are colored according to correctness.

Requirements

• Display a 6-row game board where each row represents a guess attempt.
• Allow typing letters (via on-screen keyboard or physical keyboard) to fill the current row.
• Pressing "Enter" (or clicking Submit) submits the current word.
• Validate that the guessed word exists in the list of valid words.
• Color the tiles based on correctness:
  • Green: correct letter in the correct position.
  • Yellow: correct letter in the wrong position.
  • Gray: letter not in the word.
• Update the on-screen keyboard keys to reflect discovered letter statuses.
• Display a message when:
  • The word is not valid.
  • The player wins (You win!).
  • The player loses (You lost! <solution>).
• Disable further input after a win or after 6 incorrect guesses.
• Implement a "delete" action to remove the last typed letter.
• Ensure that rows cannot exceed 5 letters.
• Show the correct message state and keep it empty after submitting valid but incorrect words.

Notes

• Manage the current input and previous guesses with React state (word and guesses).
• The core logic should live in a single handleOnKeyPress function that handles:
  • Adding letters
  • Submitting
  • Deleting
  • Blocking input on win/loss
• Use the validWords list to determine if a submitted word is valid.
• Store the solution word in a constant (e.g., SOLUTION).
• Use the helper getTileStatus inside Row to determine each tile’s background color.
• Use the helper getKeyStatus inside Keyboard to determine the color of each key.
• Remember to reset the word state after each submission.
• Keep the logic consistent between clicking keys and typing on the physical keyboard.

Tests

1. renders 6 rows and the keyboard keys
2. typing a letter adds it to the current row
3. typing a full word and submitting adds it to the guesses
4. winning the game shows the victory message and blocks further input
5. after 6 wrong guesses, game over message is shown and input is blocked
6. typing an invalid word shows 'Not valid word' message and does not add to guesses
7. delete removes the last letter from the current row
8. does not allow adding more than 5 letters to a row
9. blocks input after winning
10. blocks input after losing
11. message remains empty after submitting valid incorrect word
12. typing letters with the physical keyboard adds them to the current row and second row empty
13. keyboard keys update colors according to guesses
14. board tiles update colors according to hello
15. board tiles update colors according to hight