joshuafhiggins/connect4-moderator-observer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 8 Activity

fix: confetti across consecutive wins

Browse Source
This commit is contained in:
Joshua Higgins
2026-04-15 12:30:22 -04:00
Unverified
parent 6696d4c235
commit 40bce14498
1 changed files with 5 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
connect4-ui/app/play/page.tsx
View File

@@ -17,8 +17,6 @@ type GamePhase = "idle" | "connected" | "ready" | "playing" | "game-over";
type GameResult = "win" | "loss" | "draw" | "terminated"; type GameResult = "win" | "loss" | "draw" | "terminated";
const WIN_CONFETTI_DURATION_MS = 10000;
export default function PlayPage() { export default function PlayPage() {
const router = useRouter(); const router = useRouter();
const { const {
@@ -43,6 +41,7 @@ export default function PlayPage() {
const [gameResult, setGameResult] = useState<GameResult | null>(null); const [gameResult, setGameResult] = useState<GameResult | null>(null);
const [tournamentMode, setTournamentMode] = useState(false); const [tournamentMode, setTournamentMode] = useState(false);
const [showWinConfetti, setShowWinConfetti] = useState(false); const [showWinConfetti, setShowWinConfetti] = useState(false);
const [winConfettiBurstId, setWinConfettiBurstId] = useState(0);
const [viewport, setViewport] = useState({ width: 0, height: 0 }); const [viewport, setViewport] = useState({ width: 0, height: 0 });
const myColorRef = useRef<1 | 2 | null>(null); const myColorRef = useRef<1 | 2 | null>(null);
@@ -71,20 +70,6 @@ export default function PlayPage() {
return () => window.removeEventListener("resize", updateViewport); 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(() => { useEffect(() => {
if (status === "disconnected" && shouldRedirectToConnect) { if (status === "disconnected" && shouldRedirectToConnect) {
clearRedirectFlag(); clearRedirectFlag();
@@ -157,6 +142,8 @@ export default function PlayPage() {
case "GAME_WINS": case "GAME_WINS":
setGameResult("win"); setGameResult("win");
setWinConfettiBurstId((prev) => prev + 1);
setShowWinConfetti(true);
setGamePhase("game-over"); setGamePhase("game-over");
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
@@ -244,9 +231,11 @@ export default function PlayPage() {
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
{showWinConfetti && ( {showWinConfetti && (
<Confetti <Confetti
key={winConfettiBurstId}
width={viewport.width} width={viewport.width}
height={viewport.height} height={viewport.height}
recycle={false} recycle={false}
onConfettiComplete={() => setShowWinConfetti(false)}
numberOfPieces={300} numberOfPieces={300}
gravity={0.28} gravity={0.28}
className="pointer-events-none fixed! inset-0! z-40!" className="pointer-events-none fixed! inset-0! z-40!"