Game Logic done

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/Firebase Querys/SelectRandomWord.js

@@ -0,0 +1,11 @@
+const SelectRandomWord = (arrayWords) => {
+
+    const randomWord = Math.trunc(
+
+        Math.random() * (arrayWords.length - 0) + 0
+    )
+
+    return randomWord
+}
+
+export default SelectRandomWord

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