Translate done and determinated the user's language

src/App.js

@@ -7,10 +7,11 @@ import Victory from "./components/Hangman/PuzzleWord/Victory";
 import Defeat from "./components/Hangman/PuzzleWord/Defeat";
 import Loading from "./components/Loading";
 import AlmacenateCurrentScore from "./components/Scripts/AlmacenateCurrentScore";
+import DetermineUserLanguage from "./components/Scripts/DetermineUserLanguage";
 
 function App() {
 
-  const [language, setLanguage] = useState('spanish')
+  const [language, setLanguage] = useState('')
   const [category, setCategory] = useState(false)
 
   const [currentScore, setCurrentScore] = useState(0)
@@ -24,12 +25,29 @@ function App() {
 
   React.useEffect(() => {
 
+    DetermineUserLanguage(setLanguage)
+
     if (localStorage.getItem('currentScore')) {
       
       setCurrentScore(localStorage.getItem('currentScore'))
       localStorage.removeItem('currentScore')
     }
 
+    const titleAPP = {
+      english: 'Hangman game',
+      spanish: 'Ahorcado'
+    }
+
+    if (language === 'english') {
+
+      document.title = titleAPP.english
+    }
+
+    if (language === 'spanish') {
+
+      document.title = titleAPP.spanish
+    }
+
   })
 
   if (isVictory || isDefeat) {
@@ -42,6 +60,8 @@ function App() {
         }, 3000)
   }
 
+  
+
   return (
    <>
     <Header language={language}/>
@@ -57,7 +77,12 @@ function App() {
       <div className='column-2'>
 
 
-        <CurrentScore currentScore={currentScore} />
+        <CurrentScore
+
+          currentScore={currentScore}
+
+          language={language}
+        />
 
           {!displayApp ? <Loading /> : null }
 

src/components/CurrentScore.jsx

@@ -1,9 +1,30 @@
 import React from 'react'
 
-const CurrentScore = (props) => {
+const CurrentScore = ({currentScore, language}) => {
+
+    const [text, setText] = React.useState('')
+
+    React.useEffect(() => {
+
+        if (language === 'spanish') {
+            setText('Puntuación: ')
+        }
+        
+        if (language === 'english') {
+            setText('Current Score: ')
+        }
+
+    })
+
     return (
         <div className='current-score'>
-            <h2><span className='text'>Current Score: </span>{props.currentScore}</h2>
+            <h2>
+                <span className='text'>
+                    {text}
+                </span>
+
+                {currentScore}
+                </h2>
         </div>
     )
 }

src/components/Hangman/PuzzleWord/PuzzleWord.jsx

@@ -1,37 +1,35 @@
 import React, {useState} from 'react'
 import Register_Input from '../../Scripts/Register input'
 import SelectRandomWord from '../../Scripts/SelectRandomWord'
-import Defeat from './Defeat'
 import BringTheWords from './Firebase Querys/BringTheWords'
-import Victory from './Victory'
 
 const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScore, setIsVictory, setIsDefeat, displayApp, setDisplayApp, language, category}) => {
 
     const [actualWord, setActualWord] = useState('')
 
-    const generatePuzzleWord = () => {  
-            
-        const puzzleWord = document.getElementById('puzzleWord')
-        
-        for (let i = 0; i < actualWord.length; i++) {
-            
-            let letter = document.createElement('span')
-            
-            letter.className = 'letter'
-            letter.textContent = ''
-            
-            puzzleWord.appendChild(letter)
-        }
-    
-        const counter = document.createElement('span')
-        counter.className = 'counter'
-        counter.textContent = '(' + actualWord.length + ')'
-    
-        puzzleWord.appendChild(counter)
-    }
-
-    
     React.useEffect(() => {
+
+        const generatePuzzleWord = () => {  
+            
+            const puzzleWord = document.getElementById('puzzleWord')
+            
+            for (let i = 0; i < actualWord.length; i++) {
+                
+                let letter = document.createElement('span')
+                
+                letter.className = 'letter'
+                letter.textContent = ''
+                
+                puzzleWord.appendChild(letter)
+            }
+        
+            const counter = document.createElement('span')
+            counter.className = 'counter'
+            counter.textContent = '(' + actualWord.length + ')'
+        
+            puzzleWord.appendChild(counter)
+        }
+
         const definePuzzle = async () => {
         
             const words = await BringTheWords(language, category)
@@ -55,7 +53,7 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor
     
         }
         
-    }, [actualWord])
+    }, [actualWord, category, displayApp, language, setDisplayApp])
 
 
     React.useEffect(() => {
@@ -66,7 +64,7 @@ const PuzzleWord = ({hangmanFrame, setHangmanFrame, currentScore, setCurrentScor
         }
 
 
-    }, [hangmanFrame, displayApp])
+    }, [hangmanFrame, displayApp, actualWord, setHangmanFrame, setIsDefeat, setIsVictory])
     
     
    

src/components/Header.jsx

@@ -3,27 +3,27 @@ import React, {useState} from 'react'
 const Header = (props) => {
 
     const [title, setTitle] = useState('')
-    const [categoryName, setCategoryName] = useState('')
+    const [categoryText, setCategoryText] = useState('')
 
     React.useEffect( () => {
 
         if (props.language === 'english') {
             
             setTitle('Hangman game')
-            setCategoryName('Select category')
+            setCategoryText('Select category')
         }
 
         if (props.language === 'spanish') {
 
             setTitle('Ahorcado')
-            setCategoryName('Select category')
+            setCategoryText('Seleccionar categoría')
         }
     })
 
     return (
         <header>
             <h1>{title}</h1>
-            <h2>{categoryName}</h2>
+            <h2>{categoryText}</h2>
         </header>
     )
 }

src/components/Scripts/DetermineUserLanguage.js

@@ -0,0 +1,15 @@
+const DetermineUserLanguage = (setLanguage) => {
+
+    console.log(navigator.language)
+
+    if (navigator.language === 'es') {
+        setLanguage('spanish')
+    }
+
+    if (navigator.language === 'en' || navigator.language === 'en-US') {
+        setLanguage('english')
+    }
+      
+}
+
+export default DetermineUserLanguage