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

everything

Browse Source
This commit is contained in:
Joshua Higgins
2026-03-16 23:47:20 -04:00
Unverified
parent c3d38091ce
commit f73fc4ec68
8 changed files with 1679 additions and 1688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import Nav from "@/components/Nav"; import Nav from "@/components/Nav";
import { ConnectionProvider } from "@/lib/connection";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Connect4 Moderator", title: "Connect4 Moderator",
@@ -15,8 +16,10 @@ export default function RootLayout({
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>
<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>
</body> </body>
</html> </html>
); );

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

@@ -1,83 +1,84 @@
import Link from "next/link"; "use client";
const cards = [ import { FormEvent, useEffect, useState } from "react";
{ import { useRouter } from "next/navigation";
href: "/spectate", import { DEFAULT_WS_URL } from "@/lib/protocol";
icon: "👁", import { useConnection } from "@/lib/connection";
title: "Spectate Matches",
desc: "Watch live Connect4 games in real time. See every move as it happens on an interactive board.",
color: "border-blue-600 hover:border-blue-400",
badge: "Observer",
},
{
href: "/tournament",
icon: "🏆",
title: "Tournament View",
desc: "Track tournament standings, scores, and active rounds. Stay updated with live leaderboards.",
color: "border-purple-600 hover:border-purple-400",
badge: "Live Stats",
},
{
href: "/play",
icon: "🎮",
title: "Play as Human",
desc: "Join the server as a player. Connect with a username, ready up, and play Connect4 live.",
color: "border-green-600 hover:border-green-400",
badge: "Interactive",
},
];
export default function Home() { export default function Home() {
const router = useRouter();
const {
connect,
role,
status,
wsUrl: connectedWsUrl,
shouldRedirectToConnect,
clearRedirectFlag,
} = useConnection();
const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
useEffect(() => {
if (shouldRedirectToConnect) {
clearRedirectFlag();
}
}, [shouldRedirectToConnect, clearRedirectFlag]);
const onSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
connect({ role: "observer", wsUrl });
router.push("/spectate");
};
return ( return (
<div className="flex flex-col items-center gap-10 py-12"> <div className="max-w-3xl mx-auto py-10">
<div className="text-center"> <div className="bg-gray-900 border border-gray-700 rounded-2xl p-6 md:p-8 flex flex-col gap-6">
<h1 className="text-4xl font-bold text-white mb-3"> <div>
Connect4 Moderator <h1 className="text-3xl font-bold text-white">
Connect to Moderator Server
</h1> </h1>
<p className="text-gray-400 text-lg max-w-xl"> <p className="text-sm text-gray-400 mt-2">
Student AI tournament platform — watch games, track standings, or play Connect as an observer to watch live matches and tournaments.
yourself.
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl"> {shouldRedirectToConnect && (
{cards.map(({ href, icon, title, desc, color, badge }) => ( <div className="rounded-lg border border-red-700 bg-red-950/40 px-4 py-3 text-sm text-red-200">
<Link Connection lost. Please reconnect to continue.
key={href}
href={href}
className={`bg-gray-900 border-2 ${color} rounded-xl p-6 flex flex-col gap-3 transition-all hover:bg-gray-800 hover:shadow-xl group`}
>
<div className="flex items-center justify-between">
<span className="text-4xl">{icon}</span>
<span className="text-xs font-mono bg-gray-800 text-gray-400 px-2 py-1 rounded-full group-hover:bg-gray-700">
{badge}
</span>
</div> </div>
<h2 className="text-xl font-semibold text-white">{title}</h2> )}
<p className="text-gray-400 text-sm leading-relaxed">{desc}</p>
</Link> {status === "connected" && role && (
))} <div className="rounded-lg border border-green-700 bg-green-950/30 px-4 py-3 text-sm text-green-200">
Connected to {connectedWsUrl} as observer.
</div>
)}
<form className="flex flex-col gap-4" onSubmit={onSubmit}>
<div>
<label className="text-xs text-gray-400 uppercase tracking-wider mb-1 block">
Server URL
</label>
<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"
value={wsUrl}
onChange={(e) => setWsUrl(e.target.value)}
placeholder="wss://..."
/>
</div> </div>
<div className="bg-gray-900 border border-gray-700 rounded-xl p-6 max-w-2xl w-full"> <div className="flex flex-wrap gap-2 pt-2">
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3"> <button
WebSocket Protocol Reference type="submit"
</h3> className="px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition-colors"
<div className="grid grid-cols-2 gap-2 text-xs font-mono"> >
{[ {status === "connecting" || status === "reconnecting"
["CONNECT:<name>", "Register as player"], ? "Connecting..."
["READY", "Signal ready to play"], : "Connect to Server"}
["PLAY:<col>", "Drop piece in column 0–6"], </button>
["GAME:LIST", "List active matches"],
["GAME:WATCH:<id>", "Watch a specific match"],
["PLAYER:LIST", "List connected players"],
].map(([cmd, desc]) => (
<div key={cmd} className="flex gap-2">
<span className="text-blue-400">{cmd}</span>
<span className="text-gray-500">→ {desc}</span>
</div>
))}
</div> </div>
</form>
</div> </div>
</div> </div>
); );

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

