7f82e640e0
fix(leaderboard): fix leaderboard fetch logic fix(test): fix navigation bug upon test quit
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { useEffect } from "react";
|
|
|
|
type ConfettiBurstProps = {
|
|
count?: number;
|
|
};
|
|
|
|
export const ConfettiBurst = ({ count = 30 }: ConfettiBurstProps) => {
|
|
useEffect(() => {
|
|
const timeout = setTimeout(() => {
|
|
const container = document.getElementById("confetti-container");
|
|
if (container) container.innerHTML = "";
|
|
}, 1200);
|
|
|
|
return () => clearTimeout(timeout);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
id="confetti-container"
|
|
className="pointer-events-none absolute inset-0 overflow-hidden"
|
|
>
|
|
{Array.from({ length: count }).map((_, i) => (
|
|
<span
|
|
key={i}
|
|
className="confetti"
|
|
style={{
|
|
left: `${Math.random() * 100}%`,
|
|
backgroundColor: CONFETTI_COLORS[i % CONFETTI_COLORS.length],
|
|
animationDelay: `${Math.random() * 0.2}s`,
|
|
transform: `rotate(${Math.random() * 360}deg)`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const CONFETTI_COLORS = [
|
|
"#a855f7", // purple
|
|
"#6366f1", // indigo
|
|
"#ec4899", // pink
|
|
"#22c55e", // green
|
|
"#facc15", // yellow
|
|
];
|