Ajout de la gestion des soundeffects, et de deux sons, pour le turn et la win 🔊

cryptide_project/src/Components/GraphContainer.tsx

@@ -50,6 +50,8 @@ interface MyGraphComponentProps {
   putGreyBackground : () => void
   putCorrectBackground : () => void
   putImposssibleGrey : () => void
+
+  handleTurn :() => void
 }
 
 let lastAskingPlayer = 0
@@ -80,7 +82,7 @@ let testTemps = 0
 let testFirst = false
 
 
-const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON, setPutCorrectBackground, setPutGreyBackground, setPutImposssibleGrey, putCorrectBackground, putGreyBackground, putImposssibleGrey}) => {
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched, changecptTour, solo, isDaily, isEasy, addToHistory, showLast, setNetwork, setNetworkEnigme, setPlayerIndex, askedWrong, setAskedWrong, importToPdf, setImportToPdf, importToJSON, setImportToJSON, setPutCorrectBackground, setPutGreyBackground, setPutImposssibleGrey, putCorrectBackground, putGreyBackground, putImposssibleGrey, handleTurn}) => {
   let cptTour: number = 0
 
   //* Gestion du temps :
@@ -205,6 +207,9 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
             let i = 0
             socket.emit("node checked", personIndex, true, lastIndex, room, lastIndex)
             while(playerIndex != lastIndex){
+              //! Play sound ?
+              handleTurn();
+              
               i++
               if (playerIndex == players.length){
                 playerIndex = 0

cryptide_project/src/Pages/InGame.tsx

@@ -27,6 +27,11 @@ import Oeye from "../res/icon/eye.png";
 import Ceye from "../res/icon/hidden.png";
 import JSZip from 'jszip';
 
+/* Sound */
+import turnSound from "../res/Audio/turn.mp3";
+import winSound from "../res/Audio/win.wav";
+
+
 /* nav */
 import { Link, Navigate, useNavigate, useNavigationType } from 'react-router-dom';
 
@@ -307,6 +312,20 @@ const InGame = ({locale, changeLocale}) => {
   const nbPlayer = players.length;
   const navdeduc = 'deduc?actualId=' + actualPlayerIndex + '&nbPlayer=' + nbPlayer;
 
+
+  //* Sound
+  const [playTurnSound, setPlayTurnSound] = useState(false);
+
+  const handleTurn = () => {
+    
+    setPlayTurnSound(true);
+
+    setTimeout(() => {
+      setPlayTurnSound(false);
+    }, 2000);
+  };
+
+
     return (
       <div id="mainDiv">
         {showTurnBar && <TurnBar text={turnBarText}/>}
@@ -336,8 +355,10 @@ const InGame = ({locale, changeLocale}) => {
                           setPutImposssibleGrey={setPutImposssibleGreyData}
                           putCorrectBackground={putCorrectBackground}
                           putGreyBackground={putGreyBackgroud}
-                          putImposssibleGrey={putImposssibleGrey}/>
+                          putImposssibleGrey={putImposssibleGrey}
+                          handleTurn={handleTurn}/>
         </div>
+        {playTurnSound && <audio src={turnSound} autoPlay />}
 
 
         {IsSolo && !isDaily &&

cryptide_project/src/react-app-env.d.tsx

@@ -2,3 +2,5 @@ declare module "*.png";
 declare module "*.svg";
 declare module "*.jpeg";
 declare module "*.jpg";
+declare module '*.mp3';
+declare module '*.wav';