mirror of
https://github.com/FranP-code/Hangman-game-with-React.git
synced 2025-10-13 00:42:32 +00:00
Build 2 started
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import React from "react"
|
||||
import AlmacenateCategory from "../Scripts/AlmacenateCategory"
|
||||
import AlmacenateCurrentScore from "../Scripts/AlmacenateCurrentScore"
|
||||
import { AlmacenateLanguage } from "../Scripts/AlmacenateLanguage"
|
||||
import AlmacenateCategory from "../../Storage Scripts/AlmacenateCategory"
|
||||
import AlmacenateCurrentScore from "../../Storage Scripts/AlmacenateCurrentScore"
|
||||
import { AlmacenateLanguage } from "../../Storage Scripts/AlmacenateLanguage"
|
||||
import Bring_All_Categories from "./Firebase Querys/Bring All Categories"
|
||||
import Bring_All_Languages from "./Firebase Querys/Bring All Languages"
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { firestore } from "../../../Firebase/Firebase_Config"
|
||||
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
|
||||
import AdjustHeightCategories from "../../Scripts/AdjustHeightCategories";
|
||||
import capitalize from "../../Scripts/Capilazate";
|
||||
import AdjustHeightCategories from "../Scripts/AdjustHeightCategories";
|
||||
import capitalize from "../../../General Scripts/Capilazate";
|
||||
|
||||
|
||||
const Bring_All_Categories = async (setCategories, setStrech, language) => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { getDocs, getFirestore, collection } from "@firebase/firestore/"
|
||||
import { firestore } from "../../../Firebase/Firebase_Config"
|
||||
import capitalize from "../../Scripts/Capilazate"
|
||||
import capitalize from "../../../General Scripts/Capilazate"
|
||||
|
||||
const Bring_All_Languages = async (setLanguage) => {
|
||||
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
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
|
||||
@@ -1,24 +0,0 @@
|
||||
//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
|
||||
@@ -1,83 +0,0 @@
|
||||
import React, {useState} from 'react'
|
||||
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, categoryIsReady}) => {
|
||||
|
||||
const [actualWord, setActualWord] = useState('')
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
const generatePuzzleWord = () => {
|
||||
|
||||
const puzzleWord = document.getElementById('puzzleWord')
|
||||
|
||||
for (let i = 0; i < actualWord.length; i++) {
|
||||
|
||||
let letter = document.createElement('span')
|
||||
|
||||
letter.className = 'letter'
|
||||
letter.textContent = ''
|
||||
|
||||
puzzleWord.appendChild(letter)
|
||||
}
|
||||
|
||||
const counter = document.createElement('span')
|
||||
counter.className = 'counter'
|
||||
counter.textContent = '(' + actualWord.length + ')'
|
||||
|
||||
puzzleWord.appendChild(counter)
|
||||
}
|
||||
|
||||
const definePuzzle = async () => {
|
||||
|
||||
const words = await BringTheWords(language, category, actualWord)
|
||||
const wordSelection = await SelectRandomWord(words)
|
||||
|
||||
const word = await words[wordSelection]
|
||||
|
||||
setActualWord(word)
|
||||
|
||||
}
|
||||
|
||||
if (!displayApp && !actualWord) {
|
||||
|
||||
definePuzzle()
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (actualWord && !displayApp) {
|
||||
|
||||
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])
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="puzzleWord" id="puzzleWord"></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default PuzzleWord
|
||||
@@ -1,86 +0,0 @@
|
||||
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
|
||||
@@ -10,7 +10,7 @@ const Victory = ({currentScore, setCurrentScore}) => {
|
||||
|
||||
return (
|
||||
<div className="victory animate__animated animate__backInDown">
|
||||
<h1>VICTORIA</h1>
|
||||
<h1>VICTORY</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const LettersRegistered = ({lettersRegistered, setLettersRegistered}) => {
|
||||
|
||||
return (
|
||||
<div className="letters-registered">
|
||||
{
|
||||
lettersRegistered.map(letter =>
|
||||
|
||||
<span key={letter}>{letter}</span>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LettersRegistered
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import loadingGifLightTheme from './img/loading-light-theme.png'
|
||||
import loadingGifLightTheme from '../img/loading-light-theme.png'
|
||||
|
||||
const Loading = () => {
|
||||
return (
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
const AlmacenateCategory = (category) => {
|
||||
|
||||
localStorage.setItem('category', category)
|
||||
}
|
||||
|
||||
export default AlmacenateCategory
|
||||
@@ -1,6 +0,0 @@
|
||||
const AlmacenateCurrentScore = (currentScore) => {
|
||||
|
||||
localStorage.setItem('currentScore', currentScore)
|
||||
}
|
||||
|
||||
export default AlmacenateCurrentScore
|
||||
@@ -1,3 +0,0 @@
|
||||
export const AlmacenateLanguage = (language) => {
|
||||
localStorage.setItem('language', language)
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
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
|
||||
@@ -1,18 +0,0 @@
|
||||
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
|
||||
@@ -1,24 +0,0 @@
|
||||
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
|
||||
@@ -1,15 +0,0 @@
|
||||
const DetermineUserLanguage = (setLanguage) => {
|
||||
|
||||
console.log(navigator.language)
|
||||
|
||||
if (navigator.language === 'es') {
|
||||
setLanguage('spanish')
|
||||
}
|
||||
|
||||
if (navigator.language === 'en' || navigator.language === 'en-US') {
|
||||
setLanguage('english')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default DetermineUserLanguage
|
||||
@@ -1,13 +0,0 @@
|
||||
export const RecoveryCurrentCategory = (setCategory) => {
|
||||
|
||||
if (localStorage.getItem('category')) {
|
||||
|
||||
if (localStorage.getItem('category') === 'false') {
|
||||
|
||||
setCategory(false)
|
||||
}
|
||||
|
||||
setCategory(localStorage.getItem('category'))
|
||||
localStorage.removeItem('category')
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export const RecoveryCurrentLanguage = (setLanguage) => {
|
||||
|
||||
if (localStorage.getItem('language')) {
|
||||
|
||||
setLanguage(localStorage.getItem('language'))
|
||||
localStorage.removeItem('language')
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export const RecoveryCurrentScore = (setCurrentScore) => {
|
||||
|
||||
if (localStorage.getItem('currentScore')) {
|
||||
|
||||
setCurrentScore(localStorage.getItem('currentScore'))
|
||||
localStorage.removeItem('currentScore')
|
||||
}
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
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 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 {
|
||||
|
||||
const quantity = hangmanFrame + 1
|
||||
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)
|
||||
|
||||
}
|
||||
|
||||
removeRegisterInput()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const removeRegisterInput = () => {
|
||||
|
||||
window.removeEventListener('keyup', keyRegister)
|
||||
}
|
||||
|
||||
window.addEventListener('keyup', keyRegister)
|
||||
}
|
||||
|
||||
export default Register_Input
|
||||
@@ -1,11 +0,0 @@
|
||||
const SelectRandomWord = (arrayWords) => {
|
||||
|
||||
const randomWord = Math.trunc(
|
||||
|
||||
Math.random() * (arrayWords.length - 0) + 0
|
||||
)
|
||||
|
||||
return randomWord
|
||||
}
|
||||
|
||||
export default SelectRandomWord
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Reference in New Issue
Block a user