diff --git a/src/components/WordInput.js b/src/components/WordInput.js index f27033b06239d4416c4e484c0aae85bbb671d55e..4bc6fb4fed428f9f3462995748088d841d13de13 100644 --- a/src/components/WordInput.js +++ b/src/components/WordInput.js @@ -9,6 +9,8 @@ const WordInput = () => { const NUM_TRY = 6; const WORD_LENGTH = 5; + const [isEnabled, setIsEnabled] = React.useState(true); + const [neededWord, setNeededWord] = React.useState([]); const [currentTry, setCurrentTry] = React.useState(0); const [word, setWord] = React.useState([]); const [allWords, setAllWords] = React.useState([]); @@ -47,9 +49,15 @@ const WordInput = () => { const charBoxes = []; getWord().then((response) => { if (response.error != undefined) { - al = alert("Error when get answer (" + response.error + ")"); + setPopUp({ + show: true, + text: response.error, + buttonText: "Refresh", + buttonHandler: () => {window.location.reload()}, + }); } setAnswer(response.res); + console.log(response.res) }); for (let i = 0; i < WORD_LENGTH; i++) { charBoxes.push({ char: "", answer: answer }); @@ -68,8 +76,16 @@ const WordInput = () => { setInputBox(initInputBox); setWord([]); } + + const toggleSwitch = () => { + setIsEnabled(previousState => !previousState); + console.log(isEnabled); + } - const al = null; + let button = null; + if (currentTry === 0) { + button = <button onClick={toggleSwitch}>{isEnabled ? "Easy" : "Hard"}</button>; + } React.useEffect(() => { startGame(); @@ -91,22 +107,56 @@ const WordInput = () => { } } else { if (e.key === "Enter") { - // TODO: Fix bug for character less than asked - // TODO: Handle error to be served on Pop-up/Dialog box + if (currentTry >= NUM_TRY) { + return; + } let currentInput = []; const validatedInput = await validateInput(word, answer); if (validatedInput["error"]) { - console.log(validatedInput["error"]); + if (validatedInput["error"] === "Not enough characters") { + setPopUp({ + show: true, + text: validatedInput["error"], + buttonText: "Ok", + buttonHandler: () => {}, + }); + } else { + setPopUp({ + show: true, + text: validatedInput["error"], + buttonText: "Ok", + buttonHandler: () => {window.location.reload()}, + }); + } } else { var correct = true; + for (let i = 0; i < neededWord.length; i++) { + if (!word.includes(neededWord[i])) { + setPopUp({ + show: true, + text: "You need to use the letter that is already correct or misplaced in the word", + buttonText: "Ok", + buttonHandler: () => {}, + }); + return; + } + } + validatedInput["result"].flatMap((e, idx) => { currentInput = [...currentInput, { char: word[idx], answer: e }]; if (e !== "correct") { correct = false; } + + if (isEnabled) { + if (e === "correct" || e === "misplaced") { + setNeededWord(prev => [...prev, word[idx]]) + } + } }); + setAllWords(prev => { const newState = [...prev]; newState[currentTry] = <WordBox chars={currentInput} />; @@ -151,7 +201,6 @@ const WordInput = () => { return ( <div className="word-input"> - {al} {allWords.slice(0, currentTry)} <div className="word-box input-box"> {inputBox} @@ -164,6 +213,8 @@ const WordInput = () => { buttonHandler={popUp.buttonHandler} onCloseHandler={popUpCloseHandler} /> + {button} + <p>Mode: {isEnabled ? "Hard" : "Easy"}</p> </div> ); }