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)
@@ -115,6 +116,9 @@ function App() {
  
             setLettersRegistered([...lettersRegistered, currentKey])
            
+            const audio = document.getElementsByClassName('letterIntroduced-audio-container')[0]
+            audio.play()
+            
             if (selectedWord.includes(currentKey)) {
               
               if (!correctLetters.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,4 +1,5 @@
 import React from "react"
+import defeatSound from './sounds/Defeat Sound.mp3'
 
 const Defeat = ({language}) => {
 
@@ -6,6 +7,13 @@ const Defeat = ({language}) => {
 
     React.useEffect(() => {
         
+        const playAudio = () => {
+
+            const audio = document.getElementsByClassName('defeat-audio-container')[0]
+            audio.play()
+    
+        }
+
         if (language === 'english') {
 
             setText('DEFEAT')
@@ -16,12 +24,19 @@ const Defeat = ({language}) => {
             setText('PERDISTE')
         }
 
+        playAudio()
+        
     }, [])
 
     return (
+        <>
             <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') {
@@ -18,12 +26,19 @@ const Victory = ({currentScore, setCurrentScore, language}) => {
             setText('VICTORIA')
         }
 
+        playAudio()
+        
     }, [])
 
     return (
+        <>
             <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>
+        </>
     )
 }