create-bloop 0.0.1

package/templates/mario/src/main.ts

@@ -0,0 +1,126 @@
+import "./style.css";
+import { Toodle } from "@bloopjs/toodle";
+import { joinRollbackRoom, start } from "@bloopjs/web";
+import { createChromaticAberrationEffect } from "./chromatic-aberration";
+import { createDrawState, draw as drawFn } from "./draw";
+import { game } from "./game";
+
+// In dev, vite serves wasm from /bloop-wasm/. In prod, it's bundled at ./bloop.wasm
+const wasmUrl = import.meta.env.DEV
+  ? new URL("/bloop-wasm/bloop.wasm", window.location.href)
+  : new URL("./bloop.wasm", import.meta.url);
+
+let draw = drawFn;
+
+const app = await start({
+  game,
+  engineWasmUrl: wasmUrl,
+  startRecording: false,
+  debugUi: {
+    initiallyVisible: false,
+  },
+});
+
+const canvas = app.canvas;
+if (!canvas) throw new Error("No canvas element found");
+
+const toodle = await Toodle.attach(canvas, {
+  filter: "nearest",
+  backend: "webgpu",
+  limits: { textureArrayLayers: 5 },
+});
+
+toodle.clearColor = { r: 0.36, g: 0.58, b: 0.99, a: 1 }; // Mario sky blue
+
+// Load sprites
+const spriteUrl = (name: string) =>
+  new URL(
+    `${import.meta.env.BASE_URL}sprites/${name}.png`,
+    window.location.href,
+  );
+
+await toodle.assets.registerBundle("main", {
+  textures: {
+    marioIdle: spriteUrl("MarioIdle"),
+    marioWalk: spriteUrl("MarioWalk"),
+    marioJump: spriteUrl("MarioJump"),
+    marioSkid: spriteUrl("MarioSkid"),
+  },
+  autoLoad: true,
+});
+
+await toodle.assets.loadFont(
+  "ComicNeue",
+  new URL("https://toodle.gg/fonts/ComicNeue-Regular-msdf.json"),
+);
+
+const drawState = createDrawState(toodle);
+
+requestAnimationFrame(function frame() {
+  draw(app.game, toodle, drawState);
+  requestAnimationFrame(frame);
+});
+
+let networkJoined = false;
+
+// Debug: Press R to start recording mid-game
+window.addEventListener("keydown", (e) => {
+  if (e.key === "r" && !app.sim.isRecording) {
+    app.sim.record();
+    console.log("Started recording at frame", app.sim.time.frame);
+  }
+});
+
+// Debug: Press G to toggle glitch effect
+const glitchEffect = createChromaticAberrationEffect(toodle);
+let glitchEnabled = false;
+window.addEventListener("keydown", (e) => {
+  if (e.key === "g") {
+    glitchEnabled = !glitchEnabled;
+    toodle.postprocess = glitchEnabled ? glitchEffect : null;
+  }
+});
+
+game.system("title-input", {
+  update({ bag, inputs }) {
+    if (bag.phase !== "title") return;
+
+    if ((inputs.keys.enter.down || inputs.mouse.left.down) && !networkJoined) {
+      // Online multiplayer - wait for connection
+      bag.mode = "online";
+      bag.phase = "waiting";
+      networkJoined = true;
+
+      // Phase transitions are handled by the session-watcher system
+      joinRollbackRoom("mario-demo", app, {
+        onSessionStart() {
+          bag.phase = "playing";
+
+          app.sim.record(100_000);
+          console.log(
+            "Network session started, recording at frame",
+            app.sim.time.frame,
+          );
+        },
+        onSessionEnd() {
+          networkJoined = false;
+        },
+      });
+    }
+  },
+});
+
+// HMR support
+if (import.meta.hot) {
+  import.meta.hot.accept("./game", async (newModule) => {
+    if (newModule?.game) {
+      await app.acceptHmr(newModule.game, { wasmUrl });
+    }
+  });
+
+  import.meta.hot.accept("./draw", async (newModule) => {
+    if (newModule?.draw && newModule?.createDrawState) {
+      draw = newModule.draw;
+    }
+  });
+}

package/templates/mario/src/sprites.ts

@@ -0,0 +1,14 @@
+// TODO: allow loading animated sprite JSON from async boot
+import marioIdleJson from "../public/sprites/MarioIdle.json";
+import marioJumpJson from "../public/sprites/MarioJump.json";
+import marioSkidJson from "../public/sprites/MarioSkid.json";
+import marioWalkJson from "../public/sprites/MarioWalk.json";
+import { AsepriteFlipbook } from "./flipbook";
+
+/** Static flipbook data - frame definitions from Aseprite */
+export const FLIPBOOKS = {
+  idle: AsepriteFlipbook(marioIdleJson),
+  run: AsepriteFlipbook(marioWalkJson),
+  jump: AsepriteFlipbook(marioJumpJson),
+  skid: AsepriteFlipbook(marioSkidJson),
+};

