create-bloop 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bloop",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Create a new Bloop game",
   "type": "module",
   "bin": "./dist/index.js",

package/templates/hello/package.json

@@ -13,8 +13,8 @@
     "vite": "^7.2.2"
   },
   "dependencies": {
-    "@bloopjs/bloop": "^0.0.90",
+    "@bloopjs/bloop": "^0.0.91",
     "@bloopjs/toodle": "^0.1.3",
-    "@bloopjs/web": "^0.0.90"
+    "@bloopjs/web": "^0.0.91"
   }
 }

package/templates/mario/package.json

@@ -15,8 +15,8 @@
     "vite": "^7.2.2"
   },
   "dependencies": {
-    "@bloopjs/bloop": "^0.0.90",
+    "@bloopjs/bloop": "^0.0.91",
     "@bloopjs/toodle": "^0.1.3",
-    "@bloopjs/web": "^0.0.90"
+    "@bloopjs/web": "^0.0.91"
   }
 }

package/templates/mario/src/config.ts

@@ -5,11 +5,11 @@ export const MOVE_SPEED = 3;
 export const MAX_FALL_SPEED = 10;
 
 // World (0,0 is center of screen, Y+ is up)
-export const GROUND_Y = -100;
+export const GROUND_Y = -80;
 export const BLOCK_Y = -10;
 export const BLOCK_SPEED = 1;
-export const BLOCK_MIN_X = -100;
-export const BLOCK_MAX_X = 100;
+export const BLOCK_MIN_X = -55;
+export const BLOCK_MAX_X = 55;
 
 // Player sizes
 export const PLAYER_WIDTH = 16;
@@ -18,8 +18,8 @@ export const BLOCK_SIZE = 16;
 export const COIN_SIZE = 12;
 
 // Starting positions
-export const P1_START_X = -60;
-export const P2_START_X = 60;
+export const P1_START_X = -55;
+export const P2_START_X = 55;
 
 // Animation timings
 export const COIN_VISIBLE_DURATION = 0.8; // seconds

package/templates/mario/src/draw.ts

@@ -1,11 +1,5 @@
 import { unwrap } from "@bloopjs/bloop";
