diff --git a/public/css/index.css b/public/css/index.css index bf16020..5e01155 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; html, body { margin: 0; padding: 0; @@ -113,62 +114,76 @@ header h2 { -moz-text-align-last: center; } .categories-container .categories button.Select, .categories-container .categories select.Select { + color: #000; background-color: #E96363; border: #e16363 solid 2px; + cursor: pointer; 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 { +.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; border: #5f9798 solid 2px; + cursor: pointer; transition: 0.4s ease-in-out; } -.categories-container .categories button.Cities:hover, .categories-container .categories select.Cities:hover { +.categories-container .categories button.Cities:hover, .categories-container .categories button.Ciudades:hover, .categories-container .categories select.Cities:hover, .categories-container .categories select.Ciudades:hover { background-color: #7fb1b3; transition: 0.4s ease-in-out; } -.categories-container .categories button.Pokemons, .categories-container .categories select.Pokemons { +.categories-container .categories button.Pokemon, .categories-container .categories select.Pokemon { + color: #000; background-color: #ffcb05; border: #f7c505 solid 2px; + cursor: pointer; transition: 0.4s ease-in-out; } -.categories-container .categories button.Pokemons:hover, .categories-container .categories select.Pokemons:hover { +.categories-container .categories button.Pokemon:hover, .categories-container .categories select.Pokemon:hover { background-color: #ffd638; transition: 0.4s ease-in-out; } -.categories-container .categories button.Programming.Languages, .categories-container .categories select.Programming.Languages { +.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; background-color: #e46f01; border: #dc6b01 solid 2px; + cursor: pointer; transition: 0.4s ease-in-out; } -.categories-container .categories button.Programming.Languages:hover, .categories-container .categories select.Programming.Languages:hover { +.categories-container .categories button.Programming.Languages:hover, .categories-container .categories button.Lenguajes.De.Programación:hover, .categories-container .categories select.Programming.Languages:hover, .categories-container .categories select.Lenguajes.De.Programación:hover { background-color: #fe881a; transition: 0.4s ease-in-out; } -.categories-container .categories button.Animals, .categories-container .categories select.Animals { +.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; border: #e7a282 solid 2px; + cursor: pointer; transition: 0.4s ease-in-out; } -.categories-container .categories button.Animals:hover, .categories-container .categories select.Animals:hover { +.categories-container .categories button.Animals:hover, .categories-container .categories button.Animales:hover, .categories-container .categories select.Animals:hover, .categories-container .categories select.Animales:hover { background-color: #f5c5af; transition: 0.4s ease-in-out; } -.categories-container .categories button.Countries, .categories-container .categories select.Countries { +.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; border: #970000 solid 2px; + cursor: pointer; transition: 0.4s ease-in-out; } -.categories-container .categories button.Countries:hover, .categories-container .categories select.Countries:hover { +.categories-container .categories button.Countries:hover, .categories-container .categories button.Países:hover, .categories-container .categories select.Countries:hover, .categories-container .categories select.Países:hover { background-color: #d20000; transition: 0.4s ease-in-out; } .categories-container .categories button.Random, .categories-container .categories select.Random { + color: #000; background-color: #4285f4; border: #4282ec solid 2px; + cursor: pointer; transition: 0.4s ease-in-out; } .categories-container .categories button.Random:hover, .categories-container .categories select.Random:hover { diff --git a/public/css/index.css.map b/public/css/index.css.map index 6f3f7c0..b8df540 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;;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"} \ 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;;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 diff --git a/public/sass/_categories.scss b/public/sass/_categories.scss index bed06d8..a91aa50 100644 --- a/public/sass/_categories.scss +++ b/public/sass/_categories.scss @@ -40,10 +40,15 @@ text-align-last: center; -moz-text-align-last: center; - @mixin backgroundAndHoverDefiner($buttonColor) { + @mixin backgroundAndHoverDefiner($buttonColor, $textColor: #000) { + + color: $textColor; + background-color: $buttonColor; border: adjust-color($color: $buttonColor, $blackness: 3%, $alpha: 1.0) solid 2px; + cursor: pointer; + transition: 0.4s ease-in-out; &:hover { @@ -60,34 +65,35 @@ @include backgroundAndHoverDefiner($buttonColor); } - &.Cities { + &.Cities, &.Ciudades { $buttonColor: #5f9ea0; @include backgroundAndHoverDefiner($buttonColor); } - &.Pokemons { + &.Pokemon { $buttonColor: #ffcb05; @include backgroundAndHoverDefiner($buttonColor); } - &.Programming.Languages { + &.Programming.Languages, &.Lenguajes.De.Programación { $buttonColor: #e46f01; @include backgroundAndHoverDefiner($buttonColor); } - &.Animals { + &.Animals, &.Animales { $buttonColor: #efa482; @include backgroundAndHoverDefiner($buttonColor) } - &.Countries { + &.Countries, &.Países { $buttonColor: #9f0000; + $textColor: #fff; - @include backgroundAndHoverDefiner($buttonColor); + @include backgroundAndHoverDefiner($buttonColor, $textColor); } &.Random { diff --git a/src/App.js b/src/App.js index 961bfd3..f4d1ed9 100644 --- a/src/App.js +++ b/src/App.js @@ -9,11 +9,20 @@ import Loading from "./components/Loading"; import AlmacenateCurrentScore from "./components/Scripts/AlmacenateCurrentScore"; import DetermineUserLanguage from "./components/Scripts/DetermineUserLanguage"; import Categories from "./components/Categories/Categories"; +import ChangeTitle from "./components/Scripts/ChangeTitle"; +import AlmacenateCategory from "./components/Scripts/AlmacenateCategory"; +import { RecoveryCurrentScore } from "./components/Scripts/RecoveryCurrentScore"; +import { RecoveryCurrentCategory } from "./components/Scripts/RecoveryCurrentCategory"; +import { RecoveryCurrentLanguage } from "./components/Scripts/RecoveryCurrentLanguage"; +import { AlmacenateLanguage } from "./components/Scripts/AlmacenateLanguage"; function App() { - const [language, setLanguage] = useState('') + const [language, setLanguage] = useState('english') + const [languageIsReady, setLanguageIsReady] = useState(false) + const [category, setCategory] = useState(false) + const [categoryIsReady, setcategoryIsReady] = useState(false) const [currentScore, setCurrentScore] = useState(0) @@ -26,30 +35,17 @@ function App() { const [displayCategories, setDisplayCategories] = useState(false) React.useEffect(() => { + + RecoveryCurrentScore(setCurrentScore) + + //DetermineUserLanguage(setLanguage) + //ChangeTitle(language) - DetermineUserLanguage(setLanguage) - - if (localStorage.getItem('currentScore')) { - - setCurrentScore(localStorage.getItem('currentScore')) - localStorage.removeItem('currentScore') - } - - const titleAPP = { - english: 'Hangman game', - spanish: 'Ahorcado' - } - - if (language === 'english') { - - document.title = titleAPP.english - } - - if (language === 'spanish') { - - document.title = titleAPP.spanish - } + RecoveryCurrentCategory(setCategory) + setcategoryIsReady(true) + RecoveryCurrentLanguage(setLanguage) + setLanguageIsReady(true) }, []) if (isVictory || isDefeat) { @@ -57,8 +53,10 @@ function App() { setTimeout(() => { AlmacenateCurrentScore(currentScore) + AlmacenateCategory(category) + AlmacenateLanguage(language) - window.location.reload(false); + window.location.reload(false) }, 3000) } @@ -72,11 +70,17 @@ function App() { />
- -
- + + { + languageIsReady ? + +
+
+ :null + } +
{ +const Categories = ({language, displayCategories, category, setCategory, currentScore, setLanguage}) => { const [categories, setCategories] = React.useState(false) const [languages, setLanguages] = React.useState(false) const [stretch, setStrech] = React.useState(false) + const changeCategory = (categorie) => { + + categorie = categorie.toLowerCase() + setCategory(categorie) + + localStorage.setItem('category', categorie) + + AlmacenateCurrentScore(currentScore) + AlmacenateLanguage(language) + + window.location.reload(false) + + } + + const changeLanguage = (language) => { + + language = language.toLowerCase() + setLanguage(language) + + localStorage.setItem('language', language) + + AlmacenateCurrentScore(currentScore) + AlmacenateCategory(category) + + window.location.reload(false) + } + React.useEffect (() => { - Bring_All_Categories(setCategories, setStrech, language) + Bring_All_Categories(setCategories, setStrech, language, category) Bring_All_Languages(setLanguages) console.log(categories) @@ -23,13 +53,13 @@ const Categories = ({language, displayCategories}) => { ) } diff --git a/src/components/Categories/Firebase Querys/Bring All Categories.js b/src/components/Categories/Firebase Querys/Bring All Categories.js index cc2fe02..29e0ac2 100644 --- a/src/components/Categories/Firebase Querys/Bring All Categories.js +++ b/src/components/Categories/Firebase Querys/Bring All Categories.js @@ -6,35 +6,39 @@ import capitalize from "../../Scripts/Capilazate"; const Bring_All_Categories = async (setCategories, setStrech, language) => { + console.log(language) + - try { + + try { - const db = getFirestore(firestore) - const data = await collection(db, 'categories') - const result = await getDocs(data) - - let categories = await result.docs.map(doc => doc.id) + const db = getFirestore(firestore) + const data = await collection(db, 'categories') + const result = await getDocs(data) + let categories + if (language === 'english') { - categories = result.docs.map(doc => doc.english) + categories = result.docs.map(doc => doc.data().english) } - + if (language === 'spanish') { - categories = result.docs.map(doc => doc.english) + categories = result.docs.map(doc => doc.data().spanish) } - - categories = categories.map(word => capitalize(word, true)) - console.log(categories) - setCategories(await categories) - - AdjustHeightCategories(await categories, setStrech) - - } catch (error) { - console.log(error) - } + categories = categories.map(word => capitalize(word, true)) + + console.log(categories) + setCategories(await categories) + + AdjustHeightCategories(await categories, setStrech) + + } catch (error) { + console.log(error) + } + } export default Bring_All_Categories diff --git a/src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js b/src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js index 91987d6..a694ae6 100644 --- a/src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js +++ b/src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js @@ -4,6 +4,8 @@ import GetRandomCategory from './GetRandomCategory'; const BringTheWords = async (language = false, category = false) => { + console.log(category) + if (!language) { language = 'english' diff --git a/src/components/Hangman/PuzzleWord/PuzzleWord.jsx b/src/components/Hangman/PuzzleWord/PuzzleWord.jsx index 5261b3d..9229880 100644 --- a/src/components/Hangman/PuzzleWord/PuzzleWord.jsx +++ b/src/components/Hangman/PuzzleWord/PuzzleWord.jsx @@ -3,7 +3,7 @@ import Register_Input from '../../Scripts/Register input' import SelectRandomWord from '../../Scripts/SelectRandomWord' import BringTheWords from './Firebase Querys/BringTheWords' -const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat, displayApp, setDisplayApp, language, category}) => { +const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat, displayApp, setDisplayApp, language, category, categoryIsReady}) => { const [actualWord, setActualWord] = useState('') @@ -57,7 +57,10 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor if (!displayApp && !actualWord) { - definePuzzle() + if ( categoryIsReady) { + + definePuzzle() + } } @@ -67,7 +70,7 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor } - }, [hangmanFrame, displayApp, actualWord, setHangmanFrame, setIsDefeat, setIsVictory]) + }, [hangmanFrame, displayApp, actualWord, setHangmanFrame, setIsDefeat, setIsVictory, categoryIsReady, category]) diff --git a/src/components/Scripts/AlmacenateCategory.js b/src/components/Scripts/AlmacenateCategory.js new file mode 100644 index 0000000..1e9db70 --- /dev/null +++ b/src/components/Scripts/AlmacenateCategory.js @@ -0,0 +1,6 @@ +const AlmacenateCategory = (category) => { + + localStorage.setItem('category', category) +} + +export default AlmacenateCategory diff --git a/src/components/Scripts/AlmacenateLanguage.js b/src/components/Scripts/AlmacenateLanguage.js new file mode 100644 index 0000000..9f12e6e --- /dev/null +++ b/src/components/Scripts/AlmacenateLanguage.js @@ -0,0 +1,3 @@ +export const AlmacenateLanguage = (language) => { + localStorage.setItem('language', language) +} diff --git a/src/components/Scripts/ChangeTitle.js b/src/components/Scripts/ChangeTitle.js new file mode 100644 index 0000000..61e6594 --- /dev/null +++ b/src/components/Scripts/ChangeTitle.js @@ -0,0 +1,18 @@ +const ChangeTitle = (language) => { + const titleAPP = { + english: 'Hangman game', + spanish: 'Ahorcado' + } + + if (language === 'english') { + + document.title = titleAPP.english + } + + if (language === 'spanish') { + + document.title = titleAPP.spanish + } +} + +export default ChangeTitle diff --git a/src/components/Scripts/RecoveryCurrentCategory.js b/src/components/Scripts/RecoveryCurrentCategory.js new file mode 100644 index 0000000..f098b69 --- /dev/null +++ b/src/components/Scripts/RecoveryCurrentCategory.js @@ -0,0 +1,8 @@ +export const RecoveryCurrentCategory = (setCategory) => { + + if (localStorage.getItem('category')) { + + setCategory(localStorage.getItem('category')) + localStorage.removeItem('category') + } +} diff --git a/src/components/Scripts/RecoveryCurrentLanguage.js b/src/components/Scripts/RecoveryCurrentLanguage.js new file mode 100644 index 0000000..8e82523 --- /dev/null +++ b/src/components/Scripts/RecoveryCurrentLanguage.js @@ -0,0 +1,8 @@ +export const RecoveryCurrentLanguage = (setLanguage) => { + + if (localStorage.getItem('language')) { + + setLanguage(localStorage.getItem('language')) + localStorage.removeItem('language') + } +} diff --git a/src/components/Scripts/RecoveryCurrentScore.js b/src/components/Scripts/RecoveryCurrentScore.js new file mode 100644 index 0000000..b17c476 --- /dev/null +++ b/src/components/Scripts/RecoveryCurrentScore.js @@ -0,0 +1,8 @@ +export const RecoveryCurrentScore = (setCurrentScore) => { + + if (localStorage.getItem('currentScore')) { + + setCurrentScore(localStorage.getItem('currentScore')) + localStorage.removeItem('currentScore') + } +}