create-bloop 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bloop",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "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.91",
+    "@bloopjs/bloop": "^0.0.92",
     "@bloopjs/toodle": "^0.1.3",
-    "@bloopjs/web": "^0.0.91"
+    "@bloopjs/web": "^0.0.92"
   }
 }

package/templates/mario/package.json

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

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

@@ -31,7 +31,9 @@ export function draw(g: typeof game, toodle: Toodle) {
 
   toodle.startFrame();
 
-  const root = toodle.Node({ scale: 3 });
+  const root = toodle.Node();
+
+  toodle.camera.zoom = 3;
 
   if (bag.phase !== "playing") {
     // Title screen
@@ -60,7 +62,7 @@ export function draw(g: typeof game, toodle: Toodle) {
           ? "Tap to find opponent"
           : "[Enter/Click] Online  [Space] Local";
 
-    const text = titleScreen.add(
+    titleScreen.add(
       toodle.Text("Roboto", subtitleText, {
         fontSize: 10,
         color: { r: 1, g: 1, b: 1, a: 1 },
@@ -78,13 +80,13 @@ export function draw(g: typeof game, toodle: Toodle) {
     });
 
     // Ground
-    gameScreen.add(
+    const ground = gameScreen.add(
       toodle.shapes.Rect({
-        size: { width: viewport.size!.width, height: 40 },
-        position: { x: 0, y: GROUND_Y - 20 },
+        size: { width: viewport.size!.width, height: 1000 },
         color: GROUND_COLOR,
       }),
     );
+    ground.setBounds({ top: GROUND_Y });
 
     // Block
     gameScreen.add(

package/templates/mario/src/game.ts

@@ -100,12 +100,6 @@ game.system("session-watcher", {
   },
 });
 
-game.system("screen", {
-  resize({ screen }) {
-    console.log("resize", { width: screen.width, height: screen.height });
-  },
-});
-
 game.system(
   "title-screen",
   PhaseSystem("title", {

package/templates/mario/src/{chromatic-aberration.ts → glitchEffect.ts}

@@ -1,6 +1,68 @@
 import { Backends, Colors, type Toodle } from "@bloopjs/toodle";
 
-export function createChromaticAberrationEffect(toodle: Toodle): Backends.PostProcess {
+export function setupGlitchEffect(toodle: Toodle): () => void {
+  let glitchEffect: Backends.PostProcess | null = null;
+  let glitchTimeout: number = -1;
+  let glitchQueued = false;
+
+  if (toodle.backend.type === "webgpu") {
+    glitchEffect = createChromaticAberrationEffect(toodle);
+  }
+
+  function doGlitchEffect() {
+    if (!glitchEffect) {
+      return console.warn(
+        `No glitch effect available - are we running on webgl2?`,
+      );
+    }
+
+    console.log("doGlitchEffect", performance.now(), {
+      hasFocus: document.hasFocus(),
+    });
+    // Queue effect if page isn't visible or window doesn't have focus (IDE covering browser)
+    if (document.visibilityState === "hidden" || !document.hasFocus()) {
+      console.log("queueing glitch");
+      glitchQueued = true;
+      return;
+    }
+    console.log("doing glitch immediately");
+    if (glitchTimeout > 0) {
+      clearTimeout(glitchTimeout);
+    }
+    toodle.postprocess = glitchEffect;
+    glitchTimeout = setTimeout(() => {
+      toodle.postprocess = null;
+    }, 1000);
+  }
+
+  document.addEventListener("visibilitychange", () => {
+    console.log(
+      "visibilityStateChange",
+      document.visibilityState,
+      performance.now(),
+    );
+    if (document.visibilityState === "visible" && glitchQueued) {
+      glitchQueued = false;
+      doGlitchEffect();
+    }
+  });
+
+  // Handle case where another app (like IDE) covers the browser window
+  // visibilitychange doesn't fire for this, but focus does when clicking back
+  window.addEventListener("focus", () => {
+    console.log("window focus", performance.now());
+    if (glitchQueued) {
+      glitchQueued = false;
+      doGlitchEffect();
+    }
+  });
+
+  return doGlitchEffect;
+}
+
+function createChromaticAberrationEffect(
+  toodle: Toodle,
+): Backends.PostProcess {
   if (!(toodle.backend instanceof Backends.WebGPUBackend)) {
     throw new Error("Post-processing requires WebGPU backend");
   }

package/templates/mario/src/main.ts

@@ -1,9 +1,11 @@
 import "./style.css";
 import { Toodle } from "@bloopjs/toodle";
 import { start } from "@bloopjs/web";
-import { createChromaticAberrationEffect } from "./chromatic-aberration";
-import { draw } from "./draw";
+import { draw as drawFn } from "./draw";
 import { game } from "./game";
+import { setupGlitchEffect } from "./glitchEffect";
+
+let draw = drawFn;
 
 // boot up the game
 const app = await start({
@@ -14,17 +16,6 @@ const app = await start({
   },
 });
 
-// HMR support
-if (import.meta.hot) {
-  import.meta.hot.accept("./game", async (newModule) => {
-    await app.acceptHmr(newModule?.game);
-  });
-
-  // import.meta.hot.accept("./draw", async (newModule) => {
-  //   draw = newModule?.draw;
-  // });
-}
-
 const canvas = app.canvas;
 if (!canvas) throw new Error("No canvas element found");
 
@@ -87,14 +78,17 @@ window.addEventListener("keydown", (e) => {
   }
 });
 
-// Debug: Press G to toggle glitch effect on webgpu backend
-if (toodle.backend.type === "webgpu") {
-  const glitchEffect = createChromaticAberrationEffect(toodle);
-  let glitchEnabled = false;
-  window.addEventListener("keydown", (e) => {
-    if (e.key === "g") {
-      glitchEnabled = !glitchEnabled;
-      toodle.postprocess = glitchEnabled ? glitchEffect : null;
-    }
+const doGlitchEffect = setupGlitchEffect(toodle);
+
+// HMR support
+if (import.meta.hot) {
+  import.meta.hot.accept("./game", async (newModule) => {
+    doGlitchEffect();
+    await app.acceptHmr(newModule?.game);
+  });
+
+  import.meta.hot.accept("./draw", async (newModule) => {
+    doGlitchEffect();
+    draw = newModule?.draw;
   });
 }

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

@@ -1,167 +0,0 @@
-import "./style.css";
-import { Toodle } from "@bloopjs/toodle";
-import { start } from "@bloopjs/web";
-import { 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"),
-  );
-
-  requestAnimationFrame(function frame() {
-    draw(app.game, toodle);
-    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>