package/templates/mario/src/style.css

@@ -0,0 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}

package/templates/mario/src/systems/animation.ts

@@ -0,0 +1,30 @@
+import { reset, step } from "../flipbook";
+import type { Player, Pose } from "../game";
+import { PhaseSystem } from "./phase";
+
+export const AnimationSystem = PhaseSystem("playing", {
+  update({ bag, time }) {
+    updatePlayerAnimation(bag.p1, time.dt);
+    updatePlayerAnimation(bag.p2, time.dt);
+  },
+});
+
+function updatePlayerAnimation(player: Player, dt: number) {
+  const newPose = determinePose(player);
+
+  if (newPose !== player.pose) {
+    player.pose = newPose;
+    reset(player.anims[player.pose]);
+  }
+
+  if (!player.anims[player.pose]) {
+    throw new Error(`No animation found for pose ${player.pose}`);
+  }
+  step(player.anims[player.pose], dt * 1000);
+}
+
+function determinePose(player: Player): Pose {
+  if (!player.grounded) return "jump";
+  if (player.vx !== 0) return "run";
+  return "idle";
+}

package/templates/mario/src/systems/collision.ts

@@ -0,0 +1,41 @@
+import * as cfg from "../config";
+import { PhaseSystem } from "./phase";
+
+export const CollisionSystem = PhaseSystem("playing", {
+  update({ bag, time }) {
+    const block = bag.block;
+
+    for (const p of [bag.p1, bag.p2]) {
+      // Only check if player is moving upward (positive vy)
+      if (p.vy <= 0) continue;
+
+      // Check if player's head intersects with block
+      // Player's feet are at p.y, head is at p.y + PLAYER_HEIGHT
+      const playerTop = p.y + cfg.PLAYER_HEIGHT;
+      const playerLeft = p.x - cfg.PLAYER_WIDTH / 2;
+      const playerRight = p.x + cfg.PLAYER_WIDTH / 2;
+
+      // Block bottom is at BLOCK_Y, top is at BLOCK_Y + BLOCK_SIZE
+      const blockBottom = cfg.BLOCK_Y;
+      const blockLeft = block.x - cfg.BLOCK_SIZE / 2;
+      const blockRight = block.x + cfg.BLOCK_SIZE / 2;
+
+      // AABB collision - head hitting bottom of block
+      const hitX = playerRight > blockLeft && playerLeft < blockRight;
+      const hitY =
+        playerTop > blockBottom && playerTop < blockBottom + cfg.BLOCK_SIZE;
+
+      if (hitX && hitY && bag.coin.visible === false) {
+        // Bonk! Stop upward movement
+        p.vy = 0;
+        p.y = blockBottom - cfg.PLAYER_HEIGHT;
+
+        p.score += 1;
+
+        bag.coin.hitTime = time.time;
+        bag.coin.visible = true;
+        bag.coin.winner = p === bag.p1 ? 1 : 2;
+      }
+    }
+  },
+});

package/templates/mario/src/systems/inputs.ts

@@ -0,0 +1,66 @@
+import * as cfg from "../config";
+import { PhaseSystem } from "./phase";
+
+// Player 1 input: WASD
+export const InputsSystem = PhaseSystem("playing", {
+  update({ bag, players, net }) {
+    const p1 = bag.p1;
+    const p2 = bag.p2;
+
+    // P1 Horizontal movement
+    p1.vx = 0;
+    if (players[0].keys.a.held) {
+      p1.x -= cfg.MOVE_SPEED;
+      p1.vx = -cfg.MOVE_SPEED;
+      p1.facingDir = -1;
+    }
+    if (players[0].keys.d.held) {
+      p1.x += cfg.MOVE_SPEED;
+      p1.vx = cfg.MOVE_SPEED;
+      p1.facingDir = 1;
+    }
+    // P1 Jump
+    const wantsJump = players[0].keys.w.down || players[0].mouse.left.down;
+    if (wantsJump && p1.grounded) {
+      p1.vy = cfg.JUMP_VELOCITY;
+      p1.grounded = false;
+    }
+
+    // P2 Horizontal movement
+    p2.vx = 0;
+    if (players[1].keys.a.held) {
+      p2.x -= cfg.MOVE_SPEED;
+      p2.vx = -cfg.MOVE_SPEED;
+      p2.facingDir = -1;
+    }
+    if (players[1].keys.d.held) {
+      p2.x += cfg.MOVE_SPEED;
+      p2.vx = cfg.MOVE_SPEED;
+      p2.facingDir = 1;
+    }
+    // P2 Jump
+    if ((players[1].keys.w.down || players[1].mouse.left.down) && p2.grounded) {
+      p2.vy = cfg.JUMP_VELOCITY;
+      p2.grounded = false;
+    }
+
+    if (!net.isInSession) {
+      // locally, control second player with ijkl
+      if (players[0].keys.j.held) {
+        p2.x -= cfg.MOVE_SPEED;
+        p2.vx = -cfg.MOVE_SPEED;
+        p2.facingDir = -1;
+      }
+      if (players[0].keys.l.held) {
+        p2.x += cfg.MOVE_SPEED;
+        p2.vx = cfg.MOVE_SPEED;
+        p2.facingDir = 1;
+      }
+      // Jump
+      if (players[0].keys.i.down && p2.grounded) {
+        p2.vy = cfg.JUMP_VELOCITY;
+        p2.grounded = false;
+      }
+    }
+  },
+});

