first
This commit is contained in:
366
connect4-ui/app/spectate/page.tsx
Normal file
366
connect4-ui/app/spectate/page.tsx
Normal file
@@ -0,0 +1,366 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import Board from "@/components/Board";
|
||||
import {
|
||||
BoardState,
|
||||
GameEntry,
|
||||
ParsedMessage,
|
||||
cmd,
|
||||
createEmptyBoard,
|
||||
parseMessage,
|
||||
placeToken,
|
||||
replayMoves,
|
||||
} from "@/lib/protocol";
|
||||
|
||||
type ConnStatus = "idle" | "connecting" | "connected" | "disconnected";
|
||||
|
||||
interface WatchState {
|
||||
matchId: number;
|
||||
player1: string; // Red
|
||||
player2: string; // Yellow
|
||||
}
|
||||
|
||||
type GameResult =
|
||||
| { kind: "win"; winner: string }
|
||||
| { kind: "draw" }
|
||||
| { kind: "terminated" };
|
||||
|
||||
const DEFAULT_URL = "wss://connect4.abunchofknowitalls.com";
|
||||
|
||||
export default function SpectatePage() {
|
||||
const [wsUrl, setWsUrl] = useState(DEFAULT_URL);
|
||||
const [status, setStatus] = useState<ConnStatus>("idle");
|
||||
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 watchingRef = useRef<WatchState | null>(null);
|
||||
|
||||
const addLog = (msg: string) =>
|
||||
setLog((prev) => [`[${new Date().toLocaleTimeString()}] ${msg}`, ...prev.slice(0, 49)]);
|
||||
|
||||
const send = useCallback((msg: string) => {
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(msg);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleMessage = useCallback(
|
||||
(raw: string) => {
|
||||
const msg: ParsedMessage = parseMessage(raw);
|
||||
switch (msg.type) {
|
||||
case "GAME_LIST":
|
||||
setGameList(msg.games);
|
||||
break;
|
||||
|
||||
case "GAME_WATCH_ACK": {
|
||||
const { board: replayed, lastMove: lm } = replayMoves(msg.moves, msg.player1);
|
||||
const watchState: WatchState = {
|
||||
matchId: msg.matchId,
|
||||
player1: msg.player1,
|
||||
player2: msg.player2,
|
||||
};
|
||||
setWatching(watchState);
|
||||
watchingRef.current = watchState;
|
||||
setBoard(replayed);
|
||||
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;
|
||||
}
|
||||
|
||||
case "GAME_MOVE": {
|
||||
const w = watchingRef.current;
|
||||
if (!w) break;
|
||||
const color: 1 | 2 = msg.username === w.player1 ? 1 : 2;
|
||||
setBoard((prev) => {
|
||||
const { board: next, row } = placeToken(prev, color, msg.column);
|
||||
setLastMove({ column: msg.column, row });
|
||||
return next;
|
||||
});
|
||||
setMoveCount((n) => n + 1);
|
||||
setCurrentTurnColor((c) => (c === 1 ? 2 : 1));
|
||||
addLog(`${msg.username} played column ${msg.column}`);
|
||||
break;
|
||||
}
|
||||
|
||||
case "GAME_WIN":
|
||||
setGameResult({ kind: "win", winner: msg.winner });
|
||||
setCurrentTurnColor(1); // reset
|
||||
addLog(`🏆 ${msg.winner} wins!`);
|
||||
break;
|
||||
|
||||
case "GAME_DRAW":
|
||||
setGameResult({ kind: "draw" });
|
||||
addLog("🤝 Draw!");
|
||||
break;
|
||||
|
||||
case "GAME_TERMINATED":
|
||||
setGameResult({ kind: "terminated" });
|
||||
addLog("⛔ Match terminated");
|
||||
break;
|
||||
|
||||
case "ERROR":
|
||||
addLog(`Error: ${msg.message}`);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const connect = useCallback(() => {
|
||||
if (wsRef.current) wsRef.current.close();
|
||||
setStatus("connecting");
|
||||
setLog([]);
|
||||
setGameList([]);
|
||||
setWatching(null);
|
||||
watchingRef.current = null;
|
||||
setBoard(createEmptyBoard());
|
||||
setLastMove(null);
|
||||
setGameResult(null);
|
||||
|
||||
const ws = new WebSocket(wsUrl);
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
setStatus("connected");
|
||||
addLog("Connected as observer");
|
||||
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(() => {
|
||||
if (ws.readyState === WebSocket.OPEN) ws.send(cmd.gameList());
|
||||
}, 4000);
|
||||
}, [wsUrl, handleMessage]);
|
||||
|
||||
const disconnect = useCallback(() => {
|
||||
if (pollRef.current) clearInterval(pollRef.current);
|
||||
wsRef.current?.close();
|
||||
}, []);
|
||||
|
||||
const watchGame = useCallback(
|
||||
(id: number) => {
|
||||
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 (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">👁 Spectate Matches</h1>
|
||||
<p className="text-gray-400 text-sm mt-1">
|
||||
Watch live Connect4 games in real time
|
||||
</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)}
|
||||
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
|
||||
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>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Left: game list + log */}
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* 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>
|
||||
{status !== "connected" ? (
|
||||
<p className="text-gray-600 text-sm text-center py-4">
|
||||
Connect to see matches
|
||||
</p>
|
||||
) : gameList.length === 0 ? (
|
||||
<p className="text-gray-500 text-sm text-center py-4">
|
||||
No active matches
|
||||
</p>
|
||||
) : (
|
||||
<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">
|
||||
#{g.id}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-red-400">{g.player1}</span>
|
||||
<span className="text-gray-600 text-xs">vs</span>
|
||||
<span className="text-yellow-400">{g.player2}</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</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-3">
|
||||
Event Log
|
||||
</h2>
|
||||
<div className="flex flex-col gap-1 max-h-48 overflow-y-auto">
|
||||
{log.length === 0 ? (
|
||||
<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">
|
||||
{entry}
|
||||
</p>
|
||||
))
|
||||
)}
|
||||
</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 gap-4">
|
||||
{!watching ? (
|
||||
<div className="flex flex-col items-center justify-center gap-3 py-16 text-center">
|
||||
<span className="text-5xl">👁</span>
|
||||
<p className="text-gray-400">
|
||||
{status === "connected"
|
||||
? "Select a match from the list to start watching"
|
||||
: "Connect to the server to see live matches"}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Game result banner */}
|
||||
{gameResult && (
|
||||
<div
|
||||
className={`w-full rounded-lg p-3 text-center font-semibold text-lg ${
|
||||
gameResult.kind === "win"
|
||||
? "bg-green-900/50 border border-green-600 text-green-300"
|
||||
: gameResult.kind === "draw"
|
||||
? "bg-blue-900/50 border border-blue-600 text-blue-300"
|
||||
: "bg-red-900/50 border border-red-600 text-red-300"
|
||||
}`}
|
||||
>
|
||||
{gameResult.kind === "win"
|
||||
? `🏆 ${gameResult.winner} wins!`
|
||||
: gameResult.kind === "draw"
|
||||
? "🤝 Draw!"
|
||||
: "⛔ Match Terminated"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Board
|
||||
board={board}
|
||||
lastMove={lastMove}
|
||||
player1={watching.player1}
|
||||
player2={watching.player2}
|
||||
currentTurnColor={gameResult ? null : currentTurnColor}
|
||||
disabled
|
||||
/>
|
||||
|
||||
<div className="text-xs text-gray-500 font-mono">
|
||||
Match #{watching.matchId} · {moveCount} move
|
||||
{moveCount !== 1 ? "s" : ""}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user