bugs fix

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;
 }

public/sass/_categories.scss

@@ -84,7 +84,7 @@
                 @include backgroundAndHoverDefiner($buttonColor);
             }
 
-            &.Pokemon {
+            &.Pokemons {
                 $buttonColor: #ffcb05;
 
                 @include backgroundAndHoverDefiner($buttonColor);

src/App.js

@@ -134,6 +134,8 @@ function App() {
     <Header
       language={language}
 
+      category={category}
+
       displayCategories={displayCategories}
       setDisplayCategories={setDisplayCategories}
     />

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) {

src/Firebase Querys/SelectRandomWord.js

@@ -5,6 +5,11 @@ const SelectRandomWord = (arrayWords) => {
         Math.random() * (arrayWords.length - 0) + 0
     )
     
+    if (arrayWords[randomWord] === undefined) {
+
+        return SelectRandomWord()
+    }
+
     return arrayWords[randomWord]
 }
 

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();
+
     }
 }
 

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,

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>