honigle/src/App.tsx

62 lines
1.6 KiB
TypeScript
Raw Normal View History

2022-01-09 16:04:33 -05:00
import { useState, useEffect } from "react";
2022-01-09 21:02:41 -05:00
import { Grid } from "./components/grid/Grid";
2022-01-08 18:35:47 -05:00
import { Keyboard } from "./components/keyboard/Keyboard";
2022-01-09 16:04:33 -05:00
import { WinModal } from "./components/win-modal/WinModal";
2022-01-09 21:02:41 -05:00
import { getGuessStatuses } from "./lib/statuses";
2022-01-09 16:04:33 -05:00
import { solution, isWordInWordList, isWinningWord } from "./lib/words";
function App() {
2022-01-08 18:35:47 -05:00
const [guesses, setGuesses] = useState<string[]>([]);
const [currentGuess, setCurrentGuess] = useState("");
2022-01-09 16:04:33 -05:00
const [isGameWon, setIsGameWon] = useState(false);
const [isWinModalOpen, setIsWinModalOpen] = useState(false);
useEffect(() => {
if (isGameWon) {
setIsWinModalOpen(true);
}
}, [isGameWon]);
2022-01-08 18:35:47 -05:00
const onChar = (value: string) => {
2022-01-09 16:04:33 -05:00
if (currentGuess.length < 5 && guesses.length < 6) {
2022-01-08 18:35:47 -05:00
setCurrentGuess(`${currentGuess}${value}`);
}
};
const onDelete = () => {
setCurrentGuess(currentGuess.slice(0, -1));
};
const onEnter = () => {
2022-01-09 16:04:33 -05:00
if (!isWordInWordList(currentGuess)) {
return console.error("not in word list");
// TODO add messaging for user
}
if (currentGuess.length === 5 && guesses.length < 6 && !isGameWon) {
if (isWinningWord(currentGuess)) {
setIsGameWon(true);
}
2022-01-08 18:35:47 -05:00
setGuesses([...guesses, currentGuess]);
setCurrentGuess("");
}
};
return (
2022-01-08 18:35:47 -05:00
<div>
2022-01-09 21:02:41 -05:00
<Grid guesses={guesses} currentGuess={currentGuess} />
2022-01-09 17:06:37 -05:00
<Keyboard
onChar={onChar}
onDelete={onDelete}
onEnter={onEnter}
guesses={guesses}
/>
2022-01-09 16:04:33 -05:00
<WinModal
isOpen={isWinModalOpen}
handleClose={() => setIsWinModalOpen(false)}
/>
</div>
);
}
export default App;