Game logic done

src/App.js

@@ -9,6 +9,8 @@ function App() {
   const [language, setLanguage] = useState('english')
   const [currentScore, setCurrentScore] = useState(0)
 
+  const [hangmanFrame, setHangmanFrame] = useState(0)
+
   return (
    <>
     <Header language={language}/>
@@ -16,12 +18,18 @@ function App() {
     <div className="app">
 
       <div className='column-1'>
-        <Hangman />
+        <Hangman
+          hangmanFrame={hangmanFrame}
+        />
       </div>
       
       <div className='column-2'>
         <CurrentScore currentScore={currentScore} />
-        <PuzzleWord />
+        <PuzzleWord
+
+          hangmanFrame={hangmanFrame}
+          setHangmanFrame={setHangmanFrame}
+        />
 
       </div>
 

src/components/Hangman/Hangman.jsx

@@ -1,13 +1,12 @@
 import React, {useState} from 'react'
 import { images } from './Images'
 
-const Hangman = () => {
+const Hangman = (props) => {
 
-    const [hangmanFrame, setHangmanFrame] = useState(0)
     
     return (
         <div className="hangman">
-            <img src={images[hangmanFrame]} alt="" />
+            <img src={images[props.hangmanFrame]} alt="" />
         </div>
     )
 }

src/components/PuzzleWord.jsx

@@ -1,14 +1,11 @@
 import React, {useState} from 'react'
+import Register_Input from './Scripts/Register input'
 
-const PuzzleWord = () => {
+const PuzzleWord = ({hangmanFrame, setHangmanFrame}) => {
 
-    const [actualWord, setActualWord] = useState('murcielagos')
-    const [hiddenWord, setHiddenWord] = useState('')
-
-    console.log(actualWord.length)
-
-    React.useEffect(() => {
+    const [actualWord, setActualWord] = useState('murcielago')
 
+    const generatePuzzleWord = () => {
         const puzzleWord = document.getElementById('puzzleWord')
         
         for (let i = 0; i < actualWord.length; i++) {
@@ -26,12 +23,27 @@ const PuzzleWord = () => {
         counter.textContent = '(' + actualWord.length + ')'
 
         puzzleWord.appendChild(counter)
+    }
 
+    React.useEffect(() => {
+        
+        generatePuzzleWord()
+        
     }, [])
 
+
+
+    React.useEffect(() => {
+
+        
+        Register_Input(actualWord, hangmanFrame, setHangmanFrame)
+        
+    }, [hangmanFrame])
+    
+    
     return (
         <div className="puzzleWord" id="puzzleWord">
-            {hiddenWord}
+        
         </div>
         
     )

src/components/Scripts/Register input.js

@@ -0,0 +1,64 @@
+const Register_Input = (actualWord, hangmanFrame, setHangmanFrame) => {
+
+    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()
+
+        if (hangmanFrame < 6 && alphabet.includes(currentKey) ) {
+
+            actualWord = actualWord.toLowerCase()
+            
+            const puzzleWord = document.getElementById('puzzleWord')
+
+            const letters = []
+
+            console.log(event.key)
+
+            if (actualWord.search(currentKey) + 1) {
+                
+                for (let i = 0; i < actualWord.length; i++) {
+                    
+                    if (currentKey === actualWord[i]) {
+                        letters.push(i)
+                    }
+                }
+            
+                letters.forEach(letter => {
+                    
+                    const index = letter
+
+                    if (index === 0) {
+
+                        puzzleWord.children[index].textContent = currentKey.toUpperCase()
+                    }
+
+                    else {
+                        puzzleWord.children[index].textContent = currentKey
+                    }
+
+
+                });
+
+                
+            } else {
+                
+                const quantity = hangmanFrame + 1
+                setHangmanFrame(quantity)
+
+                removeRegisterInput()
+            }
+
+        }
+    }
+
+    const removeRegisterInput = () => {
+            
+        window.removeEventListener('keyup', keyRegister)        
+    }
+
+    window.addEventListener('keyup', keyRegister)
+}
+
+export default Register_Input