From f73fc4ec68b1f9c371d10c098c0921f47c1d18b7 Mon Sep 17 00:00:00 2001
From: Joshua Higgins <joshuafhiggins@gmail.com>
Date: Mon, 16 Mar 2026 23:47:20 -0400
Subject: [PATCH] everything

---
 connect4-ui/app/layout.tsx          |  27 +-
 connect4-ui/app/page.tsx            | 157 ++---
 connect4-ui/app/play/page.tsx       | 912 +++++++++++++---------------
 connect4-ui/app/spectate/page.tsx   | 771 +++++++++++++----------
 connect4-ui/app/tournament/page.tsx | 547 +----------------
 connect4-ui/components/Nav.tsx      | 148 ++++-
 connect4-ui/lib/connection.tsx      | 384 ++++++++++++
 connect4-ui/lib/protocol.ts         | 421 +++++++------
 8 files changed, 1679 insertions(+), 1688 deletions(-)
 create mode 100644 connect4-ui/lib/connection.tsx
diff --git a/connect4-ui/app/layout.tsx b/connect4-ui/app/layout.tsx
index c28416a..f0cc295 100644
--- a/connect4-ui/app/layout.tsx
+++ b/connect4-ui/app/layout.tsx
@@ -1,23 +1,26 @@
 import type { Metadata } from "next";
 import "./globals.css";
 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">
-        <Nav />
-        <main className="max-w-7xl mx-auto px-4 py-6">{children}</main>
-      </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>
+	);
 }
diff --git a/connect4-ui/app/page.tsx b/connect4-ui/app/page.tsx
index 398749e..5288ca2 100644
--- a/connect4-ui/app/page.tsx
+++ b/connect4-ui/app/page.tsx
@@ -1,84 +1,85 @@
-import Link from "next/link";
+"use client";
 
