diff --git a/src/App.js b/src/App.js index 9e4a8fb..e40d70f 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ import React, {useState} from "react"; import CurrentScore from "./components/CurrentScore"; import Hangman from "./components/Hangman/Hangman"; import Header from "./components/Header"; -import PuzzleWord from "./components/PuzzleWord"; +import PuzzleWord from "./components/Hangman/PuzzleWord/PuzzleWord"; function App() { diff --git a/src/components/Hangman/PuzzleWord/Defeat.jsx b/src/components/Hangman/PuzzleWord/Defeat.jsx new file mode 100644 index 0000000..c821aa2 --- /dev/null +++ b/src/components/Hangman/PuzzleWord/Defeat.jsx @@ -0,0 +1,9 @@ +const Defeat = () => { + return ( +
+

DEFEAT

+
+ ) +} + +export default Defeat diff --git a/src/components/PuzzleWord.jsx b/src/components/Hangman/PuzzleWord/PuzzleWord.jsx similarity index 70% rename from src/components/PuzzleWord.jsx rename to src/components/Hangman/PuzzleWord/PuzzleWord.jsx index 37c5de7..8093f7c 100644 --- a/src/components/PuzzleWord.jsx +++ b/src/components/Hangman/PuzzleWord/PuzzleWord.jsx @@ -1,9 +1,13 @@ import React, {useState} from 'react' -import Register_Input from './Scripts/Register input' +import Register_Input from '../../Scripts/Register input' +import Defeat from './Defeat' +import Victory from './Victory' const PuzzleWord = ({hangmanFrame, setHangmanFrame}) => { const [actualWord, setActualWord] = useState('murcielago') + const [isVictory, setIsVictory] = useState(false) + const [isDefeat, setIsDefeat] = useState(false) const generatePuzzleWord = () => { const puzzleWord = document.getElementById('puzzleWord') @@ -35,17 +39,17 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame}) => { React.useEffect(() => { - - Register_Input(actualWord, hangmanFrame, setHangmanFrame) + Register_Input(actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat) }, [hangmanFrame]) - return ( -
- -
+ <> +
+ {isVictory ? : null} + {isDefeat ? : null} + ) } diff --git a/src/components/Hangman/PuzzleWord/Victory.jsx b/src/components/Hangman/PuzzleWord/Victory.jsx new file mode 100644 index 0000000..7ba7d58 --- /dev/null +++ b/src/components/Hangman/PuzzleWord/Victory.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +const Victory = () => { + return ( +
+

VICTORIA

+
+ ) +} + +export default Victory diff --git a/src/components/Scripts/CheckVictory.jsx b/src/components/Scripts/CheckVictory.jsx new file mode 100644 index 0000000..bebac6a --- /dev/null +++ b/src/components/Scripts/CheckVictory.jsx @@ -0,0 +1,25 @@ +import Victory from "../Hangman/PuzzleWord/Victory"; + +const CheckVictory = (setIsVictory) => { + + let allChildrenHaveText = true + + const puzzleWord = document.getElementById('puzzleWord') + const childrens = [...puzzleWord.children] + + childrens.forEach(children => { + + if (children.textContent === '') { + allChildrenHaveText = false + } + }); + + console.log(allChildrenHaveText) + + if (allChildrenHaveText) { + + setIsVictory(true) + } +} + +export default CheckVictory diff --git a/src/components/Scripts/Register input.js b/src/components/Scripts/Register input.js index bfbb91f..bb2387d 100644 --- a/src/components/Scripts/Register input.js +++ b/src/components/Scripts/Register input.js @@ -1,12 +1,16 @@ -const Register_Input = (actualWord, hangmanFrame, setHangmanFrame) => { +import CheckVictory from "./CheckVictory.jsx"; + +const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat) => { const alphabet = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n", "ñ","o","p","q","r","s","t","u","v","w","x","y","z"]; const keyRegister = (event) => { const currentKey = event.key.toLowerCase() + + console.log(hangmanFrame) - if (hangmanFrame < 6 && alphabet.includes(currentKey) ) { + if (hangmanFrame <= 5 && alphabet.includes(currentKey) ) { actualWord = actualWord.toLowerCase() @@ -41,16 +45,25 @@ const Register_Input = (actualWord, hangmanFrame, setHangmanFrame) => { }); + CheckVictory(setIsVictory) + } else { const quantity = hangmanFrame + 1 setHangmanFrame(quantity) + if (hangmanFrame === 5) { + setIsDefeat(true) + + } + removeRegisterInput() } } + + } const removeRegisterInput = () => {