Update Podium & Sound

socket/src/quizz.config.js

@@ -18,7 +18,7 @@ export const GAME_STATE_INIT = {
         "Bill Gate",
       ],
       solution: 1,
-      cooldow: 5,
+      cooldown: 5,
       time: 15,
     },
     {

src/components/game/states/Answers.jsx

@@ -50,9 +50,17 @@ export default function Answers({
     volume: 0.2,
   })
 
-  const [playMusic, { stop: stopMusic }] = useSound(SFX_ANSWERS_MUSIC, {
+  const [playMusic, { stop: stopMusic, isPlaying }] = useSound(
+    SFX_ANSWERS_MUSIC,
+    {
       volume: 0.2,
-  })
+    },
+  )
+
+  const handleAnswer = (answer) => {
+    socket.emit("player:selectedAnswer", answer)
+    sfxPop()
+  }
 
   useEffect(() => {
     if (!responses) {
@@ -64,11 +72,19 @@ export default function Answers({
     sfxResults()
 
     setPercentages(calculatePercentages(responses))
+  }, [responses, playMusic, stopMusic])
 
+  useEffect(() => {
+    if (!isPlaying) {
+      playMusic()
+    }
+  }, [isPlaying])
+
+  useEffect(() => {
     return () => {
       stopMusic()
     }
-  }, [responses])
+  }, [playMusic, stopMusic])
 
   useEffect(() => {
     socket.on("game:cooldown", (sec) => {
@@ -84,7 +100,7 @@ export default function Answers({
       socket.off("game:cooldown")
       socket.off("game:playerAnswer")
     }
-  }, [])
+  }, [sfxPop])
 
   return (
     <div className="flex h-full flex-1 flex-col justify-between">
@@ -141,7 +157,7 @@ export default function Answers({
                 "opacity-65": responses && correct !== key,
               })}
               icon={ANSWERS_ICONS[key]}
-              onClick={() => socket.emit("player:selectedAnswer", key)}
+              onClick={() => handleAnswer(key)}
             >
               {answer}
             </AnswerButton>

src/components/game/states/Leaderboard.jsx

@@ -5,8 +5,11 @@ export default function Leaderboard({ data: { leaderboard } }) {
         Leaderboard
       </h2>
       <div className="flex w-full flex-col gap-2">
-        {leaderboard.map(({ username, points }) => (
+        {leaderboard.map(({ username, points }, key) => (
-          <div className="flex w-full justify-between rounded-md bg-primary p-3 text-2xl font-bold text-white">
+          <div
+            key={key}
+            className="flex w-full justify-between rounded-md bg-primary p-3 text-2xl font-bold text-white"
+          >
             <span className="drop-shadow-md">{username}</span>
             <span className="drop-shadow-md">{points}</span>
           </div>

src/components/game/states/Podium.jsx

@@ -1,17 +1,60 @@
 import Loader from "@/components/Loader"
+import {
+  SFX_PODIUM_FIRST,
+  SFX_PODIUM_SECOND,
+  SFX_PODIUM_THREE,
+  SFX_SNEAR_ROOL,
+} from "@/constants"
 import useScreenSize from "@/hook/useScreenSize"
 import clsx from "clsx"
 import { useEffect, useState } from "react"
 import ReactConfetti from "react-confetti"
+import useSound from "use-sound"
 
 export default function Podium({ data: { subject, top } }) {
   const [apparition, setApparition] = useState(0)
 
   const { width, height } = useScreenSize()
 
+  const [sfxtThree] = useSound(SFX_PODIUM_THREE, {
+    volume: 0.2,
+  })
+
+  const [sfxSecond] = useSound(SFX_PODIUM_SECOND, {
+    volume: 0.2,
+  })
+
+  const [sfxRool, { stop: sfxRoolStop }] = useSound(SFX_SNEAR_ROOL, {
+    volume: 0.2,
+  })
+
+  const [sfxFirst] = useSound(SFX_PODIUM_FIRST, {
+    volume: 0.2,
+  })
+
+  useEffect(() => {
+    console.log(apparition)
+    switch (apparition) {
+      case 4:
+        sfxRoolStop()
+        sfxFirst()
+        break
+      case 3:
+        sfxRool()
+        break
+      case 2:
+        sfxSecond()
+        break
+      case 1:
+        sfxtThree()
+        break
+    }
+  }, [apparition, sfxFirst, sfxSecond, sfxtThree, sfxRool])
+
   useEffect(() => {
     if (top.length < 3) {
       setApparition(4)
+      return
     }
 
     const interval = setInterval(() => {
@@ -23,7 +66,7 @@ export default function Podium({ data: { subject, top } }) {
     }, 2000)
 
     return () => clearInterval(interval)
-  }, [])
+  }, [apparition])
 
   return (
     <>
@@ -46,13 +89,13 @@ export default function Podium({ data: { subject, top } }) {
         </h2>
 
         <div
-          className={`grid w-full max-w-[800px] flex-1 grid-cols-3 items-end justify-center justify-self-end overflow-y-hidden overflow-x-visible`}
+          className={`grid w-full max-w-[800px] flex-1 grid-cols-${top.length} items-end justify-center justify-self-end overflow-y-hidden overflow-x-visible`}
         >
           {top[1] && (
             <div
               className={clsx(
                 "z-20 flex h-[50%] w-full translate-y-full flex-col items-center justify-center gap-3 opacity-0 transition-all",
-                { "translate-y-0 opacity-100": apparition >= 2 },
+                { "!translate-y-0 opacity-100": apparition >= 2 },
               )}
             >
               <p
@@ -80,7 +123,7 @@ export default function Podium({ data: { subject, top } }) {
             className={clsx(
               "z-30 flex h-[60%] w-full translate-y-full flex-col items-center gap-3 opacity-0 transition-all",
               {
-                "translate-y-0 opacity-100": apparition >= 3,
+                "!translate-y-0 opacity-100": apparition >= 3,
               },
               {
                 "md:min-w-64": top.length < 2,
@@ -110,7 +153,7 @@ export default function Podium({ data: { subject, top } }) {
               className={clsx(
                 "z-10 flex h-[40%] w-full translate-y-full flex-col items-center gap-3 opacity-0 transition-all",
                 {
-                  "translate-y-0 opacity-100": apparition >= 1,
+                  "!translate-y-0 opacity-100": apparition >= 1,
                 },
               )}
             >

src/components/game/states/Result.jsx

@@ -1,19 +1,27 @@
 import CricleCheck from "@/components/icons/CricleCheck"
 import CricleXmark from "@/components/icons/CricleXmark"
+import { SFX_RESULTS_SOUND } from "@/constants"
 import { usePlayerContext } from "@/context/player"
 import { useEffect } from "react"
+import useSound from "use-sound"
 
 export default function Result({
   data: { correct, message, points, myPoints, totalPlayer, rank, aheadOfMe },
 }) {
   const { dispatch } = usePlayerContext()
 
+  const [sfxResults] = useSound(SFX_RESULTS_SOUND, {
+    volume: 0.2,
+  })
+
   useEffect(() => {
     dispatch({
       type: "UPDATE",
       payload: { points: myPoints },
     })
-  }, [])
+
+    sfxResults()
+  }, [sfxResults])
 
   return (
     <section className="anim-show relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">

src/components/game/states/Start.jsx

@@ -1,18 +1,26 @@
+import { SFX_BOUMP_SOUND } from "@/constants"
 import { useSocketContext } from "@/context/socket"
 import clsx from "clsx"
 import { useEffect, useState } from "react"
+import useSound from "use-sound"
 
 export default function Start({ data: { time, subject } }) {
   const { socket } = useSocketContext()
   const [showTitle, setShowTitle] = useState(true)
   const [cooldown, setCooldown] = useState(time)
 
+  const [sfxBoump] = useSound(SFX_BOUMP_SOUND, {
+    volume: 0.2,
+  })
+
   useEffect(() => {
     socket.on("game:startCooldown", () => {
+      sfxBoump()
       setShowTitle(false)
     })
 
     socket.on("game:cooldown", (sec) => {
+      sfxBoump()
       setCooldown(sec)
     })
 
@@ -20,7 +28,7 @@ export default function Start({ data: { time, subject } }) {
       socket.off("game:startCooldown")
       socket.off("game:cooldown")
     }
-  }, [])
+  }, [sfxBoump])
 
   return (
     <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">

src/constants.js

@@ -56,3 +56,8 @@ export const SFX_ANSWERS_MUSIC = "/sounds/answersMusic.mp3"
 export const SFX_ANSWERS_SOUND = "/sounds/answersSound.mp3"
 export const SFX_RESULTS_SOUND = "/sounds/results.mp3"
 export const SFX_SHOW_SOUND = "/sounds/show.mp3"
+export const SFX_BOUMP_SOUND = "/sounds/boump.mp3"
+export const SFX_PODIUM_THREE = "/sounds/three.mp3"
+export const SFX_PODIUM_SECOND = "/sounds/second.mp3"
+export const SFX_PODIUM_FIRST = "/sounds/first.mp3"
+export const SFX_SNEAR_ROOL = "/sounds/snearRoll.mp3"

src/styles/globals.css

@@ -67,7 +67,7 @@
     top: -50%;
     left: -50%;
   }
-  95% {
+  98% {
     opacity: 1;
   }
   100% {