import React, { useState, useEffect } from 'react';const WORD_LENGTH = 5;const MAX_GUESSES = 6;const KEYBOARD_LETTERS = [ 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M'];const getRandomWord = () => { const words = ['REACT', 'REDUX', 'HOOKS', 'STATE', 'PROPS']; return words[Math.floor(Math.random() * words.length)];};const App = () => { const [answer, setAnswer] = useState(''); const [guesses, setGuesses] = useState(Array(MAX_GUESSES).fill('')); const [currentGuess, setCurrentGuess] = useState(''); const [gameOver, setGameOver] = useState(false); useEffect(() => { setAnswer(getRandomWord()); }, []); const handleKeyPress = (key) => { if (gameOver) return; if (key === 'ENTER') { if (currentGuess.length !== WORD_LENGTH) return; const newGuesses = [...guesses]; const currentGuessIndex = newGuesses.findIndex(guess => guess === ''); newGuesses[currentGuessIndex] = currentGuess; setGuesses(newGuesses); setCurrentGuess(''); if (currentGuess === answer) { setGameOver(true); } else if (currentGuessIndex === MAX_GUESSES - 1) { setGameOver(true); } } else if (key === 'BACKSPACE') { setCurrentGuess(currentGuess.slice(0, -1)); } else if (currentGuess.length < WORD_LENGTH) { setCurrentGuess(currentGuess + key); } }; const getLetterColor = (letter, index, guess) => { if (answer[index] === letter) { return 'green'; } else if (answer.includes(letter)) { return 'yellow'; } else { return 'gray'; } }; return (

Wordle Clone

{guesses.map((guess, i) => (
{Array(WORD_LENGTH).fill().map((_, j) => (
{guess[j] || ''}
))}
))}
{Array(WORD_LENGTH).fill().map((_, i) => (
{currentGuess[i] || ''}
))}
{KEYBOARD_LETTERS.map(letter => ( ))}
{gameOver && (

{currentGuess === answer ? 'You won!' : 'Game Over'}

The word was: {answer}

)}
);};export default App;