Logic for bring the words from Firebase done

public/css/index.css

@@ -5,7 +5,7 @@ html, body {
 
 header {
   border-bottom: 1px solid #c8c8c8;
-  height: 10vh;
+  height: 15vh;
   display: flex;
   flex-direction: column;
   align-items: center;

public/sass/_header.scss

@@ -1,7 +1,7 @@
 header {
     border-bottom: 1px solid rgb(200, 200, 200);
 
-    height: 10vh;
+    height: 15vh;
 
     display: flex;
     flex-direction: column;

src/App.js

@@ -10,7 +10,9 @@ import AlmacenateCurrentScore from "./components/Scripts/AlmacenateCurrentScore"
 
 function App() {
 
-  const [language, setLanguage] = useState('english')
+  const [language, setLanguage] = useState('spanish')
+  const [category, setCategory] = useState(false)
+
   const [currentScore, setCurrentScore] = useState(0)
 
   const [hangmanFrame, setHangmanFrame] = useState(0)
@@ -36,7 +38,7 @@ function App() {
     setTimeout(() => {
         AlmacenateCurrentScore(currentScore)
 
-        window.location.reload(true);
+        window.location.reload(false);
         }, 3000)
   }
 
@@ -61,6 +63,10 @@ function App() {
 
           <PuzzleWord
 
+          language={language}
+
+          category={category}
+
           hangmanFrame={hangmanFrame}
           setHangmanFrame={setHangmanFrame}
 
@@ -73,6 +79,7 @@ function App() {
           isDefeat={isDefeat}
           setIsDefeat={setIsDefeat}
 
+          displayApp={displayApp}
           setDisplayApp={setDisplayApp}
           />
 

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

@@ -0,0 +1,34 @@
+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) => {
+
+    if (!language) {
+
+        language = 'english'
+
+    }
+
+    if (!category) {
+
+        category = await GetRandomCategory()
+        
+    }
+    
+    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)
+    }
+}
+
+export default BringTheWords

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

@@ -0,0 +1,29 @@
+import {firestore} from '../../../../Firebase/Firebase_Config'
+import { getFirestore, collection, doc, getDocs, getDoc } from 'firebase/firestore/lite';
+
+const GetRandomCategory = async () => {
+
+
+    let categoriesList = []
+
+        try {
+
+            const db = getFirestore(firestore)
+            const data = collection(db, `categories`)
+            const result = await getDocs(data)
+
+            result.docs.map(doc => categoriesList.push(doc.id))
+
+            const randomNumber = Math.trunc(
+
+                Math.random() * (categoriesList.length - 0) + 0
+            )
+            
+            return categoriesList[randomNumber]
+
+        } catch (error) {
+            console.log(error)
+        }
+}
+
+export default GetRandomCategory

src/components/Hangman/PuzzleWord/PuzzleWord.jsx

@@ -1,11 +1,13 @@
 import React, {useState} from 'react'
 import Register_Input from '../../Scripts/Register input'
+import SelectRandomWord from '../../Scripts/SelectRandomWord'
 import Defeat from './Defeat'
+import BringTheWords from './Firebase Querys/BringTheWords'
 import Victory from './Victory'
 
-const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat, setDisplayApp}) => {
+const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat, displayApp, setDisplayApp, language, category}) => {
 
-    const [actualWord, setActualWord] = useState('papa')
+    const [actualWord, setActualWord] = useState('')
 
     const generatePuzzleWord = () => {  
             
@@ -26,23 +28,47 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor
         counter.textContent = '(' + actualWord.length + ')'
     
         puzzleWord.appendChild(counter)
-            }
+    }
 
+    
     React.useEffect(() => {
+        const definePuzzle = async () => {
         
-        generatePuzzleWord()
+            const words = await BringTheWords(language, category)
-        setDisplayApp(true)
+            const wordSelection = await SelectRandomWord(words)
-        
+            
-    }, [])
+            const word = await words[wordSelection]
+    
+            await setActualWord(word)
 
+        }
+        if (!displayApp && !actualWord) {
+
+            definePuzzle()
+        }
+
+        
+        if (actualWord && !displayApp) {
+
+            generatePuzzleWord()
+            setDisplayApp(true)
+    
+        }
+        
+    }, [actualWord])
 
 
     React.useEffect(() => {
 
-        Register_Input(actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat)
+        if (displayApp) {
-        
-    }, [hangmanFrame])
 
+            Register_Input(actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat)
+        }
+
+
+    }, [hangmanFrame, displayApp])
+    
+    
    
     
     return (

src/components/Scripts/CheckVictory.js

@@ -14,8 +14,6 @@ const CheckVictory = (setIsVictory) => {
         }
     });
 
-    console.log(allChildrenHaveText)
-
     if (allChildrenHaveText) {
 
         setIsVictory(true)

src/components/Scripts/Register input.js

@@ -2,13 +2,11 @@ import CheckVictory from "./CheckVictory";
 
 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 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 <= 5 && alphabet.includes(currentKey) ) {
 
@@ -18,8 +16,6 @@ const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory,
 
             const letters = []
 
-            console.log(event.key)
-
             if (actualWord.search(currentKey) + 1) {
                 
                 for (let i = 0; i < actualWord.length; i++) {
@@ -53,6 +49,24 @@ const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory,
                 setHangmanFrame(quantity)
 
                 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)
         
                 }

src/components/Scripts/SelectRandomWord.js

@@ -0,0 +1,11 @@
+const SelectRandomWord = (arrayWords) => {
+
+    const randomWord = Math.trunc(
+
+        Math.random() * (arrayWords.length - 0) + 0
+    )
+
+    return randomWord
+}
+
+export default SelectRandomWord