bug fix

src/components/Victory && Defeat/Defeat.jsx

@@ -1,7 +1,26 @@
-const Defeat = () => {
+import React from "react"
+
+const Defeat = ({language}) => {
+
+    const [text, setText] = React.useState('')
+
+    React.useEffect(() => {
+
+        if (language === 'english') {
+
+            setText('DEFEAT')
+        }
+
+        if (language === 'spanish') {
+
+            setText('PERDISTE')
+        }
+        
+    }, [])
+
     return (
         <div className="defeat animate__animated animate__backInDown">
-            <h1>DEFEAT</h1>
+            <h1>{text}</h1>
         </div>
     )
 }

src/components/Victory && Defeat/Victory.jsx

@@ -1,16 +1,28 @@
 import React from 'react'
 
-const Victory = ({currentScore, setCurrentScore}) => {
+const Victory = ({currentScore, setCurrentScore, language}) => {
+
+    const [text, setText] = React.useState('')
 
     React.useEffect(() => {
 
         setCurrentScore(parseInt(currentScore) + 1)
+
+        if (language === 'english') {
+
+            setText('VICTORY')
+        }
+
+        if (language === 'spanish') {
+
+            setText('VICTORIA')
+        }
         
     }, [])
 
     return (
         <div className="victory animate__animated animate__backInDown">
-            <h1>VICTORY</h1>
+            <h1>{text}</h1>
         </div>
     )
 }

src/components/Word/Word.jsx

@@ -1,6 +1,9 @@
 import React from 'react'
 
 const Word = ({selectedWord, correctLetters}) => {
+
+    let blankSpaces = 0
+
     return (
         <div className="word" id='word'>
             {
@@ -8,6 +11,16 @@ const Word = ({selectedWord, correctLetters}) => {
 
                     letter = letter.toLowerCase()
 
+                    if (letter === ' ') {
+
+                        blankSpaces++
+                        return (
+                            <span className="letter blank" key={i}>
+                                &#8205;
+                            </span>
+                        )
+                    }
+
                     if (i === 0) {
                         letter = letter.toUpperCase()
                     }
@@ -21,7 +34,7 @@ const Word = ({selectedWord, correctLetters}) => {
             }
 
             <span className='counter'>
-                ({selectedWord.length})
+                ({selectedWord.length - blankSpaces})
             </span>
         </div>
     )