Categories styles done

src/components/Categories/Categories.jsx

@@ -1,14 +1,19 @@
 import React from "react"
 import Bring_All_Categories from "./Firebase Querys/Bring All Categories"
+import Bring_All_Languages from "./Firebase Querys/Bring All Languages"
 
 
-const Categories = ({hidden}) => {
+const Categories = ({language, displayCategories}) => {
 
-    const [categories, setCategories] = React.useState([])
+    const [categories, setCategories] = React.useState(false)
+    const [languages, setLanguages] = React.useState(false)
+
+    const [stretch, setStrech] = React.useState(false)
 
     React.useEffect (() => {
 
-        Bring_All_Categories(setCategories)
+        Bring_All_Categories(setCategories, setStrech, language)
+        Bring_All_Languages(setLanguages)
         
         console.log(categories)
     }, [])
@@ -16,18 +21,32 @@ const Categories = ({hidden}) => {
     return (
         
         <div
-            className={ hidden ? 'categories' : 'categories show'}
+            className={ !displayCategories ? `categories hidden animate__animated animate__backOutUp ${stretch}` : `categories show animate__animated animate__backInDown ${stretch}`}
         >
+            <select className="Select">
+                {
+                    languages.length > 0 ?
+                    
+                        languages.map((language) => {
+                            
+                            return <option key={language} value={language}> {language} </option>
+                        })
+                        
+                        : null
+                }
+            </select>
             {
                 categories.length > 0 ?
                   
-                    categories.map((categorie) => (
+                    categories.map((categorie) => {
 
-                        <button key={categorie}> { categorie } </button>
-                    ))
+                        return <button className={ categorie } key={categorie}> { categorie.toUpperCase() } </button>
+                    })
 
                 : null
             }
+
+            <button className='Random' key='Random'>{'Random'.toUpperCase()}</button>
         </div>
     )
 }

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

@@ -1,10 +1,11 @@
 import { firestore } from "../../../Firebase/Firebase_Config"
 import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
+import AdjustHeightCategories from "../../Scripts/AdjustHeightCategories";
+import capitalize from "../../Scripts/Capilazate";
 
-const Bring_All_Categories = async (setCategories) => {
 
-    const capitalize = (str, lower = false) =>
-        (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());  /* CREDITS: https://stackoverflow.com/a/7592235*/
+const Bring_All_Categories = async (setCategories, setStrech, language) => {
+
     
     try {
 
@@ -13,11 +14,23 @@ const Bring_All_Categories = async (setCategories) => {
         const result = await getDocs(data)
 
         let categories = await result.docs.map(doc => doc.id)
+
+            if (language === 'english') {
+                categories = result.docs.map(doc => doc.english)
+
+            }
+
+            if (language === 'spanish') {
+                categories = result.docs.map(doc => doc.english)
+
+            }
         
             categories = categories.map(word => capitalize(word, true))
 
         console.log(categories)
         setCategories(await categories)
+
+        AdjustHeightCategories(await categories, setStrech)
         
     } catch (error) {
         console.log(error)

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

@@ -0,0 +1,24 @@
+import { getDocs, getFirestore, collection } from "@firebase/firestore/"
+import { firestore } from "../../../Firebase/Firebase_Config"
+import capitalize from "../../Scripts/Capilazate"
+
+const Bring_All_Languages = async (setLanguage) => {
+    
+    try {
+        
+        const db = getFirestore(firestore)
+        const data = collection(db, 'hangman_words')
+        const result = await getDocs(data)
+
+        let languages = await result.docs.map((language) => language.id)
+            languages = languages.map((language) => capitalize(language, true)) 
+
+        setLanguage(languages)
+        
+    } catch (error) {
+        console.log(error)
+    }
+
+}
+
+export default Bring_All_Languages

src/components/Hangman/PuzzleWord/Firebase Querys/GetRandomCategory.js

@@ -12,7 +12,7 @@ const GetRandomCategory = async () => {
             const data = collection(db, `categories`)
             const result = await getDocs(data)
 
-            result.docs.map(doc => categoriesList.push(doc.id))
+            result.docs.map(doc => categoriesList.push(doc.id.toLowerCase()))
 
             const randomNumber = Math.trunc(
 

src/components/Scripts/AdjustHeightCategories.js

@@ -0,0 +1,11 @@
+const AdjustHeightCategories = (categories, setStrech) => {
+
+    console.log(categories)
+    
+    if (categories.length >= 5) {
+
+        setStrech('stretch')
+    }
+}
+
+export default AdjustHeightCategories

src/components/Scripts/Capilazate.js

@@ -0,0 +1,4 @@
+const capitalize = (str, lower = false) =>
+        (lower ? str.toLowerCase() : str).replace(/(?:^|\s|["'([{])+\S/g, match => match.toUpperCase());  /* CREDITS: https://stackoverflow.com/a/7592235*/
+    
+export default capitalize