EdenLive tutorial

import { EdenLiveModel } from "@reactor-models/eden-live";

const eden = new EdenLiveModel();
const world = document.querySelector<HTMLVideoElement>("#world")!;
const draft = document.querySelector<HTMLVideoElement>("#draft")!;

eden.onMainVideo((_track, stream) => (world.srcObject = stream));
eden.onDraftVideo((_track, stream) => (draft.srcObject = stream));

await eden.connect(await getToken()); // Your server issues the token.

await eden.selectGame({ game: "freeze" });

await eden.start({});

import type { EdenLiveSetKeysParams } from "@reactor-models/eden-live";

type Key = NonNullable<EdenLiveSetKeysParams["keys"]>[number];
const ACTIONS: Key[] = ["w", "a", "s", "d", "f", " ", "shift", "e", "r", "g"];
const ARROWS: Key[] = ["arrowup", "arrowdown", "arrowleft", "arrowright"];
const KEYS = [...ACTIONS, ...ARROWS];
const held = new Set<Key>();
const toKey = (key: string) => KEYS.find((k) => k === key.toLowerCase());

let builtInControls = true;
const send = () => void eden.setKeys({ keys: [...held] }).catch(console.error);

window.addEventListener("keydown", (e) => {
  const key = toKey(e.key);
  if (!builtInControls || !key || held.has(key)) return;
  held.add(key);
  send();
});
window.addEventListener("keyup", (e) => {
  const key = toKey(e.key);
  if (key && held.delete(key)) send();
});
window.addEventListener("blur", () => {
  if (!builtInControls) return;
  held.clear();
  send();
});

let stop: number | undefined;
let pending: { yaw: number; pitch: number } | undefined;
let sending: Promise<void> | undefined;

function queueLook(yaw: number, pitch: number): Promise<void> {
  pending = { yaw, pitch };
  if (!sending) {
    sending = (async () => {
      try {
        while (pending) {
          const next = pending;
          pending = undefined;
          if (!(await eden.setLook(next))) throw new Error("Mouse look refused");
        }
      } catch (error) {
        pending = undefined;
        throw error;
      } finally {
        sending = undefined;
      }
    })();
  }
  return sending;
}

function stopLook() {
  clearTimeout(stop);
  return queueLook(0, 0);
}

world.addEventListener("click", () => {
  if (builtInControls) void Promise.resolve(world.requestPointerLock()).catch(console.error);
});
document.addEventListener("mousemove", (e) => {
  if (!builtInControls || document.pointerLockElement !== world) return;
  const rate = (v: number) => Math.max(-1, Math.min(1, v / 20));
  void queueLook(rate(e.movementX), rate(-e.movementY)).catch(console.error);
  clearTimeout(stop);
  stop = window.setTimeout(() => void stopLook().catch(console.error), 100);
});
document.addEventListener("pointerlockchange", () => {
  if (builtInControls && document.pointerLockElement !== world)
    void stopLook().catch(console.error);
});
window.addEventListener("blur", () => {
  if (builtInControls) void stopLook().catch(console.error);
});

const statusElement = document.querySelector<HTMLElement>("#status")!;

eden.onStateUpdate((state) => {
  statusElement.textContent = `${state.game_state} · health ${state.health ?? "-"} / ${state.health_max ?? "-"}`;
  if (state.ended) showResult(state.outcome); // For example ["TRY AGAIN", "You were defeated.", "…"]
});

await eden.setPrompt({ prompt: "The same volcanic cavern at night, lit by cold blue crystals." });

await eden.setPaused({ paused: true });
await eden.selectGame({ game: "spiders" });
await eden.start({});

function requireReply<T>(reply: T | undefined): T {
  if (reply === undefined) throw new Error("EdenLive command refused; see the error event");
  return reply;
}

builtInControls = false;
held.clear();
requireReply(await eden.setKeys({ keys: [] }));
await stopLook();
if (document.pointerLockElement === world) document.exitPointerLock();
requireReply(await eden.setPaused({ paused: true }));

const canvas = renderer.domElement; // Your game's 1280 × 704 canvas.
const stream = canvas.captureStream(30);
await eden.publishSourceVideo(stream.getVideoTracks()[0]);
requireReply(await eden.setSource({ source: "client" }));

const opening = await new Promise<Blob>((resolve, reject) =>
  canvas.toBlob(
    (blob) => (blob ? resolve(blob) : reject(new Error("Capture failed"))),
    "image/png",
  ),
);
// Restyle `opening` in an image tool, then upload the restyled file.
const image = await eden.uploadFile(restyledFile);
requireReply(await eden.setImage({ image }));
requireReply(
  await eden.setPrompt({
    prompt:
      "Third-person view of a traveler in an ochre coat on a pale stone terrace, in a watercolor " +
      "storybook style. Keep the scene layout and camera movement. No text or HUD.",
  }),
);

requireReply(await eden.start({}));

eden.on("error", (error) => {
  // A refused command: error.code is the model's code, such as "pause_required".
  if (error.operation === "sendCommand") console.error(error.message);
});