From 6b65f9afdcace01e8f9e0508de1f6e725ab5f52b Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Tue, 19 Oct 2021 19:29:47 -0300
Subject: [PATCH] bugs fix

---
 public/css/index.css                    |  6 +++---
 public/sass/_categories.scss            |  2 +-
 src/App.js                              |  2 ++
 src/Firebase Querys/BringTheWord.js     |  3 +++
 src/Firebase Querys/SelectRandomWord.js |  5 +++++
 src/General Scripts/checkDefeat.js      |  3 +++
 src/components/Categories/Images.js     |  2 +-
 src/components/Header/Header.jsx        | 15 +++++++++++++--
 8 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/public/css/index.css b/public/css/index.css
index 7fffdaa..111b5b9 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -150,18 +150,18 @@ header h2 {
   animation: bounce;
   animation-duration: 0.5s;
 }
-.categories-container .categories button.Pokemon, .categories-container .categories select.Pokemon {
+.categories-container .categories button.Pokemons, .categories-container .categories select.Pokemons {
   color: #000;
   background-color: #ffcb05;
   border: #f7c505 solid 2px;
   cursor: pointer;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Pokemon:hover, .categories-container .categories select.Pokemon:hover {
+.categories-container .categories button.Pokemons:hover, .categories-container .categories select.Pokemons:hover {
   background-color: #ffd638;
   transition: 0.4s ease-in-out;
 }
-.categories-container .categories button.Pokemon:hover img, .categories-container .categories select.Pokemon:hover img {
+.categories-container .categories button.Pokemons:hover img, .categories-container .categories select.Pokemons:hover img {
   animation: bounce;
   animation-duration: 0.5s;
 }
diff --git a/public/sass/_categories.scss b/public/sass/_categories.scss
index 1e09fe3..b6574f4 100644
--- a/public/sass/_categories.scss
+++ b/public/sass/_categories.scss
@@ -84,7 +84,7 @@
                 @include backgroundAndHoverDefiner($buttonColor);
             }
 
-            &.Pokemon {
+            &.Pokemons {
                 $buttonColor: #ffcb05;
 
                 @include backgroundAndHoverDefiner($buttonColor);
diff --git a/src/App.js b/src/App.js
index e1738cd..333bb51 100644
--- a/src/App.js
+++ b/src/App.js
@@ -134,6 +134,8 @@ function App() {
     <Header
       language={language}
 
+      category={category}
+
       displayCategories={displayCategories}
       setDisplayCategories={setDisplayCategories}
     />
diff --git a/src/Firebase Querys/BringTheWord.js b/src/Firebase Querys/BringTheWord.js
index d436756..c5ce8f3 100644
--- a/src/Firebase Querys/BringTheWord.js	
+++ b/src/Firebase Querys/BringTheWord.js	
@@ -9,6 +9,7 @@ const BringTheWords = async (language = false, category = false, selectedWord) =
 
         
         console.log(category)
+        console.log(language)
         
         if (!language) {
 
@@ -28,8 +29,10 @@ const BringTheWords = async (language = false, category = false, selectedWord) =
             const data = collection(db, `hangman_words/${language}/${category}`)
             const result = await getDocs(data)
             
+            
             const words = await result.docs.map(doc => doc.id)            
             const word = await SelectRandomWord(await words)
+
             return await word
 
         } catch (error) {
diff --git a/src/Firebase Querys/SelectRandomWord.js b/src/Firebase Querys/SelectRandomWord.js
index 726d04e..22e654c 100644
--- a/src/Firebase Querys/SelectRandomWord.js	
+++ b/src/Firebase Querys/SelectRandomWord.js	
@@ -4,6 +4,11 @@ const SelectRandomWord = (arrayWords) => {
 
         Math.random() * (arrayWords.length - 0) + 0
     )
+    
+    if (arrayWords[randomWord] === undefined) {
+
+        return SelectRandomWord()
+    }
 
     return arrayWords[randomWord]
 }
diff --git a/src/General Scripts/checkDefeat.js b/src/General Scripts/checkDefeat.js
index caa5953..03de4fc 100644
--- a/src/General Scripts/checkDefeat.js	
+++ b/src/General Scripts/checkDefeat.js	
@@ -3,6 +3,9 @@ const checkDefeat = (setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord
     if (hangmanFrame >= 5) {
         setCorrectLetters([...selectedWord])
         setEndOfGame('Defeat')
+
+        navigator.keyboard.lock();
+
     }
 }
 
diff --git a/src/components/Categories/Images.js b/src/components/Categories/Images.js
index 40bd6c2..5c5ff34 100644
--- a/src/components/Categories/Images.js
+++ b/src/components/Categories/Images.js
@@ -15,7 +15,7 @@ const images = {
     countries: countries,
     países: countries,
 
-    pokemon: pokemon,
+    pokemons: pokemon,
 
     'programming languages': programmingLanguage,
     'lenguajes de programación': programmingLanguage,
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 3ebfd72..6327278 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react'
 
-const Header = ({language, displayCategories, setDisplayCategories}) => {
+const Header = ({language, category, displayCategories, setDisplayCategories}) => {
 
     const [title, setTitle] = useState('')
     const [categoryText, setCategoryText] = useState('')
@@ -18,7 +18,18 @@ const Header = ({language, displayCategories, setDisplayCategories}) => {
             setTitle('Ahorcado')
             setCategoryText('Seleccionar categoría')
         }
-    })
+
+        if (category) {
+
+            console.log(category);
+            
+            let categoryText = category.split('')
+                categoryText[0] = categoryText[0].toUpperCase()
+
+            setCategoryText(categoryText)
+        }
+
+    }, [category])
 
     return (
         <header>