feat: confetti, winner popup, bracket view
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
import Celebration from "@/components/Celebration";
|
||||
import Nav from "@/components/Nav";
|
||||
import { ConnectionProvider } from "@/lib/connection";
|
||||
|
||||
@@ -17,6 +18,7 @@ export default function RootLayout({
|
||||
<html lang="en">
|
||||
<body className="min-h-screen bg-gray-950 text-gray-100">
|
||||
<ConnectionProvider>
|
||||
<Celebration />
|
||||
<Nav />
|
||||
<main className="max-w-7xl mx-auto px-4 py-6">{children}</main>
|
||||
</ConnectionProvider>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useEffect, useState } from "react";
|
||||
import { SubmitEvent, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { DEFAULT_WS_URL } from "@/lib/protocol";
|
||||
import { useConnection } from "@/lib/connection";
|
||||
@@ -24,7 +24,7 @@ export default function Home() {
|
||||
}
|
||||
}, [shouldRedirectToConnect, clearRedirectFlag]);
|
||||
|
||||
const onSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||
const onSubmit = (event: SubmitEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
connect({ role: "observer", wsUrl });
|
||||
@@ -35,26 +35,12 @@ export default function Home() {
|
||||
<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>
|
||||
<h1 className="text-3xl font-bold text-white">Connect to 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>
|
||||
)}
|
||||
|
||||
{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">
|
||||
@@ -68,6 +54,18 @@ export default function Home() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{shouldRedirectToConnect && (
|
||||
<div className="rounded-lg border border-red-700 bg-red-950/40 px-4 py-3 text-sm text-red-200">
|
||||
Connection lost. Please reconnect to continue.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === "connected" && role && (
|
||||
<div className="rounded-lg border border-green-700 bg-green-950/30 px-4 py-3 text-sm text-green-200">
|
||||
Connected to {connectedWsUrl} as observer.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-2 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
@@ -75,7 +73,7 @@ export default function Home() {
|
||||
>
|
||||
{status === "connecting" || status === "reconnecting"
|
||||
? "Connecting..."
|
||||
: "Connect to Server"}
|
||||
: "Connect"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Confetti from "react-confetti";
|
||||
import Board from "@/components/Board";
|
||||
import {
|
||||
BoardState,
|
||||
@@ -16,6 +17,8 @@ type GamePhase = "idle" | "connected" | "ready" | "playing" | "game-over";
|
||||
|
||||
type GameResult = "win" | "loss" | "draw" | "terminated";
|
||||
|
||||
const WIN_CONFETTI_DURATION_MS = 10000;
|
||||
|
||||
export default function PlayPage() {
|
||||
const router = useRouter();
|
||||
const {
|
||||
@@ -24,7 +27,6 @@ export default function PlayPage() {
|
||||
status,
|
||||
send,
|
||||
subscribe,
|
||||
disconnect,
|
||||
reconnectAttempts,
|
||||
shouldRedirectToConnect,
|
||||
clearRedirectFlag,
|
||||
@@ -39,26 +41,16 @@ export default function PlayPage() {
|
||||
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 [showWinConfetti, setShowWinConfetti] = useState(false);
|
||||
const [viewport, setViewport] = useState({ width: 0, height: 0 });
|
||||
|
||||
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 resetGame = useCallback(() => {
|
||||
setBoard(createEmptyBoard());
|
||||
setLastMove(null);
|
||||
setMoveCount(0);
|
||||
setMyColor(null);
|
||||
myColorRef.current = null;
|
||||
setIsMyTurn(false);
|
||||
@@ -66,6 +58,33 @@ export default function PlayPage() {
|
||||
setGameResult(null);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const updateViewport = () => {
|
||||
setViewport({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
});
|
||||
};
|
||||
|
||||
updateViewport();
|
||||
window.addEventListener("resize", updateViewport);
|
||||
return () => window.removeEventListener("resize", updateViewport);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (gameResult !== "win") {
|
||||
return;
|
||||
}
|
||||
|
||||
setShowWinConfetti(true);
|
||||
const timeoutId = setTimeout(
|
||||
() => setShowWinConfetti(false),
|
||||
WIN_CONFETTI_DURATION_MS,
|
||||
);
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [gameResult]);
|
||||
|
||||
useEffect(() => {
|
||||
if (status === "disconnected" && shouldRedirectToConnect) {
|
||||
clearRedirectFlag();
|
||||
@@ -99,16 +118,13 @@ export default function PlayPage() {
|
||||
case "CONNECT_ACK":
|
||||
case "RECONNECT_ACK":
|
||||
setGamePhase((prev) => (prev === "idle" ? "connected" : prev));
|
||||
addStatus("Connected to server");
|
||||
break;
|
||||
|
||||
case "ERROR":
|
||||
addStatus(`⚠ ${msg.message}`);
|
||||
break;
|
||||
|
||||
case "READY_ACK":
|
||||
setGamePhase("ready");
|
||||
addStatus("⏳ Waiting for an opponent...");
|
||||
break;
|
||||
|
||||
case "GAME_START": {
|
||||
@@ -120,11 +136,6 @@ export default function PlayPage() {
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -139,10 +150,8 @@ export default function PlayPage() {
|
||||
setLastMove({ column: msg.column, row });
|
||||
return next;
|
||||
});
|
||||
setMoveCount((n) => n + 1);
|
||||
setIsMyTurn(true);
|
||||
isMyTurnRef.current = true;
|
||||
addStatus(`Opponent played column ${msg.column}`);
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -151,7 +160,6 @@ export default function PlayPage() {
|
||||
setGamePhase("game-over");
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
addStatus("🏆 You won!");
|
||||
break;
|
||||
|
||||
case "GAME_LOSS":
|
||||
@@ -159,7 +167,6 @@ export default function PlayPage() {
|
||||
setGamePhase("game-over");
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
addStatus("💔 You lost");
|
||||
break;
|
||||
|
||||
case "GAME_DRAW":
|
||||
@@ -167,7 +174,6 @@ export default function PlayPage() {
|
||||
setGamePhase("game-over");
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
addStatus("🤝 Draw");
|
||||
break;
|
||||
|
||||
case "GAME_TERMINATED":
|
||||
@@ -175,12 +181,10 @@ export default function PlayPage() {
|
||||
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_END":
|
||||
@@ -188,14 +192,12 @@ export default function PlayPage() {
|
||||
resetGame();
|
||||
send(cmd.ready());
|
||||
setGamePhase("ready");
|
||||
addStatus("⏳ Ready for next round...");
|
||||
break;
|
||||
|
||||
case "TOURNAMENT_CANCEL":
|
||||
setTournamentMode(false);
|
||||
setGamePhase("connected");
|
||||
resetGame();
|
||||
addStatus("Tournament cancelled");
|
||||
break;
|
||||
|
||||
default:
|
||||
@@ -204,7 +206,7 @@ export default function PlayPage() {
|
||||
});
|
||||
|
||||
return unsubscribe;
|
||||
}, [addStatus, resetGame, send, subscribe]);
|
||||
}, [resetGame, send, subscribe]);
|
||||
|
||||
const handleColumnClick = useCallback(
|
||||
(col: number) => {
|
||||
@@ -221,18 +223,15 @@ export default function PlayPage() {
|
||||
|
||||
setIsMyTurn(false);
|
||||
isMyTurnRef.current = false;
|
||||
setMoveCount((n) => n + 1);
|
||||
send(cmd.play(col));
|
||||
addStatus(`You played column ${col}`);
|
||||
},
|
||||
[addStatus, gamePhase, send],
|
||||
[gamePhase, send],
|
||||
);
|
||||
|
||||
const sendReady = useCallback(() => {
|
||||
send(cmd.ready());
|
||||
setGamePhase("ready");
|
||||
addStatus("⏳ Waiting for an opponent...");
|
||||
}, [addStatus, send]);
|
||||
}, [send]);
|
||||
|
||||
const myColorLabel =
|
||||
myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null;
|
||||
@@ -243,6 +242,17 @@ export default function PlayPage() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{showWinConfetti && (
|
||||
<Confetti
|
||||
width={viewport.width}
|
||||
height={viewport.height}
|
||||
recycle={false}
|
||||
numberOfPieces={300}
|
||||
gravity={0.28}
|
||||
className="pointer-events-none fixed! inset-0! z-40!"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">🎮 Play Connect4</h1>
|
||||
@@ -262,26 +272,6 @@ export default function PlayPage() {
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-col gap-3">
|
||||
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider">
|
||||
Session
|
||||
</h2>
|
||||
|
||||
<div className="text-xs text-gray-400">
|
||||
Status: <span className="text-gray-200">{status}</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
User: <span className="text-gray-200">{username}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={disconnect}
|
||||
className="w-full py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-col gap-3">
|
||||
<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider">
|
||||
Match
|
||||
@@ -313,9 +303,6 @@ export default function PlayPage() {
|
||||
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>
|
||||
@@ -334,10 +321,6 @@ export default function PlayPage() {
|
||||
: "⏳ Waiting for opponent..."}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-xs text-gray-500 text-center">
|
||||
{moveCount} move{moveCount !== 1 ? "s" : ""} played
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -350,23 +333,6 @@ export default function PlayPage() {
|
||||
</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="lg:col-span-2 bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center justify-center gap-4 min-h-96">
|
||||
@@ -418,7 +384,6 @@ export default function PlayPage() {
|
||||
: "⛔ Match Terminated"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Board
|
||||
board={board}
|
||||
lastMove={lastMove}
|
||||
@@ -455,7 +420,7 @@ function PhaseIndicator({
|
||||
}) {
|
||||
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">
|
||||
<span className="px-3 py-1.5 rounded-full text-sm font-medium bg-green-900/60 text-green-300">
|
||||
Your Turn!
|
||||
</span>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Board from "@/components/Board";
|
||||
import {
|
||||
@@ -30,6 +30,29 @@ interface LiveGame {
|
||||
| null;
|
||||
}
|
||||
|
||||
interface KnockoutMatchView {
|
||||
key: string;
|
||||
roundIndex: number;
|
||||
matchIndex: number;
|
||||
player1: string | null;
|
||||
player2: string | null;
|
||||
winner: string | null;
|
||||
currentTurnColor: 1 | 2 | null;
|
||||
matchId: number | null;
|
||||
status: "scheduled" | "live" | "completed";
|
||||
resultKind: LiveGame["result"] extends infer T
|
||||
? T extends { kind: infer K }
|
||||
? K
|
||||
: null
|
||||
: null;
|
||||
}
|
||||
|
||||
interface KnockoutRoundView {
|
||||
label: string;
|
||||
matches: KnockoutMatchView[];
|
||||
projected?: boolean;
|
||||
}
|
||||
|
||||
export default function SpectatePage() {
|
||||
const router = useRouter();
|
||||
const {
|
||||
@@ -50,8 +73,11 @@ export default function SpectatePage() {
|
||||
const [liveGames, setLiveGames] = useState<Map<number, LiveGame>>(new Map());
|
||||
const [selectedGame, setSelectedGame] = useState<number | null>(null);
|
||||
const [log, setLog] = useState<string[]>([]);
|
||||
const [knockoutRawData, setKnockoutRawData] = useState("");
|
||||
const [tournamentWinner, setTournamentWinner] = useState<string | null>(null);
|
||||
|
||||
const liveGamesRef = useRef<Map<number, LiveGame>>(new Map());
|
||||
const initialBoardSyncPendingRef = useRef(true);
|
||||
|
||||
const addLog = useCallback(
|
||||
(msg: string) =>
|
||||
@@ -97,20 +123,35 @@ export default function SpectatePage() {
|
||||
}, [role, status, shouldRedirectToConnect, clearRedirectFlag, router]);
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = subscribe((msg: ParsedMessage) => {
|
||||
const unsubscribe = subscribe((msg: ParsedMessage, raw: string) => {
|
||||
if (
|
||||
tournamentType === "KnockoutBracket" &&
|
||||
msg.type === "UNKNOWN" &&
|
||||
isKnockoutDataMessage(raw)
|
||||
) {
|
||||
setKnockoutRawData(raw);
|
||||
}
|
||||
|
||||
switch (msg.type) {
|
||||
case "TOURNAMENT_START":
|
||||
setTournamentActive(true);
|
||||
setTournamentType(msg.tournamentType);
|
||||
setScores([]);
|
||||
setKnockoutRawData("");
|
||||
setTournamentWinner(null);
|
||||
addLog(`🏆 Tournament started: ${msg.tournamentType}`);
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
if (msg.tournamentType === "KnockoutBracket") {
|
||||
send(cmd.getData("TOURNAMENT_DATA"));
|
||||
}
|
||||
break;
|
||||
|
||||
case "TOURNAMENT_CANCEL":
|
||||
setTournamentActive(false);
|
||||
setTournamentType(null);
|
||||
setKnockoutRawData("");
|
||||
setTournamentWinner(null);
|
||||
addLog("❌ Tournament cancelled");
|
||||
break;
|
||||
|
||||
@@ -126,6 +167,10 @@ export default function SpectatePage() {
|
||||
send(cmd.playerList());
|
||||
break;
|
||||
|
||||
case "TOURNAMENT_WINNER":
|
||||
setTournamentWinner(msg.username);
|
||||
break;
|
||||
|
||||
case "CONNECT_EVENT":
|
||||
addLog(`Player joined: ${msg.username}`);
|
||||
send(cmd.playerList());
|
||||
@@ -159,15 +204,26 @@ export default function SpectatePage() {
|
||||
);
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
if (tournamentType === "KnockoutBracket" && !knockoutRawData) {
|
||||
send(cmd.getData("TOURNAMENT_DATA"));
|
||||
}
|
||||
break;
|
||||
|
||||
case "GAME_LIST":
|
||||
setGameList(msg.games);
|
||||
const shouldHydrateWithWatch = initialBoardSyncPendingRef.current;
|
||||
for (const g of msg.games) {
|
||||
if (!liveGamesRef.current.has(g.id)) {
|
||||
const isNewMatch = !liveGamesRef.current.has(g.id);
|
||||
updateGame(g.id, { player1: g.player1, player2: g.player2 });
|
||||
|
||||
if (isNewMatch && shouldHydrateWithWatch) {
|
||||
send(cmd.gameWatch(g.id));
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldHydrateWithWatch) {
|
||||
initialBoardSyncPendingRef.current = false;
|
||||
}
|
||||
break;
|
||||
|
||||
case "GAME_WATCH_ACK": {
|
||||
@@ -251,6 +307,11 @@ export default function SpectatePage() {
|
||||
) {
|
||||
setTournamentActive(true);
|
||||
setTournamentType(msg.value);
|
||||
if (msg.value === "KnockoutBracket") {
|
||||
send(cmd.getData("TOURNAMENT_DATA"));
|
||||
}
|
||||
} else if (msg.key === "TOURNAMENT_DATA" && msg.value) {
|
||||
setKnockoutRawData(msg.value);
|
||||
}
|
||||
break;
|
||||
|
||||
@@ -264,11 +325,12 @@ export default function SpectatePage() {
|
||||
});
|
||||
|
||||
return unsubscribe;
|
||||
}, [addLog, send, subscribe, updateGame]);
|
||||
}, [addLog, knockoutRawData, send, subscribe, tournamentType, updateGame]);
|
||||
|
||||
useEffect(() => {
|
||||
if (status !== "connected" || role !== "observer") return;
|
||||
|
||||
initialBoardSyncPendingRef.current = true;
|
||||
send(cmd.getData("TOURNAMENT_STATUS"));
|
||||
send(cmd.gameList());
|
||||
send(cmd.playerList());
|
||||
@@ -276,26 +338,28 @@ export default function SpectatePage() {
|
||||
|
||||
const selectedGameData =
|
||||
selectedGame !== null ? liveGames.get(selectedGame) : null;
|
||||
const showLeaderboard = tournamentType === "RoundRobin";
|
||||
const showKnockoutBracket = tournamentType === "KnockoutBracket";
|
||||
const knockoutRounds = useMemo(
|
||||
() => parseKnockoutRounds(knockoutRawData),
|
||||
[knockoutRawData],
|
||||
);
|
||||
const sortedPlayers = useMemo(
|
||||
() =>
|
||||
[...players].sort((a, b) =>
|
||||
a.username.localeCompare(b.username, undefined, {
|
||||
sensitivity: "base",
|
||||
}),
|
||||
),
|
||||
[players],
|
||||
);
|
||||
const knockoutBracket = useMemo(
|
||||
() => buildKnockoutBracket(knockoutRounds, liveGames, tournamentWinner),
|
||||
[knockoutRounds, liveGames, tournamentWinner],
|
||||
);
|
||||
|
||||
return (
|
||||
<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-lg border border-yellow-700 bg-yellow-950/30 px-4 py-3 text-sm text-yellow-200">
|
||||
Waiting for observer connection...
|
||||
@@ -328,34 +392,6 @@ export default function SpectatePage() {
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="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-3 flex items-center justify-between">
|
||||
<span>Players</span>
|
||||
@@ -369,7 +405,7 @@ export default function SpectatePage() {
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{players.map((p) => (
|
||||
{sortedPlayers.map((p) => (
|
||||
<div
|
||||
key={p.username}
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-800"
|
||||
@@ -396,29 +432,140 @@ export default function SpectatePage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div 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}
|
||||
{showLeaderboard && (
|
||||
<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>
|
||||
))}
|
||||
{log.length === 0 && (
|
||||
<p className="text-gray-600 text-xs">No events 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>
|
||||
)}
|
||||
</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
|
||||
{showKnockoutBracket ? "Tournament Bracket" : "Active Matches"}
|
||||
</h2>
|
||||
{gameList.length === 0 ? (
|
||||
{showKnockoutBracket ? (
|
||||
knockoutBracket.length === 0 ? (
|
||||
<div className="rounded-lg border border-dashed border-gray-700 bg-gray-950/60 px-4 py-6 text-center text-sm text-gray-500">
|
||||
Knockout seeding is still in progress. The bracket will appear
|
||||
once tournament data is available.
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto pb-2">
|
||||
<div className="flex min-w-max place-content-center items-stretch gap-10">
|
||||
{knockoutBracket.map((round) => (
|
||||
<div
|
||||
key={round.label}
|
||||
className="flex w-60 shrink-0 flex-col"
|
||||
>
|
||||
<div className="mb-3 text-center">
|
||||
<span className="block text-xs font-semibold uppercase tracking-[0.2em] text-gray-400">
|
||||
{round.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col justify-center gap-3">
|
||||
{round.matches.map((match) => {
|
||||
const isSelected =
|
||||
match.matchId !== null &&
|
||||
selectedGame === match.matchId;
|
||||
const canSelect = match.matchId !== null;
|
||||
const borderClass =
|
||||
match.status === "completed"
|
||||
? "border-green-700/80"
|
||||
: "border-gray-700";
|
||||
|
||||
const Tag = canSelect ? "button" : "div";
|
||||
|
||||
return (
|
||||
<Tag
|
||||
key={match.key}
|
||||
{...(canSelect
|
||||
? {
|
||||
onClick: () =>
|
||||
setSelectedGame(
|
||||
isSelected ? null : match.matchId,
|
||||
),
|
||||
type: "button" as const,
|
||||
}
|
||||
: {})}
|
||||
className={`w-full rounded-xl border bg-gray-950/70 p-3 text-left transition-colors ${borderClass} ${
|
||||
canSelect
|
||||
? isSelected
|
||||
? "ring-1 ring-blue-400"
|
||||
: "hover:border-blue-700/80"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<BracketPlayerRow
|
||||
name={match.player1}
|
||||
playerColor={1}
|
||||
isActive={match.currentTurnColor === 1}
|
||||
/>
|
||||
<BracketPlayerRow
|
||||
name={match.player2}
|
||||
playerColor={2}
|
||||
isActive={match.currentTurnColor === 2}
|
||||
/>
|
||||
<div className="flex items-center justify-between pt-1 text-xs">
|
||||
<span className="text-gray-500">
|
||||
{match.matchId !== null
|
||||
? `Match #${match.matchId}`
|
||||
: "Awaiting match"}
|
||||
</span>
|
||||
<span
|
||||
className={`rounded-full px-2 py-0.5 ${
|
||||
match.status === "completed"
|
||||
? "bg-green-950/70 text-green-300"
|
||||
: match.status === "live"
|
||||
? "bg-blue-950/70 text-blue-300"
|
||||
: "bg-gray-800 text-gray-400"
|
||||
}`}
|
||||
>
|
||||
{match.status === "completed"
|
||||
? match.resultKind === "draw"
|
||||
? "Tie"
|
||||
: "Complete"
|
||||
: match.status === "live"
|
||||
? "Live"
|
||||
: "Pending"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : gameList.length === 0 ? (
|
||||
<p className="text-gray-500 text-sm text-center py-3">
|
||||
No active matches
|
||||
</p>
|
||||
@@ -509,3 +656,207 @@ export default function SpectatePage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BracketPlayerRow({
|
||||
name,
|
||||
playerColor,
|
||||
isActive,
|
||||
}: {
|
||||
name: string | null;
|
||||
playerColor: 1 | 2;
|
||||
isActive: boolean;
|
||||
}) {
|
||||
const isRed = playerColor === 1;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors ${
|
||||
isActive
|
||||
? isRed
|
||||
? "border-red-500 bg-red-950/50 text-red-300"
|
||||
: "border-yellow-500 bg-yellow-950/50 text-yellow-300"
|
||||
: "border-gray-700 bg-gray-900 text-gray-400"
|
||||
}`}
|
||||
>
|
||||
{name && (
|
||||
<div
|
||||
className={`h-3.5 w-3.5 shrink-0 rounded-full ${
|
||||
isRed ? "bg-red-500" : "bg-yellow-400"
|
||||
} ${isActive ? "animate-pulse" : ""}`}
|
||||
/>
|
||||
)}
|
||||
<span className={`font-medium ${name ? "" : "text-gray-500"}`}>
|
||||
{name ?? "TBD"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function isKnockoutDataMessage(raw: string) {
|
||||
return !raw.includes(":") && (raw.includes(",") || raw.includes("|"));
|
||||
}
|
||||
|
||||
function parseKnockoutRounds(raw: string) {
|
||||
if (!raw) return [] as string[][];
|
||||
|
||||
return raw
|
||||
.split("|")
|
||||
.filter(Boolean)
|
||||
.map((round) =>
|
||||
round
|
||||
.split(",")
|
||||
.map((player) => player.trim())
|
||||
.filter(Boolean),
|
||||
)
|
||||
.filter((round) => round.length > 0);
|
||||
}
|
||||
|
||||
function buildKnockoutBracket(
|
||||
rounds: string[][],
|
||||
liveGames: Map<number, LiveGame>,
|
||||
tournamentWinner: string | null,
|
||||
) {
|
||||
if (rounds.length === 0) return [] as KnockoutRoundView[];
|
||||
|
||||
const liveGameEntries = Array.from(liveGames.values()).sort(
|
||||
(a, b) => b.id - a.id,
|
||||
);
|
||||
const displayRounds: Array<{
|
||||
label: string;
|
||||
players: Array<string | null>;
|
||||
projected?: boolean;
|
||||
}> = rounds.map((players, index) => ({
|
||||
label: knockoutRoundLabel(index, players.length),
|
||||
players,
|
||||
}));
|
||||
|
||||
while (displayRounds[displayRounds.length - 1]?.players.length > 2) {
|
||||
const latestRoundPlayers = displayRounds[displayRounds.length - 1].players;
|
||||
const projectedPlayers = latestRoundPlayers.reduce<Array<string | null>>(
|
||||
(acc, _, index, source) => {
|
||||
if (index % 2 !== 0) return acc;
|
||||
const player1 = source[index] ?? null;
|
||||
const player2 = source[index + 1] ?? null;
|
||||
const liveMatch = findLiveMatch(liveGameEntries, player1, player2);
|
||||
acc.push(
|
||||
resolveLiveWinner(liveMatch, tournamentWinner, player1, player2),
|
||||
);
|
||||
return acc;
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
displayRounds.push({
|
||||
label: knockoutRoundLabel(displayRounds.length, projectedPlayers.length),
|
||||
players: projectedPlayers,
|
||||
projected: true,
|
||||
});
|
||||
}
|
||||
|
||||
return displayRounds.map((round, roundIndex) => ({
|
||||
label: round.label,
|
||||
projected: round.projected,
|
||||
matches: pairPlayers(round.players).map(
|
||||
([player1, player2], matchIndex) => {
|
||||
const nextRound = displayRounds[roundIndex + 1];
|
||||
const nextRoundPlayer = nextRound?.players[matchIndex] ?? null;
|
||||
const liveMatch = findLiveMatch(liveGameEntries, player1, player2);
|
||||
const isProjectedRound = Boolean(round.projected);
|
||||
const hasKnownPlayers = Boolean(player1 && player2);
|
||||
const hasAdvancedPastRound =
|
||||
roundIndex < rounds.length - 1 &&
|
||||
!displayRounds[roundIndex + 1]?.projected;
|
||||
const inferredCompletedRealMatch =
|
||||
!isProjectedRound && hasKnownPlayers && !liveMatch;
|
||||
const winner =
|
||||
nextRoundPlayer &&
|
||||
(nextRoundPlayer === player1 || nextRoundPlayer === player2)
|
||||
? nextRoundPlayer
|
||||
: resolveLiveWinner(liveMatch, tournamentWinner, player1, player2);
|
||||
const status =
|
||||
winner || hasAdvancedPastRound || inferredCompletedRealMatch
|
||||
? "completed"
|
||||
: liveMatch
|
||||
? "live"
|
||||
: "scheduled";
|
||||
|
||||
return {
|
||||
key: `${roundIndex}-${matchIndex}-${player1 ?? "tbd"}-${player2 ?? "tbd"}`,
|
||||
roundIndex,
|
||||
matchIndex,
|
||||
player1,
|
||||
player2,
|
||||
winner,
|
||||
currentTurnColor: winner
|
||||
? null
|
||||
: (liveMatch?.currentTurnColor ?? null),
|
||||
matchId: liveMatch?.id ?? null,
|
||||
status,
|
||||
resultKind: liveMatch?.result?.kind ?? null,
|
||||
} satisfies KnockoutMatchView;
|
||||
},
|
||||
),
|
||||
}));
|
||||
}
|
||||
|
||||
function pairPlayers(players: Array<string | null>) {
|
||||
const pairs: Array<[string | null, string | null]> = [];
|
||||
for (let index = 0; index < players.length; index += 2) {
|
||||
pairs.push([players[index] ?? null, players[index + 1] ?? null]);
|
||||
}
|
||||
return pairs;
|
||||
}
|
||||
|
||||
function findLiveMatch(
|
||||
liveGames: LiveGame[],
|
||||
player1: string | null,
|
||||
player2: string | null,
|
||||
) {
|
||||
if (!player1 || !player2) return null;
|
||||
|
||||
return (
|
||||
liveGames.find((game) =>
|
||||
samePlayers(game.player1, game.player2, player1, player2),
|
||||
) ?? null
|
||||
);
|
||||
}
|
||||
|
||||
function resolveLiveWinner(
|
||||
liveMatch: LiveGame | null,
|
||||
tournamentWinner: string | null,
|
||||
player1: string | null,
|
||||
player2: string | null,
|
||||
) {
|
||||
if (liveMatch?.result?.kind === "win") {
|
||||
return liveMatch.result.winner;
|
||||
}
|
||||
|
||||
if (
|
||||
tournamentWinner &&
|
||||
(tournamentWinner === player1 || tournamentWinner === player2)
|
||||
) {
|
||||
return tournamentWinner;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function samePlayers(
|
||||
left1: string,
|
||||
left2: string,
|
||||
right1: string,
|
||||
right2: string,
|
||||
) {
|
||||
return (
|
||||
(left1 === right1 && left2 === right2) ||
|
||||
(left1 === right2 && left2 === right1)
|
||||
);
|
||||
}
|
||||
|
||||
function knockoutRoundLabel(roundIndex: number, playerCount: number) {
|
||||
if (playerCount <= 1) return "Champion";
|
||||
if (playerCount === 2) return "Final";
|
||||
if (playerCount === 4) return "Semifinals";
|
||||
if (playerCount === 8) return "Quarterfinals";
|
||||
return `Round ${roundIndex + 1}`;
|
||||
}
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default function TournamentRedirectPage() {
|
||||
redirect("/spectate");
|
||||
}
|
||||
Reference in New Issue
Block a user