@roster-lock/match-agent 0.1.0 → 0.2.0

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

@@ -0,0 +1,175 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { syncDownloadOverWebSocket, getMachines } from "@roster-lock/ts-client";
+import {
+  ROSTERLOCK_DOWNLOAD_STATE, RosterLockDownloadUpdate, RosterLockV1SyncDLRequestUserToClient,
+  RosterLockV1SyncDLResult,
+} from "@roster-lock/types";
+import { useIdentity } from "../../context/IdentityContext";
+import { useMatchAgent } from "../../context/MatchAgentContext";
+import { useDownloadSession } from "../../context/DownloadSessionContext";
+import { startGameLauncher } from "../../api/matchAgent";
+
+type PieceProgress = { pieceType: string, status: ROSTERLOCK_DOWNLOAD_STATE, progress: number, error?: string };
+type MachineRow = { machineId: string, publicKey: string, displayName: string, playerCount: number, connected: boolean };
+
+// Reused by every matchmaking algorithm, not just /match-making/rooms - once
+// a match maker hands off a relay room, this is the only step left before
+// starting the game, regardless of how the room/opponent was found. See
+// examples/full-local/game/game-pwa/src/pages/Download/index.tsx, which this
+// is ported from, generalized from "one machine's own piece progress" to
+// also list which machines in the room are connected.
+export function DownloadPage() {
+  const navigate = useNavigate();
+  const identity = useIdentity();
+  const matchAgent = useMatchAgent();
+  const { session, clearSession } = useDownloadSession();
+
+  const [machines, setMachines] = useState<Array<MachineRow>>([]);
+  const [downloadResult, setDownloadResult] = useState<RosterLockV1SyncDLResult | null>(null);
+  const [roomState, setRoomState] = useState<string | null>(null);
+  const [pieces, setPieces] = useState<Record<string, PieceProgress>>({});
+  const [error, setError] = useState<string | null>(null);
+  const [starting, setStarting] = useState(false);
+  const startedDownload = useRef(false);
+  const startedGame = useRef(false);
+
+  useEffect(() => {
+    if (session) return;
+    navigate("/match-making");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (startedDownload.current) return;
+    if (!session) return;
+    startedDownload.current = true;
+
+    const request: RosterLockV1SyncDLRequestUserToClient = {
+      version: 1,
+      relay: session.relay,
+      machine: { machineId: identity.machineId, keys: identity.keys },
+      rosterConfig: session.rosterConfig,
+      playerSelections: session.playerSelections,
+    };
+
+    Promise.all([
+      getMachines({ machine: request.machine, relay: request.relay })
+        .catch((e) => { throw new Error(`getMachines (relay ${request.relay.url}) failed: ${(e as Error).message}`); }),
+      syncDownloadOverWebSocket(
+        request,
+        matchAgent.settings.authCode,
+        {
+          onState: (state) => setRoomState(state),
+          onDownloadProgress: (update: RosterLockDownloadUpdate) => {
+            if (update.type === ROSTERLOCK_DOWNLOAD_STATE.downloadFullFailure) {
+              setError(update.error);
+              return;
+            }
+            if (update.type === ROSTERLOCK_DOWNLOAD_STATE.downloadAllComplete) return;
+            const key = `${update.pieceType}:${update.pieceVersions.logic}:${update.pieceVersions.media}`;
+            setPieces((prev) => {
+              const existing = prev[key];
+              const progress = update.type === ROSTERLOCK_DOWNLOAD_STATE.downloadProgress
+                ? update.progress
+                : update.type === ROSTERLOCK_DOWNLOAD_STATE.downloadFinished ? 100 : (existing?.progress ?? 0);
+              return {
+                ...prev,
+                [key]: {
+                  pieceType: update.pieceType,
+                  status: update.type,
+                  progress,
+                  error: update.type === ROSTERLOCK_DOWNLOAD_STATE.downloadFailure ? update.error : undefined,
+                },
+              };
+            });
+          },
+        },
+        matchAgent.settings.url,
+      ).catch((e) => { throw new Error(`syncDownloadOverWebSocket (match-agent ${matchAgent.settings.url}) failed: ${(e as Error).message}`); }),
+    ])
+      .then(([users, result]) => {
+        setMachines(users.map((u) => ({
+          machineId: u.machineId, publicKey: u.publicKey, displayName: u.displayName,
+          playerCount: u.playerCount, connected: u.connected,
+        })));
+        setDownloadResult(result);
+      })
+      .catch((e) => setError((e as Error).message));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session]);
+
+  const pieceEntries = Object.entries(pieces);
+  const overall = pieceEntries.length
+    ? pieceEntries.reduce((sum, [, p]) => sum + p.progress, 0) / pieceEntries.length
+    : 0;
+  const downloadComplete = pieceEntries.length > 0 && pieceEntries.every(([, p]) => p.progress >= 100);
+
+  // Starts automatically as soon as the download finishes - no separate
+  // "Start Match" click needed. Guarded so it only ever attempts once, same
+  // as the download-kickoff effect above.
+  useEffect(() => {
+    if (startedGame.current) return;
+    if (!session || !downloadComplete || !downloadResult) return;
+    startedGame.current = true;
+
+    if (!session.coordinator) {
+      setError(`No rendezvous coordinator available for "${session.gameLauncherPlugin}" - the matchmaker didn't provide one`);
+      return;
+    }
+    setStarting(true);
+    setError(null);
+
+    const connectionConfig = session.isHost
+      ? { type: "direct-tcp" as const, party: "host" as const, port: 7000, coordinator: session.coordinator }
+      : { type: "direct-tcp" as const, party: "client" as const, port: 7000, coordinator: session.coordinator };
+
+    startGameLauncher(matchAgent.settings.url, matchAgent.settings.authCode, session.gameLauncherPlugin, {
+      connectionConfig,
+      currentMachine: { machineId: identity.machineId, publicKey: identity.keys.publicKey, privateKey: identity.keys.privateKey },
+      allMachines: machines,
+      selectionResult: downloadResult,
+      rosterConfig: session.rosterConfig,
+      gameConfig: session.gameConfig,
+      relayRoomId: session.relay.roomId,
+    })
+      .then(() => {
+        clearSession();
+        navigate("/game");
+      })
+      .catch((e) => setError((e as Error).message))
+      .finally(() => setStarting(false));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session, downloadComplete, downloadResult]);
+
+  if (!session) return null;
+
+  return (
+    <div className="page">
+      <h1>Downloading</h1>
+      {error && <p className="error">{error}</p>}
+      <p>{roomState ?? "Connecting..."}</p>
+
+      <h2>Players</h2>
+      <ul>
+        {machines.map((m) => (
+          <li key={m.machineId}>{m.displayName} - {m.connected ? "Connected" : "Not connected"} - Selected</li>
+        ))}
+      </ul>
+
+      <div className="progress-bar"><div className="progress-fill" style={{ width: `${overall}%` }} /></div>
+      {pieceEntries.map(([key, p]) => (
+        <div className="download-row" key={key}>
+          <div>{p.pieceType}: {p.status}{p.error ? ` - ${p.error}` : ""}</div>
+          <div className="progress-bar"><div className="progress-fill" style={{ width: `${p.progress}%` }} /></div>
+        </div>
+      ))}
+
+      {downloadComplete && (
+        <div className="start-game">
+          <h2>{starting ? "Starting..." : "Ready to start"}</h2>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { useMatchAgent } from "../../context/MatchAgentContext";
+import { listGameProcesses, stopGameLauncher, GameProcessSummary } from "../../api/matchAgent";
+
+const POLL_INTERVAL_MS = 2000;
+
+// Every game process this machine's match-agent has started, regardless of
+// which page launched it (today that's only pages/Download's "Start Match"
+// button) - lets a player see a game is actually running, and close it,
+// without having to go find the real game window.
+export function GameStatusPage() {
+  const { settings } = useMatchAgent();
+  const [processes, setProcesses] = useState<Array<GameProcessSummary>>([]);
+  const [stoppingId, setStoppingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const poll = () => {
+      listGameProcesses(settings.url, settings.authCode)
+        .then((next) => { if (!cancelled) setProcesses(next); })
+        .catch((e) => { if (!cancelled) setError(e.message); });
+    };
+    poll();
+    const interval = setInterval(poll, POLL_INTERVAL_MS);
+    return () => { cancelled = true; clearInterval(interval); };
+  }, [settings]);
+
+  const handleClose = async (proc: GameProcessSummary) => {
+    setStoppingId(proc.handleId);
+    setError(null);
+    try {
+      await stopGameLauncher(settings.url, settings.authCode, proc.pluginName, proc.handleId);
+      const next = await listGameProcesses(settings.url, settings.authCode);
+      setProcesses(next);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setStoppingId(null);
+    }
+  };
+
+  return (
+    <div className="page">
+      <h1>Games</h1>
+      {error && <p className="error">{error}</p>}
+      <ul className="game-process-list">
+        {processes.map((proc) => (
+          <li key={proc.handleId} className="game-process-row">
+            <span>{proc.pluginName}</span>
+            <span>{proc.exited === false ? "Running" : `Exited (code ${proc.exited.code})`}</span>
+            <button
+              type="button"
+              disabled={proc.exited !== false || stoppingId === proc.handleId}
+              onClick={() => handleClose(proc)}
+            >
+              {stoppingId === proc.handleId ? "Closing..." : "Close"}
+            </button>
+          </li>
+        ))}
+      </ul>
+      {processes.length === 0 && !error && <p>No games have been started through this match-agent yet.</p>}
+    </div>
+  );
+}

package/client/src/pages/GameLauncher/Detail.tsx

@@ -0,0 +1,12 @@
+import { useParams } from "react-router-dom";
+import { GameLauncherSettingsForm } from "../../components/GameLauncherSettingsForm";
+
+export function GameLauncherDetailPage() {
+  const { pluginName = "" } = useParams();
+  return (
+    <div className="page">
+      <h1>{pluginName}</h1>
+      <GameLauncherSettingsForm pluginName={pluginName} />
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { useMatchAgent } from "../../context/MatchAgentContext";
+import { listAvailableGameLaunchers, AvailableGameLauncher } from "../../api/matchAgent";
+
+export function GameLauncherListPage() {
+  const { settings } = useMatchAgent();
+  const [runners, setRunners] = useState<Array<AvailableGameLauncher>>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    listAvailableGameLaunchers(settings.url, settings.authCode)
+      .then(setRunners)
+      .catch((e) => setError(e.message));
+  }, [settings]);
+
+  return (
+    <div className="page">
+      <h1>Game Launchers</h1>
+      {error && <p className="error">{error}</p>}
+      <ul>
+        {runners.map((r) => (
+          <li key={r.pluginName}>
+            <Link to={`/game-launcher/${encodeURIComponent(r.pluginName)}`}>{r.publicInfo.title}</Link>
+            {" - "}{r.publicInfo.description}
+          </li>
+        ))}
+      </ul>
+      {runners.length === 0 && !error && <p>No game-launcher plugins installed on this match-agent yet.</p>}
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { useNavigate } from "react-router-dom";
+import { useJoinSettings } from "../../context/JoinSettingsContext";
+import { useGamepads } from "../../hooks/useGamepads";
+
+// "Join Settings": how many local players this machine brings to a room and
+// which input device each uses (keyboard or a gamepad/USB controller). Only
+// one slot may claim the keyboard - see JoinSettingsContext's addSlot for
+// why. This player count is exposed to whatever matchmaker is loaded via the
+// getIdentity bridge call (see bridge/hostBridge.ts) - it's the matchmaker's
+// own job to push it to its account/auth backend, not this app's.
+export function JoinSettingsPage() {
+  const { playerSlots, addSlot, removeSlot, setSlotInput, setSlotLabel } = useJoinSettings();
+  const gamepads = useGamepads();
+  const navigate = useNavigate();
+
+  const keyboardTaken = playerSlots.some((s) => s.input.type === "keyboard");
+
+  return (
+    <div className="page">
+      <h1>Join Settings</h1>
+      <p>
+        Ikemen GO only supports 1v1 today - additional local player slots are saved for future
+        team-mode support (2v2, 3v(2+1), etc).
+      </p>
+
+      {playerSlots.map((slot) => (
+        <div key={slot.id} className="player-slot-row">
+          <input value={slot.label} onChange={(e) => setSlotLabel(slot.id, e.target.value)} />
+          <select
+            value={slot.input.type === "keyboard" ? "keyboard" : `gamepad:${slot.input.index}`}
+            onChange={(e) => {
+              const value = e.target.value;
+              if (value === "keyboard") setSlotInput(slot.id, { type: "keyboard" });
+              else setSlotInput(slot.id, { type: "gamepad", index: Number(value.split(":")[1]) });
+            }}
+          >
+            <option value="keyboard" disabled={keyboardTaken && slot.input.type !== "keyboard"}>
+              Keyboard
+            </option>
+            {gamepads.map((g) => (
+              <option key={g.index} value={`gamepad:${g.index}`}>{g.id || `Gamepad ${g.index + 1}`}</option>
+            ))}
+            {gamepads.length === 0 && slot.input.type === "gamepad" && (
+              <option value={`gamepad:${slot.input.index}`}>Gamepad {slot.input.index + 1} (not detected)</option>
+            )}
+          </select>
+          <button type="button" onClick={() => removeSlot(slot.id)} disabled={playerSlots.length <= 1}>
+            Remove
+          </button>
+        </div>
+      ))}
+
+      <button type="button" onClick={addSlot}>Add local player</button>
+
+      <button type="button" onClick={() => navigate("/match-making")}>Continue</button>
+    </div>
+  );
+}

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

@@ -0,0 +1,190 @@
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useMatchAgent } from "../../context/MatchAgentContext";
+import { useIdentity } from "../../context/IdentityContext";
+import { useJoinSettings } from "../../context/JoinSettingsContext";
+import { useDownloadSession } from "../../context/DownloadSessionContext";
+import { useHostBridge } from "../../bridge/hostBridge";
+import { Lightbox } from "../../components/Lightbox";
+import { InstallGameLauncherLightbox } from "../../components/InstallGameLauncherLightbox";
+import { SelectionBoard } from "../../components/Selection";
+
+const STORAGE_KEY = "match-agent-client:matchmaker-url";
+const SAVED_STORAGE_KEY = "match-agent-client:saved-matchmaker-urls";
+// No real hosted default exists yet - this points at titled-room/client's
+// local dev server, the only matchmaker this repo currently ships.
+const DEFAULT_URL = "http://localhost:5183";
+
+type SavedMatchmaker = { title: string, url: string };
+
+function loadSaved(): Array<SavedMatchmaker> {
+  try {
+    const raw = localStorage.getItem(SAVED_STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+export function MatchMakingPage() {
+  const matchAgent = useMatchAgent();
+  const identity = useIdentity();
+  const { playerSlots } = useJoinSettings();
+  const { setSession } = useDownloadSession();
+  const navigate = useNavigate();
+
+  const [url, setUrl] = useState(() => localStorage.getItem(STORAGE_KEY) || DEFAULT_URL);
+  const [title, setTitle] = useState("");
+  const [savedUrls, setSavedUrls] = useState<Array<SavedMatchmaker>>(loadSaved);
+  const [selectedSaved, setSelectedSaved] = useState("");
+  const [connectedUrl, setConnectedUrl] = useState<string | null>(null);
+  const [connecting, setConnecting] = useState(false);
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const { connectionError, pendingLightbox, resolveInstallLightbox, resolveSelectionLightbox, cancelSelectionLightbox } =
+    useHostBridge({
+      iframeRef,
+      iframeLoaded,
+      matchAgent: matchAgent.settings,
+      identityKeys: identity.keys,
+      machineId: identity.machineId,
+      playerSlots,
+      onInitiateRelay: (session) => {
+        setSession(session);
+        navigate("/download");
+      },
+    });
+
+  useEffect(() => {
+    if (!connectionError) return;
+    setConnecting(false);
+    setErrorMessage(`Could not connect to the matchmaker at ${connectedUrl}.`);
+  }, [connectionError, connectedUrl]);
+
+  const handleConnect = (targetUrl: string = url) => {
+    localStorage.setItem(STORAGE_KEY, targetUrl);
+    setIframeLoaded(false);
+    setErrorMessage(null);
+    setConnectedUrl(targetUrl);
+    setConnecting(true);
+  };
+
+  // Reconnect to whatever URL was last used, so returning users land in the
+  // matchmaker without an extra click. A manual Connect button remains below
+  // in case this first attempt fails (e.g. a stale/unreachable saved URL).
+  useEffect(() => {
+    handleConnect(url);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleUrlChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setUrl(e.target.value);
+    setSelectedSaved("");
+    // The iframe/bridge only ever target `connectedUrl`, so once the user
+    // edits the field the in-flight connection is stale - drop it rather
+    // than leaving `connecting` true against a URL that's no longer shown.
+    setConnecting(false);
+    setErrorMessage(null);
+  };
+
+  const handleIframeError = () => {
+    setConnecting(false);
+    setErrorMessage(`Failed to load the matchmaker at ${connectedUrl}.`);
+  };
+
+  const persistSaved = (next: Array<SavedMatchmaker>) => {
+    setSavedUrls(next);
+    localStorage.setItem(SAVED_STORAGE_KEY, JSON.stringify(next));
+  };
+
+  const handleSaveCurrent = () => {
+    const trimmedTitle = title.trim();
+    if (!trimmedTitle) return;
+    const withoutExisting = savedUrls.filter((s) => s.title !== trimmedTitle);
+    persistSaved([...withoutExisting, { title: trimmedTitle, url }]);
+    setSelectedSaved(trimmedTitle);
+  };
+
+  const handleSelectSaved = (e: ChangeEvent<HTMLSelectElement>) => {
+    const nextTitle = e.target.value;
+    setSelectedSaved(nextTitle);
+    const entry = savedUrls.find((s) => s.title === nextTitle);
+    if (!entry) return;
+    setTitle(entry.title);
+    setUrl(entry.url);
+    handleConnect(entry.url);
+  };
+
+  const handleDeleteSaved = () => {
+    if (!selectedSaved) return;
+    persistSaved(savedUrls.filter((s) => s.title !== selectedSaved));
+    setSelectedSaved("");
+  };
+
+  return (
+    <div className="page">
+      <h1>Match Making</h1>
+      <div style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }}>
+        <select value={selectedSaved} onChange={handleSelectSaved}>
+          <option value="">Saved matchmakers...</option>
+          {savedUrls.map((s) => (
+            <option key={s.title} value={s.title}>{s.title}</option>
+          ))}
+        </select>
+        <button type="button" onClick={handleDeleteSaved} disabled={!selectedSaved}>Delete</button>
+      </div>
+      <div style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }}>
+        <input
+          placeholder="Title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+        <input
+          style={{ flexGrow: 1 }}
+          placeholder="Matchmaker URL"
+          value={url}
+          onChange={handleUrlChange}
+        />
+        <button type="button" onClick={handleSaveCurrent} disabled={!title.trim()}>Save</button>
+        <button type="button" onClick={() => handleConnect()}>Connect</button>
+      </div>
+
+      {errorMessage && <p className="error">{errorMessage}</p>}
+
+      {connecting && connectedUrl && (
+        <div className="matchmaker-frame-wrap">
+          <iframe
+            ref={iframeRef}
+            src={connectedUrl}
+            className="matchmaker-frame"
+            title="Matchmaker"
+            onLoad={() => setIframeLoaded(true)}
+            onError={handleIframeError}
+          />
+        </div>
+      )}
+
+      {pendingLightbox?.type === "install" && (
+        <Lightbox>
+          <InstallGameLauncherLightbox pluginName={pendingLightbox.pluginName} onDone={resolveInstallLightbox} />
+        </Lightbox>
+      )}
+
+      {pendingLightbox?.type === "selection" && (
+        <Lightbox onClose={cancelSelectionLightbox}>
+          <SelectionBoard
+            rosterConfig={pendingLightbox.rosterConfig}
+            playerSlots={playerSlots.slice(0, pendingLightbox.numPlayers)}
+            matchAgentUrl={matchAgent.settings.url}
+            matchAgentAuth={matchAgent.settings.authCode}
+            onConfirm={resolveSelectionLightbox}
+          />
+        </Lightbox>
+      )}
+    </div>
+  );
+}