dotframe 0.1.0

package/src/render.ts

@@ -0,0 +1,132 @@
+import type { World } from "./ecs";
+import type { MeshData } from "./gltf";
+import { BufferUsage, type Color, type Draw, f32Bytes, type RenderGpu, u32Bytes, VertexFormat } from "./gpu";
+import { compose, lookAt, multiply, perspective, type Vec3, vec3 } from "./math";
+
+export interface Camera {
+  eye: Vec3;
+  target: Vec3;
+  fovY: number;
+}
+
+export interface Renderer {
+  addMesh: (data: MeshData) => number;
+  render: (world: World, camera: Camera, clear: Color) => void;
+}
+
+interface GpuMesh {
+  vertexBuffer: number;
+  indexBuffer: number;
+  count: number;
+}
+
+interface EntityBinding {
+  uniformBuffer: number;
+  bindGroup: number;
+}
+
+const shader = `
+struct Uniforms {
+  mvp: mat4x4f,
+  model: mat4x4f,
+  color: vec4f,
+}
+@group(0) @binding(0) var<uniform> u: Uniforms;
+
+struct VertexOut {
+  @builtin(position) position: vec4f,
+  @location(0) normal: vec3f,
+}
+
+@vertex
+fn vs_main(@location(0) position: vec3f, @location(1) normal: vec3f) -> VertexOut {
+  var out: VertexOut;
+  out.position = u.mvp * vec4f(position, 1.0);
+  out.normal = (u.model * vec4f(normal, 0.0)).xyz;
+  return out;
+}
+
+@fragment
+fn fs_main(in: VertexOut) -> @location(0) vec4f {
+  let light = normalize(vec3f(0.4, 0.8, 0.6));
+  let diffuse = max(dot(normalize(in.normal), light), 0.0);
+  return vec4f(u.color.rgb * (0.25 + 0.75 * diffuse), 1.0);
+}
+`;
+
+// mvp (16) + model (16) + color (4) floats.
+const UNIFORM_FLOATS = 36;
+
+export function createRenderer(gpu: RenderGpu): Renderer {
+  const pipeline = gpu.createPipeline({
+    wgsl: shader,
+    stride: 24,
+    attributes: [
+      { format: VertexFormat.Float32x3, offset: 0, location: 0 },
+      { format: VertexFormat.Float32x3, offset: 12, location: 1 },
+    ],
+    depth: true,
+    blend: false,
+  });
+  const meshes: GpuMesh[] = [];
+  const bindings = new Map<number, EntityBinding>();
+  const uniforms = new Float32Array(UNIFORM_FLOATS);
+
+  const addMesh = (data: MeshData): number => {
+    const vertexCount = data.positions.length / 3;
+    const interleaved = new Float32Array(vertexCount * 6);
+    for (let i = 0; i < vertexCount; i++) {
+      interleaved[i * 6] = data.positions[i * 3];
+      interleaved[i * 6 + 1] = data.positions[i * 3 + 1];
+      interleaved[i * 6 + 2] = data.positions[i * 3 + 2];
+      interleaved[i * 6 + 3] = data.normals[i * 3];
+      interleaved[i * 6 + 4] = data.normals[i * 3 + 1];
+      interleaved[i * 6 + 5] = data.normals[i * 3 + 2];
+    }
+    meshes.push({
+      vertexBuffer: gpu.createBuffer(BufferUsage.Vertex, f32Bytes(interleaved)),
+      indexBuffer: gpu.createBuffer(BufferUsage.Index, u32Bytes(data.indices)),
+      count: data.indices.length,
+    });
+    return meshes.length - 1;
+  };
+
+  const render = (world: World, camera: Camera, clear: Color): void => {
+    const view = lookAt(camera.eye, camera.target, vec3(0, 1, 0));
+    const viewProjection = multiply(perspective(camera.fovY, gpu.aspect(), 0.1, 100), view);
+    const draws: Draw[] = [];
+    for (const [entity, meshRef] of world.meshes) {
+      const transform = world.transforms.get(entity);
+      const mesh = meshes[meshRef.mesh];
+      if (!transform || !mesh) continue;
+
+      let binding = bindings.get(entity);
+      if (!binding) {
+        const uniformBuffer = gpu.createBuffer(BufferUsage.Uniform, f32Bytes(uniforms));
+        binding = { uniformBuffer, bindGroup: gpu.bind(pipeline, uniformBuffer, -1) };
+        bindings.set(entity, binding);
+      }
+
+      const model = compose(transform.position, transform.rotation, transform.scale);
+      uniforms.set(multiply(viewProjection, model), 0);
+      uniforms.set(model, 16);
+      uniforms[32] = meshRef.color.x;
+      uniforms[33] = meshRef.color.y;
+      uniforms[34] = meshRef.color.z;
+      uniforms[35] = 1;
+      gpu.writeBuffer(binding.uniformBuffer, f32Bytes(uniforms));
+
+      draws.push({
+        pipeline,
+        bindGroup: binding.bindGroup,
+        vertexBuffer: mesh.vertexBuffer,
+        indexBuffer: mesh.indexBuffer,
+        first: 0,
+        count: mesh.count,
+      });
+    }
+    gpu.frame(clear, draws);
+  };
+
+  return { addMesh, render };
+}

