diff --git a/public/sounds/boump.mp3 b/public/sounds/boump.mp3 new file mode 100644 index 0000000..42862b8 Binary files /dev/null and b/public/sounds/boump.mp3 differ diff --git a/public/sounds/first.mp3 b/public/sounds/first.mp3 new file mode 100644 index 0000000..0fcf5e2 Binary files /dev/null and b/public/sounds/first.mp3 differ diff --git a/public/sounds/second.mp3 b/public/sounds/second.mp3 new file mode 100644 index 0000000..59ef123 Binary files /dev/null and b/public/sounds/second.mp3 differ diff --git a/public/sounds/snearRoll.mp3 b/public/sounds/snearRoll.mp3 new file mode 100644 index 0000000..0293b2d Binary files /dev/null and b/public/sounds/snearRoll.mp3 differ diff --git a/public/sounds/three.mp3 b/public/sounds/three.mp3 new file mode 100644 index 0000000..23c47a3 Binary files /dev/null and b/public/sounds/three.mp3 differ diff --git a/socket/src/quizz.config.js b/socket/src/quizz.config.js index 46b7528..5ef76a3 100644 --- a/socket/src/quizz.config.js +++ b/socket/src/quizz.config.js @@ -18,7 +18,7 @@ export const GAME_STATE_INIT = { "Bill Gate", ], solution: 1, - cooldow: 5, + cooldown: 5, time: 15, }, { diff --git a/src/components/game/states/Answers.jsx b/src/components/game/states/Answers.jsx index a90c72d..6fcf1cc 100644 --- a/src/components/game/states/Answers.jsx +++ b/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, { - volume: 0.2, - }) + 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 (
= 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,
},
)}
>
diff --git a/src/components/game/states/Result.jsx b/src/components/game/states/Result.jsx
index d3b91fb..1d99bef 100644
--- a/src/components/game/states/Result.jsx
+++ b/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 (