Tic-tac-toe replay viewer

import { createSavedReplayFromSession, serializeSavedReplay } from "@openturn/replay";

const view = useMatch();
if (view.mode !== "local") throw new Error("download requires a local match");
const { replayData } = view.state;

function onDownload() {
  const envelope = createSavedReplayFromSession({
    gameID: "example/tic-tac-toe",
    playerID: "0",
    session: { getReplayData: () => replayData },
    metadata: { label: "Tic-tac-toe replay" },
  });
  const blob = new Blob([serializeSavedReplay(envelope)], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  Object.assign(document.createElement("a"), { href: url, download: "replay.json" }).click();
  URL.revokeObjectURL(url);
}

bun --filter @my/tic-tac-toe-cli demo -- --save-replay out.json

export const metadata = { name: "Tic Tac Toe Replay Viewer", runtime: "local" };

import { useState } from "react";
import { createOpenturnBindings } from "@openturn/react";
import { parseSavedReplay, type SavedReplayEnvelope } from "@openturn/replay";
import { ticTacToe } from "@my/tic-tac-toe-game";

const { useMatch } = createOpenturnBindings(ticTacToe, {
  runtime: "local",
  match: { players: ticTacToe.playerIDs },
});

function useLocalMatch() {
  const view = useMatch();
  if (view.mode !== "local") throw new Error("replay viewer requires a local match");
  return view.state;
}

export function TicTacToeReplayViewer() {
  const match = useLocalMatch();
  const [loaded, setLoaded] = useState(false);

  async function onPickFile(file: File) {
    const envelope = parseSavedReplay(await file.text());
    if (envelope.gameID !== "example/tic-tac-toe") {
      alert(`Unknown replay game: ${envelope.gameID}`);
      return;
    }
    match.reset();
    replayActions(match.dispatch, envelope);
    setLoaded(true);
  }

  return (
    <>
      {!loaded && (
        <input type="file" accept="application/json" onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) void onPickFile(file);
        }} />
      )}
      <Board snapshot={match.snapshot} />
    </>
  );
}

function replayActions(
  dispatch: ReturnType<typeof useLocalMatch>["dispatch"],
  envelope: SavedReplayEnvelope<typeof ticTacToe.playerIDs>,
) {
  for (const action of envelope.actions) {
    // The dispatch map is keyed by event name. We index by the recorded
    // event string and forward the recorded playerID + payload.
    const fn = dispatch[action.event as keyof typeof dispatch];
    fn(action.playerID, action.payload);
  }
}

import { createOpenturnBindings } from "@openturn/react";
import { createInspector } from "@openturn/inspector-ui";
import { ticTacToe } from "@my/tic-tac-toe-game";

const bindings = createOpenturnBindings(ticTacToe, {
  runtime: "local",
  match: { players: ticTacToe.playerIDs },
});
const { ReplayInspector } = createInspector(bindings);

export function TicTacToeReplayInspector({ envelope }) {
  return <ReplayInspector replayEnvelope={envelope} />;
}