diff --git a/public/css/index.css b/public/css/index.css index 523efe6..90ef444 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -5,7 +5,7 @@ html, body { header { border-bottom: 1px solid #c8c8c8; - height: 10vh; + height: 15vh; display: flex; flex-direction: column; align-items: center; diff --git a/public/sass/_header.scss b/public/sass/_header.scss index 71e19d9..ccb957a 100644 --- a/public/sass/_header.scss +++ b/public/sass/_header.scss @@ -1,7 +1,7 @@ header { border-bottom: 1px solid rgb(200, 200, 200); - height: 10vh; + height: 15vh; display: flex; flex-direction: column; diff --git a/src/App.js b/src/App.js index c5f73df..87dfc5c 100644 --- a/src/App.js +++ b/src/App.js @@ -10,7 +10,9 @@ import AlmacenateCurrentScore from "./components/Scripts/AlmacenateCurrentScore" function App() { - const [language, setLanguage] = useState('english') + const [language, setLanguage] = useState('spanish') + const [category, setCategory] = useState(false) + const [currentScore, setCurrentScore] = useState(0) const [hangmanFrame, setHangmanFrame] = useState(0) @@ -36,7 +38,7 @@ function App() { setTimeout(() => { AlmacenateCurrentScore(currentScore) - window.location.reload(true); + window.location.reload(false); }, 3000) } @@ -61,6 +63,10 @@ function App() { diff --git a/src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js b/src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js new file mode 100644 index 0000000..91987d6 --- /dev/null +++ b/src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js @@ -0,0 +1,34 @@ +import {firestore} from '../../../../Firebase/Firebase_Config' +import { getFirestore, collection, doc, getDocs, getDoc } from 'firebase/firestore/lite'; +import GetRandomCategory from './GetRandomCategory'; + +const BringTheWords = async (language = false, category = false) => { + + if (!language) { + + language = 'english' + + } + + if (!category) { + + category = await GetRandomCategory() + + } + + try { + + const db = getFirestore(firestore) + const data = collection(db, `hangman_words/${language}/${category}`) + const result = await getDocs(data) + + const words = await result.docs.map(doc => doc.id) + + return words + + } catch (error) { + console.log(error) + } +} + +export default BringTheWords diff --git a/src/components/Hangman/PuzzleWord/Firebase Querys/GetRandomCategory.js b/src/components/Hangman/PuzzleWord/Firebase Querys/GetRandomCategory.js new file mode 100644 index 0000000..4ef8b1f --- /dev/null +++ b/src/components/Hangman/PuzzleWord/Firebase Querys/GetRandomCategory.js @@ -0,0 +1,29 @@ +import {firestore} from '../../../../Firebase/Firebase_Config' +import { getFirestore, collection, doc, getDocs, getDoc } from 'firebase/firestore/lite'; + +const GetRandomCategory = async () => { + + + let categoriesList = [] + + try { + + const db = getFirestore(firestore) + const data = collection(db, `categories`) + const result = await getDocs(data) + + result.docs.map(doc => categoriesList.push(doc.id)) + + const randomNumber = Math.trunc( + + Math.random() * (categoriesList.length - 0) + 0 + ) + + return categoriesList[randomNumber] + + } catch (error) { + console.log(error) + } +} + +export default GetRandomCategory diff --git a/src/components/Hangman/PuzzleWord/PuzzleWord.jsx b/src/components/Hangman/PuzzleWord/PuzzleWord.jsx index c818a9a..348e07a 100644 --- a/src/components/Hangman/PuzzleWord/PuzzleWord.jsx +++ b/src/components/Hangman/PuzzleWord/PuzzleWord.jsx @@ -1,11 +1,13 @@ import React, {useState} from 'react' import Register_Input from '../../Scripts/Register input' +import SelectRandomWord from '../../Scripts/SelectRandomWord' import Defeat from './Defeat' +import BringTheWords from './Firebase Querys/BringTheWords' import Victory from './Victory' -const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat, setDisplayApp}) => { +const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat, displayApp, setDisplayApp, language, category}) => { - const [actualWord, setActualWord] = useState('papa') + const [actualWord, setActualWord] = useState('') const generatePuzzleWord = () => { @@ -26,23 +28,47 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor counter.textContent = '(' + actualWord.length + ')' puzzleWord.appendChild(counter) - } + } + React.useEffect(() => { + const definePuzzle = async () => { - generatePuzzleWord() - setDisplayApp(true) - - }, []) + const words = await BringTheWords(language, category) + const wordSelection = await SelectRandomWord(words) + + const word = await words[wordSelection] + + await setActualWord(word) + } + if (!displayApp && !actualWord) { + + definePuzzle() + } + + + if (actualWord && !displayApp) { + + generatePuzzleWord() + setDisplayApp(true) + + } + + }, [actualWord]) React.useEffect(() => { - Register_Input(actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat) - - }, [hangmanFrame]) + if (displayApp) { + Register_Input(actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat) + } + + + }, [hangmanFrame, displayApp]) + + return ( diff --git a/src/components/Scripts/CheckVictory.js b/src/components/Scripts/CheckVictory.js index 4a188bd..2528e0c 100644 --- a/src/components/Scripts/CheckVictory.js +++ b/src/components/Scripts/CheckVictory.js @@ -14,8 +14,6 @@ const CheckVictory = (setIsVictory) => { } }); - console.log(allChildrenHaveText) - if (allChildrenHaveText) { setIsVictory(true) diff --git a/src/components/Scripts/Register input.js b/src/components/Scripts/Register input.js index 7ea7594..2ce7622 100644 --- a/src/components/Scripts/Register input.js +++ b/src/components/Scripts/Register input.js @@ -2,13 +2,11 @@ import CheckVictory from "./CheckVictory"; const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat) => { - const alphabet = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n", "ñ","o","p","q","r","s","t","u","v","w","x","y","z"]; + const alphabet = ["a", "á", "b","c","d","e", "é", "f","g","h","i", "í", "j","k","l","m","n", "ñ","o", "ó","p","q","r","s","t","u","ú","v","w","x","y","z"]; const keyRegister = (event) => { const currentKey = event.key.toLowerCase() - - console.log(hangmanFrame) if (hangmanFrame <= 5 && alphabet.includes(currentKey) ) { @@ -18,8 +16,6 @@ const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory, const letters = [] - console.log(event.key) - if (actualWord.search(currentKey) + 1) { for (let i = 0; i < actualWord.length; i++) { @@ -53,6 +49,24 @@ const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setHangmanFrame(quantity) if (hangmanFrame === 5) { + + for (let i = 0; i < actualWord.length; i++) { + + let letter = document.createElement('span') + + letter.className = 'letter' + + letter.textContent = actualWord[i] + + if (i === 0) { + + letter.textContent = letter.textContent.toUpperCase() + } + + + puzzleWord.replaceChild(letter, puzzleWord.children[i]) + } + setIsDefeat(true) } diff --git a/src/components/Scripts/SelectRandomWord.js b/src/components/Scripts/SelectRandomWord.js new file mode 100644 index 0000000..67b2f15 --- /dev/null +++ b/src/components/Scripts/SelectRandomWord.js @@ -0,0 +1,11 @@ +const SelectRandomWord = (arrayWords) => { + + const randomWord = Math.trunc( + + Math.random() * (arrayWords.length - 0) + 0 + ) + + return randomWord +} + +export default SelectRandomWord