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

fmt

Browse Source
This commit is contained in:
Joshua Higgins
2026-03-27 10:43:10 -04:00
Unverified
parent 2495f41df9
commit c8781fddaa
15 changed files with 1650 additions and 1630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
connect4-ui/.prettierignore Normal file
View File

@@ -0,0 +1,4 @@
node_modules
.next
out
connect4-moderator-server

4
connect4-ui/.prettierrc Normal file
View File

@@ -0,0 +1,4 @@
{
"useTabs": false,
"tabWidth": 2
}

5
connect4-ui/app/globals.css
View File

@@ -8,5 +8,8 @@
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: system-ui, -apple-system, sans-serif; font-family:
system-ui,
-apple-system,
sans-serif;
} }

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

@@ -4,23 +4,23 @@ import Nav from "@/components/Nav";
import { ConnectionProvider } from "@/lib/connection"; import { ConnectionProvider } from "@/lib/connection";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Connect4 Moderator", title: "Connect4 Moderator",
description: "Watch matches, track tournaments, and play Connect4", description: "Watch matches, track tournaments, and play Connect4",
}; };
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<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>
<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>
</body> </body>
</html> </html>
); );
} }

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

@@ -6,80 +6,80 @@ import { DEFAULT_WS_URL } from "@/lib/protocol";
import { useConnection } from "@/lib/connection"; import { useConnection } from "@/lib/connection";
export default function Home() { export default function Home() {
const router = useRouter(); const router = useRouter();
const { const {
connect, connect,
role, role,
status, status,
wsUrl: connectedWsUrl, wsUrl: connectedWsUrl,
shouldRedirectToConnect, shouldRedirectToConnect,
clearRedirectFlag, clearRedirectFlag,
} = useConnection(); } = useConnection();
const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL); const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
useEffect(() => { useEffect(() => {
if (shouldRedirectToConnect) { if (shouldRedirectToConnect) {
clearRedirectFlag(); clearRedirectFlag();
} }
}, [shouldRedirectToConnect, clearRedirectFlag]); }, [shouldRedirectToConnect, clearRedirectFlag]);
const onSubmit = (event: FormEvent<HTMLFormElement>) => { const onSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
connect({ role: "observer", wsUrl }); connect({ role: "observer", wsUrl });
router.push("/spectate"); router.push("/spectate");
}; };
return ( return (
<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 Moderator Server Connect to Moderator Server
</h1> </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 && ( {shouldRedirectToConnect && (
<div className="rounded-lg border border-red-700 bg-red-950/40 px-4 py-3 text-sm text-red-200"> <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. Connection lost. Please reconnect to continue.
</div> </div>
)} )}
{status === "connected" && role && ( {status === "connected" && role && (
<div className="rounded-lg border border-green-700 bg-green-950/30 px-4 py-3 text-sm text-green-200"> <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. Connected to {connectedWsUrl} as observer.
</div> </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">
Server URL Server URL
</label> </label>
<input <input
className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none" className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
value={wsUrl} value={wsUrl}
onChange={(e) => setWsUrl(e.target.value)} onChange={(e) => setWsUrl(e.target.value)}
placeholder="wss://..." placeholder="wss://..."
/> />
</div> </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"
className="px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition-colors" className="px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition-colors"
> >
{status === "connecting" || status === "reconnecting" {status === "connecting" || status === "reconnecting"
? "Connecting..." ? "Connecting..."
: "Connect to Server"} : "Connect to Server"}
</button> </button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
); );
} }

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

@@ -4,11 +4,11 @@ import { useCallback, useEffect, 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 {
BoardState, BoardState,
ParsedMessage, ParsedMessage,
cmd, cmd,
createEmptyBoard, createEmptyBoard,
placeToken, placeToken,
} from "@/lib/protocol"; } from "@/lib/protocol";
import { useConnection } from "@/lib/connection"; import { useConnection } from "@/lib/connection";
@@ -17,465 +17,465 @@ type GamePhase = "idle" | "connected" | "ready" | "playing" | "game-over";
type GameResult = "win" | "loss" | "draw" | "terminated"; type GameResult = "win" | "loss" | "draw" | "terminated";
export default function PlayPage() { export default function PlayPage() {
const router = useRouter(); const router = useRouter();
const { const {
role, role,
username, username,
status, status,
send, send,
subscribe, subscribe,
disconnect, disconnect,
reconnectAttempts, reconnectAttempts,
shouldRedirectToConnect, shouldRedirectToConnect,
clearRedirectFlag, clearRedirectFlag,
} = useConnection(); } = useConnection();
const [gamePhase, setGamePhase] = useState<GamePhase>("idle"); const [gamePhase, setGamePhase] = useState<GamePhase>("idle");
const [myColor, setMyColor] = useState<1 | 2 | null>(null); const [myColor, setMyColor] = useState<1 | 2 | null>(null);
const [isMyTurn, setIsMyTurn] = useState(false); const [isMyTurn, setIsMyTurn] = useState(false);
const [board, setBoard] = useState<BoardState>(createEmptyBoard()); const [board, setBoard] = useState<BoardState>(createEmptyBoard());
const [lastMove, setLastMove] = useState<{ const [lastMove, setLastMove] = useState<{
column: number; column: number;
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 [moveCount, setMoveCount] = useState(0);
const [statusMessages, setStatusMessages] = useState<string[]>([]); const [statusMessages, setStatusMessages] = useState<string[]>([]);
const [tournamentMode, setTournamentMode] = useState(false); const [tournamentMode, setTournamentMode] = useState(false);
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( const addStatus = useCallback(
(msg: string) => (msg: string) =>
setStatusMessages((prev) => [ setStatusMessages((prev) => [
`[${new Date().toLocaleTimeString()}] ${msg}`, `[${new Date().toLocaleTimeString()}] ${msg}`,
...prev.slice(0, 29), ...prev.slice(0, 29),
]), ]),
[], [],
); );
const resetGame = useCallback(() => { const resetGame = useCallback(() => {
setBoard(createEmptyBoard()); setBoard(createEmptyBoard());
setLastMove(null); setLastMove(null);
setMoveCount(0); setMoveCount(0);
setMyColor(null); setMyColor(null);
myColorRef.current = null; myColorRef.current = null;
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
setGameResult(null); setGameResult(null);
}, []); }, []);
useEffect(() => { useEffect(() => {
if (status === "disconnected" && shouldRedirectToConnect) { if (status === "disconnected" && shouldRedirectToConnect) {
clearRedirectFlag(); clearRedirectFlag();
router.replace("/"); router.replace("/");
} }
if (status === "idle") { if (status === "idle") {
router.replace("/"); router.replace("/");
} }
if (role !== "player" && status !== "idle") { if (role !== "player" && status !== "idle") {
router.replace("/spectate"); router.replace("/spectate");
return; return;
} }
if (status === "connected" && gamePhase === "idle") { if (status === "connected" && gamePhase === "idle") {
setGamePhase("connected"); setGamePhase("connected");
} }
}, [ }, [
role, role,
status, status,
router, router,
gamePhase, gamePhase,
shouldRedirectToConnect, shouldRedirectToConnect,
clearRedirectFlag, clearRedirectFlag,
]); ]);
useEffect(() => { useEffect(() => {
const unsubscribe = subscribe((msg: ParsedMessage) => { const unsubscribe = subscribe((msg: ParsedMessage) => {
switch (msg.type) { switch (msg.type) {
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"); addStatus("Connected to server");
break; break;
case "ERROR": case "ERROR":
addStatus(`⚠ ${msg.message}`); addStatus(`⚠ ${msg.message}`);
break; break;
case "READY_ACK": case "READY_ACK":
setGamePhase("ready"); setGamePhase("ready");
addStatus("⏳ Waiting for an opponent..."); addStatus("⏳ Waiting for an opponent...");
break; break;
case "GAME_START": { case "GAME_START": {
resetGame(); resetGame();
const color: 1 | 2 = msg.goesFirst ? 1 : 2; const color: 1 | 2 = msg.goesFirst ? 1 : 2;
setMyColor(color); setMyColor(color);
myColorRef.current = color; myColorRef.current = color;
setGamePhase("playing"); setGamePhase("playing");
const firstTurn = msg.goesFirst; const firstTurn = msg.goesFirst;
setIsMyTurn(firstTurn); setIsMyTurn(firstTurn);
isMyTurnRef.current = firstTurn; isMyTurnRef.current = firstTurn;
addStatus( addStatus(
msg.goesFirst msg.goesFirst
? "🔴 You are Red - you go first" ? "🔴 You are Red - you go first"
: "🟡 You are Yellow - wait for opponent's move", : "🟡 You are Yellow - wait for opponent's move",
); );
break; break;
} }
case "OPPONENT_MOVE": { case "OPPONENT_MOVE": {
const opponentColor: 1 | 2 = myColorRef.current === 1 ? 2 : 1; const opponentColor: 1 | 2 = myColorRef.current === 1 ? 2 : 1;
setBoard((prev) => { setBoard((prev) => {
const { board: next, row } = placeToken( const { board: next, row } = placeToken(
prev, prev,
opponentColor, opponentColor,
msg.column, msg.column,
); );
setLastMove({ column: msg.column, row }); setLastMove({ column: msg.column, row });
return next; return next;
}); });
setMoveCount((n) => n + 1); setMoveCount((n) => n + 1);
setIsMyTurn(true); setIsMyTurn(true);
isMyTurnRef.current = true; isMyTurnRef.current = true;
addStatus(`Opponent played column ${msg.column}`); addStatus(`Opponent played column ${msg.column}`);
break; break;
} }
case "GAME_WINS": case "GAME_WINS":
setGameResult("win"); setGameResult("win");
setGamePhase("game-over"); setGamePhase("game-over");
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
addStatus("🏆 You won!"); addStatus("🏆 You won!");
break; break;
case "GAME_LOSS": case "GAME_LOSS":
setGameResult("loss"); setGameResult("loss");
setGamePhase("game-over"); setGamePhase("game-over");
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
addStatus("💔 You lost"); addStatus("💔 You lost");
break; break;
case "GAME_DRAW": case "GAME_DRAW":
setGameResult("draw"); setGameResult("draw");
setGamePhase("game-over"); setGamePhase("game-over");
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
addStatus("🤝 Draw"); addStatus("🤝 Draw");
break; break;
case "GAME_TERMINATED": case "GAME_TERMINATED":
setGameResult("terminated"); setGameResult("terminated");
setGamePhase("game-over"); setGamePhase("game-over");
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
addStatus("⛔ Match terminated"); addStatus("⛔ Match terminated");
break; break;
case "TOURNAMENT_START": case "TOURNAMENT_START":
setTournamentMode(true); setTournamentMode(true);
addStatus(`🏆 Tournament started: ${msg.tournamentType}`); addStatus(`🏆 Tournament started: ${msg.tournamentType}`);
break; break;
case "TOURNAMENT_END": case "TOURNAMENT_END":
setGamePhase("connected"); setGamePhase("connected");
resetGame(); resetGame();
send(cmd.ready()); send(cmd.ready());
setGamePhase("ready"); setGamePhase("ready");
addStatus("⏳ Ready for next round..."); 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"); addStatus("Tournament cancelled");
break; break;
default: default:
break; break;
} }
}); });
return unsubscribe; return unsubscribe;
}, [addStatus, resetGame, send, subscribe]); }, [addStatus, resetGame, send, subscribe]);
const handleColumnClick = useCallback( const handleColumnClick = useCallback(
(col: number) => { (col: number) => {
if (!isMyTurnRef.current || gamePhase !== "playing") return; if (!isMyTurnRef.current || gamePhase !== "playing") return;
const color = myColorRef.current; const color = myColorRef.current;
if (!color) return; if (!color) return;
setBoard((prev) => { setBoard((prev) => {
const { board: next, row } = placeToken(prev, color, col); const { board: next, row } = placeToken(prev, color, col);
if (row === -1) return prev; if (row === -1) return prev;
setLastMove({ column: col, row }); setLastMove({ column: col, row });
return next; return next;
}); });
setIsMyTurn(false); setIsMyTurn(false);
isMyTurnRef.current = false; isMyTurnRef.current = false;
setMoveCount((n) => n + 1); setMoveCount((n) => n + 1);
send(cmd.play(col)); send(cmd.play(col));
addStatus(`You played column ${col}`); addStatus(`You played column ${col}`);
}, },
[addStatus, gamePhase, send], [addStatus, gamePhase, send],
); );
const sendReady = useCallback(() => { const sendReady = useCallback(() => {
send(cmd.ready()); send(cmd.ready());
setGamePhase("ready"); setGamePhase("ready");
addStatus("⏳ Waiting for an opponent..."); addStatus("⏳ Waiting for an opponent...");
}, [addStatus, send]); }, [addStatus, send]);
const myColorLabel = const myColorLabel =
myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null; myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null;
const opponentColor: 1 | 2 | null = const opponentColor: 1 | 2 | null =
myColor === 1 ? 2 : myColor === 2 ? 1 : null; myColor === 1 ? 2 : myColor === 2 ? 1 : null;
const redPlayerName = myColor === 1 ? username : "Opponent"; const redPlayerName = myColor === 1 ? username : "Opponent";
const yellowPlayerName = myColor === 2 ? username : "Opponent"; const yellowPlayerName = myColor === 2 ? username : "Opponent";
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<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>
<p className="text-gray-400 text-sm mt-1"> <p className="text-gray-400 text-sm mt-1">
Connected as <span className="text-green-300">{username}</span> Connected as <span className="text-green-300">{username}</span>
</p> </p>
</div> </div>
<PhaseIndicator phase={gamePhase} isMyTurn={isMyTurn} /> <PhaseIndicator phase={gamePhase} isMyTurn={isMyTurn} />
</div> </div>
{status === "reconnecting" && ( {status === "reconnecting" && (
<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">
Connection lost during a live match. Reconnect attempt # Connection lost during a live match. Reconnect attempt #
{reconnectAttempts}... {reconnectAttempts}...
</div> </div>
)} )}
<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"> <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">
Session Session
</h2> </h2>
<div className="text-xs text-gray-400"> <div className="text-xs text-gray-400">
Status: <span className="text-gray-200">{status}</span> Status: <span className="text-gray-200">{status}</span>
</div> </div>
<div className="text-xs text-gray-400"> <div className="text-xs text-gray-400">
User: <span className="text-gray-200">{username}</span> User: <span className="text-gray-200">{username}</span>
</div> </div>
<button <button
onClick={disconnect} onClick={disconnect}
className="w-full py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors" className="w-full py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
> >
Disconnect Disconnect
</button> </button>
</div> </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
</h2> </h2>
{tournamentMode && ( {tournamentMode && (
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-purple-950/50 border border-purple-700 text-purple-300 text-sm"> <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-purple-950/50 border border-purple-700 text-purple-300 text-sm">
<span>🏆</span> <span>🏆</span>
<span>Tournament mode active</span> <span>Tournament mode active</span>
</div> </div>
)} )}
{gamePhase === "connected" && ( {gamePhase === "connected" && (
<button <button
onClick={sendReady} onClick={sendReady}
className="w-full py-2.5 bg-green-700 hover:bg-green-600 text-white text-sm font-semibold rounded-lg transition-colors" className="w-full py-2.5 bg-green-700 hover:bg-green-600 text-white text-sm font-semibold rounded-lg transition-colors"
> >
✋ Ready to Play ✋ Ready to Play
</button> </button>
)} )}
{gamePhase === "ready" && ( {gamePhase === "ready" && (
<div className="text-center py-3 text-yellow-300 text-sm animate-pulse"> <div className="text-center py-3 text-yellow-300 text-sm animate-pulse">
⏳ Waiting for opponent... ⏳ Waiting for opponent...
</div> </div>
)} )}
{(gamePhase === "playing" || gamePhase === "game-over") && {(gamePhase === "playing" || gamePhase === "game-over") &&
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 <div
className={`w-4 h-4 rounded-full ${myColor === 1 ? "bg-red-500" : "bg-yellow-400"}`} 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>
</div> </div>
{gamePhase === "playing" && ( {gamePhase === "playing" && (
<div <div
className={`flex items-center justify-center gap-2 px-3 py-2 rounded-lg font-semibold text-sm ${ className={`flex items-center justify-center gap-2 px-3 py-2 rounded-lg font-semibold text-sm ${
isMyTurn isMyTurn
? "bg-green-900/50 border border-green-600 text-green-300 animate-pulse" ? "bg-green-900/50 border border-green-600 text-green-300 animate-pulse"
: "bg-gray-800 text-gray-400" : "bg-gray-800 text-gray-400"
}`} }`}
> >
{isMyTurn {isMyTurn
? "⬆ Your turn - click a column" ? "⬆ Your turn - click a column"
: "⏳ Waiting for opponent..."} : "⏳ Waiting for opponent..."}
</div> </div>
)} )}
<div className="text-xs text-gray-500 text-center"> <div className="text-xs text-gray-500 text-center">
{moveCount} move{moveCount !== 1 ? "s" : ""} played {moveCount} move{moveCount !== 1 ? "s" : ""} played
</div> </div>
</div> </div>
)} )}
{gamePhase === "game-over" && gameResult && !tournamentMode && ( {gamePhase === "game-over" && gameResult && !tournamentMode && (
<button <button
onClick={sendReady} onClick={sendReady}
className="w-full py-2 bg-green-700 hover:bg-green-600 text-white text-sm font-semibold rounded-lg transition-colors" className="w-full py-2 bg-green-700 hover:bg-green-600 text-white text-sm font-semibold rounded-lg transition-colors"
> >
Play Again Play Again
</button> </button>
)} )}
</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-2"> <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2">
Status Log Status Log
</h2> </h2>
<div className="flex flex-col gap-0.5 max-h-52 overflow-y-auto"> <div className="flex flex-col gap-0.5 max-h-52 overflow-y-auto">
{statusMessages.length === 0 ? ( {statusMessages.length === 0 ? (
<p className="text-gray-600 text-xs">No events yet</p> <p className="text-gray-600 text-xs">No events yet</p>
) : ( ) : (
statusMessages.map((m, i) => ( statusMessages.map((m, i) => (
<p key={i} className="text-xs text-gray-400 font-mono"> <p key={i} className="text-xs text-gray-400 font-mono">
{m} {m}
</p> </p>
)) ))
)} )}
</div> </div>
</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">
{gamePhase === "idle" ? ( {gamePhase === "idle" ? (
<div className="text-gray-500 text-center py-10"> <div className="text-gray-500 text-center py-10">
Connect from the connection page to start. Connect from the connection page to start.
</div> </div>
) : gamePhase === "connected" ? ( ) : gamePhase === "connected" ? (
<div className="flex flex-col items-center gap-4 text-center py-8"> <div className="flex flex-col items-center gap-4 text-center py-8">
<div className="text-5xl">✋</div> <div className="text-5xl">✋</div>
<p className="text-blue-300 text-lg font-medium"> <p className="text-blue-300 text-lg font-medium">
Ready up to start Ready up to start
</p> </p>
<p className="text-gray-500 text-sm max-w-sm"> <p className="text-gray-500 text-sm max-w-sm">
Click the{" "} Click the{" "}
<span className="text-green-300 font-semibold"> <span className="text-green-300 font-semibold">
Ready to Play Ready to Play
</span>{" "} </span>{" "}
button in the Match panel to enter the queue. button in the Match panel to enter the queue.
</p> </p>
</div> </div>
) : gamePhase === "ready" ? ( ) : gamePhase === "ready" ? (
<div className="flex flex-col items-center gap-4 text-center py-8"> <div className="flex flex-col items-center gap-4 text-center py-8">
<div className="text-5xl animate-bounce">⏳</div> <div className="text-5xl animate-bounce">⏳</div>
<p className="text-yellow-300 text-lg font-medium"> <p className="text-yellow-300 text-lg font-medium">
Waiting for an opponent... Waiting for an opponent...
</p> </p>
</div> </div>
) : ( ) : (
<> <>
{gameResult && ( {gameResult && (
<div <div
className={`w-full max-w-md rounded-xl p-4 text-center font-bold text-xl border ${ className={`w-full max-w-md rounded-xl p-4 text-center font-bold text-xl border ${
gameResult === "win" gameResult === "win"
? "bg-green-900/50 border-green-500 text-green-300" ? "bg-green-900/50 border-green-500 text-green-300"
: gameResult === "loss" : gameResult === "loss"
? "bg-red-900/50 border-red-500 text-red-300" ? "bg-red-900/50 border-red-500 text-red-300"
: gameResult === "draw" : gameResult === "draw"
? "bg-blue-900/50 border-blue-500 text-blue-300" ? "bg-blue-900/50 border-blue-500 text-blue-300"
: "bg-gray-800 border-gray-600 text-gray-300" : "bg-gray-800 border-gray-600 text-gray-300"
}`} }`}
> >
{gameResult === "win" {gameResult === "win"
? "🏆 You Won!" ? "🏆 You Won!"
: gameResult === "loss" : gameResult === "loss"
? "💔 You Lost" ? "💔 You Lost"
: gameResult === "draw" : gameResult === "draw"
? "🤝 Draw" ? "🤝 Draw"
: "⛔ Match Terminated"} : "⛔ Match Terminated"}
</div> </div>
)} )}
<Board <Board
board={board} board={board}
lastMove={lastMove} lastMove={lastMove}
player1={redPlayerName} player1={redPlayerName}
player2={yellowPlayerName} player2={yellowPlayerName}
currentTurnColor={ currentTurnColor={
gamePhase === "playing" && myColor gamePhase === "playing" && myColor
? isMyTurn ? isMyTurn
? myColor ? myColor
: opponentColor : opponentColor
: null : null
} }
onColumnClick={ onColumnClick={
gamePhase === "playing" && isMyTurn gamePhase === "playing" && isMyTurn
? handleColumnClick ? handleColumnClick
: undefined : undefined
} }
disabled={gamePhase !== "playing" || !isMyTurn} disabled={gamePhase !== "playing" || !isMyTurn}
/> />
</> </>
)} )}
</div> </div>
</div> </div>
</div> </div>
); );
} }
function PhaseIndicator({ function PhaseIndicator({
phase, phase,
isMyTurn, isMyTurn,
}: { }: {
phase: GamePhase; phase: GamePhase;
isMyTurn: boolean; isMyTurn: boolean;
}) { }) {
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 animate-pulse">
Your Turn! Your Turn!
</span> </span>
); );
} }
const config: Record<GamePhase, { label: string; cls: string }> = { const config: Record<GamePhase, { label: string; cls: string }> = {
idle: { label: "Not ready", cls: "bg-gray-700 text-gray-400" }, idle: { label: "Not ready", cls: "bg-gray-700 text-gray-400" },
connected: { label: "Connected", cls: "bg-blue-900/60 text-blue-300" }, connected: { label: "Connected", cls: "bg-blue-900/60 text-blue-300" },
ready: { ready: {
label: "Waiting...", label: "Waiting...",
cls: "bg-yellow-900/60 text-yellow-300 animate-pulse", cls: "bg-yellow-900/60 text-yellow-300 animate-pulse",
}, },
playing: { label: "In Game", cls: "bg-green-900/60 text-green-400" }, playing: { label: "In Game", cls: "bg-green-900/60 text-green-400" },
"game-over": { label: "Game Over", cls: "bg-gray-700 text-gray-400" }, "game-over": { label: "Game Over", cls: "bg-gray-700 text-gray-400" },
}; };
const { label, cls } = config[phase]; const { label, cls } = config[phase];
return ( return (
<span className={`px-3 py-1.5 rounded-full text-sm font-medium ${cls}`}> <span className={`px-3 py-1.5 rounded-full text-sm font-medium ${cls}`}>
{label} {label}
</span> </span>
); );
} }

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

