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

feat: confetti, winner popup, bracket view

Browse Source
This commit is contained in:
Joshua Higgins
2026-03-30 16:53:13 -04:00
Unverified
parent 77724ba260
commit e4fa58f327
13 changed files with 640 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
connect4-ui/app/layout.tsx
View File

@@ -1,5 +1,6 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import Celebration from "@/components/Celebration";
import Nav from "@/components/Nav"; import Nav from "@/components/Nav";
import { ConnectionProvider } from "@/lib/connection"; import { ConnectionProvider } from "@/lib/connection";
@@ -17,6 +18,7 @@ export default function RootLayout({
<html lang="en"> <html lang="en">
<body className="min-h-screen bg-gray-950 text-gray-100"> <body className="min-h-screen bg-gray-950 text-gray-100">
<ConnectionProvider> <ConnectionProvider>
<Celebration />
<Nav /> <Nav />
<main className="max-w-7xl mx-auto px-4 py-6">{children}</main> <main className="max-w-7xl mx-auto px-4 py-6">{children}</main>
</ConnectionProvider> </ConnectionProvider>

34
connect4-ui/app/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { FormEvent, useEffect, useState } from "react"; import { SubmitEvent, useEffect, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { DEFAULT_WS_URL } from "@/lib/protocol"; import { DEFAULT_WS_URL } from "@/lib/protocol";
import { useConnection } from "@/lib/connection"; import { useConnection } from "@/lib/connection";
@@ -24,7 +24,7 @@ export default function Home() {
} }
}, [shouldRedirectToConnect, clearRedirectFlag]); }, [shouldRedirectToConnect, clearRedirectFlag]);
const onSubmit = (event: FormEvent<HTMLFormElement>) => { const onSubmit = (event: SubmitEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
connect({ role: "observer", wsUrl }); connect({ role: "observer", wsUrl });
@@ -35,26 +35,12 @@ export default function Home() {
<div className="max-w-3xl mx-auto py-10"> <div className="max-w-3xl mx-auto py-10">
<div className="bg-gray-900 border border-gray-700 rounded-2xl p-6 md:p-8 flex flex-col gap-6"> <div className="bg-gray-900 border border-gray-700 rounded-2xl p-6 md:p-8 flex flex-col gap-6">
<div> <div>
<h1 className="text-3xl font-bold text-white"> <h1 className="text-3xl font-bold text-white">Connect to Server</h1>
Connect to Moderator Server
</h1>
<p className="text-sm text-gray-400 mt-2"> <p className="text-sm text-gray-400 mt-2">
Connect as an observer to watch live matches and tournaments. Connect as an observer to watch live matches and tournaments.
</p> </p>
</div> </div>
{shouldRedirectToConnect && (
<div className="rounded-lg border border-red-700 bg-red-950/40 px-4 py-3 text-sm text-red-200">
Connection lost. Please reconnect to continue.
</div>
)}
{status === "connected" && role && (
<div className="rounded-lg border border-green-700 bg-green-950/30 px-4 py-3 text-sm text-green-200">
Connected to {connectedWsUrl} as observer.
</div>
)}
<form className="flex flex-col gap-4" onSubmit={onSubmit}> <form className="flex flex-col gap-4" onSubmit={onSubmit}>
<div> <div>
<label className="text-xs text-gray-400 uppercase tracking-wider mb-1 block"> <label className="text-xs text-gray-400 uppercase tracking-wider mb-1 block">
@@ -68,6 +54,18 @@ export default function Home() {
/> />
</div> </div>
{shouldRedirectToConnect && (
<div className="rounded-lg border border-red-700 bg-red-950/40 px-4 py-3 text-sm text-red-200">
Connection lost. Please reconnect to continue.
</div>
)}
{status === "connected" && role && (
<div className="rounded-lg border border-green-700 bg-green-950/30 px-4 py-3 text-sm text-green-200">
Connected to {connectedWsUrl} as observer.
</div>
)}
<div className="flex flex-wrap gap-2 pt-2"> <div className="flex flex-wrap gap-2 pt-2">
<button <button
type="submit" type="submit"
@@ -75,7 +73,7 @@ export default function Home() {
> >
{status === "connecting" || status === "reconnecting" {status === "connecting" || status === "reconnecting"
? "Connecting..." ? "Connecting..."
: "Connect to Server"} : "Connect"}
</button> </button>
</div> </div>
</form> </form>

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

@@ -2,6 +2,7 @@
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Confetti from "react-confetti";
import Board from "@/components/Board"; import Board from "@/components/Board";
import { import {
BoardState, BoardState,
@@ -16,6 +17,8 @@ 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 {
@@ -24,7 +27,6 @@ export default function PlayPage() {
status, status,
send, send,
subscribe, subscribe,
disconnect,
reconnectAttempts, reconnectAttempts,
shouldRedirectToConnect, shouldRedirectToConnect,
clearRedirectFlag, clearRedirectFlag,
@@ -39,26 +41,16 @@ export default function PlayPage() {
row: number; row: number;
} | null>(null); } | null>(null);
const [gameResult, setGameResult] = useState<GameResult | null>(null); const [gameResult, setGameResult] = useState<GameResult | null>(null);
const [moveCount, setMoveCount] = useState(0);
const [statusMessages, setStatusMessages] = useState<string[]>([]);
const [tournamentMode, setTournamentMode] = useState(false); const [tournamentMode, setTournamentMode] = useState(false);
const [showWinConfetti, setShowWinConfetti] = useState(false);
const [viewport, setViewport] = useState({ width: 0, height: 0 });
const myColorRef = useRef<1 | 2 | null>(null); const myColorRef = useRef<1 | 2 | null>(null);
const isMyTurnRef = useRef(false); const isMyTurnRef = useRef(false);
const addStatus = useCallback(
(msg: string) =>
setStatusMessages((prev) => [
`[${new Date().toLocaleTimeString()}] ${msg}`,
...prev.slice(0, 29),
]),
[],
);
const resetGame = useCallback(() => { const resetGame = useCallback(() => {
setBoard(createEmptyBoard()); setBoard(createEmptyBoard());
setLastMove(null); setLastMove(null);
setMoveCount(0);
setMyColor(null); setMyColor(null);
myColorRef.current = null; myColorRef.current = null;
setIsMyTurn(false); setIsMyTurn(false);
@@ -66,6 +58,33 @@ export default function PlayPage() {
setGameResult(null); setGameResult(null);
}, []); }, []);
useEffect(() => {
const updateViewport = () => {
setViewport({
width: window.innerWidth,
height: window.innerHeight,
});
};
updateViewport();
window.addEventListener("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();
@@ -99,16 +118,13 @@ export default function PlayPage() {
case "CONNECT_ACK": case "CONNECT_ACK":
case "RECONNECT_ACK": case "RECONNECT_ACK":
setGamePhase((prev) => (prev === "idle" ? "connected" : prev)); setGamePhase((prev) => (prev === "idle" ? "connected" : prev));
addStatus("Connected to server");
break; break;
case "ERROR": case "ERROR":
addStatus(`⚠ ${msg.message}`);
break; break;
case "READY_ACK": case "READY_ACK":
setGamePhase("ready"); setGamePhase("ready");
addStatus("⏳ Waiting for an opponent...");
break; break;
case "GAME_START": { case "GAME_START": {
@@ -120,11 +136,6 @@ export default function PlayPage() {
const firstTurn = msg.goesFirst; const firstTurn = msg.goesFirst;
setIsMyTurn(firstTurn); setIsMyTurn(firstTurn);
isMyTurnRef.current = firstTurn; isMyTurnRef.current = firstTurn;
addStatus(
msg.goesFirst
? "🔴 You are Red - you go first"
: "🟡 You are Yellow - wait for opponent's move",
);
break; break;
} }
@@ -139,10 +150,8 @@ export default function PlayPage() {
setLastMove({ column: msg.column, row }); setLastMove({ column: msg.column, row });
return next; return next;
}); });
setMoveCount((n) => n + 1);
setIsMyTurn(true); setIsMyTurn(true);
isMyTurnRef.current = true; isMyTurnRef.current = true;
addStatus(`Opponent played column ${msg.column}`);
break; break;
} }
@@ -151,7 +160,6 @@ export default function PlayPage() {
setGamePhase("game-over"); setGamePhase("game-over");
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
addStatus("🏆 You won!");
break; break;
case "GAME_LOSS": case "GAME_LOSS":
@@ -159,7 +167,6 @@ export default function PlayPage() {
setGamePhase("game-over"); setGamePhase("game-over");
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
addStatus("💔 You lost");
break; break;
case "GAME_DRAW": case "GAME_DRAW":
@@ -167,7 +174,6 @@ export default function PlayPage() {
setGamePhase("game-over"); setGamePhase("game-over");
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
addStatus("🤝 Draw");
break; break;
case "GAME_TERMINATED": case "GAME_TERMINATED":
@@ -175,12 +181,10 @@ export default function PlayPage() {
setGamePhase("game-over"); setGamePhase("game-over");
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
addStatus("⛔ Match terminated");
break; break;
case "TOURNAMENT_START": case "TOURNAMENT_START":
setTournamentMode(true); setTournamentMode(true);
addStatus(`🏆 Tournament started: ${msg.tournamentType}`);
break; break;
case "TOURNAMENT_END": case "TOURNAMENT_END":
@@ -188,14 +192,12 @@ export default function PlayPage() {
resetGame(); resetGame();
send(cmd.ready()); send(cmd.ready());
setGamePhase("ready"); setGamePhase("ready");
addStatus("⏳ Ready for next round...");
break; break;
case "TOURNAMENT_CANCEL": case "TOURNAMENT_CANCEL":
setTournamentMode(false); setTournamentMode(false);
setGamePhase("connected"); setGamePhase("connected");
resetGame(); resetGame();
addStatus("Tournament cancelled");
break; break;
default: default:
@@ -204,7 +206,7 @@ export default function PlayPage() {
}); });
return unsubscribe; return unsubscribe;
}, [addStatus, resetGame, send, subscribe]); }, [resetGame, send, subscribe]);
const handleColumnClick = useCallback( const handleColumnClick = useCallback(
(col: number) => { (col: number) => {
@@ -221,18 +223,15 @@ export default function PlayPage() {
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
setMoveCount((n) => n + 1);
send(cmd.play(col)); send(cmd.play(col));
addStatus(`You played column ${col}`);
}, },
[addStatus, gamePhase, send], [gamePhase, send],
); );
const sendReady = useCallback(() => { const sendReady = useCallback(() => {
send(cmd.ready()); send(cmd.ready());
setGamePhase("ready"); setGamePhase("ready");
addStatus("⏳ Waiting for an opponent..."); }, [send]);
}, [addStatus, send]);
const myColorLabel = const myColorLabel =
myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null; myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null;
@@ -243,6 +242,17 @@ export default function PlayPage() {
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
{showWinConfetti && (
<Confetti
width={viewport.width}
height={viewport.height}
recycle={false}
numberOfPieces={300}
gravity={0.28}
className="pointer-events-none fixed! inset-0! z-40!"
/>
)}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-2xl font-bold text-white">🎮 Play Connect4</h1> <h1 className="text-2xl font-bold text-white">🎮 Play Connect4</h1>
@@ -262,26 +272,6 @@ export default function PlayPage() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-col gap-3">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider">
Session
</h2>
<div className="text-xs text-gray-400">
Status: <span className="text-gray-200">{status}</span>
</div>
<div className="text-xs text-gray-400">
User: <span className="text-gray-200">{username}</span>
</div>
<button
onClick={disconnect}
className="w-full py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
>
Disconnect
</button>
</div>
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-col gap-3"> <div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-col gap-3">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider"> <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider">
Match Match
@@ -313,9 +303,6 @@ export default function PlayPage() {
myColor && ( myColor && (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800"> <div className="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800">
<div
className={`w-4 h-4 rounded-full ${myColor === 1 ? "bg-red-500" : "bg-yellow-400"}`}
/>
<span className="text-white font-medium text-sm"> <span className="text-white font-medium text-sm">
You are {myColorLabel} You are {myColorLabel}
</span> </span>
@@ -334,10 +321,6 @@ export default function PlayPage() {
: "⏳ Waiting for opponent..."} : "⏳ Waiting for opponent..."}
</div> </div>
)} )}
<div className="text-xs text-gray-500 text-center">
{moveCount} move{moveCount !== 1 ? "s" : ""} played
</div>
</div> </div>
)} )}
@@ -350,23 +333,6 @@ export default function PlayPage() {
</button> </button>
)} )}
</div> </div>
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2">
Status Log
</h2>
<div className="flex flex-col gap-0.5 max-h-52 overflow-y-auto">
{statusMessages.length === 0 ? (
<p className="text-gray-600 text-xs">No events yet</p>
) : (
statusMessages.map((m, i) => (
<p key={i} className="text-xs text-gray-400 font-mono">
{m}
</p>
))
)}
</div>
</div>
</div> </div>
<div className="lg:col-span-2 bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center justify-center gap-4 min-h-96"> <div className="lg:col-span-2 bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center justify-center gap-4 min-h-96">
@@ -418,7 +384,6 @@ export default function PlayPage() {
: "⛔ Match Terminated"} : "⛔ Match Terminated"}
</div> </div>
)} )}
<Board <Board
board={board} board={board}
lastMove={lastMove} lastMove={lastMove}
@@ -455,7 +420,7 @@ function PhaseIndicator({
}) { }) {
if (phase === "playing" && isMyTurn) { if (phase === "playing" && isMyTurn) {
return ( return (
<span className="px-3 py-1.5 rounded-full text-sm font-medium bg-green-900/60 text-green-300 animate-pulse"> <span className="px-3 py-1.5 rounded-full text-sm font-medium bg-green-900/60 text-green-300">
Your Turn! Your Turn!
</span> </span>
); );

473
connect4-ui/app/spectate/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Board from "@/components/Board"; import Board from "@/components/Board";
import { import {
@@ -30,6 +30,29 @@ interface LiveGame {
| null; | null;
} }
interface KnockoutMatchView {
key: string;
roundIndex: number;
matchIndex: number;
player1: string | null;
player2: string | null;
winner: string | null;
currentTurnColor: 1 | 2 | null;
matchId: number | null;
status: "scheduled" | "live" | "completed";
resultKind: LiveGame["result"] extends infer T
? T extends { kind: infer K }
? K
: null
: null;
}
interface KnockoutRoundView {
label: string;
matches: KnockoutMatchView[];
projected?: boolean;
}
export default function SpectatePage() { export default function SpectatePage() {
const router = useRouter(); const router = useRouter();
const { const {
@@ -50,8 +73,11 @@ export default function SpectatePage() {
const [liveGames, setLiveGames] = useState<Map<number, LiveGame>>(new Map()); const [liveGames, setLiveGames] = useState<Map<number, LiveGame>>(new Map());
const [selectedGame, setSelectedGame] = useState<number | null>(null); const [selectedGame, setSelectedGame] = useState<number | null>(null);
const [log, setLog] = useState<string[]>([]); const [log, setLog] = useState<string[]>([]);
const [knockoutRawData, setKnockoutRawData] = useState("");
const [tournamentWinner, setTournamentWinner] = useState<string | null>(null);
const liveGamesRef = useRef<Map<number, LiveGame>>(new Map()); const liveGamesRef = useRef<Map<number, LiveGame>>(new Map());
const initialBoardSyncPendingRef = useRef(true);
const addLog = useCallback( const addLog = useCallback(
(msg: string) => (msg: string) =>
@@ -97,20 +123,35 @@ export default function SpectatePage() {
}, [role, status, shouldRedirectToConnect, clearRedirectFlag, router]); }, [role, status, shouldRedirectToConnect, clearRedirectFlag, router]);
useEffect(() => { useEffect(() => {
const unsubscribe = subscribe((msg: ParsedMessage) => { const unsubscribe = subscribe((msg: ParsedMessage, raw: string) => {
if (
tournamentType === "KnockoutBracket" &&
msg.type === "UNKNOWN" &&
isKnockoutDataMessage(raw)
) {
setKnockoutRawData(raw);
}
switch (msg.type) { switch (msg.type) {
case "TOURNAMENT_START": case "TOURNAMENT_START":
setTournamentActive(true); setTournamentActive(true);
setTournamentType(msg.tournamentType); setTournamentType(msg.tournamentType);
setScores([]); setScores([]);
setKnockoutRawData("");
setTournamentWinner(null);
addLog(`🏆 Tournament started: ${msg.tournamentType}`); addLog(`🏆 Tournament started: ${msg.tournamentType}`);
send(cmd.gameList()); send(cmd.gameList());
send(cmd.playerList()); send(cmd.playerList());
if (msg.tournamentType === "KnockoutBracket") {
send(cmd.getData("TOURNAMENT_DATA"));
}
break; break;
case "TOURNAMENT_CANCEL": case "TOURNAMENT_CANCEL":
setTournamentActive(false); setTournamentActive(false);
setTournamentType(null); setTournamentType(null);
setKnockoutRawData("");
setTournamentWinner(null);
addLog("❌ Tournament cancelled"); addLog("❌ Tournament cancelled");
break; break;
@@ -126,6 +167,10 @@ export default function SpectatePage() {
send(cmd.playerList()); send(cmd.playerList());
break; break;
case "TOURNAMENT_WINNER":
setTournamentWinner(msg.username);
break;
case "CONNECT_EVENT": case "CONNECT_EVENT":
addLog(`Player joined: ${msg.username}`); addLog(`Player joined: ${msg.username}`);
send(cmd.playerList()); send(cmd.playerList());
@@ -159,15 +204,26 @@ export default function SpectatePage() {
); );
send(cmd.gameList()); send(cmd.gameList());
send(cmd.playerList()); send(cmd.playerList());
if (tournamentType === "KnockoutBracket" && !knockoutRawData) {
send(cmd.getData("TOURNAMENT_DATA"));
}
break; break;
case "GAME_LIST": case "GAME_LIST":
setGameList(msg.games); setGameList(msg.games);
const shouldHydrateWithWatch = initialBoardSyncPendingRef.current;
for (const g of msg.games) { for (const g of msg.games) {
if (!liveGamesRef.current.has(g.id)) { const isNewMatch = !liveGamesRef.current.has(g.id);
updateGame(g.id, { player1: g.player1, player2: g.player2 });
if (isNewMatch && shouldHydrateWithWatch) {
send(cmd.gameWatch(g.id)); send(cmd.gameWatch(g.id));
} }
} }
if (shouldHydrateWithWatch) {
initialBoardSyncPendingRef.current = false;
}
break; break;
case "GAME_WATCH_ACK": { case "GAME_WATCH_ACK": {
@@ -251,6 +307,11 @@ export default function SpectatePage() {
) { ) {
setTournamentActive(true); setTournamentActive(true);
setTournamentType(msg.value); setTournamentType(msg.value);
if (msg.value === "KnockoutBracket") {
send(cmd.getData("TOURNAMENT_DATA"));
}
} else if (msg.key === "TOURNAMENT_DATA" && msg.value) {
setKnockoutRawData(msg.value);
} }
break; break;
@@ -264,11 +325,12 @@ export default function SpectatePage() {
}); });
return unsubscribe; return unsubscribe;
}, [addLog, send, subscribe, updateGame]); }, [addLog, knockoutRawData, send, subscribe, tournamentType, updateGame]);
useEffect(() => { useEffect(() => {
if (status !== "connected" || role !== "observer") return; if (status !== "connected" || role !== "observer") return;
initialBoardSyncPendingRef.current = true;
send(cmd.getData("TOURNAMENT_STATUS")); send(cmd.getData("TOURNAMENT_STATUS"));
send(cmd.gameList()); send(cmd.gameList());
send(cmd.playerList()); send(cmd.playerList());
@@ -276,26 +338,28 @@ export default function SpectatePage() {
const selectedGameData = const selectedGameData =
selectedGame !== null ? liveGames.get(selectedGame) : null; selectedGame !== null ? liveGames.get(selectedGame) : null;
const showLeaderboard = tournamentType === "RoundRobin";
const showKnockoutBracket = tournamentType === "KnockoutBracket";
const knockoutRounds = useMemo(
() => parseKnockoutRounds(knockoutRawData),
[knockoutRawData],
);
const sortedPlayers = useMemo(
() =>
[...players].sort((a, b) =>
a.username.localeCompare(b.username, undefined, {
sensitivity: "base",
}),
),
[players],
);
const knockoutBracket = useMemo(
() => buildKnockoutBracket(knockoutRounds, liveGames, tournamentWinner),
[knockoutRounds, liveGames, tournamentWinner],
);
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-white">
👁 Observer Dashboard
</h1>
<p className="text-gray-400 text-sm mt-1">
Unified spectate and tournament view
</p>
</div>
<button
onClick={disconnect}
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
>
Disconnect
</button>
</div>
{status !== "connected" && ( {status !== "connected" && (
<div className="rounded-lg border border-yellow-700 bg-yellow-950/30 px-4 py-3 text-sm text-yellow-200"> <div className="rounded-lg border border-yellow-700 bg-yellow-950/30 px-4 py-3 text-sm text-yellow-200">
Waiting for observer connection... Waiting for observer connection...
@@ -328,34 +392,6 @@ export default function SpectatePage() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
Leaderboard
</h2>
{scores.length === 0 ? (
<p className="text-gray-500 text-sm text-center py-4">
No scores yet
</p>
) : (
<div className="flex flex-col gap-1.5">
{scores.map((s, i) => (
<div
key={s.player}
className="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800"
>
<span className="text-sm font-bold w-6 text-gray-300">
{i + 1}.
</span>
<span className="text-white flex-1 font-medium text-sm">
{s.player}
</span>
<span className="text-blue-400 font-bold">{s.score}</span>
</div>
))}
</div>
)}
</div>
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4"> <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3 flex items-center justify-between"> <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3 flex items-center justify-between">
<span>Players</span> <span>Players</span>
@@ -369,7 +405,7 @@ export default function SpectatePage() {
</p> </p>
) : ( ) : (
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
{players.map((p) => ( {sortedPlayers.map((p) => (
<div <div
key={p.username} key={p.username}
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-800" className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-800"
@@ -396,29 +432,140 @@ export default function SpectatePage() {
)} )}
</div> </div>
{showLeaderboard && (
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4"> <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2"> <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
Event Log Leaderboard
</h2> </h2>
<div className="flex flex-col gap-0.5 max-h-40 overflow-y-auto"> {scores.length === 0 ? (
{log.slice(0, 20).map((entry, i) => ( <p className="text-gray-500 text-sm text-center py-4">
<p key={i} className="text-xs text-gray-400 font-mono"> No scores yet
{entry}
</p> </p>
) : (
<div className="flex flex-col gap-1.5">
{scores.map((s, i) => (
<div
key={s.player}
className="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800"
>
<span className="text-sm font-bold w-6 text-gray-300">
{i + 1}.
</span>
<span className="text-white flex-1 font-medium text-sm">
{s.player}
</span>
<span className="text-blue-400 font-bold">{s.score}</span>
</div>
))} ))}
{log.length === 0 && ( </div>
<p className="text-gray-600 text-xs">No events yet</p>
)} )}
</div> </div>
</div> )}
</div> </div>
<div className="lg:col-span-2 flex flex-col gap-4"> <div className="lg:col-span-2 flex flex-col gap-4">
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4"> <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3"> <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
Active Matches {showKnockoutBracket ? "Tournament Bracket" : "Active Matches"}
</h2> </h2>
{gameList.length === 0 ? ( {showKnockoutBracket ? (
knockoutBracket.length === 0 ? (
<div className="rounded-lg border border-dashed border-gray-700 bg-gray-950/60 px-4 py-6 text-center text-sm text-gray-500">
Knockout seeding is still in progress. The bracket will appear
once tournament data is available.
</div>
) : (
<div className="overflow-x-auto pb-2">
<div className="flex min-w-max place-content-center items-stretch gap-10">
{knockoutBracket.map((round) => (
<div
key={round.label}
className="flex w-60 shrink-0 flex-col"
>
<div className="mb-3 text-center">
<span className="block text-xs font-semibold uppercase tracking-[0.2em] text-gray-400">
{round.label}
</span>
</div>
<div className="flex flex-1 flex-col justify-center gap-3">
{round.matches.map((match) => {
const isSelected =
match.matchId !== null &&
selectedGame === match.matchId;
const canSelect = match.matchId !== null;
const borderClass =
match.status === "completed"
? "border-green-700/80"
: "border-gray-700";
const Tag = canSelect ? "button" : "div";
return (
<Tag
key={match.key}
{...(canSelect
? {
onClick: () =>
setSelectedGame(
isSelected ? null : match.matchId,
),
type: "button" as const,
}
: {})}
className={`w-full rounded-xl border bg-gray-950/70 p-3 text-left transition-colors ${borderClass} ${
canSelect
? isSelected
? "ring-1 ring-blue-400"
: "hover:border-blue-700/80"
: ""
}`}
>
<div className="flex flex-col gap-2">
<BracketPlayerRow
name={match.player1}
playerColor={1}
isActive={match.currentTurnColor === 1}
/>
<BracketPlayerRow
name={match.player2}
playerColor={2}
isActive={match.currentTurnColor === 2}
/>
<div className="flex items-center justify-between pt-1 text-xs">
<span className="text-gray-500">
{match.matchId !== null
? `Match #${match.matchId}`
: "Awaiting match"}
</span>
<span
className={`rounded-full px-2 py-0.5 ${
match.status === "completed"
? "bg-green-950/70 text-green-300"
: match.status === "live"
? "bg-blue-950/70 text-blue-300"
: "bg-gray-800 text-gray-400"
}`}
>
{match.status === "completed"
? match.resultKind === "draw"
? "Tie"
: "Complete"
: match.status === "live"
? "Live"
: "Pending"}
</span>
</div>
</div>
</Tag>
);
})}
</div>
</div>
))}
</div>
</div>
)
) : gameList.length === 0 ? (
<p className="text-gray-500 text-sm text-center py-3"> <p className="text-gray-500 text-sm text-center py-3">
No active matches No active matches
</p> </p>
@@ -509,3 +656,207 @@ export default function SpectatePage() {
</div> </div>
); );
} }
function BracketPlayerRow({
name,
playerColor,
isActive,
}: {
name: string | null;
playerColor: 1 | 2;
isActive: boolean;
}) {
const isRed = playerColor === 1;
return (
<div
className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors ${
isActive
? isRed
? "border-red-500 bg-red-950/50 text-red-300"
: "border-yellow-500 bg-yellow-950/50 text-yellow-300"
: "border-gray-700 bg-gray-900 text-gray-400"
}`}
>
{name && (
<div
className={`h-3.5 w-3.5 shrink-0 rounded-full ${
isRed ? "bg-red-500" : "bg-yellow-400"
} ${isActive ? "animate-pulse" : ""}`}
/>
)}
<span className={`font-medium ${name ? "" : "text-gray-500"}`}>
{name ?? "TBD"}
</span>
</div>
);
}
function isKnockoutDataMessage(raw: string) {
return !raw.includes(":") && (raw.includes(",") || raw.includes("|"));
}
function parseKnockoutRounds(raw: string) {
if (!raw) return [] as string[][];
return raw
.split("|")
.filter(Boolean)
.map((round) =>
round
.split(",")
.map((player) => player.trim())
.filter(Boolean),
)
.filter((round) => round.length > 0);
}
function buildKnockoutBracket(
rounds: string[][],
liveGames: Map<number, LiveGame>,
tournamentWinner: string | null,
) {
if (rounds.length === 0) return [] as KnockoutRoundView[];
const liveGameEntries = Array.from(liveGames.values()).sort(
(a, b) => b.id - a.id,
);
const displayRounds: Array<{
label: string;
players: Array<string | null>;
projected?: boolean;
}> = rounds.map((players, index) => ({
label: knockoutRoundLabel(index, players.length),
players,
}));
while (displayRounds[displayRounds.length - 1]?.players.length > 2) {
const latestRoundPlayers = displayRounds[displayRounds.length - 1].players;
const projectedPlayers = latestRoundPlayers.reduce<Array<string | null>>(
(acc, _, index, source) => {
if (index % 2 !== 0) return acc;
const player1 = source[index] ?? null;
const player2 = source[index + 1] ?? null;
const liveMatch = findLiveMatch(liveGameEntries, player1, player2);
acc.push(
resolveLiveWinner(liveMatch, tournamentWinner, player1, player2),
);
return acc;
},
[],
);
displayRounds.push({
label: knockoutRoundLabel(displayRounds.length, projectedPlayers.length),
players: projectedPlayers,
projected: true,
});
}
return displayRounds.map((round, roundIndex) => ({
label: round.label,
projected: round.projected,
matches: pairPlayers(round.players).map(
([player1, player2], matchIndex) => {
const nextRound = displayRounds[roundIndex + 1];
const nextRoundPlayer = nextRound?.players[matchIndex] ?? null;
const liveMatch = findLiveMatch(liveGameEntries, player1, player2);
const isProjectedRound = Boolean(round.projected);
const hasKnownPlayers = Boolean(player1 && player2);
const hasAdvancedPastRound =
roundIndex < rounds.length - 1 &&
!displayRounds[roundIndex + 1]?.projected;
const inferredCompletedRealMatch =
!isProjectedRound && hasKnownPlayers && !liveMatch;
const winner =
nextRoundPlayer &&
(nextRoundPlayer === player1 || nextRoundPlayer === player2)
? nextRoundPlayer
: resolveLiveWinner(liveMatch, tournamentWinner, player1, player2);
const status =
winner || hasAdvancedPastRound || inferredCompletedRealMatch
? "completed"
: liveMatch
? "live"
: "scheduled";
return {
key: `${roundIndex}-${matchIndex}-${player1 ?? "tbd"}-${player2 ?? "tbd"}`,
roundIndex,
matchIndex,
player1,
player2,
winner,
currentTurnColor: winner
? null
: (liveMatch?.currentTurnColor ?? null),
matchId: liveMatch?.id ?? null,
status,
resultKind: liveMatch?.result?.kind ?? null,
} satisfies KnockoutMatchView;
},
),
}));
}
function pairPlayers(players: Array<string | null>) {
const pairs: Array<[string | null, string | null]> = [];
for (let index = 0; index < players.length; index += 2) {
pairs.push([players[index] ?? null, players[index + 1] ?? null]);
}
return pairs;
}
function findLiveMatch(
liveGames: LiveGame[],
player1: string | null,
player2: string | null,
) {
if (!player1 || !player2) return null;
return (
liveGames.find((game) =>
samePlayers(game.player1, game.player2, player1, player2),
) ?? null
);
}
function resolveLiveWinner(
liveMatch: LiveGame | null,
tournamentWinner: string | null,
player1: string | null,
player2: string | null,
) {
if (liveMatch?.result?.kind === "win") {
return liveMatch.result.winner;
}
if (
tournamentWinner &&
(tournamentWinner === player1 || tournamentWinner === player2)
) {
return tournamentWinner;
}
return null;
}
function samePlayers(
left1: string,
left2: string,
right1: string,
right2: string,
) {
return (
(left1 === right1 && left2 === right2) ||
(left1 === right2 && left2 === right1)
);
}
function knockoutRoundLabel(roundIndex: number, playerCount: number) {
if (playerCount <= 1) return "Champion";
if (playerCount === 2) return "Final";
if (playerCount === 4) return "Semifinals";
if (playerCount === 8) return "Quarterfinals";
return `Round ${roundIndex + 1}`;
}

5
connect4-ui/app/tournament/page.tsx
View File

@@ -1,5 +0,0 @@
import { redirect } from "next/navigation";
export default function TournamentRedirectPage() {
redirect("/spectate");
}

20
connect4-ui/components/Board.tsx
View File

@@ -37,11 +37,12 @@ export default function Board({
: "border-gray-700 bg-gray-900 text-gray-400" : "border-gray-700 bg-gray-900 text-gray-400"
}`} }`}
> >
{currentTurnColor === 1 ? (
<div className="w-3.5 h-3.5 rounded-full bg-red-500 shrink-0 animate-pulse" />
) : (
<div className="w-3.5 h-3.5 rounded-full bg-red-500 shrink-0" /> <div className="w-3.5 h-3.5 rounded-full bg-red-500 shrink-0" />
<span className="font-medium">{player1}</span>
{currentTurnColor === 1 && (
<span className="text-xs text-red-400 animate-pulse">● Turn</span>
)} )}
<span className="font-medium">{player1}</span>
</div> </div>
<span className="text-gray-600 font-bold">vs</span> <span className="text-gray-600 font-bold">vs</span>
<div <div
@@ -51,13 +52,12 @@ export default function Board({
: "border-gray-700 bg-gray-900 text-gray-400" : "border-gray-700 bg-gray-900 text-gray-400"
}`} }`}
> >
{currentTurnColor === 2 ? (
<div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0 animate-pulse" />
) : (
<div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0" /> <div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0" />
<span className="font-medium">{player2}</span>
{currentTurnColor === 2 && (
<span className="text-xs text-yellow-400 animate-pulse">
● Turn
</span>
)} )}
<span className="font-medium">{player2}</span>
</div> </div>
</div> </div>
)} )}
@@ -128,9 +128,9 @@ export default function Board({
{Array.from({ length: 7 }, (_, col) => ( {Array.from({ length: 7 }, (_, col) => (
<div <div
key={col} key={col}
className="w-12 p-1 text-center text-xs text-blue-400/70 font-mono" className="w-14 p-1 text-center text-xs text-blue-400/70 font-mono"
> >
{col} {col + 1}
</div> </div>
))} ))}
</div> </div>

76
connect4-ui/components/Celebration.tsx Normal file
View File

@@ -0,0 +1,76 @@
"use client";
import { useEffect, useState } from "react";
import Confetti from "react-confetti";
import { useConnection } from "@/lib/connection";
export default function Celebration() {
const { subscribe } = useConnection();
const [winner, setWinner] = useState<string | null>(null);
const [viewport, setViewport] = useState({ width: 0, height: 0 });
useEffect(() => {
const updateViewport = () => {
setViewport({
width: window.innerWidth,
height: window.innerHeight,
});
};
updateViewport();
window.addEventListener("resize", updateViewport);
return () => window.removeEventListener("resize", updateViewport);
}, []);
useEffect(() => {
let timeoutId: ReturnType<typeof setTimeout> | null = null;
const unsubscribe = subscribe((msg) => {
if (msg.type !== "TOURNAMENT_WINNER") return;
setWinner(msg.username || "Unknown player");
});
return () => {
unsubscribe();
};
}, [subscribe]);
if (!winner) return null;
return (
<>
<Confetti
width={viewport.width}
height={viewport.height}
recycle={false}
numberOfPieces={600}
gravity={0.2}
className="pointer-events-none fixed! inset-0! z-90!"
/>
<div className="pointer-events-none fixed inset-0 z-100 flex items-center justify-center px-4">
<div className="pointer-events-auto w-full max-w-xl rounded-3xl border border-amber-300/40 bg-linear-to-br from-amber-300 via-yellow-200 to-orange-300 p-1px shadow-2xl shadow-amber-950/60">
<div className="rounded-[calc(1.5rem-1px)] bg-slate-950/95 px-8 py-10 text-center backdrop-blur">
<div className="text-5xl">🏆</div>
<p className="mt-4 text-sm font-semibold uppercase tracking-[0.35em] text-amber-200/80">
Tournament Winner
</p>
<h2 className="mt-3 text-4xl font-black tracking-tight text-white sm:text-5xl">
{winner}
</h2>
<p className="mt-4 text-base text-amber-100/85">
Dominated the bracket and closed out the tournament.
</p>
<button
type="button"
onClick={() => setWinner(null)}
className="mt-7 inline-flex items-center justify-center rounded-full border border-amber-200/30 bg-amber-300/15 px-5 py-2 text-sm font-semibold text-amber-100 transition hover:bg-amber-300/25"
>
Close
</button>
</div>
</div>
</div>
</>
);
}

33
connect4-ui/components/Nav.tsx
View File

@@ -1,26 +1,17 @@
"use client"; "use client";
import Link from "next/link"; import Link from "next/link";
import { FormEvent, useState } from "react"; import { SubmitEvent, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useConnection } from "@/lib/connection"; import { useConnection } from "@/lib/connection";
import { cmd, DEFAULT_WS_URL } from "@/lib/protocol"; import { cmd } from "@/lib/protocol";
export default function Nav() { export default function Nav() {
const pathname = usePathname(); const pathname = usePathname();
const router = useRouter(); const router = useRouter();
const { status, role, username, send, becomePlayer } = useConnection(); const { status, role, username, send, becomePlayer, disconnect } = useConnection();
const [showPlayerModal, setShowPlayerModal] = useState(false); const [showPlayerModal, setShowPlayerModal] = useState(false);
const [nextUsername, setNextUsername] = useState(username); const [nextUsername, setNextUsername] = useState(username);
const statusLabel =
status === "connected"
? `Connected ${role === "player" ? `as ${username}` : "as observer"}`
: status === "reconnecting"
? "Reconnecting..."
: status === "connecting"
? "Connecting..."
: "Not connected";
const isConnectionPage = pathname === "/"; const isConnectionPage = pathname === "/";
const disableRoleSwitch = const disableRoleSwitch =
@@ -31,7 +22,7 @@ export default function Nav() {
router.push("/spectate"); router.push("/spectate");
}; };
const handleBecomePlayer = (event: FormEvent<HTMLFormElement>) => { const handleBecomePlayer = (event: SubmitEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
const trimmed = nextUsername.trim(); const trimmed = nextUsername.trim();
if (!trimmed) return; if (!trimmed) return;
@@ -50,12 +41,12 @@ export default function Nav() {
className="text-lg font-bold text-white flex items-center gap-2" className="text-lg font-bold text-white flex items-center gap-2"
> >
<span className="text-2xl">🔴</span> <span className="text-2xl">🔴</span>
<span>Connect4</span> <span>Connect4 Observer</span>
<span className="text-gray-400 text-sm font-normal">Moderator</span>
</Link> </Link>
<div className="ml-auto flex items-center gap-2"> <div className="ml-auto flex items-center gap-2">
{!isConnectionPage && ( {!isConnectionPage && (
<>
<button <button
onClick={ onClick={
role === "player" role === "player"
@@ -70,11 +61,15 @@ export default function Nav() {
> >
{role === "player" ? "Become Observer" : "Become Player"} {role === "player" ? "Become Observer" : "Become Player"}
</button> </button>
)}
<div className="text-xs text-gray-400 bg-gray-800 px-3 py-1 rounded-full"> <button
{statusLabel} onClick={disconnect}
</div> className="px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-gray-700 hover:bg-red-600 text-white"
>
Disconnect
</button>
</>
)}
</div> </div>
</div> </div>
</nav> </nav>

7
connect4-ui/lib/connection.tsx
View File

@@ -160,7 +160,9 @@ export function ConnectionProvider({
socket.onmessage = (event) => { socket.onmessage = (event) => {
const raw = event.data as string; const raw = event.data as string;
console.log(raw); if (process.env.NODE_ENV === "development") {
console.log("Recieved: " + raw);
}
const parsed = parseMessage(raw); const parsed = parseMessage(raw);
if (parsed.type === "OBSERVE_ACK") { if (parsed.type === "OBSERVE_ACK") {
@@ -319,6 +321,9 @@ export function ConnectionProvider({
const send = useCallback((message: string) => { const send = useCallback((message: string) => {
if (wsRef.current?.readyState !== WebSocket.OPEN) return false; if (wsRef.current?.readyState !== WebSocket.OPEN) return false;
if (process.env.NODE_ENV === "development") {
console.log("Sending: " + message);
}
wsRef.current.send(message); wsRef.current.send(message);
return true; return true;
}, []); }, []);

16
connect4-ui/lib/protocol.ts
View File

@@ -66,6 +66,7 @@ export type ParsedMessage =
| { type: "TOURNAMENT_START"; tournamentType: string } | { type: "TOURNAMENT_START"; tournamentType: string }
| { type: "TOURNAMENT_CANCEL" } | { type: "TOURNAMENT_CANCEL" }
| { type: "TOURNAMENT_SCORES"; scores: ScoreEntry[] } | { type: "TOURNAMENT_SCORES"; scores: ScoreEntry[] }
| { type: "TOURNAMENT_WINNER"; username: string }
| { type: "TOURNAMENT_END" } | { type: "TOURNAMENT_END" }
| { type: "ADMIN_AUTH_ACK" } | { type: "ADMIN_AUTH_ACK" }
| { type: "GET_DATA"; key: string; value: string } | { type: "GET_DATA"; key: string; value: string }
@@ -232,6 +233,8 @@ export function parseMessage(raw: string): ParsedMessage {
}); });
return { type: "TOURNAMENT_SCORES", scores }; return { type: "TOURNAMENT_SCORES", scores };
} }
case "WINNER":
return { type: "TOURNAMENT_WINNER", username: parts[2] ?? "" };
case "END": case "END":
return { type: "TOURNAMENT_END" }; return { type: "TOURNAMENT_END" };
} }
@@ -244,7 +247,11 @@ export function parseMessage(raw: string): ParsedMessage {
break; break;
case "GET": case "GET":
return { type: "GET_DATA", key: parts[1], value: parts[2] ?? "" }; return {
type: "GET_DATA",
key: parts[1],
value: parts.slice(2).join(":"),
};
case "SET": case "SET":
if (parts[2] === "ACK") return { type: "SET_DATA_ACK", key: parts[1] }; if (parts[2] === "ACK") return { type: "SET_DATA_ACK", key: parts[1] };
@@ -277,7 +284,12 @@ export const cmd = {
tournamentStart: (type = "RoundRobin") => `TOURNAMENT:START:${type}`, tournamentStart: (type = "RoundRobin") => `TOURNAMENT:START:${type}`,
tournamentCancel: () => "TOURNAMENT:CANCEL", tournamentCancel: () => "TOURNAMENT:CANCEL",
getData: ( getData: (
key: "TOURNAMENT_STATUS" | "MOVE_WAIT" | "DEMO_MODE" | "MAX_TIMEOUT", key:
| "TOURNAMENT_STATUS"
| "TOURNAMENT_DATA"
| "MOVE_WAIT"
| "DEMO_MODE"
| "MAX_TIMEOUT",
) => `GET:${key}`, ) => `GET:${key}`,
setData: (key: string, value: string) => `SET:${key}:${value}`, setData: (key: string, value: string) => `SET:${key}:${value}`,
reservationAdd: (p1: string, p2: string) => `RESERVATION:ADD:${p1},${p2}`, reservationAdd: (p1: string, p2: string) => `RESERVATION:ADD:${p1},${p2}`,

22
connect4-ui/package-lock.json generated
View File

@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"next": "15.2.4", "next": "15.2.4",
"react": "^19.0.0", "react": "^19.0.0",
"react-confetti": "^6.4.0",
"react-dom": "^19.0.0" "react-dom": "^19.0.0"
}, },
"devDependencies": { "devDependencies": {
@@ -5031,6 +5032,21 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-confetti": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.4.0.tgz",
"integrity": "sha512-5MdGUcqxrTU26I2EU7ltkWPwxvucQTuqMm8dUz72z2YMqTD6s9vMcDUysk7n9jnC+lXuCPeJJ7Knf98VEYE9Rg==",
"license": "MIT",
"dependencies": {
"tween-functions": "^1.2.0"
},
"engines": {
"node": ">=16"
},
"peerDependencies": {
"react": "^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "19.2.4", "version": "19.2.4",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
@@ -5779,6 +5795,12 @@
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD" "license": "0BSD"
}, },
"node_modules/tween-functions": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
"integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==",
"license": "BSD"
},
"node_modules/type-check": { "node_modules/type-check": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

1
connect4-ui/package.json
View File

@@ -13,6 +13,7 @@
"dependencies": { "dependencies": {
"next": "15.2.4", "next": "15.2.4",
"react": "^19.0.0", "react": "^19.0.0",
"react-confetti": "^6.4.0",
"react-dom": "^19.0.0" "react-dom": "^19.0.0"
}, },
"devDependencies": { "devDependencies": {

1
connect4-ui/tsconfig.tsbuildinfo Normal file
View File

File diff suppressed because one or more lines are too long