diff --git a/public/css/index.css b/public/css/index.css index 5e01155..828a0ef 100644 --- a/public/css/index.css +++ b/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; diff --git a/public/css/index.css.map b/public/css/index.css.map index b8df540..43a6338 100644 --- 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/_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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/public/sass/_categories.scss b/public/sass/_categories.scss index a91aa50..1e09fe3 100644 --- a/public/sass/_categories.scss +++ b/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 { diff --git a/src/App.js b/src/App.js index f4d1ed9..2ed89d4 100644 --- a/src/App.js +++ b/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) }, []) diff --git a/src/components/Categories/Categories.jsx b/src/components/Categories/Categories.jsx index f2b52de..c44c464 100644 --- a/src/components/Categories/Categories.jsx +++ b/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 + const normalizatedCategorie = categorie[0].toLowerCase() + + return }) : null } - + ) } diff --git a/src/components/Categories/Firebase Querys/Bring All Categories.js b/src/components/Categories/Firebase Querys/Bring All Categories.js index 29e0ac2..3a5a467 100644 --- a/src/components/Categories/Firebase Querys/Bring All Categories.js +++ b/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) diff --git a/src/components/Categories/Images.js b/src/components/Categories/Images.js new file mode 100644 index 0000000..40bd6c2 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/components/Categories/img/categories-icons/animals.png b/src/components/Categories/img/categories-icons/animals.png new file mode 100644 index 0000000..66d896c Binary files /dev/null and b/src/components/Categories/img/categories-icons/animals.png differ diff --git a/src/components/Categories/img/categories-icons/cities.png b/src/components/Categories/img/categories-icons/cities.png new file mode 100644 index 0000000..4729c0c Binary files /dev/null and b/src/components/Categories/img/categories-icons/cities.png differ diff --git a/src/components/Categories/img/categories-icons/countries.png b/src/components/Categories/img/categories-icons/countries.png new file mode 100644 index 0000000..13d1fbc Binary files /dev/null and b/src/components/Categories/img/categories-icons/countries.png differ diff --git a/src/components/Categories/img/categories-icons/pokemon.png b/src/components/Categories/img/categories-icons/pokemon.png new file mode 100644 index 0000000..4d0866d Binary files /dev/null and b/src/components/Categories/img/categories-icons/pokemon.png differ diff --git a/src/components/Categories/img/categories-icons/programming language.png b/src/components/Categories/img/categories-icons/programming language.png new file mode 100644 index 0000000..2ed35fe Binary files /dev/null and b/src/components/Categories/img/categories-icons/programming language.png differ diff --git a/src/components/Categories/img/categories-icons/random.png b/src/components/Categories/img/categories-icons/random.png new file mode 100644 index 0000000..89f52a0 Binary files /dev/null and b/src/components/Categories/img/categories-icons/random.png differ