Victory and defeat logics done

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() {
 

src/components/Hangman/PuzzleWord/Defeat.jsx

@@ -0,0 +1,9 @@
+const Defeat = () => {
+    return (
+        <div>
+            <h1>DEFEAT</h1>
+        </div>
+    )
+}
+
+export default Defeat

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 (
-        <div className="puzzleWord" id="puzzleWord">
-        
-        </div>
+        <>
+            <div className="puzzleWord" id="puzzleWord"></div>
         
+            {isVictory ? <Victory /> : null}
+            {isDefeat ? <Defeat /> : null}
+        </>
     )
 }
 

src/components/Hangman/PuzzleWord/Victory.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Victory = () => {
+    return (
+        <div>
+            <h1>VICTORIA</h1>
+        </div>
+    )
+}
+
+export default Victory

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

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 = () => {