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

Game Logic done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-19 16:20:26 -03:00
parent 9425e27bd3
commit 9f9cf73bf3
13 changed files with 154 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/css/index.css
View File

@@ -46,7 +46,7 @@ header h2 {
width: 20vw;
}
.puzzleWord {
.word {
font-family: "Rambla", sans-serif;
font-weight: 400;
font-size: 50pt;
@@ -56,7 +56,7 @@ header h2 {
display: flex;
flex-wrap: wrap;
}
.puzzleWord .letter {
.word .letter {
width: 3vw;
height: 70pt;
margin-left: 2vw;
@@ -65,7 +65,7 @@ header h2 {
justify-content: center;
align-items: flex-end;
}
.puzzleWord .counter {
.word .counter {
font-size: 40pt;
font-family: Arial, Helvetica, sans-serif;
margin-left: 3vw;
@@ -289,4 +289,17 @@ header h2 {
height: 50px;
}
.letters-registered {
margin: 0px 5vw;
display: flex;
align-items: center;
font-family: "Times New Roman", Times, serif;
color: #918c6c;
font-size: 50pt;
height: 20vh;
}
.letters-registered span {
margin-left: 1vw;
}
/*# sourceMappingURL=index.css.map */

2
public/css/index.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.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;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACnJhB;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"}
{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.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;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACnJhB;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;;;AChBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI","file":"index.css"}

2
public/sass/_game-container.scss
View File

@@ -18,6 +18,6 @@
}
@import 'hangman';
@import 'puzzleWord';
@import 'word';
@import 'current-score';
@import 'categories';

2
public/sass/_puzzleWord.scss → public/sass/_word.scss
View File

@@ -1,4 +1,4 @@
.puzzleWord {
.word {
@include bodyFont();
font-size: 50pt;

3
public/sass/index.scss
View File

@@ -23,4 +23,5 @@ html, body {
@import 'header';
@import 'game-container';
@import 'defeat-victory';
@import 'loading';
@import 'loading';
@import 'letters-registered';

66
src/App.js
View File

@@ -15,11 +15,20 @@ import { RecoveryCurrentScore } from "./Storage Scripts/RecoveryCurrentScore";
import { RecoveryCurrentCategory } from "./Storage Scripts/RecoveryCurrentCategory";
import { RecoveryCurrentLanguage } from "./Storage Scripts/RecoveryCurrentLanguage";
import { AlmacenateLanguage } from "./Storage Scripts/AlmacenateLanguage";
import WrongLetters from "./components/WrongLetters/WrongLetters";
import WrongLetters from "./components/LettersRegistered/LettersRegistered";
import Word from "./components/Word/Word";
import LettersRegistered from "./components/LettersRegistered/LettersRegistered";
import alphabet from "./General Scripts/alphabet"
import checkVictory from "./General Scripts/checkVictory";
import checkDefeat from "./General Scripts/checkDefeat";
function App() {
const [displayApp, setDisplayApp] = useState(false)
const [displayApp, setDisplayApp] = useState(true)
const [selectedWord, setSelectedWord] = useState('TEST')
const [correctLetters, setCorrectLetters] = useState([])
const [lettersRegistered, setLettersRegistered] = useState([])
const [language, setLanguage] = useState('english')
const [languageIsReady, setLanguageIsReady] = useState(false)
@@ -36,7 +45,6 @@ function App() {
const [displayCategories, setDisplayCategories] = useState(false)
React.useEffect(() => {
RecoveryCurrentScore(setCurrentScore)
RecoveryCurrentCategory(setCategory)
@@ -48,10 +56,47 @@ function App() {
ChangeTitle(language)
setLanguageIsReady(true)
setSelectedWord(selectedWord.toLowerCase())
}, [])
if (endOfGame) {
React.useEffect(() => {
const registerKeys = e => {
const currentKey = e.key.toLowerCase()
if (displayApp) {
if (alphabet.includes(currentKey)) {
setLettersRegistered([...lettersRegistered, currentKey])
if (selectedWord.includes(currentKey)) {
if (!correctLetters.includes(currentKey)) {
setCorrectLetters([...correctLetters, currentKey])
checkVictory(setEndOfGame)
}
}
else {
setHangmanFrame(hangmanFrame + 1)
checkDefeat(setEndOfGame, hangmanFrame)
}
}
}
}
window.addEventListener('keyup', registerKeys)
return () => window.removeEventListener('keyup', registerKeys)
}, [correctLetters, displayApp, lettersRegistered, setLettersRegistered, hangmanFrame, selectedWord])
if (endOfGame) {
setTimeout(() => {
AlmacenateCurrentScore(currentScore)
@@ -97,11 +142,13 @@ function App() {
/>
<Word />
<Word
selectedWord={selectedWord}
correctLetters={correctLetters}
/>
</div>
<WrongLetters />
</div>
{
//!displayApp ? <Loading /> : null
@@ -109,7 +156,10 @@ function App() {
{endOfGame === 'Victory' ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} /> : null}
{endOfGame === 'Defeat' ? <Defeat /> : null}
</div>
<LettersRegistered
lettersRegistered={lettersRegistered}
/>
</>
);
}

8
src/General Scripts/checkDefeat.js Normal file
View File

@@ -0,0 +1,8 @@
const checkDefeat = (setEndOfGame, hangmanFrame) => {
if (hangmanFrame >= 5) {
setEndOfGame('Defeat')
}
}
export default checkDefeat

31
src/General Scripts/checkVictory.js Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react'
const checkVictory = (setEndOfGame) => {
let parent_element = document.getElementById('word').childNodes
parent_element = [...parent_element]
let result = true
parent_element.forEach(children => {
if (children.innerText === '') {
result = false
}
});
console.log(result)
if (result) {
setEndOfGame('Victory')
}
return (
<div>
</div>
)
}
export default checkVictory

11
src/components/LettersRegistered/LettersRegistered.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const LettersRegistered = ({lettersRegistered}) => {
return (
<div className='letters-registered'>
{lettersRegistered.map((letter, i) => <span key={i}>{letter}</span>)}
</div>
)
}
export default LettersRegistered

4
src/components/Word/Firebase Querys/BringTheWord.js
View File

@@ -1,6 +1,7 @@
import {firestore} from '../../../../Firebase/Firebase_Config'
import { getFirestore, collection, doc, getDocs, getDoc } from 'firebase/firestore/lite';
import GetRandomCategory from './GetRandomCategory';
import SelectRandomWord from './SelectRandomWord';
const BringTheWords = async (language = false, category = false, actualWord) => {
@@ -28,8 +29,9 @@ const BringTheWords = async (language = false, category = false, actualWord) =>
const result = await getDocs(data)
const words = await result.docs.map(doc => doc.id)
const word = SelectRandomWord(await words)
return words
return word
} catch (error) {
console.log(error)

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

25
src/components/Word/Word.jsx
View File

@@ -1,9 +1,28 @@
import React from 'react'
const Word = () => {
const Word = ({selectedWord, correctLetters}) => {
return (
<div>
<div className="word" id='word'>
{
selectedWord.split('').map((letter, i) => {
letter = letter.toLowerCase()
if (i === 0) {
letter = letter.toUpperCase()
}
return (
<span className='letter' key={i}>
{correctLetters.includes(letter.toLowerCase()) ? letter : ''}
</span>
)
})
}
<span className='counter'>
({selectedWord.length})
</span>
</div>
)
}

11
src/components/WrongLetters/WrongLetters.jsx
View File

@@ -1,11 +0,0 @@
import React from 'react'
const WrongLetters = () => {
return (
<div>
</div>
)
}
export default WrongLetters