Icons to categories added. Categories section done

public/css/index.css

@@ -112,6 +112,13 @@ header h2 {
   text-align: center;
   text-align-last: center;
   -moz-text-align-last: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.categories-container .categories button img, .categories-container .categories button .blank-space, .categories-container .categories select img, .categories-container .categories select .blank-space {
+  height: 4vw;
+  width: 4vw;
 }
 .categories-container .categories button.Select, .categories-container .categories select.Select {
   color: #000;
@@ -124,6 +131,10 @@ header h2 {
   background-color: #ef9090;
   transition: 0.4s ease-in-out;
 }
+.categories-container .categories button.Select:hover img, .categories-container .categories select.Select:hover img {
+  animation: bounce;
+  animation-duration: 0.5s;
+}
 .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;
@@ -135,6 +146,10 @@ header h2 {
   background-color: #7fb1b3;
   transition: 0.4s ease-in-out;
 }
+.categories-container .categories button.Cities:hover img, .categories-container .categories button.Ciudades:hover img, .categories-container .categories select.Cities:hover img, .categories-container .categories select.Ciudades:hover img {
+  animation: bounce;
+  animation-duration: 0.5s;
+}
 .categories-container .categories button.Pokemon, .categories-container .categories select.Pokemon {
   color: #000;
   background-color: #ffcb05;
@@ -146,8 +161,12 @@ header h2 {
   background-color: #ffd638;
   transition: 0.4s ease-in-out;
 }
+.categories-container .categories button.Pokemon:hover img, .categories-container .categories select.Pokemon:hover img {
+  animation: bounce;
+  animation-duration: 0.5s;
+}
 .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;
+  color: #fff;
   background-color: #e46f01;
   border: #dc6b01 solid 2px;
   cursor: pointer;
@@ -157,6 +176,10 @@ header h2 {
   background-color: #fe881a;
   transition: 0.4s ease-in-out;
 }
+.categories-container .categories button.Programming.Languages:hover img, .categories-container .categories button.Lenguajes.De.Programación:hover img, .categories-container .categories select.Programming.Languages:hover img, .categories-container .categories select.Lenguajes.De.Programación:hover img {
+  animation: bounce;
+  animation-duration: 0.5s;
+}
 .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;
@@ -168,6 +191,10 @@ header h2 {
   background-color: #f5c5af;
   transition: 0.4s ease-in-out;
 }
+.categories-container .categories button.Animals:hover img, .categories-container .categories button.Animales:hover img, .categories-container .categories select.Animals:hover img, .categories-container .categories select.Animales:hover img {
+  animation: bounce;
+  animation-duration: 0.5s;
+}
 .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;
@@ -179,6 +206,10 @@ header h2 {
   background-color: #d20000;
   transition: 0.4s ease-in-out;
 }
+.categories-container .categories button.Countries:hover img, .categories-container .categories button.Países:hover img, .categories-container .categories select.Countries:hover img, .categories-container .categories select.Países:hover img {
+  animation: bounce;
+  animation-duration: 0.5s;
+}
 .categories-container .categories button.Random, .categories-container .categories select.Random {
   color: #000;
   background-color: #4285f4;
@@ -190,6 +221,10 @@ header h2 {
   background-color: #72a4f7;
   transition: 0.4s ease-in-out;
 }
+.categories-container .categories button.Random:hover img, .categories-container .categories select.Random:hover img {
+  animation: bounce;
+  animation-duration: 0.5s;
+}
 .categories-container .categories.hidden {
   opacity: 0%;
   top: 0;

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;;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"}
+{"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;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACnJhB;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,6 +40,15 @@
             text-align-last: center;
             -moz-text-align-last: center;
 
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            img, .blank-space {
+                height: 4vw;
+                width: 4vw;
+            }
+
             @mixin backgroundAndHoverDefiner($buttonColor, $textColor: #000) {
 
                 color: $textColor;
@@ -55,6 +64,10 @@
                     background-color: adjust-color($color: $buttonColor, $lightness: 10%, );
                     transition: 0.4s ease-in-out;
                     
+                    & img {
+                        animation: bounce;
+                        animation-duration: 0.5s;
+                    }
                 }
 
             }
@@ -79,8 +92,9 @@
 
             &.Programming.Languages, &.Lenguajes.De.Programación {
                 $buttonColor: #e46f01;
+                $textColor: #fff;
 
-                @include backgroundAndHoverDefiner($buttonColor);
+                @include backgroundAndHoverDefiner($buttonColor, $textColor);
             }
 
             &.Animals, &.Animales {

src/App.js

@@ -38,13 +38,13 @@ function App() {
     
     RecoveryCurrentScore(setCurrentScore)
     
-    //DetermineUserLanguage(setLanguage)
-    //ChangeTitle(language)
-
+    
     RecoveryCurrentCategory(setCategory)
     setcategoryIsReady(true)
-
+    
+    DetermineUserLanguage(setLanguage)
     RecoveryCurrentLanguage(setLanguage)
+    ChangeTitle(language)
     setLanguageIsReady(true)
   }, [])
 

src/components/Categories/Categories.jsx

@@ -5,6 +5,8 @@ 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"
 
+import images from "./Images"
+
 
 const Categories = ({language, displayCategories, category, setCategory, currentScore, setLanguage}) => {
 
@@ -70,13 +72,41 @@ const Categories = ({language, displayCategories, category, setCategory, current
                   
                     categories.map((categorie) => {
 
-                        return <button className={ categorie } key={categorie} onClick={() => changeCategory(categorie)}> { categorie.toUpperCase() } </button>
+                        const normalizatedCategorie = categorie[0].toLowerCase()
+
+                        return <button
+                                    className={ categorie[0] }
+                                    key={categorie[0]}
+                                    onClick={() => changeCategory(categorie[0])}
+                                >
+
+                                    <img src={images[normalizatedCategorie]} alt={normalizatedCategorie}/>
+
+                                    <span className="text">
+                                        { categorie[0].toUpperCase() }
+                                    </span>
+
+                                    <div className="blank-space"></div>
+
+                                </button>
                     })
 
                 : null
             }
 
-            <button className='Random' key='Random' onClick={() => changeCategory('')}>{'Random'.toUpperCase()}</button>
+            <button
+                className='Random'
+                key='Random'
+                onClick={() => changeCategory('')}
+            >
+
+                <img src={images['random']} alt="random-icon" />
+                <span className="text">
+                    {'Random'.toUpperCase()}
+                </span>
+
+                <div className="blank-space"></div>
+            </button>
         </div>
     )
 }

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

@@ -20,15 +20,15 @@ const Bring_All_Categories = async (setCategories, setStrech, language) => {
             
             if (language === 'english') {
 
-                categories = result.docs.map(doc => doc.data().english)
+                categories = result.docs.map(doc => [doc.data().english, doc.data().iconRoute])
             }
             
             if (language === 'spanish') {
-                categories = result.docs.map(doc => doc.data().spanish)
+                categories = result.docs.map(doc => [doc.data().spanish, doc.data().iconRoute])
 
             }
 
-                categories = categories.map(word => capitalize(word, true))
+                categories = categories.map(doc => [capitalize(doc[0], true), doc[1]])
     
             console.log(categories)
             setCategories(await categories)

src/components/Categories/Images.js

@@ -0,0 +1,26 @@
+import animals from './img/categories-icons/animals.png'
+import cities from './img/categories-icons/cities.png'
+import countries from './img/categories-icons/countries.png'
+import pokemon from './img/categories-icons/pokemon.png'
+import programmingLanguage from './img/categories-icons/programming language.png'
+import random from './img/categories-icons/random.png'
+
+const images = {
+    animals: animals,
+    animales: animals,
+
+    cities: cities,
+    ciudades: cities,
+
+    countries: countries,
+    países: countries,
+
+    pokemon: pokemon,
+
+    'programming languages': programmingLanguage,
+    'lenguajes de programación': programmingLanguage,
+
+    random: random
+}
+
+export default images