@roster-lock/match-agent 0.1.0 → 0.2.0

package/client/src/bridge/hostBridge.ts

@@ -0,0 +1,149 @@
+import { RefObject, useEffect, useRef, useState } from "react";
+import { MessageBridge, waitForBridgeEvent } from "@roster-lock/utils";
+import {
+  MATCHMAKER_BRIDGE_PATHS,
+  InstallGameLauncherPluginRequest, InstallGameLauncherPluginResponse,
+  GetInstalledGameLauncherPluginsResponse,
+  GetIdentityResponse,
+  RequestSelectionRequest, RequestSelectionResponse,
+  UpdateGameLauncherSettingsRequest, UpdateGameLauncherSettingsResponse,
+  InitiateRelayEvent,
+} from "@roster-lock/types";
+import { UserKeyPair } from "@roster-lock/ts-client";
+import { listAvailableGameLaunchers } from "../api/matchAgent";
+import { PlayerSlot } from "../context/JoinSettingsContext";
+import { DownloadSession } from "../context/DownloadSessionContext";
+
+export type PendingLightbox = (
+  | { type: "install", pluginName: string, resolve: () => void }
+  | { type: "selection", rosterConfig: RequestSelectionRequest["rosterLockConfig"], numPlayers: number, resolve: (v: RequestSelectionResponse) => void, reject: (e: Error) => void }
+);
+
+// Host-side half of the matchmaker bridge protocol (see
+// core/types/src/v1/runtime/matchmaker-bridge) - one instance per mounted
+// <iframe>, built once the guest signals "ready" (mirrors the "wait for the
+// other side's bridge to come up" handshake @roster-lock/ts-client's
+// sync-dl.ws.ts uses over WebSocket, just over postMessage here).
+export function useHostBridge(args: {
+  iframeRef: RefObject<HTMLIFrameElement | null>,
+  iframeLoaded: boolean,
+  matchAgent: { url: string, authCode: string },
+  identityKeys: UserKeyPair,
+  machineId: string,
+  playerSlots: Array<PlayerSlot>,
+  onInitiateRelay: (session: DownloadSession) => void,
+}) {
+  const { iframeRef, iframeLoaded, matchAgent, identityKeys, machineId, playerSlots, onInitiateRelay } = args;
+
+  const [pendingLightbox, setPendingLightbox] = useState<PendingLightbox | null>(null);
+  const [connected, setConnected] = useState(false);
+  const [connectionError, setConnectionError] = useState(false);
+  const bridgeRef = useRef<MessageBridge | null>(null);
+  const pendingGameConfigRef = useRef<unknown>(undefined);
+  const pendingSelectionRef = useRef<Record<number, unknown> | null>(null);
+
+  // Stable across renders via refs, so the bridge's onRequest handlers
+  // always see current props without needing to be torn down/rebuilt.
+  const latest = useRef(args);
+  latest.current = args;
+
+  useEffect(() => {
+    if (!iframeLoaded) return;
+    setConnected(false);
+    setConnectionError(false);
+
+    const bridge = new MessageBridge((message) => {
+      iframeRef.current?.contentWindow?.postMessage(message, "*");
+    });
+    bridgeRef.current = bridge;
+
+    const onMessage = (event: MessageEvent) => {
+      if (event.source !== iframeRef.current?.contentWindow) return;
+      bridge.handleMessage(event.data).catch(() => {});
+    };
+    window.addEventListener("message", onMessage);
+
+    bridge.onRequest(MATCHMAKER_BRIDGE_PATHS.installGameLauncherPlugin, ({ pluginName }: InstallGameLauncherPluginRequest) => {
+      return new Promise<InstallGameLauncherPluginResponse>((resolve) => {
+        setPendingLightbox({ type: "install", pluginName, resolve: () => resolve({}) });
+      });
+    });
+
+    bridge.onRequest(MATCHMAKER_BRIDGE_PATHS.getInstalledGameLauncherPlugins, async (): Promise<GetInstalledGameLauncherPluginsResponse> => {
+      const runners = await listAvailableGameLaunchers(latest.current.matchAgent.url, latest.current.matchAgent.authCode);
+      return runners.map((r) => ({ id: r.pluginName, version: r.version, gameConfigSchema: r.gameConfigSchema }));
+    });
+
+    bridge.onRequest(MATCHMAKER_BRIDGE_PATHS.getIdentity, (): GetIdentityResponse => ({
+      publicKey: latest.current.identityKeys.publicKey,
+      machineId: latest.current.machineId,
+      playerCount: latest.current.playerSlots.length,
+    }));
+
+    bridge.onRequest(
+      MATCHMAKER_BRIDGE_PATHS.requestSelection,
+      ({ rosterLockConfig, numPlayers }: RequestSelectionRequest) => {
+        return new Promise<RequestSelectionResponse>((resolve, reject) => {
+          setPendingLightbox({
+            type: "selection",
+            rosterConfig: rosterLockConfig,
+            numPlayers,
+            resolve: (selection) => {
+              pendingSelectionRef.current = selection;
+              resolve(selection);
+            },
+            reject: (e) => reject(e),
+          });
+        });
+      }
+    );
+
+    bridge.onRequest(
+      MATCHMAKER_BRIDGE_PATHS.updateGameLauncherSettings,
+      ({ gameConfig }: UpdateGameLauncherSettingsRequest): UpdateGameLauncherSettingsResponse => {
+        pendingGameConfigRef.current = gameConfig;
+        return {};
+      }
+    );
+
+    bridge.onEvent(MATCHMAKER_BRIDGE_PATHS.initiateRelay, (payload: InitiateRelayEvent) => {
+      if (!pendingSelectionRef.current) return;
+      latest.current.onInitiateRelay({
+        relay: payload.relay,
+        rosterConfig: payload.rosterConfig,
+        gameLauncherPlugin: payload.gameLauncherPlugin,
+        gameConfig: pendingGameConfigRef.current,
+        playerSelections: pendingSelectionRef.current as DownloadSession["playerSelections"],
+        isHost: payload.isHost,
+        coordinator: payload.coordinator,
+      });
+    });
+
+    waitForBridgeEvent(bridge, MATCHMAKER_BRIDGE_PATHS.ready, 15_000)
+      .then(() => setConnected(true))
+      .catch(() => setConnectionError(true));
+
+    return () => {
+      window.removeEventListener("message", onMessage);
+      bridgeRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [iframeLoaded]);
+
+  const resolveInstallLightbox = () => {
+    if (pendingLightbox?.type === "install") pendingLightbox.resolve();
+    setPendingLightbox(null);
+  };
+
+  const resolveSelectionLightbox = (selection: RequestSelectionResponse) => {
+    if (pendingLightbox?.type === "selection") pendingLightbox.resolve(selection);
+    setPendingLightbox(null);
+  };
+
+  const cancelSelectionLightbox = () => {
+    if (pendingLightbox?.type === "selection") pendingLightbox.reject(new Error("cancelled"));
+    setPendingLightbox(null);
+  };
+
+  return { connected, connectionError, pendingLightbox, resolveInstallLightbox, resolveSelectionLightbox, cancelSelectionLightbox };
+}

package/client/src/components/GameLauncherSettingsForm.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from "react";
+import Form from "@rjsf/core";
+import validator from "@rjsf/validator-ajv8";
+import type { RJSFSchema } from "@rjsf/utils";
+import { useMatchAgent } from "../context/MatchAgentContext";
+import {
+  getGameLauncherSettings, setGameLauncherSettings, getGameLauncherVersion, updateGameLauncherBinary,
+  validateGameLauncherBinaryLocation, listAvailableGameLaunchers,
+} from "../api/matchAgent";
+
+// A schema with no declared properties renders nothing useful in rjsf - most
+// plugins (e.g. ikemen-go today) have nothing beyond binaryLocation, so this
+// is what most of the time skips rendering the form at all rather than
+// showing an empty box.
+function hasProperties(schema: unknown): schema is RJSFSchema {
+  return !!schema && typeof schema === "object" && !!(schema as RJSFSchema).properties
+    && Object.keys((schema as RJSFSchema).properties!).length > 0;
+}
+
+// binaryLocation/version/update form for one game-launcher plugin - shared by
+// pages/GameLauncher/Detail.tsx (the standalone settings route) and
+// components/InstallGameLauncherLightbox.tsx (the same form, right after a
+// fresh install, inside the lightbox the host opens for the
+// installGameLauncherPlugin bridge call).
+export function GameLauncherSettingsForm({ pluginName }: { pluginName: string }) {
+  const { settings } = useMatchAgent();
+  const [binaryLocation, setBinaryLocation] = useState("");
+  const [version, setVersion] = useState<{ local: { title: string }, supported: { title: string } } | null>(null);
+  // Set right after load/save, not just on-demand - so a bad folder is
+  // flagged before the user ever hits "Check version" or "Download / update"
+  // and gets a raw spawn/ENOENT-flavored error instead (see
+  // docs/v2/binary-location.md's Validation section). Left `undefined` while
+  // there's no binaryLocation to check at all, as opposed to `null` (never
+  // checked yet) or a real result.
+  const [validation, setValidation] = useState<{ valid: true } | { valid: false, message: string } | null>(null);
+  // The plugin's own per-machine settings beyond binaryLocation - schema
+  // comes from AvailableGameLauncher.localConfigSchema (listAvailableGameLaunchers),
+  // not from getGameLauncherSettings, since that route only ever returns the
+  // stored *value* (GameLauncherLocalSettings), never the plugin's schema.
+  const [localConfigSchema, setLocalConfigSchema] = useState<unknown>(null);
+  const [localConfig, setLocalConfig] = useState<unknown>(undefined);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const validate = async (location: string) => {
+    if(!location){
+      setValidation(null);
+      return;
+    }
+    try {
+      setValidation(await validateGameLauncherBinaryLocation(settings.url, settings.authCode, pluginName));
+    } catch (e) {
+      setValidation({ valid: false, message: (e as Error).message });
+    }
+  };
+
+  const load = () => {
+    setError(null);
+    Promise.all([
+      getGameLauncherSettings(settings.url, settings.authCode, pluginName),
+      listAvailableGameLaunchers(settings.url, settings.authCode),
+    ])
+      .then(([s, available]) => {
+        setBinaryLocation(s.binaryLocation ?? "");
+        setLocalConfig(s.localConfig);
+        setLocalConfigSchema(available.find((a) => a.pluginName === pluginName)?.localConfigSchema ?? null);
+        return validate(s.binaryLocation ?? "");
+      })
+      .catch((e) => setError(e.message));
+  };
+
+  useEffect(load, [pluginName, settings]);
+
+  const save = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await setGameLauncherSettings(settings.url, settings.authCode, pluginName, { binaryLocation, localConfig });
+      await validate(binaryLocation);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const checkVersion = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      setVersion(await getGameLauncherVersion(settings.url, settings.authCode, pluginName));
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const download = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await updateGameLauncherBinary(settings.url, settings.authCode, pluginName);
+      await checkVersion();
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="game-launcher-settings-form">
+      <label>
+        Binary location
+        <input value={binaryLocation} onChange={(e) => setBinaryLocation(e.target.value)} />
+      </label>
+      {hasProperties(localConfigSchema) && (
+        // Own submit button suppressed - localConfig just feeds into this
+        // component's own state via onChange, and goes out through the
+        // Save button below alongside binaryLocation, as one settings write.
+        <Form
+          schema={localConfigSchema}
+          formData={localConfig}
+          validator={validator}
+          onChange={(e) => setLocalConfig(e.formData)}
+          uiSchema={{ "ui:submitButtonOptions": { norender: true } }}
+        />
+      )}
+      <button type="button" disabled={busy} onClick={save}>Save</button>
+      <button type="button" disabled={busy || !binaryLocation} onClick={checkVersion}>Check version</button>
+      <button type="button" disabled={busy || !binaryLocation} onClick={download}>Download / update</button>
+      {validation && !validation.valid && <p className="error">{validation.message}</p>}
+      {version && (
+        <p>Local: {version.local.title} - Supported: {version.supported.title}</p>
+      )}
+      {error && <p className="error">{error}</p>}
+    </div>
+  );
+}

package/client/src/components/InstallGameLauncherLightbox.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { useMatchAgent } from "../context/MatchAgentContext";
+import { installGameLauncherPlugin } from "../api/matchAgent";
+import { GameLauncherSettingsForm } from "./GameLauncherSettingsForm";
+
+// Content for the Lightbox opened by the installGameLauncherPlugin bridge
+// request: installs the plugin package, then lets the user finish local
+// config (binaryLocation) with the same form the standalone
+// /game-launcher/:pluginName route uses, before resolving the bridge request.
+export function InstallGameLauncherLightbox({ pluginName, onDone }: { pluginName: string, onDone: () => void }) {
+  const { settings } = useMatchAgent();
+  const [installing, setInstalling] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    installGameLauncherPlugin(settings.url, settings.authCode, pluginName)
+      .catch((e) => setError((e as Error).message))
+      .finally(() => setInstalling(false));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pluginName]);
+
+  return (
+    <div className="page">
+      <h1>Install {pluginName}</h1>
+      {installing && <p>Installing...</p>}
+      {error && <p className="error">{error}</p>}
+      {!installing && <GameLauncherSettingsForm pluginName={pluginName} />}
+      <button type="button" onClick={onDone}>Done</button>
+    </div>
+  );
+}

