Input for mobile users done

src/App.js

@@ -23,9 +23,12 @@ import checkVictory from "./General Scripts/checkVictory";
 import checkDefeat from "./General Scripts/checkDefeat";
 import BringTheWords from "./Firebase Querys/BringTheWord";
 import SelectRandomWord from "./Firebase Querys/SelectRandomWord";
+import getWidthScreenUser from "./General Scripts/getWidthScreenUser";
+import LetterInput from "./components/Letter Input/LetterInput";
 
 function App() {
   const [displayApp, setDisplayApp] = useState(false)
+  const [mobileUser, setMobileUser] = useState(false)
 
   const [selectedWord, setSelectedWord] = useState('')
 
@@ -72,6 +75,7 @@ function App() {
     
     ChangeTitle(language)
     setLanguageIsReady(true)
+    getWidthScreenUser(setMobileUser)
 
     if (!displayApp && selectedWord === '' && categoryIsReady && languageIsReady) {
       bringWordFromFirebase()
@@ -118,6 +122,13 @@ function App() {
 
   }, [correctLetters, displayApp, lettersRegistered, setLettersRegistered, hangmanFrame, selectedWord])
 
+  React.useEffect(() => {
+
+    window.addEventListener('resize', () => getWidthScreenUser(setMobileUser))
+
+    return () => window.removeEventListener('resize', () => getWidthScreenUser(setMobileUser))
+  }, [])
+
   if (endOfGame) {
     
     setTimeout(() => {
@@ -172,7 +183,13 @@ function App() {
         />
 
       </div>
+
     </div>
+        {
+          mobileUser ?
+            <LetterInput />
+          :null
+        }
         {
           !displayApp ? <Loading /> : null
         }

src/Firebase Querys/BringTheWord.js

@@ -3,21 +3,15 @@ import { getFirestore, collection, doc, getDocs, getDoc } from 'firebase/firesto
 import GetRandomCategory from './GetRandomCategory';
 import SelectRandomWord from './SelectRandomWord';
 
-const BringTheWords = async (language = false, category = false, selectedWord) => {
+const BringTheWords = async (language = 'english', category = false, selectedWord) => {
 
     if (!selectedWord) {
 
         
         console.log(category)
         console.log(language)
-        
-        if (!language) {
 
-            language = 'english'
-
-        }
-
-        if (!category) {
+        if (!category || category === 'false') {
 
             category = await GetRandomCategory()
             

src/Firebase/Firebase_Config.js

@@ -0,0 +1,34 @@
+// Import the functions you need from the SDKs you need
+
+import { initializeApp } from "firebase/app";
+
+// TODO: Add SDKs for Firebase products that you want to use
+
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+
+// Your web app's Firebase configuration
+
+const firebaseConfig = {
+
+  apiKey: "AIzaSyC_6waJmJaj6Xw8hbv6h0ZAPIQ_Ntk-llc",
+
+  authDomain: "hangman-game-with-react.firebaseapp.com",
+
+  projectId: "hangman-game-with-react",
+
+  storageBucket: "hangman-game-with-react.appspot.com",
+
+  messagingSenderId: "836415057159",
+
+  appId: "1:836415057159:web:acfc2dd89087bb60c7e9a2"
+
+
+};
+
+
+// Initialize Firebase
+
+const firestore = initializeApp(firebaseConfig);
+
+export {firestore}

src/General Scripts/getWidthScreenUser.js

@@ -0,0 +1,12 @@
+const getWidthScreenUser = (setMobileUser) => {
+
+    if (window.innerWidth <= 768) {
+        setMobileUser(true)
+    }
+
+    else {
+        setMobileUser(false)
+    }
+}
+
+export default getWidthScreenUser

src/components/Header/Header.jsx

@@ -21,12 +21,16 @@ const Header = ({language, category, displayCategories, setDisplayCategories}) =
 
         if (category) {
 
-            console.log(category);
-            
-            let categoryText = category.split('')
-                categoryText[0] = categoryText[0].toUpperCase()
+            if (category !== 'false') {
 
-            setCategoryText(categoryText)
+                
+                console.log(category);
+                
+                let categoryText = category.split('')
+                categoryText[0] = categoryText[0].toUpperCase()
+                
+                setCategoryText(categoryText)
+            }
         }
 
     }, [category])

src/components/Letter Input/LetterInput.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+const LetterInput = ({registerKeys}) => {
+
+    const registerInput = (letter) => {
+
+        const input = document.getElementById('letter-input')
+
+        input.value = ''
+    }
+
+    return (
+        <div className="letter-input-container">
+            <input id="letter-input" type="text" onChange={(e) => registerInput(e.target.value) } />
+        </div>
+    )
+}
+
+export default LetterInput