+ {leaderboard.map(({ username, points }, key) => (
+
{username}
{points}
diff --git a/src/components/game/states/Podium.jsx b/src/components/game/states/Podium.jsx
index b959fb7..34763db 100644
--- a/src/components/game/states/Podium.jsx
+++ b/src/components/game/states/Podium.jsx
@@ -1,13 +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(() => {
@@ -19,91 +66,120 @@ export default function Podium({ data: { subject, top } }) {
}, 2000)
return () => clearInterval(interval)
- }, [])
+ }, [apparition])
return (
-
-
- {subject}
-
+ <>
+ {apparition >= 4 && (
+
+ )}
-
- {top[1] && (
-
= 2 },
- )}
- >
-
- {top[1].username}
-
-
-
- 2
-
-
- {top[1].points}
-
-
-
- )}
+ {apparition >= 3 && top.length >= 3 && (
+
+ )}
+
+
+ {subject}
+
= 3,
- },
- {
- "md:min-w-64": top.length < 2,
- },
- )}
+ 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`}
>
-
= 4 },
- )}
- >
- {top[0].username}
-
-
-
- 1
-
-
- {top[0].points}
-
-
-
= 2 },
+ )}
+ >
+
= 4,
+ },
+ )}
+ >
+ {top[1].username}
+
+
+
+ 2
+
+
+ {top[1].points}
+
+
+
= 1,
+ "!translate-y-0 opacity-100": apparition >= 3,
+ },
+ {
+ "md:min-w-64": top.length < 2,
},
)}
>
-
- {top[2].username}
+
= 4 },
+ )}
+ >
+ {top[0].username}
-
- 3
+
+ 1
-
- {top[2].points}
+ {top[0].points}
+
+ {top[2] && (
+
= 1,
+ },
+ )}
+ >
+
= 4,
+ },
+ )}
+ >
+ {top[2].username}
+
+
+
+ 3
+
+
+
+ {top[2].points}
+
+
+
+ )}
+
+
+
)
}
diff --git a/src/components/game/states/Question.jsx b/src/components/game/states/Question.jsx
index 35feff3..b175361 100644
--- a/src/components/game/states/Question.jsx
+++ b/src/components/game/states/Question.jsx
@@ -1,7 +1,13 @@
-import { useRef } from "react"
+import { SFX_SHOW_SOUND } from "@/constants"
+import { useEffect, useRef } from "react"
+import useSound from "use-sound"
export default function Question({ data: { question, image, cooldown } }) {
- const barRef = useRef(null)
+ const [sfxShow] = useSound(SFX_SHOW_SOUND, { volume: 0.5 })
+
+ useEffect(() => {
+ sfxShow()
+ }, [sfxShow])
return (