package/templates/mario/src/systems/phase.ts

@@ -0,0 +1,12 @@
+import type { GameSystem, Phase } from "../game";
+
+export function PhaseSystem(phase: Phase, system: GameSystem): GameSystem {
+  const original = system.update;
+  return {
+    ...system,
+    update(ctx) {
+      if (ctx.bag.phase !== phase) return;
+      original?.(ctx);
+    },
+  };
+}

package/templates/mario/src/systems/physics.ts

@@ -0,0 +1,22 @@
+import * as cfg from "../config";
+import { PhaseSystem } from "./phase";
+
+// Gravity for both players
+export const PhysicsSystem = PhaseSystem("playing", {
+  update({ bag }) {
+    for (const p of [bag.p1, bag.p2]) {
+      if (!p.grounded) {
+        p.vy -= cfg.GRAVITY;
+        p.vy = Math.max(p.vy, -cfg.MAX_FALL_SPEED);
+      }
+
+      p.y += p.vy;
+
+      if (p.y <= cfg.GROUND_Y) {
+        p.y = cfg.GROUND_Y;
+        p.vy = 0;
+        p.grounded = true;
+      }
+    }
+  },
+});

package/templates/mario/src/tape-load.ts

@@ -0,0 +1,165 @@
+import "./style.css";
+import { Toodle } from "@bloopjs/toodle";
+import { start } from "@bloopjs/web";
+import { createDrawState, draw } from "./draw";
+import { game } from "./game";
+
+const wasmUrl = import.meta.env.DEV
+  ? new URL("/bloop-wasm/bloop.wasm", window.location.href)
+  : new URL("./bloop.wasm", import.meta.url);
+
+const DB_NAME = "mario-tapes";
+const STORE_NAME = "tapes";
+const TAPE_KEY = "last";
+
+const statusEl = document.getElementById("status")!;
+const inputEl = document.getElementById("tape-input") as HTMLInputElement;
+const replayBtn = document.getElementById("replay-last") as HTMLButtonElement;
+
+function openDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, 1);
+    request.onerror = () => reject(request.error);
+    request.onsuccess = () => resolve(request.result);
+    request.onupgradeneeded = () => {
+      request.result.createObjectStore(STORE_NAME);
+    };
+  });
+}
+
+async function loadTape(bytes: Uint8Array, fileName: string) {
+  statusEl.textContent = "Loading tape...";
+
+  // Start the app with recording disabled (we're loading a tape)
+  const app = await start({
+    game,
+    engineWasmUrl: wasmUrl,
+    debugUi: true,
+    startRecording: false,
+  });
+
+  import.meta.hot?.accept("./game", async (newModule) => {
+    await app.acceptHmr(newModule?.game, {
+      wasmUrl,
+      files: ["./game"],
+    });
+  });
+
+  // Load the tape and pause playback
+  app.loadTape(bytes);
+  app.sim.pause();
+
+  const canvas = app.canvas;
+  if (!canvas) throw new Error("No canvas element found");
+
+  const toodle = await Toodle.attach(canvas, {
+    filter: "nearest",
+    backend: "webgpu",
+    limits: { textureArrayLayers: 5 },
+  });
+
+  toodle.clearColor = { r: 0.36, g: 0.58, b: 0.99, a: 1 };
+
+  // Load sprites
+  const spriteUrl = (name: string) =>
+    new URL(
+      `${import.meta.env.BASE_URL}sprites/${name}.png`,
+      window.location.href,
+    );
+
+  await toodle.assets.registerBundle("main", {
+    textures: {
+      marioIdle: spriteUrl("MarioIdle"),
+      marioWalk: spriteUrl("MarioWalk"),
+      marioJump: spriteUrl("MarioJump"),
+      marioSkid: spriteUrl("MarioSkid"),
+    },
+    autoLoad: true,
+  });
+
+  await toodle.assets.loadFont(
+    "ComicNeue",
+    new URL("https://toodle.gg/fonts/ComicNeue-Regular-msdf.json"),
+  );
+
+  const drawState = createDrawState(toodle);
+
+  requestAnimationFrame(function frame() {
+    draw(app.game, toodle, drawState);
+    requestAnimationFrame(frame);
+  });
+
+  statusEl.textContent = `Loaded tape: ${fileName}. Press Escape to toggle debug UI.`;
+
+  // Hide the file input and show the game
+  inputEl.style.display = "none";
+  replayBtn.style.display = "none";
+  document.querySelector(".container")!.remove();
+}
+
+async function saveTapeToStorage(
+  bytes: Uint8Array,
+  fileName: string,
+): Promise<void> {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    tx.objectStore(STORE_NAME).put({ bytes, fileName }, TAPE_KEY);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+async function loadTapeFromStorage(): Promise<{
+  bytes: Uint8Array;
+  fileName: string;
+} | null> {
+  try {
+    const db = await openDB();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readonly");
+      const request = tx.objectStore(STORE_NAME).get(TAPE_KEY);
+      request.onsuccess = () => resolve(request.result ?? null);
+      request.onerror = () => reject(request.error);
+    });
+  } catch {
+    return null;
+  }
+}
+
+// Check for saved tape on page load
+loadTapeFromStorage().then((savedTape) => {
+  if (savedTape) {
+    replayBtn.style.display = "block";
+    replayBtn.textContent = `Replay last tape (${savedTape.fileName})`;
+  }
+});
+
+replayBtn.addEventListener("click", async () => {
+  const saved = await loadTapeFromStorage();
+  if (!saved) {
+    statusEl.textContent = "No saved tape found";
+    return;
+  }
+
+  try {
+    await loadTape(saved.bytes, saved.fileName);
+  } catch (err) {
+    statusEl.textContent = `Error loading tape: ${err}`;
+    console.error(err);
+  }
+});
+
+inputEl.addEventListener("change", async () => {
+  const file = inputEl.files?.[0];
+  if (!file) return;
+
+  try {
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    await saveTapeToStorage(bytes, file.name);
+    await loadTape(bytes, file.name);
+  } catch (err) {
+    statusEl.textContent = `Error loading tape: ${err}`;
+    console.error(err);
+  }
+});

