Game Logic done

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>
-
-        <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}
+        />
    </>
   );
 }

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