diff --git a/src/components/WordInput.js b/src/components/WordInput.js index ac842740b9358a0a99c5db2cc48bb1fbc9c36b34..f27033b06239d4416c4e484c0aae85bbb671d55e 100644 --- a/src/components/WordInput.js +++ b/src/components/WordInput.js @@ -28,25 +28,22 @@ const WordInput = () => { }); }; - function popUpButtonHandler() { - // your logic goes here - // if need another logic for pop up, please create another function - // and you can assign it to buttonFunc - - console.log("It works!"); - } - - const resetInputBox = () => { - const initInputBox = []; - for (let i = 0; i < WORD_LENGTH; i++) { - initInputBox.push(<CharBox char=""/>); - } - setInputBox(initInputBox); + const resetGame = () => { + setCurrentTry(0); setWord([]); - } + setAllWords([]); + setInputBox([]); + setAnswer(""); + setPopUp({ + show: false, + text: "", + buttonText: "", + buttonHandler: () => {}, + }); + startGame(); + }; - const al = null; - React.useEffect(() => { + const startGame = () => { const charBoxes = []; getWord().then((response) => { if (response.error != undefined) { @@ -61,6 +58,21 @@ const WordInput = () => { setAllWords(prev => [...prev, <WordBox chars={charBoxes} />]); } resetInputBox(); + }; + + const resetInputBox = () => { + const initInputBox = []; + for (let i = 0; i < WORD_LENGTH; i++) { + initInputBox.push(<CharBox char=""/>); + } + setInputBox(initInputBox); + setWord([]); + } + + const al = null; + + React.useEffect(() => { + startGame(); }, []); document.onkeyup = async function(e) { @@ -79,8 +91,6 @@ const WordInput = () => { } } else { if (e.key === "Enter") { - // TODO: Check if user win - // TODO: Check if user lose // TODO: Fix bug for character less than asked // TODO: Handle error to be served on Pop-up/Dialog box @@ -89,23 +99,45 @@ const WordInput = () => { if (validatedInput["error"]) { console.log(validatedInput["error"]); } else { + var correct = true; + validatedInput["result"].flatMap((e, idx) => { currentInput = [...currentInput, { char: word[idx], answer: e }]; + if (e !== "correct") { + correct = false; + } }); setAllWords(prev => { const newState = [...prev]; newState[currentTry] = <WordBox chars={currentInput} />; return newState; }); - setCurrentTry(prev => prev + 1); - resetInputBox(); + + if (correct) { + // User win + setPopUp({ + show: true, + text: "You win!", + buttonText: "Play again", + buttonHandler: resetGame, + }); + } + + if (currentTry === NUM_TRY - 1) { + // User lose + setCurrentTry(prev => prev + 1); + setPopUp({ + show: true, + text: "You got it!", + buttonText: "OK", + buttonHandler: resetGame, + }); + setInputBox(); + } else { + setCurrentTry(prev => prev + 1); + resetInputBox(); + } } - setPopUp({ - show: true, - text: "You got it!", - buttonText: "OK", - buttonHandler: popUpButtonHandler, - }); } else if (e.key === "Backspace" && word.length > 0) { setWord([...word.slice(0,-1)]); setInputBox(prevState => { diff --git a/src/pages/Home.js b/src/pages/Home.js index cb1d732eed24a739935e0b99668027dc5482dfdd..bed9fd5cb12d42654e3ca311249be7e5c8c32db0 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,4 +1,3 @@ -import logo from '../logo.svg'; import React from 'react'; import WordInput from '../components/WordInput';