@roster-lock/match-agent 0.1.0 → 0.2.0

package/client/src/components/Selection/index.tsx

@@ -0,0 +1,147 @@
+import { useState, useMemo } from "react";
+import { RosterLockV1Config, UserSelection } from "@roster-lock/types";
+import { PlayerSlot } from "../../context/JoinSettingsContext";
+import { PlayerSelectionPanel } from "./PlayerSelectionPanel";
+import { PieceTypeTabs } from "./PieceTypeTabs";
+import { planForPieceType, buildUserSelection, PieceTypePlan } from "./selectionPlan";
+
+type PickablePlan = Extract<PieceTypePlan, { kind: "pickable" }>;
+
+// Each declared local player slot (see JoinSettingsContext) gets its own
+// panel, but only for the one piece type the shared tab bar has active -
+// this keeps the board from stacking every piece type for every slot into
+// one long scroll. Picks persist per slot/piece-type while a tab is
+// inactive, so switching tabs never loses work. Used inline by
+// pages/MatchMaking/Rooms/[roomId] once a room is ready to select in.
+export function SelectionBoard({
+  rosterConfig, playerSlots, matchAgentUrl, matchAgentAuth, onConfirm,
+}: {
+  rosterConfig: RosterLockV1Config,
+  playerSlots: Array<PlayerSlot>,
+  matchAgentUrl: string,
+  matchAgentAuth: string,
+  onConfirm: (playerSelections: Record<number, UserSelection>) => void,
+}) {
+  const [picksBySlot, setPicksBySlot] = useState<Record<string, Record<string, Array<string>>>>({});
+
+  const pieceTypePlans = useMemo(
+    () => Object.keys(rosterConfig.engine.pieceDefinitions).map((t) => [t, planForPieceType(rosterConfig, t)] as const),
+    [rosterConfig]
+  );
+
+  const pickableTypes = useMemo(
+    () => pieceTypePlans.filter((entry): entry is [string, PickablePlan] => entry[1].kind === "pickable"),
+    [pieceTypePlans]
+  );
+  const infoTypes = useMemo(
+    () => pieceTypePlans.filter(
+      (entry): entry is [string, Exclude<PieceTypePlan, PickablePlan>] => entry[1].kind !== "pickable"
+    ),
+    [pieceTypePlans]
+  );
+
+  const [activeType, setActiveType] = useState(() => pickableTypes[0]?.[0] ?? "");
+
+  const readyByType = useMemo(() => {
+    const result: Record<string, boolean> = {};
+    for (const [pieceType, plan] of pickableTypes) {
+      result[pieceType] = playerSlots.every((slot) => {
+        const count = (picksBySlot[slot.id]?.[pieceType] ?? []).length;
+        return count >= plan.min && count <= plan.max;
+      });
+    }
+    return result;
+  }, [pickableTypes, picksBySlot, playerSlots]);
+
+  const togglePick = (slotId: string, pieceType: string, pieceId: string) => {
+    setPicksBySlot((prev) => {
+      const slotPicks = prev[slotId] ?? {};
+      const current = slotPicks[pieceType] ?? [];
+      const plan = pickableTypes.find(([t]) => t === pieceType)?.[1];
+      let next: Array<string>;
+      if (current.includes(pieceId)) {
+        next = current.filter((id) => id !== pieceId);
+      } else if (plan && current.length >= plan.max) {
+        next = current;
+      } else {
+        next = [...current, pieceId];
+      }
+      return { ...prev, [slotId]: { ...slotPicks, [pieceType]: next } };
+    });
+  };
+
+  const reorderPick = (slotId: string, pieceType: string, fromIndex: number, toIndex: number) => {
+    setPicksBySlot((prev) => {
+      const slotPicks = prev[slotId] ?? {};
+      const current = slotPicks[pieceType] ?? [];
+      if (toIndex < 0 || toIndex >= current.length) return prev;
+      const next = [...current];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(toIndex, 0, moved);
+      return { ...prev, [slotId]: { ...slotPicks, [pieceType]: next } };
+    });
+  };
+
+  const allValid = pickableTypes.every(([pieceType]) => readyByType[pieceType]);
+  const pendingTypes = pickableTypes.filter(([pieceType]) => !readyByType[pieceType]).map(([pieceType]) => pieceType);
+  const activePlan = pickableTypes.find(([t]) => t === activeType)?.[1];
+
+  const handleConfirm = () => {
+    const result: Record<number, UserSelection> = {};
+    playerSlots.forEach((slot, index) => {
+      result[index] = buildUserSelection(rosterConfig, picksBySlot[slot.id] ?? {});
+    });
+    onConfirm(result);
+  };
+
+  return (
+    <div className="selection-board">
+      {infoTypes.length > 0 && (
+        <div className="selection-board-info">
+          {infoTypes.map(([pieceType, plan]) => (
+            <span key={pieceType} className="piece-type-info-chip">
+              {pieceType}: {plan.kind === "auto"
+                ? (plan.reason === "mandatory" ? "included automatically" : plan.reason)
+                : `${plan.configType} (not user-selectable)`}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <PieceTypeTabs
+        types={pickableTypes.map(([pieceType]) => pieceType)}
+        activeType={activeType}
+        readyByType={readyByType}
+        onSelect={setActiveType}
+      />
+
+      {activePlan && (
+        <div className="selection-board-panels">
+          {playerSlots.map((slot) => (
+            <PlayerSelectionPanel
+              key={slot.id}
+              rosterConfig={rosterConfig}
+              slot={slot}
+              pieceType={activeType}
+              plan={activePlan}
+              picks={picksBySlot[slot.id]?.[activeType] ?? []}
+              onTogglePick={(pieceId) => togglePick(slot.id, activeType, pieceId)}
+              onReorderPick={(fromIndex, toIndex) => reorderPick(slot.id, activeType, fromIndex, toIndex)}
+              matchAgentUrl={matchAgentUrl}
+              matchAgentAuth={matchAgentAuth}
+            />
+          ))}
+        </div>
+      )}
+
+      <div className="selection-board-footer">
+        {!allValid && (
+          <span className="selection-board-hint">Still needs: {pendingTypes.join(", ")}</span>
+        )}
+        <button type="button" disabled={!allValid} onClick={handleConfirm}>
+          Confirm Selection
+        </button>
+      </div>
+    </div>
+  );
+}

package/client/src/components/Selection/selectionPlan.ts

@@ -0,0 +1,75 @@
+import { RosterLockV1Config, SelectedPiece, UserSelection } from "@roster-lock/types";
+
+// Ported from examples/full-local/game/game-pwa/src/game/selection.ts
+// (itself ported from game-headless/src/steps/0-select.ts's resolvePiece) -
+// this app needs the same plan/resolve/build logic, just run once per local
+// player slot instead of once for the whole machine.
+export function resolvePiece(
+  rosterConfig: RosterLockV1Config, pieceType: string, pieceId: string
+): SelectedPiece {
+  const definition = rosterConfig.engine.pieceDefinitions[pieceType];
+  if (!definition) throw new Error(`Missing piece definition for ${pieceType}`);
+  const available = rosterConfig.rosters[pieceType];
+  if (!available) throw new Error(`Missing roster for ${pieceType}`);
+  const item = available.find((p) => p.id === pieceId);
+  if (!item) throw new Error(`Missing piece ${pieceId} in roster for ${pieceType}`);
+
+  const selection: SelectedPiece = { id: item.id, required: {} };
+  for (const requirePieceType of definition.requires) {
+    const requireDef = item.requiredPieces[requirePieceType];
+    if (!requireDef) {
+      throw new Error(`Piece ${item.id} is missing required piece type ${requirePieceType}`);
+    }
+    selection.required[requirePieceType] = {
+      mandatory: requireDef.expected.map((expectedId) => resolvePiece(rosterConfig, requirePieceType, expectedId)),
+      selectable: [],
+    };
+  }
+  return selection;
+}
+
+export type PieceTypePlan = (
+  | { kind: "auto"; reason: "mandatory" | "on-demand" | "unselectable" }
+  | { kind: "unsupported"; configType: "preselected" | "game-controlled" }
+  | { kind: "pickable"; min: number; max: number; banList: Array<string> }
+);
+
+export function planForPieceType(rosterConfig: RosterLockV1Config, pieceType: string): PieceTypePlan {
+  const definition = rosterConfig.engine.pieceDefinitions[pieceType];
+  if (definition.selectionStrategy === "mandatory") return { kind: "auto", reason: "mandatory" };
+  if (definition.selectionStrategy === "on demand") return { kind: "auto", reason: "on-demand" };
+
+  const selectionConfig = rosterConfig.selection.piece[pieceType];
+  if (!selectionConfig) throw new Error(`Missing selection config for ${pieceType}`);
+  if (selectionConfig.type === "preselected") return { kind: "unsupported", configType: "preselected" };
+  if (selectionConfig.type === "game-controlled") return { kind: "unsupported", configType: "game-controlled" };
+  if (selectionConfig.type === "unselectable") return { kind: "auto", reason: "unselectable" };
+
+  const validation = selectionConfig.validation;
+  const count = validation?.count ?? 1;
+  let min: number;
+  let max: number;
+  if (count === "*") {
+    min = 1;
+    max = Number.POSITIVE_INFINITY;
+  } else if (Array.isArray(count)) {
+    min = count[0];
+    max = count[1] === "*" ? Number.POSITIVE_INFINITY : count[1];
+  } else {
+    min = count;
+    max = count;
+  }
+
+  return { kind: "pickable", min, max, banList: validation?.banList ?? [] };
+}
+
+export function buildUserSelection(
+  rosterConfig: RosterLockV1Config,
+  picks: Record<string, Array<string>>,
+): UserSelection {
+  const selection: UserSelection = {};
+  for (const [pieceType, pieceIds] of Object.entries(picks)) {
+    selection[pieceType] = pieceIds.map((id) => resolvePiece(rosterConfig, pieceType, id));
+  }
+  return selection;
+}

package/client/src/context/DownloadSessionContext.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext, useState, useCallback, ReactNode } from "react";
+import { RosterLockV1Config, UserSelection } from "@roster-lock/types";
+
+// What /download needs to run the sync-dl protocol, handed off by
+// bridge/hostBridge.ts's initiateRelay handler once whatever matchmaker is
+// loaded in /match-making's <iframe> hands off a relay room. Kept as its own
+// context (not folded into the bridge hook's state) so /download stays
+// reusable regardless of which matchmaker produced the session.
+export type DownloadSession = {
+  relay: { url: string, roomId: string },
+  rosterConfig: RosterLockV1Config,
+  gameLauncherPlugin: string,
+  gameConfig: unknown,
+  playerSelections: Record<number, UserSelection>,
+  // Which side of a direct-tcp connection this machine is.
+  isHost: boolean,
+  // A direct-tcp game launcher's rendezvous coordinator address, resolved by
+  // the matchmaker the same way it resolves `relay` (see
+  // core/types's InitiateRelayEvent and
+  // docs/v2/ikemen-go/game-coordinator.md) - null for game launchers that
+  // don't use one.
+  coordinator: { host: string, port: number } | null,
+};
+
+type DownloadSessionContextValue = {
+  session: DownloadSession | null,
+  setSession: (session: DownloadSession) => void,
+  clearSession: () => void,
+};
+
+const DownloadSessionContext = createContext<DownloadSessionContextValue | null>(null);
+
+export function DownloadSessionProvider({ children }: { children: ReactNode }) {
+  const [session, setSessionState] = useState<DownloadSession | null>(null);
+  const setSession = useCallback((s: DownloadSession) => setSessionState(s), []);
+  const clearSession = useCallback(() => setSessionState(null), []);
+  return (
+    <DownloadSessionContext.Provider value={{ session, setSession, clearSession }}>
+      {children}
+    </DownloadSessionContext.Provider>
+  );
+}
+
+export function useDownloadSession(): DownloadSessionContextValue {
+  const ctx = useContext(DownloadSessionContext);
+  if (!ctx) throw new Error("useDownloadSession must be used within a DownloadSessionProvider");
+  return ctx;
+}

package/client/src/context/IdentityContext.tsx

@@ -0,0 +1,53 @@
+import { createContext, useContext, useState, useEffect, useRef, ReactNode } from "react";
+import { generateKeyPair, UserKeyPair } from "@roster-lock/ts-client";
+
+const STORAGE_KEY = "match-agent-client:identity";
+
+type StoredIdentity = { machineId: string, keys: UserKeyPair };
+
+function loadStored(): StoredIdentity | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+
+type IdentityContextValue = {
+  machineId: string,
+  keys: UserKeyPair,
+};
+
+const IdentityContext = createContext<IdentityContextValue | null>(null);
+
+export function IdentityProvider({ children }: { children: ReactNode }) {
+  const [identity, setIdentity] = useState<StoredIdentity | null>(loadStored);
+  const generating = useRef(false);
+
+  useEffect(() => {
+    if (identity || generating.current) return;
+    generating.current = true;
+    generateKeyPair().then((keys) => {
+      const next = { machineId: crypto.randomUUID(), keys };
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+      setIdentity(next);
+    });
+  }, [identity]);
+
+  // Blocks children until the one-time (sub-second) keypair generation
+  // completes, rather than threading a loading state through every consumer.
+  if (!identity) return null;
+
+  return (
+    <IdentityContext.Provider value={{ machineId: identity.machineId, keys: identity.keys }}>
+      {children}
+    </IdentityContext.Provider>
+  );
+}
+
+export function useIdentity(): IdentityContextValue {
+  const ctx = useContext(IdentityContext);
+  if (!ctx) throw new Error("useIdentity must be used within an IdentityProvider");
+  return ctx;
+}

package/client/src/context/JoinSettingsContext.tsx

@@ -0,0 +1,83 @@
+import { createContext, useContext, useState, useCallback, ReactNode } from "react";
+
+export type InputSource = (
+  | { type: "keyboard" }
+  | { type: "gamepad", index: number }
+);
+
+export type PlayerSlot = {
+  id: string,
+  label: string,
+  input: InputSource,
+};
+
+const STORAGE_KEY = "match-agent-client:join-settings";
+
+function defaultSlots(): Array<PlayerSlot> {
+  return [{ id: crypto.randomUUID(), label: "Player 1", input: { type: "keyboard" } }];
+}
+
+function loadSlots(): Array<PlayerSlot> {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return defaultSlots();
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) && parsed.length > 0 ? parsed : defaultSlots();
+  } catch {
+    return defaultSlots();
+  }
+}
+
+type JoinSettingsContextValue = {
+  playerSlots: Array<PlayerSlot>,
+  addSlot: () => void,
+  removeSlot: (id: string) => void,
+  setSlotInput: (id: string, input: InputSource) => void,
+  setSlotLabel: (id: string, label: string) => void,
+};
+
+const JoinSettingsContext = createContext<JoinSettingsContextValue | null>(null);
+
+export function JoinSettingsProvider({ children }: { children: ReactNode }) {
+  const [playerSlots, setPlayerSlots] = useState<Array<PlayerSlot>>(loadSlots);
+
+  const persist = useCallback((next: Array<PlayerSlot>) => {
+    setPlayerSlots(next);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+  }, []);
+
+  // Only one slot may use the keyboard at a time - a browser only exposes
+  // one keyboard, so there's no way to distinguish which slot a keypress was
+  // meant for if more than one claims it. Additional local players need a
+  // gamepad (see useGamepads/JoinSettings page).
+  const addSlot = useCallback(() => {
+    persist([...playerSlots, {
+      id: crypto.randomUUID(), label: `Player ${playerSlots.length + 1}`, input: { type: "gamepad", index: 0 },
+    }]);
+  }, [playerSlots, persist]);
+
+  const removeSlot = useCallback((id: string) => {
+    const next = playerSlots.filter((s) => s.id !== id);
+    persist(next.length > 0 ? next : defaultSlots());
+  }, [playerSlots, persist]);
+
+  const setSlotInput = useCallback((id: string, input: InputSource) => {
+    persist(playerSlots.map((s) => (s.id === id ? { ...s, input } : s)));
+  }, [playerSlots, persist]);
+
+  const setSlotLabel = useCallback((id: string, label: string) => {
+    persist(playerSlots.map((s) => (s.id === id ? { ...s, label } : s)));
+  }, [playerSlots, persist]);
+
+  return (
+    <JoinSettingsContext.Provider value={{ playerSlots, addSlot, removeSlot, setSlotInput, setSlotLabel }}>
+      {children}
+    </JoinSettingsContext.Provider>
+  );
+}
+
+export function useJoinSettings(): JoinSettingsContextValue {
+  const ctx = useContext(JoinSettingsContext);
+  if (!ctx) throw new Error("useJoinSettings must be used within a JoinSettingsProvider");
+  return ctx;
+}

package/client/src/context/MatchAgentContext.tsx

@@ -0,0 +1,85 @@
+import { createContext, useContext, useState, useCallback, ReactNode } from "react";
+import { validateAuthCode } from "@roster-lock/ts-client";
+
+export type MatchAgentSettings = {
+  url: string,
+  authCode: string,
+};
+
+const DEFAULT_SETTINGS: MatchAgentSettings = {
+  url: "http://localhost:58732",
+  authCode: "",
+};
+
+const STORAGE_KEY = "match-agent-client:match-agent";
+
+function loadSettings(): MatchAgentSettings {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return DEFAULT_SETTINGS;
+    return { ...DEFAULT_SETTINGS, ...JSON.parse(raw) };
+  } catch {
+    return DEFAULT_SETTINGS;
+  }
+}
+
+type MatchAgentContextValue = {
+  settings: MatchAgentSettings,
+  connected: boolean,
+  connecting: boolean,
+  error: string | null,
+  updateSettings: (settings: MatchAgentSettings) => void,
+  connect: (overrideSettings?: MatchAgentSettings) => Promise<boolean>,
+};
+
+const MatchAgentContext = createContext<MatchAgentContextValue | null>(null);
+
+export function MatchAgentProvider({ children }: { children: ReactNode }) {
+  const [settings, setSettings] = useState<MatchAgentSettings>(loadSettings);
+  // Deliberately not persisted, same reasoning as game-pwa's GameSessionContext:
+  // a stale/rotated auth code should always be re-checked on load, not assumed.
+  const [connected, setConnected] = useState(false);
+  const [connecting, setConnecting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const updateSettings = useCallback((next: MatchAgentSettings) => {
+    setSettings(next);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    setConnected(false);
+  }, []);
+
+  // Takes an optional override rather than always reading `settings` from
+  // this closure - a caller that just updated settings via updateSettings()
+  // and immediately calls connect() in the same handler (see ConnectPage)
+  // would otherwise race the state update and connect with the *previous*
+  // settings, since this useCallback only refreshes on the next render.
+  const connect = useCallback(async (overrideSettings?: MatchAgentSettings) => {
+    const target = overrideSettings ?? settings;
+    setConnecting(true);
+    setError(null);
+    try {
+      const ok = Boolean(await validateAuthCode(target.authCode, target.url));
+      setConnected(ok);
+      if (!ok) setError("Auth code was rejected by match-agent");
+      return ok;
+    } catch (e) {
+      setConnected(false);
+      setError((e as Error).message);
+      return false;
+    } finally {
+      setConnecting(false);
+    }
+  }, [settings]);
+
+  return (
+    <MatchAgentContext.Provider value={{ settings, connected, connecting, error, updateSettings, connect }}>
+      {children}
+    </MatchAgentContext.Provider>
+  );
+}
+
+export function useMatchAgent(): MatchAgentContextValue {
+  const ctx = useContext(MatchAgentContext);
+  if (!ctx) throw new Error("useMatchAgent must be used within a MatchAgentProvider");
+  return ctx;
+}

package/client/src/hooks/useCursorInput.ts

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from "react";
+import { InputSource } from "../context/JoinSettingsContext";
+
+const AXIS_THRESHOLD = 0.5;
+const DPAD_LEFT = 14;
+const DPAD_RIGHT = 15;
+const CONFIRM_BUTTON = 0;
+
+// Drives one player slot's cursor over a grid of `itemCount` cards: arrow
+// keys for a keyboard-assigned slot, d-pad/left-stick + button 0 for a
+// gamepad-assigned one. Edge-detected (fires once per press, not once per
+// frame) so a held direction doesn't spam onMove. Plain mouse clicks on a
+// card work regardless of this hook - it's an addition on top of that, not
+// a replacement for it (see components/Selection).
+export function useCursorInput(
+  source: InputSource, enabled: boolean, onMove: (delta: number) => void, onConfirm: () => void
+) {
+  const heldRef = useRef<{ left: boolean, right: boolean, confirm: boolean }>({
+    left: false, right: false, confirm: false,
+  });
+
+  useEffect(() => {
+    if (!enabled || source.type !== "keyboard") return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft") onMove(-1);
+      else if (e.key === "ArrowRight") onMove(1);
+      else if (e.key === "Enter" || e.key === " ") onConfirm();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [enabled, source, onMove, onConfirm]);
+
+  useEffect(() => {
+    if (!enabled || source.type !== "gamepad") return;
+    let frame: number;
+    const poll = () => {
+      const pad = navigator.getGamepads?.()[source.index];
+      if (pad) {
+        const axis = pad.axes[0] ?? 0;
+        const left = axis < -AXIS_THRESHOLD || Boolean(pad.buttons[DPAD_LEFT]?.pressed);
+        const right = axis > AXIS_THRESHOLD || Boolean(pad.buttons[DPAD_RIGHT]?.pressed);
+        const confirm = Boolean(pad.buttons[CONFIRM_BUTTON]?.pressed);
+
+        if (left && !heldRef.current.left) onMove(-1);
+        if (right && !heldRef.current.right) onMove(1);
+        if (confirm && !heldRef.current.confirm) onConfirm();
+
+        heldRef.current = { left, right, confirm };
+      }
+      frame = requestAnimationFrame(poll);
+    };
+    frame = requestAnimationFrame(poll);
+    return () => cancelAnimationFrame(frame);
+  }, [enabled, source, onMove, onConfirm]);
+}

package/client/src/hooks/useGamepads.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export type ConnectedGamepad = { index: number, id: string };
+
+// Polls navigator.getGamepads() rather than relying solely on
+// gamepadconnected/gamepaddisconnected events - Chrome only fires those
+// after a button press on some platforms, and polling is what
+// useCursorInput needs anyway to read stick/button state every frame.
+export function useGamepads(): Array<ConnectedGamepad> {
+  const [gamepads, setGamepads] = useState<Array<ConnectedGamepad>>([]);
+
+  useEffect(() => {
+    let frame: number;
+    const poll = () => {
+      const pads = navigator.getGamepads?.() ?? [];
+      const connected: Array<ConnectedGamepad> = [];
+      for (const pad of pads) {
+        if (pad) connected.push({ index: pad.index, id: pad.id });
+      }
+      setGamepads((prev) => {
+        if (prev.length === connected.length && prev.every((p, i) => p.index === connected[i].index)) return prev;
+        return connected;
+      });
+      frame = requestAnimationFrame(poll);
+    };
+    frame = requestAnimationFrame(poll);
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
+  return gamepads;
+}

package/client/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./styles/global.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/client/src/pages/Connect/index.tsx

@@ -0,0 +1,46 @@
+import { FormEvent, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useMatchAgent } from "../../context/MatchAgentContext";
+
+export function ConnectPage({ autoSubmit }: { autoSubmit?: boolean }) {
+  const { settings, connecting, error, updateSettings, connect } = useMatchAgent();
+  const [url, setUrl] = useState(settings.url);
+  const [authCode, setAuthCode] = useState(settings.authCode);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    const next = { url, authCode };
+    updateSettings(next);
+    const ok = await connect(next);
+  };
+
+  useEffect(()=>{
+    if(!autoSubmit) return;
+    const next = { url, authCode };
+    updateSettings(next);
+    connect(next);
+  }, [autoSubmit])
+
+  if(autoSubmit && (connecting || !error)) return null;
+
+  return (
+    <div className="page">
+      <h1>Connect to Match Agent</h1>
+      <p>Point this app at the match-agent server running on this machine.</p>
+      <form onSubmit={handleSubmit}>
+        <label>
+          Match Agent URL
+          <input value={url} onChange={(e) => setUrl(e.target.value)} />
+        </label>
+        <label>
+          Auth Code
+          <input type="password" value={authCode} onChange={(e) => setAuthCode(e.target.value)} />
+        </label>
+        <button type="submit" disabled={connecting}>
+          {connecting ? "Connecting..." : "Connect"}
+        </button>
+      </form>
+      {error && <p className="error">{error}</p>}
+    </div>
+  );
+}