From 9f9cf73bf34d0f9f4f23458eaf20686c8d2538ae Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Tue, 19 Oct 2021 16:20:26 -0300 Subject: [PATCH] Game Logic done --- public/css/index.css | 19 +++++- public/css/index.css.map | 2 +- public/sass/_game-container.scss | 2 +- public/sass/{_puzzleWord.scss => _word.scss} | 2 +- public/sass/index.scss | 3 +- src/App.js | 66 ++++++++++++++++--- src/General Scripts/checkDefeat.js | 8 +++ src/General Scripts/checkVictory.js | 31 +++++++++ .../LettersRegistered/LettersRegistered.jsx | 11 ++++ .../Word/Firebase Querys/BringTheWord.js | 4 +- .../Word/Firebase Querys}/SelectRandomWord.js | 0 src/components/Word/Word.jsx | 25 ++++++- src/components/WrongLetters/WrongLetters.jsx | 11 ---- 13 files changed, 154 insertions(+), 30 deletions(-) rename public/sass/{_puzzleWord.scss => _word.scss} (97%) create mode 100644 src/General Scripts/checkDefeat.js create mode 100644 src/General Scripts/checkVictory.js create mode 100644 src/components/LettersRegistered/LettersRegistered.jsx rename src/{General Scripts => components/Word/Firebase Querys}/SelectRandomWord.js (100%) delete mode 100644 src/components/WrongLetters/WrongLetters.jsx diff --git a/public/css/index.css b/public/css/index.css index 4c70d82..7fffdaa 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -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 */ diff --git a/public/css/index.css.map b/public/css/index.css.map index a1155e1..b4a7d1d 100644 --- a/public/css/index.css.map +++ b/public/css/index.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/public/sass/_game-container.scss b/public/sass/_game-container.scss index 650b278..73dfce4 100644 --- a/public/sass/_game-container.scss +++ b/public/sass/_game-container.scss @@ -18,6 +18,6 @@ } @import 'hangman'; -@import 'puzzleWord'; +@import 'word'; @import 'current-score'; @import 'categories'; \ No newline at end of file diff --git a/public/sass/_puzzleWord.scss b/public/sass/_word.scss similarity index 97% rename from public/sass/_puzzleWord.scss rename to public/sass/_word.scss index 953f09f..cc9be67 100644 --- a/public/sass/_puzzleWord.scss +++ b/public/sass/_word.scss @@ -1,4 +1,4 @@ -.puzzleWord { +.word { @include bodyFont(); font-size: 50pt; diff --git a/public/sass/index.scss b/public/sass/index.scss index 0850e32..59a8369 100644 --- a/public/sass/index.scss +++ b/public/sass/index.scss @@ -23,4 +23,5 @@ html, body { @import 'header'; @import 'game-container'; @import 'defeat-victory'; -@import 'loading'; \ No newline at end of file +@import 'loading'; +@import 'letters-registered'; \ No newline at end of file diff --git a/src/App.js b/src/App.js index a74147e..63506a6 100644 --- a/src/App.js +++ b/src/App.js @@ -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() { /> - + - - + { //!displayApp ? : null @@ -109,7 +156,10 @@ function App() { {endOfGame === 'Victory' ? : null} {endOfGame === 'Defeat' ? : null} - + + ); } diff --git a/src/General Scripts/checkDefeat.js b/src/General Scripts/checkDefeat.js new file mode 100644 index 0000000..19496c0 --- /dev/null +++ b/src/General Scripts/checkDefeat.js @@ -0,0 +1,8 @@ +const checkDefeat = (setEndOfGame, hangmanFrame) => { + + if (hangmanFrame >= 5) { + setEndOfGame('Defeat') + } +} + +export default checkDefeat diff --git a/src/General Scripts/checkVictory.js b/src/General Scripts/checkVictory.js new file mode 100644 index 0000000..f4ed7a5 --- /dev/null +++ b/src/General Scripts/checkVictory.js @@ -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 ( +
+ +
+ ) +} + +export default checkVictory diff --git a/src/components/LettersRegistered/LettersRegistered.jsx b/src/components/LettersRegistered/LettersRegistered.jsx new file mode 100644 index 0000000..ad01137 --- /dev/null +++ b/src/components/LettersRegistered/LettersRegistered.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +const LettersRegistered = ({lettersRegistered}) => { + return ( +
+ {lettersRegistered.map((letter, i) => {letter})} +
+ ) +} + +export default LettersRegistered diff --git a/src/components/Word/Firebase Querys/BringTheWord.js b/src/components/Word/Firebase Querys/BringTheWord.js index f4c0197..edbe11a 100644 --- a/src/components/Word/Firebase Querys/BringTheWord.js +++ b/src/components/Word/Firebase Querys/BringTheWord.js @@ -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) diff --git a/src/General Scripts/SelectRandomWord.js b/src/components/Word/Firebase Querys/SelectRandomWord.js similarity index 100% rename from src/General Scripts/SelectRandomWord.js rename to src/components/Word/Firebase Querys/SelectRandomWord.js diff --git a/src/components/Word/Word.jsx b/src/components/Word/Word.jsx index 4e53315..ffb882b 100644 --- a/src/components/Word/Word.jsx +++ b/src/components/Word/Word.jsx @@ -1,9 +1,28 @@ import React from 'react' -const Word = () => { +const Word = ({selectedWord, correctLetters}) => { return ( -
- +
+ { + selectedWord.split('').map((letter, i) => { + + letter = letter.toLowerCase() + + if (i === 0) { + letter = letter.toUpperCase() + } + + return ( + + {correctLetters.includes(letter.toLowerCase()) ? letter : ''} + + ) + }) + } + + + ({selectedWord.length}) +
) } diff --git a/src/components/WrongLetters/WrongLetters.jsx b/src/components/WrongLetters/WrongLetters.jsx deleted file mode 100644 index 7c2ea98..0000000 --- a/src/components/WrongLetters/WrongLetters.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' - -const WrongLetters = () => { - return ( -
- -
- ) -} - -export default WrongLetters