diff --git a/connect4-ui/app/play/page.tsx b/connect4-ui/app/play/page.tsx index cd7fbbd..00d5c57 100644 --- a/connect4-ui/app/play/page.tsx +++ b/connect4-ui/app/play/page.tsx @@ -17,8 +17,6 @@ type GamePhase = "idle" | "connected" | "ready" | "playing" | "game-over"; type GameResult = "win" | "loss" | "draw" | "terminated"; -const WIN_CONFETTI_DURATION_MS = 10000; - export default function PlayPage() { const router = useRouter(); const { @@ -43,6 +41,7 @@ export default function PlayPage() { const [gameResult, setGameResult] = useState(null); const [tournamentMode, setTournamentMode] = useState(false); const [showWinConfetti, setShowWinConfetti] = useState(false); + const [winConfettiBurstId, setWinConfettiBurstId] = useState(0); const [viewport, setViewport] = useState({ width: 0, height: 0 }); const myColorRef = useRef<1 | 2 | null>(null); @@ -71,20 +70,6 @@ export default function PlayPage() { return () => window.removeEventListener("resize", updateViewport); }, []); - useEffect(() => { - if (gameResult !== "win") { - return; - } - - setShowWinConfetti(true); - const timeoutId = setTimeout( - () => setShowWinConfetti(false), - WIN_CONFETTI_DURATION_MS, - ); - - return () => clearTimeout(timeoutId); - }, [gameResult]); - useEffect(() => { if (status === "disconnected" && shouldRedirectToConnect) { clearRedirectFlag(); @@ -157,6 +142,8 @@ export default function PlayPage() { case "GAME_WINS": setGameResult("win"); + setWinConfettiBurstId((prev) => prev + 1); + setShowWinConfetti(true); setGamePhase("game-over"); setIsMyTurn(false); isMyTurnRef.current = false; @@ -244,9 +231,11 @@ export default function PlayPage() {
{showWinConfetti && ( setShowWinConfetti(false)} numberOfPieces={300} gravity={0.28} className="pointer-events-none fixed! inset-0! z-40!"