package/src/shapes.ts

@@ -0,0 +1,37 @@
+import type { MeshData } from "./gltf";
+
+// Unit cube centered at the origin (extent 1 on each axis), with per-face normals.
+export function box(): MeshData {
+  const faces = [
+    { n: [1, 0, 0], u: [0, 0, -1], v: [0, 1, 0] },
+    { n: [-1, 0, 0], u: [0, 0, 1], v: [0, 1, 0] },
+    { n: [0, 1, 0], u: [1, 0, 0], v: [0, 0, -1] },
+    { n: [0, -1, 0], u: [1, 0, 0], v: [0, 0, 1] },
+    { n: [0, 0, 1], u: [1, 0, 0], v: [0, 1, 0] },
+    { n: [0, 0, -1], u: [-1, 0, 0], v: [0, 1, 0] },
+  ];
+  const positions = new Float32Array(24 * 3);
+  const normals = new Float32Array(24 * 3);
+  const indices = new Uint32Array(36);
+  const corners = [
+    [-1, -1],
+    [1, -1],
+    [1, 1],
+    [-1, 1],
+  ];
+  for (let f = 0; f < 6; f++) {
+    const face = faces[f];
+    for (let c = 0; c < 4; c++) {
+      const vertex = f * 4 + c;
+      const su = corners[c][0] * 0.5;
+      const sv = corners[c][1] * 0.5;
+      for (let axis = 0; axis < 3; axis++) {
+        positions[vertex * 3 + axis] = face.n[axis] * 0.5 + face.u[axis] * su + face.v[axis] * sv;
+        normals[vertex * 3 + axis] = face.n[axis];
+      }
+    }
+    const base = f * 4;
+    indices.set([base, base + 1, base + 2, base, base + 2, base + 3], f * 6);
+  }
+  return { positions, normals, indices };
+}

package/src/sim.ts