-const cards = [
-  {
-    href: "/spectate",
-    icon: "👁",
-    title: "Spectate Matches",
-    desc: "Watch live Connect4 games in real time. See every move as it happens on an interactive board.",
-    color: "border-blue-600 hover:border-blue-400",
-    badge: "Observer",
-  },
-  {
-    href: "/tournament",
-    icon: "🏆",
-    title: "Tournament View",
-    desc: "Track tournament standings, scores, and active rounds. Stay updated with live leaderboards.",
-    color: "border-purple-600 hover:border-purple-400",
-    badge: "Live Stats",
-  },
-  {
-    href: "/play",
-    icon: "🎮",
-    title: "Play as Human",
-    desc: "Join the server as a player. Connect with a username, ready up, and play Connect4 live.",
-    color: "border-green-600 hover:border-green-400",
-    badge: "Interactive",
-  },
-];
+import { FormEvent, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { DEFAULT_WS_URL } from "@/lib/protocol";
+import { useConnection } from "@/lib/connection";
 
 export default function Home() {
-  return (
-    <div className="flex flex-col items-center gap-10 py-12">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-white mb-3">
-          Connect4 Moderator
-        </h1>
-        <p className="text-gray-400 text-lg max-w-xl">
-          Student AI tournament platform — watch games, track standings, or play
-          yourself.
-        </p>
-      </div>
+	const router = useRouter();
+	const {
+		connect,
+		role,
+		status,
+		wsUrl: connectedWsUrl,
+		shouldRedirectToConnect,
+		clearRedirectFlag,
+	} = useConnection();
 
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-4xl">
-        {cards.map(({ href, icon, title, desc, color, badge }) => (
-          <Link
-            key={href}
-            href={href}
-            className={`bg-gray-900 border-2 ${color} rounded-xl p-6 flex flex-col gap-3 transition-all hover:bg-gray-800 hover:shadow-xl group`}
-          >
-            <div className="flex items-center justify-between">
-              <span className="text-4xl">{icon}</span>
-              <span className="text-xs font-mono bg-gray-800 text-gray-400 px-2 py-1 rounded-full group-hover:bg-gray-700">
-                {badge}
-              </span>
-            </div>
-            <h2 className="text-xl font-semibold text-white">{title}</h2>
-            <p className="text-gray-400 text-sm leading-relaxed">{desc}</p>
-          </Link>
-        ))}
-      </div>
+	const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
 
-      <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 max-w-2xl w-full">
-        <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
-          WebSocket Protocol Reference
-        </h3>
-        <div className="grid grid-cols-2 gap-2 text-xs font-mono">
-          {[
-            ["CONNECT:<name>", "Register as player"],
-            ["READY", "Signal ready to play"],
-            ["PLAY:<col>", "Drop piece in column 0–6"],
-            ["GAME:LIST", "List active matches"],
-            ["GAME:WATCH:<id>", "Watch a specific match"],
-            ["PLAYER:LIST", "List connected players"],
-          ].map(([cmd, desc]) => (
-            <div key={cmd} className="flex gap-2">
-              <span className="text-blue-400">{cmd}</span>
-              <span className="text-gray-500">→ {desc}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
+	useEffect(() => {
+		if (shouldRedirectToConnect) {
+			clearRedirectFlag();
+		}
+	}, [shouldRedirectToConnect, clearRedirectFlag]);
+
+	const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+
+		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>
+
+				{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">
+							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>
+	);
 }
diff --git a/connect4-ui/app/play/page.tsx b/connect4-ui/app/play/page.tsx
index 7ac1f6e..c48af30 100644
--- a/connect4-ui/app/play/page.tsx
+++ b/connect4-ui/app/play/page.tsx
@@ -1,555 +1,477 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
 import Board from "@/components/Board";
 import {
-  BoardState,
-  ParsedMessage,
-  cmd,
-  createEmptyBoard,
-  parseMessage,
-  placeToken,
+	BoardState,
+	ParsedMessage,
+	cmd,
+	createEmptyBoard,
+	placeToken,
 } from "@/lib/protocol";
+import { useConnection } from "@/lib/connection";
 
-type ConnStatus = "idle" | "connecting" | "connected" | "disconnected";
-type GamePhase =
-  | "idle"        // not connected or connected but no game
-  | "connected"   // connected, awaiting ready
-  | "ready"       // sent READY, waiting for match
-  | "playing"     // in a match
-  | "game-over";  // match finished
+type GamePhase = "idle" | "connected" | "ready" | "playing" | "game-over";
 
 type GameResult = "win" | "loss" | "draw" | "terminated";
 
-const DEFAULT_URL = "wss://connect4.abunchofknowitalls.com";
-
 export default function PlayPage() {
-  const [wsUrl, setWsUrl] = useState(DEFAULT_URL);
-  const [username, setUsername] = useState("");
-  const [connStatus, setConnStatus] = useState<ConnStatus>("idle");
-  const [gamePhase, setGamePhase] = useState<GamePhase>("idle");
+	const router = useRouter();
+	const {
+		role,
+		username,
+		status,
+		send,
+		subscribe,
+		disconnect,
+		reconnectAttempts,
+		shouldRedirectToConnect,
+		clearRedirectFlag,
+	} = useConnection();
 
-  const [myColor, setMyColor] = useState<1 | 2 | null>(null); // 1=red, 2=yellow
-  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 [waitingForNextRound, setWaitingForNextRound] = 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 wsRef = useRef<WebSocket | null>(null);
-  const myColorRef = useRef<1 | 2 | null>(null);
-  const isMyTurnRef = useRef(false);
+	const myColorRef = useRef<1 | 2 | null>(null);
+	const isMyTurnRef = useRef(false);
 
-  const addStatus = (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 send = useCallback((msg: string) => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) wsRef.current.send(msg);
-  }, []);
+	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("/");
+		} 
 
-  const handleColumnClick = useCallback(
-    (col: number) => {
-      if (!isMyTurnRef.current || gamePhase !== "playing") return;
-      // Optimistically place the piece; server validates and replies
-      const color = myColorRef.current!;
-      setBoard((prev) => {
-        const { board: next, row } = placeToken(prev, color, col);
-        if (row === -1) return prev; // column full, ignore
-        setLastMove({ column: col, row });
-        return next;
-      });
-      setIsMyTurn(false);
-      isMyTurnRef.current = false;
-      setMoveCount((n) => n + 1);
-      send(cmd.play(col));
-      addStatus(`You played column ${col}`);
-    },
-    [gamePhase, send]
-  );
+		if (role !== "player" && status !== "idle") {
+			router.replace("/spectate");
+			return;
+		}
 
-  const handleMessage = useCallback(
-    (raw: string) => {
-      const msg: ParsedMessage = parseMessage(raw);
-      switch (msg.type) {
-        case "CONNECT_ACK":
-          setConnStatus("connected");
-          setGamePhase("connected");
-          addStatus(`✅ Connected as "${username}"`);
-          break;
+		if (status === "connected" && gamePhase === "idle") {
+			setGamePhase("connected");
+		}
 
-        case "ERROR":
-          addStatus(`⚠ ${msg.message}`);
-          break;
+		
+	}, [
+		role,
+		status,
+		router,
+		gamePhase,
+		shouldRedirectToConnect,
+		clearRedirectFlag,
+	]);
 
-        case "READY_ACK":
-          setGamePhase("ready");
-          addStatus("⏳ Waiting for an opponent…");
-          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 "GAME_START": {
-          resetGame();
-          const color: 1 | 2 = msg.goesFirst ? 1 : 2;
-          setMyColor(color);
-          myColorRef.current = color;
-          setGamePhase("playing");
-          setWaitingForNextRound(false);
-          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 first move"
-          );
-          break;
-        }
+				case "ERROR":
+					addStatus(`⚠ ${msg.message}`);
+					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} — your turn!`);
-          break;
-        }
+				case "READY_ACK":
+					setGamePhase("ready");
+					addStatus("⏳ Waiting for an opponent...");
+					break;
 
-        case "GAME_WINS":
-          setGameResult("win");
-          setGamePhase("game-over");
-          setIsMyTurn(false);
-          isMyTurnRef.current = false;
-          addStatus("🏆 You won!");
-          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_LOSS":
-          setGameResult("loss");
-          setGamePhase("game-over");
-          setIsMyTurn(false);
-          isMyTurnRef.current = false;
-          addStatus("💔 You lost");
-          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_DRAW":
-          setGameResult("draw");
-          setGamePhase("game-over");
-          setIsMyTurn(false);
-          isMyTurnRef.current = false;
-          addStatus("🤝 Draw!");
-          break;
+				case "GAME_WINS":
+					setGameResult("win");
+					setGamePhase("game-over");
+					setIsMyTurn(false);
+					isMyTurnRef.current = false;
+					addStatus("🏆 You won!");
+					break;
 
-        case "GAME_TERMINATED":
-          setGameResult("terminated");
-          setGamePhase("game-over");
-          setIsMyTurn(false);
-          isMyTurnRef.current = false;
-          addStatus("⛔ Match terminated");
-          break;
+				case "GAME_LOSS":
+					setGameResult("loss");
+					setGamePhase("game-over");
+					setIsMyTurn(false);
+					isMyTurnRef.current = false;
+					addStatus("💔 You lost");
+					break;
 
-        case "TOURNAMENT_START":
-          setTournamentMode(true);
-          addStatus(`🏆 Tournament started: ${msg.tournamentType}`);
-          break;
+				case "GAME_DRAW":
+					setGameResult("draw");
+					setGamePhase("game-over");
+					setIsMyTurn(false);
+					isMyTurnRef.current = false;
+					addStatus("🤝 Draw");
+					break;
 
-        case "TOURNAMENT_END":
-          addStatus("Round over — sending Ready for next round…");
-          setWaitingForNextRound(false);
-          setGamePhase("connected");
-          resetGame();
-          // Auto-ready for next round (mirror the gameloop.py behavior)
-          setTimeout(() => send(cmd.ready()), 500);
-          setGamePhase("ready");
-          addStatus("⏳ Ready for next round…");
-          break;
+				case "GAME_TERMINATED":
+					setGameResult("terminated");
+					setGamePhase("game-over");
+					setIsMyTurn(false);
+					isMyTurnRef.current = false;
+					addStatus("⛔ Match terminated");
+					break;
 
-        case "TOURNAMENT_CANCEL":
-          setTournamentMode(false);
-          setWaitingForNextRound(false);
-          setGamePhase("connected");
-          resetGame();
-          addStatus("Tournament cancelled");
-          break;
+				case "TOURNAMENT_START":
+					setTournamentMode(true);
+					addStatus(`🏆 Tournament started: ${msg.tournamentType}`);
+					break;
 
-        default:
-          break;
-      }
-    },
-    [username, resetGame, send]
-  );
+				case "TOURNAMENT_END":
+					setGamePhase("connected");
+					resetGame();
+					send(cmd.ready());
+					setGamePhase("ready");
+					addStatus("⏳ Ready for next round...");
+					break;
 
-  const connect = useCallback(() => {
-    if (!username.trim()) {
-      addStatus("⚠ Please enter a username first");
-      return;
-    }
-    if (wsRef.current) wsRef.current.close();
+				case "TOURNAMENT_CANCEL":
+					setTournamentMode(false);
+					setGamePhase("connected");
+					resetGame();
+					addStatus("Tournament cancelled");
+					break;
 
-    setConnStatus("connecting");
-    setGamePhase("idle");
-    resetGame();
-    setStatusMessages([]);
-    setTournamentMode(false);
-    setWaitingForNextRound(false);
+				default:
+					break;
+			}
+		});
 
-    const ws = new WebSocket(wsUrl);
-    wsRef.current = ws;
+		return unsubscribe;
+	}, [addStatus, resetGame, send, subscribe]);
 
-    ws.onopen = () => ws.send(cmd.connect(username.trim()));
-    ws.onmessage = (e) => handleMessage(e.data as string);
-    ws.onclose = () => {
-      setConnStatus("disconnected");
-      setGamePhase("idle");
-      addStatus("Disconnected from server");
-    };
-    ws.onerror = () => addStatus("WebSocket error");
-  }, [username, wsUrl, handleMessage, resetGame]);
+	const handleColumnClick = useCallback(
+		(col: number) => {
+			if (!isMyTurnRef.current || gamePhase !== "playing") return;
+			const color = myColorRef.current;
+			if (!color) return;
 
-  const disconnect = useCallback(() => {
-    send(cmd.disconnect());
-    setTimeout(() => wsRef.current?.close(), 200);
-  }, [send]);
+			setBoard((prev) => {
+				const { board: next, row } = placeToken(prev, color, col);
+				if (row === -1) return prev;
+				setLastMove({ column: col, row });
+				return next;
+			});
 
-  const sendReady = useCallback(() => {
-    send(cmd.ready());
-    setGamePhase("ready");
-    addStatus("⏳ Waiting for an opponent…");
-  }, [send]);
+			setIsMyTurn(false);
+			isMyTurnRef.current = false;
+			setMoveCount((n) => n + 1);
+			send(cmd.play(col));
+			addStatus(`You played column ${col}`);
+		},
+		[addStatus, gamePhase, send],
+	);
 
-  useEffect(() => () => wsRef.current?.close(), []);
+	const sendReady = useCallback(() => {
+		send(cmd.ready());
+		setGamePhase("ready");
+		addStatus("⏳ Waiting for an opponent...");
+	}, [addStatus, send]);
 
-  // Derived display values
-  const myColorLabel = myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null;
-  const opponentColor: 1 | 2 | null = myColor === 1 ? 2 : myColor === 2 ? 1 : null;
+	const myColorLabel =
+		myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null;
+	const opponentColor: 1 | 2 | null =
+		myColor === 1 ? 2 : myColor === 2 ? 1 : null;
 
-  return (
-    <div className="flex flex-col gap-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-white">🎮 Play Connect4</h1>
-          <p className="text-gray-400 text-sm mt-1">
-            Connect as a player and compete in matches
-          </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>
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Left: controls + status */}
-        <div className="flex flex-col gap-4">
-          {/* Connection card */}
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-col gap-3">
-            <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider">
-              Connection
-            </h2>
+			{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>
-              <label className="text-xs text-gray-400 mb-1 block">Server URL</label>
-              <input
-                className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
-                value={wsUrl}
-                onChange={(e) => setWsUrl(e.target.value)}
-                placeholder="wss://..."
-                disabled={connStatus === "connected" || connStatus === "connecting"}
-              />
-            </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>
-              <label className="text-xs text-gray-400 mb-1 block">Username</label>
-              <input
-                className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                placeholder="Enter your username"
-                disabled={connStatus === "connected" || connStatus === "connecting"}
-                onKeyDown={(e) => e.key === "Enter" && connStatus === "idle" && connect()}
-              />
-            </div>
+						<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>
 
-            {connStatus !== "connected" ? (
-              <button
-                onClick={connect}
-                disabled={connStatus === "connecting" || !username.trim()}
-                className="w-full py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm font-medium rounded-lg transition-colors"
-              >
-                {connStatus === "connecting" ? "Connecting…" : "Connect"}
-              </button>
-            ) : (
-              <button
-                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>
 
-          {/* Game controls */}
-          {connStatus === "connected" && (
-            <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" && !tournamentMode && (
-                <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>
-                    {myColor === 1 && (
-                      <span className="text-xs text-gray-500">(1st)</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 && (
-                <div className="flex flex-col gap-2">
-                  <div
-                    className={`text-center py-3 rounded-lg font-bold text-base border ${
-                      gameResult === "win"
-                        ? "bg-green-900/50 border-green-600 text-green-300"
-                        : gameResult === "loss"
-                        ? "bg-red-900/50 border-red-600 text-red-300"
-                        : gameResult === "draw"
-                        ? "bg-blue-900/50 border-blue-600 text-blue-300"
-                        : "bg-gray-800 border-gray-600 text-gray-300"
-                    }`}
-                  >
-                    {gameResult === "win"
-                      ? "🏆 You Won!"
-                      : gameResult === "loss"
-                      ? "💔 You Lost"
-                      : gameResult === "draw"
-                      ? "🤝 Draw"
-                      : "⛔ Terminated"}
-                  </div>
-                  {!tournamentMode && (
-                    <button
-                      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>
-          )}
+						{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>
 
-          {/* Status log */}
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
-            <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2">
-              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">Connect to start</p>
-              ) : (
-                statusMessages.map((m, i) => (
-                  <p key={i} className="text-xs text-gray-400 font-mono">
-                    {m}
-                  </p>
-                ))
-              )}
-            </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>
 
-          {/* How to play */}
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
-            <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2">
-              How to Play
-            </h2>
-            <ol className="flex flex-col gap-1.5 text-xs text-gray-400">
-              <li className="flex gap-2">
-                <span className="text-blue-400 font-bold shrink-0">1.</span>
-                Enter the server URL and your username, then click <strong className="text-gray-300">Connect</strong>
-              </li>
-              <li className="flex gap-2">
-                <span className="text-blue-400 font-bold shrink-0">2.</span>
-                Click <strong className="text-gray-300">Ready to Play</strong> to queue for a match
-              </li>
-              <li className="flex gap-2">
-                <span className="text-blue-400 font-bold shrink-0">3.</span>
-                When the game starts, click a column number to drop your piece
-              </li>
-              <li className="flex gap-2">
-                <span className="text-blue-400 font-bold shrink-0">4.</span>
-                Connect 4 in a row (horizontal, vertical, or diagonal) to win!
-              </li>
-            </ol>
-          </div>
-        </div>
+				<div 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>
+							)}
 
-        {/* Right: board */}
-        <div className="lg:col-span-2 bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center justify-center gap-4 min-h-96">
-          {connStatus !== "connected" || gamePhase === "idle" ? (
-            <div className="flex flex-col items-center gap-4 text-center py-8">
-              <span className="text-6xl">🎮</span>
-              <p className="text-gray-400 text-lg font-medium">Ready to play?</p>
-              <p className="text-gray-600 text-sm max-w-xs">
-                Enter your username and connect to the server to start a match
-              </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>
-              <p className="text-gray-500 text-sm">
-                The game will start automatically when a match is found
-              </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={username}
-                player2="Opponent"
-                currentTurnColor={
-                  gamePhase === "playing" && myColor
-                    ? isMyTurn
-                      ? myColor
-                      : opponentColor
-                    : null
-                }
-                onColumnClick={
-                  gamePhase === "playing" && isMyTurn ? handleColumnClick : undefined
-                }
-                disabled={gamePhase !== "playing" || !isMyTurn}
-              />
-
-              {gamePhase === "playing" && (
-                <p className="text-sm text-gray-400">
-                  {isMyTurn ? (
-                    <span className="text-green-400 font-semibold animate-pulse">
-                      ⬆ Click a column to drop your piece
-                    </span>
-                  ) : (
-                    <span className="text-gray-500">Waiting for opponent…</span>
-                  )}
-                </p>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
+							<Board
+								board={board}
+								lastMove={lastMove}
+								player1={username}
+								player2="Opponent"
+								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>
-    );
-  }
-  const config: Record<GamePhase, { label: string; cls: string }> = {
-    idle: { label: "Not connected", 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>
-  );
+	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 { label, cls } = config[phase];
+	return (
+		<span className={`px-3 py-1.5 rounded-full text-sm font-medium ${cls}`}>
+			{label}
+		</span>
+	);
 }
diff --git a/connect4-ui/app/spectate/page.tsx b/connect4-ui/app/spectate/page.tsx
index a31e909..cb0e02d 100644
--- a/connect4-ui/app/spectate/page.tsx
+++ b/connect4-ui/app/spectate/page.tsx
@@ -1,366 +1,485 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
 import Board from "@/components/Board";
 import {
-  BoardState,
-  GameEntry,
-  ParsedMessage,
-  cmd,
-  createEmptyBoard,
-  parseMessage,
-  placeToken,
-  replayMoves,
+	BoardState,
+	GameEntry,
+	ParsedMessage,
+	PlayerEntry,
+	ScoreEntry,
+	cmd,
+	createEmptyBoard,
+	placeToken,
+	replayMoves,
 } from "@/lib/protocol";
+import { useConnection } from "@/lib/connection";
 
-type ConnStatus = "idle" | "connecting" | "connected" | "disconnected";
-
-interface WatchState {
-  matchId: number;
-  player1: string; // Red
-  player2: string; // Yellow
+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;
 }
 
-type GameResult =
-  | { kind: "win"; winner: string }
-  | { kind: "draw" }
-  | { kind: "terminated" };
-
-const DEFAULT_URL = "wss://connect4.abunchofknowitalls.com";
-
 export default function SpectatePage() {
-  const [wsUrl, setWsUrl] = useState(DEFAULT_URL);
-  const [status, setStatus] = useState<ConnStatus>("idle");
-  const [log, setLog] = useState<string[]>([]);
+	const router = useRouter();
+	const {
+		role,
+		status,
+		send,
+		subscribe,
+		disconnect,
+		shouldRedirectToConnect,
+		clearRedirectFlag,
+	} = useConnection();
 
-  const [gameList, setGameList] = useState<GameEntry[]>([]);
-  const [watching, setWatching] = useState<WatchState | null>(null);
-  const [board, setBoard] = useState<BoardState>(createEmptyBoard());
-  const [lastMove, setLastMove] = useState<{ column: number; row: number } | null>(null);
-  const [currentTurnColor, setCurrentTurnColor] = useState<1 | 2>(1);
-  const [moveCount, setMoveCount] = useState(0);
-  const [gameResult, setGameResult] = useState<GameResult | null>(null);
+	const [tournamentActive, setTournamentActive] = useState(false);
+	const [tournamentType, setTournamentType] = useState<string | null>(null);
+	const [scores, setScores] = useState<ScoreEntry[]>([]);
+	const [players, setPlayers] = useState<PlayerEntry[]>([]);
+	const [gameList, setGameList] = useState<GameEntry[]>([]);
+	const [liveGames, setLiveGames] = useState<Map<number, LiveGame>>(new Map());
+	const [selectedGame, setSelectedGame] = useState<number | null>(null);
+	const [log, setLog] = useState<string[]>([]);
 
-  const wsRef = useRef<WebSocket | null>(null);
-  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const watchingRef = useRef<WatchState | null>(null);
+	const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+	const liveGamesRef = useRef<Map<number, LiveGame>>(new Map());
 
-  const addLog = (msg: string) =>
-    setLog((prev) => [`[${new Date().toLocaleTimeString()}] ${msg}`, ...prev.slice(0, 49)]);
+	const addLog = useCallback(
+		(msg: string) =>
+			setLog((prev) => [
+				`[${new Date().toLocaleTimeString()}] ${msg}`,
+				...prev.slice(0, 79),
+			]),
+		[],
+	);
 
-  const send = useCallback((msg: string) => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
-      wsRef.current.send(msg);
-    }
-  }, []);
+	const updateGame = useCallback((id: number, patch: Partial<LiveGame>) => {
+		setLiveGames((prev) => {
+			const next = new Map(prev);
+			const existing = next.get(id) ?? {
+				id,
+				player1: "",
+				player2: "",
+				board: createEmptyBoard(),
+				lastMove: null,
+				currentTurnColor: 1 as const,
+				result: null,
+			};
+			next.set(id, { ...existing, ...patch });
+			liveGamesRef.current = next;
+			return next;
+		});
+	}, []);
 
-  const handleMessage = useCallback(
-    (raw: string) => {
-      const msg: ParsedMessage = parseMessage(raw);
-      switch (msg.type) {
-        case "GAME_LIST":
-          setGameList(msg.games);
-          break;
-
-        case "GAME_WATCH_ACK": {
-          const { board: replayed, lastMove: lm } = replayMoves(msg.moves, msg.player1);
-          const watchState: WatchState = {
-            matchId: msg.matchId,
-            player1: msg.player1,
-            player2: msg.player2,
-          };
-          setWatching(watchState);
-          watchingRef.current = watchState;
-          setBoard(replayed);
-          setLastMove(lm);
-          setMoveCount(msg.moves.length);
-          setCurrentTurnColor(msg.moves.length % 2 === 0 ? 1 : 2);
-          setGameResult(null);
-          addLog(`Watching match ${msg.matchId}: ${msg.player1} (🔴) vs ${msg.player2} (🟡)`);
-          if (msg.moves.length > 0)
-            addLog(`Replayed ${msg.moves.length} existing move(s)`);
-          break;
+	useEffect(() => {
+        if (status === "disconnected" && shouldRedirectToConnect) {
+			clearRedirectFlag();
+			router.replace("/");
+		} else if (status === "idle") {
+			router.replace("/");
         }
 
-        case "GAME_MOVE": {
-          const w = watchingRef.current;
-          if (!w) break;
-          const color: 1 | 2 = msg.username === w.player1 ? 1 : 2;
-          setBoard((prev) => {
-            const { board: next, row } = placeToken(prev, color, msg.column);
-            setLastMove({ column: msg.column, row });
-            return next;
-          });
-          setMoveCount((n) => n + 1);
-          setCurrentTurnColor((c) => (c === 1 ? 2 : 1));
-          addLog(`${msg.username} played column ${msg.column}`);
-          break;
-        }
+		if (role !== "observer" && status !== "idle") {
+			router.replace("/play");
+			return;
+		}
+	}, [role, status, shouldRedirectToConnect, clearRedirectFlag, router]);
 
-        case "GAME_WIN":
-          setGameResult({ kind: "win", winner: msg.winner });
-          setCurrentTurnColor(1); // reset
-          addLog(`🏆 ${msg.winner} wins!`);
-          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 "GAME_DRAW":
-          setGameResult({ kind: "draw" });
-          addLog("🤝 Draw!");
-          break;
+				case "TOURNAMENT_CANCEL":
+					setTournamentActive(false);
+					setTournamentType(null);
+					addLog("❌ Tournament cancelled");
+					break;
 
-        case "GAME_TERMINATED":
-          setGameResult({ kind: "terminated" });
-          addLog("⛔ Match terminated");
-          break;
+				case "TOURNAMENT_SCORES":
+					setScores(msg.scores);
+					break;
 
-        case "ERROR":
-          addLog(`Error: ${msg.message}`);
-          break;
+				case "TOURNAMENT_END":
+					addLog("Round ended");
+					send(cmd.gameList());
+					send(cmd.playerList());
+					break;
 
-        default:
-          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;
 
-  const connect = useCallback(() => {
-    if (wsRef.current) wsRef.current.close();
-    setStatus("connecting");
-    setLog([]);
-    setGameList([]);
-    setWatching(null);
-    watchingRef.current = null;
-    setBoard(createEmptyBoard());
-    setLastMove(null);
-    setGameResult(null);
+				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 ws = new WebSocket(wsUrl);
-    wsRef.current = ws;
+				case "GAME_MOVE": {
+					const gamesSnapshot = liveGamesRef.current;
+					for (const [id, game] of gamesSnapshot) {
+						if (
+							game.player1 === msg.username ||
+							game.player2 === msg.username
+						) {
+							const color: 1 | 2 = msg.username === game.player1 ? 1 : 2;
+							const { board: next, row } = placeToken(
+								game.board,
+								color,
+								msg.column,
+							);
+							updateGame(id, {
+								board: next,
+								lastMove: { column: msg.column, row },
+								currentTurnColor: (color === 1 ? 2 : 1) as 1 | 2,
+							});
+							break;
+						}
+					}
+					break;
+				}
 
-    ws.onopen = () => {
-      setStatus("connected");
-      addLog("Connected as observer");
-      ws.send(cmd.gameList());
-    };
+				case "GAME_WIN": {
+					const gamesSnapshot = liveGamesRef.current;
+					for (const [id, game] of gamesSnapshot) {
+						if (game.player1 === msg.winner || game.player2 === msg.winner) {
+							updateGame(id, { result: { kind: "win", winner: msg.winner } });
+							break;
+						}
+					}
+					setTimeout(() => {
+						send(cmd.gameList());
+						send(cmd.playerList());
+					}, 750);
+					break;
+				}
 
-    ws.onmessage = (e) => handleMessage(e.data as string);
+				case "GAME_DRAW":
+					if (selectedGame !== null) {
+						updateGame(selectedGame, { result: { kind: "draw" } });
+					}
+					break;
 
-    ws.onclose = () => {
-      setStatus("disconnected");
-      addLog("Disconnected");
-      if (pollRef.current) clearInterval(pollRef.current);
-    };
+				case "GAME_TERMINATED":
+					if (selectedGame !== null) {
+						updateGame(selectedGame, { result: { kind: "terminated" } });
+					}
+					send(cmd.gameList());
+					break;
 
-    ws.onerror = () => addLog("WebSocket error");
+				case "PLAYER_LIST":
+					setPlayers(msg.players);
+					break;
 
-    // Poll game list every 4s
-    pollRef.current = setInterval(() => {
-      if (ws.readyState === WebSocket.OPEN) ws.send(cmd.gameList());
-    }, 4000);
-  }, [wsUrl, handleMessage]);
+				case "GET_DATA":
+					if (
+						msg.key === "TOURNAMENT_STATUS" &&
+						msg.value &&
+						msg.value !== "false"
+					) {
+						setTournamentActive(true);
+						setTournamentType(msg.value);
+					}
+					break;
 
-  const disconnect = useCallback(() => {
-    if (pollRef.current) clearInterval(pollRef.current);
-    wsRef.current?.close();
-  }, []);
+				case "ERROR":
+					addLog(`Error: ${msg.message}`);
+					break;
 
-  const watchGame = useCallback(
-    (id: number) => {
-      setBoard(createEmptyBoard());
-      setLastMove(null);
-      setGameResult(null);
-      setMoveCount(0);
-      setCurrentTurnColor(1);
-      send(cmd.gameWatch(id));
-    },
-    [send]
-  );
+				default:
+					break;
+			}
+		});
 
-  useEffect(() => () => {
-    if (pollRef.current) clearInterval(pollRef.current);
-    wsRef.current?.close();
-  }, []);
+		return unsubscribe;
+	}, [addLog, selectedGame, send, subscribe, updateGame]);
 
-  return (
-    <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-white">👁 Spectate Matches</h1>
-          <p className="text-gray-400 text-sm mt-1">
-            Watch live Connect4 games in real time
-          </p>
-        </div>
-        <StatusBadge status={status} />
-      </div>
+	useEffect(() => {
+		if (status !== "connected" || role !== "observer") {
+			if (pollRef.current) {
+				clearInterval(pollRef.current);
+				pollRef.current = null;
+			}
+			return;
+		}
 
-      {/* Connection bar */}
-      <div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-wrap gap-3 items-end">
-        <div className="flex-1 min-w-48">
-          <label className="text-xs text-gray-400 uppercase tracking-wider mb-1 block">
-            Server URL
-          </label>
-          <input
-            className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
-            value={wsUrl}
-            onChange={(e) => setWsUrl(e.target.value)}
-            placeholder="wss://..."
-            disabled={status === "connected" || status === "connecting"}
-          />
-        </div>
-        {status !== "connected" ? (
-          <button
-            onClick={connect}
-            disabled={status === "connecting"}
-            className="px-5 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm font-medium rounded-lg transition-colors"
-          >
-            {status === "connecting" ? "Connecting…" : "Connect"}
-          </button>
-        ) : (
-          <button
-            onClick={disconnect}
-            className="px-5 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
-          >
-            Disconnect
-          </button>
-        )}
-      </div>
+		send(cmd.getData("TOURNAMENT_STATUS"));
+		send(cmd.gameList());
+		send(cmd.playerList());
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Left: game list + log */}
-        <div className="flex flex-col gap-4">
-          {/* Game list */}
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
-            <div className="flex items-center justify-between mb-3">
-              <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider">
-                Live Matches
-              </h2>
-              <span className="text-xs text-gray-500">
-                {gameList.length} game{gameList.length !== 1 ? "s" : ""}
-              </span>
-            </div>
-            {status !== "connected" ? (
-              <p className="text-gray-600 text-sm text-center py-4">
-                Connect to see matches
-              </p>
-            ) : gameList.length === 0 ? (
-              <p className="text-gray-500 text-sm text-center py-4">
-                No active matches
-              </p>
-            ) : (
-              <div className="flex flex-col gap-2">
-                {gameList.map((g) => (
-                  <button
-                    key={g.id}
-                    onClick={() => watchGame(g.id)}
-                    className={`w-full text-left px-3 py-2.5 rounded-lg border transition-colors text-sm ${
-                      watching?.matchId === g.id
-                        ? "border-blue-500 bg-blue-950/50 text-blue-300"
-                        : "border-gray-700 bg-gray-800 hover:border-gray-600 hover:bg-gray-750 text-gray-300"
-                    }`}
-                  >
-                    <div className="font-mono text-xs text-gray-500 mb-0.5">
-                      #{g.id}
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <span className="text-red-400">{g.player1}</span>
-                      <span className="text-gray-600 text-xs">vs</span>
-                      <span className="text-yellow-400">{g.player2}</span>
-                    </div>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
+		pollRef.current = setInterval(() => {
+			send(cmd.gameList());
+			send(cmd.playerList());
+		}, 5000);
 
-          {/* Event log */}
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
-            <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
-              Event Log
-            </h2>
-            <div className="flex flex-col gap-1 max-h-48 overflow-y-auto">
-              {log.length === 0 ? (
-                <p className="text-gray-600 text-xs">No events yet</p>
-              ) : (
-                log.map((entry, i) => (
-                  <p key={i} className="text-xs text-gray-400 font-mono">
-                    {entry}
-                  </p>
-                ))
-              )}
-            </div>
-          </div>
-        </div>
+		return () => {
+			if (pollRef.current) clearInterval(pollRef.current);
+		};
+	}, [role, send, status]);
 
-        {/* Right: board */}
-        <div className="lg:col-span-2 bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center gap-4">
-          {!watching ? (
-            <div className="flex flex-col items-center justify-center gap-3 py-16 text-center">
-              <span className="text-5xl">👁</span>
-              <p className="text-gray-400">
-                {status === "connected"
-                  ? "Select a match from the list to start watching"
-                  : "Connect to the server to see live matches"}
-              </p>
-            </div>
-          ) : (
-            <>
-              {/* Game result banner */}
-              {gameResult && (
-                <div
-                  className={`w-full rounded-lg p-3 text-center font-semibold text-lg ${
-                    gameResult.kind === "win"
-                      ? "bg-green-900/50 border border-green-600 text-green-300"
-                      : gameResult.kind === "draw"
-                      ? "bg-blue-900/50 border border-blue-600 text-blue-300"
-                      : "bg-red-900/50 border border-red-600 text-red-300"
-                  }`}
-                >
-                  {gameResult.kind === "win"
-                    ? `🏆 ${gameResult.winner} wins!`
-                    : gameResult.kind === "draw"
-                    ? "🤝 Draw!"
-                    : "⛔ Match Terminated"}
-                </div>
-              )}
+	const selectedGameData =
+		selectedGame !== null ? liveGames.get(selectedGame) : null;
 
-              <Board
-                board={board}
-                lastMove={lastMove}
-                player1={watching.player1}
-                player2={watching.player2}
-                currentTurnColor={gameResult ? null : currentTurnColor}
-                disabled
-              />
+	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>
 
-              <div className="text-xs text-gray-500 font-mono">
-                Match #{watching.matchId} · {moveCount} move
-                {moveCount !== 1 ? "s" : ""}
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function StatusBadge({ status }: { status: ConnStatus }) {
-  const colors: Record<ConnStatus, string> = {
-    idle: "bg-gray-700 text-gray-400",
-    connecting: "bg-yellow-900/60 text-yellow-300 animate-pulse",
-    connected: "bg-green-900/60 text-green-300",
-    disconnected: "bg-red-900/60 text-red-300",
-  };
-  const labels: Record<ConnStatus, string> = {
-    idle: "Not connected",
-    connecting: "Connecting…",
-    connected: "Connected",
-    disconnected: "Disconnected",
-  };
-  return (
-    <span className={`px-3 py-1.5 rounded-full text-sm font-medium ${colors[status]}`}>
-      {labels[status]}
-    </span>
-  );
+			{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>
+			)}
+
+			{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="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>
+							<span className="text-xs text-gray-500 font-normal">
+								{players.length} connected
+							</span>
+						</h2>
+						{players.length === 0 ? (
+							<p className="text-gray-500 text-sm text-center py-4">
+								No players connected
+							</p>
+						) : (
+							<div className="flex flex-col gap-1.5">
+								{players.map((p) => (
+									<div
+										key={p.username}
+										className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-800"
+									>
+										<span className="text-white text-sm flex-1 font-medium">
+											{p.username}
+										</span>
+										{p.inMatch ? (
+											<span className="text-xs px-2 py-0.5 rounded-full bg-blue-900/60 text-blue-300 border border-blue-700">
+												In game
+											</span>
+										) : p.ready ? (
+											<span className="text-xs px-2 py-0.5 rounded-full bg-green-900/60 text-green-300 border border-green-700">
+												Ready
+											</span>
+										) : (
+											<span className="text-xs px-2 py-0.5 rounded-full bg-gray-700 text-gray-500">
+												Idle
+											</span>
+										)}
+									</div>
+								))}
+							</div>
+						)}
+					</div>
+
+					<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
+						<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2">
+							Event Log
+						</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="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>
+	);
 }
diff --git a/connect4-ui/app/tournament/page.tsx b/connect4-ui/app/tournament/page.tsx
index 9e52a08..f4f1f65 100644
--- a/connect4-ui/app/tournament/page.tsx
+++ b/connect4-ui/app/tournament/page.tsx
@@ -1,546 +1,5 @@
-"use client";
+import { redirect } from "next/navigation";
 
-import { useCallback, useEffect, useRef, useState } from "react";
-import Board from "@/components/Board";
-import {
-  BoardState,
-  GameEntry,
-  ParsedMessage,
-  PlayerEntry,
-  ScoreEntry,
-  cmd,
-  createEmptyBoard,
-  parseMessage,
-  placeToken,
-  replayMoves,
-} from "@/lib/protocol";
-
-type ConnStatus = "idle" | "connecting" | "connected" | "disconnected";
-
-interface LiveGame {
-  id: number;
-  player1: string;
-  player2: string;
-  board: BoardState;
-  lastMove: { column: number; row: number } | null;
-  currentTurnColor: 1 | 2;
-  result: { kind: "win"; winner: string } | { kind: "draw" } | { kind: "terminated" } | null;
-}
-
-const DEFAULT_URL = "wss://connect4.abunchofknowitalls.com";
-
-export default function TournamentPage() {
-  const [wsUrl, setWsUrl] = useState(DEFAULT_URL);
-  const [status, setStatus] = useState<ConnStatus>("idle");
-
-  const [tournamentActive, setTournamentActive] = useState(false);
-  const [tournamentType, setTournamentType] = useState<string | null>(null);
-  const [scores, setScores] = useState<ScoreEntry[]>([]);
-  const [players, setPlayers] = useState<PlayerEntry[]>([]);
-  const [gameList, setGameList] = useState<GameEntry[]>([]);
-  const [liveGames, setLiveGames] = useState<Map<number, LiveGame>>(new Map());
-  const [selectedGame, setSelectedGame] = useState<number | null>(null);
-  const [log, setLog] = useState<string[]>([]);
-
-  const wsRef = useRef<WebSocket | null>(null);
-  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  // keep a ref to liveGames for use inside the message handler closure
-  const liveGamesRef = useRef<Map<number, LiveGame>>(new Map());
-
-  const addLog = (msg: string) =>
-    setLog((prev) => [`[${new Date().toLocaleTimeString()}] ${msg}`, ...prev.slice(0, 79)]);
-
-  const send = useCallback((msg: string) => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) wsRef.current.send(msg);
-  }, []);
-
-  /** Merge a partial update into a live game, creating it if new. */
-  const updateGame = useCallback((id: number, patch: Partial<LiveGame>) => {
-    setLiveGames((prev) => {
-      const next = new Map(prev);
-      const existing = next.get(id) ?? {
-        id,
-        player1: "",
-        player2: "",
-        board: createEmptyBoard(),
-        lastMove: null,
-        currentTurnColor: 1 as const,
-        result: null,
-      };
-      next.set(id, { ...existing, ...patch });
-      liveGamesRef.current = next;
-      return next;
-    });
-  }, []);
-
-  const handleMessage = useCallback(
-    (raw: string) => {
-      const msg: ParsedMessage = parseMessage(raw);
-      switch (msg.type) {
-        case "TOURNAMENT_START":
-          setTournamentActive(true);
-          setTournamentType(msg.tournamentType);
-          setScores([]);
-          addLog(`🏆 Tournament started: ${msg.tournamentType}`);
-          send(cmd.gameList());
-          send(cmd.playerList());
-          break;
-
-        case "TOURNAMENT_CANCEL":
-          setTournamentActive(false);
-          setTournamentType(null);
-          addLog("❌ Tournament cancelled");
-          break;
-
-        case "TOURNAMENT_SCORES":
-          setScores(msg.scores);
-          addLog(
-            `📊 Scores updated: ${msg.scores
-              .map((s) => `${s.player} ${s.score}`)
-              .join(", ")}`
-          );
-          break;
-
-        case "TOURNAMENT_END":
-          addLog("Round ended");
-          send(cmd.gameList());
-          send(cmd.playerList());
-          break;
-
-        case "GAME_LIST": {
-          setGameList(msg.games);
-          // Watch any new games we don't have yet
-          for (const g of msg.games) {
-            if (!liveGamesRef.current.has(g.id)) {
-              send(cmd.gameWatch(g.id));
-            }
-          }
-          break;
-        }
-
-        case "GAME_WATCH_ACK": {
-          const { board, lastMove } = replayMoves(msg.moves, msg.player1);
-          const moveCount = msg.moves.length;
-          updateGame(msg.matchId, {
-            player1: msg.player1,
-            player2: msg.player2,
-            board,
-            lastMove,
-            currentTurnColor: (moveCount % 2 === 0 ? 1 : 2) as 1 | 2,
-            result: null,
-          });
-          addLog(`Watching match ${msg.matchId}: ${msg.player1} vs ${msg.player2}`);
-          break;
-        }
-
-        case "GAME_MOVE": {
-          // find the game this player is in
-          const gamesSnapshot = liveGamesRef.current;
-          for (const [id, game] of gamesSnapshot) {
-            if (game.player1 === msg.username || game.player2 === msg.username) {
-              const color: 1 | 2 = msg.username === game.player1 ? 1 : 2;
-              const { board: next, row } = placeToken(game.board, color, msg.column);
-              updateGame(id, {
-                board: next,
-                lastMove: { column: msg.column, row },
-                currentTurnColor: (color === 1 ? 2 : 1) as 1 | 2,
-              });
-              addLog(`[#${id}] ${msg.username} played column ${msg.column}`);
-              break;
-            }
-          }
-          break;
-        }
-
-        case "GAME_WIN": {
-          const gamesSnapshot = liveGamesRef.current;
-          for (const [id, game] of gamesSnapshot) {
-            if (game.player1 === msg.winner || game.player2 === msg.winner) {
-              updateGame(id, { result: { kind: "win", winner: msg.winner } });
-              addLog(`🏆 [#${id}] ${msg.winner} wins!`);
-              break;
-            }
-          }
-          // refresh lists after match ends
-          setTimeout(() => {
-            send(cmd.gameList());
-            send(cmd.playerList());
-          }, 1000);
-          break;
-        }
-
-        case "GAME_DRAW": {
-          // mark the selected game as draw (we can't easily identify which)
-          if (selectedGame !== null) {
-            updateGame(selectedGame, { result: { kind: "draw" } });
-          }
-          addLog("🤝 Draw");
-          break;
-        }
-
-        case "GAME_TERMINATED": {
-          if (selectedGame !== null) {
-            updateGame(selectedGame, { result: { kind: "terminated" } });
-          }
-          addLog("⛔ Match terminated");
-          send(cmd.gameList());
-          break;
-        }
-
-        case "PLAYER_LIST":
-          setPlayers(msg.players);
-          break;
-
-        case "GET_DATA":
-          if (msg.key === "TOURNAMENT_STATUS") {
-            if (msg.value && msg.value !== "false") {
-              setTournamentActive(true);
-              setTournamentType(msg.value);
-            }
-          }
-          break;
-
-        case "ERROR":
-          addLog(`Error: ${msg.message}`);
-          break;
-
-        default:
-          break;
-      }
-    },
-    [send, updateGame, selectedGame]
-  );
-
-  const connect = useCallback(() => {
-    if (wsRef.current) wsRef.current.close();
-    setStatus("connecting");
-    setLog([]);
-    setLiveGames(new Map());
-    liveGamesRef.current = new Map();
-    setSelectedGame(null);
-    setScores([]);
-    setPlayers([]);
-    setGameList([]);
-    setTournamentActive(false);
-    setTournamentType(null);
-
-    const ws = new WebSocket(wsUrl);
-    wsRef.current = ws;
-
-    ws.onopen = () => {
-      setStatus("connected");
-      addLog("Connected as observer");
-      ws.send(cmd.getData("TOURNAMENT_STATUS"));
-      ws.send(cmd.gameList());
-      ws.send(cmd.playerList());
-    };
-
-    ws.onmessage = (e) => handleMessage(e.data as string);
-    ws.onclose = () => {
-      setStatus("disconnected");
-      addLog("Disconnected");
-      if (pollRef.current) clearInterval(pollRef.current);
-    };
-    ws.onerror = () => addLog("WebSocket error");
-
-    pollRef.current = setInterval(() => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(cmd.gameList());
-        ws.send(cmd.playerList());
-      }
-    }, 5000);
-  }, [wsUrl, handleMessage]);
-
-  const disconnect = useCallback(() => {
-    if (pollRef.current) clearInterval(pollRef.current);
-    wsRef.current?.close();
-  }, []);
-
-  useEffect(() => () => {
-    if (pollRef.current) clearInterval(pollRef.current);
-    wsRef.current?.close();
-  }, []);
-
-  const selectedGameData = selectedGame !== null ? liveGames.get(selectedGame) : null;
-
-  return (
-    <div className="flex flex-col gap-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-white">🏆 Tournament View</h1>
-          <p className="text-gray-400 text-sm mt-1">
-            Live standings, active matches, and player status
-          </p>
-        </div>
-        <StatusBadge status={status} />
-      </div>
-
-      {/* Connection bar */}
-      <div className="bg-gray-900 border border-gray-700 rounded-xl p-4 flex flex-wrap gap-3 items-end">
-        <div className="flex-1 min-w-48">
-          <label className="text-xs text-gray-400 uppercase tracking-wider mb-1 block">
-            Server URL
-          </label>
-          <input
-            className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
-            value={wsUrl}
-            onChange={(e) => setWsUrl(e.target.value)}
-            disabled={status === "connected" || status === "connecting"}
-          />
-        </div>
-        {status !== "connected" ? (
-          <button
-            onClick={connect}
-            disabled={status === "connecting"}
-            className="px-5 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm font-medium rounded-lg transition-colors"
-          >
-            {status === "connecting" ? "Connecting…" : "Connect"}
-          </button>
-        ) : (
-          <button
-            onClick={disconnect}
-            className="px-5 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
-          >
-            Disconnect
-          </button>
-        )}
-      </div>
-
-      {/* Tournament banner */}
-      {status === "connected" && (
-        <div
-          className={`rounded-xl p-4 border flex items-center gap-4 ${
-            tournamentActive
-              ? "bg-purple-950/40 border-purple-600"
-              : "bg-gray-900 border-gray-700"
-          }`}
-        >
-          <div className="text-3xl">{tournamentActive ? "🏆" : "⏳"}</div>
-          <div>
-            <div className="font-semibold text-white">
-              {tournamentActive
-                ? `Tournament Active — ${tournamentType ?? "Unknown Type"}`
-                : "No Active Tournament"}
-            </div>
-            <div className="text-sm text-gray-400">
-              {tournamentActive
-                ? `${gameList.length} match${gameList.length !== 1 ? "es" : ""} running · ${players.filter((p) => p.inMatch).length}/${players.length} players in game`
-                : "Waiting for admin to start a tournament"}
-            </div>
-          </div>
-        </div>
-      )}
-
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Left column */}
-        <div className="flex flex-col gap-4">
-          {/* Leaderboard */}
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
-            <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
-              Leaderboard
-            </h2>
-            {scores.length === 0 ? (
-              <p className="text-gray-500 text-sm text-center py-4">
-                {status === "connected" ? "No scores yet" : "Connect to see scores"}
-              </p>
-            ) : (
-              <div className="flex flex-col gap-1.5">
-                {scores.map((s, i) => (
-                  <div
-                    key={s.player}
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800"
-                  >
-                    <span
-                      className={`text-sm font-bold w-6 ${
-                        i === 0
-                          ? "text-yellow-400"
-                          : i === 1
-                          ? "text-gray-300"
-                          : i === 2
-                          ? "text-amber-700"
-                          : "text-gray-600"
-                      }`}
-                    >
-                      {i === 0 ? "🥇" : i === 1 ? "🥈" : i === 2 ? "🥉" : `${i + 1}.`}
-                    </span>
-                    <span className="text-white flex-1 font-medium text-sm">{s.player}</span>
-                    <span className="text-blue-400 font-bold">{s.score}</span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Player list */}
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
-            <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3 flex items-center justify-between">
-              <span>Players</span>
-              <span className="text-xs text-gray-500 font-normal">
-                {players.length} connected
-              </span>
-            </h2>
-            {players.length === 0 ? (
-              <p className="text-gray-500 text-sm text-center py-4">
-                {status === "connected" ? "No players connected" : "Connect to see players"}
-              </p>
-            ) : (
-              <div className="flex flex-col gap-1.5">
-                {players.map((p) => (
-                  <div
-                    key={p.username}
-                    className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-800"
-                  >
-                    <span className="text-white text-sm flex-1 font-medium">
-                      {p.username}
-                    </span>
-                    {p.inMatch ? (
-                      <span className="text-xs px-2 py-0.5 rounded-full bg-blue-900/60 text-blue-300 border border-blue-700">
-                        In game
-                      </span>
-                    ) : p.ready ? (
-                      <span className="text-xs px-2 py-0.5 rounded-full bg-green-900/60 text-green-300 border border-green-700">
-                        Ready
-                      </span>
-                    ) : (
-                      <span className="text-xs px-2 py-0.5 rounded-full bg-gray-700 text-gray-500">
-                        Idle
-                      </span>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Event log */}
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
-            <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2">
-              Event Log
-            </h2>
-            <div className="flex flex-col gap-0.5 max-h-40 overflow-y-auto">
-              {log.slice(0, 20).map((entry, i) => (
-                <p key={i} className="text-xs text-gray-400 font-mono">
-                  {entry}
-                </p>
-              ))}
-              {log.length === 0 && (
-                <p className="text-gray-600 text-xs">No events yet</p>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Right: active matches + board */}
-        <div className="lg:col-span-2 flex flex-col gap-4">
-          {/* Active matches */}
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
-            <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
-              Active Matches
-            </h2>
-            {gameList.length === 0 ? (
-              <p className="text-gray-500 text-sm text-center py-3">
-                {status === "connected" ? "No active matches" : "Connect to see matches"}
-              </p>
-            ) : (
-              <div className="flex flex-wrap gap-2">
-                {gameList.map((g) => {
-                  const live = liveGames.get(g.id);
-                  return (
-                    <button
-                      key={g.id}
-                      onClick={() => setSelectedGame(selectedGame === g.id ? null : g.id)}
-                      className={`px-3 py-2 rounded-lg border text-sm transition-colors ${
-                        selectedGame === g.id
-                          ? "border-blue-500 bg-blue-950/50 text-blue-200"
-                          : "border-gray-700 bg-gray-800 hover:border-gray-500 text-gray-300"
-                      }`}
-                    >
-                      <span className="text-gray-500 text-xs font-mono mr-1">
-                        #{g.id}
-                      </span>
-                      <span className="text-red-400">{g.player1}</span>
-                      <span className="text-gray-500 mx-1">vs</span>
-                      <span className="text-yellow-400">{g.player2}</span>
-                      {live?.result && (
-                        <span className="ml-1 text-xs">
-                          {live.result.kind === "win"
-                            ? ` 🏆 ${live.result.winner}`
-                            : live.result.kind === "draw"
-                            ? " 🤝"
-                            : " ⛔"}
-                        </span>
-                      )}
-                    </button>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-
-          {/* Selected game board */}
-          <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center gap-4 min-h-64">
-            {!selectedGameData ? (
-              <div className="flex flex-col items-center justify-center gap-3 py-12 text-center">
-                <span className="text-4xl text-gray-700">🎯</span>
-                <p className="text-gray-500 text-sm">
-                  {gameList.length > 0
-                    ? "Click a match above to see the board"
-                    : "Active matches will appear here"}
-                </p>
-              </div>
-            ) : (
-              <>
-                {selectedGameData.result && (
-                  <div
-                    className={`w-full rounded-lg p-3 text-center font-semibold ${
-                      selectedGameData.result.kind === "win"
-                        ? "bg-green-900/50 border border-green-600 text-green-300"
-                        : selectedGameData.result.kind === "draw"
-                        ? "bg-blue-900/50 border border-blue-600 text-blue-300"
-                        : "bg-red-900/50 border border-red-600 text-red-300"
-                    }`}
-                  >
-                    {selectedGameData.result.kind === "win"
-                      ? `🏆 ${selectedGameData.result.winner} wins!`
-                      : selectedGameData.result.kind === "draw"
-                      ? "🤝 Draw!"
-                      : "⛔ Match Terminated"}
-                  </div>
-                )}
-                <Board
-                  board={selectedGameData.board}
-                  lastMove={selectedGameData.lastMove}
-                  player1={selectedGameData.player1}
-                  player2={selectedGameData.player2}
-                  currentTurnColor={selectedGameData.result ? null : selectedGameData.currentTurnColor}
-                  disabled
-                />
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function StatusBadge({ status }: { status: ConnStatus }) {
-  const colors: Record<ConnStatus, string> = {
-    idle: "bg-gray-700 text-gray-400",
-    connecting: "bg-yellow-900/60 text-yellow-300 animate-pulse",
-    connected: "bg-green-900/60 text-green-300",
-    disconnected: "bg-red-900/60 text-red-300",
-  };
-  const labels: Record<ConnStatus, string> = {
-    idle: "Not connected",
-    connecting: "Connecting…",
-    connected: "Connected",
-    disconnected: "Disconnected",
-  };
-  return (
-    <span className={`px-3 py-1.5 rounded-full text-sm font-medium ${colors[status]}`}>
-      {labels[status]}
-    </span>
-  );
+export default function TournamentRedirectPage() {
+	redirect("/spectate");
 }
diff --git a/connect4-ui/components/Nav.tsx b/connect4-ui/components/Nav.tsx
index ba2ba25..198bda5 100644
--- a/connect4-ui/components/Nav.tsx
+++ b/connect4-ui/components/Nav.tsx
@@ -1,39 +1,121 @@
 "use client";
 import Link from "next/link";
+import { FormEvent, useState } from "react";
+import { useRouter } from "next/navigation";
 import { usePathname } from "next/navigation";
-
-const links = [
-  { href: "/spectate", label: "👁 Spectate", desc: "Watch live matches" },
-  { href: "/tournament", label: "🏆 Tournament", desc: "Tournament standings" },
-  { href: "/play", label: "🎮 Play", desc: "Join as a player" },
-];
+import { useConnection } from "@/lib/connection";
+import { cmd, DEFAULT_WS_URL } from "@/lib/protocol";
 
 export default function Nav() {
-  const path = usePathname();
-  return (
-    <nav className="bg-gray-900 border-b border-gray-800 px-4 py-3">
-      <div className="max-w-7xl mx-auto flex items-center gap-6">
-        <Link href="/" 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>
-        </Link>
-        <div className="flex gap-1 ml-4">
-          {links.map(({ href, label }) => (
-            <Link
-              key={href}
-              href={href}
-              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                path === href
-                  ? "bg-blue-600 text-white"
-                  : "text-gray-300 hover:bg-gray-800 hover:text-white"
-              }`}
-            >
-              {label}
-            </Link>
-          ))}
-        </div>
-      </div>
-    </nav>
-  );
+	const pathname = usePathname();
+	const router = useRouter();
+	const { status, role, username, send, becomePlayer } = useConnection();
+	const [showPlayerModal, setShowPlayerModal] = useState(false);
+	const [nextUsername, setNextUsername] = useState(username);
+
+	const statusLabel =
+		status === "connected"
+			? `Connected ${role === "player" ? `as ${username}` : "as observer"}`
+			: status === "reconnecting"
+				? "Reconnecting..."
+				: status === "connecting"
+					? "Connecting..."
+					: "Not connected";
+	const isConnectionPage = pathname === "/";
+
+	const disableRoleSwitch =
+		status === "connecting" || status === "reconnecting";
+
+	const handleBecomeObserver = () => {
+    send(cmd.disconnect());
+		router.push("/spectate");
+	};
+
+	const handleBecomePlayer = (event: FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		const trimmed = nextUsername.trim();
+		if (!trimmed) return;
+
+    becomePlayer(trimmed);
+		setShowPlayerModal(false);
+		router.push("/play");
+	};
+
+	return (
+		<>
+			<nav className="bg-gray-900 border-b border-gray-800 px-4 py-3">
+				<div className="max-w-7xl mx-auto flex items-center gap-4 flex-wrap">
+					<Link
+						href="/"
+						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>
+					</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>
+						)}
+
+						<div className="text-xs text-gray-400 bg-gray-800 px-3 py-1 rounded-full">
+							{statusLabel}
+						</div>
+					</div>
+				</div>
+			</nav>
+
+			{showPlayerModal && (
+				<div className="fixed inset-0 z-50 bg-black/60 flex items-center justify-center px-4">
+					<form
+						onSubmit={handleBecomePlayer}
+						className="w-full max-w-sm bg-gray-900 border border-gray-700 rounded-xl p-5 flex flex-col gap-3"
+					>
+						<h2 className="text-lg font-semibold text-white">Become Player</h2>
+						<p className="text-sm text-gray-400">
+							Enter a username to connect as a player.
+						</p>
+
+						<input
+							autoFocus
+							value={nextUsername}
+							onChange={(event) => setNextUsername(event.target.value)}
+							className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none"
+							placeholder="Username"
+						/>
+
+						<div className="flex justify-end gap-2 pt-1">
+							<button
+								type="button"
+								onClick={() => setShowPlayerModal(false)}
+								className="px-3 py-2 rounded-lg text-sm font-medium bg-gray-700 hover:bg-gray-600 text-white"
+							>
+								Cancel
+							</button>
+							<button
+								type="submit"
+								className="px-3 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-500 text-white"
+							>
+								Continue
+							</button>
+						</div>
+					</form>
+				</div>
+			)}
+		</>
+	);
 }
diff --git a/connect4-ui/lib/connection.tsx b/connect4-ui/lib/connection.tsx
new file mode 100644
index 0000000..dbc2c39
--- /dev/null
+++ b/connect4-ui/lib/connection.tsx
@@ -0,0 +1,384 @@
+"use client";
+
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import {
+	DEFAULT_WS_URL,
+	ParsedMessage,
+	RECONNECT_INTERVAL_MS,
+	RECONNECT_TIMEOUT_MS,
+	cmd,
+	parseMessage,
+} from "@/lib/protocol";
+
+export type ConnectionRole = "observer" | "player";
+export type ConnectionStatus =
+	| "idle"
+	| "connecting"
+	| "connected"
+	| "reconnecting"
+	| "disconnected";
+
+type MessageListener = (message: ParsedMessage, raw: string) => void;
+
+interface ConnectOptions {
+	role: ConnectionRole;
+	wsUrl: string;
+	username?: string;
+}
+
+interface ConnectionContextValue {
+	role: ConnectionRole | null;
+	wsUrl: string;
+	username: string;
+	status: ConnectionStatus;
+	isInMatch: boolean;
+	reconnectAttempts: number;
+	shouldRedirectToConnect: boolean;
+	becomePlayer: (username: string) => void;
+	connect: (options: ConnectOptions) => void;
+	disconnect: () => void;
+	send: (message: string) => boolean;
+	subscribe: (listener: MessageListener) => () => void;
+	clearRedirectFlag: () => void;
+}
+
+const ConnectionContext = createContext<ConnectionContextValue | null>(null);
+
+interface SessionState {
+	role: ConnectionRole;
+	wsUrl: string;
+	username: string;
+}
+
+export function ConnectionProvider({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	const [role, setRole] = useState<ConnectionRole | null>(null);
+	const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
+	const [username, setUsername] = useState("");
+	const [status, setStatus] = useState<ConnectionStatus>("idle");
+	const [isInMatch, setIsInMatch] = useState(false);
+	const [reconnectAttempts, setReconnectAttempts] = useState(0);
+	const [shouldRedirectToConnect, setShouldRedirectToConnect] = useState(false);
+
+	const wsRef = useRef<WebSocket | null>(null);
+	const listenersRef = useRef<Set<MessageListener>>(new Set());
+	const manualCloseRef = useRef(false);
+	const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const reconnectDeadlineRef = useRef<number | null>(null);
+	const reconnectActiveRef = useRef(false);
+	const isInMatchRef = useRef(false);
+	const sessionRef = useRef<SessionState | null>(null);
+
+	const clearReconnectTimer = useCallback(() => {
+		if (reconnectTimerRef.current) {
+			clearTimeout(reconnectTimerRef.current);
+			reconnectTimerRef.current = null;
+		}
+	}, []);
+
+	const clearReconnectState = useCallback(() => {
+		reconnectActiveRef.current = false;
+		reconnectDeadlineRef.current = null;
+		clearReconnectTimer();
+		setReconnectAttempts(0);
+	}, [clearReconnectTimer]);
+
+	const emitMessage = useCallback((message: ParsedMessage, raw: string) => {
+		listenersRef.current.forEach((listener) => listener(message, raw));
+	}, []);
+
+	const safeCloseSocket = useCallback(() => {
+		const current = wsRef.current;
+		if (!current) return;
+		current.onopen = null;
+		current.onmessage = null;
+		current.onclose = null;
+		current.onerror = null;
+		try {
+			current.close();
+		} catch {
+			// no-op
+		}
+		wsRef.current = null;
+	}, []);
+
+	const handleDisconnect = useCallback(() => {
+		const currentRole = sessionRef.current?.role;
+
+		if (currentRole === "observer") {
+			clearReconnectState();
+			setStatus("disconnected");
+			setShouldRedirectToConnect(true);
+			return;
+		}
+
+		if (currentRole === "player" && isInMatchRef.current) {
+			if (reconnectActiveRef.current) {
+				setStatus("reconnecting");
+				return;
+			}
+			reconnectActiveRef.current = true;
+			reconnectDeadlineRef.current = Date.now() + RECONNECT_TIMEOUT_MS;
+			setStatus("reconnecting");
+			setReconnectAttempts(0);
+			return;
+		}
+
+		clearReconnectState();
+		setStatus("disconnected");
+		setShouldRedirectToConnect(true);
+	}, [clearReconnectState]);
+
+	const attachSocket = useCallback(
+		(socket: WebSocket, reconnecting: boolean) => {
+			socket.onopen = () => {
+				const session = sessionRef.current;
+				if (!session) return;
+
+				if (session.role === "observer") {
+					setStatus("connected");
+					return;
+				}
+
+				if (reconnecting) {
+					socket.send(cmd.reconnect(session.username));
+				} else {
+					socket.send(cmd.connect(session.username));
+				}
+			};
+
+			socket.onmessage = (event) => {
+				const raw = event.data as string;
+				const parsed = parseMessage(raw);
+
+				if (parsed.type === "CONNECT_ACK") {
+                    setRole("player");
+				}
+
+                if (parsed.type === "RECONNECT_ACK") {
+					clearReconnectState();
+					setShouldRedirectToConnect(false);
+					setStatus("connected");
+				}
+
+                if (parsed.type === "DISCONNECT_ACK") {
+                    setRole("observer");
+                    setUsername("");
+                    isInMatchRef.current = false;
+                    setIsInMatch(false);
+                }
+
+				if (parsed.type === "GAME_START") {
+					isInMatchRef.current = true;
+					setIsInMatch(true);
+				}
+
+				if (
+					parsed.type === "GAME_WINS" ||
+					parsed.type === "GAME_LOSS" ||
+					parsed.type === "GAME_DRAW" ||
+					parsed.type === "GAME_TERMINATED"
+				) {
+					isInMatchRef.current = false;
+					setIsInMatch(false);
+				}
+
+				if (
+					parsed.type === "ERROR" &&
+					reconnecting &&
+					parsed.message.startsWith("ERROR:INVALID:RECONNECT")
+				) {
+					safeCloseSocket();
+				}
+
+				emitMessage(parsed, raw);
+			};
+
+			socket.onclose = () => {
+				wsRef.current = null;
+				if (manualCloseRef.current) {
+					manualCloseRef.current = false;
+					return;
+				}
+				handleDisconnect();
+			};
+
+			socket.onerror = () => {
+				// Allow close event to drive state transitions.
+			};
+		},
+		[clearReconnectState, emitMessage, handleDisconnect, safeCloseSocket],
+	);
+
+	const openSocket = useCallback(
+		(reconnecting: boolean) => {
+			const session = sessionRef.current;
+			if (!session) return;
+
+			safeCloseSocket();
+			manualCloseRef.current = false;
+			const socket = new WebSocket(session.wsUrl);
+			wsRef.current = socket;
+			attachSocket(socket, reconnecting);
+		},
+		[attachSocket, safeCloseSocket],
+	);
+
+	useEffect(() => {
+		if (!reconnectActiveRef.current) return;
+
+		const runReconnectAttempt = () => {
+			if (!reconnectActiveRef.current) return;
+
+			const deadline = reconnectDeadlineRef.current;
+			if (!deadline || Date.now() >= deadline) {
+				reconnectActiveRef.current = false;
+				reconnectDeadlineRef.current = null;
+				setStatus("disconnected");
+				setShouldRedirectToConnect(true);
+				return;
+			}
+
+			setReconnectAttempts((prev) => prev + 1);
+			openSocket(true);
+
+			clearReconnectTimer();
+			reconnectTimerRef.current = setTimeout(
+				runReconnectAttempt,
+				RECONNECT_INTERVAL_MS,
+			);
+		};
+
+		runReconnectAttempt();
+
+		return () => clearReconnectTimer();
+	}, [clearReconnectTimer, openSocket, status]);
+
+	const connect = useCallback(
+		({ role, wsUrl, username }: ConnectOptions) => {
+			const resolvedUsername = (username ?? "").trim();
+			sessionRef.current = { role, wsUrl, username: resolvedUsername };
+
+			setRole(role);
+			setWsUrl(wsUrl);
+			setUsername(resolvedUsername);
+			setShouldRedirectToConnect(false);
+			clearReconnectState();
+			isInMatchRef.current = false;
+			setIsInMatch(false);
+			setStatus("connecting");
+
+			openSocket(false);
+		},
+		[clearReconnectState, openSocket],
+	);
+
+	const becomePlayer = useCallback(
+		(username: string) => {
+			const resolvedUsername = (username ?? "").trim();
+			setRole("player");
+			setUsername(resolvedUsername);
+			isInMatchRef.current = false;
+			setIsInMatch(false);
+			send(cmd.connect(resolvedUsername));
+		},
+		[clearReconnectState, openSocket],
+	);
+
+
+	const disconnect = useCallback(() => {
+		clearReconnectState();
+		manualCloseRef.current = true;
+		safeCloseSocket();
+
+		sessionRef.current = null;
+		setRole(null);
+		setStatus("idle");
+		setUsername("");
+		setIsInMatch(false);
+		isInMatchRef.current = false;
+		setShouldRedirectToConnect(false);
+	}, [clearReconnectState, safeCloseSocket]);
+
+	const send = useCallback((message: string) => {
+		if (wsRef.current?.readyState !== WebSocket.OPEN) return false;
+		wsRef.current.send(message);
+		return true;
+	}, []);
+
+	const subscribe = useCallback((listener: MessageListener) => {
+		listenersRef.current.add(listener);
+		return () => {
+			listenersRef.current.delete(listener);
+		};
+	}, []);
+
+	const clearRedirectFlag = useCallback(() => {
+		setShouldRedirectToConnect(false);
+	}, []);
+
+	useEffect(() => {
+		return () => {
+			clearReconnectState();
+			manualCloseRef.current = true;
+			safeCloseSocket();
+		};
+	}, [clearReconnectState, safeCloseSocket]);
+
+	const value = useMemo<ConnectionContextValue>(
+		() => ({
+			role,
+			wsUrl,
+			username,
+			status,
+			isInMatch,
+			reconnectAttempts,
+			shouldRedirectToConnect,
+			becomePlayer,
+			connect,
+			disconnect,
+			send,
+			subscribe,
+			clearRedirectFlag,
+		}),
+		[
+			role,
+			wsUrl,
+			username,
+			status,
+			isInMatch,
+			reconnectAttempts,
+			shouldRedirectToConnect,
+			connect,
+			disconnect,
+			send,
+			subscribe,
+			clearRedirectFlag,
+		],
+	);
+
+	return (
+		<ConnectionContext.Provider value={value}>
+			{children}
+		</ConnectionContext.Provider>
+	);
+}
+
+export function useConnection() {
+	const context = useContext(ConnectionContext);
+	if (!context) {
+		throw new Error("useConnection must be used within a ConnectionProvider");
+	}
+	return context;
+}
diff --git a/connect4-ui/lib/protocol.ts b/connect4-ui/lib/protocol.ts
index 2647c9f..6801c9f 100644
--- a/connect4-ui/lib/protocol.ts
+++ b/connect4-ui/lib/protocol.ts
@@ -1,218 +1,239 @@
 // ─── Types ───────────────────────────────────────────────────────────────────
 
 export interface GameEntry {
-  id: number;
-  player1: string;
-  player2: string;
+	id: number;
+	player1: string;
+	player2: string;
 }
 
 export interface PlayerEntry {
-  username: string;
-  ready: boolean;
-  inMatch: boolean;
+	username: string;
+	ready: boolean;
+	inMatch: boolean;
 }
 
 export interface ScoreEntry {
-  player: string;
-  score: number;
+	player: string;
+	score: number;
 }
 
 export interface MoveEntry {
-  username: string;
-  column: number;
+	username: string;
+	column: number;
 }
 
+export const DEFAULT_WS_URL = process.env.NODE_ENV === "development"
+	? "ws://localhost:8080"
+	: "wss://connect4.abunchofknowitalls.com";
+export const RECONNECT_INTERVAL_MS = 5000;
+export const RECONNECT_TIMEOUT_MS = 60000;
+
 // ─── Parsed message union ────────────────────────────────────────────────────
 
 export type ParsedMessage =
-  | { type: "CONNECT_ACK" }
-  | { type: "RECONNECT_ACK" }
-  | { type: "DISCONNECT_ACK" }
-  | { type: "READY_ACK" }
-  | { type: "GAME_START"; goesFirst: boolean }
-  | { type: "GAME_WINS" }
-  | { type: "GAME_LOSS" }
-  | { type: "GAME_DRAW" }
-  | { type: "GAME_TERMINATED" }
-  | { type: "OPPONENT_MOVE"; column: number }
-  | { type: "GAME_LIST"; games: GameEntry[] }
-  | {
-      type: "GAME_WATCH_ACK";
-      matchId: number;
-      player1: string;
-      player2: string;
-      moves: MoveEntry[];
-    }
-  | { type: "GAME_MOVE"; username: string; column: number }
-  | { type: "GAME_WIN"; winner: string }
-  | { type: "PLAYER_LIST"; players: PlayerEntry[] }
-  | { type: "TOURNAMENT_START"; tournamentType: string }
-  | { type: "TOURNAMENT_CANCEL" }
-  | { type: "TOURNAMENT_SCORES"; scores: ScoreEntry[] }
-  | { type: "TOURNAMENT_END" }
-  | { type: "ADMIN_AUTH_ACK" }
-  | { type: "GET_DATA"; key: string; value: string }
-  | { type: "SET_DATA_ACK"; key: string }
-  | { type: "ERROR"; message: string }
-  | { type: "UNKNOWN"; raw: string };
+	| { type: "CONNECT_ACK" }
+	| { type: "RECONNECT_ACK" }
+	| { type: "DISCONNECT_ACK" }
+	| { type: "READY_ACK" }
+	| { type: "GAME_START"; goesFirst: boolean }
+	| { type: "GAME_WINS" }
+	| { type: "GAME_LOSS" }
+	| { type: "GAME_DRAW" }
+	| { type: "GAME_TERMINATED" }
+	| { type: "OPPONENT_MOVE"; column: number }
+	| { type: "GAME_LIST"; games: GameEntry[] }
+	| {
+			type: "GAME_WATCH_ACK";
+			matchId: number;
+			player1: string;
+			player2: string;
+			moves: MoveEntry[];
+	  }
+	| { type: "GAME_MOVE"; username: string; column: number }
+	| { type: "GAME_WIN"; winner: string }
+	| { type: "PLAYER_LIST"; players: PlayerEntry[] }
+	| { type: "TOURNAMENT_START"; tournamentType: string }
+	| { type: "TOURNAMENT_CANCEL" }
+	| { type: "TOURNAMENT_SCORES"; scores: ScoreEntry[] }
+	| { type: "TOURNAMENT_END" }
+	| { type: "ADMIN_AUTH_ACK" }
+	| { type: "GET_DATA"; key: string; value: string }
+	| { type: "SET_DATA_ACK"; key: string }
+	| { type: "ERROR"; message: string }
+	| { type: "UNKNOWN"; raw: string };
 
 // ─── Parser ──────────────────────────────────────────────────────────────────
 
 export function parseMessage(raw: string): ParsedMessage {
-  const parts = raw.split(":");
+	const parts = raw.split(":");
 
-  switch (parts[0]) {
-    case "CONNECT":
-      if (parts[1] === "ACK") return { type: "CONNECT_ACK" };
-      break;
-    case "RECONNECT":
-      if (parts[1] === "ACK") return { type: "RECONNECT_ACK" };
-      break;
-    case "DISCONNECT":
-      if (parts[1] === "ACK") return { type: "DISCONNECT_ACK" };
-      break;
-    case "READY":
-      if (parts[1] === "ACK") return { type: "READY_ACK" };
-      break;
+	switch (parts[0]) {
+		case "CONNECT":
+			if (parts[1] === "ACK") return { type: "CONNECT_ACK" };
+			break;
+		case "RECONNECT":
+			if (parts[1] === "ACK") return { type: "RECONNECT_ACK" };
+			break;
+		case "DISCONNECT":
+			if (parts[1] === "ACK") return { type: "DISCONNECT_ACK" };
+			break;
+		case "READY":
+			if (parts[1] === "ACK") return { type: "READY_ACK" };
+			break;
 
-    case "GAME": {
-      switch (parts[1]) {
-        case "START":
-          return { type: "GAME_START", goesFirst: parts[2] === "1" };
-        case "WINS":
-          return { type: "GAME_WINS" };
-        case "LOSS":
-          return { type: "GAME_LOSS" };
-        case "DRAW":
-          return { type: "GAME_DRAW" };
-        case "TERMINATED":
-          return { type: "GAME_TERMINATED" };
+		case "GAME": {
+			switch (parts[1]) {
+				case "START":
+					return { type: "GAME_START", goesFirst: parts[2] === "1" };
+				case "WINS":
+					return { type: "GAME_WINS" };
+				case "LOSS":
+					return { type: "GAME_LOSS" };
+				case "DRAW":
+					return { type: "GAME_DRAW" };
+				case "TERMINATED":
+					return { type: "GAME_TERMINATED" };
 
-        case "LIST": {
-          const data = parts[2] ?? "";
-          if (!data) return { type: "GAME_LIST", games: [] };
-          const games: GameEntry[] = data.split("|").map((g) => {
-            const [id, player1, player2] = g.split(",");
-            return { id: parseInt(id), player1, player2 };
-          });
-          return { type: "GAME_LIST", games };
-        }
+				case "LIST": {
+					const data = parts[2] ?? "";
+					if (!data) return { type: "GAME_LIST", games: [] };
+					const games: GameEntry[] = data.split("|").map((g) => {
+						const [id, player1, player2] = g.split(",");
+						return { id: parseInt(id), player1, player2 };
+					});
+					return { type: "GAME_LIST", games };
+				}
 
-        case "WATCH": {
-          if (parts[2] === "ACK") {
-            // GAME:WATCH:ACK:<id>,<p1>,<p2>|<username>,<col>|...
-            const data = parts.slice(3).join(":");
-            const segments = data.split("|");
-            const [idStr, player1, player2] = segments[0].split(",");
-            const moves: MoveEntry[] = segments.slice(1).filter(Boolean).map((m) => {
-              const lastComma = m.lastIndexOf(",");
-              return {
-                username: m.substring(0, lastComma),
-                column: parseInt(m.substring(lastComma + 1)),
-              };
-            });
-            return {
-              type: "GAME_WATCH_ACK",
-              matchId: parseInt(idStr),
-              player1,
-              player2,
-              moves,
-            };
-          }
-          break;
-        }
+				case "WATCH": {
+					if (parts[2] === "ACK") {
+						// GAME:WATCH:ACK:<id>,<p1>,<p2>|<username>,<col>|...
+						const data = parts.slice(3).join(":");
+						const segments = data.split("|");
+						const [idStr, player1, player2] = segments[0].split(",");
+						const moves: MoveEntry[] = segments
+							.slice(1)
+							.filter(Boolean)
+							.map((m) => {
+								const lastComma = m.lastIndexOf(",");
+								return {
+									username: m.substring(0, lastComma),
+									column: parseInt(m.substring(lastComma + 1)),
+								};
+							});
+						return {
+							type: "GAME_WATCH_ACK",
+							matchId: parseInt(idStr),
+							player1,
+							player2,
+							moves,
+						};
+					}
+					break;
+				}
 
-        case "MOVE":
-          // GAME:MOVE:<username>:<column>
-          return { type: "GAME_MOVE", username: parts[2], column: parseInt(parts[3]) };
+				case "MOVE":
+					// GAME:MOVE:<username>:<column>
+					return {
+						type: "GAME_MOVE",
+						username: parts[2],
+						column: parseInt(parts[3]),
+					};
 
-        case "WIN":
-          return { type: "GAME_WIN", winner: parts[2] };
-      }
-      break;
-    }
+				case "WIN":
+					return { type: "GAME_WIN", winner: parts[2] };
+			}
+			break;
+		}
 
-    case "OPPONENT":
-      return { type: "OPPONENT_MOVE", column: parseInt(parts[1]) };
+		case "OPPONENT":
+			return { type: "OPPONENT_MOVE", column: parseInt(parts[1]) };
 
-    case "PLAYER": {
-      if (parts[1] === "LIST") {
-        const data = parts[2] ?? "";
-        if (!data) return { type: "PLAYER_LIST", players: [] };
-        const players: PlayerEntry[] = data.split("|").map((p) => {
-          const [username, ready, inMatch] = p.split(",");
-          return { username, ready: ready === "true", inMatch: inMatch === "true" };
-        });
-        return { type: "PLAYER_LIST", players };
-      }
-      break;
-    }
+		case "PLAYER": {
+			if (parts[1] === "LIST") {
+				const data = parts[2] ?? "";
+				if (!data) return { type: "PLAYER_LIST", players: [] };
+				const players: PlayerEntry[] = data.split("|").map((p) => {
+					const [username, ready, inMatch] = p.split(",");
+					return {
+						username,
+						ready: ready === "true",
+						inMatch: inMatch === "true",
+					};
+				});
+				return { type: "PLAYER_LIST", players };
+			}
+			break;
+		}
 
-    case "TOURNAMENT": {
-      switch (parts[1]) {
-        case "START":
-          return { type: "TOURNAMENT_START", tournamentType: parts[2] };
-        case "CANCEL":
-          return { type: "TOURNAMENT_CANCEL" };
-        case "SCORES": {
-          const data = parts[2] ?? "";
-          if (!data) return { type: "TOURNAMENT_SCORES", scores: [] };
-          const scores: ScoreEntry[] = data.split("|").map((s) => {
-            const lastComma = s.lastIndexOf(",");
-            return {
-              player: s.substring(0, lastComma),
-              score: parseInt(s.substring(lastComma + 1)),
-            };
-          });
-          return { type: "TOURNAMENT_SCORES", scores };
-        }
-        case "END":
-          return { type: "TOURNAMENT_END" };
-      }
-      break;
-    }
+		case "TOURNAMENT": {
+			switch (parts[1]) {
+				case "START":
+					return { type: "TOURNAMENT_START", tournamentType: parts[2] };
+				case "CANCEL":
+					return { type: "TOURNAMENT_CANCEL" };
+				case "SCORES": {
+					const data = parts[2] ?? "";
+					if (!data) return { type: "TOURNAMENT_SCORES", scores: [] };
+					const scores: ScoreEntry[] = data.split("|").map((s) => {
+						const lastComma = s.lastIndexOf(",");
+						return {
+							player: s.substring(0, lastComma),
+							score: parseInt(s.substring(lastComma + 1)),
+						};
+					});
+					return { type: "TOURNAMENT_SCORES", scores };
+				}
+				case "END":
+					return { type: "TOURNAMENT_END" };
+			}
+			break;
+		}
 
-    case "ADMIN":
-      if (parts[1] === "AUTH" && parts[2] === "ACK") return { type: "ADMIN_AUTH_ACK" };
-      break;
+		case "ADMIN":
+			if (parts[1] === "AUTH" && parts[2] === "ACK")
+				return { type: "ADMIN_AUTH_ACK" };
+			break;
 
-    case "GET":
-      return { type: "GET_DATA", key: parts[1], value: parts[2] ?? "" };
+		case "GET":
+			return { type: "GET_DATA", key: parts[1], value: parts[2] ?? "" };
 
-    case "SET":
-      if (parts[2] === "ACK") return { type: "SET_DATA_ACK", key: parts[1] };
-      break;
+		case "SET":
+			if (parts[2] === "ACK") return { type: "SET_DATA_ACK", key: parts[1] };
+			break;
 
-    case "ERROR":
-      return { type: "ERROR", message: raw };
-  }
+		case "ERROR":
+			return { type: "ERROR", message: raw };
+	}
 
-  return { type: "UNKNOWN", raw };
+	return { type: "UNKNOWN", raw };
 }
 
 // ─── Command builders ────────────────────────────────────────────────────────
 
 export const cmd = {
-  connect: (username: string) => `CONNECT:${username}`,
-  reconnect: (username: string) => `RECONNECT:${username}`,
-  disconnect: () => "DISCONNECT",
-  ready: () => "READY",
-  play: (column: number) => `PLAY:${column}`,
-  playerList: () => "PLAYER:LIST",
-  gameList: () => "GAME:LIST",
-  gameWatch: (matchId: number) => `GAME:WATCH:${matchId}`,
-  gameTerminate: (matchId: number) => `GAME:TERMINATE:${matchId}`,
-  gameAward: (matchId: number, winner: string) => `GAME:AWARD:${matchId}:${winner}`,
-  adminAuth: (password: string) => `ADMIN:AUTH:${password}`,
-  adminKick: (username: string) => `ADMIN:KICK:${username}`,
-  tournamentStart: (type = "RoundRobin") => `TOURNAMENT:START:${type}`,
-  tournamentCancel: () => "TOURNAMENT:CANCEL",
-  getData: (key: "TOURNAMENT_STATUS" | "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}`,
-  reservationDelete: (p1: string, p2: string) => `RESERVATION:DELETE:${p1},${p2}`,
-  reservationGet: () => "RESERVATION:GET",
+	connect: (username: string) => `CONNECT:${username}`,
+	reconnect: (username: string) => `RECONNECT:${username}`,
+	disconnect: () => "DISCONNECT",
+	ready: () => "READY",
+	play: (column: number) => `PLAY:${column}`,
+	playerList: () => "PLAYER:LIST",
+	gameList: () => "GAME:LIST",
+	gameWatch: (matchId: number) => `GAME:WATCH:${matchId}`,
+	gameTerminate: (matchId: number) => `GAME:TERMINATE:${matchId}`,
+	gameAward: (matchId: number, winner: string) =>
+		`GAME:AWARD:${matchId}:${winner}`,
+	adminAuth: (password: string) => `ADMIN:AUTH:${password}`,
+	adminKick: (username: string) => `ADMIN:KICK:${username}`,
+	tournamentStart: (type = "RoundRobin") => `TOURNAMENT:START:${type}`,
+	tournamentCancel: () => "TOURNAMENT:CANCEL",
+	getData: (
+		key: "TOURNAMENT_STATUS" | "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}`,
+	reservationDelete: (p1: string, p2: string) =>
+		`RESERVATION:DELETE:${p1},${p2}`,
+	reservationGet: () => "RESERVATION:GET",
 };
 
 // ─── Board helpers ────────────────────────────────────────────────────────────
@@ -222,39 +243,39 @@ export type CellColor = 0 | 1 | 2;
 export type BoardState = CellColor[][]; // board[col][row], 7 cols × 6 rows
 
 export function createEmptyBoard(): BoardState {
-  return Array.from({ length: 7 }, () => Array(6).fill(0)) as BoardState;
+	return Array.from({ length: 7 }, () => Array(6).fill(0)) as BoardState;
 }
 
 /** Place a token and return the new board plus the row it landed in (-1 if column full). */
 export function placeToken(
-  board: BoardState,
-  color: 1 | 2,
-  column: number
+	board: BoardState,
+	color: 1 | 2,
+	column: number,
 ): { board: BoardState; row: number } {
-  const newBoard = board.map((col) => [...col]) as BoardState;
-  let placedRow = -1;
-  for (let row = 0; row < 6; row++) {
-    if (newBoard[column][row] === 0) {
-      newBoard[column][row] = color;
-      placedRow = row;
-      break;
-    }
-  }
-  return { board: newBoard, row: placedRow };
+	const newBoard = board.map((col) => [...col]) as BoardState;
+	let placedRow = -1;
+	for (let row = 0; row < 6; row++) {
+		if (newBoard[column][row] === 0) {
+			newBoard[column][row] = color;
+			placedRow = row;
+			break;
+		}
+	}
+	return { board: newBoard, row: placedRow };
 }
 
 /** Replay a move list onto an empty board. */
 export function replayMoves(
-  moves: MoveEntry[],
-  player1: string
+	moves: MoveEntry[],
+	player1: string,
 ): { board: BoardState; lastMove: { column: number; row: number } | null } {
-  let board = createEmptyBoard();
-  let lastMove: { column: number; row: number } | null = null;
-  for (const move of moves) {
-    const color: 1 | 2 = move.username === player1 ? 1 : 2;
-    const result = placeToken(board, color, move.column);
-    board = result.board;
-    lastMove = { column: move.column, row: result.row };
-  }
-  return { board, lastMove };
+	let board = createEmptyBoard();
+	let lastMove: { column: number; row: number } | null = null;
+	for (const move of moves) {
+		const color: 1 | 2 = move.username === player1 ? 1 : 2;
+		const result = placeToken(board, color, move.column);
+		board = result.board;
+		lastMove = { column: move.column, row: result.row };
+	}
+	return { board, lastMove };
 }
