release: v0.1.1

.editorconfig

@@ -0,0 +1,4 @@
+root = true
+
+[*]
+charset = utf-8

.eslintrc.json

@@ -1,6 +0,0 @@
-{
-  "extends": [
-    "next/core-web-vitals",
-    "next/typescript"
-  ]
-}

.gitattributes

@@ -0,0 +1,2 @@
+# Normalize EOL for all files that Git considers text files.
+* text=auto eol=lf

.gitignore

@@ -1,5 +1,9 @@
-**/node_modules
-**/.DS_Store
-**/.next
-**/connect4-moderator-server/
-
+# Godot 4+ specific ignores
+.godot/
+/android/
+.idea/
+*.csproj
+*.csproj.old
+*.sln
+*.sln.*
+.DS_Store

AGENTS.md

@@ -1,4 +0,0 @@
-# AGENTS
-
-- Use the TypeScript/TSX lint checker for validation instead of `npm run build`.
-- Prefer `npm run lint` after TS/TSX changes unless the user explicitly asks for a different verification step.

Dockerfile

@@ -1,112 +0,0 @@
-# ============================================
-# Stage 1: Dependencies Installation Stage
-# ============================================
-
-# IMPORTANT: Node.js Version Maintenance
-# This Dockerfile uses Node.js 24.13.0-slim, which was the latest LTS version at the time of writing.
-# To ensure security and compatibility, regularly update the NODE_VERSION ARG to the latest LTS version.
-ARG NODE_VERSION=24.13.0-slim
-
-FROM node:${NODE_VERSION} AS dependencies
-
-# Set working directory
-WORKDIR /app
-
-# Copy package-related files first to leverage Docker's caching mechanism
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
-
-# Install project dependencies with frozen lockfile for reproducible builds
-RUN --mount=type=cache,target=/root/.npm \
-    --mount=type=cache,target=/usr/local/share/.cache/yarn \
-    --mount=type=cache,target=/root/.local/share/pnpm/store \
-  if [ -f package-lock.json ]; then \
-    npm ci --no-audit --no-fund; \
-  elif [ -f yarn.lock ]; then \
-    corepack enable yarn && yarn install --frozen-lockfile --production=false; \
-  elif [ -f pnpm-lock.yaml ]; then \
-    corepack enable pnpm && pnpm install --frozen-lockfile; \
-  else \
-    echo "No lockfile found." && exit 1; \
-  fi
-
-# ============================================
-# Stage 2: Build Next.js application in standalone mode
-# ============================================
-
-FROM node:${NODE_VERSION} AS builder
-
-# Set working directory
-WORKDIR /app
-
-# Copy project dependencies from dependencies stage
-COPY --from=dependencies /app/node_modules ./node_modules
-
-# Copy application source code
-COPY . .
-
-ENV NODE_ENV=production
-
-# Next.js collects completely anonymous telemetry data about general usage.
-# Learn more here: https://nextjs.org/telemetry
-# Uncomment the following line in case you want to disable telemetry during the build.
-# ENV NEXT_TELEMETRY_DISABLED=1
-
-# Build Next.js application
-# If you want to speed up Docker rebuilds, you can cache the build artifacts
-# by adding: --mount=type=cache,target=/app/.next/cache
-# This caches the .next/cache directory across builds, but it also prevents
-# .next/cache/fetch-cache from being included in the final image, meaning
-# cached fetch responses from the build won't be available at runtime.
-RUN if [ -f package-lock.json ]; then \
-    npm run build; \
-  elif [ -f yarn.lock ]; then \
-    corepack enable yarn && yarn build; \
-  elif [ -f pnpm-lock.yaml ]; then \
-    corepack enable pnpm && pnpm build; \
-  else \
-    echo "No lockfile found." && exit 1; \
-  fi
-
-# ============================================
-# Stage 3: Run Next.js application
-# ============================================
-
-FROM node:${NODE_VERSION} AS runner
-
-# Set working directory
-WORKDIR /app
-
-# Set production environment variables
-ENV NODE_ENV=production
-ENV PORT=3000
-ENV HOSTNAME="0.0.0.0"
-
-# Next.js collects completely anonymous telemetry data about general usage.
-# Learn more here: https://nextjs.org/telemetry
-# Uncomment the following line in case you want to disable telemetry during the run time.
-# ENV NEXT_TELEMETRY_DISABLED=1
-
-# Copy production assets
-COPY --from=builder --chown=node:node /app/public ./public
-
-# Set the correct permission for prerender cache
-RUN mkdir .next
-RUN chown node:node .next
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=node:node /app/.next/standalone ./
-COPY --from=builder --chown=node:node /app/.next/static ./.next/static
-
-# If you want to persist the fetch cache generated during the build so that
-# cached responses are available immediately on startup, uncomment this line:
-# COPY --from=builder --chown=node:node /app/.next/cache ./.next/cache
-
-# Switch to non-root user for security best practices
-USER node
-
-# Expose port 3000 to allow HTTP traffic
-EXPOSE 3000
-
-# Start Next.js standalone server
-CMD ["node", "server.js"]

README.md

@@ -1,103 +1 @@
-# Connect4 Moderator Observer UI
-
-A website interface for connecting to the [Connect4 WebSocket server](https://github.com/joshuafhiggins/connect4-moderator-server) as an observer or player, watching live matches, and managing tournaments.
-
-## Prerequisites
-
-- Linux/macOS terminal or Windows PowerShell
-- Git
-- Docker (optional, for containerized runs)
-
-## Run Locally (Node.js + npm)
-
-### 1) Install Node.js (includes npm)
-
-#### Option A: Install with `nvm` (recommended, including Windows support)
-
-On Linux/macOS:
-
-```bash
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
-source ~/.zshrc
-nvm install --lts
-nvm use --lts
-node -v
-npm -v
-```
-
-On Windows (PowerShell), use `nvm-windows`:
-
-```powershell
-winget install CoreyButler.NVMforWindows
-nvm install lts
-nvm use lts
-node -v
-npm -v
-```
-
-### 2) Install dependencies
-
-From the project root:
-
-```bash
-npm i
-```
-
-### 3) Start the UI in development mode
-
-```bash
-npm run dev
-```
-
-Open [http://localhost:3000](http://localhost:3000).
-
-## Run with Docker
-
-This repository includes:
-
-- `Dockerfile` (multi-stage production build)
-- `docker-compose.yml`
-- `docker_build.sh`
-
-### Build image directly from `Dockerfile`
-
-```bash
-docker build . -t joshuafhiggins/connect4-ui
-```
-
-or use the provided script:
-
-```bash
-./docker_build.sh
-```
-
-### Run container directly
-
-```bash
-docker run --rm -p 3000:3000 --name connect4-ui joshuafhiggins/connect4-ui
-```
-
-### Run with Docker Compose
-
-```bash
-docker compose up --build
-```
-
-Run detached:
-
-```bash
-docker compose up -d --build
-```
-
-Stop:
-
-```bash
-docker compose down
-```
-
-## Useful npm Scripts
-
-- `npm run dev` - start Next.js dev server
-- `npm run build` - build for production
-- `npm run start` - run production build
-- `npm run lint` - lint the project
+# Connect4 Moderator - Observer

app/globals.css

@@ -1,15 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: #030712;
-  --foreground: #f9fafb;
-}
-
-body {
-  background-color: var(--background);
-  color: var(--foreground);
-  font-family:
-    system-ui,
-    -apple-system,
-    sans-serif;
-}

app/layout.tsx

@@ -1,46 +0,0 @@
-import type { Metadata } from "next";
-import "./globals.css";
-import Celebration from "@/components/Celebration";
-import Nav from "@/components/Nav";
-import PageTitleManager from "@/components/PageTitleManager";
-import { ConnectionProvider } from "@/lib/connection";
-import { CHIP_DROP_SOUND_PATHS } from "@/lib/sfx";
-
-export const metadata: Metadata = {
-  description: "Watch matches, track tournaments, and play Connect4",
-  icons: {
-    icon: "/favicon.ico",
-    shortcut: "/favicon.ico",
-    apple: "/icon.png",
-  },
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <head>
-        {CHIP_DROP_SOUND_PATHS.map((path) => (
-          <link
-            key={path}
-            rel="preload"
-            href={path}
-            as="audio"
-            type="audio/ogg"
-          />
-        ))}
-      </head>
-      <body className="min-h-screen bg-gray-950 text-gray-100">
-        <ConnectionProvider>
-          <PageTitleManager />
-          <Celebration />
-          <Nav />
-          <main className="max-w-7xl mx-auto px-4 py-6">{children}</main>
-        </ConnectionProvider>
-      </body>
-    </html>
-  );
-}

app/page.tsx

@@ -1,83 +0,0 @@
-"use client";
-
-import { SubmitEvent, 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() {
-  const router = useRouter();
-  const {
-    connect,
-    role,
-    status,
-    wsUrl: connectedWsUrl,
-    shouldRedirectToConnect,
-    clearRedirectFlag,
-  } = useConnection();
-
-  const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
-
-  useEffect(() => {
-    if (shouldRedirectToConnect) {
-      clearRedirectFlag();
-    }
-  }, [shouldRedirectToConnect, clearRedirectFlag]);
-
-  const onSubmit = (event: SubmitEvent<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 Server</h1>
-          <p className="text-sm text-gray-400 mt-2">
-            Connect as an observer to watch live matches and tournaments.
-          </p>
-        </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>
-
-          {shouldRedirectToConnect && (
-            <div className="rounded-lg border border-red-700 bg-red-950/40 px-4 py-3 text-sm text-red-200">
-              Connection lost. Please reconnect to continue.
-            </div>
-          )}
-
-          {status === "connected" && role && (
-            <div className="rounded-lg border border-green-700 bg-green-950/30 px-4 py-3 text-sm text-green-200">
-              Connected to {connectedWsUrl} as observer.
-            </div>
-          )}
-
-          <div className="flex flex-wrap gap-2 pt-2">
-            <button
-              type="submit"
-              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"}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}

app/play/page.tsx

@@ -1,428 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
-import Confetti from "react-confetti";
-import Board from "@/components/Board";
-import {
-  BoardState,
-  ParsedMessage,
-  cmd,
-  createEmptyBoard,
-  placeToken,
-} from "@/lib/protocol";
-import { useConnection } from "@/lib/connection";
-
-type GamePhase = "idle" | "connected" | "ready" | "playing" | "game-over";
-
-type GameResult = "win" | "loss" | "draw" | "terminated";
-
-export default function PlayPage() {
-  const router = useRouter();
-  const {
-    role,
-    username,
-    status,
-    isInMatch,
-    shouldGoFirst,
-    send,
-    subscribe,
-    reconnectAttempts,
-    shouldRedirectToConnect,
-    clearRedirectFlag,
-  } = useConnection();
-
-  const [gamePhase, setGamePhase] = useState<GamePhase>("idle");
-  const [myColor, setMyColor] = useState<1 | 2 | null>(null);
-  const [isMyTurn, setIsMyTurn] = useState(false);
-  const [board, setBoard] = useState<BoardState>(createEmptyBoard());
-  const [lastMove, setLastMove] = useState<{
-    column: number;
-    row: number;
-  } | null>(null);
-  const [gameResult, setGameResult] = useState<GameResult | null>(null);
-  const [tournamentMode, setTournamentMode] = useState(false);
-  const [showWinConfetti, setShowWinConfetti] = useState(false);
-  const [winConfettiBurstId, setWinConfettiBurstId] = useState(0);
-  const [viewport, setViewport] = useState({ width: 0, height: 0 });
-
-  const myColorRef = useRef<1 | 2 | null>(null);
-  const isMyTurnRef = useRef(false);
-
-  const resetGame = useCallback(() => {
-    setBoard(createEmptyBoard());
-    setLastMove(null);
-    setMyColor(null);
-    myColorRef.current = null;
-    setIsMyTurn(false);
-    isMyTurnRef.current = false;
-    setGameResult(null);
-  }, []);
-
-  useEffect(() => {
-    const updateViewport = () => {
-      setViewport({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    };
-
-    updateViewport();
-    window.addEventListener("resize", updateViewport);
-    return () => window.removeEventListener("resize", updateViewport);
-  }, []);
-
-  useEffect(() => {
-    if (status === "disconnected" && shouldRedirectToConnect) {
-      clearRedirectFlag();
-      router.replace("/");
-    }
-
-    if (status === "idle") {
-      router.replace("/");
-    }
-
-    if (role !== "player" && status !== "idle") {
-      router.replace("/spectate");
-      return;
-    }
-
-    if (status === "connected" && gamePhase === "idle") {
-      // Mid-match reconnect can remount with phase idle while still in a match; avoid
-      // the pre-queue "connected" / Ready Up state until we know we are not in-game.
-      setGamePhase(isInMatch ? "playing" : "connected");
-      if (isInMatch) {
-        const color: 1 | 2 = shouldGoFirst ? 1 : 2;
-        setMyColor(color);
-        myColorRef.current = color;
-        
-        setIsMyTurn(shouldGoFirst);
-        isMyTurnRef.current = shouldGoFirst;
-      }
-      
-    }
-  }, [
-    role,
-    status,
-    router,
-    gamePhase,
-    isInMatch,
-    shouldRedirectToConnect,
-    clearRedirectFlag,
-  ]);
-
-  useEffect(() => {
-    const unsubscribe = subscribe((msg: ParsedMessage) => {
-      switch (msg.type) {
-        case "CONNECT_ACK":
-        case "RECONNECT_ACK":
-          setGamePhase((prev) => {
-            if (prev !== "idle") return prev;
-            if (isInMatch) return "playing";
-            return "connected";
-          });
-          break;
-
-        case "ERROR":
-          break;
-
-        case "READY_ACK":
-          setGamePhase("ready");
-          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;
-          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;
-          });
-          setIsMyTurn(true);
-          isMyTurnRef.current = true;
-          break;
-        }
-
-        case "GAME_WINS":
-          setGameResult("win");
-          setWinConfettiBurstId((prev) => prev + 1);
-          setShowWinConfetti(true);
-          setGamePhase("game-over");
-          setIsMyTurn(false);
-          isMyTurnRef.current = false;
-          break;
-
-        case "GAME_LOSS":
-          setGameResult("loss");
-          setGamePhase("game-over");
-          setIsMyTurn(false);
-          isMyTurnRef.current = false;
-          break;
-
-        case "GAME_DRAW":
-          setGameResult("draw");
-          setGamePhase("game-over");
-          setIsMyTurn(false);
-          isMyTurnRef.current = false;
-          break;
-
-        case "GAME_TERMINATED":
-          setGameResult("terminated");
-          setGamePhase("game-over");
-          setIsMyTurn(false);
-          isMyTurnRef.current = false;
-          break;
-
-        case "TOURNAMENT_START":
-          setTournamentMode(true);
-          break;
-
-        case "TOURNAMENT_END":
-          setGamePhase("connected");
-          resetGame();
-          send(cmd.ready());
-          setGamePhase("ready");
-          break;
-
-        case "TOURNAMENT_CANCEL":
-          setTournamentMode(false);
-          setGamePhase("connected");
-          resetGame();
-          break;
-
-        default:
-          break;
-      }
-    });
-
-    return unsubscribe;
-  }, [resetGame, send, subscribe, isInMatch, username]);
-
-  const handleColumnClick = useCallback(
-    (col: number) => {
-      if (!isMyTurnRef.current || gamePhase !== "playing") return;
-      const color = myColorRef.current;
-      if (!color) return;
-
-      setBoard((prev) => {
-        const { board: next, row } = placeToken(prev, color, col);
-        if (row === -1) return prev;
-        setLastMove({ column: col, row });
-        return next;
-      });
-
-      setIsMyTurn(false);
-      isMyTurnRef.current = false;
-      send(cmd.play(col));
-    },
-    [gamePhase, send],
-  );
-
-  const sendReady = useCallback(() => {
-    send(cmd.ready());
-    setGamePhase("ready");
-  }, [send]);
-
-  const myColorLabel =
-    myColor === 1 ? "🔴 Red" : myColor === 2 ? "🟡 Yellow" : null;
-  const opponentColor: 1 | 2 | null =
-    myColor === 1 ? 2 : myColor === 2 ? 1 : null;
-  const redPlayerName = myColor === 1 ? username : "Opponent";
-  const yellowPlayerName = myColor === 2 ? username : "Opponent";
-
-  return (
-    <div className="flex flex-col gap-6">
-      {showWinConfetti && (
-        <Confetti
-          key={winConfettiBurstId}
-          width={viewport.width}
-          height={viewport.height}
-          recycle={false}
-          onConfettiComplete={() => setShowWinConfetti(false)}
-          numberOfPieces={300}
-          gravity={0.28}
-          className="pointer-events-none fixed! inset-0! z-40!"
-        />
-      )}
-
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-white">🎮 Play Connect4</h1>
-          <p className="text-gray-400 text-sm mt-1">
-            Connected as <span className="text-green-300">{username}</span>
-          </p>
-        </div>
-        <div className="flex items-center gap-3">
-          {gamePhase === "connected" && (
-            <button
-              onClick={sendReady}
-              className="rounded-full border border-green-700 bg-green-900/60 px-3 py-1.5 text-sm font-medium text-green-300 transition-colors hover:bg-green-800/70"
-            >
-              Ready Up
-            </button>
-          )}
-          <PhaseIndicator phase={gamePhase} isMyTurn={isMyTurn} />
-        </div>
-      </div>
-
-      {status === "reconnecting" && (
-        <div className="rounded-lg border border-yellow-700 bg-yellow-950/30 px-4 py-3 text-sm text-yellow-200">
-          Connection lost during a live match. Reconnect attempt #
-          {reconnectAttempts}...
-        </div>
-      )}
-
-      {tournamentMode && (
-        <div className="flex items-center gap-2 rounded-lg border border-purple-700 bg-purple-950/50 px-3 py-2 text-sm text-purple-300">
-          <span>🏆</span>
-          <span>Tournament mode active</span>
-        </div>
-      )}
-
-      {(gamePhase === "playing" || gamePhase === "game-over") && myColor && (
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center gap-3 rounded-lg bg-gray-800 px-3 py-2">
-            <span className="text-sm font-medium text-white">
-              You are {myColorLabel}
-            </span>
-          </div>
-
-          {gamePhase === "playing" && (
-            <div
-              className={`flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold ${
-                isMyTurn
-                  ? "animate-pulse border border-green-600 bg-green-900/50 text-green-300"
-                  : "bg-gray-800 text-gray-400"
-              }`}
-            >
-              {isMyTurn
-                ? "⬆ Your turn - click a column"
-                : "⏳ Waiting for opponent..."}
-            </div>
-          )}
-        </div>
-      )}
-
-      <div className="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 Up
-                </span>{" "}
-                button beside your status to enter the queue.
-              </p>
-            </div>
-          ) : gamePhase === "ready" ? (
-            <div className="flex flex-col items-center gap-4 text-center py-8">
-              <div className="text-5xl animate-bounce">⏳</div>
-              <p className="text-yellow-300 text-lg font-medium">
-                Waiting for an opponent...
-              </p>
-            </div>
-          ) : (
-            <>
-              {gameResult && (
-                <div
-                  className={`w-full max-w-md rounded-xl p-4 text-center font-bold text-xl border ${
-                    gameResult === "win"
-                      ? "bg-green-900/50 border-green-500 text-green-300"
-                      : gameResult === "loss"
-                        ? "bg-red-900/50 border-red-500 text-red-300"
-                        : gameResult === "draw"
-                          ? "bg-blue-900/50 border-blue-500 text-blue-300"
-                          : "bg-gray-800 border-gray-600 text-gray-300"
-                  }`}
-                >
-                  {gameResult === "win"
-                    ? "🏆 You Won!"
-                    : gameResult === "loss"
-                      ? "💔 You Lost"
-                      : gameResult === "draw"
-                        ? "🤝 Draw"
-                        : "⛔ Match Terminated"}
-                </div>
-              )}
-              <Board
-                board={board}
-                lastMove={lastMove}
-                player1={redPlayerName}
-                player2={yellowPlayerName}
-                currentTurnColor={
-                  gamePhase === "playing" && myColor
-                    ? isMyTurn
-                      ? myColor
-                      : opponentColor
-                    : null
-                }
-                onColumnClick={
-                  gamePhase === "playing" && isMyTurn
-                    ? handleColumnClick
-                    : undefined
-                }
-                disabled={gamePhase !== "playing" || !isMyTurn}
-              />
-            </>
-          )}
-      </div>
-    </div>
-  );
-}
-
-function PhaseIndicator({
-  phase,
-  isMyTurn,
-}: {
-  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">
-        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>
-  );
-}