@@ -0,0 +1,56 @@
+import type { Audio } from "./audio";
+import type { Draw2D } from "./draw2d";
+import type { RenderGpu, WindowOptions } from "./gpu";
+
+// The contract a game exposes to the dotframe CLI (sim, snap, replay, desync). A game exports one Sim as the
+// default export of the module named by "sim" in dotframe.json.
+
+export type LoadBytes = (path: string) => Promise<Uint8Array>;
+
+export interface SimPlatform {
+  gpu: RenderGpu;
+  load: LoadBytes;
+  // True when no frame will ever be shown (sim, replay, desync); assets can be skipped.
+  headless: boolean;
+  // Present when frames will be drawn (snap): the Draw2D render() receives, so fonts can be registered on it.
+  draw?: Draw2D;
+  audio?: Audio;
+}
+
+export interface SimRun {
+  // Resolves once assets are loaded; headless runs may resolve immediately.
+  ready: Promise<void>;
+  start: (seed: number, options: Record<string, unknown>) => void;
+  // One fixed simulation step with one encoded input per player.
+  step: (inputs: number[]) => void;
+  // A number that changes whenever simulation state changes; peers compare it frame by frame.
+  checksum: () => number;
+  // A small JSON summary for agents (positions, damage, stocks, winner).
+  state: () => unknown;
+  over: () => boolean;
+  save: () => unknown;
+  restore: (snapshot: unknown) => void;
+  // Optional: the whole simulation state as a plain object graph. desync walks it at checkpoints and reports the
+  // first differing path, which catches state the checksum does not cover.
+  inspect?: () => unknown;
+  // Optional: draws the current frame; must not change simulation state.
+  render?: (draw: Draw2D) => void;
+}
+
+export interface Sim {
+  players: number;
+  window: WindowOptions;
+  // Default options merged under --options.
+  options: Record<string, unknown>;
+  // Turns a JSON input (game-defined object) into the number passed to step.
+  encode: (input: unknown) => number;
+  // The encoded "nothing pressed" input, used before the first input and as the netplay prediction seed.
+  neutral: number;
+  // A random input, for mashing scripts. next() returns [0, 1).
+  random: (next: () => number) => number;
+  create: (platform: SimPlatform) => SimRun;
+}
+
+export function defineSim(sim: Sim): Sim {
+  return sim;
+}

package/src/storage.ts

@@ -0,0 +1,6 @@
+// Small persistent key-value store: localStorage on the web, a JSON file in the user's preferences directory natively.
+
+export interface Storage {
+  get: (key: string) => string | null;
+  set: (key: string, value: string) => void;
+}

package/src/web/run.ts

