Categories logic done

2025-10-13 00:42:32 +00:00 · 2021-10-16 23:07:09 -03:00
parent a933035ef3
commit 292fce9562
14 changed files with 189 additions and 73 deletions
--- a/public/css/index.css
+++ b/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 {
--- a/public/css/index.css.map
+++ b/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"}
--- a/public/sass/_categories.scss
+++ b/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 {
--- a/src/App.js
+++ b/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}
--- a/src/components/Categories/Categories.jsx
+++ b/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>
    )
 }
--- a/src/components/Categories/Firebase
+++ b/src/components/Categories/Firebase
@@ -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
--- a/src/components/Hangman/PuzzleWord/Firebase
+++ b/src/components/Hangman/PuzzleWord/Firebase
@@ -4,6 +4,8 @@ import GetRandomCategory from './GetRandomCategory';

 const BringTheWords = async (language = false, category = false) => {

+    console.log(category)
+
    if (!language) {

        language = 'english'
--- a/src/components/Hangman/PuzzleWord/PuzzleWord.jsx
+++ b/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])
    
    
   
--- a/src/components/Scripts/AlmacenateCategory.js
+++ b/src/components/Scripts/AlmacenateCategory.js
@@ -0,0 +1,6 @@
+const AlmacenateCategory = (category) => {
+    
+    localStorage.setItem('category', category)
+}
+
+export default AlmacenateCategory
--- a/src/components/Scripts/AlmacenateLanguage.js
+++ b/src/components/Scripts/AlmacenateLanguage.js
@@ -0,0 +1,3 @@
+export const AlmacenateLanguage = (language) => {
+    localStorage.setItem('language', language)
+}
--- a/src/components/Scripts/ChangeTitle.js
+++ b/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
--- a/src/components/Scripts/RecoveryCurrentCategory.js
+++ b/src/components/Scripts/RecoveryCurrentCategory.js
@@ -0,0 +1,8 @@
+export const RecoveryCurrentCategory = (setCategory) => {
+    
+    if (localStorage.getItem('category')) {
+
+        setCategory(localStorage.getItem('category'))
+        localStorage.removeItem('category')
+      }
+}
--- a/src/components/Scripts/RecoveryCurrentLanguage.js
+++ b/src/components/Scripts/RecoveryCurrentLanguage.js
@@ -0,0 +1,8 @@
+export const RecoveryCurrentLanguage = (setLanguage) => {
+    
+    if (localStorage.getItem('language')) {
+
+        setLanguage(localStorage.getItem('language'))
+        localStorage.removeItem('language')
+      }
+}
--- a/src/components/Scripts/RecoveryCurrentScore.js
+++ b/src/components/Scripts/RecoveryCurrentScore.js
@@ -0,0 +1,8 @@
+export const RecoveryCurrentScore = (setCurrentScore) => {
+
+    if (localStorage.getItem('currentScore')) {
+      
+        setCurrentScore(localStorage.getItem('currentScore'))
+        localStorage.removeItem('currentScore')
+      }
+}