bug fix

src/App.js

@@ -220,8 +220,8 @@ function App() {
           !displayApp ? <Loading /> : null
         }
 
-        {endOfGame === 'Victory' ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} /> : null}
-        {endOfGame === 'Defeat'  ? <Defeat /> : null}
+        {endOfGame === 'Victory' ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} language={language}/> : null}
+        {endOfGame === 'Defeat'  ? <Defeat language={language}/> : null}
 
     <LettersRegistered
           lettersRegistered={lettersRegistered}

src/Firebase Querys/BringTheWord.js

@@ -13,7 +13,8 @@ const BringTheWords = async (language = 'english', category = false, selectedWor
 
         if (!category || category === 'false') {
 
-            category = await GetRandomCategory()
+            category = await GetRandomCategory(language)
+            console.log(category)
             
         }
         
@@ -24,7 +25,11 @@ const BringTheWords = async (language = 'english', category = false, selectedWor
             const result = await getDocs(data)
             
             
-            const words = await result.docs.map(doc => doc.id)            
+            console.log(result)
+
+            const words = await result.docs.map(doc => doc.id)
+            
+            console.log(words)
             const word = await SelectRandomWord(await words)
 
             return await word

src/Firebase Querys/GetRandomCategory.js

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

src/General Scripts/DetermineUserLanguage.js

@@ -1,13 +1,19 @@
 const DetermineUserLanguage = (setLanguage) => {
 
-    console.log(navigator.language)
+    if (!localStorage.getItem('languageDetermined')) {
 
-    if (navigator.language === 'es') {
-        setLanguage('spanish')
-    }
+        
+        console.log(navigator.language)
+        
+        if (navigator.language === 'es') {
+            setLanguage('spanish')
+        }
+        
+        if (navigator.language === 'en' || navigator.language === 'en-US') {
+            setLanguage('english')
+        }
 
-    if (navigator.language === 'en' || navigator.language === 'en-US') {
-        setLanguage('english')
+        localStorage.setItem('languageDetermined', 'true')
     }
       
 }

src/components/Victory && Defeat/Defeat.jsx

@@ -1,7 +1,26 @@
-const Defeat = () => {
+import React from "react"
+
+const Defeat = ({language}) => {
+
+    const [text, setText] = React.useState('')
+
+    React.useEffect(() => {
+
+        if (language === 'english') {
+
+            setText('DEFEAT')
+        }
+
+        if (language === 'spanish') {
+
+            setText('PERDISTE')
+        }
+        
+    }, [])
+
     return (
         <div className="defeat animate__animated animate__backInDown">
-            <h1>DEFEAT</h1>
+            <h1>{text}</h1>
         </div>
     )
 }

src/components/Victory && Defeat/Victory.jsx

@@ -1,16 +1,28 @@
 import React from 'react'
 
-const Victory = ({currentScore, setCurrentScore}) => {
+const Victory = ({currentScore, setCurrentScore, language}) => {
+
+    const [text, setText] = React.useState('')
 
     React.useEffect(() => {
 
         setCurrentScore(parseInt(currentScore) + 1)
+
+        if (language === 'english') {
+
+            setText('VICTORY')
+        }
+
+        if (language === 'spanish') {
+
+            setText('VICTORIA')
+        }
         
     }, [])
 
     return (
         <div className="victory animate__animated animate__backInDown">
-            <h1>VICTORY</h1>
+            <h1>{text}</h1>
         </div>
     )
 }

src/components/Word/Word.jsx

@@ -1,6 +1,9 @@
 import React from 'react'
 
 const Word = ({selectedWord, correctLetters}) => {
+
+    let blankSpaces = 0
+
     return (
         <div className="word" id='word'>
             {
@@ -8,6 +11,16 @@ const Word = ({selectedWord, correctLetters}) => {
 
                     letter = letter.toLowerCase()
 
+                    if (letter === ' ') {
+
+                        blankSpaces++
+                        return (
+                            <span className="letter blank" key={i}>
+                                &#8205;
+                            </span>
+                        )
+                    }
+
                     if (i === 0) {
                         letter = letter.toUpperCase()
                     }
@@ -21,7 +34,7 @@ const Word = ({selectedWord, correctLetters}) => {
             }
 
             <span className='counter'>
-                ({selectedWord.length})
+                ({selectedWord.length - blankSpaces})
             </span>
         </div>
     )