package/templates/mario/tape-load.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Load Tape - Mario</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 20px;
+      font-family: system-ui, sans-serif;
+      background: #1a1a2e;
+      color: #eee;
+    }
+    .container {
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    h1 {
+      margin-bottom: 20px;
+    }
+    .file-input-wrapper {
+      margin-bottom: 20px;
+    }
+    input[type="file"] {
+      padding: 10px;
+      background: #16213e;
+      border: 2px dashed #0f3460;
+      border-radius: 8px;
+      color: #eee;
+      cursor: pointer;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    input[type="file"]:hover {
+      border-color: #e94560;
+    }
+    .status {
+      padding: 10px;
+      background: #16213e;
+      border-radius: 8px;
+      margin-bottom: 20px;
+    }
+    .instructions {
+      font-size: 14px;
+      color: #888;
+      line-height: 1.6;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Load Tape</h1>
+    <div class="file-input-wrapper">
+      <input type="file" id="tape-input" accept=".bloop" />
+    </div>
+    <button id="replay-last" style="display: none; margin-bottom: 20px; padding: 10px 20px; background: #e94560; border: none; border-radius: 8px; color: #eee; cursor: pointer; font-size: 16px;">
+      Replay last tape
+    </button>
+    <div class="status" id="status">Select a .bloop tape file to load</div>
+    <div class="instructions">
+      <p>To save a tape: Run the mario game and press Ctrl+S (or Cmd+S on Mac)</p>
+      <p>Playback controls: Use the bottom bar buttons or hotkeys (5=back, 6=pause, 7=forward)</p>
+    </div>
+  </div>
+  <script type="module" src="/src/tape-load.ts"></script>
+</body>
+</html>

package/templates/mario/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "@webgpu/types"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* JSX for Preact */
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+
+    /* Linting */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/templates/mario/vite.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  // WASM loads from CDN automatically via @bloopjs/engine
+});