diff --git a/src/App.tsx b/src/App.tsx index c850403..ba1045e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,15 +1,16 @@ import { useState, useEffect } from "react"; +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 { getGuessStatuses } from "./lib/statuses"; -import { solution, isWordInWordList, isWinningWord } from "./lib/words"; +import { isWordInWordList, isWinningWord } from "./lib/words"; function App() { const [guesses, setGuesses] = useState([]); const [currentGuess, setCurrentGuess] = useState(""); const [isGameWon, setIsGameWon] = useState(false); const [isWinModalOpen, setIsWinModalOpen] = useState(false); + const [isWordNotFoundAlertOpen, setIsWordNotFoundAlertOpen] = useState(false); useEffect(() => { if (isGameWon) { @@ -29,8 +30,10 @@ function App() { const onEnter = () => { if (!isWordInWordList(currentGuess)) { - return console.error("not in word list"); - // TODO add messaging for user + setIsWordNotFoundAlertOpen(true); + setTimeout(() => { + setIsWordNotFoundAlertOpen(false); + }, 2000); } if (currentGuess.length === 5 && guesses.length < 6 && !isGameWon) { if (isWinningWord(currentGuess)) { @@ -42,7 +45,8 @@ function App() { }; return ( -
+
+ { + return ( + +
+
+

+ {message} +

+
+
+
+ ); +}; diff --git a/src/components/grid/Grid.tsx b/src/components/grid/Grid.tsx index 15f9fc4..b6f5832 100644 --- a/src/components/grid/Grid.tsx +++ b/src/components/grid/Grid.tsx @@ -12,7 +12,7 @@ export const Grid = ({ guesses, currentGuess }: Props) => { guesses.length < 5 ? Array.from(Array(5 - guesses.length)) : []; return ( - <> +
{guesses.map((guess, i) => ( ))} @@ -20,6 +20,6 @@ export const Grid = ({ guesses, currentGuess }: Props) => { {empties.map((_, i) => ( ))} - +
); }; diff --git a/src/lib/statuses.ts b/src/lib/statuses.ts index 3665ff7..d784a05 100644 --- a/src/lib/statuses.ts +++ b/src/lib/statuses.ts @@ -59,21 +59,27 @@ export const getStatuses = ( export const getGuessStatuses = (guess: string): CharStatus[] => { const splitSolution = solution.split(""); - const solutionCharsTaken = splitSolution.map((x) => false); + const splitGuess = guess.split(""); - const statuses: CharStatus[] = []; + const solutionCharsTaken = splitSolution.map((_) => false); - guess.split("").forEach((letter, i) => { - // handle the correct case + const statuses: CharStatus[] = Array.from(Array(guess.length)); + + // handle all correct cases first + splitGuess.forEach((letter, i) => { if (letter === splitSolution[i]) { - statuses.push("correct"); + statuses[i] = "correct"; solutionCharsTaken[i] = true; return; } + }); + + splitGuess.forEach((letter, i) => { + if (statuses[i]) return; - // handles the absent case if (!splitSolution.includes(letter)) { - statuses.push("absent"); + // handles the absent case + statuses[i] = "absent"; return; } @@ -81,12 +87,13 @@ export const getGuessStatuses = (guess: string): CharStatus[] => { const indexOfPresentChar = splitSolution.findIndex( (x, index) => x === letter && !solutionCharsTaken[index] ); + if (indexOfPresentChar > -1) { - statuses.push("present"); + statuses[i] = "present"; solutionCharsTaken[indexOfPresentChar] = true; return; } else { - statuses.push("absent"); + statuses[i] = "absent"; return; } });