import React, { useState, useEffect, useCallback } from 'react'; import { RefreshCw, XCircle, CheckCircle } from 'lucide-react'; const WordGuessGame = () => { const wordList = [ 'REACT', 'CODE', 'GAME', 'TECH', 'WORLD', 'SMART', 'SOLVE', 'LOGIC', 'BRAIN', 'SKILL' ]; const [targetWord, setTargetWord] = useState(''); const [guesses, setGuesses] = useState(Array(6).fill(null).map(() => Array(5).fill(''))); const [currentGuess, setCurrentGuess] = useState(0); const [gameStatus, setGameStatus] = useState('playing'); const [feedback, setFeedback] = useState([]); const initializeGame = useCallback(() => { const randomWord = wordList[Math.floor(Math.random() * wordList.length)]; setTargetWord(randomWord); setGuesses(Array(6).fill(null).map(() => Array(5).fill(''))); setCurrentGuess(0); setGameStatus('playing'); setFeedback([]); }, []); useEffect(() => { initializeGame(); }, [initializeGame]); const handleKeyPress = useCallback((event) => { if (gameStatus !== 'playing') return; const key = event.key.toUpperCase(); const newGuesses = [...guesses]; if (key === 'BACKSPACE') { // Remove last letter const rowIndex = currentGuess; const emptyIndex = newGuesses[rowIndex].findIndex(letter => letter === ''); if (emptyIndex > 0) { newGuesses[rowIndex][emptyIndex - 1] = ''; setGuesses(newGuesses); } } else if (key === 'ENTER') { // Validate and submit guess const currentRow = newGuesses[currentGuess]; if (currentRow.every(letter => letter !== '')) { const guessWord = currentRow.join(''); const newFeedback = checkGuess(guessWord); setFeedback([...feedback, newFeedback]); if (guessWord === targetWord) { setGameStatus('won'); } else if (currentGuess === 5) { setGameStatus('lost'); } else { setCurrentGuess(currentGuess + 1); } } } else if (/^[A-Z]$/.test(key)) { // Add letter to current guess const rowIndex = currentGuess; const emptyIndex = newGuesses[rowIndex].findIndex(letter => letter === ''); if (emptyIndex !== -1) { newGuesses[rowIndex][emptyIndex] = key; setGuesses(newGuesses); } } }, [guesses, currentGuess, gameStatus, targetWord, feedback]); useEffect(() => { window.addEventListener('keydown', handleKeyPress); return () => window.removeEventListener('keydown', handleKeyPress); }, [handleKeyPress]); const checkGuess = (guessWord) => { return guessWord.split('').map((letter, index) => { if (letter === targetWord[index]) { return { letter, status: 'correct' }; } if (targetWord.includes(letter)) { return { letter, status: 'present' }; } return { letter, status: 'absent' }; }); }; const renderGameBoard = () => { return guesses.map((row, rowIndex) => (