Categories logic done

public/css/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 html, body {
   margin: 0;
   padding: 0;
@@ -113,62 +114,76 @@ header h2 {
   -moz-text-align-last: center;
 }
 .categories-container .categories button.Select, .categories-container .categories select.Select {
+  color: #000;
   background-color: #E96363;
   border: #e16363 solid 2px;
+  cursor: pointer;
   transition: 0.4s ease-in-out;
 }
 .categories-container .categories button.Select:hover, .categories-container .categories select.Select:hover {
   background-color: #ef9090;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Cities, .categories-container .categories select.Cities {
+.categories-container .categories button.Cities, .categories-container .categories button.Ciudades, .categories-container .categories select.Cities, .categories-container .categories select.Ciudades {
+  color: #000;
   background-color: #5f9ea0;
   border: #5f9798 solid 2px;
+  cursor: pointer;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Cities:hover, .categories-container .categories select.Cities:hover {
+.categories-container .categories button.Cities:hover, .categories-container .categories button.Ciudades:hover, .categories-container .categories select.Cities:hover, .categories-container .categories select.Ciudades:hover {
   background-color: #7fb1b3;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Pokemons, .categories-container .categories select.Pokemons {
+.categories-container .categories button.Pokemon, .categories-container .categories select.Pokemon {
+  color: #000;
   background-color: #ffcb05;
   border: #f7c505 solid 2px;
+  cursor: pointer;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Pokemons:hover, .categories-container .categories select.Pokemons:hover {
+.categories-container .categories button.Pokemon:hover, .categories-container .categories select.Pokemon:hover {
   background-color: #ffd638;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Programming.Languages, .categories-container .categories select.Programming.Languages {
+.categories-container .categories button.Programming.Languages, .categories-container .categories button.Lenguajes.De.Programación, .categories-container .categories select.Programming.Languages, .categories-container .categories select.Lenguajes.De.Programación {
+  color: #000;
   background-color: #e46f01;
   border: #dc6b01 solid 2px;
+  cursor: pointer;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Programming.Languages:hover, .categories-container .categories select.Programming.Languages:hover {
+.categories-container .categories button.Programming.Languages:hover, .categories-container .categories button.Lenguajes.De.Programación:hover, .categories-container .categories select.Programming.Languages:hover, .categories-container .categories select.Lenguajes.De.Programación:hover {
   background-color: #fe881a;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Animals, .categories-container .categories select.Animals {
+.categories-container .categories button.Animals, .categories-container .categories button.Animales, .categories-container .categories select.Animals, .categories-container .categories select.Animales {
+  color: #000;
   background-color: #efa482;
   border: #e7a282 solid 2px;
+  cursor: pointer;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Animals:hover, .categories-container .categories select.Animals:hover {
+.categories-container .categories button.Animals:hover, .categories-container .categories button.Animales:hover, .categories-container .categories select.Animals:hover, .categories-container .categories select.Animales:hover {
   background-color: #f5c5af;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Countries, .categories-container .categories select.Countries {
+.categories-container .categories button.Countries, .categories-container .categories button.Países, .categories-container .categories select.Countries, .categories-container .categories select.Países {
+  color: #fff;
   background-color: #9f0000;
   border: #970000 solid 2px;
+  cursor: pointer;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Countries:hover, .categories-container .categories select.Countries:hover {
+.categories-container .categories button.Countries:hover, .categories-container .categories button.Países:hover, .categories-container .categories select.Countries:hover, .categories-container .categories select.Países:hover {
   background-color: #d20000;
   transition: 0.4s ease-in-out;
 }
 .categories-container .categories button.Random, .categories-container .categories select.Random {
+  color: #000;
   background-color: #4285f4;
   border: #4282ec solid 2px;
+  cursor: pointer;
   transition: 0.4s ease-in-out;
 }
 .categories-container .categories button.Random:hover, .categories-container .categories select.Random:hover {

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","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.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;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;;AAgBA;EAbI,kBAcc;EAbd;EAEA;;AAEA;EACI;EACA;;AAYR;EAnBI,kBAoBc;EAnBd;EAEA;;AAEA;EACI;EACA;;AAkBR;EAzBI,kBA0Bc;EAzBd;EAEA;;AAEA;EACI;EACA;;AAwBR;EA/BI,kBAgCc;EA/Bd;EAEA;;AAEA;EACI;EACA;;AA8BR;EArCI,kBAsCc;EArCd;EAEA;;AAEA;EACI;EACA;;AAoCR;EA3CI,kBA4Cc;EA3Cd;EAEA;;AAEA;EACI;EACA;;AA0CR;EAjDI,kBAkDc;EAjDd;EAEA;;AAEA;EACI;EACA;;AAiDZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;AC/HhB;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA","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","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.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;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;;AAqBA;EAjBI,OAFuD;EAIvD,kBAgBc;EAfd;EAEA;EAEA;;AAEA;EACI;EACA;;AAYR;EAvBI,OAFuD;EAIvD,kBAsBc;EArBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAkBR;EA7BI,OAFuD;EAIvD,kBA4Bc;EA3Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAwBR;EAnCI,OAFuD;EAIvD,kBAkCc;EAjCd;EAEA;EAEA;;AAEA;EACI;EACA;;AA8BR;EAzCI,OAFuD;EAIvD,kBAwCc;EAvCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAoCR;EA/CI,OAiDY;EA/CZ,kBA8Cc;EA7Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AA2CR;EAtDI,OAFuD;EAIvD,kBAqDc;EApDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAkDZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACrIhB;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA","file":"index.css"}

public/sass/_categories.scss

@@ -40,10 +40,15 @@
             text-align-last: center;
             -moz-text-align-last: center;
 
-            @mixin backgroundAndHoverDefiner($buttonColor) {
+            @mixin backgroundAndHoverDefiner($buttonColor, $textColor: #000) {
+
+                color: $textColor;
+                
                 background-color: $buttonColor; 
                 border: adjust-color($color: $buttonColor, $blackness: 3%, $alpha: 1.0) solid 2px;
 
+                cursor: pointer;
+
                 transition: 0.4s ease-in-out;
                 
                 &:hover {
@@ -60,34 +65,35 @@
                 @include backgroundAndHoverDefiner($buttonColor);
             }
 
-            &.Cities {
+            &.Cities, &.Ciudades {
                 $buttonColor: #5f9ea0;
 
                 @include backgroundAndHoverDefiner($buttonColor);
             }
 
-            &.Pokemons {
+            &.Pokemon {
                 $buttonColor: #ffcb05;
 
                 @include backgroundAndHoverDefiner($buttonColor);
             }
 
-            &.Programming.Languages {
+            &.Programming.Languages, &.Lenguajes.De.Programación {
                 $buttonColor: #e46f01;
 
                 @include backgroundAndHoverDefiner($buttonColor);
             }
 
-            &.Animals {
+            &.Animals, &.Animales {
                 $buttonColor: #efa482;
 
                 @include backgroundAndHoverDefiner($buttonColor)
             }
 
-            &.Countries {
+            &.Countries, &.Países {
                 $buttonColor: #9f0000;
+                $textColor: #fff;
 
-                @include backgroundAndHoverDefiner($buttonColor);
+                @include backgroundAndHoverDefiner($buttonColor, $textColor);
             }
 
             &.Random {

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)
+    RecoveryCurrentCategory(setCategory)
-
+    setcategoryIsReady(true)
-    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
-    }
 
+    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 db = getFirestore(firestore)
-        const data = await collection(db, 'categories')
+            const data = await collection(db, 'categories')
-        const result = await getDocs(data)
+            const result = await getDocs(data)
-
-        let categories = await result.docs.map(doc => doc.id)
 
+            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)
+                categories = categories.map(word => capitalize(word, true))
-        setCategories(await categories)
+    
-
+            console.log(categories)
-        AdjustHeightCategories(await categories, setStrech)
+            setCategories(await categories)
-        
+    
-    } catch (error) {
+            AdjustHeightCategories(await categories, setStrech)
-        console.log(error)
+            
-    }
+        } 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')
+      }
+}