Merge pull request 'soundEffect :loud_volume:' (#106) from soundEffect into master

Reviewed-on: #106

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 :
@@ -185,6 +187,10 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
   }
 
   useEffect(() =>{
+    //* Gestion du sound des tours :
+    if (actualPlayerIndex == lastIndex){
+      handleTurn();
+    }
     cptBug=0
     if (actualPlayerIndex==firstPlayer){
       const bot = testPlayers[lastIndex]
@@ -205,6 +211,8 @@ 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/EndGame.tsx

@@ -1,4 +1,4 @@
-import React,  {useEffect} from 'react';
+import React,  {useEffect, useState} from 'react';
 
 
 /* Style */
@@ -11,6 +11,9 @@ import Person from '../res/img/Person.png';
 import Leave from '../res/icon/leave.png';
 import Replay from '../res/icon/replay.png';
 
+/* sound */
+import WinSound from '../res/Audio/win.wav';
+
 /* Component */
 import PersonStatus from '../Components/PersonStatus';
 import ButtonImgNav from '../Components/ButtonImgNav';
@@ -64,6 +67,11 @@ function EndGame() {
         }
     };
 
+    useEffect(() => {
+        handleWinSound();
+    }, []);
+
+
     useEffect(() => {
         const container = document.getElementById("vis-graph");
         if (!container) {
@@ -126,8 +134,21 @@ function EndGame() {
         indicenull = true;
     }
 
+    //* Sound
+    const [playTurnSound, setPlayTurnSound] = useState(false);
+
+    const handleWinSound = () => {
+        setTimeout(() => { // on attend 1s avant de jouer le son
+            setPlayTurnSound(true);
+        }, 300);
+
+        setTimeout(() => { // on attend 2s avant de remettre le son à false
+        setPlayTurnSound(false);
+        }, 2000);
+    };
     return (
         <div>
+            {playTurnSound && <audio src={WinSound} autoPlay />}
             {!IsSolo ? (
                 <div>
                     <div className="head">

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';
 
@@ -300,13 +305,36 @@ const InGame = ({locale, changeLocale}) => {
       window.open(url);
     };
   
-  const [SwitchEnabled, setSwitchEnabled] = useState(false)
+  // const [SwitchEnabled, setSwitchEnabled] = useState(false)
   const allIndices = Stub.GenerateIndice()
   const { indice, players, actualPlayerIndex} = useGame();
 
   const nbPlayer = players.length;
   const navdeduc = 'deduc?actualId=' + actualPlayerIndex + '&nbPlayer=' + nbPlayer;
 
+
+  //* Sound
+  const [playTurnSound, setPlayTurnSound] = useState(false);
+  const [soundPreference, setSoundPreference] = useState(true); // utilisateur
+
+  const handleSoundPreferenceChange = () => {
+    setSoundPreference(!soundPreference);
+    console.log("changement des options du son : "+ soundPreference)
+  };
+
+  const handleTurn = () => {
+    
+    console.log("etat normal du sound : " + soundPreference)
+    if (soundPreference) {
+      setPlayTurnSound(true);
+      
+      setTimeout(() => {
+        setPlayTurnSound(false);
+      }, 2000);
+    }
+  };
+
+
     return (
       <div id="mainDiv">
         {showTurnBar && <TurnBar text={turnBarText}/>}
@@ -336,8 +364,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 &&
@@ -457,19 +487,6 @@ const InGame = ({locale, changeLocale}) => {
           }
         </div>
 
-{/*
-        <Offcanvas show={showP} 
-                  onHide={handleCloseP}>
-          <Offcanvas.Header closeButton>
-            <Offcanvas.Title>Joueurs</Offcanvas.Title>
-            <h3>Il y a {players.length} joueurs</h3>
-          </Offcanvas.Header>
-          <Offcanvas.Body>
-
-          </Offcanvas.Body>
-        </Offcanvas>
-          */}
-
           { !IsSolo &&
             <div className='playerlistDiv'>
               <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} playerIndex={playerIndex} askedWrong={askedWrong} greyForEveryone={() => {}}/>
@@ -486,7 +503,6 @@ const InGame = ({locale, changeLocale}) => {
             <Offcanvas.Title>Indice</Offcanvas.Title>
           </Offcanvas.Header>
           <Offcanvas.Body>
-            {/* Possède les cheveux noir <u>ou</u> joue au basket */}
             {indice?.ToString(locale)}
           </Offcanvas.Body>
         </Offcanvas>
@@ -502,31 +518,12 @@ const InGame = ({locale, changeLocale}) => {
             <Offcanvas.Title><img src={Param} alt='param'/> Paramètres</Offcanvas.Title>
           </Offcanvas.Header>
           <Offcanvas.Body>
-            <Nav className="me-auto">
+            <label style={{ display:'flex'}}>
-                <NavDropdown 
+              <Switch checked={soundPreference} onChange={handleSoundPreferenceChange}/>
-                title={<span><HiLanguage/> Language </span>}
+              <p style={{ marginLeft:'20px'}}>Activer les SFX</p>
-                className="navbar-title" id="basic-nav-dropdown">
-                    <NavDropdown.Item onClick={() => changeLocale('fr')}> 
-                        <FormattedMessage id="languageSelector.french"/> 
-                    </NavDropdown.Item>
-                    <NavDropdown.Item onClick={() => changeLocale('en')}> 
-                        <FormattedMessage id="languageSelector.english"/> 
-                    </NavDropdown.Item>
-                </NavDropdown>
-            </Nav>
-
-            <label>
-              <Switch checked={SwitchEnabled} onChange={setSwitchEnabled}/>
-              <p>Afficher les noeuds possibles</p>
             </label>
-
           </Offcanvas.Body>
         </Offcanvas>
-        {/*
-        <div id="endgamebutton" > {/*  tmp 
-          <ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
-        </div>
-      */}
       </div>
     );
   };

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';