assets/fonts/PixelOperator8-Bold.ttf.import

@@ -0,0 +1,36 @@
+[remap]
+
+importer="font_data_dynamic"
+type="FontFile"
+uid="uid://5pk6vnctpyaf"
+path="res://.godot/imported/PixelOperator8-Bold.ttf-74faf550739674ad3170f08e646e0614.fontdata"
+
+[deps]
+
+source_file="res://assets/fonts/PixelOperator8-Bold.ttf"
+dest_files=["res://.godot/imported/PixelOperator8-Bold.ttf-74faf550739674ad3170f08e646e0614.fontdata"]
+
+[params]
+
+Rendering=null
+antialiasing=1
+generate_mipmaps=false
+disable_embedded_bitmaps=true
+multichannel_signed_distance_field=false
+msdf_pixel_range=8
+msdf_size=48
+allow_system_fallback=true
+force_autohinter=false
+modulate_color_glyphs=false
+hinting=1
+subpixel_positioning=4
+keep_rounding_remainders=true
+oversampling=0.0
+Fallbacks=null
+fallbacks=[]
+Compress=null
+compress=true
+preload=[]
+language_support={}
+script_support={}
+opentype_features={}

assets/fonts/PixelOperator8.ttf.import

@@ -0,0 +1,36 @@
+[remap]
+
+importer="font_data_dynamic"
+type="FontFile"
+uid="uid://c3jmev24lo6ci"
+path="res://.godot/imported/PixelOperator8.ttf-6f9f01766aff16f52046b880ffb8d367.fontdata"
+
+[deps]
+
+source_file="res://assets/fonts/PixelOperator8.ttf"
+dest_files=["res://.godot/imported/PixelOperator8.ttf-6f9f01766aff16f52046b880ffb8d367.fontdata"]
+
+[params]
+
+Rendering=null
+antialiasing=1
+generate_mipmaps=false
+disable_embedded_bitmaps=true
+multichannel_signed_distance_field=false
+msdf_pixel_range=8
+msdf_size=48
+allow_system_fallback=true
+force_autohinter=false
+modulate_color_glyphs=false
+hinting=1
+subpixel_positioning=4
+keep_rounding_remainders=true
+oversampling=0.0
+Fallbacks=null
+fallbacks=[]
+Compress=null
+compress=true
+preload=[]
+language_support={}
+script_support={}
+opentype_features={}

assets/sprites/AssetTileset.png.import

