Play against bots in the lobby

// examples/games/tic-tac-toe/bots/src/index.ts
import { defineBotRegistry, attachBots } from "@openturn/lobby/registry";
import { ticTacToe } from "@openturn/example-tic-tac-toe-game";

import { randomBot } from "./random";
import { makeMinimaxBot } from "./minimax";

export const ticTacToeBotRegistry = defineBotRegistry([
  { botID: "random",       label: "Random",         difficulty: "easy", bot: randomBot },
  { botID: "minimax-easy", label: "Minimax · easy", difficulty: "easy", bot: makeMinimaxBot({ depth: 2 }) },
  { botID: "minimax-hard", label: "Minimax · hard", difficulty: "hard", bot: makeMinimaxBot({ depth: 9 }) },
]);

// Re-export the game with the registry attached at game.bots.
// Apps import `ticTacToeWithBots` and the lobby runtime/manifest see the
// registry without the game package depending on the bots package.
export const ticTacToeWithBots = attachBots(ticTacToe, ticTacToeBotRegistry);

// examples/games/tic-tac-toe/app/src/components/LocalLobbyTicTacToe.tsx
import { useState, type ReactNode } from "react";

import { LobbyWithBots, buildLobbyView, useLocalLobbyChannel } from "@openturn/lobby/react";
import { ticTacToeWithBots, ticTacToeBotRegistry } from "@openturn/example-tic-tac-toe-bots";
import { ticTacToe } from "@openturn/example-tic-tac-toe-game";

const HOST_USER_ID = "local-host";

export function LocalLobbyTicTacToe(): ReactNode {
  const [phase, setPhase] = useState<"lobby" | "game">("lobby");
  const [botMap, setBotMap] = useState<Record<string, string>>({});

  const channel = useLocalLobbyChannel({
    game: ticTacToeWithBots,
    hostUserID: HOST_USER_ID,
    hostUserName: "You",
    registry: ticTacToeBotRegistry,
    onTransitionToGame: ({ assignments }) => {
      const next: Record<string, string> = {};
      for (const a of assignments) {
        if (a.kind === "bot" && a.botID !== null) next[a.playerID] = a.botID;
      }
      setBotMap(next);
      setPhase("game");
    },
  });

  const view = buildLobbyView({
    channel,
    userID: HOST_USER_ID,
    capacityFallback: ticTacToeWithBots.playerIDs.length,
    minPlayersFallback: ticTacToeWithBots.minPlayers,
    hostUserIDFallback: HOST_USER_ID,
  });

  if (phase === "lobby") {
    return <LobbyWithBots lobby={view} title="Tic-tac-toe · pick your seats" />;
  }
  return <Board botMap={botMap} />;
}

import { LobbyWithBots, buildLobbyView, useLobbyChannel } from "@openturn/lobby/react";

function HostedLobby({ token, websocketURL, userID }) {
  const channel = useLobbyChannel({ websocketURL, token });
  const view = buildLobbyView({ channel, userID });
  return <LobbyWithBots lobby={view} title="Tic-tac-toe" />;
}

import { useBotAttachOnTransition } from "@openturn/lobby/react";
import { createLocalSession } from "@openturn/core";

function Game({ channel }) {
  const [rawSession] = useState(() =>
    createLocalSession(ticTacToe, { match: { players: ticTacToe.playerIDs } }),
  );
  const facade = useBotAttachOnTransition({
    channel,
    game: ticTacToe,
    registry: ticTacToeBotRegistry,
    session: rawSession,
  });

  // Drive the UI with `facade ?? rawSession`. The facade is non-null
  // only when at least one bot seat exists; using it routes human
  // dispatches through the runner so bots see them.
  const session = facade ?? rawSession;
  return <BoardUI session={session} />;
}

import { createLocalBotSupervisor } from "@openturn/lobby/supervisor";

const supervisor = createLocalBotSupervisor({
  session: rawSession,
  game: ticTacToe,
  registry: ticTacToeBotRegistry,
});

await supervisor.start(
  channel.transition.playerAssignments
    .filter((a) => a.kind === "bot")
    .map((a) => ({ seatIndex: a.seatIndex, playerID: a.playerID, botID: a.botID! })),
);

const session = supervisor.getSession();   // bot-aware facade — drive with this

import { useEffect, useRef } from "react";
import { findBot } from "@openturn/lobby/registry";
import { enumerateLegalActions, forkRng, simulate } from "@openturn/bot";
import { ticTacToeBotRegistry } from "./bots";

function useBotDriver({ botMap, snapshot, dispatch, getPlayerView }) {
  const inflightTurnRef = useRef<number | null>(null);

  useEffect(() => {
    if (snapshot.meta.result !== null) {
      inflightTurnRef.current = null;
      return;
    }
    const active = snapshot.derived.activePlayers as readonly string[];
    const botSeat = active.find((p) => botMap[p] !== undefined);
    if (botSeat === undefined) return;

    const descriptor = findBot(ticTacToeBotRegistry, botMap[botSeat]!);
    if (descriptor === null) return;

    const turn = snapshot.position.turn;
    if (inflightTurnRef.current === turn) return;
    inflightTurnRef.current = turn;

    const abort = new AbortController();
    let cancelled = false;

    void (async () => {
      const action = await descriptor.bot.decide({
        playerID: botSeat as never,
        view: getPlayerView(botSeat) as never,
        snapshot: snapshot as never,
        legalActions: enumerateLegalActions(ticTacToe, snapshot, getPlayerView(botSeat), botSeat, descriptor.bot),
        rng: forkRng(snapshot.meta.rng, descriptor.bot.name, botSeat, snapshot.position.turn),
        deadline: { remainingMs: () => 5_000, expired: () => false },
        signal: abort.signal,
        simulate: (a) => simulate(ticTacToe, snapshot, botSeat, a),
      });
      if (cancelled) return;
      const handler = dispatch[action.event];
      if (typeof handler === "function") handler(botSeat, action.payload);
    })();

    return () => {
      cancelled = true;
      abort.abort();
    };
  }, [botMap, snapshot, dispatch, getPlayerView]);
}