-import type {
-  Color,
-  QuadNode,
-  SceneNode,
-  TextNode,
-  Toodle,
-} from "@bloopjs/toodle";
+import type { Color, Toodle } from "@bloopjs/toodle";
 import { Colors } from "@bloopjs/toodle";
 import {
   BLOCK_SIZE,
@@ -20,253 +14,202 @@ import type { game, Player, Pose } from "./game";
 // Placeholder colors until sprites are added
 const MARIO_COLOR = Colors.web.red;
 const LUIGI_COLOR = Colors.web.green;
-const BLOCK_COLOR = Colors.web.sienna;
 const COIN_COLOR = Colors.web.gold;
 const GROUND_COLOR = Colors.web.saddleBrown;
 
-/** Quads for each pose animation */
-type PoseQuads = Record<Pose, QuadNode>;
-
-export interface DrawState {
-  root: SceneNode;
-  // Screen containers
-  titleScreen: SceneNode;
-  gameScreen: SceneNode;
-  // Game elements (under gameScreen)
-  ground: QuadNode;
-  block: SceneNode;
-  coin: QuadNode;
-  p1: PoseQuads;
-  p2: PoseQuads;
-  viewport: SceneNode;
-  p1Score: TextNode;
-  p2Score: TextNode;
-  // Title elements (under titleScreen)
-  titleText: TextNode;
-  subtitleText: TextNode;
-}
+// Map pose to texture name
+const POSE_TEXTURES: Record<Pose, string> = {
+  idle: "marioIdle",
+  run: "marioWalk",
+  jump: "marioJump",
+  skid: "marioSkid",
+};
 
-export function createDrawState(toodle: Toodle): DrawState {
-  const root = toodle.Node({ scale: 3 });
+export function draw(g: typeof game, toodle: Toodle) {
+  const { bag } = g.context;
+  const isMobile = toodle.resolution.width < toodle.resolution.height;
 
-  // Title screen container
-  const titleScreen = root.add(toodle.Node({}));
-  const titleText = titleScreen.add(
-    toodle.Text("Roboto", "MARIO ROLLBACK", {
-      fontSize: 24,
-      color: { r: 1, g: 1, b: 1, a: 1 },
-      position: { x: 0, y: 20 },
-    }),
-  );
-  const subtitleText = titleScreen.add(
-    toodle.Text("Roboto", "[Space] Local  [Enter] Online", {
-      fontSize: 10,
-      color: { r: 1, g: 1, b: 1, a: 1 },
-      position: { x: 0, y: 0 },
-    }),
-  );
+  toodle.startFrame();
 
-  // Game screen container
-  const gameScreen = root.add(toodle.Node({}));
-  gameScreen.isActive = false;
+  const root = toodle.Node();
+
+  toodle.camera.zoom = 3;
+
+  if (bag.phase !== "playing") {
+    // Title screen
+    const titleScreen = root.add(toodle.Node({}));
+
+    titleScreen.add(
+      toodle.Text("Roboto", "Mario Rollback", {
+        fontSize: 20,
+        align: "center",
+        color: { r: 1, g: 1, b: 1, a: 1 },
+        position: { x: 0, y: 20 },
+        size: {
+          width: toodle.resolution.width - 100,
+          height: toodle.resolution.height,
+        },
+        shrinkToFit: {
+          minFontSize: 4,
+        },
+      }),
+    );
 
-  const ground = gameScreen.add(
-    toodle.shapes.Rect({
-      size: { width: 400, height: 40 },
-      position: { x: 0, y: GROUND_Y - 20 },
-      color: GROUND_COLOR,
-    }),
-  );
+    const subtitleText =
+      bag.phase === "waiting"
+        ? "Waiting for opponent..."
+        : isMobile
+          ? "Tap to find opponent"
+          : "[Enter/Click] Online  [Space] Local";
+
+    titleScreen.add(
+      toodle.Text("Roboto", subtitleText, {
+        fontSize: 10,
+        color: { r: 1, g: 1, b: 1, a: 1 },
+      }),
+    );
+  } else {
+    // Game screen
+    const gameScreen = root.add(toodle.Node({}));
 
-  const block = gameScreen.add(
-    toodle.Quad("brick", {
-      size: { width: BLOCK_SIZE, height: BLOCK_SIZE },
-    }),
-  );
+    const viewport = toodle.Node({
+      size: {
+        width: toodle.resolution.width,
+        height: toodle.resolution.height,
+      },
+    });
 
-  const coin = gameScreen.add(
-    toodle.shapes.Circle({
-      radius: COIN_SIZE / 2,
-      color: COIN_COLOR,
-    }),
-  );
+    // Ground
+    const ground = gameScreen.add(
+      toodle.shapes.Rect({
+        size: { width: viewport.size!.width, height: 1000 },
+        color: GROUND_COLOR,
+      }),
+    );
+    ground.setBounds({ top: GROUND_Y });
+
+    // Block
+    gameScreen.add(
+      toodle.Quad("brick", {
+        size: { width: BLOCK_SIZE, height: BLOCK_SIZE },
+        position: { x: bag.block.x, y: BLOCK_Y + BLOCK_SIZE / 2 },
+      }),
+    );
 
-  // Map pose to texture name
-  const poseTextures: Record<Pose, string> = {
-    idle: "marioIdle",
-    run: "marioWalk",
-    jump: "marioJump",
-    skid: "marioSkid",
-  };
-
-  // Create pose quads for a player
-  const createPoseQuads = (color?: typeof LUIGI_COLOR): PoseQuads => {
-    const poses = {} as PoseQuads;
-    for (const pose of ["idle", "run", "jump", "skid"] satisfies Pose[]) {
-      const quad = gameScreen.add(
-        toodle.Quad(poseTextures[pose], {
-          size: { width: PLAYER_WIDTH, height: PLAYER_HEIGHT },
-          region: { x: 0, y: 0, width: PLAYER_WIDTH, height: PLAYER_HEIGHT },
-          color,
+    // Coin
+    if (bag.coin.visible) {
+      const coinColor =
+        bag.coin.winner === 1
+          ? MARIO_COLOR
+          : bag.coin.winner === 2
+            ? LUIGI_COLOR
+            : COIN_COLOR;
+
+      gameScreen.add(
+        toodle.shapes.Circle({
+          radius: COIN_SIZE / 2,
+          color: coinColor,
+          position: { x: bag.coin.x, y: bag.coin.y },
         }),
       );
-      quad.isActive = false; // Start inactive, draw will activate the right one
-      poses[pose] = quad;
     }
-    return poses;
-  };
-
-  const p1 = createPoseQuads();
-  const p2 = createPoseQuads(LUIGI_COLOR);
-
-  const p1Score = gameScreen.add(
-    toodle.Text("Roboto", "P9: 0", {
-      fontSize: 16,
-      color: MARIO_COLOR,
-    }),
-  );
-
-  const p2Score = gameScreen.add(
-    toodle.Text("Roboto", "P2: 0", {
-      fontSize: 16,
-      color: LUIGI_COLOR,
-    }),
-  );
-
-  const viewport = toodle.Node({
-    size: { width: toodle.resolution.width, height: toodle.resolution.height },
-  });
-
-  return {
-    root,
-    titleScreen,
-    gameScreen,
-    ground,
-    block,
-    coin,
-    p1,
-    p2,
-    p1Score,
-    p2Score,
-    titleText,
-    subtitleText,
-    viewport,
-  };
-}
-
-export function draw(g: typeof game, toodle: Toodle, state: DrawState) {
-  const { bag } = g.context;
 
-  // Toggle screens
-  state.titleScreen.isActive = bag.phase !== "playing";
-  state.gameScreen.isActive = bag.phase === "playing";
-
-  // Update title text based on phase
-  if (bag.phase === "title") {
-    const isMobile = toodle.resolution.width < toodle.resolution.height;
-    state.subtitleText.text = isMobile
-      ? "Tap to find opponent"
-      : "[Enter/Click] Online  [Space] Local";
-  } else if (bag.phase === "waiting") {
-    state.subtitleText.text = "Waiting for opponent...";
-  }
-
-  // Update game positions only when playing
-  if (bag.phase === "playing") {
-    state.block.position = { x: bag.block.x, y: BLOCK_Y + BLOCK_SIZE / 2 };
-
-    state.coin.position = {
-      x: bag.coin.x,
-      y: bag.coin.y,
-    };
-    state.coin.isActive = bag.coin.visible;
-    state.coin.color =
-      bag.coin.winner === 1
-        ? MARIO_COLOR
-        : bag.coin.winner === 2
-          ? LUIGI_COLOR
-          : COIN_COLOR;
-    // Update player sprites
-    updatePlayerQuads(state.p1, bag.p1);
-    updatePlayerQuads(state.p2, bag.p2);
+    // Players
+    const p1Quad = drawPlayer(toodle, gameScreen, bag.p1);
+    const p2Quad = drawPlayer(toodle, gameScreen, bag.p2, LUIGI_COLOR);
 
+    // Scores
     const padding = 20;
 
-    state.p1Score.text = `P1: ${bag.p1.score}`;
-    state.p2Score.text = `P2: ${bag.p2.score}`;
-
-    state.viewport.size = {
-      width: toodle.resolution.width,
-      height: toodle.resolution.height,
-    };
-
-    state.ground.size.width = state.viewport.size.width;
-
-    state.p1Score.setBounds({
-      left: state.viewport.bounds.left + padding,
-      top: state.viewport.bounds.top - padding,
+    const p1Score = gameScreen.add(
+      toodle.Text("Roboto", `P1: ${bag.p1.score}`, {
+        fontSize: 16,
+        color: MARIO_COLOR,
+      }),
+    );
+    p1Score.setBounds({
+      left: viewport.bounds.left + padding,
+      top: viewport.bounds.top - padding,
     });
 
-    state.p2Score.setBounds({
-      right: state.viewport.bounds.right - padding,
-      top: state.viewport.bounds.top - padding,
+    const p2Score = gameScreen.add(
+      toodle.Text("Roboto", `P2: ${bag.p2.score}`, {
+        fontSize: 16,
+        color: LUIGI_COLOR,
+      }),
+    );
+    p2Score.setBounds({
+      right: viewport.bounds.right - padding,
+      top: viewport.bounds.top - padding,
     });
-  }
 
-  toodle.startFrame();
-  toodle.draw(state.root);
-  if (bag.debugHitboxes) {
-    drawHitboxes(toodle, state, bag);
+    // Debug hitboxes
+    if (bag.debugHitboxes) {
+      toodle.draw(root);
+      drawHitbox(toodle, p1Quad.bounds);
+      drawHitbox(toodle, p2Quad.bounds);
+      // Need to get block bounds - draw a hitbox at block position
+      drawHitbox(toodle, {
+        left: bag.block.x - BLOCK_SIZE / 2,
+        right: bag.block.x + BLOCK_SIZE / 2,
+        bottom: BLOCK_Y,
+        top: BLOCK_Y + BLOCK_SIZE,
+      });
+      if (bag.coin.visible) {
+        drawHitbox(toodle, {
+          left: bag.coin.x - COIN_SIZE / 2,
+          right: bag.coin.x + COIN_SIZE / 2,
+          bottom: bag.coin.y - COIN_SIZE / 2,
+          top: bag.coin.y + COIN_SIZE / 2,
+        });
+      }
+      toodle.endFrame();
+      return;
+    }
   }
+
+  toodle.draw(root);
   toodle.endFrame();
 }
 
-/** Updates a player's pose quads based on their current state */
-function updatePlayerQuads(quads: PoseQuads, player: Player) {
-  const poses: Pose[] = ["idle", "run", "jump", "skid"];
-
-  for (const pose of poses) {
-    const quad = quads[pose];
-    const isActive = pose === player.pose;
-    quad.isActive = isActive;
-    if (!isActive) {
-      continue;
-    }
-
-    // Update position
-    quad.position = {
-      x: player.x,
-      y: player.y + PLAYER_HEIGHT / 2,
-    };
-
-    // Update flip based on facing direction
-    quad.flipX = player.facingDir === -1;
-
-    // Update region from flipbook frame using static flipbooks + bag AnimState
-    const flipbook = unwrap(
-      player.anims[pose],
-      `No runtime flipbook for pose ${pose}`,
-    );
-    const frameIndex = flipbook.frameIndex % flipbook.frames.length;
-    const frame = flipbook.frames[frameIndex];
-    quad.region.x = frame.pos.x;
-    quad.region.y = frame.pos.y;
-    quad.region.width = frame.width;
-    quad.region.height = frame.height;
-  }
-}
+/** Draws a player sprite and returns the quad for hitbox drawing */
+function drawPlayer(
+  toodle: Toodle,
+  parent: ReturnType<Toodle["Node"]>,
+  player: Player,
+  color?: Color,
+) {
+  const pose = player.pose;
+  const textureName = POSE_TEXTURES[pose];
 
-function drawHitboxes(toodle: Toodle, state: DrawState, bag: typeof game.bag) {
-  const p1Quad = state.p1[bag.p1.pose];
-  const p2Quad = state.p2[bag.p2.pose];
+  const quad = parent.add(
+    toodle.Quad(textureName, {
+      size: { width: PLAYER_WIDTH, height: PLAYER_HEIGHT },
+      region: { x: 0, y: 0, width: PLAYER_WIDTH, height: PLAYER_HEIGHT },
+      color,
+      position: {
+        x: player.x,
+        y: player.y + PLAYER_HEIGHT / 2,
+      },
+    }),
+  );
 
-  toodle.draw(makeHitbox(toodle, p1Quad.bounds));
-  toodle.draw(makeHitbox(toodle, p2Quad.bounds));
-  toodle.draw(makeHitbox(toodle, state.block.bounds));
+  // Update flip based on facing direction
+  quad.flipX = player.facingDir === -1;
 
-  if (bag.coin.visible) {
-    toodle.draw(makeHitbox(toodle, state.coin.bounds));
-  }
+  // Update region from flipbook frame
+  const flipbook = unwrap(
+    player.anims[pose],
+    `No runtime flipbook for pose ${pose}`,
+  );
+  const frameIndex = flipbook.frameIndex % flipbook.frames.length;
+  const frame = flipbook.frames[frameIndex];
+  quad.region.x = frame.pos.x;
+  quad.region.y = frame.pos.y;
+  quad.region.width = frame.width;
+  quad.region.height = frame.height;
+
+  return quad;
 }
 
 const hitboxDefaultColor = { r: 1, g: 0, b: 1, a: 0.4 };
@@ -302,19 +245,21 @@ fn frag(vertex: VertexOutput) -> @location(0) vec4f {
   return hitboxShader;
 }
 
-function makeHitbox(
+function drawHitbox(
   toodle: Toodle,
   bounds: { left: number; right: number; top: number; bottom: number },
   color: Color = hitboxDefaultColor,
 ) {
-  return toodle.shapes
-    .Rect({
-      color,
-      size: {
-        width: bounds.right - bounds.left,
-        height: bounds.top - bounds.bottom,
-      },
-      shader: getHitboxShader(toodle),
-    })
-    .setBounds(bounds);
+  toodle.draw(
+    toodle.shapes
+      .Rect({
+        color,
+        size: {
+          width: bounds.right - bounds.left,
+          height: bounds.top - bounds.bottom,
+        },
+        shader: getHitboxShader(toodle),
+      })
+      .setBounds(bounds),
+  );
 }

package/templates/mario/src/game.ts

@@ -1,4 +1,4 @@
-import { Bloop } from "@bloopjs/bloop";
+import { Bloop, Util } from "@bloopjs/bloop";
 import * as cfg from "./config";
 import type { Flipbook } from "./flipbook";
 import { FLIPBOOKS } from "./sprites";

package/templates/mario/src/main.ts

@@ -2,11 +2,9 @@ import "./style.css";
 import { Toodle } from "@bloopjs/toodle";
 import { start } from "@bloopjs/web";
 import { createChromaticAberrationEffect } from "./chromatic-aberration";
-import { createDrawState, draw as drawFn } from "./draw";
+import { draw } from "./draw";
 import { game } from "./game";
 
-let draw = drawFn;
-
 // boot up the game
 const app = await start({
   game,
@@ -22,9 +20,9 @@ if (import.meta.hot) {
     await app.acceptHmr(newModule?.game);
   });
 
-  import.meta.hot.accept("./draw", async (newModule) => {
-    draw = newModule?.draw;
-  });
+  // import.meta.hot.accept("./draw", async (newModule) => {
+  //   draw = newModule?.draw;
+  // });
 }
 
 const canvas = app.canvas;
@@ -61,10 +59,8 @@ await toodle.assets.loadFont(
   new URL("https://toodle.gg/fonts/Roboto-Regular-msdf.json"),
 );
 
-const drawState = createDrawState(toodle);
-
 requestAnimationFrame(function frame() {
-  draw(app.game, toodle, drawState);
+  draw(app.game, toodle);
   requestAnimationFrame(frame);
 });
 

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

@@ -1,169 +0,0 @@
-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,
-    wasmUrl: 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, {
-    checkpointInterval: 30,
-  });
-  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"),
-      brick: spriteUrl("Brick"),
-      ground: spriteUrl("Ground"),
-    },
-    autoLoad: true,
-  });
-
-  await toodle.assets.loadFont(
-    "Roboto",
-    new URL("https://toodle.gg/fonts/Roboto-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

@@ -1,68 +0,0 @@
-<!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>