Game Logic done

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 */

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"}
+{"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"}

public/sass/_game-container.scss

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

public/sass/_word.scss

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

public/sass/index.scss

@@ -24,3 +24,4 @@ html, body {
 @import 'game-container';
 @import 'defeat-victory';
 @import 'loading';
+@import 'letters-registered';

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() {
 
         />
 
-        <Word />
+        <Word
+          selectedWord={selectedWord}
+          correctLetters={correctLetters}
+        />
 
       </div>
-
+    </div>
-        <WrongLetters />
 
         {
           //!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}
+        />
    </>
   );
 }

src/General Scripts/checkDefeat.js

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

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 (
+        <div>
+            
+        </div>
+    )
+}
+
+export default checkVictory

src/components/LettersRegistered/LettersRegistered.jsx

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

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)

src/components/Word/Word.jsx

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

src/components/WrongLetters/WrongLetters.jsx

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