create-bloop 0.0.16 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bloop",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "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.88",
+    "@bloopjs/bloop": "^0.0.90",
     "@bloopjs/toodle": "^0.1.3",
-    "@bloopjs/web": "^0.0.88"
+    "@bloopjs/web": "^0.0.90"
   }
 }

package/templates/hello/src/draw.ts

@@ -6,7 +6,7 @@ export function draw(g: typeof game, toodle: Toodle) {
   toodle.startFrame();
   toodle.draw(
     toodle.shapes.Circle({
-      idealSize: { width: 100, height: 100 },
+      radius: 50,
       scale: bag.scale,
       position: { x: bag.x, y: bag.y },
       color: Colors.web.hotPink,
@@ -14,7 +14,7 @@ export function draw(g: typeof game, toodle: Toodle) {
   );
   toodle.draw(
     toodle.shapes.Rect({
-      idealSize: { width: 10, height: 10 },
+      size: { width: 10, height: 10 },
       position: toodle.convertSpace(
         { x: bag.mouse.x, y: bag.mouse.y },
         { from: "screen", to: "world" },

package/templates/mario/package.json

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

package/templates/mario/src/game.ts

@@ -5,6 +5,7 @@ import { FLIPBOOKS } from "./sprites";
 import { AnimationSystem } from "./systems/animation";
 import { CollisionSystem } from "./systems/collision";
 import { InputsSystem } from "./systems/inputs";
+import { MatchmakingSystem } from "./systems/matchmaking";
 import { PhaseSystem } from "./systems/phase";
 import { PhysicsSystem } from "./systems/physics";
 
@@ -113,12 +114,10 @@ game.system(
   }),
 );
 
+game.system("matchmaking", MatchmakingSystem);
 game.system("inputs", InputsSystem);
-
 game.system("physics", PhysicsSystem);
-
 game.system("collision", CollisionSystem);
-
 game.system("animation", AnimationSystem);
 
 // Debug hitbox toggle (H key)

package/templates/mario/src/main.ts

@@ -1,12 +1,13 @@
 import "./style.css";
 import { Toodle } from "@bloopjs/toodle";
-import { joinRollbackRoom, start } from "@bloopjs/web";
+import { start } from "@bloopjs/web";
 import { createChromaticAberrationEffect } from "./chromatic-aberration";
 import { createDrawState, draw as drawFn } from "./draw";
 import { game } from "./game";
 
 let draw = drawFn;
 
+// boot up the game
 const app = await start({
   game,
   startRecording: false,
@@ -15,6 +16,17 @@ 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");
 
@@ -56,7 +68,20 @@ requestAnimationFrame(function frame() {
   requestAnimationFrame(frame);
 });
 
-let networkJoined = false;
+game.system("recording-watcher", {
+  netcode({ event, time }) {
+    console.log("[netcode]", event.type, event);
+    if (event.type === "session:start") {
+      console.log(
+        "[netcode]",
+        "session started, recording at frame",
+        time.frame,
+      );
+
+      app.sim.record(100_000);
+    }
+  },
+});
 
 // Debug: Press R to start recording mid-game
 window.addEventListener("keydown", (e) => {
@@ -77,43 +102,3 @@ if (toodle.backend.type === "webgpu") {
     }
   });
 }
-
-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) => {
-    await app.acceptHmr(newModule?.game);
-  });
-
-  import.meta.hot.accept("./draw", async (newModule) => {
-    draw = newModule?.draw;
-  });
-}

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

@@ -9,18 +9,18 @@ export const InputsSystem = PhaseSystem("playing", {
 
     // P1 Horizontal movement
     p1.vx = 0;
-    if (players[0].keys.a.held) {
+    if (players.get(0).keys.a.held) {
       p1.x -= cfg.MOVE_SPEED;
       p1.vx = -cfg.MOVE_SPEED;
       p1.facingDir = -1;
     }
-    if (players[0].keys.d.held) {
+    if (players.get(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;
+    const wantsJump = players.get(0).keys.w.down || players.get(0).mouse.left.down;
     if (wantsJump && p1.grounded) {
       p1.vy = cfg.JUMP_VELOCITY;
       p1.grounded = false;
@@ -28,36 +28,36 @@ export const InputsSystem = PhaseSystem("playing", {
 
     // P2 Horizontal movement
     p2.vx = 0;
-    if (players[1].keys.a.held) {
+    if (players.get(1).keys.a.held) {
       p2.x -= cfg.MOVE_SPEED;
       p2.vx = -cfg.MOVE_SPEED;
       p2.facingDir = -1;
     }
-    if (players[1].keys.d.held) {
+    if (players.get(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) {
+    if ((players.get(1).keys.w.down || players.get(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) {
+      if (players.get(0).keys.j.held) {
         p2.x -= cfg.MOVE_SPEED;
         p2.vx = -cfg.MOVE_SPEED;
         p2.facingDir = -1;
       }
-      if (players[0].keys.l.held) {
+      if (players.get(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) {
+      if (players.get(0).keys.i.down && p2.grounded) {
         p2.vy = cfg.JUMP_VELOCITY;
         p2.grounded = false;
       }

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

@@ -0,0 +1,24 @@
+import { PhaseSystem } from "./phase";
+
+export const MatchmakingSystem = PhaseSystem("title", {
+  update({ bag, inputs, net }) {
+    if (net.isInSession) return;
+    if (inputs.keys.enter.down || inputs.mouse.left.down) {
+      bag.mode = "online";
+      bag.phase = "waiting";
+      net.wantsRoomCode = "mario-demo";
+      console.log("[netcode] setting wantsRoomCode");
+    }
+  },
+
+  netcode({ event, bag }) {
+    switch (event.type) {
+      case "session:start":
+        bag.phase = "playing";
+        break;
+      case "session:end":
+        bag.phase = "title";
+        break;
+    }
+  },
+});

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

@@ -75,6 +75,8 @@ async function loadTape(bytes: Uint8Array, fileName: string) {
       marioWalk: spriteUrl("MarioWalk"),
       marioJump: spriteUrl("MarioJump"),
       marioSkid: spriteUrl("MarioSkid"),
+      brick: spriteUrl("Brick"),
+      ground: spriteUrl("Ground"),
     },
     autoLoad: true,
   });