@@ -1,57 +1,59 @@
"use client"; "use client";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
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,
parseMessage,
placeToken, placeToken,
} from "@/lib/protocol"; } from "@/lib/protocol";
import { useConnection } from "@/lib/connection";
type ConnStatus = "idle" | "connecting" | "connected" | "disconnected"; type GamePhase = "idle" | "connected" | "ready" | "playing" | "game-over";
type GamePhase =
| "idle" // not connected or connected but no game
| "connected" // connected, awaiting ready
| "ready" // sent READY, waiting for match
| "playing" // in a match
| "game-over"; // match finished
type GameResult = "win" | "loss" | "draw" | "terminated"; type GameResult = "win" | "loss" | "draw" | "terminated";
const DEFAULT_URL = "wss://connect4.abunchofknowitalls.com";
export default function PlayPage() { export default function PlayPage() {
const [wsUrl, setWsUrl] = useState(DEFAULT_URL); const router = useRouter();
const [username, setUsername] = useState(""); const {
const [connStatus, setConnStatus] = useState<ConnStatus>("idle"); role,
const [gamePhase, setGamePhase] = useState<GamePhase>("idle"); username,
status,
send,
subscribe,
disconnect,
reconnectAttempts,
shouldRedirectToConnect,
clearRedirectFlag,
} = useConnection();
const [myColor, setMyColor] = useState<1 | 2 | null>(null); // 1=red, 2=yellow const [gamePhase, setGamePhase] = useState<GamePhase>("idle");
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<{ column: number; row: number } | null>(null); const [lastMove, setLastMove] = useState<{
column: number;
row: number;
} | 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 [waitingForNextRound, setWaitingForNextRound] = useState(false);
const wsRef = useRef<WebSocket | null>(null);
const myColorRef = useRef<1 | 2 | null>(null); const myColorRef = useRef<1 | 2 | null>(null);
const isMyTurnRef = useRef(false); const isMyTurnRef = useRef(false);
const addStatus = (msg: string) => const addStatus = useCallback(
(msg: string) =>
setStatusMessages((prev) => [ setStatusMessages((prev) => [
`[${new Date().toLocaleTimeString()}] ${msg}`, `[${new Date().toLocaleTimeString()}] ${msg}`,
...prev.slice(0, 29), ...prev.slice(0, 29),
]); ]),
[],
const send = useCallback((msg: string) => { );
if (wsRef.current?.readyState === WebSocket.OPEN) wsRef.current.send(msg);
}, []);
const resetGame = useCallback(() => { const resetGame = useCallback(() => {
setBoard(createEmptyBoard()); setBoard(createEmptyBoard());
@@ -64,34 +66,38 @@ export default function PlayPage() {
setGameResult(null); setGameResult(null);
}, []); }, []);
const handleColumnClick = useCallback( useEffect(() => {
(col: number) => { if (status === "disconnected" && shouldRedirectToConnect) {
if (!isMyTurnRef.current || gamePhase !== "playing") return; clearRedirectFlag();
// Optimistically place the piece; server validates and replies router.replace("/");
const color = myColorRef.current!; }
setBoard((prev) => {
const { board: next, row } = placeToken(prev, color, col);
if (row === -1) return prev; // column full, ignore
setLastMove({ column: col, row });
return next;
});
setIsMyTurn(false);
isMyTurnRef.current = false;
setMoveCount((n) => n + 1);
send(cmd.play(col));
addStatus(`You played column ${col}`);
},
[gamePhase, send]
);
const handleMessage = useCallback( if (role !== "player" && status !== "idle") {
(raw: string) => { router.replace("/spectate");
const msg: ParsedMessage = parseMessage(raw); return;
}
if (status === "connected" && gamePhase === "idle") {
setGamePhase("connected");
}
}, [
role,
status,
router,
gamePhase,
shouldRedirectToConnect,
clearRedirectFlag,
]);
useEffect(() => {
const unsubscribe = subscribe((msg: ParsedMessage) => {
switch (msg.type) { switch (msg.type) {
case "CONNECT_ACK": case "CONNECT_ACK":
setConnStatus("connected"); case "RECONNECT_ACK":
setGamePhase("connected"); setGamePhase((prev) => (prev === "idle" ? "connected" : prev));
addStatus(`✅ Connected as "${username}"`); addStatus("Connected to server");
break; break;
case "ERROR": case "ERROR":
@@ -100,7 +106,7 @@ export default function PlayPage() {
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": {
@@ -109,14 +115,13 @@ export default function PlayPage() {
setMyColor(color); setMyColor(color);
myColorRef.current = color; myColorRef.current = color;
setGamePhase("playing"); setGamePhase("playing");
setWaitingForNextRound(false);
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 first move" : "🟡 You are Yellow - wait for opponent's move",
); );
break; break;
} }
@@ -124,14 +129,18 @@ export default function PlayPage() {
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(prev, opponentColor, msg.column); const { board: next, row } = placeToken(
prev,
opponentColor,
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} — your turn!`); addStatus(`Opponent played column ${msg.column}`);
break; break;
} }
@@ -156,7 +165,7 @@ export default function PlayPage() {
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":
@@ -173,19 +182,15 @@ export default function PlayPage() {
break; break;
case "TOURNAMENT_END": case "TOURNAMENT_END":
addStatus("Round over — sending Ready for next round…");
setWaitingForNextRound(false);
setGamePhase("connected"); setGamePhase("connected");
resetGame(); resetGame();
// Auto-ready for next round (mirror the gameloop.py behavior) send(cmd.ready());
setTimeout(() => send(cmd.ready()), 500);
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);
setWaitingForNextRound(false);
setGamePhase("connected"); setGamePhase("connected");
resetGame(); resetGame();
addStatus("Tournament cancelled"); addStatus("Tournament cancelled");
@@ -194,119 +199,85 @@ export default function PlayPage() {
default: default:
break; break;
} }
});
return unsubscribe;
}, [addStatus, resetGame, send, subscribe]);
const handleColumnClick = useCallback(
(col: number) => {
if (!isMyTurnRef.current || gamePhase !== "playing") return;
const color = myColorRef.current;
if (!color) return;
setBoard((prev) => {
const { board: next, row } = placeToken(prev, color, col);
if (row === -1) return prev;
setLastMove({ column: col, row });
return next;
});
setIsMyTurn(false);
isMyTurnRef.current = false;
setMoveCount((n) => n + 1);
send(cmd.play(col));
addStatus(`You played column ${col}`);
}, },
[username, resetGame, send] [addStatus, gamePhase, send],
); );
const connect = useCallback(() => {
if (!username.trim()) {
addStatus("⚠ Please enter a username first");
return;
}
if (wsRef.current) wsRef.current.close();
setConnStatus("connecting");
setGamePhase("idle");
resetGame();
setStatusMessages([]);
setTournamentMode(false);
setWaitingForNextRound(false);
const ws = new WebSocket(wsUrl);
wsRef.current = ws;
ws.onopen = () => ws.send(cmd.connect(username.trim()));
ws.onmessage = (e) => handleMessage(e.data as string);
ws.onclose = () => {
setConnStatus("disconnected");
setGamePhase("idle");
addStatus("Disconnected from server");
};
ws.onerror = () => addStatus("WebSocket error");
}, [username, wsUrl, handleMessage, resetGame]);
const disconnect = useCallback(() => {
send(cmd.disconnect());
setTimeout(() => wsRef.current?.close(), 200);
}, [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...");
}, [send]); }, [addStatus, send]);
useEffect(() => () => wsRef.current?.close(), []); const myColorLabel =
myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null;
// Derived display values const opponentColor: 1 | 2 | null =
const myColorLabel = myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null; myColor === 1 ? 2 : myColor === 2 ? 1 : null;
const opponentColor: 1 | 2 | null = myColor === 1 ? 2 : myColor === 2 ? 1 : null;
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
{/* Header */}
<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">
Connect as a player and compete in matches 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" && (
<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 #
{reconnectAttempts}...
</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">
{/* Left: controls + status */}
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{/* Connection card */}
<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">
Connection Session
</h2> </h2>
<div> <div className="text-xs text-gray-400">
<label className="text-xs text-gray-400 mb-1 block">Server URL</label> Status: <span className="text-gray-200">{status}</span>
<input </div>
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" <div className="text-xs text-gray-400">
value={wsUrl} User: <span className="text-gray-200">{username}</span>
onChange={(e) => setWsUrl(e.target.value)}
placeholder="wss://..."
disabled={connStatus === "connected" || connStatus === "connecting"}
/>
</div> </div>
<div>
<label className="text-xs text-gray-400 mb-1 block">Username</label>
<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"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Enter your username"
disabled={connStatus === "connected" || connStatus === "connecting"}
onKeyDown={(e) => e.key === "Enter" && connStatus === "idle" && connect()}
/>
</div>
{connStatus !== "connected" ? (
<button
onClick={connect}
disabled={connStatus === "connecting" || !username.trim()}
className="w-full py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm font-medium rounded-lg transition-colors"
>
{connStatus === "connecting" ? "Connecting…" : "Connect"}
</button>
) : (
<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>
{/* Game controls */}
{connStatus === "connected" && (
<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
@@ -319,7 +290,7 @@ export default function PlayPage() {
</div> </div>
)} )}
{gamePhase === "connected" && !tournamentMode && ( {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"
@@ -330,24 +301,20 @@ export default function PlayPage() {
{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") && myColor && ( {(gamePhase === "playing" || gamePhase === "game-over") &&
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 ${ className={`w-4 h-4 rounded-full ${myColor === 1 ? "bg-red-500" : "bg-yellow-400"}`}
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>
{myColor === 1 && (
<span className="text-xs text-gray-500">(1st)</span>
)}
</div> </div>
{gamePhase === "playing" && ( {gamePhase === "playing" && (
@@ -358,7 +325,9 @@ export default function PlayPage() {
: "bg-gray-800 text-gray-400" : "bg-gray-800 text-gray-400"
}`} }`}
> >
{isMyTurn ? "⬆ Your turn — click a column!" : "⏳ Waiting for opponent…"} {isMyTurn
? "⬆ Your turn - click a column"
: "⏳ Waiting for opponent..."}
</div> </div>
)} )}
@@ -368,28 +337,7 @@ export default function PlayPage() {
</div> </div>
)} )}
{gamePhase === "game-over" && gameResult && ( {gamePhase === "game-over" && gameResult && !tournamentMode && (
<div className="flex flex-col gap-2">
<div
className={`text-center py-3 rounded-lg font-bold text-base border ${
gameResult === "win"
? "bg-green-900/50 border-green-600 text-green-300"
: gameResult === "loss"
? "bg-red-900/50 border-red-600 text-red-300"
: gameResult === "draw"
? "bg-blue-900/50 border-blue-600 text-blue-300"
: "bg-gray-800 border-gray-600 text-gray-300"
}`}
>
{gameResult === "win"
? "🏆 You Won!"
: gameResult === "loss"
? "💔 You Lost"
: gameResult === "draw"
? "🤝 Draw"
: "⛔ Terminated"}
</div>
{!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"
@@ -398,18 +346,14 @@ export default function PlayPage() {
</button> </button>
)} )}
</div> </div>
)}
</div>
)}
{/* Status log */}
<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">Connect to start</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">
@@ -419,51 +363,32 @@ export default function PlayPage() {
)} )}
</div> </div>
</div> </div>
{/* How to play */}
<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">
How to Play
</h2>
<ol className="flex flex-col gap-1.5 text-xs text-gray-400">
<li className="flex gap-2">
<span className="text-blue-400 font-bold shrink-0">1.</span>
Enter the server URL and your username, then click <strong className="text-gray-300">Connect</strong>
</li>
<li className="flex gap-2">
<span className="text-blue-400 font-bold shrink-0">2.</span>
Click <strong className="text-gray-300">Ready to Play</strong> to queue for a match
</li>
<li className="flex gap-2">
<span className="text-blue-400 font-bold shrink-0">3.</span>
When the game starts, click a column number to drop your piece
</li>
<li className="flex gap-2">
<span className="text-blue-400 font-bold shrink-0">4.</span>
Connect 4 in a row (horizontal, vertical, or diagonal) to win!
</li>
</ol>
</div>
</div> </div>
{/* Right: board */}
<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">
{connStatus !== "connected" || gamePhase === "idle" ? ( {gamePhase === "idle" ? (
<div className="text-gray-500 text-center py-10">
Connect from the connection page to start.
</div>
) : 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">
<span className="text-6xl">🎮</span> <div className="text-5xl">✋</div>
<p className="text-gray-400 text-lg font-medium">Ready to play?</p> <p className="text-blue-300 text-lg font-medium">
<p className="text-gray-600 text-sm max-w-xs"> Ready up to start
Enter your username and connect to the server to start a match </p>
<p className="text-gray-500 text-sm max-w-sm">
Click the{" "}
<span className="text-green-300 font-semibold">
Ready to Play
</span>{" "}
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 className="text-gray-500 text-sm">
The game will start automatically when a match is found
</p> </p>
</div> </div>
) : ( ) : (
@@ -485,7 +410,7 @@ export default function PlayPage() {
: gameResult === "loss" : gameResult === "loss"
? "💔 You Lost" ? "💔 You Lost"
: gameResult === "draw" : gameResult === "draw"
? "🤝 Draw!" ? "🤝 Draw"
: "⛔ Match Terminated"} : "⛔ Match Terminated"}
</div> </div>
)} )}
@@ -503,22 +428,12 @@ export default function PlayPage() {
: null : null
} }
onColumnClick={ onColumnClick={
gamePhase === "playing" && isMyTurn ? handleColumnClick : undefined gamePhase === "playing" && isMyTurn
? handleColumnClick
: undefined
} }
disabled={gamePhase !== "playing" || !isMyTurn} disabled={gamePhase !== "playing" || !isMyTurn}
/> />
{gamePhase === "playing" && (
<p className="text-sm text-gray-400">
{isMyTurn ? (
<span className="text-green-400 font-semibold animate-pulse">
⬆ Click a column to drop your piece
</span>
) : (
<span className="text-gray-500">Waiting for opponent…</span>
)}
</p>
)}
</> </>
)} )}
</div> </div>
@@ -541,15 +456,22 @@ function PhaseIndicator({
</span> </span>
); );
} }
const config: Record<GamePhase, { label: string; cls: string }> = { const config: Record<GamePhase, { label: string; cls: string }> = {
idle: { label: "Not connected", 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: { label: "Waiting…", cls: "bg-yellow-900/60 text-yellow-300 animate-pulse" }, ready: {
label: "Waiting...",
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}`}>{label}</span> <span className={`px-3 py-1.5 rounded-full text-sm font-medium ${cls}`}>
{label}
</span>
); );
} }

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

@@ -1,116 +1,216 @@
"use client"; "use client";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import Board from "@/components/Board"; import Board from "@/components/Board";
import { import {
BoardState, BoardState,
GameEntry, GameEntry,
ParsedMessage, ParsedMessage,
PlayerEntry,
ScoreEntry,
cmd, cmd,
createEmptyBoard, createEmptyBoard,
parseMessage,
placeToken, placeToken,
replayMoves, replayMoves,
} from "@/lib/protocol"; } from "@/lib/protocol";
import { useConnection } from "@/lib/connection";
type ConnStatus = "idle" | "connecting" | "connected" | "disconnected"; interface LiveGame {
id: number;
interface WatchState { player1: string;
matchId: number; player2: string;
player1: string; // Red board: BoardState;
player2: string; // Yellow lastMove: { column: number; row: number } | null;
} currentTurnColor: 1 | 2;
result:
type GameResult =
| { kind: "win"; winner: string } | { kind: "win"; winner: string }
| { kind: "draw" } | { kind: "draw" }
| { kind: "terminated" }; | { kind: "terminated" }
| null;
const DEFAULT_URL = "wss://connect4.abunchofknowitalls.com"; }
export default function SpectatePage() { export default function SpectatePage() {
const [wsUrl, setWsUrl] = useState(DEFAULT_URL); const router = useRouter();
const [status, setStatus] = useState<ConnStatus>("idle"); const {
role,
status,
send,
subscribe,
disconnect,
shouldRedirectToConnect,
clearRedirectFlag,
} = useConnection();
const [tournamentActive, setTournamentActive] = useState(false);
const [tournamentType, setTournamentType] = useState<string | null>(null);
const [scores, setScores] = useState<ScoreEntry[]>([]);
const [players, setPlayers] = useState<PlayerEntry[]>([]);
const [gameList, setGameList] = useState<GameEntry[]>([]);
const [liveGames, setLiveGames] = useState<Map<number, LiveGame>>(new Map());
const [selectedGame, setSelectedGame] = useState<number | null>(null);
const [log, setLog] = useState<string[]>([]); const [log, setLog] = useState<string[]>([]);
const [gameList, setGameList] = useState<GameEntry[]>([]);
const [watching, setWatching] = useState<WatchState | null>(null);
const [board, setBoard] = useState<BoardState>(createEmptyBoard());
const [lastMove, setLastMove] = useState<{ column: number; row: number } | null>(null);
const [currentTurnColor, setCurrentTurnColor] = useState<1 | 2>(1);
const [moveCount, setMoveCount] = useState(0);
const [gameResult, setGameResult] = useState<GameResult | null>(null);
const wsRef = useRef<WebSocket | null>(null);
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null); const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
const watchingRef = useRef<WatchState | null>(null); const liveGamesRef = useRef<Map<number, LiveGame>>(new Map());
const addLog = (msg: string) => const addLog = useCallback(
setLog((prev) => [`[${new Date().toLocaleTimeString()}] ${msg}`, ...prev.slice(0, 49)]); (msg: string) =>
setLog((prev) => [
`[${new Date().toLocaleTimeString()}] ${msg}`,
...prev.slice(0, 79),
]),
[],
);
const send = useCallback((msg: string) => { const updateGame = useCallback((id: number, patch: Partial<LiveGame>) => {
if (wsRef.current?.readyState === WebSocket.OPEN) { setLiveGames((prev) => {
wsRef.current.send(msg); const next = new Map(prev);
} const existing = next.get(id) ?? {
id,
player1: "",
player2: "",
board: createEmptyBoard(),
lastMove: null,
currentTurnColor: 1 as const,
result: null,
};
next.set(id, { ...existing, ...patch });
liveGamesRef.current = next;
return next;
});
}, []); }, []);
const handleMessage = useCallback( useEffect(() => {
(raw: string) => { if (status === "disconnected" && shouldRedirectToConnect) {
const msg: ParsedMessage = parseMessage(raw); clearRedirectFlag();
router.replace("/");
} else if (status === "idle") {
router.replace("/");
}
if (role !== "observer" && status !== "idle") {
router.replace("/play");
return;
}
}, [role, status, shouldRedirectToConnect, clearRedirectFlag, router]);
useEffect(() => {
const unsubscribe = subscribe((msg: ParsedMessage) => {
switch (msg.type) { switch (msg.type) {
case "TOURNAMENT_START":
setTournamentActive(true);
setTournamentType(msg.tournamentType);
setScores([]);
addLog(`🏆 Tournament started: ${msg.tournamentType}`);
send(cmd.gameList());
send(cmd.playerList());
break;
case "TOURNAMENT_CANCEL":
setTournamentActive(false);
setTournamentType(null);
addLog("❌ Tournament cancelled");
break;
case "TOURNAMENT_SCORES":
setScores(msg.scores);
break;
case "TOURNAMENT_END":
addLog("Round ended");
send(cmd.gameList());
send(cmd.playerList());
break;
case "GAME_LIST": case "GAME_LIST":
setGameList(msg.games); setGameList(msg.games);
for (const g of msg.games) {
if (!liveGamesRef.current.has(g.id)) {
send(cmd.gameWatch(g.id));
}
}
break; break;
case "GAME_WATCH_ACK": { case "GAME_WATCH_ACK": {
const { board: replayed, lastMove: lm } = replayMoves(msg.moves, msg.player1); const { board, lastMove } = replayMoves(msg.moves, msg.player1);
const watchState: WatchState = { const moveCount = msg.moves.length;
matchId: msg.matchId, updateGame(msg.matchId, {
player1: msg.player1, player1: msg.player1,
player2: msg.player2, player2: msg.player2,
}; board,
setWatching(watchState); lastMove,
watchingRef.current = watchState; currentTurnColor: (moveCount % 2 === 0 ? 1 : 2) as 1 | 2,
setBoard(replayed); result: null,
setLastMove(lm); });
setMoveCount(msg.moves.length);
setCurrentTurnColor(msg.moves.length % 2 === 0 ? 1 : 2);
setGameResult(null);
addLog(`Watching match ${msg.matchId}: ${msg.player1} (🔴) vs ${msg.player2} (🟡)`);
if (msg.moves.length > 0)
addLog(`Replayed ${msg.moves.length} existing move(s)`);
break; break;
} }
case "GAME_MOVE": { case "GAME_MOVE": {
const w = watchingRef.current; const gamesSnapshot = liveGamesRef.current;
if (!w) break; for (const [id, game] of gamesSnapshot) {
const color: 1 | 2 = msg.username === w.player1 ? 1 : 2; if (
setBoard((prev) => { game.player1 === msg.username ||
const { board: next, row } = placeToken(prev, color, msg.column); game.player2 === msg.username
setLastMove({ column: msg.column, row }); ) {
return next; const color: 1 | 2 = msg.username === game.player1 ? 1 : 2;
const { board: next, row } = placeToken(
game.board,
color,
msg.column,
);
updateGame(id, {
board: next,
lastMove: { column: msg.column, row },
currentTurnColor: (color === 1 ? 2 : 1) as 1 | 2,
}); });
setMoveCount((n) => n + 1); break;
setCurrentTurnColor((c) => (c === 1 ? 2 : 1)); }
addLog(`${msg.username} played column ${msg.column}`); }
break; break;
} }
case "GAME_WIN": case "GAME_WIN": {
setGameResult({ kind: "win", winner: msg.winner }); const gamesSnapshot = liveGamesRef.current;
setCurrentTurnColor(1); // reset for (const [id, game] of gamesSnapshot) {
addLog(`🏆 ${msg.winner} wins!`); if (game.player1 === msg.winner || game.player2 === msg.winner) {
updateGame(id, { result: { kind: "win", winner: msg.winner } });
break; break;
}
}
setTimeout(() => {
send(cmd.gameList());
send(cmd.playerList());
}, 750);
break;
}
case "GAME_DRAW": case "GAME_DRAW":
setGameResult({ kind: "draw" }); if (selectedGame !== null) {
addLog("🤝 Draw!"); updateGame(selectedGame, { result: { kind: "draw" } });
}
break; break;
case "GAME_TERMINATED": case "GAME_TERMINATED":
setGameResult({ kind: "terminated" }); if (selectedGame !== null) {
addLog("⛔ Match terminated"); updateGame(selectedGame, { result: { kind: "terminated" } });
}
send(cmd.gameList());
break;
case "PLAYER_LIST":
setPlayers(msg.players);
break;
case "GET_DATA":
if (
msg.key === "TOURNAMENT_STATUS" &&
msg.value &&
msg.value !== "false"
) {
setTournamentActive(true);
setTournamentType(msg.value);
}
break; break;
case "ERROR": case "ERROR":
@@ -120,247 +220,266 @@ export default function SpectatePage() {
default: default:
break; break;
} }
}, });
[]
);
const connect = useCallback(() => { return unsubscribe;
if (wsRef.current) wsRef.current.close(); }, [addLog, selectedGame, send, subscribe, updateGame]);
setStatus("connecting");
setLog([]);
setGameList([]);
setWatching(null);
watchingRef.current = null;
setBoard(createEmptyBoard());
setLastMove(null);
setGameResult(null);
const ws = new WebSocket(wsUrl); useEffect(() => {
wsRef.current = ws; if (status !== "connected" || role !== "observer") {
if (pollRef.current) {
clearInterval(pollRef.current);
pollRef.current = null;
}
return;
}
ws.onopen = () => { send(cmd.getData("TOURNAMENT_STATUS"));
setStatus("connected"); send(cmd.gameList());
addLog("Connected as observer"); send(cmd.playerList());
ws.send(cmd.gameList());
};
ws.onmessage = (e) => handleMessage(e.data as string);
ws.onclose = () => {
setStatus("disconnected");
addLog("Disconnected");
if (pollRef.current) clearInterval(pollRef.current);
};
ws.onerror = () => addLog("WebSocket error");
// Poll game list every 4s
pollRef.current = setInterval(() => { pollRef.current = setInterval(() => {
if (ws.readyState === WebSocket.OPEN) ws.send(cmd.gameList()); send(cmd.gameList());
}, 4000); send(cmd.playerList());
}, [wsUrl, handleMessage]); }, 5000);
const disconnect = useCallback(() => { return () => {
if (pollRef.current) clearInterval(pollRef.current); if (pollRef.current) clearInterval(pollRef.current);
wsRef.current?.close(); };
}, []); }, [role, send, status]);
const watchGame = useCallback( const selectedGameData =
(id: number) => { selectedGame !== null ? liveGames.get(selectedGame) : null;
setBoard(createEmptyBoard());
setLastMove(null);
setGameResult(null);
setMoveCount(0);
setCurrentTurnColor(1);
send(cmd.gameWatch(id));
},
[send]
);
useEffect(() => () => {
if (pollRef.current) clearInterval(pollRef.current);
wsRef.current?.close();
}, []);
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">👁 Spectate Matches</h1> <h1 className="text-2xl font-bold text-white">
👁 Observer Dashboard
</h1>
<p className="text-gray-400 text-sm mt-1"> <p className="text-gray-400 text-sm mt-1">
Watch live Connect4 games in real time Unified spectate and tournament view
</p> </p>
</div> </div>
<StatusBadge status={status} />
</div>
{/* Connection bar */}
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-wrap gap-3 items-end">
<div className="flex-1 min-w-48">
<label className="text-xs text-gray-400 uppercase tracking-wider mb-1 block">
Server URL
</label>
<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"
value={wsUrl}
onChange={(e) => setWsUrl(e.target.value)}
placeholder="wss://..."
disabled={status === "connected" || status === "connecting"}
/>
</div>
{status !== "connected" ? (
<button
onClick={connect}
disabled={status === "connecting"}
className="px-5 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm font-medium rounded-lg transition-colors"
>
{status === "connecting" ? "Connecting…" : "Connect"}
</button>
) : (
<button <button
onClick={disconnect} onClick={disconnect}
className="px-5 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors" className="px-4 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="grid grid-cols-1 lg:grid-cols-3 gap-6"> {status !== "connected" && (
{/* Left: game list + log */} <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-4"> Waiting for observer connection...
{/* Game list */}
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<div className="flex items-center justify-between mb-3">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider">
Live Matches
</h2>
<span className="text-xs text-gray-500">
{gameList.length} game{gameList.length !== 1 ? "s" : ""}
</span>
</div> </div>
{status !== "connected" ? ( )}
<p className="text-gray-600 text-sm text-center py-4">
Connect to see matches {status === "connected" && (
</p> <div
) : gameList.length === 0 ? ( className={`rounded-xl p-4 border flex items-center gap-4 ${
<p className="text-gray-500 text-sm text-center py-4"> tournamentActive
No active matches ? "bg-purple-950/40 border-purple-600"
</p> : "bg-gray-900 border-gray-700"
) : (
<div className="flex flex-col gap-2">
{gameList.map((g) => (
<button
key={g.id}
onClick={() => watchGame(g.id)}
className={`w-full text-left px-3 py-2.5 rounded-lg border transition-colors text-sm ${
watching?.matchId === g.id
? "border-blue-500 bg-blue-950/50 text-blue-300"
: "border-gray-700 bg-gray-800 hover:border-gray-600 hover:bg-gray-750 text-gray-300"
}`} }`}
> >
<div className="font-mono text-xs text-gray-500 mb-0.5"> <div className="text-3xl">{tournamentActive ? "🏆" : "⏳"}</div>
#{g.id} <div>
<div className="font-semibold text-white">
{tournamentActive
? `Tournament Active - ${tournamentType ?? "Unknown Type"}`
: "No Active Tournament"}
</div> </div>
<div className="flex items-center gap-2"> <div className="text-sm text-gray-400">
<span className="text-red-400">{g.player1}</span> {gameList.length} match{gameList.length !== 1 ? "es" : ""} running
<span className="text-gray-600 text-xs">vs</span> · {players.filter((p) => p.inMatch).length}/{players.length}{" "}
<span className="text-yellow-400">{g.player2}</span> players in game
</div>
</div>
</div>
)}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="flex flex-col gap-4">
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
Leaderboard
</h2>
{scores.length === 0 ? (
<p className="text-gray-500 text-sm text-center py-4">
No scores yet
</p>
) : (
<div className="flex flex-col gap-1.5">
{scores.map((s, i) => (
<div
key={s.player}
className="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800"
>
<span className="text-sm font-bold w-6 text-gray-300">
{i + 1}.
</span>
<span className="text-white flex-1 font-medium text-sm">
{s.player}
</span>
<span className="text-blue-400 font-bold">{s.score}</span>
</div> </div>
</button>
))} ))}
</div> </div>
)} )}
</div> </div>
{/* Event log */}
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4"> <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3"> <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3 flex items-center justify-between">
<span>Players</span>
<span className="text-xs text-gray-500 font-normal">
{players.length} connected
</span>
</h2>
{players.length === 0 ? (
<p className="text-gray-500 text-sm text-center py-4">
No players connected
</p>
) : (
<div className="flex flex-col gap-1.5">
{players.map((p) => (
<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="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">
Event Log Event Log
</h2> </h2>
<div className="flex flex-col gap-1 max-h-48 overflow-y-auto"> <div className="flex flex-col gap-0.5 max-h-40 overflow-y-auto">
{log.length === 0 ? ( {log.slice(0, 20).map((entry, i) => (
<p className="text-gray-600 text-xs">No events yet</p>
) : (
log.map((entry, i) => (
<p key={i} className="text-xs text-gray-400 font-mono"> <p key={i} className="text-xs text-gray-400 font-mono">
{entry} {entry}
</p> </p>
)) ))}
{log.length === 0 && (
<p className="text-gray-600 text-xs">No events yet</p>
)} )}
</div> </div>
</div> </div>
</div> </div>
{/* Right: board */} <div className="lg:col-span-2 flex flex-col gap-4">
<div className="lg:col-span-2 bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center gap-4"> <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
{!watching ? ( <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
<div className="flex flex-col items-center justify-center gap-3 py-16 text-center"> Active Matches
<span className="text-5xl">👁</span> </h2>
<p className="text-gray-400"> {gameList.length === 0 ? (
{status === "connected" <p className="text-gray-500 text-sm text-center py-3">
? "Select a match from the list to start watching" No active matches
: "Connect to the server to see live matches"} </p>
) : (
<div className="flex flex-wrap gap-2">
{gameList.map((g) => {
const live = liveGames.get(g.id);
return (
<button
key={g.id}
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">
{!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> </p>
</div> </div>
) : ( ) : (
<> <>
{/* Game result banner */} {selectedGameData.result && (
{gameResult && (
<div <div
className={`w-full rounded-lg p-3 text-center font-semibold text-lg ${ className={`w-full rounded-lg p-3 text-center font-semibold ${
gameResult.kind === "win" selectedGameData.result.kind === "win"
? "bg-green-900/50 border border-green-600 text-green-300" ? "bg-green-900/50 border border-green-600 text-green-300"
: gameResult.kind === "draw" : selectedGameData.result.kind === "draw"
? "bg-blue-900/50 border border-blue-600 text-blue-300" ? "bg-blue-900/50 border border-blue-600 text-blue-300"
: "bg-red-900/50 border border-red-600 text-red-300" : "bg-red-900/50 border border-red-600 text-red-300"
}`} }`}
> >
{gameResult.kind === "win" {selectedGameData.result.kind === "win"
? `🏆 ${gameResult.winner} wins!` ? `🏆 ${selectedGameData.result.winner} wins!`
: gameResult.kind === "draw" : selectedGameData.result.kind === "draw"
? "🤝 Draw!" ? "🤝 Draw!"
: "⛔ Match Terminated"} : "⛔ Match Terminated"}
</div> </div>
)} )}
<Board <Board
board={board} board={selectedGameData.board}
lastMove={lastMove} lastMove={selectedGameData.lastMove}
player1={watching.player1} player1={selectedGameData.player1}
player2={watching.player2} player2={selectedGameData.player2}
currentTurnColor={gameResult ? null : currentTurnColor} currentTurnColor={
selectedGameData.result
? null
: selectedGameData.currentTurnColor
}
disabled disabled
/> />
<div className="text-xs text-gray-500 font-mono">
Match #{watching.matchId} · {moveCount} move
{moveCount !== 1 ? "s" : ""}
</div>
</> </>
)} )}
</div> </div>
</div> </div>
</div> </div>
); </div>
}
function StatusBadge({ status }: { status: ConnStatus }) {
const colors: Record<ConnStatus, string> = {
idle: "bg-gray-700 text-gray-400",
connecting: "bg-yellow-900/60 text-yellow-300 animate-pulse",
connected: "bg-green-900/60 text-green-300",
disconnected: "bg-red-900/60 text-red-300",
};
const labels: Record<ConnStatus, string> = {
idle: "Not connected",
connecting: "Connecting…",
connected: "Connected",
disconnected: "Disconnected",
};
return (
<span className={`px-3 py-1.5 rounded-full text-sm font-medium ${colors[status]}`}>
{labels[status]}
</span>
); );
} }

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

@@ -1,546 +1,5 @@
"use client"; import { redirect } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react"; export default function TournamentRedirectPage() {
import Board from "@/components/Board"; redirect("/spectate");
import {
BoardState,
GameEntry,
ParsedMessage,
PlayerEntry,
ScoreEntry,
cmd,
createEmptyBoard,
parseMessage,
placeToken,
replayMoves,
} from "@/lib/protocol";
type ConnStatus = "idle" | "connecting" | "connected" | "disconnected";
interface LiveGame {
id: number;
player1: string;
player2: string;
board: BoardState;
lastMove: { column: number; row: number } | null;
currentTurnColor: 1 | 2;
result: { kind: "win"; winner: string } | { kind: "draw" } | { kind: "terminated" } | null;
}
const DEFAULT_URL = "wss://connect4.abunchofknowitalls.com";
export default function TournamentPage() {
const [wsUrl, setWsUrl] = useState(DEFAULT_URL);
const [status, setStatus] = useState<ConnStatus>("idle");
const [tournamentActive, setTournamentActive] = useState(false);
const [tournamentType, setTournamentType] = useState<string | null>(null);
const [scores, setScores] = useState<ScoreEntry[]>([]);
const [players, setPlayers] = useState<PlayerEntry[]>([]);
const [gameList, setGameList] = useState<GameEntry[]>([]);
const [liveGames, setLiveGames] = useState<Map<number, LiveGame>>(new Map());
const [selectedGame, setSelectedGame] = useState<number | null>(null);
const [log, setLog] = useState<string[]>([]);
const wsRef = useRef<WebSocket | null>(null);
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
// keep a ref to liveGames for use inside the message handler closure
const liveGamesRef = useRef<Map<number, LiveGame>>(new Map());
const addLog = (msg: string) =>
setLog((prev) => [`[${new Date().toLocaleTimeString()}] ${msg}`, ...prev.slice(0, 79)]);
const send = useCallback((msg: string) => {
if (wsRef.current?.readyState === WebSocket.OPEN) wsRef.current.send(msg);
}, []);
/** Merge a partial update into a live game, creating it if new. */
const updateGame = useCallback((id: number, patch: Partial<LiveGame>) => {
setLiveGames((prev) => {
const next = new Map(prev);
const existing = next.get(id) ?? {
id,
player1: "",
player2: "",
board: createEmptyBoard(),
lastMove: null,
currentTurnColor: 1 as const,
result: null,
};
next.set(id, { ...existing, ...patch });
liveGamesRef.current = next;
return next;
});
}, []);
const handleMessage = useCallback(
(raw: string) => {
const msg: ParsedMessage = parseMessage(raw);
switch (msg.type) {
case "TOURNAMENT_START":
setTournamentActive(true);
setTournamentType(msg.tournamentType);
setScores([]);
addLog(`🏆 Tournament started: ${msg.tournamentType}`);
send(cmd.gameList());
send(cmd.playerList());
break;
case "TOURNAMENT_CANCEL":
setTournamentActive(false);
setTournamentType(null);
addLog("❌ Tournament cancelled");
break;
case "TOURNAMENT_SCORES":
setScores(msg.scores);
addLog(
`📊 Scores updated: ${msg.scores
.map((s) => `${s.player} ${s.score}`)
.join(", ")}`
);
break;
case "TOURNAMENT_END":
addLog("Round ended");
send(cmd.gameList());
send(cmd.playerList());
break;
case "GAME_LIST": {
setGameList(msg.games);
// Watch any new games we don't have yet
for (const g of msg.games) {
if (!liveGamesRef.current.has(g.id)) {
send(cmd.gameWatch(g.id));
}
}
break;
}
case "GAME_WATCH_ACK": {
const { board, lastMove } = replayMoves(msg.moves, msg.player1);
const moveCount = msg.moves.length;
updateGame(msg.matchId, {
player1: msg.player1,
player2: msg.player2,
board,
lastMove,
currentTurnColor: (moveCount % 2 === 0 ? 1 : 2) as 1 | 2,
result: null,
});
addLog(`Watching match ${msg.matchId}: ${msg.player1} vs ${msg.player2}`);
break;
}
case "GAME_MOVE": {
// find the game this player is in
const gamesSnapshot = liveGamesRef.current;
for (const [id, game] of gamesSnapshot) {
if (game.player1 === msg.username || game.player2 === msg.username) {
const color: 1 | 2 = msg.username === game.player1 ? 1 : 2;
const { board: next, row } = placeToken(game.board, color, msg.column);
updateGame(id, {
board: next,
lastMove: { column: msg.column, row },
currentTurnColor: (color === 1 ? 2 : 1) as 1 | 2,
});
addLog(`[#${id}] ${msg.username} played column ${msg.column}`);
break;
}
}
break;
}
case "GAME_WIN": {
const gamesSnapshot = liveGamesRef.current;
for (const [id, game] of gamesSnapshot) {
if (game.player1 === msg.winner || game.player2 === msg.winner) {
updateGame(id, { result: { kind: "win", winner: msg.winner } });
addLog(`🏆 [#${id}] ${msg.winner} wins!`);
break;
}
}
// refresh lists after match ends
setTimeout(() => {
send(cmd.gameList());
send(cmd.playerList());
}, 1000);
break;
}
case "GAME_DRAW": {
// mark the selected game as draw (we can't easily identify which)
if (selectedGame !== null) {
updateGame(selectedGame, { result: { kind: "draw" } });
}
addLog("🤝 Draw");
break;
}
case "GAME_TERMINATED": {
if (selectedGame !== null) {
updateGame(selectedGame, { result: { kind: "terminated" } });
}
addLog("⛔ Match terminated");
send(cmd.gameList());
break;
}
case "PLAYER_LIST":
setPlayers(msg.players);
break;
case "GET_DATA":
if (msg.key === "TOURNAMENT_STATUS") {
if (msg.value && msg.value !== "false") {
setTournamentActive(true);
setTournamentType(msg.value);
}
}
break;
case "ERROR":
addLog(`Error: ${msg.message}`);
break;
default:
break;
}
},
[send, updateGame, selectedGame]
);
const connect = useCallback(() => {
if (wsRef.current) wsRef.current.close();
setStatus("connecting");
setLog([]);
setLiveGames(new Map());
liveGamesRef.current = new Map();
setSelectedGame(null);
setScores([]);
setPlayers([]);
setGameList([]);
setTournamentActive(false);
setTournamentType(null);
const ws = new WebSocket(wsUrl);
wsRef.current = ws;
ws.onopen = () => {
setStatus("connected");
addLog("Connected as observer");
ws.send(cmd.getData("TOURNAMENT_STATUS"));
ws.send(cmd.gameList());
ws.send(cmd.playerList());
};
ws.onmessage = (e) => handleMessage(e.data as string);
ws.onclose = () => {
setStatus("disconnected");
addLog("Disconnected");
if (pollRef.current) clearInterval(pollRef.current);
};
ws.onerror = () => addLog("WebSocket error");
pollRef.current = setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(cmd.gameList());
ws.send(cmd.playerList());
}
}, 5000);
}, [wsUrl, handleMessage]);
const disconnect = useCallback(() => {
if (pollRef.current) clearInterval(pollRef.current);
wsRef.current?.close();
}, []);
useEffect(() => () => {
if (pollRef.current) clearInterval(pollRef.current);
wsRef.current?.close();
}, []);
const selectedGameData = selectedGame !== null ? liveGames.get(selectedGame) : null;
return (
<div className="flex flex-col gap-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-white">🏆 Tournament View</h1>
<p className="text-gray-400 text-sm mt-1">
Live standings, active matches, and player status
</p>
</div>
<StatusBadge status={status} />
</div>
{/* Connection bar */}
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-wrap gap-3 items-end">
<div className="flex-1 min-w-48">
<label className="text-xs text-gray-400 uppercase tracking-wider mb-1 block">
Server URL
</label>
<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"
value={wsUrl}
onChange={(e) => setWsUrl(e.target.value)}
disabled={status === "connected" || status === "connecting"}
/>
</div>
{status !== "connected" ? (
<button
onClick={connect}
disabled={status === "connecting"}
className="px-5 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm font-medium rounded-lg transition-colors"
>
{status === "connecting" ? "Connecting…" : "Connect"}
</button>
) : (
<button
onClick={disconnect}
className="px-5 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
>
Disconnect
</button>
)}
</div>
{/* Tournament banner */}
{status === "connected" && (
<div
className={`rounded-xl p-4 border flex items-center gap-4 ${
tournamentActive
? "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">
{tournamentActive
? `${gameList.length} match${gameList.length !== 1 ? "es" : ""} running · ${players.filter((p) => p.inMatch).length}/${players.length} players in game`
: "Waiting for admin to start a tournament"}
</div>
</div>
</div>
)}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Left column */}
<div className="flex flex-col gap-4">
{/* Leaderboard */}
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
Leaderboard
</h2>
{scores.length === 0 ? (
<p className="text-gray-500 text-sm text-center py-4">
{status === "connected" ? "No scores yet" : "Connect to see scores"}
</p>
) : (
<div className="flex flex-col gap-1.5">
{scores.map((s, i) => (
<div
key={s.player}
className="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800"
>
<span
className={`text-sm font-bold w-6 ${
i === 0
? "text-yellow-400"
: i === 1
? "text-gray-300"
: i === 2
? "text-amber-700"
: "text-gray-600"
}`}
>
{i === 0 ? "🥇" : i === 1 ? "🥈" : i === 2 ? "🥉" : `${i + 1}.`}
</span>
<span className="text-white flex-1 font-medium text-sm">{s.player}</span>
<span className="text-blue-400 font-bold">{s.score}</span>
</div>
))}
</div>
)}
</div>
{/* Player list */}
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3 flex items-center justify-between">
<span>Players</span>
<span className="text-xs text-gray-500 font-normal">
{players.length} connected
</span>
</h2>
{players.length === 0 ? (
<p className="text-gray-500 text-sm text-center py-4">
{status === "connected" ? "No players connected" : "Connect to see players"}
</p>
) : (
<div className="flex flex-col gap-1.5">
{players.map((p) => (
<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>
{/* Event log */}
<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">
Event Log
</h2>
<div className="flex flex-col gap-0.5 max-h-40 overflow-y-auto">
{log.slice(0, 20).map((entry, i) => (
<p key={i} className="text-xs text-gray-400 font-mono">
{entry}
</p>
))}
{log.length === 0 && (
<p className="text-gray-600 text-xs">No events yet</p>
)}
</div>
</div>
</div>
{/* Right: active matches + board */}
<div className="lg:col-span-2 flex flex-col gap-4">
{/* Active matches */}
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
Active Matches
</h2>
{gameList.length === 0 ? (
<p className="text-gray-500 text-sm text-center py-3">
{status === "connected" ? "No active matches" : "Connect to see matches"}
</p>
) : (
<div className="flex flex-wrap gap-2">
{gameList.map((g) => {
const live = liveGames.get(g.id);
return (
<button
key={g.id}
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>
{/* Selected game board */}
<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>
);
}
function StatusBadge({ status }: { status: ConnStatus }) {
const colors: Record<ConnStatus, string> = {
idle: "bg-gray-700 text-gray-400",
connecting: "bg-yellow-900/60 text-yellow-300 animate-pulse",
connected: "bg-green-900/60 text-green-300",
disconnected: "bg-red-900/60 text-red-300",
};
const labels: Record<ConnStatus, string> = {
idle: "Not connected",
connecting: "Connecting…",
connected: "Connected",
disconnected: "Disconnected",
};
return (
<span className={`px-3 py-1.5 rounded-full text-sm font-medium ${colors[status]}`}>
{labels[status]}
</span>
);
} }

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

@@ -1,39 +1,121 @@
"use client"; "use client";
import Link from "next/link"; import Link from "next/link";
import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useConnection } from "@/lib/connection";
const links = [ import { cmd, DEFAULT_WS_URL } from "@/lib/protocol";
{ href: "/spectate", label: "👁 Spectate", desc: "Watch live matches" },
{ href: "/tournament", label: "🏆 Tournament", desc: "Tournament standings" },
{ href: "/play", label: "🎮 Play", desc: "Join as a player" },
];
export default function Nav() { export default function Nav() {
const path = usePathname(); const pathname = usePathname();
const router = useRouter();
const { status, role, username, send, becomePlayer } = useConnection();
const [showPlayerModal, setShowPlayerModal] = useState(false);
const [nextUsername, setNextUsername] = useState(username);
const statusLabel =
status === "connected"
? `Connected ${role === "player" ? `as ${username}` : "as observer"}`
: status === "reconnecting"
? "Reconnecting..."
: status === "connecting"
? "Connecting..."
: "Not connected";
const isConnectionPage = pathname === "/";
const disableRoleSwitch =
status === "connecting" || status === "reconnecting";
const handleBecomeObserver = () => {
send(cmd.disconnect());
router.push("/spectate");
};
const handleBecomePlayer = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
const trimmed = nextUsername.trim();
if (!trimmed) return;
becomePlayer(trimmed);
setShowPlayerModal(false);
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-6"> <div className="max-w-7xl mx-auto flex items-center gap-4 flex-wrap">
<Link href="/" className="text-lg font-bold text-white flex items-center gap-2"> <Link
href="/"
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="flex gap-1 ml-4">
{links.map(({ href, label }) => ( <div className="ml-auto flex items-center gap-2">
<Link {!isConnectionPage && (
key={href} <button
href={href} onClick={
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${ role === "player"
path === href ? handleBecomeObserver
? "bg-blue-600 text-white" : () => {
: "text-gray-300 hover:bg-gray-800 hover:text-white" setNextUsername(username);
}`} setShowPlayerModal(true);
}
}
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"
> >
{label} {role === "player" ? "Become Observer" : "Become Player"}
</Link> </button>
))} )}
<div className="text-xs text-gray-400 bg-gray-800 px-3 py-1 rounded-full">
{statusLabel}
</div>
</div> </div>
</div> </div>
</nav> </nav>
{showPlayerModal && (
<div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center px-4">
<form
onSubmit={handleBecomePlayer}
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>
<p className="text-sm text-gray-400">
Enter a username to connect as a player.
</p>
<input
autoFocus
value={nextUsername}
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"
placeholder="Username"
/>
<div className="flex justify-end gap-2 pt-1">
<button
type="button"
onClick={() => setShowPlayerModal(false)}
className="px-3 py-2 rounded-lg text-sm font-medium bg-gray-700 hover:bg-gray-600 text-white"
>
Cancel
</button>
<button
type="submit"
className="px-3 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 text-white"
>
Continue
</button>
</div>
</form>
</div>
)}
</>
); );
} }

