HappyOyster overview

import { HappyOysterModel } from "@reactor-models/happy-oyster";

const model = new HappyOysterModel({
  mode: "directing",
  videoElement,
});

import { HappyOysterProvider, HappyOysterVideo } from "@reactor-models/happy-oyster/react";

export function App({ jwt }: { jwt: string }) {
  return (
    <HappyOysterProvider mode="directing" jwt={jwt} autoConnect>
      <HappyOysterVideo className="aspect-video w-full" />
      <Controller />
    </HappyOysterProvider>
  );
}

import { HappyOysterModel } from "@reactor-models/happy-oyster";

const model = new HappyOysterModel({
  mode: "adventure",
  videoElement: document.querySelector("video")!,
});

model.onWorldState((state) => {
  console.log(state.phase, state.encrypted_world_id);
});

await model.connect(jwt);

const world = await model.createWorld({
  prompt: "A sunny grassy meadow with rolling green hills, wildflowers, and a winding dirt path.",
  perspective: "third_person",
});

saveWorldId(world.encrypted_world_id);
await model.startTravel();
await model.move("Front");

"use client";

import {
  HappyOysterProvider,
  HappyOysterVideo,
  useHappyOyster,
} from "@reactor-models/happy-oyster/react";

function Controller() {
  const { createWorld, startTravel, worldState } = useHappyOyster();

  async function enter() {
    await createWorld({
      prompt: "A rain-slick neon alley at midnight.",
      resolution: "720p",
      narrative: "Dramatic",
    });
    await startTravel();
  }

  return (
    <button onClick={enter}>{worldState?.phase === "ready" ? "Enter world" : "Build world"}</button>
  );
}

export function App({ jwt }: { jwt: string }) {
  return (
    <HappyOysterProvider mode="directing" jwt={jwt} autoConnect>
      <HappyOysterVideo className="aspect-video w-full" />
      <Controller />
    </HappyOysterProvider>
  );
}