package/client/src/components/Lightbox.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+// Generic overlay used by pages/MatchMaking to host whichever bridge request
+// is currently pending (installGameLauncherPlugin or requestSelection) -
+// rendered by the host shell, on top of the matchmaker <iframe>, never
+// inside it.
+export function Lightbox({ children, onClose }: { children: ReactNode, onClose?: () => void }) {
+  return (
+    <div className="lightbox-backdrop" onClick={onClose}>
+      <div className="lightbox-box" onClick={(e) => e.stopPropagation()}>
+        {children}
+      </div>
+    </div>
+  );
+}

package/client/src/components/RequireConnection.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { Navigate } from "react-router-dom";
+import { useMatchAgent } from "../context/MatchAgentContext";
+
+export function RequireConnection({ children }: { children: ReactNode }) {
+  const { connected } = useMatchAgent();
+  if (!connected) return <Navigate to="/connect" replace />;
+  return <>{children}</>;
+}

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

@@ -0,0 +1,36 @@
+import { RosterLockPiece } from "@roster-lock/types";
+
+export function PieceCard({ piece, selected, orderNumber, downloaded, cursored, disabled, onClick }: {
+  piece: RosterLockPiece,
+  selected: boolean,
+  orderNumber: number | undefined,
+  downloaded: boolean | undefined,
+  cursored: boolean,
+  disabled: boolean,
+  onClick: () => void,
+}) {
+  return (
+    <button
+      type="button"
+      className="piece-card"
+      onClick={onClick}
+      disabled={disabled && !selected}
+      data-selected={selected}
+      data-cursored={cursored}
+      title={piece.humanInfo.author ? `by ${piece.humanInfo.author}` : undefined}
+    >
+      <div className="piece-card-image">
+        {orderNumber !== undefined && <span className="piece-card-order-badge">{orderNumber}</span>}
+        {piece.humanInfo.image ? (
+          <img src={piece.humanInfo.image} alt={piece.humanInfo.name} />
+        ) : (
+          <span className="piece-card-placeholder">{piece.humanInfo.name.slice(0, 1).toUpperCase()}</span>
+        )}
+      </div>
+      <div className="piece-card-name">{piece.humanInfo.name}</div>
+      <div className="piece-card-status">
+        {downloaded === undefined ? "" : downloaded ? "Downloaded" : "Not downloaded"}
+      </div>
+    </button>
+  );
+}

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

