franpcode/Hangman-game-with-React
1
0
Fork 0
mirror of https://github.com/FranP-code/Hangman-game-with-React.git synced 2025-10-13 00:42:32 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Build 2 started

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-19 14:07:47 -03:00
parent ef9bb00792
commit b9128d737e
27 changed files with 20 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/App.js
View File

@@ -2,19 +2,19 @@ import React, {useState} from "react";
import CurrentScore from "./components/CurrentScore";
import Hangman from "./components/Hangman/Hangman";
import Header from "./components/Header";
import PuzzleWord from "./components/Hangman/PuzzleWord/PuzzleWord";
//import PuzzleWord from "./components/Hangman/PuzzleWord/PuzzleWord";
import Victory from "./components/Hangman/PuzzleWord/Victory";
import Defeat from "./components/Hangman/PuzzleWord/Defeat";
import Loading from "./components/Loading";
import AlmacenateCurrentScore from "./components/Scripts/AlmacenateCurrentScore";
import DetermineUserLanguage from "./components/Scripts/DetermineUserLanguage";
import AlmacenateCurrentScore from "./Storage Scripts/AlmacenateCurrentScore";
import DetermineUserLanguage from "./General 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";
import ChangeTitle from "./General Scripts/ChangeTitle";
import AlmacenateCategory from "./Storage Scripts/AlmacenateCategory";
import { RecoveryCurrentScore } from "./Storage Scripts/RecoveryCurrentScore";
import { RecoveryCurrentCategory } from "./Storage Scripts/RecoveryCurrentCategory";
import { RecoveryCurrentLanguage } from "./Storage Scripts/RecoveryCurrentLanguage";
import { AlmacenateLanguage } from "./Storage Scripts/AlmacenateLanguage";
function App() {
@@ -43,6 +43,7 @@ function App() {
DetermineUserLanguage(setLanguage)
RecoveryCurrentLanguage(setLanguage)
ChangeTitle(language)
setLanguageIsReady(true)
@@ -99,31 +100,6 @@ function App() {
{!displayApp ? <Loading /> : null }
<PuzzleWord
language={language}
category={category}
categoryIsReady={categoryIsReady}
hangmanFrame={hangmanFrame}
setHangmanFrame={setHangmanFrame}
currentScore={currentScore}
setCurrentScore={setCurrentScore}
isVictory={isVictory}
setIsVictory={setIsVictory}
isDefeat={isDefeat}
setIsDefeat={setIsDefeat}
displayApp={displayApp}
setDisplayApp={setDisplayApp}
/>
{isVictory ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} /> : null}
{isDefeat ? <Defeat /> : null}

0
src/components/Scripts/Capilazate.js → src/General Scripts/Capilazate.js
View File

0
src/components/Scripts/ChangeTitle.js → src/General Scripts/ChangeTitle.js
View File

0
src/components/Scripts/DetermineUserLanguage.js → src/General Scripts/DetermineUserLanguage.js
View File

0
src/components/Scripts/SelectRandomWord.js → src/General Scripts/SelectRandomWord.js
View File

0
src/components/Scripts/AlmacenateCategory.js → src/Storage Scripts/AlmacenateCategory.js
View File

0
src/components/Scripts/AlmacenateCurrentScore.js → src/Storage Scripts/AlmacenateCurrentScore.js
View File

0
src/components/Scripts/AlmacenateLanguage.js → src/Storage Scripts/AlmacenateLanguage.js
View File

0
src/components/Scripts/RecoveryCurrentCategory.js → src/Storage Scripts/RecoveryCurrentCategory.js
View File

0
src/components/Scripts/RecoveryCurrentLanguage.js → src/Storage Scripts/RecoveryCurrentLanguage.js
View File

0
src/components/Scripts/RecoveryCurrentScore.js → src/Storage Scripts/RecoveryCurrentScore.js
View File

6
src/components/Categories/Categories.jsx
View File

@@ -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"

4
src/components/Categories/Firebase Querys/Bring All Categories.js
View File

@@ -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) => {

2
src/components/Categories/Firebase Querys/Bring All Languages.js
View File

@@ -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) => {

0
src/components/Scripts/AdjustHeightCategories.js → src/components/Categories/Scripts/AdjustHeightCategories.js
View File

23
src/components/Hangman/PuzzleWord/AddLettersRegistered.js
View File

@@ -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

24
src/components/Hangman/PuzzleWord/CheckVictory.js
View File

@@ -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

0
src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWords.js → src/components/Hangman/PuzzleWord/Firebase Querys/BringTheWord.js
View File

83
src/components/Hangman/PuzzleWord/PuzzleWord.jsx
View File

@@ -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

86
src/components/Hangman/PuzzleWord/Register input.js
View File

@@ -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

2
src/components/Hangman/PuzzleWord/Victory.jsx
View File

@@ -10,7 +10,7 @@ const Victory = ({currentScore, setCurrentScore}) => {
return (
<div className="victory animate__animated animate__backInDown">
<h1>VICTORIA</h1>
<h1>VICTORY</h1>
</div>
)
}

17
src/components/LettersRegistered/LettersRegistered.jsx
View File

@@ -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

2
src/components/Loading.jsx
View File

@@ -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 (

24
src/components/Scripts/CheckVictory.js
View File

@@ -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

88
src/components/Scripts/Register input.js
View File

@@ -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

0
src/components/img/loading-dark-theme.png → src/img/loading-dark-theme.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

0
src/components/img/loading-light-theme.png → src/img/loading-light-theme.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB