Actual build cancelled.

public/sass/_letters-registered.scss

@@ -0,0 +1,17 @@
+.letters-registered {
+    margin: 0px 5vw;
+
+    display: flex;
+
+    align-items: center;
+
+    font-family: 'Times New Roman', Times, serif;
+    color: rgb(145, 140, 108);
+    font-size: 50pt;
+
+    height: 20vh;
+
+    span {
+        margin-left: 1vw;
+    }
+}

src/App.js

@@ -38,7 +38,6 @@ function App() {
     
     RecoveryCurrentScore(setCurrentScore)
     
-    
     RecoveryCurrentCategory(setCategory)
     setcategoryIsReady(true)
     
@@ -46,6 +45,7 @@ function App() {
     RecoveryCurrentLanguage(setLanguage)
     ChangeTitle(language)
     setLanguageIsReady(true)
+
   }, [])
 
   if (isVictory || isDefeat) {
@@ -56,7 +56,7 @@ function App() {
         AlmacenateCategory(category)
         AlmacenateLanguage(language)
 
-        window.location.reload(false)
+        window.location.reload(true)
         }, 3000)
   }
 

src/components/Hangman/PuzzleWord/AddLettersRegistered.js

@@ -0,0 +1,23 @@
+import alphabet from './alphabet'
+
+const AddLettersRegistered = (lastLetterRegistered, setLastLetterRegistered) => {
+
+    const addLetterHistory = (event) => {
+
+        const currentKey = event.key
+        
+        if (!lastLetterRegistered.includes(currentKey.toUpperCase()) && alphabet.includes(currentKey.toLowerCase())) {
+            
+            const array = [...lastLetterRegistered, currentKey.toUpperCase()]
+            
+            setLastLetterRegistered(array)
+            console.log(lastLetterRegistered)
+        }
+
+        window.removeEventListener('keyup', addLetterHistory)   
+    }
+
+    window.addEventListener('keyup', addLetterHistory)
+}
+
+export default AddLettersRegistered

src/components/Hangman/PuzzleWord/CheckVictory.js

@@ -0,0 +1,24 @@
+//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
+        }
+    });
+
+    if (allChildrenHaveText) {
+
+        setIsVictory(true)
+        
+    }
+}
+
+export default CheckVictory

src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js

@@ -2,34 +2,38 @@ import {firestore} from '../../../../Firebase/Firebase_Config'
 import { getFirestore, collection, doc, getDocs, getDoc } from 'firebase/firestore/lite';
 import GetRandomCategory from './GetRandomCategory';
 
-const BringTheWords = async (language = false, category = false) => {
+const BringTheWords = async (language = false, category = false, actualWord) => {
 
-    console.log(category)
+    if (!actualWord) {
 
-    if (!language) {
-
-        language = 'english'
-
-    }
-
-    if (!category) {
-
-        category = await GetRandomCategory()
         
-    }
+        console.log(category)
-    
+        
-    try {
+        if (!language) {
 
-        const db = getFirestore(firestore)
+            language = 'english'
-        const data = collection(db, `hangman_words/${language}/${category}`)
-        const result = await getDocs(data)
 
-        const words = await result.docs.map(doc => doc.id)
+        }
 
-        return words
+        if (!category) {
 
-    } catch (error) {
+            category = await GetRandomCategory()
-        console.log(error)
+            
+        }
+        
+        try {
+
+            const db = getFirestore(firestore)
+            const data = collection(db, `hangman_words/${language}/${category}`)
+            const result = await getDocs(data)
+            
+            const words = await result.docs.map(doc => doc.id)
+            
+            return words
+            
+        } catch (error) {
+            console.log(error)
+        }
     }
 }
 

src/components/Hangman/PuzzleWord/PuzzleWord.jsx

@@ -30,23 +30,9 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor
             puzzleWord.appendChild(counter)
         }
 
-        
-        
-        if (actualWord && !displayApp) {
-
-            generatePuzzleWord()
-            setDisplayApp(true)
-    
-        }
-        
-    }, [actualWord, category, displayApp, language, setDisplayApp])
-
-
-    React.useEffect(() => {
-
         const definePuzzle = async () => {
         
-            const words = await BringTheWords(language, category)
+            const words = await BringTheWords(language, category, actualWord)
             const wordSelection = await SelectRandomWord(words)
             
             const word = await words[wordSelection]
@@ -57,17 +43,29 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor
         
         if (!displayApp && !actualWord) {
 
-            if ( categoryIsReady) {
-                
                 definePuzzle()
-            }
+            
         }
 
+        
+        if (actualWord && !displayApp) {
 
-        if (displayApp) {
+            generatePuzzleWord()
-
+            setDisplayApp(true)
-            Register_Input(actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat)
+    
         }
+        
+    }, [actualWord, category, displayApp, language, setDisplayApp])
+
+    if (displayApp && actualWord) {
+
+        Register_Input(actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat)
+    }
+    React.useEffect(() => {
+
+
+
+        
 
 
     }, [hangmanFrame, displayApp, actualWord, setHangmanFrame, setIsDefeat, setIsVictory, categoryIsReady, category])

src/components/Hangman/PuzzleWord/Register input.js

@@ -0,0 +1,86 @@
+import CheckVictory from "./CheckVictory";
+import alphabet from './alphabet.js'
+
+const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat) => {
+
+    const keyRegister = (event) => {
+        
+        const currentKey = event.key.toLowerCase()
+
+        if (hangmanFrame <= 5 && alphabet.includes(currentKey) ) {
+
+            actualWord = actualWord.toLowerCase()
+            
+            const puzzleWord = document.getElementById('puzzleWord')
+
+            const letters = []
+
+            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
+                    }
+
+
+                });
+
+
+                CheckVictory(setIsVictory)
+                
+            } else {
+                
+                setHangmanFrame(hangmanFrame + 1)
+
+                if (hangmanFrame === 5) {
+
+                    for (let i = 0; i < actualWord.length; i++) {
+            
+                        let letter = document.createElement('span')
+                        
+                        letter.className = 'letter'
+
+                        letter.textContent = actualWord[i]
+
+                        if (i === 0) {
+
+                            letter.textContent = letter.textContent.toUpperCase()
+                        }
+
+                        
+                        puzzleWord.replaceChild(letter, puzzleWord.children[i])
+                    }
+
+                    setIsDefeat(true)
+        
+                }
+
+            }
+
+        }        
+    }
+
+    const removeRegisterInput = () => {
+            
+        window.removeEventListener('keyup', keyRegister)        
+    }
+
+    window.addEventListener('keyup', keyRegister)
+}
+
+export default Register_Input

src/components/Hangman/PuzzleWord/alphabet.js

@@ -0,0 +1,3 @@
+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"];
+
+export default alphabet

src/components/LettersRegistered/LettersRegistered.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const LettersRegistered = ({lettersRegistered, setLettersRegistered}) => {
+
+    return (
+        <div className="letters-registered">
+            {
+                lettersRegistered.map(letter => 
+
+                    <span key={letter}>{letter}</span>
+                )
+            }
+        </div>
+    )
+}
+
+export default LettersRegistered

src/components/Scripts/RecoveryCurrentCategory.js

@@ -2,6 +2,11 @@ export const RecoveryCurrentCategory = (setCategory) => {
     
     if (localStorage.getItem('category')) {
 
+      if (localStorage.getItem('category') === 'false') {
+
+        setCategory(false)
+      }
+
         setCategory(localStorage.getItem('category'))
         localStorage.removeItem('category')
       }