@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react";
+import { RosterLockV1Config } from "@roster-lock/types";
+import { PieceTypePlan } from "./selectionPlan";
+import { PieceCard } from "./PieceCard";
+import { InputSource } from "../../context/JoinSettingsContext";
+import { useCursorInput } from "../../hooks/useCursorInput";
+import { listDownloadedPiecesFromConfig } from "@roster-lock/ts-client";
+
+export function PieceTypeSection({
+  rosterConfig, pieceType, plan, picks, onTogglePick, onReorderPick, inputSource, matchAgentUrl, matchAgentAuth,
+}: {
+  rosterConfig: RosterLockV1Config,
+  pieceType: string,
+  plan: Extract<PieceTypePlan, { kind: "pickable" }>,
+  picks: Array<string>,
+  onTogglePick: (pieceId: string) => void,
+  onReorderPick: (fromIndex: number, toIndex: number) => void,
+  inputSource: InputSource,
+  matchAgentUrl: string,
+  matchAgentAuth: string,
+}) {
+  const pieces = (rosterConfig.rosters[pieceType] ?? []).filter((p) => !plan.banList.includes(p.id));
+  const [downloaded, setDownloaded] = useState<Record<string, boolean>>({});
+  const [cursorIndex, setCursorIndex] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    listDownloadedPiecesFromConfig(
+      { version: 1, rosterConfig, pieceType }, { page: 0, limit: 500 }, matchAgentAuth, matchAgentUrl
+    ).then((rows) => {
+      if (cancelled) return;
+      const byLogic = new Set(rows.map((r) => r.version.logic));
+      const next: Record<string, boolean> = {};
+      for (const piece of pieces) next[piece.id] = byLogic.has(piece.version.logic);
+      setDownloaded(next);
+    }).catch(() => {});
+    return () => { cancelled = true; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pieceType]);
+
+  const atMax = picks.length >= plan.max;
+  const move = (delta: number) => setCursorIndex((i) => (i + delta + pieces.length) % Math.max(pieces.length, 1));
+  const confirm = () => {
+    const piece = pieces[cursorIndex];
+    if (piece) onTogglePick(piece.id);
+  };
+  useCursorInput(inputSource, pieces.length > 0, move, confirm);
+
+  const countLabel = plan.min === plan.max
+    ? `pick exactly ${plan.min}`
+    : plan.max === Number.POSITIVE_INFINITY
+      ? `pick ${plan.min}-any`
+      : `pick ${plan.min}-${plan.max}`;
+
+  const pieceById = new Map(pieces.map((piece) => [piece.id, piece]));
+
+  return (
+    <div className="piece-type-section">
+      <div className="piece-type-header">
+        <span className="piece-type-count">{countLabel} ({picks.length} picked)</span>
+      </div>
+      <div className="card-grid">
+        {pieces.map((piece, index) => {
+          const orderIndex = picks.indexOf(piece.id);
+          return (
+            <PieceCard
+              key={piece.id}
+              piece={piece}
+              selected={orderIndex !== -1}
+              orderNumber={orderIndex === -1 ? undefined : orderIndex + 1}
+              downloaded={downloaded[piece.id]}
+              cursored={index === cursorIndex}
+              disabled={atMax}
+              onClick={() => onTogglePick(piece.id)}
+            />
+          );
+        })}
+      </div>
+      {picks.length > 0 && (
+        <ol className="pick-order-list">
+          {picks.map((pieceId, index) => (
+            <li key={pieceId} className="pick-order-item">
+              <span className="pick-order-index">{index + 1}</span>
+              <span className="pick-order-name">{pieceById.get(pieceId)?.humanInfo.name ?? pieceId}</span>
+              <button
+                type="button"
+                className="pick-order-move"
+                disabled={index === 0}
+                onClick={() => onReorderPick(index, index - 1)}
+                aria-label="Move earlier"
+              >
+                ↑
+              </button>
+              <button
+                type="button"
+                className="pick-order-move"
+                disabled={index === picks.length - 1}
+                onClick={() => onReorderPick(index, index + 1)}
+                aria-label="Move later"
+              >
+                ↓
+              </button>
+              <button type="button" className="pick-order-remove" onClick={() => onTogglePick(pieceId)}>
+                Remove
+              </button>
+            </li>
+          ))}
+        </ol>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,31 @@
+// Piece-type tabs are shared across every player slot - switching a tab
+// swaps which piece type's grid is mounted for all slots at once, rather
+// than each slot owning its own tab state. The dot reflects whether every
+// slot's picks for that piece type currently satisfy its min/max, so
+// players can see at a glance which tabs still need attention before
+// Confirm unlocks (see SelectionBoard.allValid).
+export function PieceTypeTabs({ types, activeType, readyByType, onSelect }: {
+  types: Array<string>,
+  activeType: string,
+  readyByType: Record<string, boolean>,
+  onSelect: (pieceType: string) => void,
+}) {
+  if (types.length === 0) return null;
+
+  return (
+    <nav className="piece-type-tabs">
+      {types.map((pieceType) => (
+        <button
+          key={pieceType}
+          type="button"
+          className="piece-type-tab"
+          data-active={pieceType === activeType}
+          onClick={() => onSelect(pieceType)}
+        >
+          <span className="piece-type-tab-dot" data-ready={readyByType[pieceType] ?? false} aria-hidden="true" />
+          {pieceType}
+        </button>
+      ))}
+    </nav>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { RosterLockV1Config } from "@roster-lock/types";
+import { PlayerSlot } from "../../context/JoinSettingsContext";
+import { PieceTypePlan } from "./selectionPlan";
+import { PieceTypeSection } from "./PieceTypeSection";
+
+export function PlayerSelectionPanel({
+  rosterConfig, slot, pieceType, plan, picks, onTogglePick, onReorderPick, matchAgentUrl, matchAgentAuth,
+}: {
+  rosterConfig: RosterLockV1Config,
+  slot: PlayerSlot,
+  pieceType: string,
+  plan: Extract<PieceTypePlan, { kind: "pickable" }>,
+  picks: Array<string>,
+  onTogglePick: (pieceId: string) => void,
+  onReorderPick: (fromIndex: number, toIndex: number) => void,
+  matchAgentUrl: string,
+  matchAgentAuth: string,
+}) {
+  return (
+    <div className="player-selection-panel">
+      <div className="player-selection-header">
+        {slot.label}
+        <span className="player-selection-input">
+          {slot.input.type === "keyboard" ? "Keyboard" : `Gamepad ${slot.input.index + 1}`}
+        </span>
+      </div>
+      <PieceTypeSection
+        rosterConfig={rosterConfig}
+        pieceType={pieceType}
+        plan={plan}
+        picks={picks}
+        onTogglePick={onTogglePick}
+        onReorderPick={onReorderPick}
+        inputSource={slot.input}
+        matchAgentUrl={matchAgentUrl}
+        matchAgentAuth={matchAgentAuth}
+      />
+    </div>
+  );
+}