@@ -0,0 +1,338 @@
+import {
+  BufferUsage,
+  type Color,
+  type Draw,
+  type Gpu,
+  type PipelineOptions,
+  type Setup,
+  type Texture,
+  type WindowOptions,
+} from "../gpu";
+import type { Audio } from "../audio";
+import { type Input, keyCodes, type Pointer, type Touch } from "../input";
+import type { Storage } from "../storage";
+
+const vertexFormats: GPUVertexFormat[] = ["float32x2", "float32x3", "float32x4", "float32", "unorm8x4"];
+
+export async function loadBytes(path: string): Promise<Uint8Array> {
+  const response = await fetch(path);
+  if (!response.ok) throw new Error(`fetch ${path}: ${response.status}`);
+  return new Uint8Array(await response.arrayBuffer());
+}
+
+export async function run(options: WindowOptions, setup: Setup): Promise<void> {
+  if (!navigator.gpu) throw new Error("WebGPU is not available in this browser");
+  const adapter = await navigator.gpu.requestAdapter();
+  if (!adapter) throw new Error("No WebGPU adapter");
+  const device = await adapter.requestDevice();
+
+  document.title = options.title;
+  const canvas = document.createElement("canvas");
+  const dpr = globalThis.devicePixelRatio ?? 1;
+  canvas.style.width = `${options.width}px`;
+  canvas.style.height = `${options.height}px`;
+  canvas.width = Math.round(options.width * dpr);
+  canvas.height = Math.round(options.height * dpr);
+  document.body.appendChild(canvas);
+
+  const context = canvas.getContext("webgpu");
+  if (!context) throw new Error("Could not create a WebGPU canvas context");
+  const format = navigator.gpu.getPreferredCanvasFormat();
+  context.configure({ device, format, alphaMode: "opaque" });
+  const depthTexture = device.createTexture({
+    size: [canvas.width, canvas.height],
+    format: "depth24plus",
+    usage: GPUTextureUsage.RENDER_ATTACHMENT,
+  });
+
+  const pipelines: GPURenderPipeline[] = [];
+  const buffers: GPUBuffer[] = [];
+  const bindGroups: GPUBindGroup[] = [];
+  const textureViews: GPUTextureView[] = [];
+  const textureSmooth: boolean[] = [];
+  // Nearest keeps pixel art crisp; linear suits fonts and photos.
+  const nearest = device.createSampler({ magFilter: "nearest", minFilter: "nearest" });
+  const linear = device.createSampler({ magFilter: "linear", minFilter: "linear" });
+  const uploadTexture = (
+    width: number,
+    height: number,
+    smooth: boolean,
+    write: (texture: GPUTexture) => void,
+  ): Texture => {
+    const texture = device.createTexture({
+      size: [width, height],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+    write(texture);
+    textureViews.push(texture.createView());
+    textureSmooth.push(smooth);
+    return { id: textureViews.length - 1, width, height };
+  };
+  const depthPipelines = new Set<number>();
+
+  const gpu: Gpu = {
+    createBuffer: (usage: number, data: Uint8Array): number => {
+      let flags = GPUBufferUsage.COPY_DST;
+      if (usage & BufferUsage.Vertex) flags |= GPUBufferUsage.VERTEX;
+      if (usage & BufferUsage.Index) flags |= GPUBufferUsage.INDEX;
+      if (usage & BufferUsage.Uniform) flags |= GPUBufferUsage.UNIFORM;
+      const buffer = device.createBuffer({ size: Math.ceil(data.byteLength / 4) * 4, usage: flags });
+      device.queue.writeBuffer(buffer, 0, data);
+      buffers.push(buffer);
+      return buffers.length - 1;
+    },
+    writeBuffer: (buffer: number, data: Uint8Array): void => {
+      const target = buffers[buffer];
+      if (target) device.queue.writeBuffer(target, 0, data);
+    },
+    destroyBuffer: (buffer: number): void => {
+      buffers[buffer]?.destroy();
+    },
+    createPipeline: (pipelineOptions: PipelineOptions): number => {
+      const module = device.createShaderModule({ code: pipelineOptions.wgsl });
+      const buffersLayout: GPUVertexBufferLayout[] =
+        pipelineOptions.stride > 0
+          ? [
+              {
+                arrayStride: pipelineOptions.stride,
+                attributes: pipelineOptions.attributes.map((attribute) => ({
+                  format: vertexFormats[attribute.format] ?? "float32x3",
+                  offset: attribute.offset,
+                  shaderLocation: attribute.location,
+                })),
+              },
+            ]
+          : [];
+      pipelines.push(
+        device.createRenderPipeline({
+          layout: "auto",
+          vertex: { module, entryPoint: "vs_main", buffers: buffersLayout },
+          fragment: {
+            module,
+            entryPoint: "fs_main",
+            targets: [
+              {
+                format,
+                blend: pipelineOptions.blend
+                  ? {
+                      color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha", operation: "add" },
+                      alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                    }
+                  : undefined,
+              },
+            ],
+          },
+          primitive: pipelineOptions.depth ? { cullMode: "back" } : {},
+          depthStencil: pipelineOptions.depth
+            ? { format: "depth24plus", depthWriteEnabled: true, depthCompare: "less" }
+            : undefined,
+        }),
+      );
+      if (pipelineOptions.depth) depthPipelines.add(pipelines.length - 1);
+      return pipelines.length - 1;
+    },
+    bind: (pipeline: number, buffer: number, texture: number): number => {
+      const entries: GPUBindGroupEntry[] = [];
+      if (buffer >= 0) entries.push({ binding: 0, resource: { buffer: buffers[buffer] } });
+      if (texture >= 0) {
+        entries.push({ binding: 1, resource: textureViews[texture] });
+        entries.push({ binding: 2, resource: textureSmooth[texture] ? linear : nearest });
+      }
+      bindGroups.push(device.createBindGroup({ layout: pipelines[pipeline].getBindGroupLayout(0), entries }));
+      return bindGroups.length - 1;
+    },
+    createTexture: (width: number, height: number, rgba: Uint8Array, smooth: boolean): Texture =>
+      uploadTexture(width, height, smooth, (texture) =>
+        device.queue.writeTexture({ texture }, rgba, { bytesPerRow: width * 4, rowsPerImage: height }, [width, height]),
+      ),
+    createImage: async (png: Uint8Array, smooth: boolean): Promise<Texture> => {
+      const bitmap = await createImageBitmap(new Blob([new Uint8Array(png)], { type: "image/png" }), { premultiplyAlpha: "none" });
+      return uploadTexture(bitmap.width, bitmap.height, smooth, (texture) =>
+        device.queue.copyExternalImageToTexture({ source: bitmap }, { texture }, [bitmap.width, bitmap.height]),
+      );
+    },
+    frame: (clear: Color, draws: Draw[]): void => {
+      const encoder = device.createCommandEncoder();
+      // Pipelines without depth cannot run in a pass with a depth attachment.
+      const usesDepth = draws.some((draw) => depthPipelines.has(draw.pipeline));
+      const pass = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: context.getCurrentTexture().createView(),
+            loadOp: "clear",
+            storeOp: "store",
+            clearValue: { r: clear.r, g: clear.g, b: clear.b, a: 1 },
+          },
+        ],
+        depthStencilAttachment: usesDepth
+          ? { view: depthTexture.createView(), depthLoadOp: "clear", depthStoreOp: "store", depthClearValue: 1 }
+          : undefined,
+      });
+      for (const draw of draws) {
+        const pipeline = pipelines[draw.pipeline];
+        if (!pipeline) continue;
+        pass.setPipeline(pipeline);
+        if (draw.bindGroup >= 0) pass.setBindGroup(0, bindGroups[draw.bindGroup]);
+        if (draw.vertexBuffer >= 0) pass.setVertexBuffer(0, buffers[draw.vertexBuffer]);
+        if (draw.indexBuffer >= 0) {
+          pass.setIndexBuffer(buffers[draw.indexBuffer], "uint32");
+          pass.drawIndexed(draw.count, 1, draw.first);
+        } else {
+          pass.draw(draw.count, 1, draw.first);
+        }
+      }
+      pass.end();
+      device.queue.submit([encoder.finish()]);
+    },
+    aspect: (): number => canvas.width / Math.max(canvas.height, 1),
+  };
+
+  const pressed = new Set<string>();
+  globalThis.addEventListener("keydown", (event) => {
+    if (keyCodes.includes(event.code)) event.preventDefault();
+    pressed.add(event.code);
+  });
+  globalThis.addEventListener("keyup", (event) => pressed.delete(event.code));
+  globalThis.addEventListener("blur", () => pressed.clear());
+  const pointer: Pointer = { x: 0, y: 0, buttons: 0 };
+  const trackPointer = (event: PointerEvent): void => {
+    const rect = canvas.getBoundingClientRect();
+    pointer.x = (event.clientX - rect.left) / rect.width;
+    pointer.y = (event.clientY - rect.top) / rect.height;
+    pointer.buttons = event.buttons & 7;
+  };
+  canvas.addEventListener("pointermove", trackPointer);
+  canvas.addEventListener("pointerdown", trackPointer);
+  globalThis.addEventListener("pointerup", trackPointer);
+  canvas.addEventListener("contextmenu", (event) => event.preventDefault());
+  const fingers = new Map<number, Touch>();
+  const trackFinger = (event: PointerEvent): void => {
+    if (event.pointerType === "mouse") return;
+    const rect = canvas.getBoundingClientRect();
+    const touch = { id: event.pointerId, x: (event.clientX - rect.left) / rect.width, y: (event.clientY - rect.top) / rect.height };
+    if (event.type === "pointerup" || event.type === "pointercancel") fingers.delete(event.pointerId);
+    else fingers.set(event.pointerId, touch);
+  };
+  for (const type of ["pointerdown", "pointermove", "pointerup", "pointercancel"]) canvas.addEventListener(type, trackFinger as EventListener);
+  canvas.style.touchAction = "none";
+  // Gamepad slots in connection order, matching the native backend.
+  const gamepad = (pad: number): Gamepad | null => navigator.getGamepads?.().filter((g) => g !== null)[pad] ?? null;
+  const input: Input = {
+    down: (key: number): boolean => pressed.has(keyCodes[key] ?? ""),
+    firstDown: (): number => {
+      for (let key = 0; key < keyCodes.length; key++) if (pressed.has(keyCodes[key])) return key;
+      return -1;
+    },
+    axis: (pad: number, axis: number): number => gamepad(pad)?.axes[axis] ?? 0,
+    button: (pad: number, button: number): boolean => gamepad(pad)?.buttons[button]?.pressed ?? false,
+    pointer: (): Pointer => ({ x: pointer.x, y: pointer.y, buttons: pointer.buttons }),
+    touches: (): Touch[] => [...fingers.values()],
+  };
+  const storagePrefix = `dotframe:${options.title}:`;
+  const storage: Storage = {
+    get: (key: string): string | null => {
+      try {
+        return localStorage.getItem(storagePrefix + key);
+      } catch {
+        return null;
+      }
+    },
+    set: (key: string, value: string): void => {
+      try {
+        localStorage.setItem(storagePrefix + key, value);
+      } catch {
+        // Storage can be unavailable (private mode, blocked site data); the game keeps running.
+      }
+    },
+  };
+
+  // Browsers start audio suspended until a user gesture.
+  const audioContext = new AudioContext();
+  const master = audioContext.createGain();
+  master.gain.value = 0.8;
+  master.connect(audioContext.destination);
+  const resume = (): void => {
+    if (audioContext.state === "suspended") audioContext.resume();
+    if (music && musicWanted && music.paused) music.play().catch(() => {});
+  };
+  globalThis.addEventListener("keydown", resume);
+  globalThis.addEventListener("pointerdown", resume);
+  const sounds: AudioBuffer[] = [];
+  const tracks: string[] = [];
+  let music: HTMLAudioElement | null = null;
+  let musicWanted = false;
+  let musicVolume = 1;
+  let masterVolume = 0.8;
+  const audio: Audio = {
+    loadSound: async (mp3: Uint8Array): Promise<number> => {
+      sounds.push(await audioContext.decodeAudioData(new Uint8Array(mp3).buffer));
+      return sounds.length - 1;
+    },
+    play: (sound: number, volume: number, rate: number): void => {
+      const buffer = sounds[sound];
+      if (!buffer) return;
+      const source = audioContext.createBufferSource();
+      source.buffer = buffer;
+      source.playbackRate.value = rate;
+      const gain = audioContext.createGain();
+      gain.gain.value = volume;
+      source.connect(gain).connect(master);
+      source.start();
+    },
+    tone: (frequency: number, duration: number, volume: number): void => {
+      const now = audioContext.currentTime;
+      const oscillator = audioContext.createOscillator();
+      const gain = audioContext.createGain();
+      oscillator.type = "square";
+      oscillator.frequency.value = frequency;
+      gain.gain.setValueAtTime(volume, now);
+      gain.gain.exponentialRampToValueAtTime(0.001, now + duration);
+      oscillator.connect(gain).connect(master);
+      oscillator.start(now);
+      oscillator.stop(now + duration);
+    },
+    loadMusic: async (mp3: Uint8Array): Promise<number> => {
+      tracks.push(URL.createObjectURL(new Blob([new Uint8Array(mp3)], { type: "audio/mpeg" })));
+      return tracks.length - 1;
+    },
+    playMusic: (track: number, loop: boolean, volume: number): void => {
+      music?.pause();
+      const url = tracks[track];
+      if (!url) return;
+      music = new globalThis.Audio(url);
+      music.loop = loop;
+      musicVolume = volume;
+      music.volume = musicVolume * masterVolume;
+      musicWanted = true;
+      music.play().catch(() => {});
+    },
+    stopMusic: (): void => {
+      music?.pause();
+      music = null;
+      musicWanted = false;
+    },
+    pauseMusic: (paused: boolean): void => {
+      musicWanted = !paused;
+      if (paused) music?.pause();
+      else music?.play().catch(() => {});
+    },
+    setMusicVolume: (volume: number): void => {
+      musicVolume = volume;
+      if (music) music.volume = musicVolume * masterVolume;
+    },
+    setMasterVolume: (volume: number): void => {
+      masterVolume = volume;
+      master.gain.value = volume;
+      if (music) music.volume = musicVolume * masterVolume;
+    },
+  };
+
+  const frame = setup({ gpu, input, audio, storage });
+  const start = performance.now();
+  const tick = (): void => {
+    if (!frame((performance.now() - start) / 1000)) return;
+    requestAnimationFrame(tick);
+  };
+  requestAnimationFrame(tick);
+}

