Categories logic done

src/App.js

@@ -9,11 +9,20 @@ import Loading from "./components/Loading";
 import AlmacenateCurrentScore from "./components/Scripts/AlmacenateCurrentScore";
 import DetermineUserLanguage from "./components/Scripts/DetermineUserLanguage";
 import Categories from "./components/Categories/Categories";
+import ChangeTitle from "./components/Scripts/ChangeTitle";
+import AlmacenateCategory from "./components/Scripts/AlmacenateCategory";
+import { RecoveryCurrentScore } from "./components/Scripts/RecoveryCurrentScore";
+import { RecoveryCurrentCategory } from "./components/Scripts/RecoveryCurrentCategory";
+import { RecoveryCurrentLanguage } from "./components/Scripts/RecoveryCurrentLanguage";
+import { AlmacenateLanguage } from "./components/Scripts/AlmacenateLanguage";
 
 function App() {
 
-  const [language, setLanguage] = useState('')
+  const [language, setLanguage] = useState('english')
+  const [languageIsReady, setLanguageIsReady] = useState(false)
+
   const [category, setCategory] = useState(false)
+  const [categoryIsReady, setcategoryIsReady] = useState(false)
 
   const [currentScore, setCurrentScore] = useState(0)
 
@@ -26,30 +35,17 @@ function App() {
   const [displayCategories, setDisplayCategories] = useState(false)
 
   React.useEffect(() => {
+    
+    RecoveryCurrentScore(setCurrentScore)
+    
+    //DetermineUserLanguage(setLanguage)
+    //ChangeTitle(language)
 
-    DetermineUserLanguage(setLanguage)
-
-    if (localStorage.getItem('currentScore')) {
-      
-      setCurrentScore(localStorage.getItem('currentScore'))
-      localStorage.removeItem('currentScore')
-    }
-
-    const titleAPP = {
-      english: 'Hangman game',
-      spanish: 'Ahorcado'
-    }
-
-    if (language === 'english') {
-
-      document.title = titleAPP.english
-    }
-
-    if (language === 'spanish') {
-
-      document.title = titleAPP.spanish
-    }
+    RecoveryCurrentCategory(setCategory)
+    setcategoryIsReady(true)
 
+    RecoveryCurrentLanguage(setLanguage)
+    setLanguageIsReady(true)
   }, [])
 
   if (isVictory || isDefeat) {
@@ -57,8 +53,10 @@ function App() {
     
     setTimeout(() => {
         AlmacenateCurrentScore(currentScore)
+        AlmacenateCategory(category)
+        AlmacenateLanguage(language)
 
-        window.location.reload(false);
+        window.location.reload(false)
         }, 3000)
   }
 
@@ -72,11 +70,17 @@ function App() {
     />
     
     <div className="app">
-
-      <div className='categories-container'>
-          <Categories displayCategories={displayCategories} language={language}/>
+      
+      {
+        languageIsReady ?
+        
+        <div className='categories-container'>
+          <Categories currentScore={currentScore} displayCategories={displayCategories} language={language} category={category} setCategory={setCategory} categoryIsReady={categoryIsReady} setLanguage={setLanguage}/>
       </div>
 
+      :null
+      }
+
       <div className='column-1'>
         <Hangman
           hangmanFrame={hangmanFrame}
@@ -102,6 +106,7 @@ function App() {
           language={language}
 
           category={category}
+          categoryIsReady={categoryIsReady}
 
           hangmanFrame={hangmanFrame}
           setHangmanFrame={setHangmanFrame}

src/components/Categories/Categories.jsx

@@ -1,18 +1,48 @@
 import React from "react"
+import AlmacenateCategory from "../Scripts/AlmacenateCategory"
+import AlmacenateCurrentScore from "../Scripts/AlmacenateCurrentScore"
+import { AlmacenateLanguage } from "../Scripts/AlmacenateLanguage"
 import Bring_All_Categories from "./Firebase Querys/Bring All Categories"
 import Bring_All_Languages from "./Firebase Querys/Bring All Languages"
 
 
-const Categories = ({language, displayCategories}) => {
+const Categories = ({language, displayCategories, category, setCategory, currentScore, setLanguage}) => {
 
     const [categories, setCategories] = React.useState(false)
     const [languages, setLanguages] = React.useState(false)
 
     const [stretch, setStrech] = React.useState(false)
 
+    const changeCategory = (categorie) => {
+
+        categorie = categorie.toLowerCase()
+        setCategory(categorie)
+
+        localStorage.setItem('category', categorie)
+
+        AlmacenateCurrentScore(currentScore)
+        AlmacenateLanguage(language)
+
+        window.location.reload(false)
+
+    }
+
+    const changeLanguage = (language) => {
+
+        language = language.toLowerCase()
+        setLanguage(language)
+
+        localStorage.setItem('language', language)
+
+        AlmacenateCurrentScore(currentScore)
+        AlmacenateCategory(category)
+
+        window.location.reload(false)
+    }
+
     React.useEffect (() => {
 
-        Bring_All_Categories(setCategories, setStrech, language)
+        Bring_All_Categories(setCategories, setStrech, language, category)
         Bring_All_Languages(setLanguages)
         
         console.log(categories)
@@ -23,13 +53,13 @@ const Categories = ({language, displayCategories}) => {
         <div
             className={ !displayCategories ? `categories hidden animate__animated animate__backOutUp ${stretch}` : `categories show animate__animated animate__backInDown ${stretch}`}
         >
-            <select className="Select">
+            <select className="Select" onChange={(e) => changeLanguage(e.target.value)}>
                 {
                     languages.length > 0 ?
                     
                         languages.map((language) => {
                             
-                            return <option key={language} value={language}> {language} </option>
+                            return <option key={language} value={language}> {language.toUpperCase()} </option>
                         })
                         
                         : null
@@ -40,13 +70,13 @@ const Categories = ({language, displayCategories}) => {
                   
                     categories.map((categorie) => {
 
-                        return <button className={ categorie } key={categorie}> { categorie.toUpperCase() } </button>
+                        return <button className={ categorie } key={categorie} onClick={() => changeCategory(categorie)}> { categorie.toUpperCase() } </button>
                     })
 
                 : null
             }
 
-            <button className='Random' key='Random'>{'Random'.toUpperCase()}</button>
+            <button className='Random' key='Random' onClick={() => changeCategory('')}>{'Random'.toUpperCase()}</button>
         </div>
     )
 }

src/components/Categories/Firebase Querys/Bring All Categories.js

@@ -6,35 +6,39 @@ import capitalize from "../../Scripts/Capilazate";
 
 const Bring_All_Categories = async (setCategories, setStrech, language) => {
 
+    console.log(language)
+
     
-    try {
+        
+        try {
 
-        const db = getFirestore(firestore)
-        const data = await collection(db, 'categories')
-        const result = await getDocs(data)
-
-        let categories = await result.docs.map(doc => doc.id)
+            const db = getFirestore(firestore)
+            const data = await collection(db, 'categories')
+            const result = await getDocs(data)
 
+            let categories
+            
             if (language === 'english') {
-                categories = result.docs.map(doc => doc.english)
 
+                categories = result.docs.map(doc => doc.data().english)
             }
-
+            
             if (language === 'spanish') {
-                categories = result.docs.map(doc => doc.english)
+                categories = result.docs.map(doc => doc.data().spanish)
 
             }
-        
-            categories = categories.map(word => capitalize(word, true))
 
-        console.log(categories)
-        setCategories(await categories)
-
-        AdjustHeightCategories(await categories, setStrech)
-        
-    } catch (error) {
-        console.log(error)
-    }
+                categories = categories.map(word => capitalize(word, true))
+    
+            console.log(categories)
+            setCategories(await categories)
+    
+            AdjustHeightCategories(await categories, setStrech)
+            
+        } catch (error) {
+            console.log(error)
+        }
+    
 }
 
 export default Bring_All_Categories

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

@@ -4,6 +4,8 @@ import GetRandomCategory from './GetRandomCategory';
 
 const BringTheWords = async (language = false, category = false) => {
 
+    console.log(category)
+
     if (!language) {
 
         language = 'english'

src/components/Hangman/PuzzleWord/PuzzleWord.jsx

@@ -3,7 +3,7 @@ import Register_Input from '../../Scripts/Register input'
 import SelectRandomWord from '../../Scripts/SelectRandomWord'
 import BringTheWords from './Firebase Querys/BringTheWords'
 
-const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat, displayApp, setDisplayApp, language, category}) => {
+const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat, displayApp, setDisplayApp, language, category, categoryIsReady}) => {
 
     const [actualWord, setActualWord] = useState('')
 
@@ -57,7 +57,10 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor
         
         if (!displayApp && !actualWord) {
 
-            definePuzzle()
+            if ( categoryIsReady) {
+                
+                definePuzzle()
+            }
         }
 
 
@@ -67,7 +70,7 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor
         }
 
 
-    }, [hangmanFrame, displayApp, actualWord, setHangmanFrame, setIsDefeat, setIsVictory])
+    }, [hangmanFrame, displayApp, actualWord, setHangmanFrame, setIsDefeat, setIsVictory, categoryIsReady, category])
     
     
    

src/components/Scripts/AlmacenateCategory.js

@@ -0,0 +1,6 @@
+const AlmacenateCategory = (category) => {
+    
+    localStorage.setItem('category', category)
+}
+
+export default AlmacenateCategory

src/components/Scripts/AlmacenateLanguage.js

@@ -0,0 +1,3 @@
+export const AlmacenateLanguage = (language) => {
+    localStorage.setItem('language', language)
+}

src/components/Scripts/ChangeTitle.js

@@ -0,0 +1,18 @@
+const ChangeTitle = (language) => {
+    const titleAPP = {
+        english: 'Hangman game',
+        spanish: 'Ahorcado'
+      }
+  
+      if (language === 'english') {
+  
+        document.title = titleAPP.english
+      }
+  
+      if (language === 'spanish') {
+  
+        document.title = titleAPP.spanish
+      }
+}
+
+export default ChangeTitle

src/components/Scripts/RecoveryCurrentCategory.js

@@ -0,0 +1,8 @@
+export const RecoveryCurrentCategory = (setCategory) => {
+    
+    if (localStorage.getItem('category')) {
+
+        setCategory(localStorage.getItem('category'))
+        localStorage.removeItem('category')
+      }
+}

src/components/Scripts/RecoveryCurrentLanguage.js

@@ -0,0 +1,8 @@
+export const RecoveryCurrentLanguage = (setLanguage) => {
+    
+    if (localStorage.getItem('language')) {
+
+        setLanguage(localStorage.getItem('language'))
+        localStorage.removeItem('language')
+      }
+}

src/components/Scripts/RecoveryCurrentScore.js

@@ -0,0 +1,8 @@
+export const RecoveryCurrentScore = (setCurrentScore) => {
+
+    if (localStorage.getItem('currentScore')) {
+      
+        setCurrentScore(localStorage.getItem('currentScore'))
+        localStorage.removeItem('currentScore')
+      }
+}