Build a Wordle-Style Game in React

Task

Build a React component WordleGame that implements a 5-guess, 5-letter word puzzle game. The player must deduce a secret target word within 5 attempts.

Requirements

1. Board & Guess Flow

   • The board displays 5 rows of 5 letter tiles.
   • Players submit guesses one letter at a time using physical keyboard typing or an on-screen keyboard.
   • A guess is only submitted when Enter is pressed on a full 5-letter word.
   • Backspace deletes the last entered letter in the active row.
   • No input should be accepted after the game ends (either won or lost).

2. Letter Evaluation Algorithm (Wordle Rules) For each tile in a submitted guess, assign one of three statuses:

   • "correct" (green): Letter is in the word and in the exact position.
   • "present" (yellow): Letter is in the word but in a different position.
   • "absent" (gray): Letter is not in the word (or excess occurrences beyond target count).
   • Duplicate letter rule: Exact matches ("correct") take precedence over "present". If a letter appears $N$ times in the secret word, at most $N$ instances of that letter across the guess can be colored either "correct" or "present". Any additional occurrences must be marked "absent".

3. Keyboard & Status Tracking

   • An on-screen virtual keyboard should reflect the best-known status for each letter (correct > present > absent).
   • When the user guesses the secret word, trigger a winning terminal state.
   • When 5 invalid guesses are exhausted without finding the secret word, reveal the word in a losing terminal state.

4. Component Interface

interface WordleGameProps {
  targetWord: string; // Guaranteed uppercase, 5 ASCII letters, e.g. "REACT"
  maxGuesses?: number; // Defaults to 5
  onGameEnd?: (result: { won: boolean; guessCount: number }) => void;
}

export const WordleGame: React.FC = (props) => {
  // Implementation
};

Scoring Example

• targetWord: "APPLE"
• guess: "PUPPY"
• Evaluation:
  • Index 0 ('P'): target has 2 P's, but index 2 matches exactly. Index 0 gets "present".
  • Index 1 ('U'): target has no U. Gets "absent".
  • Index 2 ('P'): matches 'P' at index 2. Gets "correct".
  • Index 3 ('P'): both P's accounted for. Gets "absent".
  • Index 4 ('Y'): target has no Y. Gets "absent".

Edge Cases

• Submitting fewer than 5 characters on Enter should do nothing.
• Ignoring non-alphabetic key presses.
• Case insensitivity for user keyboard input.