feat: confetti, winner popup, bracket view

2026-03-30 16:53:13 -04:00
parent 77724ba260
commit e4fa58f327
13 changed files with 640 additions and 217 deletions
--- a/connect4-ui/app/layout.tsx
+++ b/connect4-ui/app/layout.tsx
@@ -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>
--- a/connect4-ui/app/page.tsx
+++ b/connect4-ui/app/page.tsx
@@ -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>
--- a/connect4-ui/app/play/page.tsx
+++ b/connect4-ui/app/play/page.tsx
@@ -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>
    );
--- a/connect4-ui/app/spectate/page.tsx
+++ b/connect4-ui/app/spectate/page.tsx
@@ -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}`;
+}
--- a/connect4-ui/app/tournament/page.tsx
+++ b/connect4-ui/app/tournament/page.tsx
@@ -1,5 +0,0 @@
-import { redirect } from "next/navigation";
-
-export default function TournamentRedirectPage() {
-  redirect("/spectate");
-}
--- a/connect4-ui/components/Board.tsx
+++ b/connect4-ui/components/Board.tsx
@@ -37,11 +37,12 @@ export default function Board({
                : "border-gray-700 bg-gray-900 text-gray-400"
            }`}
          >
-            <div className="w-3.5 h-3.5 rounded-full bg-red-500 shrink-0" />
-            <span className="font-medium">{player1}</span>
-            {currentTurnColor === 1 && (
-              <span className="text-xs text-red-400 animate-pulse">● Turn</span>
+            {currentTurnColor === 1 ? (
+              <div className="w-3.5 h-3.5 rounded-full bg-red-500 shrink-0 animate-pulse" />
+            ) : (
+              <div className="w-3.5 h-3.5 rounded-full bg-red-500 shrink-0" />
            )}
+            <span className="font-medium">{player1}</span>
          </div>
          <span className="text-gray-600 font-bold">vs</span>
          <div
@@ -51,13 +52,12 @@ export default function Board({
                : "border-gray-700 bg-gray-900 text-gray-400"
            }`}
          >
-            <div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0" />
-            <span className="font-medium">{player2}</span>
-            {currentTurnColor === 2 && (
-              <span className="text-xs text-yellow-400 animate-pulse">
-                ● Turn
-              </span>
+            {currentTurnColor === 2 ? (
+              <div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0 animate-pulse" />
+            ) : (
+              <div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0" />
            )}
+            <span className="font-medium">{player2}</span>
          </div>
        </div>
      )}
@@ -128,9 +128,9 @@ export default function Board({
          {Array.from({ length: 7 }, (_, col) => (
            <div
              key={col}
-              className="w-12 p-1 text-center text-xs text-blue-400/70 font-mono"
+              className="w-14 p-1 text-center text-xs text-blue-400/70 font-mono"
            >
-              {col}
+              {col + 1}
            </div>
          ))}
        </div>
--- a/connect4-ui/components/Celebration.tsx
+++ b/connect4-ui/components/Celebration.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Confetti from "react-confetti";
+import { useConnection } from "@/lib/connection";
+
+export default function Celebration() {
+  const { subscribe } = useConnection();
+  const [winner, setWinner] = useState<string | null>(null);
+  const [viewport, setViewport] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const updateViewport = () => {
+      setViewport({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    updateViewport();
+    window.addEventListener("resize", updateViewport);
+    return () => window.removeEventListener("resize", updateViewport);
+  }, []);
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    const unsubscribe = subscribe((msg) => {
+      if (msg.type !== "TOURNAMENT_WINNER") return;
+
+      setWinner(msg.username || "Unknown player");
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [subscribe]);
+
+  if (!winner) return null;
+
+  return (
+    <>
+      <Confetti
+        width={viewport.width}
+        height={viewport.height}
+        recycle={false}
+        numberOfPieces={600}
+        gravity={0.2}
+        className="pointer-events-none fixed! inset-0! z-90!"
+      />
+      <div className="pointer-events-none fixed inset-0 z-100 flex items-center justify-center px-4">
+        <div className="pointer-events-auto w-full max-w-xl rounded-3xl border border-amber-300/40 bg-linear-to-br from-amber-300 via-yellow-200 to-orange-300 p-1px shadow-2xl shadow-amber-950/60">
+          <div className="rounded-[calc(1.5rem-1px)] bg-slate-950/95 px-8 py-10 text-center backdrop-blur">
+            <div className="text-5xl">🏆</div>
+            <p className="mt-4 text-sm font-semibold uppercase tracking-[0.35em] text-amber-200/80">
+              Tournament Winner
+            </p>
+            <h2 className="mt-3 text-4xl font-black tracking-tight text-white sm:text-5xl">
+              {winner}
+            </h2>
+            <p className="mt-4 text-base text-amber-100/85">
+              Dominated the bracket and closed out the tournament.
+            </p>
+            <button
+              type="button"
+              onClick={() => setWinner(null)}
+              className="mt-7 inline-flex items-center justify-center rounded-full border border-amber-200/30 bg-amber-300/15 px-5 py-2 text-sm font-semibold text-amber-100 transition hover:bg-amber-300/25"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/connect4-ui/components/Nav.tsx
+++ b/connect4-ui/components/Nav.tsx
@@ -1,26 +1,17 @@
 "use client";
 import Link from "next/link";
-import { FormEvent, useState } from "react";
+import { SubmitEvent, useState } from "react";
 import { useRouter } from "next/navigation";
 import { usePathname } from "next/navigation";
 import { useConnection } from "@/lib/connection";
-import { cmd, DEFAULT_WS_URL } from "@/lib/protocol";
+import { cmd } from "@/lib/protocol";

 export default function Nav() {
  const pathname = usePathname();
  const router = useRouter();
-  const { status, role, username, send, becomePlayer } = useConnection();
+  const { status, role, username, send, becomePlayer, disconnect } = useConnection();
  const [showPlayerModal, setShowPlayerModal] = useState(false);
  const [nextUsername, setNextUsername] = useState(username);
-
-  const statusLabel =
-    status === "connected"
-      ? `Connected ${role === "player" ? `as ${username}` : "as observer"}`
-      : status === "reconnecting"
-        ? "Reconnecting..."
-        : status === "connecting"
-          ? "Connecting..."
-          : "Not connected";
  const isConnectionPage = pathname === "/";

  const disableRoleSwitch =
@@ -31,7 +22,7 @@ export default function Nav() {
    router.push("/spectate");
  };

-  const handleBecomePlayer = (event: FormEvent<HTMLFormElement>) => {
+  const handleBecomePlayer = (event: SubmitEvent<HTMLFormElement>) => {
    event.preventDefault();
    const trimmed = nextUsername.trim();
    if (!trimmed) return;
@@ -50,31 +41,35 @@ export default function Nav() {
            className="text-lg font-bold text-white flex items-center gap-2"
          >
            <span className="text-2xl">🔴</span>
-            <span>Connect4</span>
-            <span className="text-gray-400 text-sm font-normal">Moderator</span>
+            <span>Connect4 Observer</span>
          </Link>

          <div className="ml-auto flex items-center gap-2">
            {!isConnectionPage && (
-              <button
-                onClick={
-                  role === "player"
-                    ? handleBecomeObserver
-                    : () => {
-                        setNextUsername(username);
-                        setShowPlayerModal(true);
-                      }
-                }
-                disabled={disableRoleSwitch}
-                className="px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white"
-              >
-                {role === "player" ? "Become Observer" : "Become Player"}
-              </button>
-            )}
+              <>
+                <button
+                  onClick={
+                    role === "player"
+                      ? handleBecomeObserver
+                      : () => {
+                          setNextUsername(username);
+                          setShowPlayerModal(true);
+                        }
+                  }
+                  disabled={disableRoleSwitch}
+                  className="px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white"
+                >
+                  {role === "player" ? "Become Observer" : "Become Player"}
+                </button>

-            <div className="text-xs text-gray-400 bg-gray-800 px-3 py-1 rounded-full">
-              {statusLabel}
-            </div>
+                <button
+                  onClick={disconnect}
+                  className="px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-gray-700 hover:bg-red-600 text-white"
+                >
+                  Disconnect
+                </button>
+              </>
+            )}
          </div>
        </div>
      </nav>
--- a/connect4-ui/lib/connection.tsx
+++ b/connect4-ui/lib/connection.tsx
@@ -160,7 +160,9 @@ export function ConnectionProvider({

      socket.onmessage = (event) => {
        const raw = event.data as string;
-        console.log(raw);
+        if (process.env.NODE_ENV === "development") {
+          console.log("Recieved: " + raw);
+        }
        const parsed = parseMessage(raw);

        if (parsed.type === "OBSERVE_ACK") {
@@ -319,6 +321,9 @@ export function ConnectionProvider({

  const send = useCallback((message: string) => {
    if (wsRef.current?.readyState !== WebSocket.OPEN) return false;
+    if (process.env.NODE_ENV === "development") {
+      console.log("Sending: " + message);
+    }
    wsRef.current.send(message);
    return true;
  }, []);
--- a/connect4-ui/lib/protocol.ts
+++ b/connect4-ui/lib/protocol.ts
@@ -66,6 +66,7 @@ export type ParsedMessage =
  | { type: "TOURNAMENT_START"; tournamentType: string }
  | { type: "TOURNAMENT_CANCEL" }
  | { type: "TOURNAMENT_SCORES"; scores: ScoreEntry[] }
+  | { type: "TOURNAMENT_WINNER"; username: string }
  | { type: "TOURNAMENT_END" }
  | { type: "ADMIN_AUTH_ACK" }
  | { type: "GET_DATA"; key: string; value: string }
@@ -232,6 +233,8 @@ export function parseMessage(raw: string): ParsedMessage {
          });
          return { type: "TOURNAMENT_SCORES", scores };
        }
+        case "WINNER":
+          return { type: "TOURNAMENT_WINNER", username: parts[2] ?? "" };
        case "END":
          return { type: "TOURNAMENT_END" };
      }
@@ -244,7 +247,11 @@ export function parseMessage(raw: string): ParsedMessage {
      break;

    case "GET":
-      return { type: "GET_DATA", key: parts[1], value: parts[2] ?? "" };
+      return {
+        type: "GET_DATA",
+        key: parts[1],
+        value: parts.slice(2).join(":"),
+      };

    case "SET":
      if (parts[2] === "ACK") return { type: "SET_DATA_ACK", key: parts[1] };
@@ -277,7 +284,12 @@ export const cmd = {
  tournamentStart: (type = "RoundRobin") => `TOURNAMENT:START:${type}`,
  tournamentCancel: () => "TOURNAMENT:CANCEL",
  getData: (
-    key: "TOURNAMENT_STATUS" | "MOVE_WAIT" | "DEMO_MODE" | "MAX_TIMEOUT",
+    key:
+      | "TOURNAMENT_STATUS"
+      | "TOURNAMENT_DATA"
+      | "MOVE_WAIT"
+      | "DEMO_MODE"
+      | "MAX_TIMEOUT",
  ) => `GET:${key}`,
  setData: (key: string, value: string) => `SET:${key}:${value}`,
  reservationAdd: (p1: string, p2: string) => `RESERVATION:ADD:${p1},${p2}`,
--- a/connect4-ui/package-lock.json
+++ b/connect4-ui/package-lock.json
@@ -10,6 +10,7 @@
      "dependencies": {
        "next": "15.2.4",
        "react": "^19.0.0",
+        "react-confetti": "^6.4.0",
        "react-dom": "^19.0.0"
      },
      "devDependencies": {
@@ -5031,6 +5032,21 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-confetti": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.4.0.tgz",
+      "integrity": "sha512-5MdGUcqxrTU26I2EU7ltkWPwxvucQTuqMm8dUz72z2YMqTD6s9vMcDUysk7n9jnC+lXuCPeJJ7Knf98VEYE9Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "tween-functions": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/react-dom": {
      "version": "19.2.4",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
@@ -5779,6 +5795,12 @@
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
      "license": "0BSD"
    },
+    "node_modules/tween-functions": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
+      "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==",
+      "license": "BSD"
+    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
--- a/connect4-ui/package.json
+++ b/connect4-ui/package.json
@@ -13,6 +13,7 @@
  "dependencies": {
    "next": "15.2.4",
    "react": "^19.0.0",
+    "react-confetti": "^6.4.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
--- a/connect4-ui/tsconfig.tsbuildinfo
+++ b/connect4-ui/tsconfig.tsbuildinfo