alert for if game is lost
This commit is contained in:
parent
7d0a4fd758
commit
e321441f96
1 changed files with 20 additions and 4 deletions
24
src/App.tsx
24
src/App.tsx
|
@ -3,7 +3,7 @@ import { Alert } from "./components/alerts/Alert";
|
||||||
import { Grid } from "./components/grid/Grid";
|
import { Grid } from "./components/grid/Grid";
|
||||||
import { Keyboard } from "./components/keyboard/Keyboard";
|
import { Keyboard } from "./components/keyboard/Keyboard";
|
||||||
import { WinModal } from "./components/win-modal/WinModal";
|
import { WinModal } from "./components/win-modal/WinModal";
|
||||||
import { isWordInWordList, isWinningWord } from "./lib/words";
|
import { isWordInWordList, isWinningWord, solution } from "./lib/words";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [guesses, setGuesses] = useState<string[]>([]);
|
const [guesses, setGuesses] = useState<string[]>([]);
|
||||||
|
@ -11,6 +11,7 @@ function App() {
|
||||||
const [isGameWon, setIsGameWon] = useState(false);
|
const [isGameWon, setIsGameWon] = useState(false);
|
||||||
const [isWinModalOpen, setIsWinModalOpen] = useState(false);
|
const [isWinModalOpen, setIsWinModalOpen] = useState(false);
|
||||||
const [isWordNotFoundAlertOpen, setIsWordNotFoundAlertOpen] = useState(false);
|
const [isWordNotFoundAlertOpen, setIsWordNotFoundAlertOpen] = useState(false);
|
||||||
|
const [isGameLost, setIsGameLost] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isGameWon) {
|
if (isGameWon) {
|
||||||
|
@ -35,18 +36,33 @@ function App() {
|
||||||
setIsWordNotFoundAlertOpen(false);
|
setIsWordNotFoundAlertOpen(false);
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const winningWord = isWinningWord(currentGuess);
|
||||||
|
|
||||||
if (currentGuess.length === 5 && guesses.length < 6 && !isGameWon) {
|
if (currentGuess.length === 5 && guesses.length < 6 && !isGameWon) {
|
||||||
if (isWinningWord(currentGuess)) {
|
|
||||||
setIsGameWon(true);
|
|
||||||
}
|
|
||||||
setGuesses([...guesses, currentGuess]);
|
setGuesses([...guesses, currentGuess]);
|
||||||
setCurrentGuess("");
|
setCurrentGuess("");
|
||||||
|
|
||||||
|
if (winningWord) {
|
||||||
|
return setIsGameWon(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (guesses.length === 5) {
|
||||||
|
setIsGameLost(true);
|
||||||
|
return setTimeout(() => {
|
||||||
|
setIsGameLost(false);
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="py-8 max-w-7xl mx-auto sm:px-6 lg:px-8">
|
<div className="py-8 max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||||
<Alert message="Word not found" isOpen={isWordNotFoundAlertOpen} />
|
<Alert message="Word not found" isOpen={isWordNotFoundAlertOpen} />
|
||||||
|
<Alert
|
||||||
|
message={`You lost, the word was ${solution}`}
|
||||||
|
isOpen={isGameLost}
|
||||||
|
/>
|
||||||
<Grid guesses={guesses} currentGuess={currentGuess} />
|
<Grid guesses={guesses} currentGuess={currentGuess} />
|
||||||
<Keyboard
|
<Keyboard
|
||||||
onChar={onChar}
|
onChar={onChar}
|
||||||
|
|
Loading…
Add table
Reference in a new issue