package/templates/_base/AGENTS.md

@@ -0,0 +1,7 @@
+# __NAME__
+
+A dotframe game. Run `dotframe skills get core` before changing anything; it explains the edit, sim, snap, replay loop.
+
+- Game logic: `src/game.ts` (pure state, `step`, `render`). The sim contract: `sim.ts`.
+- Check a change: `dotframe sim --mash 7 --frames 600 --json`, then `dotframe snap --frame 300 --mash 7`.
+- Golden replays: `replays/*.json`, verified by `bun test`.

package/templates/_base/dotframe.json

@@ -0,0 +1,15 @@
+{
+  "name": "__NAME__",
+  "sim": "sim.ts",
+  "targets": {
+    "web": {
+      "steps": [
+        { "label": "bundle", "argv": ["bun", "build", "main.web.ts", "--outfile", "dist/web/main.js", "--target", "browser", "--minify"] },
+        { "label": "page", "argv": ["cp", "index.html", "dist/web/index.html"] }
+      ],
+      "out": "dist/web",
+      "deploy": { "provider": "vercel", "project": "__NAME__", "scope": "__SCOPE__" }
+    }
+  },
+  "assets": { "localOnly": [] }
+}

package/templates/_base/gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.dotframe
+.vercel
+*.png

package/templates/_base/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>__NAME__</title>
+    <style>
+      body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #000; }
+    </style>
+  </head>
+  <body>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

