diff --git a/src/App.tsx b/src/App.tsx index c148bee..9a9b9ec 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -31,9 +31,13 @@ function App() { if (loaded?.solution !== solution) { return [] } - if (loaded.guesses.includes(solution)) { + const gameWasWon = loaded.guesses.includes(solution) + if (gameWasWon) { setIsGameWon(true) } + if (loaded.guesses.length === 6 && !gameWasWon) { + setIsGameLost(true) + } return loaded.guesses }) @@ -60,7 +64,7 @@ function App() { } const onEnter = () => { - if (!(currentGuess.length === 5)) { + if (!(currentGuess.length === 5) && !isGameLost) { setIsNotEnoughLetters(true) return setTimeout(() => { setIsNotEnoughLetters(false) @@ -88,26 +92,12 @@ function App() { if (guesses.length === 5) { setStats(addStatsForCompletedGame(stats, guesses.length + 1)) setIsGameLost(true) - return setTimeout(() => { - setIsGameLost(false) - }, 2000) } } } return ( <div className="py-8 max-w-7xl mx-auto sm:px-6 lg:px-8"> - <Alert message="Not enough letters" isOpen={isNotEnoughLetters} /> - <Alert message="Word not found" isOpen={isWordNotFoundAlertOpen} /> - <Alert - message={`You lost, the word was ${solution}`} - isOpen={isGameLost} - /> - <Alert - message="Game copied to clipboard" - isOpen={shareComplete} - variant="success" - /> <div className="flex w-80 mx-auto items-center mb-8"> <h1 className="text-xl grow font-bold">Not Wordle</h1> <InformationCircleIcon @@ -159,6 +149,18 @@ function App() { > About this game </button> + + <Alert message="Not enough letters" isOpen={isNotEnoughLetters} /> + <Alert message="Word not found" isOpen={isWordNotFoundAlertOpen} /> + <Alert + message={`You lost, the word was ${solution}`} + isOpen={isGameLost} + /> + <Alert + message="Game copied to clipboard" + isOpen={shareComplete} + variant="success" + /> </div> ) } diff --git a/src/components/alerts/Alert.tsx b/src/components/alerts/Alert.tsx index 22ef7d2..593b75e 100644 --- a/src/components/alerts/Alert.tsx +++ b/src/components/alerts/Alert.tsx @@ -10,7 +10,7 @@ type Props = { export const Alert = ({ isOpen, message, variant = 'warning' }: Props) => { const classes = classNames( - 'fixed top-2.5 left-1/2 transform -translate-x-1/2 max-w-sm w-full shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden', + 'fixed top-20 left-1/2 transform -translate-x-1/2 max-w-sm w-full shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden', { 'bg-rose-200': variant === 'warning', 'bg-green-200': variant === 'success', diff --git a/src/components/keyboard/Key.tsx b/src/components/keyboard/Key.tsx index 959ab58..1a5cbd1 100644 --- a/src/components/keyboard/Key.tsx +++ b/src/components/keyboard/Key.tsx @@ -30,11 +30,16 @@ export const Key = ({ } ) + const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => { + onClick(value) + event.currentTarget.blur() + } + return ( <button style={{ width: `${width}px`, height: '58px' }} className={classes} - onClick={() => onClick(value)} + onClick={handleClick} > {children || value} </button>