Sounds added

src/App.js

@@ -25,6 +25,7 @@ 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'
 
 function App() {
   const [displayApp, setDisplayApp] = useState(false)
@@ -114,6 +115,9 @@ function App() {
         if (alphabet.includes(currentKey)) {
  
             setLettersRegistered([...lettersRegistered, currentKey])
+           
+            const audio = document.getElementsByClassName('letterIntroduced-audio-container')[0]
+            audio.play()
             
             if (selectedWord.includes(currentKey)) {
               
@@ -226,6 +230,10 @@ function App() {
     <LettersRegistered
           lettersRegistered={lettersRegistered}
         />
+        
+      <audio className="letterIntroduced-audio-container">
+        <source src={introducedLetterSound} type="audio/mp3" autoPlay="true"></source>
+      </audio>
    </>
   );
 }

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

@@ -1,10 +1,18 @@
 import React from "react"
+import defeatSound from './sounds/Defeat Sound.mp3'
 
 const Defeat = ({language}) => {
 
     const [text, setText] = React.useState('')
 
     React.useEffect(() => {
+        
+        const playAudio = () => {
+
+            const audio = document.getElementsByClassName('defeat-audio-container')[0]
+            audio.play()
+    
+        }
 
         if (language === 'english') {
 
@@ -15,13 +23,20 @@ const Defeat = ({language}) => {
 
             setText('PERDISTE')
         }
+
+        playAudio()
         
     }, [])
 
     return (
-        <div className="defeat animate__animated animate__backInDown">
-            <h1>{text}</h1>
-        </div>
+        <>
+            <div className="defeat animate__animated animate__backInDown">
+                <h1>{text}</h1>
+            </div>
+            <audio className="defeat-audio-container">
+                <source src={defeatSound} type="audio/mp3" autoPlay="true"></source>
+            </audio>
+        </>
     )
 }
 

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import victorySound from './sounds/Victory sound.mp3'
 
 const Victory = ({currentScore, setCurrentScore, language}) => {
 
@@ -6,6 +7,13 @@ const Victory = ({currentScore, setCurrentScore, language}) => {
 
     React.useEffect(() => {
 
+        const playAudio = () => {
+
+            const audio = document.getElementsByClassName('victory-audio-container')[0]
+            audio.play()
+    
+        }
+
         setCurrentScore(parseInt(currentScore) + 1)
 
         if (language === 'english') {
@@ -17,13 +25,20 @@ const Victory = ({currentScore, setCurrentScore, language}) => {
 
             setText('VICTORIA')
         }
+
+        playAudio()
         
     }, [])
 
     return (
-        <div className="victory animate__animated animate__backInDown">
-            <h1>{text}</h1>
-        </div>
+        <>
+            <div className="victory animate__animated animate__backInDown">
+                <h1>{text}</h1>
+            </div>
+            <audio className="victory-audio-container">
+                <source src={victorySound} type="audio/mp3" autoPlay="true"></source>
+            </audio>
+        </>
     )
 }