From 3e4233d33e38b1e50d210a67d4a2e0e62ba98273 Mon Sep 17 00:00:00 2001 From: Pierre Ferreira Date: Mon, 11 Dec 2023 15:28:34 +0100 Subject: [PATCH 1/3] Ajout de la gestion des soundeffects, et de deux sons, pour le turn et la win :loud_sound: --- .../src/Components/GraphContainer.tsx | 7 +++++- cryptide_project/src/Pages/InGame.tsx | 23 +++++++++++++++++- cryptide_project/src/react-app-env.d.tsx | 2 ++ cryptide_project/src/res/Audio/turn.mp3 | Bin 0 -> 46937 bytes cryptide_project/src/res/Audio/win.wav | Bin 0 -> 236116 bytes 5 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 cryptide_project/src/res/Audio/turn.mp3 create mode 100644 cryptide_project/src/res/Audio/win.wav diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx index bf76136..5fa59f5 100644 --- a/cryptide_project/src/Components/GraphContainer.tsx +++ b/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 = ({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 = ({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 = ({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 diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx index 65314a4..5339e7c 100644 --- a/cryptide_project/src/Pages/InGame.tsx +++ b/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 (
{showTurnBar && } @@ -336,8 +355,10 @@ const InGame = ({locale, changeLocale}) => { setPutImposssibleGrey={setPutImposssibleGreyData} putCorrectBackground={putCorrectBackground} putGreyBackground={putGreyBackgroud} - putImposssibleGrey={putImposssibleGrey}/> + putImposssibleGrey={putImposssibleGrey} + handleTurn={handleTurn}/>
+ {playTurnSound &&