@@ -0,0 +1,40 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://dlx02qat7j6lf"
+path="res://.godot/imported/AssetTileset.png-61cab4eb65e8853e2f236960720774cb.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/sprites/AssetTileset.png"
+dest_files=["res://.godot/imported/AssetTileset.png-61cab4eb65e8853e2f236960720774cb.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/uastc_level=0
+compress/rdo_quality_loss=0.0
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/channel_remap/red=0
+process/channel_remap/green=1
+process/channel_remap/blue=2
+process/channel_remap/alpha=3
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1

assets/sprites/BoardTileMap.png.import

@@ -0,0 +1,40 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://8un28mol7qow"
+path="res://.godot/imported/BoardTileMap.png-b52c6a70f2625846356fb1557a154ce5.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/sprites/BoardTileMap.png"
+dest_files=["res://.godot/imported/BoardTileMap.png-b52c6a70f2625846356fb1557a154ce5.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/uastc_level=0
+compress/rdo_quality_loss=0.0
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/channel_remap/red=0
+process/channel_remap/green=1
+process/channel_remap/blue=2
+process/channel_remap/alpha=3
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1

assets/sprites/RedChip.png.import

@@ -0,0 +1,40 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://ckmfi0cjgxgyk"
+path="res://.godot/imported/RedChip.png-87cfb9e74b846c07f18c0c7fe300f504.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/sprites/RedChip.png"
+dest_files=["res://.godot/imported/RedChip.png-87cfb9e74b846c07f18c0c7fe300f504.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/uastc_level=0
+compress/rdo_quality_loss=0.0
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/channel_remap/red=0
+process/channel_remap/green=1
+process/channel_remap/blue=2
+process/channel_remap/alpha=3
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1

assets/sprites/YellowChip.png.import

@@ -0,0 +1,40 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://qy30emdgrk7o"
+path="res://.godot/imported/YellowChip.png-a8245744c0582bab34b9b96583a57ec0.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/sprites/YellowChip.png"
+dest_files=["res://.godot/imported/YellowChip.png-a8245744c0582bab34b9b96583a57ec0.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/uastc_level=0
+compress/rdo_quality_loss=0.0
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/channel_remap/red=0
+process/channel_remap/green=1
+process/channel_remap/blue=2
+process/channel_remap/alpha=3
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1

components/AdminSettingsPanel.tsx

@@ -1,727 +0,0 @@
-"use client";
-
-import { FormEvent, useEffect, useRef, useState } from "react";
-import { Plus, RefreshCw, Save, Trash2 } from "lucide-react";
-import { cmd, ParsedMessage, ReservationEntry } from "@/lib/protocol";
-import { useConnection } from "@/lib/connection";
-
-const GETTABLE_DATA_KEYS = [
-  "TOURNAMENT_STATUS",
-  "TOURNAMENT_DATA",
-  "MOVE_WAIT",
-  "DEMO_MODE",
-  "MAX_TIMEOUT",
-  "BRACKET_PAIRINGS",
-] as const;
-
-const EDITABLE_DATA_KEYS = ["DEMO_MODE", "MAX_TIMEOUT", "MOVE_WAIT"] as const;
-const TOURNAMENT_TYPES = ["RoundRobin", "KnockoutBracket"] as const;
-const TOURNAMENT_TYPE_LABELS: Record<
-  (typeof TOURNAMENT_TYPES)[number],
-  string
-> = {
-  RoundRobin: "Round Robin",
-  KnockoutBracket: "Knockout Bracket",
-};
-const VARIABLE_LABELS: Record<(typeof EDITABLE_DATA_KEYS)[number], string> = {
-  DEMO_MODE: "Demo Mode",
-  MAX_TIMEOUT: "Max Timeout",
-  MOVE_WAIT: "Move Wait",
-};
-
-function parseBracketPairings(value: string): string[] {
-  return value
-    .split(",")
-    .map((username) => username.trim())
-    .filter((username) => username.length > 0);
-}
-
-function serializeBracketPairings(players: string[]): string {
-  return players.join(",");
-}
-
-function formatTournamentType(type: string): string {
-  if (type === "RoundRobin" || type === "KnockoutBracket") {
-    return TOURNAMENT_TYPE_LABELS[type];
-  }
-  return type;
-}
-
-export default function AdminSettingsPanel() {
-  const { authenticateAdmin, isAdmin, send, status, subscribe } =
-    useConnection();
-  const [adminPassword, setAdminPassword] = useState("");
-  const [adminFeedback, setAdminFeedback] = useState<string | null>(null);
-  const [selectedTournamentType, setSelectedTournamentType] =
-    useState<(typeof TOURNAMENT_TYPES)[number]>("RoundRobin");
-  const [serverValues, setServerValues] = useState<Record<string, string>>({});
-  const [editableValues, setEditableValues] = useState<Record<string, string>>(
-    {},
-  );
-  const [bracketPlayer, setBracketPlayer] = useState("");
-  const [bracketPairings, setBracketPairings] = useState<string[]>([]);
-  const [reservationPlayer1, setReservationPlayer1] = useState("");
-  const [reservationPlayer2, setReservationPlayer2] = useState("");
-  const [reservations, setReservations] = useState<ReservationEntry[]>([]);
-  const [actionFeedback, setActionFeedback] = useState<string | null>(null);
-  const pendingAdminAuthRef = useRef(false);
-  const pendingSetRef = useRef<Record<string, string>>({});
-
-  const isConnected = status === "connected";
-  const adminControlsDisabled = !isConnected || !isAdmin;
-  const hasActiveTournament = Boolean(
-    serverValues.TOURNAMENT_STATUS &&
-    serverValues.TOURNAMENT_STATUS !== "false",
-  );
-  const hasVariableChanges = EDITABLE_DATA_KEYS.some(
-    (key) =>
-      editableValues[key] !== undefined &&
-      editableValues[key] !== serverValues[key],
-  );
-  const serializedBracketPairings = serializeBracketPairings(bracketPairings);
-  const hasBracketPairingChanges =
-    serializedBracketPairings !== (serverValues.BRACKET_PAIRINGS ?? "");
-
-  useEffect(() => {
-    const unsubscribe = subscribe((message: ParsedMessage) => {
-      switch (message.type) {
-        case "ADMIN_AUTH_ACK":
-          pendingAdminAuthRef.current = false;
-          setAdminFeedback("Admin access granted.");
-          break;
-        case "GET_DATA":
-          setServerValues((prev) => ({
-            ...prev,
-            [message.key]: message.value,
-          }));
-          if (
-            EDITABLE_DATA_KEYS.includes(
-              message.key as (typeof EDITABLE_DATA_KEYS)[number],
-            )
-          ) {
-            setEditableValues((prev) => ({
-              ...prev,
-              [message.key]: message.value,
-            }));
-          }
-          if (message.key === "BRACKET_PAIRINGS") {
-            setBracketPairings(parseBracketPairings(message.value));
-          }
-          setActionFeedback(`Loaded ${message.key}.`);
-          break;
-        case "SET_DATA_ACK":
-          setServerValues((prev) => ({
-            ...prev,
-            [message.key]:
-              pendingSetRef.current[message.key] ?? prev[message.key] ?? "",
-          }));
-          setEditableValues((prev) => ({
-            ...prev,
-            [message.key]:
-              pendingSetRef.current[message.key] ?? prev[message.key] ?? "",
-          }));
-          if (message.key === "BRACKET_PAIRINGS") {
-            setBracketPairings(
-              parseBracketPairings(pendingSetRef.current[message.key] ?? ""),
-            );
-          }
-          delete pendingSetRef.current[message.key];
-          setActionFeedback(`Updated ${message.key}.`);
-          break;
-        case "TOURNAMENT_START":
-          setServerValues((prev) => ({
-            ...prev,
-            TOURNAMENT_STATUS: message.tournamentType,
-          }));
-          setActionFeedback(
-            `Started ${formatTournamentType(message.tournamentType)}.`,
-          );
-          break;
-        case "TOURNAMENT_CANCEL":
-          setServerValues((prev) => ({
-            ...prev,
-            TOURNAMENT_STATUS: "false",
-          }));
-          setActionFeedback("Tournament cancelled.");
-          break;
-        case "TOURNAMENT_END":
-          setServerValues((prev) => ({
-            ...prev,
-            TOURNAMENT_STATUS: "false",
-          }));
-          break;
-        case "RESERVATION_LIST":
-          setReservations(message.reservations);
-          setActionFeedback("Loaded reservations.");
-          break;
-        case "RESERVATION_ADD":
-          setReservations((prev) => {
-            const exists = prev.some(
-              (reservation) =>
-                reservation.player1 === message.player1 &&
-                reservation.player2 === message.player2,
-            );
-            return exists
-              ? prev
-              : [
-                  ...prev,
-                  { player1: message.player1, player2: message.player2 },
-                ];
-          });
-          setActionFeedback(null);
-          break;
-        case "RESERVATION_DELETE":
-          setReservations((prev) =>
-            prev.filter(
-              (reservation) =>
-                !(
-                  reservation.player1 === message.player1 &&
-                  reservation.player2 === message.player2
-                ),
-            ),
-          );
-          setActionFeedback(null);
-          break;
-        case "ERROR":
-          if (pendingAdminAuthRef.current) {
-            pendingAdminAuthRef.current = false;
-            setAdminFeedback("Admin authentication failed.");
-          }
-          setActionFeedback(message.message);
-          break;
-        default:
-          break;
-      }
-    });
-
-    return unsubscribe;
-  }, [subscribe]);
-
-  useEffect(() => {
-    if (!isAdmin || !isConnected) {
-      return;
-    }
-
-    GETTABLE_DATA_KEYS.forEach((key) => {
-      send(cmd.getData(key));
-    });
-    send(cmd.reservationGet());
-  }, [isAdmin, isConnected, send]);
-
-  const handleAdminAuth = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const sent = authenticateAdmin(adminPassword);
-    pendingAdminAuthRef.current = sent;
-    setAdminFeedback(
-      sent
-        ? "Authenticating admin session..."
-        : "Connect before authenticating.",
-    );
-    if (sent) {
-      setAdminPassword("");
-    }
-  };
-
-  const handleTournamentStart = () => {
-    if (hasActiveTournament) {
-      setActionFeedback("A tournament is already active.");
-      return;
-    }
-    if (!send(cmd.tournamentStart(selectedTournamentType))) {
-      setActionFeedback("Unable to start tournament while disconnected.");
-      return;
-    }
-    setActionFeedback(
-      `Starting ${formatTournamentType(selectedTournamentType)} tournament...`,
-    );
-  };
-
-  const handleTournamentCancel = () => {
-    if (!hasActiveTournament) {
-      setActionFeedback("No active tournament to cancel.");
-      return;
-    }
-    if (!send(cmd.tournamentCancel())) {
-      setActionFeedback("Unable to cancel tournament while disconnected.");
-      return;
-    }
-    setActionFeedback("Cancelling tournament...");
-  };
-
-  const handleEditableValueChange = (key: string, value: string) => {
-    setEditableValues((prev) => ({
-      ...prev,
-      [key]: value,
-    }));
-  };
-
-  const handleSaveVariables = () => {
-    const changes = EDITABLE_DATA_KEYS.filter(
-      (key) =>
-        editableValues[key] !== undefined &&
-        editableValues[key] !== serverValues[key],
-    );
-
-    if (changes.length === 0) {
-      setActionFeedback("No variable changes to save.");
-      return;
-    }
-
-    for (const key of changes) {
-      const value = editableValues[key];
-      if (!send(cmd.setData(key, value))) {
-        setActionFeedback("Unable to send SET command while disconnected.");
-        return;
-      }
-      pendingSetRef.current[key] = value;
-    }
-
-    setActionFeedback(
-      `Saving ${changes.length} variable${changes.length === 1 ? "" : "s"}...`,
-    );
-  };
-
-  const handleReservationAction = (action: "add" | "delete") => {
-    const player1 = reservationPlayer1.trim();
-    const player2 = reservationPlayer2.trim();
-    if (!player1 || !player2) return;
-
-    const message =
-      action === "add"
-        ? cmd.reservationAdd(player1, player2)
-        : cmd.reservationDelete(player1, player2);
-    const sent = send(message);
-    if (!sent) {
-      setActionFeedback(
-        "Unable to send reservation command while disconnected.",
-      );
-      return;
-    }
-
-    setActionFeedback(
-      `${action === "add" ? "Adding" : "Removing"} reservation for ${player1} vs ${player2}...`,
-    );
-    setReservationPlayer1("");
-    setReservationPlayer2("");
-  };
-
-  const handleReservationDeletePair = (player1: string, player2: string) => {
-    const sent = send(cmd.reservationDelete(player1, player2));
-    if (!sent) {
-      setActionFeedback(
-        "Unable to send reservation command while disconnected.",
-      );
-      return;
-    }
-
-    setActionFeedback(`Removing reservation for ${player1} vs ${player2}...`);
-  };
-
-  const handleRefreshReservations = () => {
-    if (!send(cmd.reservationGet())) {
-      setActionFeedback("Unable to fetch reservations while disconnected.");
-      return;
-    }
-    setActionFeedback("Fetching reservations...");
-  };
-
-  const handleBracketPairingAdd = () => {
-    const player = bracketPlayer.trim();
-    if (!player) return;
-
-    setBracketPairings((prev) => [...prev, player]);
-    setBracketPlayer("");
-  };
-
-  const handleBracketPairingDelete = (index: number) => {
-    setBracketPairings((prev) =>
-      prev.filter((_, pairingIndex) => pairingIndex !== index),
-    );
-  };
-
-  const handleRefreshBracketPairings = () => {
-    if (!send(cmd.getData("BRACKET_PAIRINGS"))) {
-      setActionFeedback("Unable to fetch bracket pairings while disconnected.");
-      return;
-    }
-    setActionFeedback("Fetching bracket pairings...");
-  };
-
-  const handleSaveBracketPairings = () => {
-    if (!hasBracketPairingChanges) {
-      setActionFeedback("No bracket pairing changes to save.");
-      return;
-    }
-
-    if (!send(cmd.setData("BRACKET_PAIRINGS", serializedBracketPairings))) {
-      setActionFeedback("Unable to send SET command while disconnected.");
-      return;
-    }
-
-    pendingSetRef.current.BRACKET_PAIRINGS = serializedBracketPairings;
-    setActionFeedback("Saving bracket pairings...");
-  };
-
-  return (
-    <section className="rounded-xl flex flex-col gap-4">
-      {!isAdmin && (
-        <div className="rounded-xl border border-gray-700 bg-[#0B111F] p-4">
-          <h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider">
-            Authenticate
-          </h2>
-          <p className="mt-1 text-sm text-gray-400">
-            Become an admin to manage tournaments, server variables, and
-            reservations.
-          </p>
-          <form className="mt-4 flex flex-col gap-3" onSubmit={handleAdminAuth}>
-            <div className="flex flex-col gap-2 sm:flex-row">
-              <input
-                type="password"
-                value={adminPassword}
-                onChange={(event) => setAdminPassword(event.target.value)}
-                placeholder="Password"
-                disabled={!isConnected}
-                className="w-[50%] rounded-lg border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
-              />
-              <button
-                type="submit"
-                disabled={!isConnected}
-                className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-500 disabled:cursor-not-allowed disabled:bg-gray-700 disabled:text-gray-500"
-              >
-                Login
-              </button>
-            </div>
-          </form>
-
-          {adminFeedback && (
-            <div className="mt-3 rounded-lg border border-blue-800 bg-blue-950/30 px-3 py-2 text-sm text-blue-200">
-              {adminFeedback}
-            </div>
-          )}
-        </div>
-      )}
-
-      {isAdmin && (
-        <div className="grid gap-4 xl:grid-cols-2">
-          <div className="rounded-xl border border-gray-700 bg-[#0B111F] p-4">
-            <h3 className="text-sm font-semibold text-white">Tournaments</h3>
-            <p className="mt-1 text-sm text-gray-400">
-              Start or cancel tournaments from the live spectator view.
-            </p>
-            <div className="mt-4 flex flex-col gap-3">
-              <select
-                onChange={(event) =>
-                  setSelectedTournamentType(
-                    event.target.value as (typeof TOURNAMENT_TYPES)[number],
-                  )
-                }
-                disabled={adminControlsDisabled || hasActiveTournament}
-                value={
-                  hasActiveTournament &&
-                  (serverValues.TOURNAMENT_STATUS === "RoundRobin" ||
-                    serverValues.TOURNAMENT_STATUS === "KnockoutBracket")
-                    ? (serverValues.TOURNAMENT_STATUS as (typeof TOURNAMENT_TYPES)[number])
-                    : selectedTournamentType
-                }
-                className="rounded-lg border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
-              >
-                {TOURNAMENT_TYPES.map((type) => (
-                  <option key={type} value={type}>
-                    {TOURNAMENT_TYPE_LABELS[type]}
-                  </option>
-                ))}
-              </select>
-              <div className="flex gap-2">
-                <button
-                  type="button"
-                  onClick={handleTournamentStart}
-                  disabled={adminControlsDisabled || hasActiveTournament}
-                  className="flex-1 rounded-lg bg-green-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-green-500 disabled:cursor-not-allowed disabled:bg-gray-700 disabled:text-gray-500"
-                >
-                  Start Tournament
-                </button>
-                <button
-                  type="button"
-                  onClick={handleTournamentCancel}
-                  disabled={adminControlsDisabled || !hasActiveTournament}
-                  className="flex-1 rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-red-500 disabled:cursor-not-allowed disabled:bg-gray-700 disabled:text-gray-500"
-                >
-                  Cancel
-                </button>
-              </div>
-
-              <div className="mt-6">
-                <div className="flex items-start justify-between gap-3">
-                  <div>
-                    <h4 className="text-sm font-semibold text-white">
-                      Bracket Pairings
-                    </h4>
-                    <p className="mt-1 text-sm text-gray-400">
-                      Use custom seeding for knockout bracket.
-                    </p>
-                  </div>
-                  <div className="flex gap-2">
-                    <button
-                      type="button"
-                      onClick={handleRefreshBracketPairings}
-                      disabled={adminControlsDisabled}
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-gray-400 transition-colors hover:bg-gray-700 hover:text-blue-300 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-600"
-                      aria-label="Refresh bracket pairings"
-                      title="Refresh bracket pairings"
-                    >
-                      <RefreshCw className="h-4 w-4" />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={handleSaveBracketPairings}
-                      disabled={
-                        adminControlsDisabled || !hasBracketPairingChanges
-                      }
-                      className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-gray-400 transition-colors hover:bg-gray-700 hover:text-blue-300 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-600"
-                      aria-label="Save bracket pairings"
-                      title="Save bracket pairings"
-                    >
-                      <Save className="h-4 w-4" />
-                    </button>
-                  </div>
-                </div>
-
-                <form
-                  className="mt-4 grid gap-3 md:grid-cols-[1fr_auto]"
-                  onSubmit={(event) => {
-                    event.preventDefault();
-                    handleBracketPairingAdd();
-                  }}
-                >
-                  <input
-                    value={bracketPlayer}
-                    onChange={(event) => setBracketPlayer(event.target.value)}
-                    disabled={adminControlsDisabled}
-                    placeholder="Player"
-                    className="rounded-lg border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
-                  />
-                  <button
-                    type="submit"
-                    disabled={adminControlsDisabled}
-                    className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-gray-400 transition-colors hover:bg-gray-700 hover:text-blue-300 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-600"
-                    aria-label="Add bracket player"
-                    title="Add bracket player"
-                  >
-                    <Plus className="h-4 w-4" />
-                  </button>
-                </form>
-
-                <div className="mt-4 flex flex-col">
-                  {bracketPairings.length === 0 ? (
-                    <p className="text-sm text-gray-500">
-                      No bracket players added.
-                    </p>
-                  ) : (
-                    <div className="border border-gray-800 bg-[#050A16] rounded-lg">
-                      {bracketPairings.map((player, index) => (
-                        <div
-                          key={`${player}-${index}`}
-                          className="flex items-center justify-between rounded-lg bg-[#050A16] px-3 py-2 text-sm"
-                        >
-                          <span className="text-white">{player}</span>
-                          <button
-                            type="button"
-                            onClick={() => handleBracketPairingDelete(index)}
-                            disabled={adminControlsDisabled}
-                            className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-800 hover:text-red-300 disabled:cursor-not-allowed disabled:text-gray-600"
-                            aria-label={`Delete bracket player ${player}`}
-                            title="Delete bracket player"
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </button>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="rounded-xl border border-gray-700 bg-[#0B111F] p-4">
-            <div className="flex items-start justify-between gap-3">
-              <div>
-                <h3 className="text-sm font-semibold text-white">
-                  Server Variables
-                </h3>
-                <p className="mt-1 text-sm text-gray-400">
-                  Modify server settings and variables.
-                </p>
-              </div>
-              <button
-                type="button"
-                onClick={() => {
-                  EDITABLE_DATA_KEYS.forEach((key) => {
-                    send(cmd.getData(key));
-                  });
-                  setActionFeedback("Refreshing server variables...");
-                }}
-                disabled={adminControlsDisabled}
-                className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-gray-400 transition-colors hover:bg-gray-700 hover:text-blue-300 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-600"
-                aria-label="Refresh server variables"
-                title="Refresh server variables"
-              >
-                <RefreshCw className="h-4 w-4" />
-              </button>
-            </div>
-            <div className="mt-4 flex flex-col gap-4">
-              <div className="rounded-lg border border-gray-800 bg-gray-900/80 px-4 py-3">
-                <div className="flex items-center justify-between gap-4">
-                  <div className="text-gray-400">
-                    {VARIABLE_LABELS.DEMO_MODE}
-                  </div>
-                  <input
-                    type="checkbox"
-                    checked={editableValues.DEMO_MODE === "true"}
-                    onChange={(event) =>
-                      handleEditableValueChange(
-                        "DEMO_MODE",
-                        event.target.checked ? "true" : "false",
-                      )
-                    }
-                    disabled={adminControlsDisabled}
-                    className="h-4 w-4 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500 disabled:cursor-not-allowed"
-                  />
-                </div>
-              </div>
-
-              {(["MAX_TIMEOUT", "MOVE_WAIT"] as const).map((key) => (
-                <div
-                  key={key}
-                  className="rounded-lg border border-gray-800 bg-gray-900/80 px-4 py-3"
-                >
-                  <div className="flex items-center gap-4">
-                    <div className="min-w-32 shrink-0 text-gray-400">
-                      {VARIABLE_LABELS[key]}
-                    </div>
-                    <input
-                      value={editableValues[key] ?? ""}
-                      onChange={(event) =>
-                        handleEditableValueChange(key, event.target.value)
-                      }
-                      disabled={adminControlsDisabled}
-                      className="w-32 rounded-lg border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 sm:w-40"
-                    />
-                    <span className="shrink-0 text-sm text-gray-400">s</span>
-                  </div>
-                </div>
-              ))}
-
-              <div className="flex justify-end">
-                <button
-                  type="button"
-                  onClick={handleSaveVariables}
-                  disabled={adminControlsDisabled || !hasVariableChanges}
-                  className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-gray-400 transition-colors hover:bg-gray-700 hover:text-blue-300 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-600"
-                  aria-label="Save server variables"
-                  title="Save server variables"
-                >
-                  <Save className="h-4 w-4" />
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {isAdmin && (
-        <div className="rounded-xl border border-gray-700 bg-[#0B111F] p-4">
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <h3 className="text-sm font-semibold text-white">Reservations</h3>
-              <p className="mt-1 text-sm text-gray-400">
-                Create, remove, and review match reservations for specific
-                players.
-              </p>
-            </div>
-            <button
-              type="button"
-              onClick={handleRefreshReservations}
-              disabled={adminControlsDisabled}
-              className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-gray-400 transition-colors hover:bg-gray-700 hover:text-blue-300 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-600"
-              aria-label="Refresh reservations"
-              title="Refresh reservations"
-            >
-              <RefreshCw className="h-4 w-4" />
-            </button>
-          </div>
-
-          <form
-            className="mt-4 grid gap-3 md:grid-cols-[1fr_1fr_auto]"
-            onSubmit={(event) => {
-              event.preventDefault();
-              handleReservationAction("add");
-            }}
-          >
-            <input
-              value={reservationPlayer1}
-              onChange={(event) => setReservationPlayer1(event.target.value)}
-              disabled={adminControlsDisabled}
-              placeholder="Player 1"
-              className="rounded-lg border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
-            />
-            <input
-              value={reservationPlayer2}
-              onChange={(event) => setReservationPlayer2(event.target.value)}
-              disabled={adminControlsDisabled}
-              placeholder="Player 2"
-              className="rounded-lg border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-white focus:border-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
-            />
-            <button
-              type="submit"
-              disabled={adminControlsDisabled}
-              className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-gray-400 transition-colors hover:bg-gray-700 hover:text-blue-300 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-600"
-              aria-label="Add reservation"
-              title="Add reservation"
-            >
-              <Plus className="h-4 w-4" />
-            </button>
-          </form>
-
-          <div className="mt-4 flex flex-col gap-2">
-            {reservations.length === 0 ? (
-              <p className="text-sm text-gray-500">No reservations exist.</p>
-            ) : (
-              reservations.map((reservation) => (
-                <div
-                  key={`${reservation.player1}-${reservation.player2}`}
-                  className="flex items-center justify-between rounded-lg border border-gray-800 bg-gray-900/80 px-3 py-2 text-sm"
-                >
-                  <span className="text-white">
-                    {reservation.player1} vs {reservation.player2}
-                  </span>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      handleReservationDeletePair(
-                        reservation.player1,
-                        reservation.player2,
-                      )
-                    }
-                    disabled={adminControlsDisabled}
-                    className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-800 hover:text-red-300 disabled:cursor-not-allowed disabled:text-gray-600"
-                    aria-label={`Delete reservation for ${reservation.player1} versus ${reservation.player2}`}
-                    title="Delete reservation"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </button>
-                </div>
-              ))
-            )}
-          </div>
-        </div>
-      )}
-
-      {actionFeedback && !actionFeedback.startsWith("Loaded ") && (
-        <div className="rounded-lg border border-gray-700 bg-gray-950/80 px-3 py-2 text-sm text-gray-200">
-          {actionFeedback}
-        </div>
-      )}
-    </section>
-  );
-}

components/Board.tsx

@@ -1,252 +0,0 @@
-"use client";
-
-import type { CSSProperties } from "react";
-import { useEffect, useRef, useState } from "react";
-import type { BoardState } from "@/lib/protocol";
-import { CHIP_DROP_SOUND_PATHS } from "@/lib/sfx";
-const CHIP_DROP_ANIMATION_MS = 450;
-
-interface BoardProps {
-  board: BoardState;
-  onColumnClick?: (column: number) => void;
-  disabled?: boolean;
-  lastMove?: { column: number; row: number } | null;
-  player1?: string;
-  player2?: string;
-  currentTurnColor?: 1 | 2 | null;
-}
-
-export default function Board({
-  board,
-  onColumnClick,
-  disabled = false,
-  lastMove,
-  player1,
-  player2,
-  currentTurnColor,
-}: BoardProps) {
-  const [hoveredCol, setHoveredCol] = useState<number | null>(null);
-  const [animatingMove, setAnimatingMove] = useState<{
-    column: number;
-    row: number;
-  } | null>(null);
-  const isFirstRender = useRef(true);
-  const animationTimeoutRef = useRef<number | null>(null);
-  const chipDropSoundsRef = useRef<HTMLAudioElement[]>([]);
-  const canInteract = !disabled && !!onColumnClick;
-  const lastMoveColumn = lastMove?.column ?? null;
-  const lastMoveRow = lastMove?.row ?? null;
-
-  useEffect(() => {
-    chipDropSoundsRef.current = CHIP_DROP_SOUND_PATHS.map((path) => {
-      const sound = new Audio(path);
-      sound.preload = "auto";
-      return sound;
-    });
-
-    return () => {
-      chipDropSoundsRef.current.forEach((sound) => {
-        sound.pause();
-        sound.src = "";
-      });
-      chipDropSoundsRef.current = [];
-    };
-  }, []);
-
-  useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-
-    if (animationTimeoutRef.current !== null) {
-      window.clearTimeout(animationTimeoutRef.current);
-    }
-
-    if (lastMoveColumn === null || lastMoveRow === null) {
-      setAnimatingMove(null);
-      return;
-    }
-
-    const prefersReducedMotion = window.matchMedia(
-      "(prefers-reduced-motion: reduce)",
-    ).matches;
-    const dropDurationMs = prefersReducedMotion ? 0 : CHIP_DROP_ANIMATION_MS;
-
-    setAnimatingMove({ column: lastMoveColumn, row: lastMoveRow });
-    animationTimeoutRef.current = window.setTimeout(() => {
-      const sounds = chipDropSoundsRef.current;
-      const sound = sounds[Math.floor(Math.random() * sounds.length)];
-
-      if (sound) {
-        sound.currentTime = 0;
-        void sound.play().catch(() => {
-          // Ignore autoplay failures until the user has interacted.
-        });
-      }
-
-      setAnimatingMove(null);
-      animationTimeoutRef.current = null;
-    }, dropDurationMs);
-
-    return () => {
-      if (animationTimeoutRef.current !== null) {
-        window.clearTimeout(animationTimeoutRef.current);
-      }
-    };
-  }, [lastMoveColumn, lastMoveRow]);
-
-  return (
-    <div className="flex flex-col items-center gap-3">
-      {/* Player legend */}
-      {player1 && player2 && (
-        <div className="flex items-center gap-6 text-sm">
-          <div
-            className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-colors ${
-              currentTurnColor === 1
-                ? "border-red-500 bg-red-950/50 text-red-300"
-                : "border-gray-700 bg-gray-900 text-gray-400"
-            }`}
-          >
-            {currentTurnColor === 1 ? (
-              <div className="w-3.5 h-3.5 rounded-full bg-red-500 shrink-0 animate-pulse" />
-            ) : (
-              <div className="w-3.5 h-3.5 rounded-full bg-red-500 shrink-0" />
-            )}
-            <span className="font-medium">{player1}</span>
-          </div>
-          <span className="text-gray-600 font-bold">vs</span>
-          <div
-            className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-colors ${
-              currentTurnColor === 2
-                ? "border-yellow-500 bg-yellow-950/50 text-yellow-300"
-                : "border-gray-700 bg-gray-900 text-gray-400"
-            }`}
-          >
-            {currentTurnColor === 2 ? (
-              <div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0 animate-pulse" />
-            ) : (
-              <div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0" />
-            )}
-            <span className="font-medium">{player2}</span>
-          </div>
-        </div>
-      )}
-
-      {/* Board */}
-      <div className="inline-block bg-blue-800 p-3 rounded-2xl shadow-2xl border-2 border-blue-600">
-        <div className="flex gap-2">
-          {Array.from({ length: 7 }, (_, col) => (
-            <div
-              key={col}
-              role={canInteract ? "button" : undefined}
-              aria-label={canInteract ? `Drop in column ${col}` : undefined}
-              className={`flex flex-col gap-2 rounded-xl p-1 transition-colors ${
-                canInteract
-                  ? "cursor-pointer hover:bg-blue-700/60"
-                  : "cursor-default"
-              } ${hoveredCol === col && canInteract ? "bg-blue-700/60" : ""}`}
-              onClick={() => canInteract && onColumnClick?.(col)}
-              onMouseEnter={() => canInteract && setHoveredCol(col)}
-              onMouseLeave={() => setHoveredCol(null)}
-            >
-              {/* Drop arrow indicator */}
-              <div
-                className={`h-2 flex items-center justify-center transition-opacity ${
-                  hoveredCol === col && canInteract
-                    ? "opacity-100"
-                    : "opacity-0"
-                }`}
-              >
-                <div className="w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-white/70" />
-              </div>
-
-              {/* Cells (top row first) */}
-              {Array.from({ length: 6 }, (_, rowIdx) => {
-                const row = 5 - rowIdx;
-                const cell = board[col][row];
-                const isLast =
-                  lastMove?.column === col && lastMove?.row === row;
-                const isAnimatingDrop =
-                  animatingMove?.column === col && animatingMove?.row === row;
-                const chipScale = isLast ? 1.1 : 1;
-                const dropDistance = `${(5 - row) * 56 + 16}px`;
-                return (
-                  <div
-                    key={row}
-                    className={`relative w-12 h-12 rounded-full border-2 bg-slate-950 overflow-visible ${
-                      cell === 0
-                        ? `border-slate-800 ${
-                            hoveredCol === col && canInteract
-                              ? "border-blue-400/50"
-                              : ""
-                          }`
-                        : isLast
-                          ? "border-white"
-                          : "border-slate-900"
-                    }`}
-                  >
-                    {cell !== 0 && (
-                      <div
-                        className={`absolute inset-0 rounded-full border-2 shadow-lg transition-transform duration-150 ${
-                          cell === 1
-                            ? `bg-red-500 border-red-700 shadow-red-950/60`
-                            : `bg-yellow-400 border-yellow-600 shadow-yellow-950/60`
-                        } ${isAnimatingDrop ? "chip-drop" : ""}`}
-                        style={
-                          {
-                            "--chip-drop-distance": `-${dropDistance}`,
-                            "--chip-scale": chipScale,
-                            transform: isAnimatingDrop
-                              ? undefined
-                              : `scale(${chipScale})`,
-                          } as CSSProperties
-                        }
-                      />
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          ))}
-        </div>
-
-        {/* Column numbers */}
-        <div className="flex gap-2 mt-1">
-          {Array.from({ length: 7 }, (_, col) => (
-            <div
-              key={col}
-              className="w-14 p-1 text-center text-xs text-blue-400/70 font-mono"
-            >
-              {col + 1}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <style jsx>{`
-        .chip-drop {
-          animation: chip-drop ${CHIP_DROP_ANIMATION_MS}ms cubic-bezier(0.22, 1, 0.36, 1)
-            forwards;
-          will-change: transform;
-        }
-
-        @keyframes chip-drop {
-          from {
-            transform: translateY(var(--chip-drop-distance))
-              scale(var(--chip-scale));
-          }
-          to {
-            transform: translateY(0) scale(var(--chip-scale));
-          }
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-          .chip-drop {
-            animation: none;
-          }
-        }
-      `}</style>
-    </div>
-  );
-}

components/Celebration.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Confetti from "react-confetti";
-import { useConnection } from "@/lib/connection";
-
-export default function Celebration() {
-  const { subscribe } = useConnection();
-  const [winner, setWinner] = useState<string | null>(null);
-  const [viewport, setViewport] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    const updateViewport = () => {
-      setViewport({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    };
-
-    updateViewport();
-    window.addEventListener("resize", updateViewport);
-    return () => window.removeEventListener("resize", updateViewport);
-  }, []);
-
-  useEffect(() => {
-    const unsubscribe = subscribe((msg) => {
-      if (msg.type !== "TOURNAMENT_WINNER") return;
-
-      setWinner(msg.username || "Unknown player");
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [subscribe]);
-
-  if (!winner) return null;
-
-  return (
-    <>
-      <Confetti
-        width={viewport.width}
-        height={viewport.height}
-        recycle={false}
-        numberOfPieces={600}
-        gravity={0.2}
-        className="pointer-events-none fixed! inset-0! z-90!"
-      />
-      <div className="pointer-events-none fixed inset-0 z-100 flex items-center justify-center px-4">
-        <div className="pointer-events-auto w-full max-w-xl rounded-3xl border border-amber-300/40 bg-linear-to-br from-amber-300 via-yellow-200 to-orange-300 p-1px shadow-2xl shadow-amber-950/60">
-          <div className="rounded-[calc(1.5rem-1px)] bg-slate-950/95 px-8 py-10 text-center backdrop-blur">
-            <div className="text-5xl">🏆</div>
-            <p className="mt-4 text-sm font-semibold uppercase tracking-[0.35em] text-amber-200/80">
-              Tournament Winner
-            </p>
-            <h2 className="mt-3 text-4xl font-black tracking-tight text-white sm:text-5xl">
-              {winner}
-            </h2>
-            <p className="mt-4 text-base text-amber-100/85">
-              Dominated and closed out the tournament.
-            </p>
-            <button
-              type="button"
-              onClick={() => setWinner(null)}
-              className="mt-7 inline-flex items-center justify-center rounded-full border border-amber-200/30 bg-amber-300/15 px-5 py-2 text-sm font-semibold text-amber-100 transition hover:bg-amber-300/25"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

components/Nav.tsx

@@ -1,181 +0,0 @@
-"use client";
-import Image from "next/image";
-import Link from "next/link";
-import { SubmitEvent, useEffect, useState } from "react";
-import { Settings, X } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { usePathname } from "next/navigation";
-import AdminSettingsPanel from "@/components/AdminSettingsPanel";
-import { useConnection } from "@/lib/connection";
-
-export default function Nav() {
-  const pathname = usePathname();
-  const router = useRouter();
-  const {
-    status,
-    role,
-    username,
-    becomePlayer,
-    disconnect,
-    isAdmin,
-    shouldRedirectToConnect,
-  } = useConnection();
-  const [showPlayerModal, setShowPlayerModal] = useState(false);
-  const [showSettingsModal, setShowSettingsModal] = useState(false);
-  const [nextUsername, setNextUsername] = useState(username);
-  const isConnectionPage = pathname === "/";
-
-  const disableRoleSwitch =
-    status === "connecting" || status === "reconnecting";
-
-  useEffect(() => {
-    if (isConnectionPage || (status === "disconnected" && shouldRedirectToConnect)) {
-      setShowSettingsModal(false);
-    }
-  }, [isConnectionPage, status, shouldRedirectToConnect]);
-
-  const handleBecomePlayer = (event: SubmitEvent<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"
-          >
-            <Image
-              src="/icon.png"
-              alt="Connect4 Observer icon"
-              width={32}
-              height={32}
-              className="h-8 w-8 rounded-sm"
-            />
-            <span>Connect4 Observer</span>
-          </Link>
-
-          <div className="ml-auto flex items-center gap-2">
-            {!isConnectionPage && (
-              <>
-                {role !== "player" && !isAdmin && (
-                  <button
-                    onClick={() => {
-                      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"
-                  >
-                    Become Player
-                  </button>
-                )}
-                <button
-                  onClick={disconnect}
-                  className="px-4 py-2 rounded-lg text-sm font-semibold transition-colors bg-gray-700 hover:bg-red-600 text-white"
-                >
-                  Disconnect
-                </button>
-                {role !== "player" && (
-                  <button
-                    type="button"
-                    onClick={() => setShowSettingsModal(true)}
-                    className="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-gray-200 transition-colors hover:bg-gray-700 hover:text-white"
-                    aria-label="Open settings"
-                    title="Settings"
-                  >
-                    <Settings className="h-5 w-5" />
-                  </button>
-                )}
-              </>
-            )}
-          </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>
-      )}
-
-      {showSettingsModal && (
-        <div className="fixed inset-0 z-50 bg-black/70 px-4 py-6">
-          <div className="mx-auto flex h-full max-w-4xl items-center justify-center">
-            <div className="flex max-h-full w-full flex-col overflow-hidden rounded-2xl border border-gray-700 bg-gray-950 shadow-2xl">
-              <div className="flex items-center justify-between border-b border-gray-800 px-5 py-4">
-                <div>
-                  <h2 className="text-lg font-semibold text-white">Settings</h2>
-                  <p className="text-sm text-gray-400">
-                    Admin tools for tournaments, server values, and reservations.
-                  </p>
-                </div>
-                <div className="flex items-center gap-3">
-                  <span
-                    className={`rounded-full px-3 py-1 text-xs font-semibold ${
-                      isAdmin
-                        ? "border border-green-700 bg-green-950/80 text-green-300"
-                        : "border border-gray-700 bg-gray-800 text-gray-400"
-                    }`}
-                  >
-                    {isAdmin ? "Admin" : "Observer"}
-                  </span>
-                  <button
-                    type="button"
-                    onClick={() => setShowSettingsModal(false)}
-                    className="inline-flex items-center justify-center rounded-lg bg-gray-800 p-2 text-white transition-colors hover:bg-gray-700"
-                    aria-label="Close settings"
-                  >
-                    <X className="h-5 w-5" />
-                  </button>
-                </div>
-              </div>
-              <div className="overflow-y-auto p-5">
-                <AdminSettingsPanel />
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}

components/PageTitleManager.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { useConnection } from "@/lib/connection";
-
-const DEFAULT_TITLE = "Connect4 RPI Minds & Machines";
-
-export default function PageTitleManager() {
-  const { role, username } = useConnection();
-
-  useEffect(() => {
-    if (role === "player" && username.trim()) {
-      document.title = `${username.trim()} - ${DEFAULT_TITLE}`;
-      return;
-    }
-
-    document.title = DEFAULT_TITLE;
-  }, [role, username]);
-
-  return null;
-}

connect4-moderator-observer.sln

@@ -0,0 +1,19 @@
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio 2012
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "connect4-moderator-observer", "connect4-moderator-observer.csproj", "{88C189D2-5C9A-411D-8713-291AC0841D8C}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+	Debug|Any CPU = Debug|Any CPU
+	ExportDebug|Any CPU = ExportDebug|Any CPU
+	ExportRelease|Any CPU = ExportRelease|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{88C189D2-5C9A-411D-8713-291AC0841D8C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{88C189D2-5C9A-411D-8713-291AC0841D8C}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{88C189D2-5C9A-411D-8713-291AC0841D8C}.ExportDebug|Any CPU.ActiveCfg = ExportDebug|Any CPU
+		{88C189D2-5C9A-411D-8713-291AC0841D8C}.ExportDebug|Any CPU.Build.0 = ExportDebug|Any CPU
+		{88C189D2-5C9A-411D-8713-291AC0841D8C}.ExportRelease|Any CPU.ActiveCfg = ExportRelease|Any CPU
+		{88C189D2-5C9A-411D-8713-291AC0841D8C}.ExportRelease|Any CPU.Build.0 = ExportRelease|Any CPU
+	EndGlobalSection
+EndGlobal

docker-compose.yml

@@ -1,13 +0,0 @@
-services:
-  connect4-ui:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    image: joshuafhiggins/connect4-ui
-    container_name: connect4-ui
-    environment:
-      NODE_ENV: production
-      PORT: "3000"
-    ports:
-      - "3000:3000"
-    restart: unless-stopped

docker_build.sh

@@ -1 +0,0 @@
-docker build . -t joshuafhiggins/connect4-ui

export_presets.cfg

@@ -0,0 +1,491 @@
+[preset.0]
+
+name="macOS"
+platform="macOS"
+runnable=true
+advanced_options=false
+dedicated_server=false
+custom_features=""
+export_filter="all_resources"
+include_filter=""
+exclude_filter=""
+export_path="../../Downloads/connect4-moderator-observer.dmg"
+patches=PackedStringArray()
+encryption_include_filters=""
+encryption_exclude_filters=""
+seed=0
+encrypt_pck=false
+encrypt_directory=false
+script_export_mode=2
+
+[preset.0.options]
+
+export/distribution_type=1
+binary_format/architecture="universal"
+custom_template/debug=""
+custom_template/release=""
+debug/export_console_wrapper=0
+application/icon="uid://ckmfi0cjgxgyk"
+application/icon_interpolation=4
+application/bundle_identifier="com.abunchofknowitalls.connect4"
+application/signature=""
+application/app_category="Games"
+application/short_version="0.1.1"
+application/version="0.1.1"
+application/copyright="RPI Minds & Machines"
+application/copyright_localized={}
+application/min_macos_version_x86_64="10.12"
+application/min_macos_version_arm64="11.00"
+application/export_angle=0
+display/high_res=true
+shader_baker/enabled=true
+application/additional_plist_content=""
+xcode/platform_build="14C18"
+xcode/sdk_version="13.1"
+xcode/sdk_build="22C55"
+xcode/sdk_name="macosx13.1"
+xcode/xcode_version="1420"
+xcode/xcode_build="14C18"
+codesign/codesign=3
+codesign/installer_identity=""
+codesign/apple_team_id="8S7C654DQ4"
+codesign/identity="Developer ID Application: Joshua Higgins (8S7C654DQ4)"
+codesign/entitlements/custom_file=""
+codesign/entitlements/allow_jit_code_execution=false
+codesign/entitlements/allow_unsigned_executable_memory=false
+codesign/entitlements/allow_dyld_environment_variables=false
+codesign/entitlements/disable_library_validation=true
+codesign/entitlements/audio_input=false
+codesign/entitlements/camera=false
+codesign/entitlements/location=false
+codesign/entitlements/address_book=false
+codesign/entitlements/calendars=false
+codesign/entitlements/photos_library=false
+codesign/entitlements/apple_events=false
+codesign/entitlements/debugging=false
+codesign/entitlements/app_sandbox/enabled=false
+codesign/entitlements/app_sandbox/network_server=false
+codesign/entitlements/app_sandbox/network_client=false
+codesign/entitlements/app_sandbox/device_usb=false
+codesign/entitlements/app_sandbox/device_bluetooth=false
+codesign/entitlements/app_sandbox/files_downloads=0
+codesign/entitlements/app_sandbox/files_pictures=0
+codesign/entitlements/app_sandbox/files_music=0
+codesign/entitlements/app_sandbox/files_movies=0
+codesign/entitlements/app_sandbox/files_user_selected=0
+codesign/entitlements/app_sandbox/helper_executables=[]
+codesign/entitlements/additional=""
+codesign/custom_options=PackedStringArray()
+notarization/notarization=2
+privacy/microphone_usage_description=""
+privacy/microphone_usage_description_localized={}
+privacy/camera_usage_description=""
+privacy/camera_usage_description_localized={}
+privacy/location_usage_description=""
+privacy/location_usage_description_localized={}
+privacy/address_book_usage_description=""
+privacy/address_book_usage_description_localized={}
+privacy/calendar_usage_description=""
+privacy/calendar_usage_description_localized={}
+privacy/photos_library_usage_description=""
+privacy/photos_library_usage_description_localized={}
+privacy/desktop_folder_usage_description=""
+privacy/desktop_folder_usage_description_localized={}
+privacy/documents_folder_usage_description=""
+privacy/documents_folder_usage_description_localized={}
+privacy/downloads_folder_usage_description=""
+privacy/downloads_folder_usage_description_localized={}
+privacy/network_volumes_usage_description=""
+privacy/network_volumes_usage_description_localized={}
+privacy/removable_volumes_usage_description=""
+privacy/removable_volumes_usage_description_localized={}
+privacy/tracking_enabled=false
+privacy/tracking_domains=PackedStringArray()
+privacy/collected_data/name/collected=false
+privacy/collected_data/name/linked_to_user=false
+privacy/collected_data/name/used_for_tracking=false
+privacy/collected_data/name/collection_purposes=0
+privacy/collected_data/email_address/collected=false
+privacy/collected_data/email_address/linked_to_user=false
+privacy/collected_data/email_address/used_for_tracking=false
+privacy/collected_data/email_address/collection_purposes=0
+privacy/collected_data/phone_number/collected=false
+privacy/collected_data/phone_number/linked_to_user=false
+privacy/collected_data/phone_number/used_for_tracking=false
+privacy/collected_data/phone_number/collection_purposes=0
+privacy/collected_data/physical_address/collected=false
+privacy/collected_data/physical_address/linked_to_user=false
+privacy/collected_data/physical_address/used_for_tracking=false
+privacy/collected_data/physical_address/collection_purposes=0
+privacy/collected_data/other_contact_info/collected=false
+privacy/collected_data/other_contact_info/linked_to_user=false
+privacy/collected_data/other_contact_info/used_for_tracking=false
+privacy/collected_data/other_contact_info/collection_purposes=0
+privacy/collected_data/health/collected=false
+privacy/collected_data/health/linked_to_user=false
+privacy/collected_data/health/used_for_tracking=false
+privacy/collected_data/health/collection_purposes=0
+privacy/collected_data/fitness/collected=false
+privacy/collected_data/fitness/linked_to_user=false
+privacy/collected_data/fitness/used_for_tracking=false
+privacy/collected_data/fitness/collection_purposes=0
+privacy/collected_data/payment_info/collected=false
+privacy/collected_data/payment_info/linked_to_user=false
+privacy/collected_data/payment_info/used_for_tracking=false
+privacy/collected_data/payment_info/collection_purposes=0
+privacy/collected_data/credit_info/collected=false
+privacy/collected_data/credit_info/linked_to_user=false
+privacy/collected_data/credit_info/used_for_tracking=false
+privacy/collected_data/credit_info/collection_purposes=0
+privacy/collected_data/other_financial_info/collected=false
+privacy/collected_data/other_financial_info/linked_to_user=false
+privacy/collected_data/other_financial_info/used_for_tracking=false
+privacy/collected_data/other_financial_info/collection_purposes=0
+privacy/collected_data/precise_location/collected=false
+privacy/collected_data/precise_location/linked_to_user=false
+privacy/collected_data/precise_location/used_for_tracking=false
+privacy/collected_data/precise_location/collection_purposes=0
+privacy/collected_data/coarse_location/collected=false
+privacy/collected_data/coarse_location/linked_to_user=false
+privacy/collected_data/coarse_location/used_for_tracking=false
+privacy/collected_data/coarse_location/collection_purposes=0
+privacy/collected_data/sensitive_info/collected=false
+privacy/collected_data/sensitive_info/linked_to_user=false
+privacy/collected_data/sensitive_info/used_for_tracking=false
+privacy/collected_data/sensitive_info/collection_purposes=0
+privacy/collected_data/contacts/collected=false
+privacy/collected_data/contacts/linked_to_user=false
+privacy/collected_data/contacts/used_for_tracking=false
+privacy/collected_data/contacts/collection_purposes=0
+privacy/collected_data/emails_or_text_messages/collected=false
+privacy/collected_data/emails_or_text_messages/linked_to_user=false
+privacy/collected_data/emails_or_text_messages/used_for_tracking=false
+privacy/collected_data/emails_or_text_messages/collection_purposes=0
+privacy/collected_data/photos_or_videos/collected=false
+privacy/collected_data/photos_or_videos/linked_to_user=false
+privacy/collected_data/photos_or_videos/used_for_tracking=false
+privacy/collected_data/photos_or_videos/collection_purposes=0
+privacy/collected_data/audio_data/collected=false
+privacy/collected_data/audio_data/linked_to_user=false
+privacy/collected_data/audio_data/used_for_tracking=false
+privacy/collected_data/audio_data/collection_purposes=0
+privacy/collected_data/gameplay_content/collected=false
+privacy/collected_data/gameplay_content/linked_to_user=false
+privacy/collected_data/gameplay_content/used_for_tracking=false
+privacy/collected_data/gameplay_content/collection_purposes=0
+privacy/collected_data/customer_support/collected=false
+privacy/collected_data/customer_support/linked_to_user=false
+privacy/collected_data/customer_support/used_for_tracking=false
+privacy/collected_data/customer_support/collection_purposes=0
+privacy/collected_data/other_user_content/collected=false
+privacy/collected_data/other_user_content/linked_to_user=false
+privacy/collected_data/other_user_content/used_for_tracking=false
+privacy/collected_data/other_user_content/collection_purposes=0
+privacy/collected_data/browsing_history/collected=false
+privacy/collected_data/browsing_history/linked_to_user=false
+privacy/collected_data/browsing_history/used_for_tracking=false
+privacy/collected_data/browsing_history/collection_purposes=0
+privacy/collected_data/search_hhistory/collected=false
+privacy/collected_data/search_hhistory/linked_to_user=false
+privacy/collected_data/search_hhistory/used_for_tracking=false
+privacy/collected_data/search_hhistory/collection_purposes=0
+privacy/collected_data/user_id/collected=false
+privacy/collected_data/user_id/linked_to_user=false
+privacy/collected_data/user_id/used_for_tracking=false
+privacy/collected_data/user_id/collection_purposes=0
+privacy/collected_data/device_id/collected=false
+privacy/collected_data/device_id/linked_to_user=false
+privacy/collected_data/device_id/used_for_tracking=false
+privacy/collected_data/device_id/collection_purposes=0
+privacy/collected_data/purchase_history/collected=false
+privacy/collected_data/purchase_history/linked_to_user=false
+privacy/collected_data/purchase_history/used_for_tracking=false
+privacy/collected_data/purchase_history/collection_purposes=0
+privacy/collected_data/product_interaction/collected=false
+privacy/collected_data/product_interaction/linked_to_user=false
+privacy/collected_data/product_interaction/used_for_tracking=false
+privacy/collected_data/product_interaction/collection_purposes=0
+privacy/collected_data/advertising_data/collected=false
+privacy/collected_data/advertising_data/linked_to_user=false
+privacy/collected_data/advertising_data/used_for_tracking=false
+privacy/collected_data/advertising_data/collection_purposes=0
+privacy/collected_data/other_usage_data/collected=false
+privacy/collected_data/other_usage_data/linked_to_user=false
+privacy/collected_data/other_usage_data/used_for_tracking=false
+privacy/collected_data/other_usage_data/collection_purposes=0
+privacy/collected_data/crash_data/collected=false
+privacy/collected_data/crash_data/linked_to_user=false
+privacy/collected_data/crash_data/used_for_tracking=false
+privacy/collected_data/crash_data/collection_purposes=0
+privacy/collected_data/performance_data/collected=false
+privacy/collected_data/performance_data/linked_to_user=false
+privacy/collected_data/performance_data/used_for_tracking=false
+privacy/collected_data/performance_data/collection_purposes=0
+privacy/collected_data/other_diagnostic_data/collected=false
+privacy/collected_data/other_diagnostic_data/linked_to_user=false
+privacy/collected_data/other_diagnostic_data/used_for_tracking=false
+privacy/collected_data/other_diagnostic_data/collection_purposes=0
+privacy/collected_data/environment_scanning/collected=false
+privacy/collected_data/environment_scanning/linked_to_user=false
+privacy/collected_data/environment_scanning/used_for_tracking=false
+privacy/collected_data/environment_scanning/collection_purposes=0
+privacy/collected_data/hands/collected=false
+privacy/collected_data/hands/linked_to_user=false
+privacy/collected_data/hands/used_for_tracking=false
+privacy/collected_data/hands/collection_purposes=0
+privacy/collected_data/head/collected=false
+privacy/collected_data/head/linked_to_user=false
+privacy/collected_data/head/used_for_tracking=false
+privacy/collected_data/head/collection_purposes=0
+privacy/collected_data/other_data_types/collected=false
+privacy/collected_data/other_data_types/linked_to_user=false
+privacy/collected_data/other_data_types/used_for_tracking=false
+privacy/collected_data/other_data_types/collection_purposes=0
+ssh_remote_deploy/enabled=false
+ssh_remote_deploy/host="user@host_ip"
+ssh_remote_deploy/port="22"
+ssh_remote_deploy/extra_args_ssh=""
+ssh_remote_deploy/extra_args_scp=""
+ssh_remote_deploy/run_script="#!/usr/bin/env bash
+unzip -o -q \"{temp_dir}/{archive_name}\" -d \"{temp_dir}\"
+open \"{temp_dir}/{exe_name}.app\" --args {cmd_args}"
+ssh_remote_deploy/cleanup_script="#!/usr/bin/env bash
+kill $(pgrep -x -f \"{temp_dir}/{exe_name}.app/Contents/MacOS/{exe_name} {cmd_args}\")
+rm -rf \"{temp_dir}\""
+dotnet/include_scripts_content=false
+dotnet/include_debug_symbols=false
+dotnet/embed_build_outputs=false
+
+[preset.1]
+
+name="Windows (x86_64)"
+platform="Windows Desktop"
+runnable=true
+advanced_options=false
+dedicated_server=false
+custom_features=""
+export_filter="all_resources"
+include_filter=""
+exclude_filter=""
+export_path="../../Downloads/connect4-moderator-observer (win-x86_64) (0.1.0).exe"
+patches=PackedStringArray()
+encryption_include_filters=""
+encryption_exclude_filters=""
+seed=0
+encrypt_pck=false
+encrypt_directory=false
+script_export_mode=2
+
+[preset.1.options]
+
+custom_template/debug=""
+custom_template/release=""
+debug/export_console_wrapper=0
+binary_format/embed_pck=true
+texture_format/s3tc_bptc=true
+texture_format/etc2_astc=false
+shader_baker/enabled=true
+binary_format/architecture="x86_64"
+codesign/enable=false
+codesign/timestamp=true
+codesign/timestamp_server_url=""
+codesign/digest_algorithm=1
+codesign/description=""
+codesign/custom_options=PackedStringArray()
+application/modify_resources=true
+application/icon=""
+application/console_wrapper_icon=""
+application/icon_interpolation=4
+application/file_version=""
+application/product_version=""
+application/company_name=""
+application/product_name=""
+application/file_description=""
+application/copyright=""
+application/trademarks=""
+application/export_angle=0
+application/export_d3d12=0
+application/d3d12_agility_sdk_multiarch=true
+ssh_remote_deploy/enabled=false
+ssh_remote_deploy/host="user@host_ip"
+ssh_remote_deploy/port="22"
+ssh_remote_deploy/extra_args_ssh=""
+ssh_remote_deploy/extra_args_scp=""
+ssh_remote_deploy/run_script="Expand-Archive -LiteralPath '{temp_dir}\\{archive_name}' -DestinationPath '{temp_dir}'
+$action = New-ScheduledTaskAction -Execute '{temp_dir}\\{exe_name}' -Argument '{cmd_args}'
+$trigger = New-ScheduledTaskTrigger -Once -At 00:00
+$settings = New-ScheduledTaskSettingsSet -AllowStartIfOnBatteries -DontStopIfGoingOnBatteries
+$task = New-ScheduledTask -Action $action -Trigger $trigger -Settings $settings
+Register-ScheduledTask godot_remote_debug -InputObject $task -Force:$true
+Start-ScheduledTask -TaskName godot_remote_debug
+while (Get-ScheduledTask -TaskName godot_remote_debug | ? State -eq running) { Start-Sleep -Milliseconds 100 }
+Unregister-ScheduledTask -TaskName godot_remote_debug -Confirm:$false -ErrorAction:SilentlyContinue"
+ssh_remote_deploy/cleanup_script="Stop-ScheduledTask -TaskName godot_remote_debug -ErrorAction:SilentlyContinue
+Unregister-ScheduledTask -TaskName godot_remote_debug -Confirm:$false -ErrorAction:SilentlyContinue
+Remove-Item -Recurse -Force '{temp_dir}'"
+dotnet/include_scripts_content=false
+dotnet/include_debug_symbols=false
+dotnet/embed_build_outputs=false
+
+[preset.2]
+
+name="Windows (arm64)"
+platform="Windows Desktop"
+runnable=false
+advanced_options=false
+dedicated_server=false
+custom_features=""
+export_filter="all_resources"
+include_filter=""
+exclude_filter=""
+export_path="../../Downloads/connect4-moderator-observer (win-arm64) (0.1.0).exe"
+patches=PackedStringArray()
+encryption_include_filters=""
+encryption_exclude_filters=""
+seed=0
+encrypt_pck=false
+encrypt_directory=false
+script_export_mode=2
+
+[preset.2.options]
+
+custom_template/debug=""
+custom_template/release=""
+debug/export_console_wrapper=0
+binary_format/embed_pck=true
+texture_format/s3tc_bptc=true
+texture_format/etc2_astc=false
+shader_baker/enabled=false
+binary_format/architecture="arm64"
+codesign/enable=false
+codesign/timestamp=true
+codesign/timestamp_server_url=""
+codesign/digest_algorithm=1
+codesign/description=""
+codesign/custom_options=PackedStringArray()
+application/modify_resources=true
+application/icon=""
+application/console_wrapper_icon=""
+application/icon_interpolation=4
+application/file_version=""
+application/product_version=""
+application/company_name=""
+application/product_name=""
+application/file_description=""
+application/copyright=""
+application/trademarks=""
+application/export_angle=0
+application/export_d3d12=0
+application/d3d12_agility_sdk_multiarch=true
+ssh_remote_deploy/enabled=false
+ssh_remote_deploy/host="user@host_ip"
+ssh_remote_deploy/port="22"
+ssh_remote_deploy/extra_args_ssh=""
+ssh_remote_deploy/extra_args_scp=""
+ssh_remote_deploy/run_script="Expand-Archive -LiteralPath '{temp_dir}\\{archive_name}' -DestinationPath '{temp_dir}'
+$action = New-ScheduledTaskAction -Execute '{temp_dir}\\{exe_name}' -Argument '{cmd_args}'
+$trigger = New-ScheduledTaskTrigger -Once -At 00:00
+$settings = New-ScheduledTaskSettingsSet -AllowStartIfOnBatteries -DontStopIfGoingOnBatteries
+$task = New-ScheduledTask -Action $action -Trigger $trigger -Settings $settings
+Register-ScheduledTask godot_remote_debug -InputObject $task -Force:$true
+Start-ScheduledTask -TaskName godot_remote_debug
+while (Get-ScheduledTask -TaskName godot_remote_debug | ? State -eq running) { Start-Sleep -Milliseconds 100 }
+Unregister-ScheduledTask -TaskName godot_remote_debug -Confirm:$false -ErrorAction:SilentlyContinue"
+ssh_remote_deploy/cleanup_script="Stop-ScheduledTask -TaskName godot_remote_debug -ErrorAction:SilentlyContinue
+Unregister-ScheduledTask -TaskName godot_remote_debug -Confirm:$false -ErrorAction:SilentlyContinue
+Remove-Item -Recurse -Force '{temp_dir}'"
+dotnet/include_scripts_content=false
+dotnet/include_debug_symbols=false
+dotnet/embed_build_outputs=false
+
+[preset.3]
+
+name="Linux (x86_64)"
+platform="Linux"
+runnable=true
+advanced_options=false
+dedicated_server=false
+custom_features=""
+export_filter="all_resources"
+include_filter=""
+exclude_filter=""
+export_path="../../Downloads/connect4-moderator-observer (linux-x86_64) (0.1.0)"
+patches=PackedStringArray()
+encryption_include_filters=""
+encryption_exclude_filters=""
+seed=0
+encrypt_pck=false
+encrypt_directory=false
+script_export_mode=2
+
+[preset.3.options]
+
+custom_template/debug=""
+custom_template/release=""
+debug/export_console_wrapper=0
+binary_format/embed_pck=true
+texture_format/s3tc_bptc=true
+texture_format/etc2_astc=false
+shader_baker/enabled=true
+binary_format/architecture="x86_64"
+ssh_remote_deploy/enabled=false
+ssh_remote_deploy/host="user@host_ip"
+ssh_remote_deploy/port="22"
+ssh_remote_deploy/extra_args_ssh=""
+ssh_remote_deploy/extra_args_scp=""
+ssh_remote_deploy/run_script="#!/usr/bin/env bash
+export DISPLAY=:0
+unzip -o -q \"{temp_dir}/{archive_name}\" -d \"{temp_dir}\"
+\"{temp_dir}/{exe_name}\" {cmd_args}"
+ssh_remote_deploy/cleanup_script="#!/usr/bin/env bash
+kill $(pgrep -x -f \"{temp_dir}/{exe_name} {cmd_args}\")
+rm -rf \"{temp_dir}\""
+dotnet/include_scripts_content=false
+dotnet/include_debug_symbols=false
+dotnet/embed_build_outputs=false
+
+[preset.4]
+
+name="Linux (arm64)"
+platform="Linux"
+runnable=false
+advanced_options=false
+dedicated_server=false
+custom_features=""
+export_filter="all_resources"
+include_filter=""
+exclude_filter=""
+export_path="../../Downloads/connect4-moderator-observer (linux-arm64) (0.1.0)"
+patches=PackedStringArray()
+encryption_include_filters=""
+encryption_exclude_filters=""
+seed=0
+encrypt_pck=false
+encrypt_directory=false
+script_export_mode=2
+
+[preset.4.options]
+
+custom_template/debug=""
+custom_template/release=""
+debug/export_console_wrapper=0
+binary_format/embed_pck=true
+texture_format/s3tc_bptc=true
+texture_format/etc2_astc=false
+shader_baker/enabled=true
+binary_format/architecture="arm64"
+ssh_remote_deploy/enabled=false
+ssh_remote_deploy/host="user@host_ip"
+ssh_remote_deploy/port="22"
+ssh_remote_deploy/extra_args_ssh=""
+ssh_remote_deploy/extra_args_scp=""
+ssh_remote_deploy/run_script="#!/usr/bin/env bash
+export DISPLAY=:0
+unzip -o -q \"{temp_dir}/{archive_name}\" -d \"{temp_dir}\"
+\"{temp_dir}/{exe_name}\" {cmd_args}"
+ssh_remote_deploy/cleanup_script="#!/usr/bin/env bash
+kill $(pgrep -x -f \"{temp_dir}/{exe_name} {cmd_args}\")
+rm -rf \"{temp_dir}\""
+dotnet/include_scripts_content=false
+dotnet/include_debug_symbols=false
+dotnet/embed_build_outputs=false

icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><rect width="124" height="124" x="2" y="2" fill="#363d52" stroke="#212532" stroke-width="4" rx="14"/><g fill="#fff" transform="translate(12.322 12.322)scale(.101)"><path d="M105 673v33q407 354 814 0v-33z"/><path fill="#478cbf" d="m105 673 152 14q12 1 15 14l4 67 132 10 8-61q2-11 15-15h162q13 4 15 15l8 61 132-10 4-67q3-13 15-14l152-14V427q30-39 56-81-35-59-83-108-43 20-82 47-40-37-88-64 7-51 8-102-59-28-123-42-26 43-46 89-49-7-98 0-20-46-46-89-64 14-123 42 1 51 8 102-48 27-88 64-39-27-82-47-48 49-83 108 26 42 56 81zm0 33v39c0 276 813 276 814 0v-39l-134 12-5 69q-2 10-14 13l-162 11q-12 0-16-11l-10-65H446l-10 65q-4 11-16 11l-162-11q-12-3-14-13l-5-69z"/><path d="M483 600c0 34 58 34 58 0v-86c0-34-58-34-58 0z"/><circle cx="725" cy="526" r="90"/><circle cx="299" cy="526" r="90"/></g><g fill="#414042" transform="translate(12.322 12.322)scale(.101)"><circle cx="307" cy="532" r="60"/><circle cx="717" cy="532" r="60"/></g></svg>

icon.svg.import

@@ -0,0 +1,43 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://ebf78p6bpq5m"
+path="res://.godot/imported/icon.svg-218a8f2b3041327d8a5756f3a245f83b.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://icon.svg"
+dest_files=["res://.godot/imported/icon.svg-218a8f2b3041327d8a5756f3a245f83b.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/uastc_level=0
+compress/rdo_quality_loss=0.0
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/channel_remap/red=0
+process/channel_remap/green=1
+process/channel_remap/blue=2
+process/channel_remap/alpha=3
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false

lib/connection.tsx

@@ -1,430 +0,0 @@
-"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;
-  shouldGoFirst: boolean;
-  isAdmin: boolean;
-  reconnectAttempts: number;
-  shouldRedirectToConnect: boolean;
-  becomePlayer: (username: string) => void;
-  authenticateAdmin: (password: string) => boolean;
-  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 [shouldGoFirst, setShouldGoFirst] = useState(false);
-  const [isAdmin, setIsAdmin] = 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 shouldGoFirstRef = 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") {
-          socket.send(cmd.observe());
-          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;
-        if (process.env.NODE_ENV === "development") {
-          console.log("Recieved: " + raw);
-        }
-        const parsed = parseMessage(raw);
-
-        if (parsed.type === "OBSERVE_ACK") {
-          setRole("observer");
-          setShouldRedirectToConnect(false);
-          setStatus("connected");
-          setIsAdmin(false);
-        }
-
-        if (parsed.type === "CONNECT_ACK") {
-          setRole("player");
-          setIsAdmin(false);
-        }
-
-        if (parsed.type === "RECONNECT_ACK") {
-          clearReconnectState();
-          setShouldRedirectToConnect(false);
-          setStatus("connected");
-          setIsAdmin(false);
-        }
-
-        if (parsed.type === "DISCONNECT_ACK") {
-          setRole("observer");
-          setUsername("");
-          setIsAdmin(false);
-          isInMatchRef.current = false;
-          setIsInMatch(false);
-        }
-
-        if (parsed.type === "ADMIN_AUTH_ACK") {
-          setIsAdmin(true);
-        }
-
-        if (parsed.type === "GAME_START") {
-          isInMatchRef.current = true;
-          setIsInMatch(true);
-          shouldGoFirstRef.current = parsed.goesFirst;
-          setShouldGoFirst(parsed.goesFirst);
-        }
-
-        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);
-      setIsAdmin(false);
-      setStatus("connecting");
-
-      openSocket(false);
-    },
-    [clearReconnectState, openSocket],
-  );
-
-  const send = useCallback((message: string) => {
-    if (wsRef.current?.readyState !== WebSocket.OPEN) return false;
-    if (process.env.NODE_ENV === "development") {
-      console.log("Sending: " + message);
-    }
-    wsRef.current.send(message);
-    return true;
-  }, []);
-
-  const becomePlayer = useCallback(
-    (username: string) => {
-      const resolvedUsername = (username ?? "").trim();
-      setRole("player");
-      setUsername(resolvedUsername);
-      isInMatchRef.current = false;
-      setIsInMatch(false);
-      setIsAdmin(false);
-      send(cmd.connect(resolvedUsername));
-    },
-    [send],
-  );
-
-  const authenticateAdmin = useCallback(
-    (password: string) => {
-      const trimmed = password.trim();
-      if (!trimmed) return false;
-      return send(cmd.adminAuth(trimmed));
-    },
-    [send],
-  );
-
-  const disconnect = useCallback(() => {
-    clearReconnectState();
-    manualCloseRef.current = true;
-    safeCloseSocket();
-
-    sessionRef.current = null;
-    setRole(null);
-    setStatus("idle");
-    setUsername("");
-    setIsInMatch(false);
-    setIsAdmin(false);
-    isInMatchRef.current = false;
-    setShouldRedirectToConnect(false);
-  }, [clearReconnectState, safeCloseSocket]);
-
-  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,
-      shouldGoFirst,
-      isAdmin,
-      reconnectAttempts,
-      shouldRedirectToConnect,
-      becomePlayer,
-      authenticateAdmin,
-      connect,
-      disconnect,
-      send,
-      subscribe,
-      clearRedirectFlag,
-    }),
-    [
-      role,
-      wsUrl,
-      username,
-      status,
-      isInMatch,
-      shouldGoFirst,
-      isAdmin,
-      reconnectAttempts,
-      shouldRedirectToConnect,
-      becomePlayer,
-      authenticateAdmin,
-      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;
-}

lib/protocol.ts

@@ -1,374 +0,0 @@
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-export interface GameEntry {
-  id: number;
-  player1: string;
-  player2: string;
-}
-
-export interface PlayerEntry {
-  username: string;
-  ready: boolean;
-  inMatch: boolean;
-}
-
-export interface ScoreEntry {
-  player: string;
-  score: number;
-}
-
-export interface MoveEntry {
-  username: string;
-  column: number;
-}
-
-export interface ReservationEntry {
-  player1: string;
-  player2: string;
-}
-
-export const DEFAULT_WS_URL =
-  process.env.NODE_ENV === "development"
-    ? "ws://localhost:8080"
-    : "wss://connect4.abunchofknowitalls.com/ws";
-export const RECONNECT_INTERVAL_MS = 5000;
-export const RECONNECT_TIMEOUT_MS = 60000;
-
-// ─── Parsed message union ────────────────────────────────────────────────────
-
-export type ParsedMessage =
-  | { type: "CONNECT_ACK" }
-  | { type: "CONNECT_EVENT"; username: string }
-  | { type: "RECONNECT_ACK" }
-  | { type: "DISCONNECT_ACK" }
-  | { type: "DISCONNECT_EVENT"; username: string }
-  | { type: "OBSERVE_ACK"; enabled: boolean }
-  | { type: "READY_ACK" }
-  | { type: "READY_EVENT"; username: string; ready: boolean }
-  | { type: "GAME_START"; goesFirst: boolean }
-  | {
-      type: "GAME_MATCH_START";
-      matchId: number;
-      player1: string;
-      player2: string;
-    }
-  | { type: "GAME_WINS" }
-  | { type: "GAME_LOSS" }
-  | { type: "GAME_DRAW"; matchId?: number }
-  | { type: "GAME_TERMINATED"; matchId?: number }
-  | { 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"; matchId?: number; username: string; column: number }
-  | { type: "GAME_WIN"; matchId?: number; winner: string }
-  | { type: "PLAYER_LIST"; players: PlayerEntry[] }
-  | { type: "TOURNAMENT_START"; tournamentType: string }
-  | { type: "TOURNAMENT_CANCEL" }
-  | { type: "TOURNAMENT_SCORES"; scores: ScoreEntry[] }
-  | { type: "TOURNAMENT_WINNER"; username: string }
-  | { type: "TOURNAMENT_END" }
-  | { type: "ADMIN_AUTH_ACK" }
-  | { type: "RESERVATION_ADD"; player1: string; player2: string }
-  | { type: "RESERVATION_DELETE"; player1: string; player2: string }
-  | { type: "RESERVATION_LIST"; reservations: ReservationEntry[] }
-  | { 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(":");
-
-  switch (parts[0]) {
-    case "CONNECT":
-      if (parts[1] === "ACK") return { type: "CONNECT_ACK" };
-      return { type: "CONNECT_EVENT", username: parts[1] ?? "" };
-      break;
-    case "RECONNECT":
-      if (parts[1] === "ACK") return { type: "RECONNECT_ACK" };
-      break;
-    case "DISCONNECT":
-      if (parts[1] === "ACK") return { type: "DISCONNECT_ACK" };
-      return { type: "DISCONNECT_EVENT", username: parts[1] ?? "" };
-      break;
-    case "OBSERVE":
-      if (parts[1] === "ACK") {
-        return { type: "OBSERVE_ACK", enabled: parts[2] === "1" };
-      }
-      break;
-    case "READY":
-      if (parts[1] === "ACK") return { type: "READY_ACK" };
-      if (parts.length >= 3) {
-        return {
-          type: "READY_EVENT",
-          username: parts[1],
-          ready: parts[2] === "true",
-        };
-      }
-      break;
-
-    case "GAME": {
-      const scopedMatchId = parseInt(parts[1], 10);
-      if (!Number.isNaN(scopedMatchId)) {
-        switch (parts[2]) {
-          case "MOVE":
-            return {
-              type: "GAME_MOVE",
-              matchId: scopedMatchId,
-              username: parts[3],
-              column: parseInt(parts[4], 10),
-            };
-          case "WIN":
-            return {
-              type: "GAME_WIN",
-              matchId: scopedMatchId,
-              winner: parts[3],
-            };
-          case "DRAW":
-            return { type: "GAME_DRAW", matchId: scopedMatchId };
-          case "TERMINATED":
-            return { type: "GAME_TERMINATED", matchId: scopedMatchId };
-        }
-      }
-
-      switch (parts[1]) {
-        case "START":
-          if (parts[2]?.includes(",")) {
-            const [matchId, player1, player2] = parts[2].split(",");
-            return {
-              type: "GAME_MATCH_START",
-              matchId: parseInt(matchId, 10),
-              player1,
-              player2,
-            };
-          }
-          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 "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;
-        }
-      }
-      break;
-    }
-
-    case "OPPONENT":
-      return {
-        type: "OPPONENT_MOVE",
-        column: parseInt(parts[parts.length - 1], 10),
-      };
-
-    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 "WINNER":
-          return { type: "TOURNAMENT_WINNER", username: parts[2] ?? "" };
-        case "END":
-          return { type: "TOURNAMENT_END" };
-      }
-      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.slice(2).join(":"),
-      };
-
-    case "SET":
-      if (parts[2] === "ACK") return { type: "SET_DATA_ACK", key: parts[1] };
-      break;
-
-    case "RESERVATION": {
-      const payload = parts[2] ?? "";
-
-      if (parts[1] === "ADD" || parts[1] === "DELETE") {
-        const [player1, player2] = payload.split(",");
-        if (player1 && player2) {
-          return {
-            type: parts[1] === "ADD" ? "RESERVATION_ADD" : "RESERVATION_DELETE",
-            player1,
-            player2,
-          };
-        }
-      }
-
-      if (parts[1] === "LIST") {
-        const reservations =
-          payload.length === 0
-            ? []
-            : payload
-                .split("|")
-                .map((entry) => {
-                  const [player1, player2] = entry.split(",");
-                  return player1 && player2 ? { player1, player2 } : null;
-                })
-                .filter((entry): entry is ReservationEntry => entry !== null);
-        return { type: "RESERVATION_LIST", reservations };
-      }
-      break;
-    }
-
-    case "ERROR":
-      return { type: "ERROR", message: raw };
-  }
-
-  return { type: "UNKNOWN", raw };
-}
-
-// ─── Command builders ────────────────────────────────────────────────────────
-
-export const cmd = {
-  connect: (username: string) => `CONNECT:${username}`,
-  reconnect: (username: string) => `RECONNECT:${username}`,
-  disconnect: () => "DISCONNECT",
-  observe: () => "OBSERVE",
-  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: string) => `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 ────────────────────────────────────────────────────────────
-
-// 0 = empty, 1 = red (player1 / goes first), 2 = yellow (player2)
-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;
-}
-
-/** 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; 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 };
-}
-
-/** Replay a move list onto an empty board. */
-export function replayMoves(
-  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 };
-}

lib/sfx.ts

@@ -1,4 +0,0 @@
-export const CHIP_DROP_SOUND_PATHS = Array.from(
-  { length: 7 },
-  (_, index) => `/sfx/chip_collide_${index + 1}.ogg`,
-);

next-env.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -1,7 +0,0 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  output: "standalone",
-};
-
-export default nextConfig;

package.json

@@ -1,36 +0,0 @@
-{
-  "name": "connect4-ui",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "format": "prettier --write .",
-    "format:check": "prettier --check ."
-  },
-  "dependencies": {
-    "lucide-react": "^1.8.0",
-    "next": "16.2.4",
-    "react": "19.2.5",
-    "react-confetti": "^6.4.0",
-    "react-dom": "19.2.5"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "19.2.14",
-    "@types/react-dom": "19.2.3",
-    "eslint": "^9",
-    "eslint-config-next": "16.2.4",
-    "postcss": "^8",
-    "prettier": "^3.8.1",
-    "tailwindcss": "^4",
-    "typescript": "^5"
-  },
-  "overrides": {
-    "@types/react": "19.2.14",
-    "@types/react-dom": "19.2.3"
-  }
-}

postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};

project.godot

@@ -0,0 +1,30 @@
+; Engine configuration file.
+; It's best edited using the editor UI and not directly,
+; since the parameters that go here are not all obvious.
+;
+; Format:
+;   [section] ; section goes between []
+;   param=value ; assign values to parameters
+
+config_version=5
+
+[application]
+
+config/name="connect4-moderator-observer"
+run/main_scene="uid://dcx5nvs0pa7me"
+config/features=PackedStringArray("4.5", "C#", "Forward Plus")
+config/icon="uid://ckmfi0cjgxgyk"
+
+[autoload]
+
+Connection="*res://scripts/Connection.cs"
+
+[dotnet]
+
+project/assembly_name="connect4-moderator-observer"
+
+[rendering]
+
+textures/canvas_textures/default_texture_filter=0
+textures/vram_compression/import_s3tc_bptc=true
+textures/vram_compression/import_etc2_astc=true

scenes/board_screen.tscn

@@ -0,0 +1,187 @@
+[gd_scene load_steps=14 format=3 uid="uid://m542qwlp7hl7"]
+
+[ext_resource type="Script" uid="uid://dg5jt0o0r0v3r" path="res://scripts/BoardScreen.cs" id="1_b3w8x"]
+[ext_resource type="PackedScene" uid="uid://rl33x81cxlh0" path="res://scenes/bracket_view.tscn" id="2_u1oi2"]
+[ext_resource type="Texture2D" uid="uid://dlx02qat7j6lf" path="res://assets/sprites/AssetTileset.png" id="3_1tlhv"]
+[ext_resource type="FontFile" uid="uid://c3jmev24lo6ci" path="res://assets/fonts/PixelOperator8.ttf" id="3_rjcmr"]
+[ext_resource type="Texture2D" uid="uid://ckmfi0cjgxgyk" path="res://assets/sprites/RedChip.png" id="4_1hrcj"]
+[ext_resource type="Texture2D" uid="uid://qy30emdgrk7o" path="res://assets/sprites/YellowChip.png" id="5_i2o8i"]
+[ext_resource type="Texture2D" uid="uid://8un28mol7qow" path="res://assets/sprites/BoardTileMap.png" id="6_i2o8i"]
+[ext_resource type="PackedScene" uid="uid://pdean68jjg80" path="res://scenes/button_small.tscn" id="7_glh1q"]
+
+[sub_resource type="WorldBoundaryShape2D" id="WorldBoundaryShape2D_b3w8x"]
+
+[sub_resource type="SegmentShape2D" id="SegmentShape2D_i2o8i"]
+a = Vector2(0, -276)
+b = Vector2(0, 207)
+
+[sub_resource type="TileSetAtlasSource" id="TileSetAtlasSource_i2o8i"]
+texture = ExtResource("6_i2o8i")
+texture_region_size = Vector2i(26, 26)
+0:0/0 = 0
+1:0/0 = 0
+2:0/0 = 0
+3:0/0 = 0
+
+[sub_resource type="TileSet" id="TileSet_glh1q"]
+tile_size = Vector2i(26, 26)
+sources/0 = SubResource("TileSetAtlasSource_i2o8i")
+
+[sub_resource type="AtlasTexture" id="AtlasTexture_glh1q"]
+atlas = ExtResource("3_1tlhv")
+region = Rect2(112, 32, 16, 16)
+
+[node name="BoardScreen" type="Node2D" node_paths=PackedStringArray("BackButton")]
+script = ExtResource("1_b3w8x")
+BracketScene = ExtResource("2_u1oi2")
+BackButton = NodePath("BracketButton")
+
+[node name="Floor Collider" type="StaticBody2D" parent="."]
+position = Vector2(0, 200)
+
+[node name="CollisionShape2D" type="CollisionShape2D" parent="Floor Collider"]
+shape = SubResource("WorldBoundaryShape2D_b3w8x")
+
+[node name="Column Colliders" type="StaticBody2D" parent="."]
+
+[node name="Col0" type="CollisionShape2D" parent="Column Colliders"]
+position = Vector2(-272, 0)
+shape = SubResource("SegmentShape2D_i2o8i")
+
+[node name="Col1" type="CollisionShape2D" parent="Column Colliders"]
+position = Vector2(-195, 0)
+shape = SubResource("SegmentShape2D_i2o8i")
+
+[node name="Col2" type="CollisionShape2D" parent="Column Colliders"]
+position = Vector2(-117, 0)
+shape = SubResource("SegmentShape2D_i2o8i")
+
+[node name="Col3" type="CollisionShape2D" parent="Column Colliders"]
+position = Vector2(-39, 0)
+shape = SubResource("SegmentShape2D_i2o8i")
+
+[node name="Col4" type="CollisionShape2D" parent="Column Colliders"]
+position = Vector2(39, 0)
+shape = SubResource("SegmentShape2D_i2o8i")
+
+[node name="Col5" type="CollisionShape2D" parent="Column Colliders"]
+position = Vector2(117, 0)
+shape = SubResource("SegmentShape2D_i2o8i")
+
+[node name="Col6" type="CollisionShape2D" parent="Column Colliders"]
+position = Vector2(195, 0)
+shape = SubResource("SegmentShape2D_i2o8i")
+
+[node name="Col7" type="CollisionShape2D" parent="Column Colliders"]
+position = Vector2(274, 0)
+shape = SubResource("SegmentShape2D_i2o8i")
+
+[node name="Player1Card" type="Node2D" parent="."]
+
+[node name="Left" type="Sprite2D" parent="Player1Card"]
+position = Vector2(-556, -300)
+scale = Vector2(2, 2)
+texture = ExtResource("3_1tlhv")
+region_enabled = true
+region_rect = Rect2(60, 4, 20, 24)
+
+[node name="Center" type="Sprite2D" parent="Player1Card"]
+position = Vector2(-482, -300)
+scale = Vector2(6.75, 2)
+texture = ExtResource("3_1tlhv")
+region_enabled = true
+region_rect = Rect2(80, 4, 16, 24)
+
+[node name="Right" type="Sprite2D" parent="Player1Card"]
+position = Vector2(-420, -300)
+scale = Vector2(2, 2)
+texture = ExtResource("3_1tlhv")
+region_enabled = true
+region_rect = Rect2(96, 4, 8, 24)
+
+[node name="RedChip" type="Sprite2D" parent="Player1Card/Right"]
+position = Vector2(-7, 6)
+scale = Vector2(0.25, 0.25)
+texture = ExtResource("4_1hrcj")
+
+[node name="Name" type="Label" parent="Player1Card"]
+offset_left = -530.0
+offset_top = -312.0
+offset_right = -428.0
+offset_bottom = -296.0
+theme_override_fonts/font = ExtResource("3_rjcmr")
+text = "Player 1"
+
+[node name="Status" type="Label" parent="Player1Card"]
+offset_left = -529.0
+offset_top = -292.0
+offset_right = -427.0
+offset_bottom = -284.0
+theme_override_colors/font_color = Color(1, 0, 0, 1)
+theme_override_fonts/font = ExtResource("3_rjcmr")
+theme_override_font_sizes/font_size = 8
+text = "NOT READY"
+
+[node name="Player2Card" type="Node2D" parent="."]
+
+[node name="Left" type="Sprite2D" parent="Player2Card"]
+position = Vector2(-556, -228)
+scale = Vector2(2, 2)
+texture = ExtResource("3_1tlhv")
+region_enabled = true
+region_rect = Rect2(60, 4, 20, 24)
+
+[node name="Center" type="Sprite2D" parent="Player2Card"]
+position = Vector2(-482.5, -228)
+scale = Vector2(6.6875, 2)
+texture = ExtResource("3_1tlhv")
+region_enabled = true
+region_rect = Rect2(80, 4, 16, 24)
+
+[node name="Right" type="Sprite2D" parent="Player2Card"]
+position = Vector2(-421, -228)
+scale = Vector2(2, 2)
+texture = ExtResource("3_1tlhv")
+region_enabled = true
+region_rect = Rect2(96, 4, 8, 24)
+
+[node name="YellowChip" type="Sprite2D" parent="Player2Card/Right"]
+position = Vector2(-7, 6)
+scale = Vector2(0.25, 0.25)
+texture = ExtResource("5_i2o8i")
+
+[node name="Name" type="Label" parent="Player2Card"]
+offset_left = -531.0
+offset_top = -240.0
+offset_right = -429.0
+offset_bottom = -224.0
+theme_override_fonts/font = ExtResource("3_rjcmr")
+text = "Player 2"
+
+[node name="Status" type="Label" parent="Player2Card"]
+offset_left = -530.0
+offset_top = -220.0
+offset_right = -428.0
+offset_bottom = -212.0
+theme_override_colors/font_color = Color(1, 0, 0, 1)
+theme_override_fonts/font = ExtResource("3_rjcmr")
+theme_override_font_sizes/font_size = 8
+text = "NOT READY"
+
+[node name="TileMap" type="TileMap" parent="."]
+position = Vector2(39, 200)
+scale = Vector2(3, 3)
+tile_set = SubResource("TileSet_glh1q")
+format = 2
+layer_0/z_index = 100
+layer_0/tile_data = PackedInt32Array(-3, 0, 0, -2, 0, 0, -1, 0, 0, -65536, 0, 0, -65535, 0, 0, -65534, 0, 0, -4, 0, 0, -65540, 0, 0, -131076, 0, 0, -196612, 0, 0, -262148, 0, 0, -327684, 0, 0, -327683, 0, 0, -327682, 0, 0, -327681, 0, 0, -393216, 0, 0, -393215, 0, 0, -393214, 0, 0, -327678, 0, 0, -262142, 0, 0, -196606, 0, 0, -131070, 0, 0, -131071, 0, 0, -131072, 0, 0, -65537, 0, 0, -65538, 0, 0, -65539, 0, 0, -131075, 0, 0, -131074, 0, 0, -131073, 0, 0, -196608, 0, 0, -196607, 0, 0, -262143, 0, 0, -262144, 0, 0, -196609, 0, 0, -196610, 0, 0, -196611, 0, 0, -262147, 0, 0, -262146, 0, 0, -262145, 0, 0, -327680, 0, 0, -327679, 0, 0, -5, 196608, 536870912, -65541, 65536, 0, -131077, 65536, 0, -196613, 65536, 0, -262149, 65536, 0, -327685, 196608, 0, 65532, 196608, 1610612736, 2, 196608, 1879048192, -65533, 196608, 805306368, -393213, 196608, 268435456, -458750, 196608, 1342177280, -393219, 65536, 1073741824, -393218, 65536, 1073741824, -393217, 65536, 1073741824, -458752, 65536, 1073741824, -458751, 65536, 1073741824, -393220, 196608, 1073741824, -327677, 65536, 268435456, -262141, 65536, 268435456, -196605, 65536, 268435456, -131069, 65536, 268435456, 65533, 65536, 1879048192, 65534, 65536, 1879048192, 65535, 65536, 1879048192, 0, 65536, 1879048192, 1, 65536, 1879048192)
+
+[node name="BracketButton" parent="." instance=ExtResource("7_glh1q")]
+offset_left = -566.0
+offset_top = 281.0
+offset_right = -550.0
+offset_bottom = 297.0
+
+[node name="Sprite2D" type="Sprite2D" parent="BracketButton"]
+position = Vector2(8, 8)
+texture = SubResource("AtlasTexture_glh1q")

scenes/bracket_view.tscn

@@ -0,0 +1,68 @@
+[gd_scene load_steps=5 format=3 uid="uid://rl33x81cxlh0"]
+
+[ext_resource type="Script" uid="uid://dm25u0a2lqk2x" path="res://scripts/BracketScene.cs" id="1_dvj3m"]
+[ext_resource type="Texture2D" uid="uid://ckmfi0cjgxgyk" path="res://assets/sprites/RedChip.png" id="2_7c11m"]
+[ext_resource type="PackedScene" uid="uid://b4tujjdhmk4h" path="res://scenes/red_chip.tscn" id="3_1511b"]
+[ext_resource type="Script" uid="uid://1y72woiynf31" path="res://scripts/AdminControls.cs" id="4_mbqc8"]
+
+[node name="BracketView" type="Control" node_paths=PackedStringArray("Players", "Matches")]
+layout_mode = 3
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+script = ExtResource("1_dvj3m")
+Players = NodePath("HBoxContainer/PlayerList")
+Matches = NodePath("HBoxContainer/MatchList")
+JoinButton = ExtResource("2_7c11m")
+BoardScene = ExtResource("3_1511b")
+
+[node name="ColorRect" type="ColorRect" parent="."]
+custom_minimum_size = Vector2(0, 36)
+layout_mode = 1
+anchors_preset = 10
+anchor_right = 1.0
+grow_horizontal = 2
+color = Color(0.13319641, 0.13319641, 0.13319638, 1)
+
+[node name="AdminControls" type="HBoxContainer" parent="ColorRect" node_paths=PackedStringArray("BecomeAdmin", "StartTournament")]
+custom_minimum_size = Vector2(0, 36)
+layout_mode = 1
+anchors_preset = 10
+anchor_right = 1.0
+offset_bottom = 36.0
+grow_horizontal = 2
+script = ExtResource("4_mbqc8")
+BecomeAdmin = NodePath("BecomeAdmin")
+StartTournament = NodePath("StartTournament")
+
+[node name="BecomeAdmin" type="Button" parent="ColorRect/AdminControls"]
+layout_mode = 2
+text = "Become Admin"
+
+[node name="StartTournament" type="Button" parent="ColorRect/AdminControls"]
+layout_mode = 2
+text = "Start Tournament"
+
+[node name="HBoxContainer" type="HBoxContainer" parent="."]
+layout_mode = 1
+anchors_preset = -1
+anchor_right = 1.0
+anchor_bottom = 1.0
+offset_top = 36.0
+grow_horizontal = 2
+grow_vertical = 2
+
+[node name="PlayerList" type="Tree" parent="HBoxContainer"]
+custom_minimum_size = Vector2(400, 0)
+layout_mode = 2
+columns = 3
+column_titles_visible = true
+scroll_horizontal_enabled = false
+
+[node name="MatchList" type="Tree" parent="HBoxContainer"]
+layout_mode = 2
+size_flags_horizontal = 3
+columns = 3
+column_titles_visible = true

scenes/button_medium.tscn

@@ -0,0 +1,44 @@
+[gd_scene load_steps=7 format=3 uid="uid://d1wr0v5ht8vqb"]
+
+[ext_resource type="Script" uid="uid://frisgjvf17ym" path="res://scripts/button_medium.gd" id="2_06p6p"]
+[ext_resource type="Texture2D" uid="uid://dlx02qat7j6lf" path="res://assets/sprites/AssetTileset.png" id="2_q2stu"]
+[ext_resource type="FontFile" uid="uid://c3jmev24lo6ci" path="res://assets/fonts/PixelOperator8.ttf" id="3_dxjfy"]
+
+[sub_resource type="AtlasTexture" id="AtlasTexture_6ptbq"]
+atlas = ExtResource("2_q2stu")
+region = Rect2(8, 16, 32, 16)
+
+[sub_resource type="AtlasTexture" id="AtlasTexture_06p6p"]
+atlas = ExtResource("2_q2stu")
+region = Rect2(8, 32, 32, 16)
+
+[sub_resource type="AtlasTexture" id="AtlasTexture_q2stu"]
+atlas = ExtResource("2_q2stu")
+region = Rect2(8, 0, 32, 16)
+
+[node name="ButtonSmall" type="TextureButton"]
+offset_left = -32.0
+offset_top = -32.0
+offset_right = 32.0
+texture_normal = SubResource("AtlasTexture_6ptbq")
+texture_pressed = SubResource("AtlasTexture_06p6p")
+texture_hover = SubResource("AtlasTexture_q2stu")
+stretch_mode = 4
+script = ExtResource("2_06p6p")
+
+[node name="Label" type="Label" parent="."]
+layout_mode = 0
+offset_left = 2.0
+offset_top = 9.0
+offset_right = 62.0
+offset_bottom = 25.0
+theme_override_colors/font_color = Color(2.7723312e-05, 0.60865843, 0.9772685, 1)
+theme_override_fonts/font = ExtResource("3_dxjfy")
+theme_override_font_sizes/font_size = 16
+text = "TEMP"
+horizontal_alignment = 1
+
+[connection signal="button_down" from="." to="." method="onButtonDown"]
+[connection signal="button_up" from="." to="." method="onButtonUp"]
+[connection signal="mouse_entered" from="." to="." method="onMouseEnter"]
+[connection signal="mouse_exited" from="." to="." method="onMouseExit"]

scenes/button_small.tscn

@@ -0,0 +1,24 @@
+[gd_scene load_steps=5 format=3 uid="uid://pdean68jjg80"]
+
+[ext_resource type="Texture2D" uid="uid://dlx02qat7j6lf" path="res://assets/sprites/AssetTileset.png" id="2_q2stu"]
+
+[sub_resource type="AtlasTexture" id="AtlasTexture_qlcsu"]
+atlas = ExtResource("2_q2stu")
+region = Rect2(0, 64, 16, 16)
+
+[sub_resource type="AtlasTexture" id="AtlasTexture_6ptbq"]
+atlas = ExtResource("2_q2stu")
+region = Rect2(0, 80, 16, 16)
+
+[sub_resource type="AtlasTexture" id="AtlasTexture_06p6p"]
+atlas = ExtResource("2_q2stu")
+region = Rect2(0, 48, 16, 16)
+
+[node name="ButtonSmall" type="TextureButton"]
+offset_left = -16.0
+offset_top = -32.0
+offset_bottom = -16.0
+scale = Vector2(2, 2)
+texture_normal = SubResource("AtlasTexture_qlcsu")
+texture_pressed = SubResource("AtlasTexture_6ptbq")
+texture_hover = SubResource("AtlasTexture_06p6p")

scenes/create_join_room.tscn

@@ -0,0 +1,18 @@
+[gd_scene load_steps=3 format=3 uid="uid://cct663hb47yka"]
+
+[ext_resource type="PackedScene" uid="uid://d1wr0v5ht8vqb" path="res://scenes/button_medium.tscn" id="1_4km6l"]
+[ext_resource type="Script" uid="uid://b1ogflafdte71" path="res://scripts/create_join_room.gd" id="1_k6yuv"]
+
+[node name="CreateJoinRoom" type="Node2D"]
+position = Vector2(0, 42)
+script = ExtResource("1_k6yuv")
+
+[node name="JoinGameButton" parent="." instance=ExtResource("1_4km6l")]
+offset_top = 17.0
+offset_bottom = 49.0
+metadata/_edit_use_anchors_ = true
+
+[node name="CreateGameButton" parent="." instance=ExtResource("1_4km6l")]
+offset_top = 85.0
+offset_bottom = 117.0
+metadata/_edit_use_anchors_ = true

scenes/game.tscn

@@ -0,0 +1,15 @@
+[gd_scene load_steps=3 format=3 uid="uid://cr8fi0e4r88s8"]
+
+[ext_resource type="PackedScene" uid="uid://cct663hb47yka" path="res://scenes/create_join_room.tscn" id="1_yqjtg"]
+[ext_resource type="PackedScene" uid="uid://m542qwlp7hl7" path="res://scenes/board_screen.tscn" id="2_lnu2h"]
+
+[node name="Game" type="Node2D"]
+
+[node name="GameManager" type="Node" parent="."]
+
+[node name="Camera2D" type="Camera2D" parent="."]
+
+[node name="CreateJoinRoom" parent="." instance=ExtResource("1_yqjtg")]
+visible = false
+
+[node name="BoardScreen" parent="." instance=ExtResource("2_lnu2h")]

scenes/main_menu.tscn

@@ -0,0 +1,61 @@
+[gd_scene load_steps=3 format=3 uid="uid://dcx5nvs0pa7me"]
+
+[ext_resource type="Script" uid="uid://bk22f71oximjk" path="res://scripts/AddressUI.cs" id="1_l6cm7"]
+[ext_resource type="Script" uid="uid://cpjbiqn26khck" path="res://scripts/ConnectButtonUI.cs" id="2_ekxnf"]
+
+[node name="Control" type="Control"]
+layout_mode = 3
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+
+[node name="Address" type="TextEdit" parent="."]
+layout_mode = 1
+anchors_preset = 8
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+offset_left = -250.0
+offset_top = -20.0
+offset_right = 250.0
+offset_bottom = 20.0
+grow_horizontal = 2
+grow_vertical = 2
+placeholder_text = "Server Address"
+script = ExtResource("1_l6cm7")
+
+[node name="Button" type="Button" parent="." node_paths=PackedStringArray("AddressUi", "ErrorLabel")]
+layout_mode = 1
+anchors_preset = 8
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+offset_left = -250.0
+offset_top = 27.25
+offset_right = 250.0
+offset_bottom = 67.25
+grow_horizontal = 2
+grow_vertical = 2
+text = "Connect"
+script = ExtResource("2_ekxnf")
+AddressUi = NodePath("../Address")
+ErrorLabel = NodePath("../Label")
+
+[node name="Label" type="Label" parent="."]
+layout_mode = 1
+anchors_preset = 8
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+offset_left = -68.5
+offset_top = 75.149994
+offset_right = 68.5
+offset_bottom = 98.149994
+grow_horizontal = 2
+grow_vertical = 2
+theme_override_colors/font_color = Color(1, 0, 0, 1)

scenes/red_chip.tscn

@@ -0,0 +1,18 @@
+[gd_scene load_steps=4 format=3 uid="uid://b4tujjdhmk4h"]
+
+[ext_resource type="Texture2D" uid="uid://ckmfi0cjgxgyk" path="res://assets/sprites/RedChip.png" id="1_qsflu"]
+[ext_resource type="Script" uid="uid://dd5nu6037qsr0" path="res://scripts/red_chip.gd" id="1_tfypd"]
+
+[sub_resource type="CircleShape2D" id="CircleShape2D_tfypd"]
+radius = 13.017083
+
+[node name="RedChip" type="RigidBody2D"]
+script = ExtResource("1_tfypd")
+
+[node name="Sprite2D" type="Sprite2D" parent="."]
+scale = Vector2(3, 3)
+texture = ExtResource("1_qsflu")
+
+[node name="CollisionShape2D" type="CollisionShape2D" parent="."]
+scale = Vector2(3, 3)
+shape = SubResource("CircleShape2D_tfypd")

scenes/yellow_chip.tscn

@@ -0,0 +1,18 @@
+[gd_scene load_steps=4 format=3 uid="uid://lruk652t0xe5"]
+
+[ext_resource type="Script" uid="uid://ddg7dv686sbrb" path="res://scripts/yellow_chip.gd" id="1_epi6l"]
+[ext_resource type="Texture2D" uid="uid://qy30emdgrk7o" path="res://assets/sprites/YellowChip.png" id="1_eu0sq"]
+
+[sub_resource type="CircleShape2D" id="CircleShape2D_epi6l"]
+radius = 13.004272
+
+[node name="YellowChip" type="RigidBody2D"]
+script = ExtResource("1_epi6l")
+
+[node name="Sprite2D" type="Sprite2D" parent="."]
+scale = Vector2(3, 3)
+texture = ExtResource("1_eu0sq")
+
+[node name="CollisionShape2D" type="CollisionShape2D" parent="."]
+scale = Vector2(3, 3)
+shape = SubResource("CircleShape2D_epi6l")

scripts/AddressUI.cs

@@ -0,0 +1,10 @@
+using Godot;
+using System;
+
+public partial class AddressUI : TextEdit
+{
+	public override void _Ready()
+	{
+		Text = Connection.WS_DEFAULT_ADDRESS;
+	}
+}

scripts/AddressUI.cs.uid

@@ -0,0 +1 @@
+uid://bk22f71oximjk

scripts/AdminControls.cs

@@ -0,0 +1,123 @@
+using Godot;
+using System;
+using System.Collections.Generic;
+
+public partial class AdminControls : HBoxContainer
+{
+	[Export] public Button BecomeAdmin;
+	[Export] public Button StartTournament;
+	
+	public override void _Ready()
+	{
+		Connection.Instance.OnBecomeAdmin += OnBecomeAdmin;
+		Connection.Instance.OnTournamentEnd += OnEndTournament;
+		
+		StartTournament.Pressed += StartTournamentCommand;
+		if (!Connection.Instance.IsAdmin || Connection.Instance.ActiveTournament)
+		{
+			StartTournament.Hide();
+		}
+		
+		BecomeAdmin.Pressed += ShowAuthPopup;
+	}
+	
+	public override void _ExitTree()
+	{
+		Connection.Instance.OnBecomeAdmin -= OnBecomeAdmin;
+		Connection.Instance.OnTournamentEnd -= OnEndTournament;
+	}
+
+	private void StartTournamentCommand()
+	{
+		Connection.Instance.StartTournament();
+	}
+
+	private void OnEndTournament(List<(string, int)> playerScoreboard)
+	{
+		StartTournament.Show();
+		ShowTournamentScoreboard(playerScoreboard);
+	}
+
+	private void ShowAuthPopup()
+	{
+		var authWindow = new Window();
+		authWindow.AlwaysOnTop = true;
+		authWindow.MaximizeDisabled = true;
+		authWindow.Unresizable = true;
+		authWindow.InitialPosition = Window.WindowInitialPosition.CenterMainWindowScreen;
+		authWindow.Size = new Vector2I(256, 128);
+		authWindow.CloseRequested += () =>
+		{
+			GetTree().Root.RemoveChild(authWindow);
+		};
+		
+		var vbox = new VBoxContainer();
+		vbox.LayoutMode = 1;
+		vbox.AnchorBottom = 1.0f;
+		vbox.AnchorRight = 1.0f;
+		vbox.GrowHorizontal = GrowDirection.Both;
+		vbox.GrowVertical = GrowDirection.Both;
+		vbox.Alignment = AlignmentMode.Center;
+		
+		var passwordBox = new TextEdit();
+		passwordBox.PlaceholderText = "Password";
+		passwordBox.SetCustomMinimumSize(new Vector2(32, 32));
+		
+		var button = new Button();
+		button.Text = "Login";
+		button.Pressed += () =>
+		{
+			Connection.Instance.AdminAuth(passwordBox.Text);
+			GetTree().Root.RemoveChild(authWindow);
+		};
+		
+		vbox.AddChild(passwordBox);
+		vbox.AddChild(button);
+		
+		authWindow.AddChild(vbox);
+		
+		GetTree().Root.AddChild(authWindow);
+	}
+
+	private void ShowTournamentScoreboard(List<(string, int)> playerScoreboard)
+	{
+		var scoreboardWindow = new Window();
+		scoreboardWindow.AlwaysOnTop = true;
+		scoreboardWindow.MaximizeDisabled = true;
+		scoreboardWindow.Unresizable = true;
+		scoreboardWindow.InitialPosition = Window.WindowInitialPosition.CenterMainWindowScreen;
+		scoreboardWindow.Size = new Vector2I(256, 512);
+		scoreboardWindow.CloseRequested += () =>
+		{
+			GetTree().Root.RemoveChild(scoreboardWindow);
+		};
+		
+		var tree = new Tree();
+		tree.HideRoot = true;
+		tree.Columns = 2;
+		tree.ColumnTitlesVisible = true;
+		tree.SetColumnTitle(0, "Player");
+		tree.SetColumnTitle(1, "Score");
+		var root = tree.CreateItem();
+		
+		foreach ((string, int) entry in playerScoreboard)
+		{
+			var item = tree.CreateItem(root);
+			item.SetText(0, entry.Item1);
+			item.SetText(1, entry.Item2.ToString());
+		}
+		
+		scoreboardWindow.AddChild(tree);
+		
+		GetTree().Root.AddChild(scoreboardWindow);
+	}
+
+	private void OnBecomeAdmin()
+	{
+		BecomeAdmin.Hide();
+		if (!Connection.Instance.ActiveTournament)
+		{
+			StartTournament.Show();
+		}
+	}
+}

scripts/AdminControls.cs.uid

@@ -0,0 +1 @@
+uid://1y72woiynf31

scripts/BoardScreen.cs

@@ -0,0 +1,255 @@
+using Godot;
+using System;
+using System.Collections.Generic;
+
+public partial class BoardScreen : Node2D {
+	
+	[Export] public BaseButton BackButton;
+	
+	private const string RED_CHIP_PATH = "res://scenes/red_chip.tscn";
+	private const string YELLOW_CHIP_PATH = "res://scenes/yellow_chip.tscn";
+	private const string BRACKET_SCENE_PATH = "res://scenes/bracket_view.tscn";
+	private const int CHIP_SCALE = 3;
+	private const int CHIP_SIZE = 24;
+	private const int CHIP_PADDING = 2;
+	private const int CHIP_X_OFF = -(CHIP_SIZE + CHIP_PADDING) * 7 / 2 + (CHIP_SIZE + CHIP_PADDING) / 2;
+	private const int Y_OFF = 300;
+	private const int CARD_CENTER_X_DEFAULT = -536;
+
+	private PackedScene redChip;
+	private PackedScene ylwChip;
+
+	private Node2D player1Card; 
+	private Node2D player2Card;
+	private MatchData matchData;
+
+	private RigidBody2D[,] chips = new RigidBody2D[6, 7]; // 6 rows 7 cols | 0, 0 is top left
+
+	// Called when the node enters the scene tree for the first time.
+	public override void _Ready() {
+		// Node initialization
+		player1Card = GetNode<Node2D>("Player1Card");
+		player2Card = GetNode<Node2D>("Player2Card");
+
+		player1Card.GetNode<Label>("Name").Resized += () => setPlayerCardScale((player1Card.GetNode<Label>("Name").GetRect().Size.X + 7) / 16, player1Card);
+		player2Card.GetNode<Label>("Name").Resized += () => setPlayerCardScale((player2Card.GetNode<Label>("Name").GetRect().Size.X + 7) / 16, player2Card);
+
+		redChip = GD.Load<PackedScene>(RED_CHIP_PATH);
+		ylwChip = GD.Load<PackedScene>(YELLOW_CHIP_PATH);
+		
+		matchData = Connection.Instance.CurrentObservingMatch;
+		player1Card.GetNode<Label>("Name").Text = matchData.player1;
+		player2Card.GetNode<Label>("Name").Text = matchData.player2;
+
+		GetNode<TextureButton>("BracketButton").Pressed += TransitionToBracket;
+
+		Connection.Instance.OnObserveWin += ObserveWin;
+		Connection.Instance.OnObserveDraw += ObserveDraw;
+		Connection.Instance.OnObserveTerminated += ObserveTerminated;
+		Connection.Instance.OnObserveMove += ObserveMove;
+		Connection.Instance.OnTournamentEnd += ShowTournamentScoreboard;
+
+		BackButton.Pressed += () =>
+		{
+			TransitionToBracket();
+		};
+	}
+
+	public override void _ExitTree()
+	{
+		Connection.Instance.OnObserveWin -= ObserveWin;
+		Connection.Instance.OnObserveDraw -= ObserveDraw;
+		Connection.Instance.OnObserveTerminated -= ObserveTerminated;
+		Connection.Instance.OnObserveMove -= ObserveMove;
+		Connection.Instance.OnTournamentEnd -= ShowTournamentScoreboard;
+	}
+
+	private void ObserveMove(string username, int column)
+	{
+		if (username == matchData.player1)
+		{
+			spawnRed(column);
+		}
+		else
+		{
+			spawnYellow(column);
+		}
+	}
+
+	private void ObserveWin(string winner)
+	{
+		var popup = new Popup();
+		popup.AlwaysOnTop = true;
+		popup.PopupCentered();
+		popup.Size = new Vector2I(128, 128);
+		var text = new Label();
+		text.Text = winner + " wins!";
+		popup.AddChild(text);
+		GetTree().Root.AddChild(popup);
+		TransitionToBracket();
+	}
+	
+	private void ObserveDraw()
+	{
+		var popup = new Popup();
+		popup.AlwaysOnTop = true;
+		popup.PopupCentered();
+		popup.Size = new Vector2I(128, 128);
+		var text = new Label();
+		text.Text = "Draw!";
+		popup.AddChild(text);
+		GetTree().Root.AddChild(popup);
+		TransitionToBracket();
+	}
+	
+	private void ObserveTerminated()
+	{
+		var popup = new Popup();
+		popup.AlwaysOnTop = true;
+		popup.PopupCentered();
+		popup.Size = new Vector2I(128, 128);
+		var text = new Label();
+		text.Text = "Match Terminated";
+		popup.AddChild(text);
+		GetTree().Root.AddChild(popup);
+		TransitionToBracket();
+	}
+	
+	private void ShowTournamentScoreboard(List<(string, int)> playerScoreboard)
+	{
+		var scoreboardWindow = new Window();
+		scoreboardWindow.AlwaysOnTop = true;
+		scoreboardWindow.MaximizeDisabled = true;
+		scoreboardWindow.Unresizable = true;
+		scoreboardWindow.InitialPosition = Window.WindowInitialPosition.CenterMainWindowScreen;
+		scoreboardWindow.Size = new Vector2I(256, 512);
+		scoreboardWindow.CloseRequested += () =>
+		{
+			GetTree().Root.RemoveChild(scoreboardWindow);
+		};
+		
+		var tree = new Tree();
+		tree.HideRoot = true;
+		tree.Columns = 2;
+		tree.ColumnTitlesVisible = true;
+		tree.SetColumnTitle(0, "Player");
+		tree.SetColumnTitle(1, "Score");
+		var root = tree.CreateItem();
+		
+		foreach ((string, int) entry in playerScoreboard)
+		{
+			var item = tree.CreateItem(root);
+			item.SetText(0, entry.Item1);
+			item.SetText(1, entry.Item2.ToString());
+		}
+		
+		scoreboardWindow.AddChild(tree);
+		
+		GetTree().Root.AddChild(scoreboardWindow);
+	}
+	
+	private void TransitionToBracket()
+	{
+		GetTree().ChangeSceneToFile(BRACKET_SCENE_PATH);
+	}
+
+	// Called every frame. 'delta' is the elapsed time since the previous frame.
+	public override void _Process(double delta) {
+		/*
+		if(p1 != null) {
+			Label username = player1Card.GetNode<Label>("Name");
+			username.Text = p1.username;
+		
+			if(p1.isReady) {
+				Label status = player1Card.GetNode<Label>("Status");
+				status.Text = "Ready!";
+				status.AddThemeColorOverride("font_color", Colors.LimeGreen);
+			}
+		}
+		
+		if(p2 != null) {
+			Label username = player2Card.GetNode<Label>("Name");
+			username.Text = p2.username;
+  
+			if(p2.isReady) {
+				Label status = player2Card.GetNode<Label>("Status");
+				status.Text = "Ready!";
+				status.AddThemeColorOverride("font_color", Colors.LimeGreen);
+			}
+		}
+		*/
+	}
+
+	/*
+	 * Determines if the column can have a new chip placed
+	 * Will return -1 if invalid
+	 * or
+	 * Will return row of board in which chip can be placed
+	 */
+	public int canPlaceOnCol(int col) {
+		if(col < 0 || col > 6) // Col out of range
+			return -1;
+
+		return getNextAvailRow(col);
+	}
+
+	public int getNextAvailRow(int col) {
+		for(int i = chips.GetLength(0) - 1; i >= 0; i--) { // Start at bottom
+			if(chips[i, col] == null)
+				return i;
+		}
+
+		return -1;
+	}
+
+	private void spawnRed(int col) {
+		int row = canPlaceOnCol(col);
+		if(row == -1) {
+			GD.Print("Invalid Placement!");
+			return;
+		}
+
+		RigidBody2D newNode = redChip.Instantiate<RigidBody2D>();
+		AddChild(newNode);
+		newNode.Position = new Vector2(CHIP_SCALE * (CHIP_X_OFF + (CHIP_SIZE + CHIP_PADDING) * col), -(CHIP_SIZE + CHIP_PADDING) * 7);
+
+		chips[row, col] = newNode;
+	}
+
+	private void spawnYellow(int col) {
+		int row = canPlaceOnCol(col);
+		if(row == -1) {
+			GD.Print("Invalid Placement!");
+			return;
+		}
+
+		RigidBody2D newNode = ylwChip.Instantiate<RigidBody2D>();
+		AddChild(newNode);
+		newNode.Position = new Vector2(CHIP_SCALE * (CHIP_X_OFF + (CHIP_SIZE + CHIP_PADDING) * col), -(CHIP_SIZE + CHIP_PADDING) * 7); 
+
+		chips[row, col] = newNode;
+	}
+
+	private void setPlayerCardScale(float x, Node2D playerCard) {
+		Sprite2D cardCenter = playerCard.GetNode<Sprite2D>("Center");
+		Sprite2D cardRight = playerCard.GetNode<Sprite2D>("Right");
+
+		float offX = 16 * x / 2;
+		cardCenter.Scale = new Vector2(x, 2);
+		cardCenter.Position = new Vector2(CARD_CENTER_X_DEFAULT + offX, cardCenter.Position.Y);
+
+		cardRight.Position = new Vector2(CARD_CENTER_X_DEFAULT + offX * 2 + 8, cardRight.Position.Y); // 8 is a magic number (im too lazy) for the size of the card edge multipled by 2
+	}
+}
+
+enum Direction
+{
+	UP,
+	UP_RIGHT,
+	RIGHT,
+	DOWN_RIGHT,
+	DOWN,
+	DOWN_LEFT,
+	LEFT,
+	UP_LEFT
+}

scripts/BoardScreen.cs.uid

@@ -0,0 +1 @@
+uid://dg5jt0o0r0v3r

scripts/BracketScene.cs

@@ -0,0 +1,95 @@
+using Godot;
+using System;
+using System.Collections.Generic;
+
+public partial class BracketScene : Control
+{
+	[Export] public Tree Players;
+	[Export] public Tree Matches;
+	[Export] public Texture2D JoinButton;
+	private const string BOARD_SCENE_PATH = "res://scenes/game.tscn";
+	
+	private List<PlayerData> _playerList;
+	private List<MatchData> _matchList;
+	
+	public override void _Ready()
+	{
+		Players.SetColumnTitle(0, "Name");
+		Players.SetColumnTitle(1, "Ready");
+		Players.SetColumnTitle(2, "Playing");
+		Players.HideRoot = true;
+		Players.ButtonClicked += KickPlayer;
+		
+		
+		Matches.SetColumnTitle(0, "Match");
+		Matches.SetColumnTitle(1, "Red");
+		Matches.SetColumnTitle(2, "Yellow");
+		Matches.HideRoot = true;
+		Matches.ButtonClicked += WatchGame;
+		
+		Connection.Instance.OnUpdatedPlayers += UpdatePlayers;
+		Connection.Instance.OnUpdatedMatches += UpdateMatches;
+		Connection.Instance.OnWatchGameAck += TransitionToBoard;
+	}
+
+	public override void _ExitTree()
+	{
+		Connection.Instance.OnUpdatedPlayers -= UpdatePlayers;
+		Connection.Instance.OnUpdatedMatches -= UpdateMatches;
+		Connection.Instance.OnWatchGameAck -= TransitionToBoard;
+	}
+
+	private void UpdatePlayers(List<PlayerData> playerList)
+	{
+		Players.Clear();
+		_playerList = playerList;
+		var root = Players.CreateItem();
+		for (int i = 0; i < _playerList.Count; i++)
+		{
+			var item = Players.CreateItem(root);
+			item.SetText(0, playerList[i].username);
+			item.SetText(1, playerList[i].isReady ? "Yes" : "No");
+			item.SetText(2, playerList[i].isPlaying ? "Yes" : "No");
+			if (Connection.Instance.IsAdmin)
+			{
+				item.AddButton(0, JoinButton, i, false, "Kick"); // TODO
+			}
+		}
+	}
+	
+	private void UpdateMatches(List<MatchData> matchList)
+	{
+		Matches.Clear();
+		_matchList = matchList;
+		var root = Matches.CreateItem();
+		for (int i = 0; i < matchList.Count; i++)
+		{
+			var item = Matches.CreateItem(root);
+			item.SetText(0, matchList[i].matchId.ToString());
+			item.SetText(1, matchList[i].player1);
+			item.SetText(2, matchList[i].player2);
+			item.AddButton(0, JoinButton, i, false, "Watch");
+		}
+	}
+
+	private void WatchGame(TreeItem item, long column, long id, long mouseButtonIndex)
+	{
+		if (mouseButtonIndex == 1 && column == 0)
+		{
+			Connection.Instance.SendWatchGame(_matchList[(int) id].matchId);
+		} 
+	}
+	
+	private void KickPlayer(TreeItem item, long column, long id, long mouseButtonIndex)
+	{
+		if (mouseButtonIndex == 1 && column == 0)
+		{
+			Connection.Instance.KickPlayer(_playerList[(int) id].username);
+		} 
+	}
+
+	private void TransitionToBoard()
+	{
+		GetTree().ChangeSceneToFile(BOARD_SCENE_PATH);
+	}
+}

scripts/BracketScene.cs.uid

@@ -0,0 +1 @@
+uid://dm25u0a2lqk2x

scripts/ConnectButtonUI.cs

@@ -0,0 +1,23 @@
+using Godot;
+using System;
+
+public partial class ConnectButtonUI : Button
+{
+	[Export] public TextEdit AddressUi;
+	[Export] public Label ErrorLabel;
+	private const string BRACKET_SCENE_PATH = "res://scenes/bracket_view.tscn";
+	
+	public override void _Pressed()
+	{
+		if (Connection.Instance.Connect(AddressUi.Text))
+		{
+			GD.Print("Success!");
+			GetTree().ChangeSceneToFile(BRACKET_SCENE_PATH);
+		}
+		else
+		{
+			ErrorLabel.Text = "Couldn't connect to server!";
+		}
+		base._Pressed();
+	}
+}

scripts/ConnectButtonUI.cs.uid

@@ -0,0 +1 @@
+uid://cpjbiqn26khck

scripts/Connection.cs

@@ -0,0 +1,493 @@
+using Godot;
+using System;
+using System.Collections.Generic;
+using System.Threading;
+
+public partial class Connection : Node
+{
+	public const string WS_DEFAULT_ADDRESS = "wss://connect4.abunchofknowitalls.com";
+
+	public static Connection Instance { get; private set; }
+
+	private WebSocketPeer _webSocket = new WebSocketPeer();
+	private bool _firstConnect = true;
+	private Thread _gameListThread;
+	private bool _gameListThreadRunning;
+
+	public event Action OnConnected;
+	public event Action OnReadyAcknowledged;
+	public event Action<bool> OnGameStart;
+	public event Action OnGameWin;
+	public event Action OnGameLoss;
+	public event Action OnGameDraw;
+	public event Action OnGameTerminated;
+	public event Action<int> OnOpponentMove;
+
+	public event Action OnWatchGameAck;
+	public event Action<string> OnObserveWin;
+	public event Action OnObserveDraw;
+	public event Action OnObserveTerminated;
+	public event Action<string, int> OnObserveMove;
+	public event Action<List<MatchData>> OnUpdatedMatches;
+	public event Action<List<PlayerData>> OnUpdatedPlayers;
+	public event Action OnStartTournamentAck;
+	public event Action<List<(string, int)>> OnTournamentEnd;
+	public event Action OnBecomeAdmin;
+	
+
+	// Already prints to console
+	public event Action<string, string> OnError;
+
+	public bool IsAdmin { get; private set; }
+	public bool IsPlayer { get; private set; }
+	public bool ActiveTournament { get; private set; }
+
+	
+	public MatchData CurrentObservingMatch { get; private set; }
+
+	private bool IsSocketOpen => _webSocket.GetReadyState() == WebSocketPeer.State.Open;
+
+	public override void _Ready()
+	{
+		Instance = this;
+		_webSocket.SetHeartbeatInterval(5.0);
+		_webSocket.HeartbeatInterval = 5.0;
+	}
+
+	public bool Connect(string address)
+	{
+		if (_webSocket.GetReadyState() == WebSocketPeer.State.Open)
+		{
+			return false;
+		}
+
+		Error error = _webSocket.ConnectToUrl(address);
+		if (error != Error.Ok)
+		{
+			return false;
+		}
+
+		_webSocket.Poll();
+
+		while (_webSocket.GetReadyState() == WebSocketPeer.State.Connecting)
+		{
+			_webSocket.Poll();
+			Thread.Sleep(TimeSpan.FromMilliseconds(5));
+		}
+
+		if (_webSocket.GetReadyState() != WebSocketPeer.State.Open)
+		{
+			return false;
+		}
+
+		_webSocket.SetHeartbeatInterval(5.0);
+		_webSocket.HeartbeatInterval = 5.0;
+		_firstConnect = false;
+		StartGameListRefreshLoop();
+		return true;
+	}
+
+	public override void _ExitTree()
+	{
+		StopGameListRefreshLoop();
+	}
+
+	public override void _PhysicsProcess(double delta)
+	{
+		_webSocket.Poll();
+		WebSocketPeer.State state = _webSocket.GetReadyState();
+		if ((state == WebSocketPeer.State.Closed || state == WebSocketPeer.State.Closing) && !_firstConnect)
+		{
+			StopGameListRefreshLoop();
+			GD.PrintErr("Connection lost.");
+			//GetTree().Quit();
+		}
+
+		if (IsSocketOpen)
+		{
+			while (_webSocket.GetAvailablePacketCount() > 0)
+			{
+				string message = _webSocket.GetPacket().GetStringFromUtf8();
+				HandleServerMessage(message);
+			}
+		}
+	}
+
+	// Player commands
+	public void SendConnect(string clientId)
+	{
+		if (string.IsNullOrWhiteSpace(clientId))
+		{
+			GD.PrintErr("Client ID is required to CONNECT.");
+			return;
+		}
+
+		clientId = clientId.Trim();
+
+		if (clientId.Contains(":"))
+		{
+			GD.PrintErr("Client ID cannot contain ':' characters.");
+			return;
+		}
+
+		SendCommand("CONNECT", clientId);
+	}
+
+	public void SendReady()
+	{
+		SendCommand("READY");
+	}
+
+	public void SendPlay(int column)
+	{
+		SendCommand("PLAY", column.ToString());
+	}
+
+	// Observer commands
+	public void UpdateGameList()
+	{
+		SendCommand("GAME", "LIST");
+	}
+
+	private void StartGameListRefreshLoop()
+	{
+		if (_gameListThreadRunning)
+		{
+			return;
+		}
+
+		_gameListThreadRunning = true;
+		_gameListThread = new Thread(() =>
+		{
+			while (_gameListThreadRunning)
+			{
+				if (IsSocketOpen)
+				{
+					UpdateGameList();
+					UpdatePlayerList();
+				}
+
+				Thread.Sleep(TimeSpan.FromSeconds(5));
+			}
+		})
+		{
+			IsBackground = true
+		};
+		_gameListThread.Start();
+	}
+
+	private void StopGameListRefreshLoop()
+	{
+		if (!_gameListThreadRunning)
+		{
+			return;
+		}
+
+		_gameListThreadRunning = false;
+		_gameListThread?.Join();
+		_gameListThread = null;
+	}
+
+	public void UpdatePlayerList()
+	{
+		SendCommand("PLAYER", "LIST");
+	}
+
+	public void SendWatchGame(int matchID)
+	{
+		SendCommand("GAME", "WATCH:" + matchID);
+	}
+
+	public void AdminAuth(string password)
+	{
+		if (IsAdmin) return;
+		SendCommand("ADMIN", "AUTH:" + password);
+	}
+
+
+	// Admin commands
+	public void KickPlayer(string playerId)
+	{
+		if (!IsAdmin) return;
+		SendCommand("ADMIN", "KICK:" + playerId);
+	}
+
+	public void StartTournament()
+	{
+		if (!IsAdmin) return;
+		SendCommand("TOURNAMENT", "START");
+	}
+
+	public void TerminateGame()
+	{
+		if (!IsAdmin) return;
+		SendCommand("GAME", "TERMINATE");
+	}
+
+	public void SetTournamentWait(float waitTime)
+	{
+		if (!IsAdmin) return;
+		SendCommand("TOURNAMENT", "WAIT:" + waitTime);
+	}
+
+	private void SendCommand(string header, string body = "")
+	{
+		if (!IsSocketOpen)
+		{
+			GD.PrintErr($"Cannot send {header}, socket is not open.");
+			return;
+		}
+
+		string payload = string.IsNullOrEmpty(body) ? header : $"{header}:{body}";
+		_webSocket.SendText(payload);
+	}
+
+	private void HandleServerMessage(string message)
+	{
+		if (string.IsNullOrWhiteSpace(message))
+		{
+			return;
+		}
+
+		message = message.Trim();
+
+		string header;
+		string body;
+		int separatorIndex = message.IndexOf(':');
+		if (separatorIndex >= 0)
+		{
+			header = message.Substring(0, separatorIndex).Trim();
+			body = message.Substring(separatorIndex + 1).Trim();
+		}
+		else
+		{
+			header = message.Trim();
+			body = string.Empty;
+		}
+
+		header = header.ToUpperInvariant();
+
+		switch (header)
+		{
+			case "CONNECT":
+				if (body.Equals("ACK", StringComparison.OrdinalIgnoreCase))
+				{
+					IsPlayer = true;
+					OnConnected?.Invoke();
+				}
+
+				break;
+			case "READY":
+				if (body.Equals("ACK", StringComparison.OrdinalIgnoreCase))
+				{
+					OnReadyAcknowledged?.Invoke();
+				}
+
+				break;
+			case "GAME":
+				HandleGameMessage(body);
+				break;
+			case "PLAYER":
+				HandlePlayerList(body);
+				break;
+			case "OPPONENT":
+				if (int.TryParse(body, out int column))
+				{
+					OnOpponentMove?.Invoke(column);
+				}
+				else
+				{
+					GD.PrintErr($"Invalid opponent column: {body}");
+				}
+
+				break;
+			case "ADMIN":
+				if (body == "AUTH:ACK")
+				{
+					IsAdmin = true;
+					OnBecomeAdmin?.Invoke();
+				}
+
+				break;
+			case "TOURNAMENT":
+				HandleTournamentMessage(body);
+				break;
+			case "ERROR":
+				HandleErrorMessage(body);
+				GD.PrintErr($"Error: {body}");
+				break;
+			default:
+				GD.Print($"Unhandled server message: {message}");
+				break;
+		}
+	}
+
+	private void HandleTournamentMessage(string body)
+	{
+		if (string.IsNullOrWhiteSpace(body))
+		{
+			return;
+		}
+
+		string[] segments = body.Split(':');
+		string command = segments[0].Trim().ToUpperInvariant();
+		string argument = segments.Length > 1 ? segments[1].Trim() : string.Empty;
+
+		switch (command)
+		{
+			case "END":
+			{
+				ActiveTournament = false;
+				List<(string, int)> playerScoreboard = new List<(string, int)>();
+				string[] entries = segments[1].Split("|");
+				foreach (string entry in entries)
+				{
+					string[] data = entry.Split(',');
+					playerScoreboard.Add((data[0], int.Parse(data[1])));
+				}
+
+				OnTournamentEnd?.Invoke(playerScoreboard);
+				break;
+			}
+			case "START":
+			{
+				OnStartTournamentAck?.Invoke();
+				ActiveTournament = true;
+				break;
+			}
+		}
+	}
+
+	private void HandlePlayerList(string body)
+	{
+		if (string.IsNullOrWhiteSpace(body))
+		{
+			return;
+		}
+
+		string[] segments = body.Split(':');
+		string command = segments[0].Trim().ToUpperInvariant();
+		string argument = segments.Length > 1 ? segments[1].Trim() : string.Empty;
+
+		switch (command)
+		{
+			case "LIST":
+			{
+				List<PlayerData> players = new List<PlayerData>();
+
+				if (segments.Length < 2)
+				{
+					OnUpdatedPlayers?.Invoke(players);
+					break;
+				}
+
+				string[] entries = segments[1].Split("|");
+				foreach (string entry in entries)
+				{
+					string[] data = entry.Split(',');
+					players.Add(new PlayerData(data[0], bool.Parse(data[1]), bool.Parse(data[2])));
+				}
+
+				OnUpdatedPlayers?.Invoke(players);
+				break;
+			}
+		}
+	}
+
+	private void HandleGameMessage(string body)
+	{
+		if (string.IsNullOrWhiteSpace(body))
+		{
+			return;
+		}
+
+		string[] segments = body.Split(':');
+		string command = segments[0].Trim().ToUpperInvariant();
+		string argument = segments.Length > 1 ? segments[1].Trim() : string.Empty;
+
+		if (IsPlayer)
+		{
+			switch (command)
+			{
+				case "START":
+					bool isFirst = argument == "1" || argument.Equals("TRUE", StringComparison.OrdinalIgnoreCase);
+					OnGameStart?.Invoke(isFirst);
+					break;
+				case "WINS":
+					OnGameWin?.Invoke();
+					break;
+				case "LOSS":
+					OnGameLoss?.Invoke();
+					break;
+				case "DRAW":
+					OnGameDraw?.Invoke();
+					break;
+				case "TERMINATED":
+					OnGameTerminated?.Invoke();
+					break;
+				default:
+					GD.Print($"Unhandled GAME message: {body}");
+					break;
+			}
+		}
+		else // Regular observer/admin
+		{
+			switch (command)
+			{
+				case "WIN":
+					OnObserveWin?.Invoke(segments[1]);
+					break;
+				case "MOVE":
+					OnObserveMove?.Invoke(segments[1], int.Parse(segments[2]));
+					break;
+				case "DRAW":
+					OnObserveDraw?.Invoke();
+					break;
+				case "TERMINATED":
+					OnObserveTerminated?.Invoke();
+					break;
+				case "LIST":
+					List<MatchData> matches = new List<MatchData>();
+
+					if (segments.Length < 2)
+					{
+						OnUpdatedMatches?.Invoke(matches);
+						break;
+					}
+
+					string[] entries = segments[1].Split("|");
+					foreach (string entry in entries)
+					{
+						string[] data = entry.Split(',');
+						matches.Add(new MatchData(int.Parse(data[0]), data[1], data[2]));
+					}
+
+					OnUpdatedMatches?.Invoke(matches);
+					break;
+				case "WATCH":
+					string[] game = segments[2].Split(",");
+					CurrentObservingMatch = new MatchData(int.Parse(game[0]), game[1], game[2]);
+					OnWatchGameAck?.Invoke();
+					break;
+				default:
+					GD.Print($"Unhandled GAME message: {body}");
+					break;
+			}
+		}
+	}
+
+	private void HandleErrorMessage(string body)
+	{
+		if (string.IsNullOrWhiteSpace(body))
+		{
+			OnError?.Invoke("UNKNOWN", string.Empty);
+			return;
+		}
+
+		string[] segments = body.Split(':');
+		string code = segments.Length > 0 ? segments[0].Trim().ToUpperInvariant() : "UNKNOWN";
+		string detail = segments.Length > 1 ? string.Join(":", segments, 1, segments.Length - 1).Trim() : string.Empty;
+
+		OnError?.Invoke(code, detail);
+	}
+}

scripts/Connection.cs.uid

@@ -0,0 +1 @@
+uid://bslvhif47asuo

scripts/MatchData.cs

@@ -0,0 +1,13 @@
+public class MatchData
+{
+    public int matchId { get; private set; }
+    public string player1 { get; private set; }
+    public string player2 { get; private set; }
+
+    public MatchData(int matchId, string player1, string player2)
+    {
+        this.matchId = matchId;
+        this.player1 = player1;
+        this.player2 = player2;
+    }
+}

scripts/MatchData.cs.uid

@@ -0,0 +1 @@
+uid://c8o7yluqfu841

scripts/PlayerData.cs

@@ -0,0 +1,13 @@
+public class PlayerData
+{
+    public string username { get; private set; }
+    public bool isReady { get; private set; }
+    public bool isPlaying { get; private set; }
+
+    public PlayerData(string username, bool isReady, bool isPlaying)
+    {
+        this.username = username;
+        this.isReady = isReady;
+        this.isPlaying = isPlaying;
+    }
+}

scripts/PlayerData.cs.uid

@@ -0,0 +1 @@
+uid://bvsyrefvlnavh

scripts/button_medium.gd

@@ -0,0 +1,25 @@
+extends TextureButton
+
+@onready var label: Label = $Label
+
+const DEFAULT_COLOR = Color(0.0, 0.6087, 0.9773, 1.0);
+const HOVERED_COLOR = Color(0.29, 0.792, 1.0, 1.0);
+const CLICKED_COLOR = Color(0.0, 0.243, 0.447, 1.0);
+
+func onMouseEnter() -> void:
+	label.add_theme_color_override("font_color", HOVERED_COLOR);
+
+func onMouseExit() -> void:
+	if button_down:
+		label.add_theme_color_override("font_color", CLICKED_COLOR);
+	else:
+		label.add_theme_color_override("font_color", DEFAULT_COLOR);
+
+func onButtonDown() -> void:
+	label.add_theme_color_override("font_color", CLICKED_COLOR);
+
+func onButtonUp() -> void:
+	if is_hovered():
+		label.add_theme_color_override("font_color", HOVERED_COLOR);
+	else:
+		label.add_theme_color_override("font_color", DEFAULT_COLOR);

scripts/button_medium.gd.uid

@@ -0,0 +1 @@
+uid://frisgjvf17ym

scripts/create_join_room.gd

@@ -0,0 +1,14 @@
+extends Node2D
+
+@onready var join_game_button: TextureButton = $JoinGameButton
+@onready var create_game_button: TextureButton = $CreateGameButton
+
+# Called when the node enters the scene tree for the first time.
+func _ready() -> void:
+	(join_game_button.get_node("Label") as Label).text = "JOIN";
+	(create_game_button.get_node("Label") as Label).text = "HOST";
+
+
+# Called every frame. 'delta' is the elapsed time since the previous frame.
+func _process(delta: float) -> void:
+	pass

scripts/create_join_room.gd.uid

@@ -0,0 +1 @@
+uid://b1ogflafdte71

scripts/red_chip.gd

@@ -0,0 +1,12 @@
+extends RigidBody2D
+
+var color_ = "red";
+
+# Called when the node enters the scene tree for the first time.
+func _ready() -> void:
+	pass # Replace with function body.
+
+
+# Called every frame. 'delta' is the elapsed time since the previous frame.
+func _process(_delta: float) -> void:
+	pass

scripts/red_chip.gd.uid

@@ -0,0 +1 @@
+uid://dd5nu6037qsr0

scripts/yellow_chip.gd

@@ -0,0 +1,12 @@
+extends RigidBody2D
+
+var color_ = "yellow";
+
+# Called when the node enters the scene tree for the first time.
+func _ready() -> void:
+	pass # Replace with function body.
+
+
+# Called every frame. 'delta' is the elapsed time since the previous frame.
+func _process(_delta: float) -> void:
+	pass

scripts/yellow_chip.gd.uid

@@ -0,0 +1 @@
+uid://ddg7dv686sbrb

tsconfig.json

@@ -1,41 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": [
-        "./*"
-      ]
-    },
-    "target": "ES2017"
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}