Modificated structure of the whole project

src/App.js

@@ -1,31 +1,6 @@
 import React, {useState} from "react";
-import CurrentScore from "./components/CurrentScore/CurrentScore";
-import Hangman from "./components/Hangman/Hangman";
 
 //import PuzzleWord from "./components/Hangman/PuzzleWord/PuzzleWord";
-import Victory from "./components/Victory && Defeat/Victory";
-import Defeat from "./components/Victory && Defeat/Defeat";
-import Loading from "./components/Loading/Loading";
-import AlmacenateCurrentScore from "./Storage Scripts/AlmacenateCurrentScore";
-import DetermineUserLanguage from "./General Scripts/DetermineUserLanguage";
-import Categories from "./components/Categories/Categories";
-import ChangeTitle from "./General Scripts/ChangeTitle";
-import AlmacenateCategory from "./Storage Scripts/AlmacenateCategory";
-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/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";
-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";
-import introducedLetterSound from './sound/Letter introduced.mp3'
 
 import {
   BrowserRouter as Router,
@@ -33,231 +8,31 @@ import {
   Route,
   Link
 } from "react-router-dom";
-import AppHeader from "./components/AppHeader/AppHeader";
+import AppHeader from "./components/Game/components/AppHeader/AppHeader";
 import AdminHeader from "./components/Admin/Header/AdminHeader";
 import ControlPanel from "./components/Admin/Identify/Identify";
 import Identify from "./components/Admin/Identify/Identify";
+import Game from "./components/Game/Game";
+import Admin from "./components/Admin/Admin";
 
 function App() {
-  const [displayApp, setDisplayApp] = useState(false)
-  const [mobileUser, setMobileUser] = useState(false)
-
-  const [selectedWord, setSelectedWord] = useState('')
-
-  const [correctLetters, setCorrectLetters] = useState([])
-  const [lettersRegistered, setLettersRegistered] = useState([])
-  
-  const [language, setLanguage] = useState('english')
-  const [languageIsReady, setLanguageIsReady] = useState(false)
-
-  const [category, setCategory] = useState(false)
-  const [categoryIsReady, setcategoryIsReady] = useState(false)
-
-  const [currentScore, setCurrentScore] = useState(0)
-
-  const [hangmanFrame, setHangmanFrame] = useState(0)
-
-  const [endOfGame, setEndOfGame] = useState('')
-
-  const [displayCategories, setDisplayCategories] = useState(false)
-
-  const bringWordFromFirebase = async () => {
-
-    if (!displayApp && selectedWord === '') {
-      setSelectedWord('a')
-
-      let word = await BringTheWords(language, category, selectedWord)
-          word = word.toLowerCase()
-      
-      console.log(word)
-      await setSelectedWord(word)
-      await setDisplayApp(true)
-    }
-  }
-  
-  React.useEffect(() => {    
-    RecoveryCurrentScore(setCurrentScore)
-    
-    RecoveryCurrentCategory(setCategory)
-    setcategoryIsReady(true)
-    
-    DetermineUserLanguage(setLanguage)
-    RecoveryCurrentLanguage(setLanguage)
-    setLanguageIsReady(true)
-    
-    ChangeTitle(language)
-    setLanguageIsReady(true)
-    getWidthScreenUser(setMobileUser)
-
-    if (!displayApp && selectedWord === '' && categoryIsReady && languageIsReady) {
-      bringWordFromFirebase()
-    }
-
-    console.log(category)
-  }, [categoryIsReady])
-
-
-  React.useEffect(() => {
-    
-    const registerKeys = e => {
-
-      if (displayApp) {
-        console.log(e)
-
-        let currentKey
-        
-        if (!mobileUser) {
-
-          currentKey = e.key.toLowerCase()
-        }
-
-        if (mobileUser) {
-
-          if (e.key) {
-            currentKey = e.key.toLowerCase()
-
-          }
-          else {
-
-            currentKey = e.explicitOriginalTarget.nodeValue
-          }
-        }
-        
-        if (alphabet.includes(currentKey)) {
- 
-            setLettersRegistered([...lettersRegistered, currentKey])
-           
-            const audio = document.getElementsByClassName('letterIntroduced-audio-container')[0]
-            audio.play()
-            
-            if (selectedWord.includes(currentKey)) {
-              
-              if (!correctLetters.includes(currentKey)) {
-                
-                setCorrectLetters([...correctLetters, currentKey])
-                
-                checkVictory(setEndOfGame)
-              }
-              
-            }
-            else {
-              
-              if (hangmanFrame <= 5) {
-                
-                setHangmanFrame(hangmanFrame + 1)
-              }
-              
-              checkDefeat(setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord, mobileUser)
-            }
-          }
-      }
-    }
-
-    if (endOfGame === '') {
- 
-      window.addEventListener('keyup', registerKeys)
-    }
-
-    return () => window.removeEventListener('keyup', registerKeys)
-
-  }, [correctLetters, displayApp, lettersRegistered, setLettersRegistered, hangmanFrame, selectedWord, mobileUser, endOfGame])
-
-  React.useEffect(() => {
-
-    window.addEventListener('resize', () => getWidthScreenUser(setMobileUser))
-
-    return () => window.removeEventListener('resize', () => getWidthScreenUser(setMobileUser))
-  }, [])
-
-  if (endOfGame) {
-    
-    setTimeout(() => {
-        AlmacenateCurrentScore(currentScore)
-        AlmacenateCategory(category)
-        AlmacenateLanguage(language)
-
-        window.location.reload(false)
-        }, 3000)
-  }
-
   return (
-    
     <Router>
       <>
-        
-
         <Switch>
 
           <Route path='/identify'>
-            <AdminHeader />
+
-            <Identify />
+            <Admin />
+
           </Route>
-        
+
           <Route path="/">
-            <AppHeader
-              language={language}
 
-              category={category}
+            <Game />
 
-              displayCategories={displayCategories}
+          </Route>
-              setDisplayCategories={setDisplayCategories}
-            />
 
-            <div className="game-container">
-              
-              {
-                languageIsReady ?
-                
-                <div className='categories-container'>
-                  <Categories currentScore={currentScore} displayCategories={displayCategories} AppLanguage={language} category={category} setCategory={setCategory} categoryIsReady={categoryIsReady} setLanguage={setLanguage}/>
-                </div>
-
-              :null
-              }
-
-              <div className='column-1'>
-                <Hangman
-                  hangmanFrame={hangmanFrame}
-                  />
-              </div>
-              
-              <div className='column-2'>
-                <CurrentScore
-
-                  currentScore={currentScore}
-                  language={language}
-
-                />
-
-                <Word
-                  selectedWord={selectedWord}
-                  correctLetters={correctLetters}
-                />
-
-              </div>
-
-            </div>
-                {
-                  mobileUser ?
-                    <LetterInput
-                    />
-                  :null
-                }
-                {
-                  !displayApp ? <Loading /> : null
-                }
-
-                {endOfGame === 'Victory' ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} language={language}/> : null}
-                {endOfGame === 'Defeat'  ? <Defeat language={language}/> : null}
-
-                <LettersRegistered
-                  lettersRegistered={lettersRegistered}
-                />
-                
-              <audio className="letterIntroduced-audio-container">
-                <source src={introducedLetterSound} type="audio/mp3" autoPlay="true"></source>
-              </audio>
-            </Route>
         </Switch>
       </>
    </Router>

src/components/Admin/Admin.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import AdminHeader from './Header/AdminHeader'
+import Identify from './Identify/Identify'
+
+const Admin = () => {
+    return (
+        <>
+            <AdminHeader />
+            <Identify />
+        </>
+    )
+}
+
+export default Admin

src/components/Admin/Identify/Form/Form.jsx

@@ -19,20 +19,25 @@ const Form = () => {
                 option === 'login' ?
 
                     <form>
-                        <input type="email" placeholder="Email"/>
+                        <input type="email" placeholder="Email" id="login-email"/>
-                        <input type="password" placeholder="Password"/>
+                        <input type="password" placeholder="Password" id="login-password"/>
-                        <input type="submit" value="Login" />
+                        <input type="submit" value="Login"  id="login-submit"/>
                     </form>
 
-                : //saasasasasas
+                : null
+            }
+            {
+                option === 'register' ?
 
                     <form>
-                        <input type="email" placeholder="Email"/>
+                        <input type="email" placeholder="Email" id="register-email"/>
-                        <input type="password" placeholder="Password"/>
+                        <input type="password" placeholder="Password" id="register-password"/>
-                        <input type="password" placeholder="Confirm Password" value=""/>
+                        <input type="password" placeholder="Confirm Password" id="register-confirm-password"/>
-                        <input type="password" placeholder="Admin Reffer Code"/>
+                        <input type="password" placeholder="Admin Reffer Code" id="register-admin-code"/>
-                        <input type="submit" value="Register"/>
+                        <input type="submit" value="Register" id=""/>
                     </form>
+                    
+                : null
             }
         </div>
     )

src/components/Game/Game.jsx

@@ -0,0 +1,252 @@
+import React, {useState} from "react";
+import CurrentScore from "./components/CurrentScore/CurrentScore";
+import Hangman from "./components/Hangman/Hangman";
+
+//import PuzzleWord from "./components/Hangman/PuzzleWord/PuzzleWord";
+import Victory from "./components/Victory && Defeat/Victory";
+import Defeat from "./components/Victory && Defeat/Defeat";
+import Loading from "./components/Loading/Loading";
+import AlmacenateCurrentScore from "../../Storage Scripts/AlmacenateCurrentScore";
+import DetermineUserLanguage from "../../General Scripts/DetermineUserLanguage";
+import Categories from "./components/Categories/Categories";
+import ChangeTitle from "../../General Scripts/ChangeTitle";
+import AlmacenateCategory from "../../Storage Scripts/AlmacenateCategory";
+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/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";
+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";
+import introducedLetterSound from './sound/Letter introduced.mp3';
+import AppHeader from "./components/AppHeader/AppHeader";
+
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+
+function Game() {
+
+  const [displayApp, setDisplayApp] = useState(false)
+  const [mobileUser, setMobileUser] = useState(false)
+
+  const [selectedWord, setSelectedWord] = useState('')
+
+  const [correctLetters, setCorrectLetters] = useState([])
+  const [lettersRegistered, setLettersRegistered] = useState([])
+  
+  const [language, setLanguage] = useState('english')
+  const [languageIsReady, setLanguageIsReady] = useState(false)
+
+  const [category, setCategory] = useState(false)
+  const [categoryIsReady, setcategoryIsReady] = useState(false)
+
+  const [currentScore, setCurrentScore] = useState(0)
+
+  const [hangmanFrame, setHangmanFrame] = useState(0)
+
+  const [endOfGame, setEndOfGame] = useState('')
+
+  const [displayCategories, setDisplayCategories] = useState(false)
+
+  const bringWordFromFirebase = async () => {
+
+    if (!displayApp && selectedWord === '') {
+      setSelectedWord('a')
+
+      let word = await BringTheWords(language, category, selectedWord)
+          word = word.toLowerCase()
+      
+      console.log(word)
+      await setSelectedWord(word)
+      await setDisplayApp(true)
+    }
+  }
+  
+  React.useEffect(() => {    
+    RecoveryCurrentScore(setCurrentScore)
+    
+    RecoveryCurrentCategory(setCategory)
+    setcategoryIsReady(true)
+    
+    DetermineUserLanguage(setLanguage)
+    RecoveryCurrentLanguage(setLanguage)
+    setLanguageIsReady(true)
+    
+    ChangeTitle(language)
+    setLanguageIsReady(true)
+    getWidthScreenUser(setMobileUser)
+
+    if (!displayApp && selectedWord === '' && categoryIsReady && languageIsReady) {
+      bringWordFromFirebase()
+    }
+
+    console.log(category)
+  }, [categoryIsReady])
+
+
+  React.useEffect(() => {
+    
+    const registerKeys = e => {
+
+      if (displayApp) {
+        console.log(e)
+
+        let currentKey
+        
+        if (!mobileUser) {
+
+          currentKey = e.key.toLowerCase()
+        }
+
+        if (mobileUser) {
+
+          if (e.key) {
+            currentKey = e.key.toLowerCase()
+
+          }
+          else {
+
+            currentKey = e.explicitOriginalTarget.nodeValue
+          }
+        }
+        
+        if (alphabet.includes(currentKey)) {
+ 
+            setLettersRegistered([...lettersRegistered, currentKey])
+           
+            const audio = document.getElementsByClassName('letterIntroduced-audio-container')[0]
+            audio.play()
+            
+            if (selectedWord.includes(currentKey)) {
+              
+              if (!correctLetters.includes(currentKey)) {
+                
+                setCorrectLetters([...correctLetters, currentKey])
+                
+                checkVictory(setEndOfGame)
+              }
+              
+            }
+            else {
+              
+              if (hangmanFrame <= 5) {
+                
+                setHangmanFrame(hangmanFrame + 1)
+              }
+              
+              checkDefeat(setEndOfGame, hangmanFrame, setCorrectLetters, selectedWord, mobileUser)
+            }
+          }
+      }
+    }
+
+    if (endOfGame === '') {
+ 
+      window.addEventListener('keyup', registerKeys)
+    }
+
+    return () => window.removeEventListener('keyup', registerKeys)
+
+  }, [correctLetters, displayApp, lettersRegistered, setLettersRegistered, hangmanFrame, selectedWord, mobileUser, endOfGame])
+
+  React.useEffect(() => {
+
+    window.addEventListener('resize', () => getWidthScreenUser(setMobileUser))
+
+    return () => window.removeEventListener('resize', () => getWidthScreenUser(setMobileUser))
+  }, [])
+
+  if (endOfGame) {
+    
+    setTimeout(() => {
+        AlmacenateCurrentScore(currentScore)
+        AlmacenateCategory(category)
+        AlmacenateLanguage(language)
+
+        window.location.reload(false)
+        }, 3000)
+  }
+
+  return (
+      <>
+
+            <AppHeader
+              language={language}
+
+              category={category}
+
+              displayCategories={displayCategories}
+              setDisplayCategories={setDisplayCategories}
+            />
+
+            <div className="game-container">
+              
+              {
+                languageIsReady ?
+                
+                <div className='categories-container'>
+                  <Categories currentScore={currentScore} displayCategories={displayCategories} AppLanguage={language} category={category} setCategory={setCategory} categoryIsReady={categoryIsReady} setLanguage={setLanguage}/>
+                </div>
+
+              :null
+              }
+
+              <div className='column-1'>
+                <Hangman
+                  hangmanFrame={hangmanFrame}
+                  />
+              </div>
+              
+              <div className='column-2'>
+                <CurrentScore
+
+                  currentScore={currentScore}
+                  language={language}
+
+                />
+
+                <Word
+                  selectedWord={selectedWord}
+                  correctLetters={correctLetters}
+                />
+
+              </div>
+
+            </div>
+                {
+                  mobileUser ?
+                    <LetterInput
+                    />
+                  :null
+                }
+                {
+                  !displayApp ? <Loading /> : null
+                }
+
+                {endOfGame === 'Victory' ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} language={language}/> : null}
+                {endOfGame === 'Defeat'  ? <Defeat language={language}/> : null}
+
+                <LettersRegistered
+                  lettersRegistered={lettersRegistered}
+                />
+                
+              <audio className="letterIntroduced-audio-container">
+                <source src={introducedLetterSound} type="audio/mp3" autoPlay="true"></source>
+              </audio>
+        </>
+  );
+}
+
+export default Game;
+

