fmt
This commit is contained in:
@@ -8,5 +8,8 @@
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
@@ -4,23 +4,23 @@ import Nav from "@/components/Nav";
|
||||
import { ConnectionProvider } from "@/lib/connection";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Connect4 Moderator",
|
||||
description: "Watch matches, track tournaments, and play Connect4",
|
||||
title: "Connect4 Moderator",
|
||||
description: "Watch matches, track tournaments, and play Connect4",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="min-h-screen bg-gray-950 text-gray-100">
|
||||
<ConnectionProvider>
|
||||
<Nav />
|
||||
<main className="max-w-7xl mx-auto px-4 py-6">{children}</main>
|
||||
</ConnectionProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="min-h-screen bg-gray-950 text-gray-100">
|
||||
<ConnectionProvider>
|
||||
<Nav />
|
||||
<main className="max-w-7xl mx-auto px-4 py-6">{children}</main>
|
||||
</ConnectionProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,80 +6,80 @@ import { DEFAULT_WS_URL } from "@/lib/protocol";
|
||||
import { useConnection } from "@/lib/connection";
|
||||
|
||||
export default function Home() {
|
||||
const router = useRouter();
|
||||
const {
|
||||
connect,
|
||||
role,
|
||||
status,
|
||||
wsUrl: connectedWsUrl,
|
||||
shouldRedirectToConnect,
|
||||
clearRedirectFlag,
|
||||
} = useConnection();
|
||||
const router = useRouter();
|
||||
const {
|
||||
connect,
|
||||
role,
|
||||
status,
|
||||
wsUrl: connectedWsUrl,
|
||||
shouldRedirectToConnect,
|
||||
clearRedirectFlag,
|
||||
} = useConnection();
|
||||
|
||||
const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
|
||||
const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
|
||||
|
||||
useEffect(() => {
|
||||
if (shouldRedirectToConnect) {
|
||||
clearRedirectFlag();
|
||||
}
|
||||
}, [shouldRedirectToConnect, clearRedirectFlag]);
|
||||
useEffect(() => {
|
||||
if (shouldRedirectToConnect) {
|
||||
clearRedirectFlag();
|
||||
}
|
||||
}, [shouldRedirectToConnect, clearRedirectFlag]);
|
||||
|
||||
const onSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const onSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
connect({ role: "observer", wsUrl });
|
||||
router.push("/spectate");
|
||||
};
|
||||
connect({ role: "observer", wsUrl });
|
||||
router.push("/spectate");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto py-10">
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-2xl p-6 md:p-8 flex flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white">
|
||||
Connect to Moderator Server
|
||||
</h1>
|
||||
<p className="text-sm text-gray-400 mt-2">
|
||||
Connect as an observer to watch live matches and tournaments.
|
||||
</p>
|
||||
</div>
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto py-10">
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-2xl p-6 md:p-8 flex flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white">
|
||||
Connect to Moderator Server
|
||||
</h1>
|
||||
<p className="text-sm text-gray-400 mt-2">
|
||||
Connect as an observer to watch live matches and tournaments.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{shouldRedirectToConnect && (
|
||||
<div className="rounded-lg border border-red-700 bg-red-950/40 px-4 py-3 text-sm text-red-200">
|
||||
Connection lost. Please reconnect to continue.
|
||||
</div>
|
||||
)}
|
||||
{shouldRedirectToConnect && (
|
||||
<div className="rounded-lg border border-red-700 bg-red-950/40 px-4 py-3 text-sm text-red-200">
|
||||
Connection lost. Please reconnect to continue.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === "connected" && role && (
|
||||
<div className="rounded-lg border border-green-700 bg-green-950/30 px-4 py-3 text-sm text-green-200">
|
||||
Connected to {connectedWsUrl} as observer.
|
||||
</div>
|
||||
)}
|
||||
{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>
|
||||
<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 className="flex flex-wrap gap-2 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
{status === "connecting" || status === "reconnecting"
|
||||
? "Connecting..."
|
||||
: "Connect to Server"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="flex flex-wrap gap-2 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
{status === "connecting" || status === "reconnecting"
|
||||
? "Connecting..."
|
||||
: "Connect to Server"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,11 +4,11 @@ import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Board from "@/components/Board";
|
||||
import {
|
||||
BoardState,
|
||||
ParsedMessage,
|
||||
cmd,
|
||||
createEmptyBoard,
|
||||
placeToken,
|
||||
BoardState,
|
||||
ParsedMessage,
|
||||
cmd,
|
||||
createEmptyBoard,
|
||||
placeToken,
|
||||
} from "@/lib/protocol";
|
||||
import { useConnection } from "@/lib/connection";
|
||||
|
||||
@@ -17,465 +17,465 @@ type GamePhase = "idle" | "connected" | "ready" | "playing" | "game-over";
|
||||
type GameResult = "win" | "loss" | "draw" | "terminated";
|
||||
|
||||
export default function PlayPage() {
|
||||
const router = useRouter();
|
||||
const {
|
||||
role,
|
||||
username,
|
||||
status,
|
||||
send,
|
||||
subscribe,
|
||||
disconnect,
|
||||
reconnectAttempts,
|
||||
shouldRedirectToConnect,
|
||||
clearRedirectFlag,
|
||||
} = useConnection();
|
||||
const router = useRouter();
|
||||
const {
|
||||
role,
|
||||
username,
|
||||
status,
|
||||
send,
|
||||
subscribe,
|
||||
disconnect,
|
||||
reconnectAttempts,
|
||||
shouldRedirectToConnect,
|
||||
clearRedirectFlag,
|
||||
} = useConnection();
|
||||
|
||||
const [gamePhase, setGamePhase] = useState<GamePhase>("idle");
|
||||
const [myColor, setMyColor] = useState<1 | 2 | null>(null);
|
||||
const [isMyTurn, setIsMyTurn] = useState(false);
|
||||
const [board, setBoard] = useState<BoardState>(createEmptyBoard());
|
||||
const [lastMove, setLastMove] = useState<{
|
||||
column: number;
|
||||
row: number;
|
||||
} | null>(null);
|
||||
const [gameResult, setGameResult] = useState<GameResult | null>(null);
|
||||
const [moveCount, setMoveCount] = useState(0);
|
||||
const [statusMessages, setStatusMessages] = useState<string[]>([]);
|
||||
const [tournamentMode, setTournamentMode] = useState(false);
|
||||
const [gamePhase, setGamePhase] = useState<GamePhase>("idle");
|
||||
const [myColor, setMyColor] = useState<1 | 2 | null>(null);
|
||||
const [isMyTurn, setIsMyTurn] = useState(false);
|
||||
const [board, setBoard] = useState<BoardState>(createEmptyBoard());
|
||||
const [lastMove, setLastMove] = useState<{
|
||||
column: number;
|
||||
row: number;
|
||||
} | null>(null);
|
||||
const [gameResult, setGameResult] = useState<GameResult | null>(null);
|
||||
const [moveCount, setMoveCount] = useState(0);
|
||||
const [statusMessages, setStatusMessages] = useState<string[]>([]);
|
||||
const [tournamentMode, setTournamentMode] = useState(false);
|
||||
|
||||
const myColorRef = useRef<1 | 2 | null>(null);
|
||||
const isMyTurnRef = useRef(false);
|
||||
const myColorRef = useRef<1 | 2 | null>(null);
|
||||
const isMyTurnRef = useRef(false);
|
||||
|
||||
const addStatus = useCallback(
|
||||
(msg: string) =>
|
||||
setStatusMessages((prev) => [
|
||||
`[${new Date().toLocaleTimeString()}] ${msg}`,
|
||||
...prev.slice(0, 29),
|
||||
]),
|
||||
[],
|
||||
);
|
||||
const addStatus = useCallback(
|
||||
(msg: string) =>
|
||||
setStatusMessages((prev) => [
|
||||
`[${new Date().toLocaleTimeString()}] ${msg}`,
|
||||
...prev.slice(0, 29),
|
||||
]),
|
||||
[],
|
||||
);
|
||||
|
||||
const resetGame = useCallback(() => {
|
||||
setBoard(createEmptyBoard());
|
||||
setLastMove(null);
|
||||
setMoveCount(0);
|
||||
setMyColor(null);
|
||||
myColorRef.current = null;
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
setGameResult(null);
|
||||
}, []);
|
||||
const resetGame = useCallback(() => {
|
||||
setBoard(createEmptyBoard());
|
||||
setLastMove(null);
|
||||
setMoveCount(0);
|
||||
setMyColor(null);
|
||||
myColorRef.current = null;
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
setGameResult(null);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (status === "disconnected" && shouldRedirectToConnect) {
|
||||
clearRedirectFlag();
|
||||
router.replace("/");
|
||||
}
|
||||
useEffect(() => {
|
||||
if (status === "disconnected" && shouldRedirectToConnect) {
|
||||
clearRedirectFlag();
|
||||
router.replace("/");
|
||||
}
|
||||
|
||||
if (status === "idle") {
|
||||
router.replace("/");
|
||||
}
|
||||
if (status === "idle") {
|
||||
router.replace("/");
|
||||
}
|
||||
|
||||
if (role !== "player" && status !== "idle") {
|
||||
router.replace("/spectate");
|
||||
return;
|
||||
}
|
||||
if (role !== "player" && status !== "idle") {
|
||||
router.replace("/spectate");
|
||||
return;
|
||||
}
|
||||
|
||||
if (status === "connected" && gamePhase === "idle") {
|
||||
setGamePhase("connected");
|
||||
}
|
||||
}, [
|
||||
role,
|
||||
status,
|
||||
router,
|
||||
gamePhase,
|
||||
shouldRedirectToConnect,
|
||||
clearRedirectFlag,
|
||||
]);
|
||||
if (status === "connected" && gamePhase === "idle") {
|
||||
setGamePhase("connected");
|
||||
}
|
||||
}, [
|
||||
role,
|
||||
status,
|
||||
router,
|
||||
gamePhase,
|
||||
shouldRedirectToConnect,
|
||||
clearRedirectFlag,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = subscribe((msg: ParsedMessage) => {
|
||||
switch (msg.type) {
|
||||
case "CONNECT_ACK":
|
||||
case "RECONNECT_ACK":
|
||||
setGamePhase((prev) => (prev === "idle" ? "connected" : prev));
|
||||
addStatus("Connected to server");
|
||||
break;
|
||||
useEffect(() => {
|
||||
const unsubscribe = subscribe((msg: ParsedMessage) => {
|
||||
switch (msg.type) {
|
||||
case "CONNECT_ACK":
|
||||
case "RECONNECT_ACK":
|
||||
setGamePhase((prev) => (prev === "idle" ? "connected" : prev));
|
||||
addStatus("Connected to server");
|
||||
break;
|
||||
|
||||
case "ERROR":
|
||||
addStatus(`⚠ ${msg.message}`);
|
||||
break;
|
||||
case "ERROR":
|
||||
addStatus(`⚠ ${msg.message}`);
|
||||
break;
|
||||
|
||||
case "READY_ACK":
|
||||
setGamePhase("ready");
|
||||
addStatus("⏳ Waiting for an opponent...");
|
||||
break;
|
||||
case "READY_ACK":
|
||||
setGamePhase("ready");
|
||||
addStatus("⏳ Waiting for an opponent...");
|
||||
break;
|
||||
|
||||
case "GAME_START": {
|
||||
resetGame();
|
||||
const color: 1 | 2 = msg.goesFirst ? 1 : 2;
|
||||
setMyColor(color);
|
||||
myColorRef.current = color;
|
||||
setGamePhase("playing");
|
||||
const firstTurn = msg.goesFirst;
|
||||
setIsMyTurn(firstTurn);
|
||||
isMyTurnRef.current = firstTurn;
|
||||
addStatus(
|
||||
msg.goesFirst
|
||||
? "🔴 You are Red - you go first"
|
||||
: "🟡 You are Yellow - wait for opponent's move",
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "GAME_START": {
|
||||
resetGame();
|
||||
const color: 1 | 2 = msg.goesFirst ? 1 : 2;
|
||||
setMyColor(color);
|
||||
myColorRef.current = color;
|
||||
setGamePhase("playing");
|
||||
const firstTurn = msg.goesFirst;
|
||||
setIsMyTurn(firstTurn);
|
||||
isMyTurnRef.current = firstTurn;
|
||||
addStatus(
|
||||
msg.goesFirst
|
||||
? "🔴 You are Red - you go first"
|
||||
: "🟡 You are Yellow - wait for opponent's move",
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case "OPPONENT_MOVE": {
|
||||
const opponentColor: 1 | 2 = myColorRef.current === 1 ? 2 : 1;
|
||||
setBoard((prev) => {
|
||||
const { board: next, row } = placeToken(
|
||||
prev,
|
||||
opponentColor,
|
||||
msg.column,
|
||||
);
|
||||
setLastMove({ column: msg.column, row });
|
||||
return next;
|
||||
});
|
||||
setMoveCount((n) => n + 1);
|
||||
setIsMyTurn(true);
|
||||
isMyTurnRef.current = true;
|
||||
addStatus(`Opponent played column ${msg.column}`);
|
||||
break;
|
||||
}
|
||||
case "OPPONENT_MOVE": {
|
||||
const opponentColor: 1 | 2 = myColorRef.current === 1 ? 2 : 1;
|
||||
setBoard((prev) => {
|
||||
const { board: next, row } = placeToken(
|
||||
prev,
|
||||
opponentColor,
|
||||
msg.column,
|
||||
);
|
||||
setLastMove({ column: msg.column, row });
|
||||
return next;
|
||||
});
|
||||
setMoveCount((n) => n + 1);
|
||||
setIsMyTurn(true);
|
||||
isMyTurnRef.current = true;
|
||||
addStatus(`Opponent played column ${msg.column}`);
|
||||
break;
|
||||
}
|
||||
|
||||
case "GAME_WINS":
|
||||
setGameResult("win");
|
||||
setGamePhase("game-over");
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
addStatus("🏆 You won!");
|
||||
break;
|
||||
case "GAME_WINS":
|
||||
setGameResult("win");
|
||||
setGamePhase("game-over");
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
addStatus("🏆 You won!");
|
||||
break;
|
||||
|
||||
case "GAME_LOSS":
|
||||
setGameResult("loss");
|
||||
setGamePhase("game-over");
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
addStatus("💔 You lost");
|
||||
break;
|
||||
case "GAME_LOSS":
|
||||
setGameResult("loss");
|
||||
setGamePhase("game-over");
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
addStatus("💔 You lost");
|
||||
break;
|
||||
|
||||
case "GAME_DRAW":
|
||||
setGameResult("draw");
|
||||
setGamePhase("game-over");
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
addStatus("🤝 Draw");
|
||||
break;
|
||||
case "GAME_DRAW":
|
||||
setGameResult("draw");
|
||||
setGamePhase("game-over");
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
addStatus("🤝 Draw");
|
||||
break;
|
||||
|
||||
case "GAME_TERMINATED":
|
||||
setGameResult("terminated");
|
||||
setGamePhase("game-over");
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
addStatus("⛔ Match terminated");
|
||||
break;
|
||||
case "GAME_TERMINATED":
|
||||
setGameResult("terminated");
|
||||
setGamePhase("game-over");
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
addStatus("⛔ Match terminated");
|
||||
break;
|
||||
|
||||
case "TOURNAMENT_START":
|
||||
setTournamentMode(true);
|
||||
addStatus(`🏆 Tournament started: ${msg.tournamentType}`);
|
||||
break;
|
||||
case "TOURNAMENT_START":
|
||||
setTournamentMode(true);
|
||||
addStatus(`🏆 Tournament started: ${msg.tournamentType}`);
|
||||
break;
|
||||
|
||||
case "TOURNAMENT_END":
|
||||
setGamePhase("connected");
|
||||
resetGame();
|
||||
send(cmd.ready());
|
||||
setGamePhase("ready");
|
||||
addStatus("⏳ Ready for next round...");
|
||||
break;
|
||||
case "TOURNAMENT_END":
|
||||
setGamePhase("connected");
|
||||
resetGame();
|
||||
send(cmd.ready());
|
||||
setGamePhase("ready");
|
||||
addStatus("⏳ Ready for next round...");
|
||||
break;
|
||||
|
||||
case "TOURNAMENT_CANCEL":
|
||||
setTournamentMode(false);
|
||||
setGamePhase("connected");
|
||||
resetGame();
|
||||
addStatus("Tournament cancelled");
|
||||
break;
|
||||
case "TOURNAMENT_CANCEL":
|
||||
setTournamentMode(false);
|
||||
setGamePhase("connected");
|
||||
resetGame();
|
||||
addStatus("Tournament cancelled");
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
return unsubscribe;
|
||||
}, [addStatus, resetGame, send, subscribe]);
|
||||
return unsubscribe;
|
||||
}, [addStatus, resetGame, send, subscribe]);
|
||||
|
||||
const handleColumnClick = useCallback(
|
||||
(col: number) => {
|
||||
if (!isMyTurnRef.current || gamePhase !== "playing") return;
|
||||
const color = myColorRef.current;
|
||||
if (!color) return;
|
||||
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;
|
||||
});
|
||||
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}`);
|
||||
},
|
||||
[addStatus, gamePhase, send],
|
||||
);
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
setMoveCount((n) => n + 1);
|
||||
send(cmd.play(col));
|
||||
addStatus(`You played column ${col}`);
|
||||
},
|
||||
[addStatus, gamePhase, send],
|
||||
);
|
||||
|
||||
const sendReady = useCallback(() => {
|
||||
send(cmd.ready());
|
||||
setGamePhase("ready");
|
||||
addStatus("⏳ Waiting for an opponent...");
|
||||
}, [addStatus, send]);
|
||||
const sendReady = useCallback(() => {
|
||||
send(cmd.ready());
|
||||
setGamePhase("ready");
|
||||
addStatus("⏳ Waiting for an opponent...");
|
||||
}, [addStatus, send]);
|
||||
|
||||
const myColorLabel =
|
||||
myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null;
|
||||
const opponentColor: 1 | 2 | null =
|
||||
myColor === 1 ? 2 : myColor === 2 ? 1 : null;
|
||||
const redPlayerName = myColor === 1 ? username : "Opponent";
|
||||
const yellowPlayerName = myColor === 2 ? username : "Opponent";
|
||||
const myColorLabel =
|
||||
myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null;
|
||||
const opponentColor: 1 | 2 | null =
|
||||
myColor === 1 ? 2 : myColor === 2 ? 1 : null;
|
||||
const redPlayerName = myColor === 1 ? username : "Opponent";
|
||||
const yellowPlayerName = myColor === 2 ? username : "Opponent";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">🎮 Play Connect4</h1>
|
||||
<p className="text-gray-400 text-sm mt-1">
|
||||
Connected as <span className="text-green-300">{username}</span>
|
||||
</p>
|
||||
</div>
|
||||
<PhaseIndicator phase={gamePhase} isMyTurn={isMyTurn} />
|
||||
</div>
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">🎮 Play Connect4</h1>
|
||||
<p className="text-gray-400 text-sm mt-1">
|
||||
Connected as <span className="text-green-300">{username}</span>
|
||||
</p>
|
||||
</div>
|
||||
<PhaseIndicator phase={gamePhase} isMyTurn={isMyTurn} />
|
||||
</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>
|
||||
)}
|
||||
{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="flex flex-col gap-4">
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-col gap-3">
|
||||
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider">
|
||||
Session
|
||||
</h2>
|
||||
<div className="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 flex flex-col gap-3">
|
||||
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider">
|
||||
Session
|
||||
</h2>
|
||||
|
||||
<div className="text-xs text-gray-400">
|
||||
Status: <span className="text-gray-200">{status}</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
User: <span className="text-gray-200">{username}</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
Status: <span className="text-gray-200">{status}</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
User: <span className="text-gray-200">{username}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={disconnect}
|
||||
className="w-full py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={disconnect}
|
||||
className="w-full py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-col gap-3">
|
||||
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider">
|
||||
Match
|
||||
</h2>
|
||||
<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">
|
||||
Match
|
||||
</h2>
|
||||
|
||||
{tournamentMode && (
|
||||
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-purple-950/50 border border-purple-700 text-purple-300 text-sm">
|
||||
<span>🏆</span>
|
||||
<span>Tournament mode active</span>
|
||||
</div>
|
||||
)}
|
||||
{tournamentMode && (
|
||||
<div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-purple-950/50 border border-purple-700 text-purple-300 text-sm">
|
||||
<span>🏆</span>
|
||||
<span>Tournament mode active</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{gamePhase === "connected" && (
|
||||
<button
|
||||
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"
|
||||
>
|
||||
✋ Ready to Play
|
||||
</button>
|
||||
)}
|
||||
{gamePhase === "connected" && (
|
||||
<button
|
||||
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"
|
||||
>
|
||||
✋ Ready to Play
|
||||
</button>
|
||||
)}
|
||||
|
||||
{gamePhase === "ready" && (
|
||||
<div className="text-center py-3 text-yellow-300 text-sm animate-pulse">
|
||||
⏳ Waiting for opponent...
|
||||
</div>
|
||||
)}
|
||||
{gamePhase === "ready" && (
|
||||
<div className="text-center py-3 text-yellow-300 text-sm animate-pulse">
|
||||
⏳ Waiting for opponent...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(gamePhase === "playing" || gamePhase === "game-over") &&
|
||||
myColor && (
|
||||
<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={`w-4 h-4 rounded-full ${myColor === 1 ? "bg-red-500" : "bg-yellow-400"}`}
|
||||
/>
|
||||
<span className="text-white font-medium text-sm">
|
||||
You are {myColorLabel}
|
||||
</span>
|
||||
</div>
|
||||
{(gamePhase === "playing" || gamePhase === "game-over") &&
|
||||
myColor && (
|
||||
<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={`w-4 h-4 rounded-full ${myColor === 1 ? "bg-red-500" : "bg-yellow-400"}`}
|
||||
/>
|
||||
<span className="text-white font-medium text-sm">
|
||||
You are {myColorLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{gamePhase === "playing" && (
|
||||
<div
|
||||
className={`flex items-center justify-center gap-2 px-3 py-2 rounded-lg font-semibold text-sm ${
|
||||
isMyTurn
|
||||
? "bg-green-900/50 border border-green-600 text-green-300 animate-pulse"
|
||||
: "bg-gray-800 text-gray-400"
|
||||
}`}
|
||||
>
|
||||
{isMyTurn
|
||||
? "⬆ Your turn - click a column"
|
||||
: "⏳ Waiting for opponent..."}
|
||||
</div>
|
||||
)}
|
||||
{gamePhase === "playing" && (
|
||||
<div
|
||||
className={`flex items-center justify-center gap-2 px-3 py-2 rounded-lg font-semibold text-sm ${
|
||||
isMyTurn
|
||||
? "bg-green-900/50 border border-green-600 text-green-300 animate-pulse"
|
||||
: "bg-gray-800 text-gray-400"
|
||||
}`}
|
||||
>
|
||||
{isMyTurn
|
||||
? "⬆ Your turn - click a column"
|
||||
: "⏳ Waiting for opponent..."}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-xs text-gray-500 text-center">
|
||||
{moveCount} move{moveCount !== 1 ? "s" : ""} played
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs text-gray-500 text-center">
|
||||
{moveCount} move{moveCount !== 1 ? "s" : ""} played
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{gamePhase === "game-over" && gameResult && !tournamentMode && (
|
||||
<button
|
||||
onClick={sendReady}
|
||||
className="w-full py-2 bg-green-700 hover:bg-green-600 text-white text-sm font-semibold rounded-lg transition-colors"
|
||||
>
|
||||
Play Again
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{gamePhase === "game-over" && gameResult && !tournamentMode && (
|
||||
<button
|
||||
onClick={sendReady}
|
||||
className="w-full py-2 bg-green-700 hover:bg-green-600 text-white text-sm font-semibold rounded-lg transition-colors"
|
||||
>
|
||||
Play Again
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
|
||||
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2">
|
||||
Status Log
|
||||
</h2>
|
||||
<div className="flex flex-col gap-0.5 max-h-52 overflow-y-auto">
|
||||
{statusMessages.length === 0 ? (
|
||||
<p className="text-gray-600 text-xs">No events yet</p>
|
||||
) : (
|
||||
statusMessages.map((m, i) => (
|
||||
<p key={i} className="text-xs text-gray-400 font-mono">
|
||||
{m}
|
||||
</p>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
|
||||
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2">
|
||||
Status Log
|
||||
</h2>
|
||||
<div className="flex flex-col gap-0.5 max-h-52 overflow-y-auto">
|
||||
{statusMessages.length === 0 ? (
|
||||
<p className="text-gray-600 text-xs">No events yet</p>
|
||||
) : (
|
||||
statusMessages.map((m, i) => (
|
||||
<p key={i} className="text-xs text-gray-400 font-mono">
|
||||
{m}
|
||||
</p>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center justify-center gap-4 min-h-96">
|
||||
{gamePhase === "idle" ? (
|
||||
<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="text-5xl">✋</div>
|
||||
<p className="text-blue-300 text-lg font-medium">
|
||||
Ready up to start
|
||||
</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>
|
||||
</div>
|
||||
) : gamePhase === "ready" ? (
|
||||
<div className="flex flex-col items-center gap-4 text-center py-8">
|
||||
<div className="text-5xl animate-bounce">⏳</div>
|
||||
<p className="text-yellow-300 text-lg font-medium">
|
||||
Waiting for an opponent...
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{gameResult && (
|
||||
<div
|
||||
className={`w-full max-w-md rounded-xl p-4 text-center font-bold text-xl border ${
|
||||
gameResult === "win"
|
||||
? "bg-green-900/50 border-green-500 text-green-300"
|
||||
: gameResult === "loss"
|
||||
? "bg-red-900/50 border-red-500 text-red-300"
|
||||
: gameResult === "draw"
|
||||
? "bg-blue-900/50 border-blue-500 text-blue-300"
|
||||
: "bg-gray-800 border-gray-600 text-gray-300"
|
||||
}`}
|
||||
>
|
||||
{gameResult === "win"
|
||||
? "🏆 You Won!"
|
||||
: gameResult === "loss"
|
||||
? "💔 You Lost"
|
||||
: gameResult === "draw"
|
||||
? "🤝 Draw"
|
||||
: "⛔ Match Terminated"}
|
||||
</div>
|
||||
)}
|
||||
<div className="lg:col-span-2 bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center justify-center gap-4 min-h-96">
|
||||
{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="text-5xl">✋</div>
|
||||
<p className="text-blue-300 text-lg font-medium">
|
||||
Ready up to start
|
||||
</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>
|
||||
</div>
|
||||
) : gamePhase === "ready" ? (
|
||||
<div className="flex flex-col items-center gap-4 text-center py-8">
|
||||
<div className="text-5xl animate-bounce">⏳</div>
|
||||
<p className="text-yellow-300 text-lg font-medium">
|
||||
Waiting for an opponent...
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{gameResult && (
|
||||
<div
|
||||
className={`w-full max-w-md rounded-xl p-4 text-center font-bold text-xl border ${
|
||||
gameResult === "win"
|
||||
? "bg-green-900/50 border-green-500 text-green-300"
|
||||
: gameResult === "loss"
|
||||
? "bg-red-900/50 border-red-500 text-red-300"
|
||||
: gameResult === "draw"
|
||||
? "bg-blue-900/50 border-blue-500 text-blue-300"
|
||||
: "bg-gray-800 border-gray-600 text-gray-300"
|
||||
}`}
|
||||
>
|
||||
{gameResult === "win"
|
||||
? "🏆 You Won!"
|
||||
: gameResult === "loss"
|
||||
? "💔 You Lost"
|
||||
: gameResult === "draw"
|
||||
? "🤝 Draw"
|
||||
: "⛔ Match Terminated"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Board
|
||||
board={board}
|
||||
lastMove={lastMove}
|
||||
player1={redPlayerName}
|
||||
player2={yellowPlayerName}
|
||||
currentTurnColor={
|
||||
gamePhase === "playing" && myColor
|
||||
? isMyTurn
|
||||
? myColor
|
||||
: opponentColor
|
||||
: null
|
||||
}
|
||||
onColumnClick={
|
||||
gamePhase === "playing" && isMyTurn
|
||||
? handleColumnClick
|
||||
: undefined
|
||||
}
|
||||
disabled={gamePhase !== "playing" || !isMyTurn}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<Board
|
||||
board={board}
|
||||
lastMove={lastMove}
|
||||
player1={redPlayerName}
|
||||
player2={yellowPlayerName}
|
||||
currentTurnColor={
|
||||
gamePhase === "playing" && myColor
|
||||
? isMyTurn
|
||||
? myColor
|
||||
: opponentColor
|
||||
: null
|
||||
}
|
||||
onColumnClick={
|
||||
gamePhase === "playing" && isMyTurn
|
||||
? handleColumnClick
|
||||
: undefined
|
||||
}
|
||||
disabled={gamePhase !== "playing" || !isMyTurn}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PhaseIndicator({
|
||||
phase,
|
||||
isMyTurn,
|
||||
phase,
|
||||
isMyTurn,
|
||||
}: {
|
||||
phase: GamePhase;
|
||||
isMyTurn: boolean;
|
||||
phase: GamePhase;
|
||||
isMyTurn: boolean;
|
||||
}) {
|
||||
if (phase === "playing" && isMyTurn) {
|
||||
return (
|
||||
<span className="px-3 py-1.5 rounded-full text-sm font-medium bg-green-900/60 text-green-300 animate-pulse">
|
||||
Your Turn!
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (phase === "playing" && isMyTurn) {
|
||||
return (
|
||||
<span className="px-3 py-1.5 rounded-full text-sm font-medium bg-green-900/60 text-green-300 animate-pulse">
|
||||
Your Turn!
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const config: Record<GamePhase, { label: string; cls: string }> = {
|
||||
idle: { label: "Not ready", cls: "bg-gray-700 text-gray-400" },
|
||||
connected: { label: "Connected", cls: "bg-blue-900/60 text-blue-300" },
|
||||
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" },
|
||||
"game-over": { label: "Game Over", cls: "bg-gray-700 text-gray-400" },
|
||||
};
|
||||
const config: Record<GamePhase, { label: string; cls: string }> = {
|
||||
idle: { label: "Not ready", cls: "bg-gray-700 text-gray-400" },
|
||||
connected: { label: "Connected", cls: "bg-blue-900/60 text-blue-300" },
|
||||
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" },
|
||||
"game-over": { label: "Game Over", cls: "bg-gray-700 text-gray-400" },
|
||||
};
|
||||
|
||||
const { label, cls } = config[phase];
|
||||
return (
|
||||
<span className={`px-3 py-1.5 rounded-full text-sm font-medium ${cls}`}>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
const { label, cls } = config[phase];
|
||||
return (
|
||||
<span className={`px-3 py-1.5 rounded-full text-sm font-medium ${cls}`}>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,487 +4,487 @@ import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Board from "@/components/Board";
|
||||
import {
|
||||
BoardState,
|
||||
GameEntry,
|
||||
ParsedMessage,
|
||||
PlayerEntry,
|
||||
ScoreEntry,
|
||||
cmd,
|
||||
createEmptyBoard,
|
||||
placeToken,
|
||||
replayMoves,
|
||||
BoardState,
|
||||
GameEntry,
|
||||
ParsedMessage,
|
||||
PlayerEntry,
|
||||
ScoreEntry,
|
||||
cmd,
|
||||
createEmptyBoard,
|
||||
placeToken,
|
||||
replayMoves,
|
||||
} from "@/lib/protocol";
|
||||
import { useConnection } from "@/lib/connection";
|
||||
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
export default function SpectatePage() {
|
||||
const router = useRouter();
|
||||
const {
|
||||
role,
|
||||
status,
|
||||
send,
|
||||
subscribe,
|
||||
disconnect,
|
||||
shouldRedirectToConnect,
|
||||
clearRedirectFlag,
|
||||
} = useConnection();
|
||||
const router = useRouter();
|
||||
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 [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 pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const liveGamesRef = useRef<Map<number, LiveGame>>(new Map());
|
||||
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const liveGamesRef = useRef<Map<number, LiveGame>>(new Map());
|
||||
|
||||
const addLog = useCallback(
|
||||
(msg: string) =>
|
||||
setLog((prev) => [
|
||||
`[${new Date().toLocaleTimeString()}] ${msg}`,
|
||||
...prev.slice(0, 79),
|
||||
]),
|
||||
[],
|
||||
);
|
||||
const addLog = useCallback(
|
||||
(msg: string) =>
|
||||
setLog((prev) => [
|
||||
`[${new Date().toLocaleTimeString()}] ${msg}`,
|
||||
...prev.slice(0, 79),
|
||||
]),
|
||||
[],
|
||||
);
|
||||
|
||||
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 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;
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (status === "disconnected" && shouldRedirectToConnect) {
|
||||
clearRedirectFlag();
|
||||
router.replace("/");
|
||||
}
|
||||
|
||||
if (status === "idle") {
|
||||
router.replace("/");
|
||||
}
|
||||
useEffect(() => {
|
||||
if (status === "disconnected" && shouldRedirectToConnect) {
|
||||
clearRedirectFlag();
|
||||
router.replace("/");
|
||||
}
|
||||
|
||||
if (role !== "observer" && status !== "idle") {
|
||||
router.replace("/play");
|
||||
return;
|
||||
}
|
||||
}, [role, status, shouldRedirectToConnect, clearRedirectFlag, router]);
|
||||
if (status === "idle") {
|
||||
router.replace("/");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = subscribe((msg: ParsedMessage) => {
|
||||
switch (msg.type) {
|
||||
case "TOURNAMENT_START":
|
||||
setTournamentActive(true);
|
||||
setTournamentType(msg.tournamentType);
|
||||
setScores([]);
|
||||
addLog(`🏆 Tournament started: ${msg.tournamentType}`);
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
break;
|
||||
if (role !== "observer" && status !== "idle") {
|
||||
router.replace("/play");
|
||||
return;
|
||||
}
|
||||
}, [role, status, shouldRedirectToConnect, clearRedirectFlag, router]);
|
||||
|
||||
case "TOURNAMENT_CANCEL":
|
||||
setTournamentActive(false);
|
||||
setTournamentType(null);
|
||||
addLog("❌ Tournament cancelled");
|
||||
break;
|
||||
useEffect(() => {
|
||||
const unsubscribe = subscribe((msg: ParsedMessage) => {
|
||||
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_SCORES":
|
||||
setScores(msg.scores);
|
||||
break;
|
||||
case "TOURNAMENT_CANCEL":
|
||||
setTournamentActive(false);
|
||||
setTournamentType(null);
|
||||
addLog("❌ Tournament cancelled");
|
||||
break;
|
||||
|
||||
case "TOURNAMENT_END":
|
||||
addLog("Round ended");
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
break;
|
||||
case "TOURNAMENT_SCORES":
|
||||
setScores(msg.scores);
|
||||
break;
|
||||
|
||||
case "GAME_LIST":
|
||||
setGameList(msg.games);
|
||||
for (const g of msg.games) {
|
||||
if (!liveGamesRef.current.has(g.id)) {
|
||||
send(cmd.gameWatch(g.id));
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "TOURNAMENT_END":
|
||||
addLog("Round ended");
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
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,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "GAME_LIST":
|
||||
setGameList(msg.games);
|
||||
for (const g of msg.games) {
|
||||
if (!liveGamesRef.current.has(g.id)) {
|
||||
send(cmd.gameWatch(g.id));
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case "GAME_MOVE": {
|
||||
if (typeof msg.matchId !== "number") {
|
||||
addLog("Protocol error: GAME_MOVE missing matchId");
|
||||
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,
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
const game = liveGamesRef.current.get(msg.matchId);
|
||||
if (!game) break;
|
||||
const color: 1 | 2 = msg.username === game.player1 ? 1 : 2;
|
||||
const { board: next, row } = placeToken(
|
||||
game.board,
|
||||
color,
|
||||
msg.column,
|
||||
);
|
||||
updateGame(msg.matchId, {
|
||||
board: next,
|
||||
lastMove: { column: msg.column, row },
|
||||
currentTurnColor: (color === 1 ? 2 : 1) as 1 | 2,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "GAME_MOVE": {
|
||||
if (typeof msg.matchId !== "number") {
|
||||
addLog("Protocol error: GAME_MOVE missing matchId");
|
||||
break;
|
||||
}
|
||||
|
||||
case "GAME_WIN": {
|
||||
if (typeof msg.matchId !== "number") {
|
||||
addLog("Protocol error: GAME_WIN missing matchId");
|
||||
break;
|
||||
}
|
||||
const game = liveGamesRef.current.get(msg.matchId);
|
||||
if (!game) break;
|
||||
const color: 1 | 2 = msg.username === game.player1 ? 1 : 2;
|
||||
const { board: next, row } = placeToken(
|
||||
game.board,
|
||||
color,
|
||||
msg.column,
|
||||
);
|
||||
updateGame(msg.matchId, {
|
||||
board: next,
|
||||
lastMove: { column: msg.column, row },
|
||||
currentTurnColor: (color === 1 ? 2 : 1) as 1 | 2,
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
updateGame(msg.matchId, {
|
||||
result: { kind: "win", winner: msg.winner },
|
||||
});
|
||||
setTimeout(() => {
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
}, 750);
|
||||
break;
|
||||
}
|
||||
case "GAME_WIN": {
|
||||
if (typeof msg.matchId !== "number") {
|
||||
addLog("Protocol error: GAME_WIN missing matchId");
|
||||
break;
|
||||
}
|
||||
|
||||
case "GAME_DRAW":
|
||||
if (typeof msg.matchId !== "number") {
|
||||
addLog("Protocol error: GAME_DRAW missing matchId");
|
||||
break;
|
||||
}
|
||||
updateGame(msg.matchId, { result: { kind: "draw" } });
|
||||
break;
|
||||
updateGame(msg.matchId, {
|
||||
result: { kind: "win", winner: msg.winner },
|
||||
});
|
||||
setTimeout(() => {
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
}, 750);
|
||||
break;
|
||||
}
|
||||
|
||||
case "GAME_TERMINATED":
|
||||
if (typeof msg.matchId !== "number") {
|
||||
addLog("Protocol error: GAME_TERMINATED missing matchId");
|
||||
break;
|
||||
}
|
||||
updateGame(msg.matchId, { result: { kind: "terminated" } });
|
||||
send(cmd.gameList());
|
||||
break;
|
||||
case "GAME_DRAW":
|
||||
if (typeof msg.matchId !== "number") {
|
||||
addLog("Protocol error: GAME_DRAW missing matchId");
|
||||
break;
|
||||
}
|
||||
updateGame(msg.matchId, { result: { kind: "draw" } });
|
||||
break;
|
||||
|
||||
case "PLAYER_LIST":
|
||||
setPlayers(msg.players);
|
||||
break;
|
||||
case "GAME_TERMINATED":
|
||||
if (typeof msg.matchId !== "number") {
|
||||
addLog("Protocol error: GAME_TERMINATED missing matchId");
|
||||
break;
|
||||
}
|
||||
updateGame(msg.matchId, { result: { kind: "terminated" } });
|
||||
send(cmd.gameList());
|
||||
break;
|
||||
|
||||
case "GET_DATA":
|
||||
if (
|
||||
msg.key === "TOURNAMENT_STATUS" &&
|
||||
msg.value &&
|
||||
msg.value !== "false"
|
||||
) {
|
||||
setTournamentActive(true);
|
||||
setTournamentType(msg.value);
|
||||
}
|
||||
break;
|
||||
case "PLAYER_LIST":
|
||||
setPlayers(msg.players);
|
||||
break;
|
||||
|
||||
case "ERROR":
|
||||
addLog(`Error: ${msg.message}`);
|
||||
break;
|
||||
case "GET_DATA":
|
||||
if (
|
||||
msg.key === "TOURNAMENT_STATUS" &&
|
||||
msg.value &&
|
||||
msg.value !== "false"
|
||||
) {
|
||||
setTournamentActive(true);
|
||||
setTournamentType(msg.value);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
case "ERROR":
|
||||
addLog(`Error: ${msg.message}`);
|
||||
break;
|
||||
|
||||
return unsubscribe;
|
||||
}, [addLog, selectedGame, send, subscribe, updateGame]);
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (status !== "connected" || role !== "observer") {
|
||||
if (pollRef.current) {
|
||||
clearInterval(pollRef.current);
|
||||
pollRef.current = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
return unsubscribe;
|
||||
}, [addLog, selectedGame, send, subscribe, updateGame]);
|
||||
|
||||
send(cmd.getData("TOURNAMENT_STATUS"));
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
useEffect(() => {
|
||||
if (status !== "connected" || role !== "observer") {
|
||||
if (pollRef.current) {
|
||||
clearInterval(pollRef.current);
|
||||
pollRef.current = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
pollRef.current = setInterval(() => {
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
}, 5000);
|
||||
send(cmd.getData("TOURNAMENT_STATUS"));
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
|
||||
return () => {
|
||||
if (pollRef.current) clearInterval(pollRef.current);
|
||||
};
|
||||
}, [role, send, status]);
|
||||
pollRef.current = setInterval(() => {
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
}, 5000);
|
||||
|
||||
const selectedGameData =
|
||||
selectedGame !== null ? liveGames.get(selectedGame) : null;
|
||||
return () => {
|
||||
if (pollRef.current) clearInterval(pollRef.current);
|
||||
};
|
||||
}, [role, send, status]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">
|
||||
👁 Observer Dashboard
|
||||
</h1>
|
||||
<p className="text-gray-400 text-sm mt-1">
|
||||
Unified spectate and tournament view
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={disconnect}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
</div>
|
||||
const selectedGameData =
|
||||
selectedGame !== null ? liveGames.get(selectedGame) : null;
|
||||
|
||||
{status !== "connected" && (
|
||||
<div className="rounded-lg border border-yellow-700 bg-yellow-950/30 px-4 py-3 text-sm text-yellow-200">
|
||||
Waiting for observer connection...
|
||||
</div>
|
||||
)}
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">
|
||||
👁 Observer Dashboard
|
||||
</h1>
|
||||
<p className="text-gray-400 text-sm mt-1">
|
||||
Unified spectate and tournament view
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={disconnect}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{status === "connected" && (
|
||||
<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">
|
||||
{gameList.length} match{gameList.length !== 1 ? "es" : ""} running
|
||||
· {players.filter((p) => p.inMatch).length}/{players.length}{" "}
|
||||
players in game
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{status !== "connected" && (
|
||||
<div className="rounded-lg border border-yellow-700 bg-yellow-950/30 px-4 py-3 text-sm text-yellow-200">
|
||||
Waiting for observer connection...
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
{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">
|
||||
{gameList.length} match{gameList.length !== 1 ? "es" : ""} running
|
||||
· {players.filter((p) => p.inMatch).length}/{players.length}{" "}
|
||||
players in game
|
||||
</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-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="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>
|
||||
)}
|
||||
</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
|
||||
</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>
|
||||
<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">
|
||||
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="lg:col-span-2 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">
|
||||
Active Matches
|
||||
</h2>
|
||||
{gameList.length === 0 ? (
|
||||
<p className="text-gray-500 text-sm text-center py-3">
|
||||
No active 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-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>
|
||||
|
||||
<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>
|
||||
);
|
||||
<div className="lg:col-span-2 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">
|
||||
Active Matches
|
||||
</h2>
|
||||
{gameList.length === 0 ? (
|
||||
<p className="text-gray-500 text-sm text-center py-3">
|
||||
No active 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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default function TournamentRedirectPage() {
|
||||
redirect("/spectate");
|
||||
redirect("/spectate");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user