Game logic done

public/css/index.css

@@ -48,7 +48,7 @@ header h2 {
 .puzzleWord {
   font-family: "Rambla", sans-serif;
   font-weight: 400;
-  font-size: 60pt;
+  font-size: 50pt;
   display: flex;
   align-items: center;
   max-width: 70vw;
@@ -59,7 +59,10 @@ header h2 {
   width: 3vw;
   height: 70pt;
   margin-left: 2vw;
-  border-bottom: 3px solid #000;
+  border-bottom: 5px solid #000;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
 }
 .puzzleWord .counter {
   font-size: 40pt;

public/css/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_app.scss","../sass/_hangman.scss","../sass/_puzzleWord.scss","../sass/_current-score.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;;AAGJ;EACI;EAEA;EAEA;;;AC1BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_app.scss","../sass/_hangman.scss","../sass/_puzzleWord.scss","../sass/_current-score.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA;;;AC9BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI","file":"index.css"}

public/sass/_puzzleWord.scss

@@ -1,7 +1,7 @@
 .puzzleWord {
     @include bodyFont();
 
-    font-size: 60pt;
+    font-size: 50pt;
 
     display: flex;
     align-items: center;
@@ -16,7 +16,11 @@
         height: 70pt;
         margin-left: 2vw;
 
-        border-bottom: 3px solid #000;
+        border-bottom: 5px solid #000;
+
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
     }
 
     .counter {

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 [actualWord, setActualWord] = useState('murcielago')
-    const [hiddenWord, setHiddenWord] = useState('')
-
-    console.log(actualWord.length)
-
-    React.useEffect(() => {
 
+    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