misc: next 16

.editorconfig

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

.eslintrc.json

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

.gitattributes

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

.gitignore

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

AGENTS.md

@@ -0,0 +1,4 @@
+# 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

@@ -0,0 +1,112 @@
+# ============================================
+# 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 +0,0 @@
-# Connect4 Moderator - Observer

app/globals.css

@@ -0,0 +1,15 @@
+@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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,83 @@
+"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

@@ -0,0 +1,410 @@
+"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,
+    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") {
+      setGamePhase("connected");
+    }
+  }, [
+    role,
+    status,
+    router,
+    gamePhase,
+    shouldRedirectToConnect,
+    clearRedirectFlag,
+  ]);
+
+  useEffect(() => {
+    const unsubscribe = subscribe((msg: ParsedMessage) => {
+      switch (msg.type) {
+        case "CONNECT_ACK":
+        case "RECONNECT_ACK":
+          setGamePhase((prev) => (prev === "idle" ? "connected" : prev));
+          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]);
+
+  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

@@ -1,36 +0,0 @@
-[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

@@ -1,36 +0,0 @@
-[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

@@ -1,40 +0,0 @@
-[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=true
-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

@@ -1,40 +0,0 @@
-[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=true
-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

@@ -1,40 +0,0 @@
-[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=true
-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

@@ -1,40 +0,0 @@
-[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=true
-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/back.png.import

@@ -1,40 +0,0 @@
-[remap]
-
-importer="texture"
-type="CompressedTexture2D"
-uid="uid://2plbtkcttn7o"
-path="res://.godot/imported/back.png-73d0d71f353725c6ba9218045b96399b.ctex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://assets/sprites/back.png"
-dest_files=["res://.godot/imported/back.png-73d0d71f353725c6ba9218045b96399b.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=true
-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/bracket.png.import

@@ -1,40 +0,0 @@
-[remap]
-
-importer="texture"
-type="CompressedTexture2D"
-uid="uid://cdhuhbt2ws5sy"
-path="res://.godot/imported/bracket.png-31c6864ee533d160bca76e6c85f99c4e.ctex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://assets/sprites/bracket.png"
-dest_files=["res://.godot/imported/bracket.png-31c6864ee533d160bca76e6c85f99c4e.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=true
-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/button.png.import

@@ -1,40 +0,0 @@
-[remap]
-
-importer="texture"
-type="CompressedTexture2D"
-uid="uid://cftuywdnwvop0"
-path="res://.godot/imported/button.png-01faf565b773239305f3664038f20e61.ctex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://assets/sprites/button.png"
-dest_files=["res://.godot/imported/button.png-01faf565b773239305f3664038f20e61.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=true
-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/cancel.png.import

@@ -1,40 +0,0 @@
-[remap]
-
-importer="texture"
-type="CompressedTexture2D"
-uid="uid://stk7umv2ppss"
-path="res://.godot/imported/cancel.png-dcc5e0579b1b7ac5745b3b3804e100ab.ctex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://assets/sprites/cancel.png"
-dest_files=["res://.godot/imported/cancel.png-dcc5e0579b1b7ac5745b3b3804e100ab.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=true
-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/long_button.png.import

@@ -1,40 +0,0 @@
-[remap]
-
-importer="texture"
-type="CompressedTexture2D"
-uid="uid://bvind4dms08sd"
-path="res://.godot/imported/long_button.png-97ae4bec79a5441e5b3d9a75cbdf673f.ctex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://assets/sprites/long_button.png"
-dest_files=["res://.godot/imported/long_button.png-97ae4bec79a5441e5b3d9a75cbdf673f.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=true
-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/observe.png.import

@@ -1,40 +0,0 @@
-[remap]
-
-importer="texture"
-type="CompressedTexture2D"
-uid="uid://da13ksuf4vkqe"
-path="res://.godot/imported/observe.png-5a0a3c79f51f4f13ffdfce42e4ad04da.ctex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://assets/sprites/observe.png"
-dest_files=["res://.godot/imported/observe.png-5a0a3c79f51f4f13ffdfce42e4ad04da.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=true
-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/player.png.import

@@ -1,40 +0,0 @@
-[remap]
-
-importer="texture"
-type="CompressedTexture2D"
-uid="uid://b6iac21s36dku"
-path="res://.godot/imported/player.png-e1eaffe0873063c60a0d0b322e4d87d9.ctex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://assets/sprites/player.png"
-dest_files=["res://.godot/imported/player.png-e1eaffe0873063c60a0d0b322e4d87d9.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=true
-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/player_badge.png.import

@@ -1,40 +0,0 @@
-[remap]
-
-importer="texture"
-type="CompressedTexture2D"
-uid="uid://dta0orurmv5qj"
-path="res://.godot/imported/player_badge.png-63850d039b551977db5c0c02f6402465.ctex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://assets/sprites/player_badge.png"
-dest_files=["res://.godot/imported/player_badge.png-63850d039b551977db5c0c02f6402465.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=true
-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

@@ -0,0 +1,726 @@
+"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);
+          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

@@ -0,0 +1,252 @@
+"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

@@ -0,0 +1,74 @@
+"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

@@ -0,0 +1,181 @@
+"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

@@ -0,0 +1,21 @@
+"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

@@ -1,19 +0,0 @@
-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

@@ -0,0 +1,13 @@
+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

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

export_presets.cfg

@@ -1,491 +0,0 @@
-[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://dd7lvnidxr5ss"
-application/icon_interpolation=4
-application/bundle_identifier="com.abunchofknowitalls.connect4"
-application/signature=""
-application/app_category="Games"
-application/short_version=""
-application/version=""
-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=true
-dedicated_server=false
-custom_features=""
-export_filter="all_resources"
-include_filter=""
-exclude_filter=""
-export_path="../../Downloads/connect4-moderator-observer (win-x86_64).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="uid://dd7lvnidxr5ss"
-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="RPI Minds & Machines"
-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=true
-
-[preset.2]
-
-name="Windows (arm64)"
-platform="Windows Desktop"
-runnable=false
-advanced_options=true
-dedicated_server=false
-custom_features=""
-export_filter="all_resources"
-include_filter=""
-exclude_filter=""
-export_path="../../Downloads/connect4-moderator-observer (win-arm64).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="uid://dd7lvnidxr5ss"
-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=true
-
-[preset.3]
-
-name="Linux (x86_64)"
-platform="Linux"
-runnable=true
-advanced_options=true
-dedicated_server=false
-custom_features=""
-export_filter="all_resources"
-include_filter=""
-exclude_filter=""
-export_path="../../Downloads/connect4-moderator-observer (linux-x86_64).out"
-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=false
-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=true
-
-[preset.4]
-
-name="Linux (arm64)"
-platform="Linux"
-runnable=false
-advanced_options=true
-dedicated_server=false
-custom_features=""
-export_filter="all_resources"
-include_filter=""
-exclude_filter=""
-export_path="../../Downloads/connect4-moderator-observer (linux-arm64).out"
-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=false
-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=true

icon.png.import

@@ -1,40 +0,0 @@
-[remap]
-
-importer="texture"
-type="CompressedTexture2D"
-uid="uid://dd7lvnidxr5ss"
-path="res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.ctex"
-metadata={
-"vram_texture": false
-}
-
-[deps]
-
-source_file="res://icon.png"
-dest_files=["res://.godot/imported/icon.png-487276ed1e3a0c39cad0279d744ee560.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

lib/connection.tsx

@@ -0,0 +1,423 @@
+"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;
+  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 [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 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);
+        }
+
+        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,
+      isAdmin,
+      reconnectAttempts,
+      shouldRedirectToConnect,
+      becomePlayer,
+      authenticateAdmin,
+      connect,
+      disconnect,
+      send,
+      subscribe,
+      clearRedirectFlag,
+    }),
+    [
+      role,
+      wsUrl,
+      username,
+      status,
+      isInMatch,
+      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

@@ -0,0 +1,374 @@
+// ─── 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

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

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/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

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

package.json

@@ -0,0 +1,36 @@
+{
+  "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

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

project.godot

@@ -1,41 +0,0 @@
-; 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"
-config/version="0.1.2"
-run/main_scene="uid://dcx5nvs0pa7me"
-config/features=PackedStringArray("4.5", "C#", "Forward Plus")
-boot_splash/image="uid://dd7lvnidxr5ss"
-config/icon="uid://dd7lvnidxr5ss"
-
-[autoload]
-
-Connection="*res://scripts/Connection.cs"
-
-[display]
-
-window/size/viewport_width=1280
-window/size/viewport_height=720
-window/stretch/mode="canvas_items"
-window/stretch/aspect="expand"
-
-[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
-anti_aliasing/quality/msaa_2d=2
-anti_aliasing/quality/msaa_3d=2

scenes/board_screen.tscn

@@ -1,188 +0,0 @@
-[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="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"]
-[ext_resource type="Script" uid="uid://b3q4gq63qmx23" path="res://scripts/BackButton.cs" id="8_u1oi2"]
-
-[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"]
-script = ExtResource("1_b3w8x")
-
-[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="."]
-position = Vector2(0, 8)
-
-[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="."]
-position = Vector2(989, -64)
-
-[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
-script = ExtResource("8_u1oi2")
-
-[node name="Sprite2D" type="Sprite2D" parent="BracketButton"]
-position = Vector2(8, 8)
-texture = SubResource("AtlasTexture_glh1q")

scenes/bracket_view.tscn

@@ -1,85 +0,0 @@
-[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://da13ksuf4vkqe" path="res://assets/sprites/observe.png" id="2_mbqc8"]
-[ext_resource type="Texture2D" uid="uid://stk7umv2ppss" path="res://assets/sprites/cancel.png" id="3_as653"]
-[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")
-WatchButton = ExtResource("2_mbqc8")
-TerminateKickButton = ExtResource("3_as653")
-
-[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", "Label", "Timeout")]
-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")
-Label = NodePath("Label")
-Timeout = NodePath("HSlider")
-
-[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="Label" type="Label" parent="ColorRect/AdminControls"]
-layout_mode = 2
-text = "Wait To Move: 5.0s "
-
-[node name="HSlider" type="HSlider" parent="ColorRect/AdminControls"]
-custom_minimum_size = Vector2(256, 0)
-layout_mode = 2
-size_flags_vertical = 1
-min_value = 0.1
-max_value = 5.0
-step = 0.2
-value = 5.0
-tick_count = 25
-ticks_on_borders = true
-
-[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

@@ -1,44 +0,0 @@
-[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

@@ -1,24 +0,0 @@
-[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

@@ -1,18 +0,0 @@
-[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

@@ -1,15 +0,0 @@
-[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

@@ -1,61 +0,0 @@
-[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

@@ -1,18 +0,0 @@
-[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

@@ -1,18 +0,0 @@
-[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

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

scripts/AddressUI.cs.uid

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

scripts/AdminControls.cs

@@ -1,152 +0,0 @@
-using Godot;
-using System;
-using System.Collections.Generic;
-
-public partial class AdminControls : HBoxContainer
-{
-	[Export] public Button BecomeAdmin;
-	[Export] public Button StartTournament;
-	[Export] public Label Label;
-	[Export] public Slider Timeout;
-	
-	public override void _Ready()
-	{
-		Connection.Instance.OnBecomeAdmin += OnBecomeAdmin;
-		Connection.Instance.OnTournamentEnd += OnEndTournament;
-		
-		StartTournament.Pressed += StartTournamentCommand;
-		if (!Connection.Instance.IsAdmin || Connection.Instance.ActiveTournament)
-		{
-			StartTournament.Hide();
-		}
-
-		if (!Connection.Instance.IsAdmin)
-		{
-			Label.Hide();
-			Timeout.Hide();
-		}
-
-		Timeout.Value = Connection.Instance.CurrentWaitTimeout;
-		var time = Connection.Instance.CurrentWaitTimeout.ToString();
-		if (time.Length > 3)
-		{
-			time = time.Substring(0, 3);
-		}
-		
-		Label.Text = "Wait To Move: " + time + "s ";
-		Timeout.ValueChanged += value =>
-		{
-			Connection.Instance.SetTournamentWait((float)value);
-			var time = Connection.Instance.CurrentWaitTimeout.ToString();
-			if (time.Length > 3)
-			{
-				time = time.Substring(0, 3);
-			}
-			Label.Text = "Wait To Move: " + time + "s ";
-		};
-		
-		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();
-		}
-		Label.Show();
-		Timeout.Show();
-	}
-}

scripts/AdminControls.cs.uid

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

scripts/BackButton.cs

@@ -1,18 +0,0 @@
-using Godot;
-using System;
-
-public partial class BackButton : TextureButton
-{
-	private const string BRACKET_SCENE_PATH = "res://scenes/bracket_view.tscn";
-	
-	public override void _Pressed()
-	{
-		TransitionToBracket();
-		base._Pressed();
-	}
-	
-	private void TransitionToBracket()
-	{
-		GetTree().ChangeSceneToFile(BRACKET_SCENE_PATH);
-	}
-}

scripts/BackButton.cs.uid

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

scripts/BoardScreen.cs

@@ -1,236 +0,0 @@
-using Godot;
-using System;
-using System.Collections.Generic;
-
-public partial class BoardScreen : Node2D {
-	
-	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 const double MOVE_TIMEOUT_BEFORE_PLACE = 1.0f;
-
-	private double currentTimeout = 0.0f;
-
-	private PackedScene redChip;
-	private PackedScene ylwChip;
-
-	private Node2D player1Card; 
-	private Node2D player2Card;
-	private MatchData matchData;
-
-	private List<(string, int)> moves;
-
-	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;
-		
-		Connection.Instance.OnObserveWin += ObserveWin;
-		Connection.Instance.OnObserveDraw += ObserveDraw;
-		Connection.Instance.OnObserveTerminated += ObserveTerminated;
-		Connection.Instance.OnObserveMove += ObserveMove;
-		Connection.Instance.OnTournamentEnd += ShowTournamentScoreboard;
-	}
-
-	public override void _Process(double delta)
-	{
-		if (Connection.Instance.PreviousMoves.Count != 0 && currentTimeout <= 0.0f)
-		{
-			var move = Connection.Instance.PreviousMoves[0];
-			Connection.Instance.PreviousMoves.RemoveAt(0);
-			if (move.Item1 == matchData.player1)
-			{
-				spawnRed(move.Item2);
-			}
-			else
-			{
-				spawnYellow(move.Item2);
-			}
-
-			currentTimeout = MOVE_TIMEOUT_BEFORE_PLACE;
-		} 
-		else if (currentTimeout >= 0.0f)
-		{
-			currentTimeout -= delta;
-		}
-	}
-
-	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)
-	{
-		Connection.Instance.PreviousMoves.Add((username, column));
-	}
-
-	private void ObserveWin(string winner)
-	{
-		PopupMessage(winner + " wins!");
-	}
-	
-	private void ObserveDraw()
-	{
-		PopupMessage("Draw!");
-	}
-	
-	private void ObserveTerminated()
-	{
-		PopupMessage("Match Terminated");
-	}
-
-	private void PopupMessage(string message)
-	{
-		var popup = new Popup();
-		popup.AlwaysOnTop = true;
-		popup.PopupCentered();
-		popup.Size = new Vector2I(200, 100);
-		var text = new Label();
-		text.Text = message;
-		popup.AddChild(text);
-		text.GrowHorizontal = Control.GrowDirection.Both;
-		text.GrowVertical = Control.GrowDirection.Both;
-		text.HorizontalAlignment = HorizontalAlignment.Center;
-		text.VerticalAlignment = VerticalAlignment.Center;
-		text.AnchorsPreset = (int) Control.LayoutPreset.FullRect;
-		popup.InitialPosition = Window.WindowInitialPosition.CenterMainWindowScreen;
-		GetTree().Root.AddChild(popup);
-		popup.Show();
-		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);
-	}
-
-	/*
-	 * 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

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

scripts/BracketScene.cs

@@ -1,109 +0,0 @@
-using Godot;
-using System;
-using System.Collections.Generic;
-
-public partial class BracketScene : Control
-{
-	[Export] public Tree Players;
-	[Export] public Tree Matches;
-	[Export] public Texture2D WatchButton;
-	[Export] public Texture2D TerminateKickButton;
-	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;
-		Matches.ButtonClicked += TerminateGame;
-		
-		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, TerminateKickButton, 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, WatchButton, item.GetButtonCount(0), false, "Watch");
-			if (Connection.Instance.IsAdmin)
-			{
-				item.AddButton(0, TerminateKickButton, item.GetButtonCount(0), false, "Terminate");
-			}
-		}
-	}
-
-	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 TerminateGame(TreeItem item, long column, long id, long mouseButtonIndex)
-	{
-		if (mouseButtonIndex == 1 && column == 0 && id - 1 > 0 && _matchList[(int) id - 1] != null)
-		{
-			Connection.Instance.TerminateGame(_matchList[(int) id - 1].matchId);
-		} 
-	}
-
-	private void TransitionToBoard()
-	{
-		GetTree().ChangeSceneToFile(BOARD_SCENE_PATH);
-	}
-}

scripts/BracketScene.cs.uid

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

scripts/ConnectButtonUI.cs

@@ -1,23 +0,0 @@
-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

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

scripts/Connection.cs

@@ -1,513 +0,0 @@
-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 List<(string, int)> PreviousMoves { get; private set; } = new List<(string, int)>();
-	public double CurrentWaitTimeout { get; private set; } = 5.0;
-	
-	
-	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(int matchID)
-	{
-		if (!IsAdmin) return;
-		SendCommand("GAME", "TERMINATE:" + matchID);
-	}
-
-	public void SetTournamentWait(float waitTime)
-	{
-		if (!IsAdmin) return;
-		CurrentWaitTimeout = waitTime;
-		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;
-					SetTournamentWait(5.0f);
-					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":
-					CurrentObservingMatch = null;
-					PreviousMoves.Clear();
-					string[] activeMatchData = segments[2].Split("|");
-					if (activeMatchData.IsEmpty())
-					{
-						string[] matchData = segments[2].Split(',');
-						CurrentObservingMatch = new MatchData(int.Parse(matchData[0]), matchData[1], matchData[2]);
-					}
-					else
-					{
-						string[] matchData = activeMatchData[0].Split(',');
-						CurrentObservingMatch = new MatchData(int.Parse(matchData[0]), matchData[1], matchData[2]);
-						for (int i = 1; i < activeMatchData.Length; i++)
-						{
-							string[] moveData = activeMatchData[i].Split(',');
-							PreviousMoves.Add((moveData[0], int.Parse(moveData[1])));
-						}
-					}
-					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

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

scripts/MatchData.cs

@@ -1,13 +0,0 @@
-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

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

scripts/PlayerData.cs

@@ -1,13 +0,0 @@
-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

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

scripts/button_medium.gd

@@ -1,25 +0,0 @@
-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

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

scripts/create_join_room.gd

@@ -1,14 +0,0 @@
-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