2022-01-09 16:04:33 -05:00
|
|
|
import { useState, useEffect } from "react";
|
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";
|
|
|
|
import { solution, isWordInWordList, isWinningWord } from "./lib/words";
|
2022-01-08 13:21:04 -05:00
|
|
|
|
|
|
|
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("");
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
console.log(currentGuess);
|
|
|
|
console.log(guesses);
|
2022-01-09 16:04:33 -05:00
|
|
|
console.log(solution);
|
2022-01-08 18:35:47 -05:00
|
|
|
|
2022-01-08 13:21:04 -05:00
|
|
|
return (
|
2022-01-08 18:35:47 -05:00
|
|
|
<div>
|
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)}
|
|
|
|
/>
|
2022-01-08 13:21:04 -05:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|