@@ -4,487 +4,487 @@ import { useCallback, useEffect, 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 {
BoardState, BoardState,
GameEntry, GameEntry,
ParsedMessage, ParsedMessage,
PlayerEntry, PlayerEntry,
ScoreEntry, ScoreEntry,
cmd, cmd,
createEmptyBoard, createEmptyBoard,
placeToken, placeToken,
replayMoves, replayMoves,
} from "@/lib/protocol"; } from "@/lib/protocol";
import { useConnection } from "@/lib/connection"; import { useConnection } from "@/lib/connection";
interface LiveGame { interface LiveGame {
id: number; id: number;
player1: string; player1: string;
player2: string; player2: string;
board: BoardState; board: BoardState;
lastMove: { column: number; row: number } | null; lastMove: { column: number; row: number } | null;
currentTurnColor: 1 | 2; currentTurnColor: 1 | 2;
result: result:
| { kind: "win"; winner: string } | { kind: "win"; winner: string }
| { kind: "draw" } | { kind: "draw" }
| { kind: "terminated" } | { kind: "terminated" }
| null; | null;
} }
export default function SpectatePage() { export default function SpectatePage() {
const router = useRouter(); const router = useRouter();
const { const {
role, role,
status, status,
send, send,
subscribe, subscribe,
disconnect, disconnect,
shouldRedirectToConnect, shouldRedirectToConnect,
clearRedirectFlag, clearRedirectFlag,
} = useConnection(); } = useConnection();
const [tournamentActive, setTournamentActive] = useState(false); const [tournamentActive, setTournamentActive] = useState(false);
const [tournamentType, setTournamentType] = useState<string | null>(null); const [tournamentType, setTournamentType] = useState<string | null>(null);
const [scores, setScores] = useState<ScoreEntry[]>([]); const [scores, setScores] = useState<ScoreEntry[]>([]);
const [players, setPlayers] = useState<PlayerEntry[]>([]); const [players, setPlayers] = useState<PlayerEntry[]>([]);
const [gameList, setGameList] = useState<GameEntry[]>([]); const [gameList, setGameList] = useState<GameEntry[]>([]);
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 pollRef = useRef<ReturnType<typeof setInterval> | null>(null); const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
const liveGamesRef = useRef<Map<number, LiveGame>>(new Map()); const liveGamesRef = useRef<Map<number, LiveGame>>(new Map());
const addLog = useCallback( const addLog = useCallback(
(msg: string) => (msg: string) =>
setLog((prev) => [ setLog((prev) => [
`[${new Date().toLocaleTimeString()}] ${msg}`, `[${new Date().toLocaleTimeString()}] ${msg}`,
...prev.slice(0, 79), ...prev.slice(0, 79),
]), ]),
[], [],
); );
const updateGame = useCallback((id: number, patch: Partial<LiveGame>) => { const updateGame = useCallback((id: number, patch: Partial<LiveGame>) => {
setLiveGames((prev) => { setLiveGames((prev) => {
const next = new Map(prev); const next = new Map(prev);
const existing = next.get(id) ?? { const existing = next.get(id) ?? {
id, id,
player1: "", player1: "",
player2: "", player2: "",
board: createEmptyBoard(), board: createEmptyBoard(),
lastMove: null, lastMove: null,
currentTurnColor: 1 as const, currentTurnColor: 1 as const,
result: null, result: null,
}; };
next.set(id, { ...existing, ...patch }); next.set(id, { ...existing, ...patch });
liveGamesRef.current = next; liveGamesRef.current = next;
return next; return next;
}); });
}, []); }, []);
useEffect(() => { useEffect(() => {
if (status === "disconnected" && shouldRedirectToConnect) { if (status === "disconnected" && shouldRedirectToConnect) {
clearRedirectFlag(); clearRedirectFlag();
router.replace("/"); router.replace("/");
} }
if (status === "idle") {
router.replace("/");
}
if (role !== "observer" && status !== "idle") { if (status === "idle") {
router.replace("/play"); router.replace("/");
return; }
}
}, [role, status, shouldRedirectToConnect, clearRedirectFlag, router]);
useEffect(() => { if (role !== "observer" && status !== "idle") {
const unsubscribe = subscribe((msg: ParsedMessage) => { router.replace("/play");
switch (msg.type) { return;
case "TOURNAMENT_START": }
setTournamentActive(true); }, [role, status, shouldRedirectToConnect, clearRedirectFlag, router]);
setTournamentType(msg.tournamentType);
setScores([]);
addLog(`🏆 Tournament started: ${msg.tournamentType}`);
send(cmd.gameList());
send(cmd.playerList());
break;
case "TOURNAMENT_CANCEL": useEffect(() => {
setTournamentActive(false); const unsubscribe = subscribe((msg: ParsedMessage) => {
setTournamentType(null); switch (msg.type) {
addLog("❌ Tournament cancelled"); case "TOURNAMENT_START":
break; setTournamentActive(true);
setTournamentType(msg.tournamentType);
setScores([]);
addLog(`🏆 Tournament started: ${msg.tournamentType}`);
send(cmd.gameList());
send(cmd.playerList());
break;
case "TOURNAMENT_SCORES": case "TOURNAMENT_CANCEL":
setScores(msg.scores); setTournamentActive(false);
break; setTournamentType(null);
addLog("❌ Tournament cancelled");
break;
case "TOURNAMENT_END": case "TOURNAMENT_SCORES":
addLog("Round ended"); setScores(msg.scores);
send(cmd.gameList()); break;
send(cmd.playerList());
break;
case "GAME_LIST": case "TOURNAMENT_END":
setGameList(msg.games); addLog("Round ended");
for (const g of msg.games) { send(cmd.gameList());
if (!liveGamesRef.current.has(g.id)) { send(cmd.playerList());
send(cmd.gameWatch(g.id)); break;
}
}
break;
case "GAME_WATCH_ACK": { case "GAME_LIST":
const { board, lastMove } = replayMoves(msg.moves, msg.player1); setGameList(msg.games);
const moveCount = msg.moves.length; for (const g of msg.games) {
updateGame(msg.matchId, { if (!liveGamesRef.current.has(g.id)) {
player1: msg.player1, send(cmd.gameWatch(g.id));
player2: msg.player2, }
board, }
lastMove, break;
currentTurnColor: (moveCount % 2 === 0 ? 1 : 2) as 1 | 2,
result: null,
});
break;
}
case "GAME_MOVE": { case "GAME_WATCH_ACK": {
if (typeof msg.matchId !== "number") { const { board, lastMove } = replayMoves(msg.moves, msg.player1);
addLog("Protocol error: GAME_MOVE missing matchId"); const moveCount = msg.moves.length;
break; updateGame(msg.matchId, {
} player1: msg.player1,
player2: msg.player2,
board,
lastMove,
currentTurnColor: (moveCount % 2 === 0 ? 1 : 2) as 1 | 2,
result: null,
});
break;
}
const game = liveGamesRef.current.get(msg.matchId); case "GAME_MOVE": {
if (!game) break; if (typeof msg.matchId !== "number") {
const color: 1 | 2 = msg.username === game.player1 ? 1 : 2; addLog("Protocol error: GAME_MOVE missing matchId");
const { board: next, row } = placeToken( break;
game.board, }
color,
msg.column,
);
updateGame(msg.matchId, {
board: next,
lastMove: { column: msg.column, row },
currentTurnColor: (color === 1 ? 2 : 1) as 1 | 2,
});
break;
}
case "GAME_WIN": { const game = liveGamesRef.current.get(msg.matchId);
if (typeof msg.matchId !== "number") { if (!game) break;
addLog("Protocol error: GAME_WIN missing matchId"); const color: 1 | 2 = msg.username === game.player1 ? 1 : 2;
break; const { board: next, row } = placeToken(
} game.board,
color,
msg.column,
);
updateGame(msg.matchId, {
board: next,
lastMove: { column: msg.column, row },
currentTurnColor: (color === 1 ? 2 : 1) as 1 | 2,
});
break;
}
updateGame(msg.matchId, { case "GAME_WIN": {
result: { kind: "win", winner: msg.winner }, if (typeof msg.matchId !== "number") {
}); addLog("Protocol error: GAME_WIN missing matchId");
setTimeout(() => { break;
send(cmd.gameList()); }
send(cmd.playerList());
}, 750);
break;
}
case "GAME_DRAW": updateGame(msg.matchId, {
if (typeof msg.matchId !== "number") { result: { kind: "win", winner: msg.winner },
addLog("Protocol error: GAME_DRAW missing matchId"); });
break; setTimeout(() => {
} send(cmd.gameList());
updateGame(msg.matchId, { result: { kind: "draw" } }); send(cmd.playerList());
break; }, 750);
break;
}
case "GAME_TERMINATED": case "GAME_DRAW":
if (typeof msg.matchId !== "number") { if (typeof msg.matchId !== "number") {
addLog("Protocol error: GAME_TERMINATED missing matchId"); addLog("Protocol error: GAME_DRAW missing matchId");
break; break;
} }
updateGame(msg.matchId, { result: { kind: "terminated" } }); updateGame(msg.matchId, { result: { kind: "draw" } });
send(cmd.gameList()); break;
break;
case "PLAYER_LIST": case "GAME_TERMINATED":
setPlayers(msg.players); if (typeof msg.matchId !== "number") {
break; addLog("Protocol error: GAME_TERMINATED missing matchId");
break;
}
updateGame(msg.matchId, { result: { kind: "terminated" } });
send(cmd.gameList());
break;
case "GET_DATA": case "PLAYER_LIST":
if ( setPlayers(msg.players);
msg.key === "TOURNAMENT_STATUS" && break;
msg.value &&
msg.value !== "false"
) {
setTournamentActive(true);
setTournamentType(msg.value);
}
break;
case "ERROR": case "GET_DATA":
addLog(`Error: ${msg.message}`); if (
break; msg.key === "TOURNAMENT_STATUS" &&
msg.value &&
msg.value !== "false"
) {
setTournamentActive(true);
setTournamentType(msg.value);
}
break;
default: case "ERROR":
break; addLog(`Error: ${msg.message}`);
} break;
});
return unsubscribe; default:
}, [addLog, selectedGame, send, subscribe, updateGame]); break;
}
});
useEffect(() => { return unsubscribe;
if (status !== "connected" || role !== "observer") { }, [addLog, selectedGame, send, subscribe, updateGame]);
if (pollRef.current) {
clearInterval(pollRef.current);
pollRef.current = null;
}
return;
}
send(cmd.getData("TOURNAMENT_STATUS")); useEffect(() => {
send(cmd.gameList()); if (status !== "connected" || role !== "observer") {
send(cmd.playerList()); if (pollRef.current) {
clearInterval(pollRef.current);
pollRef.current = null;
}
return;
}
pollRef.current = setInterval(() => { send(cmd.getData("TOURNAMENT_STATUS"));
send(cmd.gameList()); send(cmd.gameList());
send(cmd.playerList()); send(cmd.playerList());
}, 5000);
return () => { pollRef.current = setInterval(() => {
if (pollRef.current) clearInterval(pollRef.current); send(cmd.gameList());
}; send(cmd.playerList());
}, [role, send, status]); }, 5000);
const selectedGameData = return () => {
selectedGame !== null ? liveGames.get(selectedGame) : null; if (pollRef.current) clearInterval(pollRef.current);
};
}, [role, send, status]);
return ( const selectedGameData =
<div className="flex flex-col gap-6"> selectedGame !== null ? liveGames.get(selectedGame) : null;
<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" && ( return (
<div className="rounded-lg border border-yellow-700 bg-yellow-950/30 px-4 py-3 text-sm text-yellow-200"> <div className="flex flex-col gap-6">
Waiting for observer connection... <div className="flex items-center justify-between">
</div> <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 <div className="rounded-lg border border-yellow-700 bg-yellow-950/30 px-4 py-3 text-sm text-yellow-200">
className={`rounded-xl p-4 border flex items-center gap-4 ${ Waiting for observer connection...
tournamentActive </div>
? "bg-purple-950/40 border-purple-600" )}
: "bg-gray-900 border-gray-700"
}`}
>
<div className="text-3xl">{tournamentActive ? "🏆" : "⏳"}</div>
<div>
<div className="font-semibold text-white">
{tournamentActive
? `Tournament Active - ${tournamentType ?? "Unknown Type"}`
: "No Active Tournament"}
</div>
<div className="text-sm text-gray-400">
{gameList.length} match{gameList.length !== 1 ? "es" : ""} running
· {players.filter((p) => p.inMatch).length}/{players.length}{" "}
players in game
</div>
</div>
</div>
)}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> {status === "connected" && (
<div className="flex flex-col gap-4"> <div
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4"> className={`rounded-xl p-4 border flex items-center gap-4 ${
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3"> tournamentActive
Leaderboard ? "bg-purple-950/40 border-purple-600"
</h2> : "bg-gray-900 border-gray-700"
{scores.length === 0 ? ( }`}
<p className="text-gray-500 text-sm text-center py-4"> >
No scores yet <div className="text-3xl">{tournamentActive ? "🏆" : "⏳"}</div>
</p> <div>
) : ( <div className="font-semibold text-white">
<div className="flex flex-col gap-1.5"> {tournamentActive
{scores.map((s, i) => ( ? `Tournament Active - ${tournamentType ?? "Unknown Type"}`
<div : "No Active Tournament"}
key={s.player} </div>
className="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800" <div className="text-sm text-gray-400">
> {gameList.length} match{gameList.length !== 1 ? "es" : ""} running
<span className="text-sm font-bold w-6 text-gray-300"> · {players.filter((p) => p.inMatch).length}/{players.length}{" "}
{i + 1}. players in game
</span> </div>
<span className="text-white flex-1 font-medium text-sm"> </div>
{s.player} </div>
</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="grid grid-cols-1 lg:grid-cols-3 gap-6">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3 flex items-center justify-between"> <div className="flex flex-col gap-4">
<span>Players</span> <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<span className="text-xs text-gray-500 font-normal"> <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
{players.length} connected Leaderboard
</span> </h2>
</h2> {scores.length === 0 ? (
{players.length === 0 ? ( <p className="text-gray-500 text-sm text-center py-4">
<p className="text-gray-500 text-sm text-center py-4"> No scores yet
No players connected </p>
</p> ) : (
) : ( <div className="flex flex-col gap-1.5">
<div className="flex flex-col gap-1.5"> {scores.map((s, i) => (
{players.map((p) => ( <div
<div key={s.player}
key={p.username} className="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800"
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-800" >
> <span className="text-sm font-bold w-6 text-gray-300">
<span className="text-white text-sm flex-1 font-medium"> {i + 1}.
{p.username} </span>
</span> <span className="text-white flex-1 font-medium text-sm">
{p.inMatch ? ( {s.player}
<span className="text-xs px-2 py-0.5 rounded-full bg-blue-900/60 text-blue-300 border border-blue-700"> </span>
In game <span className="text-blue-400 font-bold">{s.score}</span>
</span> </div>
) : p.ready ? ( ))}
<span className="text-xs px-2 py-0.5 rounded-full bg-green-900/60 text-green-300 border border-green-700"> </div>
Ready )}
</span> </div>
) : (
<span className="text-xs px-2 py-0.5 rounded-full bg-gray-700 text-gray-500">
Idle
</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-2"> <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3 flex items-center justify-between">
Event Log <span>Players</span>
</h2> <span className="text-xs text-gray-500 font-normal">
<div className="flex flex-col gap-0.5 max-h-40 overflow-y-auto"> {players.length} connected
{log.slice(0, 20).map((entry, i) => ( </span>
<p key={i} className="text-xs text-gray-400 font-mono"> </h2>
{entry} {players.length === 0 ? (
</p> <p className="text-gray-500 text-sm text-center py-4">
))} No players connected
{log.length === 0 && ( </p>
<p className="text-gray-600 text-xs">No events yet</p> ) : (
)} <div className="flex flex-col gap-1.5">
</div> {players.map((p) => (
</div> <div
</div> key={p.username}
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-800"
>
<span className="text-white text-sm flex-1 font-medium">
{p.username}
</span>
{p.inMatch ? (
<span className="text-xs px-2 py-0.5 rounded-full bg-blue-900/60 text-blue-300 border border-blue-700">
In game
</span>
) : p.ready ? (
<span className="text-xs px-2 py-0.5 rounded-full bg-green-900/60 text-green-300 border border-green-700">
Ready
</span>
) : (
<span className="text-xs px-2 py-0.5 rounded-full bg-gray-700 text-gray-500">
Idle
</span>
)}
</div>
))}
</div>
)}
</div>
<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-2">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3"> Event Log
Active Matches </h2>
</h2> <div className="flex flex-col gap-0.5 max-h-40 overflow-y-auto">
{gameList.length === 0 ? ( {log.slice(0, 20).map((entry, i) => (
<p className="text-gray-500 text-sm text-center py-3"> <p key={i} className="text-xs text-gray-400 font-mono">
No active matches {entry}
</p> </p>
) : ( ))}
<div className="flex flex-wrap gap-2"> {log.length === 0 && (
{gameList.map((g) => { <p className="text-gray-600 text-xs">No events yet</p>
const live = liveGames.get(g.id); )}
return ( </div>
<button </div>
key={g.id} </div>
onClick={() =>
setSelectedGame(selectedGame === g.id ? null : g.id)
}
className={`px-3 py-2 rounded-lg border text-sm transition-colors ${
selectedGame === g.id
? "border-blue-500 bg-blue-950/50 text-blue-200"
: "border-gray-700 bg-gray-800 hover:border-gray-500 text-gray-300"
}`}
>
<span className="text-gray-500 text-xs font-mono mr-1">
#{g.id}
</span>
<span className="text-red-400">{g.player1}</span>
<span className="text-gray-500 mx-1">vs</span>
<span className="text-yellow-400">{g.player2}</span>
{live?.result && (
<span className="ml-1 text-xs">
{live.result.kind === "win"
? ` 🏆 ${live.result.winner}`
: live.result.kind === "draw"
? " 🤝"
: " ⛔"}
</span>
)}
</button>
);
})}
</div>
)}
</div>
<div className="bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center gap-4 min-h-64"> <div className="lg:col-span-2 flex flex-col gap-4">
{!selectedGameData ? ( <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<div className="flex flex-col items-center justify-center gap-3 py-12 text-center"> <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
<span className="text-4xl text-gray-700">🎯</span> Active Matches
<p className="text-gray-500 text-sm"> </h2>
{gameList.length > 0 {gameList.length === 0 ? (
? "Click a match above to see the board" <p className="text-gray-500 text-sm text-center py-3">
: "Active matches will appear here"} No active matches
</p> </p>
</div> ) : (
) : ( <div className="flex flex-wrap gap-2">
<> {gameList.map((g) => {
{selectedGameData.result && ( const live = liveGames.get(g.id);
<div return (
className={`w-full rounded-lg p-3 text-center font-semibold ${ <button
selectedGameData.result.kind === "win" key={g.id}
? "bg-green-900/50 border border-green-600 text-green-300" onClick={() =>
: selectedGameData.result.kind === "draw" setSelectedGame(selectedGame === g.id ? null : g.id)
? "bg-blue-900/50 border border-blue-600 text-blue-300" }
: "bg-red-900/50 border border-red-600 text-red-300" className={`px-3 py-2 rounded-lg border text-sm transition-colors ${
}`} selectedGame === g.id
> ? "border-blue-500 bg-blue-950/50 text-blue-200"
{selectedGameData.result.kind === "win" : "border-gray-700 bg-gray-800 hover:border-gray-500 text-gray-300"
? `🏆 ${selectedGameData.result.winner} wins!` }`}
: selectedGameData.result.kind === "draw" >
? "🤝 Draw!" <span className="text-gray-500 text-xs font-mono mr-1">
: "⛔ Match Terminated"} #{g.id}
</div> </span>
)} <span className="text-red-400">{g.player1}</span>
<Board <span className="text-gray-500 mx-1">vs</span>
board={selectedGameData.board} <span className="text-yellow-400">{g.player2}</span>
lastMove={selectedGameData.lastMove} {live?.result && (
player1={selectedGameData.player1} <span className="ml-1 text-xs">
player2={selectedGameData.player2} {live.result.kind === "win"
currentTurnColor={ ? ` 🏆 ${live.result.winner}`
selectedGameData.result : live.result.kind === "draw"
? null ? " 🤝"
: selectedGameData.currentTurnColor : " ⛔"}
} </span>
disabled )}
/> </button>
</> );
)} })}
</div> </div>
</div> )}
</div> </div>
</div>
); <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center gap-4 min-h-64">
{!selectedGameData ? (
<div className="flex flex-col items-center justify-center gap-3 py-12 text-center">
<span className="text-4xl text-gray-700">🎯</span>
<p className="text-gray-500 text-sm">
{gameList.length > 0
? "Click a match above to see the board"
: "Active matches will appear here"}
</p>
</div>
) : (
<>
{selectedGameData.result && (
<div
className={`w-full rounded-lg p-3 text-center font-semibold ${
selectedGameData.result.kind === "win"
? "bg-green-900/50 border border-green-600 text-green-300"
: selectedGameData.result.kind === "draw"
? "bg-blue-900/50 border border-blue-600 text-blue-300"
: "bg-red-900/50 border border-red-600 text-red-300"
}`}
>
{selectedGameData.result.kind === "win"
? `🏆 ${selectedGameData.result.winner} wins!`
: selectedGameData.result.kind === "draw"
? "🤝 Draw!"
: "⛔ Match Terminated"}
</div>
)}
<Board
board={selectedGameData.board}
lastMove={selectedGameData.lastMove}
player1={selectedGameData.player1}
player2={selectedGameData.player2}
currentTurnColor={
selectedGameData.result
? null
: selectedGameData.currentTurnColor
}
disabled
/>
</>
)}
</div>
</div>
</div>
</div>
);
} }

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

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

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

@@ -54,7 +54,9 @@ export default function Board({
<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> <span className="font-medium">{player2}</span>
{currentTurnColor === 2 && ( {currentTurnColor === 2 && (
<span className="text-xs text-yellow-400 animate-pulse">● Turn</span> <span className="text-xs text-yellow-400 animate-pulse">
● Turn
</span>
)} )}
</div> </div>
</div> </div>
@@ -80,7 +82,9 @@ export default function Board({
{/* Drop arrow indicator */} {/* Drop arrow indicator */}
<div <div
className={`h-2 flex items-center justify-center transition-opacity ${ className={`h-2 flex items-center justify-center transition-opacity ${
hoveredCol === col && canInteract ? "opacity-100" : "opacity-0" hoveredCol === col && canInteract
? "opacity-100"
: "opacity-0"
}`} }`}
> >
<div className="w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-white/70" /> <div className="w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-white/70" />
@@ -98,21 +102,19 @@ export default function Board({
className={`w-12 h-12 rounded-full border-2 transition-all duration-150 ${ className={`w-12 h-12 rounded-full border-2 transition-all duration-150 ${
cell === 1 cell === 1
? `bg-red-500 shadow-lg shadow-red-950/60 ${ ? `bg-red-500 shadow-lg shadow-red-950/60 ${
isLast isLast ? "border-white scale-110" : "border-red-700"
? "border-white scale-110"
: "border-red-700"
}` }`
: cell === 2 : cell === 2
? `bg-yellow-400 shadow-lg shadow-yellow-950/60 ${ ? `bg-yellow-400 shadow-lg shadow-yellow-950/60 ${
isLast isLast
? "border-white scale-110" ? "border-white scale-110"
: "border-yellow-600" : "border-yellow-600"
}` }`
: `bg-slate-950 border-slate-800 ${ : `bg-slate-950 border-slate-800 ${
hoveredCol === col && canInteract hoveredCol === col && canInteract
? "border-blue-400/50" ? "border-blue-400/50"
: "" : ""
}` }`
}`} }`}
/> />
); );

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

@@ -7,115 +7,115 @@ import { useConnection } from "@/lib/connection";
import { cmd, DEFAULT_WS_URL } from "@/lib/protocol"; import { cmd, DEFAULT_WS_URL } 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 } = useConnection();
const [showPlayerModal, setShowPlayerModal] = useState(false); const [showPlayerModal, setShowPlayerModal] = useState(false);
const [nextUsername, setNextUsername] = useState(username); const [nextUsername, setNextUsername] = useState(username);
const statusLabel = const statusLabel =
status === "connected" status === "connected"
? `Connected ${role === "player" ? `as ${username}` : "as observer"}` ? `Connected ${role === "player" ? `as ${username}` : "as observer"}`
: status === "reconnecting" : status === "reconnecting"
? "Reconnecting..." ? "Reconnecting..."
: status === "connecting" : status === "connecting"
? "Connecting..." ? "Connecting..."
: "Not connected"; : "Not connected";
const isConnectionPage = pathname === "/"; const isConnectionPage = pathname === "/";
const disableRoleSwitch = const disableRoleSwitch =
status === "connecting" || status === "reconnecting"; status === "connecting" || status === "reconnecting";
const handleBecomeObserver = () => { const handleBecomeObserver = () => {
send(cmd.disconnect()); send(cmd.disconnect());
router.push("/spectate"); router.push("/spectate");
}; };
const handleBecomePlayer = (event: FormEvent<HTMLFormElement>) => { const handleBecomePlayer = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
const trimmed = nextUsername.trim(); const trimmed = nextUsername.trim();
if (!trimmed) return; if (!trimmed) return;
becomePlayer(trimmed); becomePlayer(trimmed);
setShowPlayerModal(false); setShowPlayerModal(false);
router.push("/play"); router.push("/play");
}; };
return ( return (
<> <>
<nav className="bg-gray-900 border-b border-gray-800 px-4 py-3"> <nav className="bg-gray-900 border-b border-gray-800 px-4 py-3">
<div className="max-w-7xl mx-auto flex items-center gap-4 flex-wrap"> <div className="max-w-7xl mx-auto flex items-center gap-4 flex-wrap">
<Link <Link
href="/" href="/"
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</span>
<span className="text-gray-400 text-sm font-normal">Moderator</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"
? handleBecomeObserver ? handleBecomeObserver
: () => { : () => {
setNextUsername(username); setNextUsername(username);
setShowPlayerModal(true); setShowPlayerModal(true);
} }
} }
disabled={disableRoleSwitch} disabled={disableRoleSwitch}
className="px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white" className="px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white"
> >
{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"> <div className="text-xs text-gray-400 bg-gray-800 px-3 py-1 rounded-full">
{statusLabel} {statusLabel}
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
{showPlayerModal && ( {showPlayerModal && (
<div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center px-4"> <div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center px-4">
<form <form
onSubmit={handleBecomePlayer} onSubmit={handleBecomePlayer}
className="w-full max-w-sm bg-gray-900 border border-gray-700 rounded-xl p-5 flex flex-col gap-3" className="w-full max-w-sm bg-gray-900 border border-gray-700 rounded-xl p-5 flex flex-col gap-3"
> >
<h2 className="text-lg font-semibold text-white">Become Player</h2> <h2 className="text-lg font-semibold text-white">Become Player</h2>
<p className="text-sm text-gray-400"> <p className="text-sm text-gray-400">
Enter a username to connect as a player. Enter a username to connect as a player.
</p> </p>
<input <input
autoFocus autoFocus
value={nextUsername} value={nextUsername}
onChange={(event) => setNextUsername(event.target.value)} onChange={(event) => setNextUsername(event.target.value)}
className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none" className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
placeholder="Username" placeholder="Username"
/> />
<div className="flex justify-end gap-2 pt-1"> <div className="flex justify-end gap-2 pt-1">
<button <button
type="button" type="button"
onClick={() => setShowPlayerModal(false)} onClick={() => setShowPlayerModal(false)}
className="px-3 py-2 rounded-lg text-sm font-medium bg-gray-700 hover:bg-gray-600 text-white" className="px-3 py-2 rounded-lg text-sm font-medium bg-gray-700 hover:bg-gray-600 text-white"
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
className="px-3 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 text-white" className="px-3 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 text-white"
> >
Continue Continue
</button> </button>
</div> </div>
</form> </form>
</div> </div>
)} )}
</> </>
); );
} }

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

@@ -1,390 +1,390 @@
"use client"; "use client";
import { import {
createContext, createContext,
useCallback, useCallback,
useContext, useContext,
useEffect, useEffect,
useMemo, useMemo,
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import { import {
DEFAULT_WS_URL, DEFAULT_WS_URL,
ParsedMessage, ParsedMessage,
RECONNECT_INTERVAL_MS, RECONNECT_INTERVAL_MS,
RECONNECT_TIMEOUT_MS, RECONNECT_TIMEOUT_MS,
cmd, cmd,
parseMessage, parseMessage,
} from "@/lib/protocol"; } from "@/lib/protocol";
export type ConnectionRole = "observer" | "player"; export type ConnectionRole = "observer" | "player";
export type ConnectionStatus = export type ConnectionStatus =
| "idle" | "idle"
| "connecting" | "connecting"
| "connected" | "connected"
| "reconnecting" | "reconnecting"
| "disconnected"; | "disconnected";
type MessageListener = (message: ParsedMessage, raw: string) => void; type MessageListener = (message: ParsedMessage, raw: string) => void;
interface ConnectOptions { interface ConnectOptions {
role: ConnectionRole; role: ConnectionRole;
wsUrl: string; wsUrl: string;
username?: string; username?: string;
} }
interface ConnectionContextValue { interface ConnectionContextValue {
role: ConnectionRole | null; role: ConnectionRole | null;
wsUrl: string; wsUrl: string;
username: string; username: string;
status: ConnectionStatus; status: ConnectionStatus;
isInMatch: boolean; isInMatch: boolean;
reconnectAttempts: number; reconnectAttempts: number;
shouldRedirectToConnect: boolean; shouldRedirectToConnect: boolean;
becomePlayer: (username: string) => void; becomePlayer: (username: string) => void;
connect: (options: ConnectOptions) => void; connect: (options: ConnectOptions) => void;
disconnect: () => void; disconnect: () => void;
send: (message: string) => boolean; send: (message: string) => boolean;
subscribe: (listener: MessageListener) => () => void; subscribe: (listener: MessageListener) => () => void;
clearRedirectFlag: () => void; clearRedirectFlag: () => void;
} }
const ConnectionContext = createContext<ConnectionContextValue | null>(null); const ConnectionContext = createContext<ConnectionContextValue | null>(null);
interface SessionState { interface SessionState {
role: ConnectionRole; role: ConnectionRole;
wsUrl: string; wsUrl: string;
username: string; username: string;
} }
export function ConnectionProvider({ export function ConnectionProvider({
children, children,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const [role, setRole] = useState<ConnectionRole | null>(null); const [role, setRole] = useState<ConnectionRole | null>(null);
const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL); const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [status, setStatus] = useState<ConnectionStatus>("idle"); const [status, setStatus] = useState<ConnectionStatus>("idle");
const [isInMatch, setIsInMatch] = useState(false); const [isInMatch, setIsInMatch] = useState(false);
const [reconnectAttempts, setReconnectAttempts] = useState(0); const [reconnectAttempts, setReconnectAttempts] = useState(0);
const [shouldRedirectToConnect, setShouldRedirectToConnect] = useState(false); const [shouldRedirectToConnect, setShouldRedirectToConnect] = useState(false);
const wsRef = useRef<WebSocket | null>(null); const wsRef = useRef<WebSocket | null>(null);
const listenersRef = useRef<Set<MessageListener>>(new Set()); const listenersRef = useRef<Set<MessageListener>>(new Set());
const manualCloseRef = useRef(false); const manualCloseRef = useRef(false);
const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null); const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const reconnectDeadlineRef = useRef<number | null>(null); const reconnectDeadlineRef = useRef<number | null>(null);
const reconnectActiveRef = useRef(false); const reconnectActiveRef = useRef(false);
const isInMatchRef = useRef(false); const isInMatchRef = useRef(false);
const sessionRef = useRef<SessionState | null>(null); const sessionRef = useRef<SessionState | null>(null);
const clearReconnectTimer = useCallback(() => { const clearReconnectTimer = useCallback(() => {
if (reconnectTimerRef.current) { if (reconnectTimerRef.current) {
clearTimeout(reconnectTimerRef.current); clearTimeout(reconnectTimerRef.current);
reconnectTimerRef.current = null; reconnectTimerRef.current = null;
} }
}, []); }, []);
const clearReconnectState = useCallback(() => { const clearReconnectState = useCallback(() => {
reconnectActiveRef.current = false; reconnectActiveRef.current = false;
reconnectDeadlineRef.current = null; reconnectDeadlineRef.current = null;
clearReconnectTimer(); clearReconnectTimer();
setReconnectAttempts(0); setReconnectAttempts(0);
}, [clearReconnectTimer]); }, [clearReconnectTimer]);
const emitMessage = useCallback((message: ParsedMessage, raw: string) => { const emitMessage = useCallback((message: ParsedMessage, raw: string) => {
listenersRef.current.forEach((listener) => listener(message, raw)); listenersRef.current.forEach((listener) => listener(message, raw));
}, []); }, []);
const safeCloseSocket = useCallback(() => { const safeCloseSocket = useCallback(() => {
const current = wsRef.current; const current = wsRef.current;
if (!current) return; if (!current) return;
current.onopen = null; current.onopen = null;
current.onmessage = null; current.onmessage = null;
current.onclose = null; current.onclose = null;
current.onerror = null; current.onerror = null;
try { try {
current.close(); current.close();
} catch { } catch {
// no-op // no-op
} }
wsRef.current = null; wsRef.current = null;
}, []); }, []);
const handleDisconnect = useCallback(() => { const handleDisconnect = useCallback(() => {
const currentRole = sessionRef.current?.role; const currentRole = sessionRef.current?.role;
if (currentRole === "observer") { if (currentRole === "observer") {
clearReconnectState(); clearReconnectState();
setStatus("disconnected"); setStatus("disconnected");
setShouldRedirectToConnect(true); setShouldRedirectToConnect(true);
return; return;
} }
if (currentRole === "player" && isInMatchRef.current) { if (currentRole === "player" && isInMatchRef.current) {
if (reconnectActiveRef.current) { if (reconnectActiveRef.current) {
setStatus("reconnecting"); setStatus("reconnecting");
return; return;
} }
reconnectActiveRef.current = true; reconnectActiveRef.current = true;
reconnectDeadlineRef.current = Date.now() + RECONNECT_TIMEOUT_MS; reconnectDeadlineRef.current = Date.now() + RECONNECT_TIMEOUT_MS;
setStatus("reconnecting"); setStatus("reconnecting");
setReconnectAttempts(0); setReconnectAttempts(0);
return; return;
} }
clearReconnectState(); clearReconnectState();
setStatus("disconnected"); setStatus("disconnected");
setShouldRedirectToConnect(true); setShouldRedirectToConnect(true);
}, [clearReconnectState]); }, [clearReconnectState]);
const attachSocket = useCallback( const attachSocket = useCallback(
(socket: WebSocket, reconnecting: boolean) => { (socket: WebSocket, reconnecting: boolean) => {
socket.onopen = () => { socket.onopen = () => {
const session = sessionRef.current; const session = sessionRef.current;
if (!session) return; if (!session) return;
if (session.role === "observer") { if (session.role === "observer") {
socket.send(cmd.observe()); socket.send(cmd.observe());
return; return;
} }
if (reconnecting) { if (reconnecting) {
socket.send(cmd.reconnect(session.username)); socket.send(cmd.reconnect(session.username));
} else { } else {
socket.send(cmd.connect(session.username)); socket.send(cmd.connect(session.username));
} }
}; };
socket.onmessage = (event) => { socket.onmessage = (event) => {
const raw = event.data as string; const raw = event.data as string;
console.log(raw); console.log(raw);
const parsed = parseMessage(raw); const parsed = parseMessage(raw);
if (parsed.type === "OBSERVE_ACK") { if (parsed.type === "OBSERVE_ACK") {
setRole("observer"); setRole("observer");
setShouldRedirectToConnect(false); setShouldRedirectToConnect(false);
setStatus("connected"); setStatus("connected");
} }
if (parsed.type === "CONNECT_ACK") { if (parsed.type === "CONNECT_ACK") {
setRole("player"); setRole("player");
} }
if (parsed.type === "RECONNECT_ACK") { if (parsed.type === "RECONNECT_ACK") {
clearReconnectState(); clearReconnectState();
setShouldRedirectToConnect(false); setShouldRedirectToConnect(false);
setStatus("connected"); setStatus("connected");
} }
if (parsed.type === "DISCONNECT_ACK") { if (parsed.type === "DISCONNECT_ACK") {
setRole("observer"); setRole("observer");
setUsername(""); setUsername("");
isInMatchRef.current = false; isInMatchRef.current = false;
setIsInMatch(false); setIsInMatch(false);
} }
if (parsed.type === "GAME_START") { if (parsed.type === "GAME_START") {
isInMatchRef.current = true; isInMatchRef.current = true;
setIsInMatch(true); setIsInMatch(true);
} }
if ( if (
parsed.type === "GAME_WINS" || parsed.type === "GAME_WINS" ||
parsed.type === "GAME_LOSS" || parsed.type === "GAME_LOSS" ||
parsed.type === "GAME_DRAW" || parsed.type === "GAME_DRAW" ||
parsed.type === "GAME_TERMINATED" parsed.type === "GAME_TERMINATED"
) { ) {
isInMatchRef.current = false; isInMatchRef.current = false;
setIsInMatch(false); setIsInMatch(false);
} }
if ( if (
parsed.type === "ERROR" && parsed.type === "ERROR" &&
reconnecting && reconnecting &&
parsed.message.startsWith("ERROR:INVALID:RECONNECT") parsed.message.startsWith("ERROR:INVALID:RECONNECT")
) { ) {
safeCloseSocket(); safeCloseSocket();
} }
emitMessage(parsed, raw); emitMessage(parsed, raw);
}; };
socket.onclose = () => { socket.onclose = () => {
wsRef.current = null; wsRef.current = null;
if (manualCloseRef.current) { if (manualCloseRef.current) {
manualCloseRef.current = false; manualCloseRef.current = false;
return; return;
} }
handleDisconnect(); handleDisconnect();
}; };
socket.onerror = () => { socket.onerror = () => {
// Allow close event to drive state transitions. // Allow close event to drive state transitions.
}; };
}, },
[clearReconnectState, emitMessage, handleDisconnect, safeCloseSocket], [clearReconnectState, emitMessage, handleDisconnect, safeCloseSocket],
); );
const openSocket = useCallback( const openSocket = useCallback(
(reconnecting: boolean) => { (reconnecting: boolean) => {
const session = sessionRef.current; const session = sessionRef.current;
if (!session) return; if (!session) return;
safeCloseSocket(); safeCloseSocket();
manualCloseRef.current = false; manualCloseRef.current = false;
const socket = new WebSocket(session.wsUrl); const socket = new WebSocket(session.wsUrl);
wsRef.current = socket; wsRef.current = socket;
attachSocket(socket, reconnecting); attachSocket(socket, reconnecting);
}, },
[attachSocket, safeCloseSocket], [attachSocket, safeCloseSocket],
); );
useEffect(() => { useEffect(() => {
if (!reconnectActiveRef.current) return; if (!reconnectActiveRef.current) return;
const runReconnectAttempt = () => { const runReconnectAttempt = () => {
if (!reconnectActiveRef.current) return; if (!reconnectActiveRef.current) return;
const deadline = reconnectDeadlineRef.current; const deadline = reconnectDeadlineRef.current;
if (!deadline || Date.now() >= deadline) { if (!deadline || Date.now() >= deadline) {
reconnectActiveRef.current = false; reconnectActiveRef.current = false;
reconnectDeadlineRef.current = null; reconnectDeadlineRef.current = null;
setStatus("disconnected"); setStatus("disconnected");
setShouldRedirectToConnect(true); setShouldRedirectToConnect(true);
return; return;
} }
setReconnectAttempts((prev) => prev + 1); setReconnectAttempts((prev) => prev + 1);
openSocket(true); openSocket(true);
clearReconnectTimer(); clearReconnectTimer();
reconnectTimerRef.current = setTimeout( reconnectTimerRef.current = setTimeout(
runReconnectAttempt, runReconnectAttempt,
RECONNECT_INTERVAL_MS, RECONNECT_INTERVAL_MS,
); );
}; };
runReconnectAttempt(); runReconnectAttempt();
return () => clearReconnectTimer(); return () => clearReconnectTimer();
}, [clearReconnectTimer, openSocket, status]); }, [clearReconnectTimer, openSocket, status]);
const connect = useCallback( const connect = useCallback(
({ role, wsUrl, username }: ConnectOptions) => { ({ role, wsUrl, username }: ConnectOptions) => {
const resolvedUsername = (username ?? "").trim(); const resolvedUsername = (username ?? "").trim();
sessionRef.current = { role, wsUrl, username: resolvedUsername }; sessionRef.current = { role, wsUrl, username: resolvedUsername };
setRole(role); setRole(role);
setWsUrl(wsUrl); setWsUrl(wsUrl);
setUsername(resolvedUsername); setUsername(resolvedUsername);
setShouldRedirectToConnect(false); setShouldRedirectToConnect(false);
clearReconnectState(); clearReconnectState();
isInMatchRef.current = false; isInMatchRef.current = false;
setIsInMatch(false); setIsInMatch(false);
setStatus("connecting"); setStatus("connecting");
openSocket(false); openSocket(false);
}, },
[clearReconnectState, openSocket], [clearReconnectState, openSocket],
); );
const becomePlayer = useCallback( const becomePlayer = useCallback(
(username: string) => { (username: string) => {
const resolvedUsername = (username ?? "").trim(); const resolvedUsername = (username ?? "").trim();
setRole("player"); setRole("player");
setUsername(resolvedUsername); setUsername(resolvedUsername);
isInMatchRef.current = false; isInMatchRef.current = false;
setIsInMatch(false); setIsInMatch(false);
send(cmd.connect(resolvedUsername)); send(cmd.connect(resolvedUsername));
}, },
[clearReconnectState, openSocket], [clearReconnectState, openSocket],
); );
const disconnect = useCallback(() => { const disconnect = useCallback(() => {
clearReconnectState(); clearReconnectState();
manualCloseRef.current = true; manualCloseRef.current = true;
safeCloseSocket(); safeCloseSocket();
sessionRef.current = null; sessionRef.current = null;
setRole(null); setRole(null);
setStatus("idle"); setStatus("idle");
setUsername(""); setUsername("");
setIsInMatch(false); setIsInMatch(false);
isInMatchRef.current = false; isInMatchRef.current = false;
setShouldRedirectToConnect(false); setShouldRedirectToConnect(false);
}, [clearReconnectState, safeCloseSocket]); }, [clearReconnectState, safeCloseSocket]);
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;
wsRef.current.send(message); wsRef.current.send(message);
return true; return true;
}, []); }, []);
const subscribe = useCallback((listener: MessageListener) => { const subscribe = useCallback((listener: MessageListener) => {
listenersRef.current.add(listener); listenersRef.current.add(listener);
return () => { return () => {
listenersRef.current.delete(listener); listenersRef.current.delete(listener);
}; };
}, []); }, []);
const clearRedirectFlag = useCallback(() => { const clearRedirectFlag = useCallback(() => {
setShouldRedirectToConnect(false); setShouldRedirectToConnect(false);
}, []); }, []);
useEffect(() => { useEffect(() => {
return () => { return () => {
clearReconnectState(); clearReconnectState();
manualCloseRef.current = true; manualCloseRef.current = true;
safeCloseSocket(); safeCloseSocket();
}; };
}, [clearReconnectState, safeCloseSocket]); }, [clearReconnectState, safeCloseSocket]);
const value = useMemo<ConnectionContextValue>( const value = useMemo<ConnectionContextValue>(
() => ({ () => ({
role, role,
wsUrl, wsUrl,
username, username,
status, status,
isInMatch, isInMatch,
reconnectAttempts, reconnectAttempts,
shouldRedirectToConnect, shouldRedirectToConnect,
becomePlayer, becomePlayer,
connect, connect,
disconnect, disconnect,
send, send,
subscribe, subscribe,
clearRedirectFlag, clearRedirectFlag,
}), }),
[ [
role, role,
wsUrl, wsUrl,
username, username,
status, status,
isInMatch, isInMatch,
reconnectAttempts, reconnectAttempts,
shouldRedirectToConnect, shouldRedirectToConnect,
connect, connect,
disconnect, disconnect,
send, send,
subscribe, subscribe,
clearRedirectFlag, clearRedirectFlag,
], ],
); );
return ( return (
<ConnectionContext.Provider value={value}> <ConnectionContext.Provider value={value}>
{children} {children}
</ConnectionContext.Provider> </ConnectionContext.Provider>
); );
} }
export function useConnection() { export function useConnection() {
const context = useContext(ConnectionContext); const context = useContext(ConnectionContext);
if (!context) { if (!context) {
throw new Error("useConnection must be used within a ConnectionProvider"); throw new Error("useConnection must be used within a ConnectionProvider");
} }
return context; return context;
} }

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

@@ -1,262 +1,262 @@
// ─── Types ─────────────────────────────────────────────────────────────────── // ─── Types ───────────────────────────────────────────────────────────────────
export interface GameEntry { export interface GameEntry {
id: number; id: number;
player1: string; player1: string;
player2: string; player2: string;
} }
export interface PlayerEntry { export interface PlayerEntry {
username: string; username: string;
ready: boolean; ready: boolean;
inMatch: boolean; inMatch: boolean;
} }
export interface ScoreEntry { export interface ScoreEntry {
player: string; player: string;
score: number; score: number;
} }
export interface MoveEntry { export interface MoveEntry {
username: string; username: string;
column: number; column: number;
} }
export const DEFAULT_WS_URL = export const DEFAULT_WS_URL =
process.env.NODE_ENV === "development" process.env.NODE_ENV === "development"
? "ws://localhost:8080" ? "ws://localhost:8080"
: "wss://connect4.abunchofknowitalls.com"; : "wss://connect4.abunchofknowitalls.com";
export const RECONNECT_INTERVAL_MS = 5000; export const RECONNECT_INTERVAL_MS = 5000;
export const RECONNECT_TIMEOUT_MS = 60000; export const RECONNECT_TIMEOUT_MS = 60000;
// ─── Parsed message union ──────────────────────────────────────────────────── // ─── Parsed message union ────────────────────────────────────────────────────
export type ParsedMessage = export type ParsedMessage =
| { type: "CONNECT_ACK" } | { type: "CONNECT_ACK" }
| { type: "RECONNECT_ACK" } | { type: "RECONNECT_ACK" }
| { type: "DISCONNECT_ACK" } | { type: "DISCONNECT_ACK" }
| { type: "OBSERVE_ACK"; enabled: boolean } | { type: "OBSERVE_ACK"; enabled: boolean }
| { type: "READY_ACK" } | { type: "READY_ACK" }
| { type: "GAME_START"; goesFirst: boolean } | { type: "GAME_START"; goesFirst: boolean }
| { type: "GAME_WINS" } | { type: "GAME_WINS" }
| { type: "GAME_LOSS" } | { type: "GAME_LOSS" }
| { type: "GAME_DRAW"; matchId?: number } | { type: "GAME_DRAW"; matchId?: number }
| { type: "GAME_TERMINATED"; matchId?: number } | { type: "GAME_TERMINATED"; matchId?: number }
| { type: "OPPONENT_MOVE"; column: number } | { type: "OPPONENT_MOVE"; column: number }
| { type: "GAME_LIST"; games: GameEntry[] } | { type: "GAME_LIST"; games: GameEntry[] }
| { | {
type: "GAME_WATCH_ACK"; type: "GAME_WATCH_ACK";
matchId: number; matchId: number;
player1: string; player1: string;
player2: string; player2: string;
moves: MoveEntry[]; moves: MoveEntry[];
} }
| { type: "GAME_MOVE"; matchId?: number; username: string; column: number } | { type: "GAME_MOVE"; matchId?: number; username: string; column: number }
| { type: "GAME_WIN"; matchId?: number; winner: string } | { type: "GAME_WIN"; matchId?: number; winner: string }
| { type: "PLAYER_LIST"; players: PlayerEntry[] } | { type: "PLAYER_LIST"; players: PlayerEntry[] }
| { 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_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 }
| { type: "SET_DATA_ACK"; key: string } | { type: "SET_DATA_ACK"; key: string }
| { type: "ERROR"; message: string } | { type: "ERROR"; message: string }
| { type: "UNKNOWN"; raw: string }; | { type: "UNKNOWN"; raw: string };
// ─── Parser ────────────────────────────────────────────────────────────────── // ─── Parser ──────────────────────────────────────────────────────────────────
export function parseMessage(raw: string): ParsedMessage { export function parseMessage(raw: string): ParsedMessage {
const parts = raw.split(":"); const parts = raw.split(":");
switch (parts[0]) { switch (parts[0]) {
case "CONNECT": case "CONNECT":
if (parts[1] === "ACK") return { type: "CONNECT_ACK" }; if (parts[1] === "ACK") return { type: "CONNECT_ACK" };
break; break;
case "RECONNECT": case "RECONNECT":
if (parts[1] === "ACK") return { type: "RECONNECT_ACK" }; if (parts[1] === "ACK") return { type: "RECONNECT_ACK" };
break; break;
case "DISCONNECT": case "DISCONNECT":
if (parts[1] === "ACK") return { type: "DISCONNECT_ACK" }; if (parts[1] === "ACK") return { type: "DISCONNECT_ACK" };
break; break;
case "OBSERVE": case "OBSERVE":
if (parts[1] === "ACK") { if (parts[1] === "ACK") {
return { type: "OBSERVE_ACK", enabled: parts[2] === "1" }; return { type: "OBSERVE_ACK", enabled: parts[2] === "1" };
} }
break; break;
case "READY": case "READY":
if (parts[1] === "ACK") return { type: "READY_ACK" }; if (parts[1] === "ACK") return { type: "READY_ACK" };
break; break;
case "GAME": { case "GAME": {
const scopedMatchId = parseInt(parts[1], 10); const scopedMatchId = parseInt(parts[1], 10);
if (!Number.isNaN(scopedMatchId)) { if (!Number.isNaN(scopedMatchId)) {
switch (parts[2]) { switch (parts[2]) {
case "MOVE": case "MOVE":
return { return {
type: "GAME_MOVE", type: "GAME_MOVE",
matchId: scopedMatchId, matchId: scopedMatchId,
username: parts[3], username: parts[3],
column: parseInt(parts[4], 10), column: parseInt(parts[4], 10),
}; };
case "WIN": case "WIN":
return { return {
type: "GAME_WIN", type: "GAME_WIN",
matchId: scopedMatchId, matchId: scopedMatchId,
winner: parts[3], winner: parts[3],
}; };
case "DRAW": case "DRAW":
return { type: "GAME_DRAW", matchId: scopedMatchId }; return { type: "GAME_DRAW", matchId: scopedMatchId };
case "TERMINATED": case "TERMINATED":
return { type: "GAME_TERMINATED", matchId: scopedMatchId }; return { type: "GAME_TERMINATED", matchId: scopedMatchId };
} }
} }
switch (parts[1]) { switch (parts[1]) {
case "START": case "START":
return { type: "GAME_START", goesFirst: parts[2] === "1" }; return { type: "GAME_START", goesFirst: parts[2] === "1" };
case "WINS": case "WINS":
return { type: "GAME_WINS" }; return { type: "GAME_WINS" };
case "LOSS": case "LOSS":
return { type: "GAME_LOSS" }; return { type: "GAME_LOSS" };
case "DRAW": case "DRAW":
return { type: "GAME_DRAW" }; return { type: "GAME_DRAW" };
case "TERMINATED": case "TERMINATED":
return { type: "GAME_TERMINATED" }; return { type: "GAME_TERMINATED" };
case "LIST": { case "LIST": {
const data = parts[2] ?? ""; const data = parts[2] ?? "";
if (!data) return { type: "GAME_LIST", games: [] }; if (!data) return { type: "GAME_LIST", games: [] };
const games: GameEntry[] = data.split("|").map((g) => { const games: GameEntry[] = data.split("|").map((g) => {
const [id, player1, player2] = g.split(","); const [id, player1, player2] = g.split(",");
return { id: parseInt(id), player1, player2 }; return { id: parseInt(id), player1, player2 };
}); });
return { type: "GAME_LIST", games }; return { type: "GAME_LIST", games };
} }
case "WATCH": { case "WATCH": {
if (parts[2] === "ACK") { if (parts[2] === "ACK") {
// GAME:WATCH:ACK:<id>,<p1>,<p2>|<username>,<col>|... // GAME:WATCH:ACK:<id>,<p1>,<p2>|<username>,<col>|...
const data = parts.slice(3).join(":"); const data = parts.slice(3).join(":");
const segments = data.split("|"); const segments = data.split("|");
const [idStr, player1, player2] = segments[0].split(","); const [idStr, player1, player2] = segments[0].split(",");
const moves: MoveEntry[] = segments const moves: MoveEntry[] = segments
.slice(1) .slice(1)
.filter(Boolean) .filter(Boolean)
.map((m) => { .map((m) => {
const lastComma = m.lastIndexOf(","); const lastComma = m.lastIndexOf(",");
return { return {
username: m.substring(0, lastComma), username: m.substring(0, lastComma),
column: parseInt(m.substring(lastComma + 1)), column: parseInt(m.substring(lastComma + 1)),
}; };
}); });
return { return {
type: "GAME_WATCH_ACK", type: "GAME_WATCH_ACK",
matchId: parseInt(idStr), matchId: parseInt(idStr),
player1, player1,
player2, player2,
moves, moves,
}; };
} }
break; break;
} }
} }
break; break;
} }
case "OPPONENT": case "OPPONENT":
return { return {
type: "OPPONENT_MOVE", type: "OPPONENT_MOVE",
column: parseInt(parts[parts.length - 1], 10), column: parseInt(parts[parts.length - 1], 10),
}; };
case "PLAYER": { case "PLAYER": {
if (parts[1] === "LIST") { if (parts[1] === "LIST") {
const data = parts[2] ?? ""; const data = parts[2] ?? "";
if (!data) return { type: "PLAYER_LIST", players: [] }; if (!data) return { type: "PLAYER_LIST", players: [] };
const players: PlayerEntry[] = data.split("|").map((p) => { const players: PlayerEntry[] = data.split("|").map((p) => {
const [username, ready, inMatch] = p.split(","); const [username, ready, inMatch] = p.split(",");
return { return {
username, username,
ready: ready === "true", ready: ready === "true",
inMatch: inMatch === "true", inMatch: inMatch === "true",
}; };
}); });
return { type: "PLAYER_LIST", players }; return { type: "PLAYER_LIST", players };
} }
break; break;
} }
case "TOURNAMENT": { case "TOURNAMENT": {
switch (parts[1]) { switch (parts[1]) {
case "START": case "START":
return { type: "TOURNAMENT_START", tournamentType: parts[2] }; return { type: "TOURNAMENT_START", tournamentType: parts[2] };
case "CANCEL": case "CANCEL":
return { type: "TOURNAMENT_CANCEL" }; return { type: "TOURNAMENT_CANCEL" };
case "SCORES": { case "SCORES": {
const data = parts[2] ?? ""; const data = parts[2] ?? "";
if (!data) return { type: "TOURNAMENT_SCORES", scores: [] }; if (!data) return { type: "TOURNAMENT_SCORES", scores: [] };
const scores: ScoreEntry[] = data.split("|").map((s) => { const scores: ScoreEntry[] = data.split("|").map((s) => {
const lastComma = s.lastIndexOf(","); const lastComma = s.lastIndexOf(",");
return { return {
player: s.substring(0, lastComma), player: s.substring(0, lastComma),
score: parseInt(s.substring(lastComma + 1)), score: parseInt(s.substring(lastComma + 1)),
}; };
}); });
return { type: "TOURNAMENT_SCORES", scores }; return { type: "TOURNAMENT_SCORES", scores };
} }
case "END": case "END":
return { type: "TOURNAMENT_END" }; return { type: "TOURNAMENT_END" };
} }
break; break;
} }
case "ADMIN": case "ADMIN":
if (parts[1] === "AUTH" && parts[2] === "ACK") if (parts[1] === "AUTH" && parts[2] === "ACK")
return { type: "ADMIN_AUTH_ACK" }; return { type: "ADMIN_AUTH_ACK" };
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[2] ?? "" };
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] };
break; break;
case "ERROR": case "ERROR":
return { type: "ERROR", message: raw }; return { type: "ERROR", message: raw };
} }
return { type: "UNKNOWN", raw }; return { type: "UNKNOWN", raw };
} }
// ─── Command builders ──────────────────────────────────────────────────────── // ─── Command builders ────────────────────────────────────────────────────────
export const cmd = { export const cmd = {
connect: (username: string) => `CONNECT:${username}`, connect: (username: string) => `CONNECT:${username}`,
reconnect: (username: string) => `RECONNECT:${username}`, reconnect: (username: string) => `RECONNECT:${username}`,
disconnect: () => "DISCONNECT", disconnect: () => "DISCONNECT",
observe: () => "OBSERVE", observe: () => "OBSERVE",
ready: () => "READY", ready: () => "READY",
play: (column: number) => `PLAY:${column}`, play: (column: number) => `PLAY:${column}`,
playerList: () => "PLAYER:LIST", playerList: () => "PLAYER:LIST",
gameList: () => "GAME:LIST", gameList: () => "GAME:LIST",
gameWatch: (matchId: number) => `GAME:WATCH:${matchId}`, gameWatch: (matchId: number) => `GAME:WATCH:${matchId}`,
gameTerminate: (matchId: number) => `GAME:TERMINATE:${matchId}`, gameTerminate: (matchId: number) => `GAME:TERMINATE:${matchId}`,
gameAward: (matchId: number, winner: string) => gameAward: (matchId: number, winner: string) =>
`GAME:AWARD:${matchId}:${winner}`, `GAME:AWARD:${matchId}:${winner}`,
adminAuth: (password: string) => `ADMIN:AUTH:${password}`, adminAuth: (password: string) => `ADMIN:AUTH:${password}`,
adminKick: (username: string) => `ADMIN:KICK:${username}`, adminKick: (username: string) => `ADMIN:KICK:${username}`,
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" | "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}`,
reservationDelete: (p1: string, p2: string) => reservationDelete: (p1: string, p2: string) =>
`RESERVATION:DELETE:${p1},${p2}`, `RESERVATION:DELETE:${p1},${p2}`,
reservationGet: () => "RESERVATION:GET", reservationGet: () => "RESERVATION:GET",
}; };
// ─── Board helpers ──────────────────────────────────────────────────────────── // ─── Board helpers ────────────────────────────────────────────────────────────
@@ -266,39 +266,39 @@ export type CellColor = 0 | 1 | 2;
export type BoardState = CellColor[][]; // board[col][row], 7 cols × 6 rows export type BoardState = CellColor[][]; // board[col][row], 7 cols × 6 rows
export function createEmptyBoard(): BoardState { export function createEmptyBoard(): BoardState {
return Array.from({ length: 7 }, () => Array(6).fill(0)) as BoardState; return Array.from({ length: 7 }, () => Array(6).fill(0)) as BoardState;
} }
/** Place a token and return the new board plus the row it landed in (-1 if column full). */ /** Place a token and return the new board plus the row it landed in (-1 if column full). */
export function placeToken( export function placeToken(
board: BoardState, board: BoardState,
color: 1 | 2, color: 1 | 2,
column: number, column: number,
): { board: BoardState; row: number } { ): { board: BoardState; row: number } {
const newBoard = board.map((col) => [...col]) as BoardState; const newBoard = board.map((col) => [...col]) as BoardState;
let placedRow = -1; let placedRow = -1;
for (let row = 0; row < 6; row++) { for (let row = 0; row < 6; row++) {
if (newBoard[column][row] === 0) { if (newBoard[column][row] === 0) {
newBoard[column][row] = color; newBoard[column][row] = color;
placedRow = row; placedRow = row;
break; break;
} }
} }
return { board: newBoard, row: placedRow }; return { board: newBoard, row: placedRow };
} }
/** Replay a move list onto an empty board. */ /** Replay a move list onto an empty board. */
export function replayMoves( export function replayMoves(
moves: MoveEntry[], moves: MoveEntry[],
player1: string, player1: string,
): { board: BoardState; lastMove: { column: number; row: number } | null } { ): { board: BoardState; lastMove: { column: number; row: number } | null } {
let board = createEmptyBoard(); let board = createEmptyBoard();
let lastMove: { column: number; row: number } | null = null; let lastMove: { column: number; row: number } | null = null;
for (const move of moves) { for (const move of moves) {
const color: 1 | 2 = move.username === player1 ? 1 : 2; const color: 1 | 2 = move.username === player1 ? 1 : 2;
const result = placeToken(board, color, move.column); const result = placeToken(board, color, move.column);
board = result.board; board = result.board;
lastMove = { column: move.column, row: result.row }; lastMove = { column: move.column, row: result.row };
} }
return { board, lastMove }; return { board, lastMove };
} }

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

@@ -20,6 +20,7 @@
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "15.2.4", "eslint-config-next": "15.2.4",
"postcss": "^8", "postcss": "^8",
"prettier": "^3.8.1",
"tailwindcss": "^4", "tailwindcss": "^4",
"typescript": "^5" "typescript": "^5"
} }
@@ -4962,6 +4963,22 @@
"node": ">= 0.8.0" "node": ">= 0.8.0"
} }
}, },
"node_modules/prettier": {
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
"integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
"dev": true,
"license": "MIT",
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prop-types": { "node_modules/prop-types": {
"version": "15.8.1", "version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

11
connect4-ui/package.json
View File

@@ -6,7 +6,9 @@
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "next lint" "lint": "next lint",
"format": "prettier --write .",
"format:check": "prettier --check ."
}, },
"dependencies": { "dependencies": {
"next": "15.2.4", "next": "15.2.4",
@@ -14,14 +16,15 @@
"react-dom": "^19.0.0" "react-dom": "^19.0.0"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "15.2.4", "eslint-config-next": "15.2.4",
"typescript": "^5", "postcss": "^8",
"prettier": "^3.8.1",
"tailwindcss": "^4", "tailwindcss": "^4",
"@tailwindcss/postcss": "^4", "typescript": "^5"
"postcss": "^8"
} }
} }

21
connect4-ui/tsconfig.json
View File

@@ -1,10 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"lib": [ "lib": ["dom", "dom.iterable", "esnext"],
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"strict": true, "strict": true,
@@ -22,19 +18,10 @@
} }
], ],
"paths": { "paths": {
"@/*": [ "@/*": ["./*"]
"./*"
]
}, },
"target": "ES2017" "target": "ES2017"
}, },
"include": [ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"next-env.d.ts", "exclude": ["node_modules"]
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"
]
} }