src/components/Game/components/Categories/Categories.jsx

@@ -1,8 +1,8 @@
 import React from "react"
-import capitalize from "../../General Scripts/Capilazate"
+import capitalize from "../../../../General Scripts/Capilazate"
-import AlmacenateCategory from "../../Storage Scripts/AlmacenateCategory"
+import AlmacenateCategory from "../../../../Storage Scripts/AlmacenateCategory"
-import AlmacenateCurrentScore from "../../Storage Scripts/AlmacenateCurrentScore"
+import AlmacenateCurrentScore from "../../../../Storage Scripts/AlmacenateCurrentScore"
-import { AlmacenateLanguage } from "../../Storage Scripts/AlmacenateLanguage"
+import { AlmacenateLanguage } from "../../../../Storage Scripts/AlmacenateLanguage"
 import Bring_All_Categories from "./Firebase Querys/Bring All Categories"
 import Bring_All_Languages from "./Firebase Querys/Bring All Languages"
 

src/components/Game/components/Categories/Firebase Querys/Bring All Categories.js

@@ -1,7 +1,7 @@
-import { firestore } from "../../../Firebase/Firebase_Config"
+import { firestore } from "../../../../../Firebase/Firebase_Config"
 import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
 import AdjustHeightCategories from "../Scripts/AdjustHeightCategories";
-import capitalize from "../../../General Scripts/Capilazate";
+import capitalize from "../../../../../General Scripts/Capilazate";
 
 
 const Bring_All_Categories = async (setCategories, setStrech, language) => {

src/components/Game/components/Categories/Firebase Querys/Bring All Languages.js

@@ -1,6 +1,7 @@
 import { getDocs, getFirestore, collection } from "@firebase/firestore/"
-import { firestore } from "../../../Firebase/Firebase_Config"
+import { firestore } from "../../../../../Firebase/Firebase_Config"
-import capitalize from "../../../General Scripts/Capilazate"
+
+import capitalize from "../../../../../General Scripts/Capilazate"
 
 const Bring_All_Languages = async (setLanguage) => {
     

src/components/Game/components/Loading/Loading.jsx

@@ -4,7 +4,7 @@ import loadingGifLightTheme from '../../img/loading-light-theme.png'
 const Loading = () => {
     return (
         <div className='loading'>
-            <img src={loadingGifLightTheme} alt="" />
+            <img src={loadingGifLightTheme} alt="loading" />
         </div>
     )
 }