package/templates/_base/main.web.ts

@@ -0,0 +1,27 @@
+import { createDraw2D } from "dotframe/src/draw2d";
+import type { Frame } from "dotframe/src/gpu";
+import { Key } from "dotframe/src/input";
+import type { Platform } from "dotframe/src/platform";
+import { run } from "dotframe/src/web/run";
+import { createGame, keyInput, PLAYERS, render, step, WINDOW } from "./src/game";
+
+const STEP = 1 / 60;
+
+await run(WINDOW, ({ gpu, input }: Platform): Frame => {
+  const draw = createDraw2D(gpu, WINDOW.width, WINDOW.height);
+  const game = createGame(Math.floor(Math.random() * 1e9));
+  let simulated = -1;
+  return (time: number): boolean => {
+    if (simulated < 0) simulated = time;
+    // Fixed 60 Hz steps, so the browser plays exactly what dotframe sim simulates.
+    for (let n = 0; simulated + STEP <= time && n < 5; n++) {
+      const keys = [keyInput(input, [Key.A, Key.D, Key.W, Key.J]), keyInput(input, [Key.Left, Key.Right, Key.Up, Key.L])];
+      step(game, keys.slice(0, PLAYERS));
+      simulated += STEP;
+    }
+    draw.begin();
+    render(game, draw);
+    draw.end({ r: 0, g: 0, b: 0 });
+    return true;
+  };
+});

package/templates/_base/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "__NAME__",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "dotframe dev",
+    "test": "dotframe replay verify replays/*.json"
+  },
+  "dependencies": {
+    "dotframe": "^0.1.0"
+  }
+}