384
connect4-ui/lib/connection.tsx Normal file
View File

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

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

@@ -22,6 +22,12 @@ export interface MoveEntry {
column: number; column: number;
} }
export const DEFAULT_WS_URL = process.env.NODE_ENV === "development"
? "ws://localhost:8080"
: "wss://connect4.abunchofknowitalls.com";
export const RECONNECT_INTERVAL_MS = 5000;
export const RECONNECT_TIMEOUT_MS = 60000;
// ─── Parsed message union ──────────────────────────────────────────────────── // ─── Parsed message union ────────────────────────────────────────────────────
export type ParsedMessage = export type ParsedMessage =
@@ -104,7 +110,10 @@ export function parseMessage(raw: string): ParsedMessage {
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.slice(1).filter(Boolean).map((m) => { const moves: MoveEntry[] = segments
.slice(1)
.filter(Boolean)
.map((m) => {
const lastComma = m.lastIndexOf(","); const lastComma = m.lastIndexOf(",");
return { return {
username: m.substring(0, lastComma), username: m.substring(0, lastComma),
@@ -124,7 +133,11 @@ export function parseMessage(raw: string): ParsedMessage {
case "MOVE": case "MOVE":
// GAME:MOVE:<username>:<column> // GAME:MOVE:<username>:<column>
return { type: "GAME_MOVE", username: parts[2], column: parseInt(parts[3]) }; return {
type: "GAME_MOVE",
username: parts[2],
column: parseInt(parts[3]),
};
case "WIN": case "WIN":
return { type: "GAME_WIN", winner: parts[2] }; return { type: "GAME_WIN", winner: parts[2] };
@@ -141,7 +154,11 @@ export function parseMessage(raw: string): ParsedMessage {
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 { username, ready: ready === "true", inMatch: inMatch === "true" }; return {
username,
ready: ready === "true",
inMatch: inMatch === "true",
};
}); });
return { type: "PLAYER_LIST", players }; return { type: "PLAYER_LIST", players };
} }
@@ -173,7 +190,8 @@ export function parseMessage(raw: string): ParsedMessage {
} }
case "ADMIN": case "ADMIN":
if (parts[1] === "AUTH" && parts[2] === "ACK") return { type: "ADMIN_AUTH_ACK" }; if (parts[1] === "AUTH" && parts[2] === "ACK")
return { type: "ADMIN_AUTH_ACK" };
break; break;
case "GET": case "GET":
@@ -202,16 +220,19 @@ export const cmd = {
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) => `GAME:AWARD:${matchId}:${winner}`, gameAward: (matchId: number, winner: string) =>
`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: (key: "TOURNAMENT_STATUS" | "MOVE_WAIT" | "DEMO_MODE" | "MAX_TIMEOUT") => getData: (
`GET:${key}`, key: "TOURNAMENT_STATUS" | "MOVE_WAIT" | "DEMO_MODE" | "MAX_TIMEOUT",
) => `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) => `RESERVATION:DELETE:${p1},${p2}`, reservationDelete: (p1: string, p2: string) =>
`RESERVATION:DELETE:${p1},${p2}`,
reservationGet: () => "RESERVATION:GET", reservationGet: () => "RESERVATION:GET",
}; };
@@ -229,7 +250,7 @@ export function createEmptyBoard(): BoardState {
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;
@@ -246,7 +267,7 @@ export function placeToken(
/** 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;