diff --git a/src/App.js b/src/App.js index 87dfc5c..8b1f233 100644 --- a/src/App.js +++ b/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 ( <>
@@ -57,7 +77,12 @@ function App() {
- + {!displayApp ? : null } diff --git a/src/components/CurrentScore.jsx b/src/components/CurrentScore.jsx index f4f4143..75278f0 100644 --- a/src/components/CurrentScore.jsx +++ b/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 (
-

Current Score: {props.currentScore}

+

+ + {text} + + + {currentScore} +

) } diff --git a/src/components/Hangman/PuzzleWord/PuzzleWord.jsx b/src/components/Hangman/PuzzleWord/PuzzleWord.jsx index 348e07a..df749ae 100644 --- a/src/components/Hangman/PuzzleWord/PuzzleWord.jsx +++ b/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]) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index d104919..c7de2aa 100644 --- a/src/components/Header.jsx +++ b/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 (

{title}

-

{categoryName}

+

{categoryText}

) } diff --git a/src/components/Scripts/DetermineUserLanguage.js b/src/components/Scripts/DetermineUserLanguage.js new file mode 100644 index 0000000..604adbd --- /dev/null +++ b/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