create-bloop 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bloop",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "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/draw.ts

@@ -74,8 +74,8 @@ export function draw(g: typeof game, toodle: Toodle) {
 
     const viewport = toodle.Node({
       size: {
-        width: toodle.resolution.width,
-        height: toodle.resolution.height,
+        width: toodle.resolution.width / toodle.camera.zoom,
+        height: toodle.resolution.height / toodle.camera.zoom,
       },
     });
 
@@ -123,7 +123,7 @@ export function draw(g: typeof game, toodle: Toodle) {
 
     const p1Score = gameScreen.add(
       toodle.Text("Roboto", `P1: ${bag.p1.score}`, {
-        fontSize: 16,
+        fontSize: 10,
         color: MARIO_COLOR,
       }),
     );
@@ -134,7 +134,7 @@ export function draw(g: typeof game, toodle: Toodle) {
 
     const p2Score = gameScreen.add(
       toodle.Text("Roboto", `P2: ${bag.p2.score}`, {
-        fontSize: 16,
+        fontSize: 10,
         color: LUIGI_COLOR,
       }),
     );

package/templates/mario/src/game.ts

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

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

@@ -1,6 +1,55 @@
 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?`,
+      );
+    }
+
+    // Queue effect if page isn't visible or window doesn't have focus (IDE covering browser)
+    if (document.visibilityState === "hidden" || !document.hasFocus()) {
+      glitchQueued = true;
+      return;
+    }
+    if (glitchTimeout > 0) {
+      clearTimeout(glitchTimeout);
+    }
+    toodle.postprocess = glitchEffect;
+    glitchTimeout = setTimeout(() => {
+      toodle.postprocess = null;
+    }, 1000);
+  }
+
+  document.addEventListener("visibilitychange", () => {
+    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", () => {
+    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;
   });
 }