alert for if game is lost

src/App.tsx

@@ -3,7 +3,7 @@ import { Alert } from "./components/alerts/Alert";
 import { Grid } from "./components/grid/Grid";
 import { Keyboard } from "./components/keyboard/Keyboard";
 import { WinModal } from "./components/win-modal/WinModal";
-import { isWordInWordList, isWinningWord } from "./lib/words";
+import { isWordInWordList, isWinningWord, solution } from "./lib/words";
 
 function App() {
   const [guesses, setGuesses] = useState<string[]>([]);
@@ -11,6 +11,7 @@ function App() {
   const [isGameWon, setIsGameWon] = useState(false);
   const [isWinModalOpen, setIsWinModalOpen] = useState(false);
   const [isWordNotFoundAlertOpen, setIsWordNotFoundAlertOpen] = useState(false);
+  const [isGameLost, setIsGameLost] = useState(false);
 
   useEffect(() => {
     if (isGameWon) {
@@ -35,18 +36,33 @@ function App() {
         setIsWordNotFoundAlertOpen(false);
       }, 2000);
     }
+
+    const winningWord = isWinningWord(currentGuess);
+
     if (currentGuess.length === 5 && guesses.length < 6 && !isGameWon) {
-      if (isWinningWord(currentGuess)) {
-        setIsGameWon(true);
-      }
       setGuesses([...guesses, currentGuess]);
       setCurrentGuess("");
+
+      if (winningWord) {
+        return setIsGameWon(true);
+      }
+
+      if (guesses.length === 5) {
+        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="Word not found" isOpen={isWordNotFoundAlertOpen} />
+      <Alert
+        message={`You lost, the word was ${solution}`}
+        isOpen={isGameLost}
+      />
       <Grid guesses={guesses} currentGuess={currentGuess} />
       <Keyboard
         onChar={onChar}