diff --git a/public/sass/_letters-registered.scss b/public/sass/_letters-registered.scss new file mode 100644 index 0000000..f4125e3 --- /dev/null +++ b/public/sass/_letters-registered.scss @@ -0,0 +1,17 @@ +.letters-registered { + margin: 0px 5vw; + + display: flex; + + align-items: center; + + font-family: 'Times New Roman', Times, serif; + color: rgb(145, 140, 108); + font-size: 50pt; + + height: 20vh; + + span { + margin-left: 1vw; + } +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 2ed89d4..5adcfa1 100644 --- a/src/App.js +++ b/src/App.js @@ -38,7 +38,6 @@ function App() { RecoveryCurrentScore(setCurrentScore) - RecoveryCurrentCategory(setCategory) setcategoryIsReady(true) @@ -46,6 +45,7 @@ function App() { RecoveryCurrentLanguage(setLanguage) ChangeTitle(language) setLanguageIsReady(true) + }, []) if (isVictory || isDefeat) { @@ -56,7 +56,7 @@ function App() { AlmacenateCategory(category) AlmacenateLanguage(language) - window.location.reload(false) + window.location.reload(true) }, 3000) } diff --git a/src/components/Hangman/PuzzleWord/AddLettersRegistered.js b/src/components/Hangman/PuzzleWord/AddLettersRegistered.js new file mode 100644 index 0000000..2f5e063 --- /dev/null +++ b/src/components/Hangman/PuzzleWord/AddLettersRegistered.js @@ -0,0 +1,23 @@ +import alphabet from './alphabet' + +const AddLettersRegistered = (lastLetterRegistered, setLastLetterRegistered) => { + + const addLetterHistory = (event) => { + + const currentKey = event.key + + if (!lastLetterRegistered.includes(currentKey.toUpperCase()) && alphabet.includes(currentKey.toLowerCase())) { + + const array = [...lastLetterRegistered, currentKey.toUpperCase()] + + setLastLetterRegistered(array) + console.log(lastLetterRegistered) + } + + window.removeEventListener('keyup', addLetterHistory) + } + + window.addEventListener('keyup', addLetterHistory) +} + +export default AddLettersRegistered diff --git a/src/components/Hangman/PuzzleWord/CheckVictory.js b/src/components/Hangman/PuzzleWord/CheckVictory.js new file mode 100644 index 0000000..66c5554 --- /dev/null +++ b/src/components/Hangman/PuzzleWord/CheckVictory.js @@ -0,0 +1,24 @@ +//import Victory from "../Hangman/PuzzleWord/Victory"; + +const CheckVictory = (setIsVictory) => { + + let allChildrenHaveText = true + + const puzzleWord = document.getElementById('puzzleWord') + const childrens = [...puzzleWord.children] + + childrens.forEach(children => { + + if (children.textContent === '') { + allChildrenHaveText = false + } + }); + + if (allChildrenHaveText) { + + setIsVictory(true) + + } +} + +export default CheckVictory diff --git a/src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js b/src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js index a694ae6..f4c0197 100644 --- a/src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js +++ b/src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js @@ -2,34 +2,38 @@ 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) => { +const BringTheWords = async (language = false, category = false, actualWord) => { - console.log(category) + if (!actualWord) { - if (!language) { - - language = 'english' - - } - - if (!category) { - - category = await GetRandomCategory() - } - - try { + console.log(category) + + if (!language) { - const db = getFirestore(firestore) - const data = collection(db, `hangman_words/${language}/${category}`) - const result = await getDocs(data) + language = 'english' - const words = await result.docs.map(doc => doc.id) + } - return words + if (!category) { - } catch (error) { - console.log(error) + 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) + } } } diff --git a/src/components/Hangman/PuzzleWord/PuzzleWord.jsx b/src/components/Hangman/PuzzleWord/PuzzleWord.jsx index 9229880..f36426c 100644 --- a/src/components/Hangman/PuzzleWord/PuzzleWord.jsx +++ b/src/components/Hangman/PuzzleWord/PuzzleWord.jsx @@ -30,23 +30,9 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor puzzleWord.appendChild(counter) } - - - if (actualWord && !displayApp) { - - generatePuzzleWord() - setDisplayApp(true) - - } - - }, [actualWord, category, displayApp, language, setDisplayApp]) - - - React.useEffect(() => { - const definePuzzle = async () => { - const words = await BringTheWords(language, category) + const words = await BringTheWords(language, category, actualWord) const wordSelection = await SelectRandomWord(words) const word = await words[wordSelection] @@ -57,17 +43,29 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor if (!displayApp && !actualWord) { - if ( categoryIsReady) { - definePuzzle() - } + } + + if (actualWord && !displayApp) { - if (displayApp) { - - Register_Input(actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat) + generatePuzzleWord() + setDisplayApp(true) + } + + }, [actualWord, category, displayApp, language, setDisplayApp]) + + if (displayApp && actualWord) { + + Register_Input(actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat) + } + React.useEffect(() => { + + + + }, [hangmanFrame, displayApp, actualWord, setHangmanFrame, setIsDefeat, setIsVictory, categoryIsReady, category]) diff --git a/src/components/Hangman/PuzzleWord/Register input.js b/src/components/Hangman/PuzzleWord/Register input.js new file mode 100644 index 0000000..c708148 --- /dev/null +++ b/src/components/Hangman/PuzzleWord/Register input.js @@ -0,0 +1,86 @@ +import CheckVictory from "./CheckVictory"; +import alphabet from './alphabet.js' + +const Register_Input = (actualWord, hangmanFrame, setHangmanFrame, setIsVictory, setIsDefeat) => { + + const keyRegister = (event) => { + + const currentKey = event.key.toLowerCase() + + if (hangmanFrame <= 5 && alphabet.includes(currentKey) ) { + + actualWord = actualWord.toLowerCase() + + const puzzleWord = document.getElementById('puzzleWord') + + const letters = [] + + if (actualWord.search(currentKey) + 1) { + + for (let i = 0; i < actualWord.length; i++) { + + if (currentKey === actualWord[i]) { + letters.push(i) + } + } + + letters.forEach(letter => { + + const index = letter + + if (index === 0) { + + puzzleWord.children[index].textContent = currentKey.toUpperCase() + } + + else { + puzzleWord.children[index].textContent = currentKey + } + + + }); + + + CheckVictory(setIsVictory) + + } else { + + setHangmanFrame(hangmanFrame + 1) + + 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) + + } + + } + + } + } + + const removeRegisterInput = () => { + + window.removeEventListener('keyup', keyRegister) + } + + window.addEventListener('keyup', keyRegister) +} + +export default Register_Input diff --git a/src/components/Hangman/PuzzleWord/alphabet.js b/src/components/Hangman/PuzzleWord/alphabet.js new file mode 100644 index 0000000..d3ddf00 --- /dev/null +++ b/src/components/Hangman/PuzzleWord/alphabet.js @@ -0,0 +1,3 @@ +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"]; + +export default alphabet \ No newline at end of file diff --git a/src/components/LettersRegistered/LettersRegistered.jsx b/src/components/LettersRegistered/LettersRegistered.jsx new file mode 100644 index 0000000..05ececd --- /dev/null +++ b/src/components/LettersRegistered/LettersRegistered.jsx @@ -0,0 +1,17 @@ +import React from 'react' + +const LettersRegistered = ({lettersRegistered, setLettersRegistered}) => { + + return ( +
+ { + lettersRegistered.map(letter => + + {letter} + ) + } +
+ ) +} + +export default LettersRegistered diff --git a/src/components/Scripts/RecoveryCurrentCategory.js b/src/components/Scripts/RecoveryCurrentCategory.js index f098b69..18fa564 100644 --- a/src/components/Scripts/RecoveryCurrentCategory.js +++ b/src/components/Scripts/RecoveryCurrentCategory.js @@ -2,6 +2,11 @@ export const RecoveryCurrentCategory = (setCategory) => { if (localStorage.getItem('category')) { + if (localStorage.getItem('category') === 'false') { + + setCategory(false) + } + setCategory(localStorage.getItem('category')) localStorage.removeItem('category') }