Categories styles done

2025-10-13 00:42:32 +00:00 · 2021-10-16 20:12:59 -03:00
parent 844f0f6673
commit a933035ef3
11 changed files with 338 additions and 19 deletions
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -82,6 +82,121 @@ header h2 {
  user-select: none;
 }

+.categories-container {
+  overflow-y: hidden;
+}
+.categories-container .categories {
+  position: absolute;
+  top: 15vh;
+  left: 0;
+  height: 85vh;
+  width: 100vw;
+  background-color: #e1e1e1;
+  transition: opacity 0.4s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  box-sizing: border-box;
+  padding-top: 10vh;
+  padding-bottom: 10vh;
+}
+.categories-container .categories button, .categories-container .categories select {
+  height: 10vh;
+  width: 50vw;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 22pt;
+  border: none;
+  border-radius: 10px;
+  text-align: center;
+  text-align-last: center;
+  -moz-text-align-last: center;
+}
+.categories-container .categories button.Select, .categories-container .categories select.Select {
+  background-color: #E96363;
+  border: #e16363 solid 2px;
+  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 {
+  background-color: #5f9ea0;
+  border: #5f9798 solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Cities:hover, .categories-container .categories select.Cities:hover {
+  background-color: #7fb1b3;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Pokemons, .categories-container .categories select.Pokemons {
+  background-color: #ffcb05;
+  border: #f7c505 solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.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.Programming.Languages, .categories-container .categories select.Programming.Languages {
+  background-color: #e46f01;
+  border: #dc6b01 solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Programming.Languages:hover, .categories-container .categories select.Programming.Languages:hover {
+  background-color: #fe881a;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Animals, .categories-container .categories select.Animals {
+  background-color: #efa482;
+  border: #e7a282 solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Animals:hover, .categories-container .categories select.Animals:hover {
+  background-color: #f5c5af;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Countries, .categories-container .categories select.Countries {
+  background-color: #9f0000;
+  border: #970000 solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Countries:hover, .categories-container .categories select.Countries:hover {
+  background-color: #d20000;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Random, .categories-container .categories select.Random {
+  background-color: #4285f4;
+  border: #4282ec solid 2px;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories button.Random:hover, .categories-container .categories select.Random:hover {
+  background-color: #72a4f7;
+  transition: 0.4s ease-in-out;
+}
+.categories-container .categories.hidden {
+  opacity: 0%;
+  top: 0;
+  height: 85vh;
+}
+.categories-container .categories.hidden button, .categories-container .categories.hidden select {
+  height: 5vh;
+}
+.categories-container .categories.show {
+  opacity: 100%;
+}
+.categories-container .categories.stretch {
+  height: auto;
+  width: 100%;
+}
+.categories-container .categories.stretch button, .categories-container .categories.stretch select {
+  margin-bottom: 5vh;
+}
+.categories-container .categories.stretch:last-child {
+  margin-bottom: 0vh !important;
+}
+
 .defeat, .victory {
  position: absolute;
  left: 0;
--- 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/_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;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;;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"}
--- a/public/sass/_app.scss
+++ b/public/sass/_app.scss
@@ -13,10 +13,11 @@
        display: flex;
        flex-direction: column;

-        justify-content: space-between
+        justify-content: space-between;
    }
 }

@import 'hangman';
@import 'puzzleWord';
-@import 'current-score';
+@import 'current-score';
+@import 'categories';
--- a/public/sass/_categories.scss
+++ b/public/sass/_categories.scss
@@ -0,0 +1,132 @@
+.categories-container {
+
+    overflow-y: hidden;
+
+    .categories {
+        
+        position: absolute;
+        
+        top: 15vh;
+        left: 0;
+        
+        height: 85vh;
+        width: 100vw;
+        
+        background-color: rgb(225, 225, 225);
+
+        transition: opacity 0.4s ease-in-out;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+
+        box-sizing: border-box;
+
+        padding-top: 10vh;
+        padding-bottom: 10vh;
+
+        button, select {
+            height: 10vh;
+            width: 50vw;
+            
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 22pt;
+
+            border: none;
+            border-radius: 10px;
+
+            text-align: center;
+            text-align-last: center;
+            -moz-text-align-last: center;
+
+            @mixin backgroundAndHoverDefiner($buttonColor) {
+                background-color: $buttonColor; 
+                border: adjust-color($color: $buttonColor, $blackness: 3%, $alpha: 1.0) solid 2px;
+
+                transition: 0.4s ease-in-out;
+                
+                &:hover {
+                    background-color: adjust-color($color: $buttonColor, $lightness: 10%, );
+                    transition: 0.4s ease-in-out;
+                    
+                }
+
+            }
+
+            &.Select {
+                $buttonColor: #E96363;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Cities {
+                $buttonColor: #5f9ea0;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Pokemons {
+                $buttonColor: #ffcb05;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Programming.Languages {
+                $buttonColor: #e46f01;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Animals {
+                $buttonColor: #efa482;
+
+                @include backgroundAndHoverDefiner($buttonColor)
+            }
+
+            &.Countries {
+                $buttonColor: #9f0000;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+
+            &.Random {
+                $buttonColor: #4285f4;
+
+                @include backgroundAndHoverDefiner($buttonColor);
+            }
+        }
+        
+        &.hidden {
+            opacity: 0%;
+            
+            top: 0;
+            height: 85vh;
+
+            button, select {
+
+                height: 5vh;
+            }
+        }
+        
+        &.show {
+            opacity: 100%;
+            
+        }
+        
+        &.stretch {
+            height: auto;
+            width: 100%;
+            
+            button, select {
+                
+                margin-bottom: 5vh;
+            }
+
+            &:last-child {
+
+                margin-bottom: 0vh !important;
+            }
+        }
+    }
+}
--- a/src/App.js
+++ b/src/App.js
@@ -73,6 +73,10 @@ function App() {
    
    <div className="app">

+      <div className='categories-container'>
+          <Categories displayCategories={displayCategories} language={language}/>
+      </div>
+
      <div className='column-1'>
        <Hangman
          hangmanFrame={hangmanFrame}
@@ -91,11 +95,7 @@ function App() {

          {!displayApp ? <Loading /> : null }

-          {displayCategories ?
-            <Categories hidden={false}/>
-              :
-            <Categories hidden={true}/>
-          }
+          

          <PuzzleWord

--- a/src/components/Categories/Categories.jsx
+++ b/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>
    )
 }
--- a/src/components/Categories/Firebase
+++ b/src/components/Categories/Firebase
@@ -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)
--- a/src/components/Categories/Firebase
+++ b/src/components/Categories/Firebase
@@ -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
--- a/src/components/Hangman/PuzzleWord/Firebase
+++ b/src/components/Hangman/PuzzleWord/Firebase
@@ -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(

--- a/src/components/Scripts/AdjustHeightCategories.js
+++ b/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
--- a/src/components/Scripts/Capilazate.js
+++ b/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