@bloopjs/web 0.0.88 → 0.0.90

package/dist/netcode/mod.d.ts

@@ -2,8 +2,6 @@ export type { PeerId, BrokerMessage, PeerMessage } from "./protocol.ts";
 export type { Log, LogOpts, LogDirection, LogSeverity, OnLogCallback, } from "./logs.ts";
 export type { WebRtcPipe } from "./transport.ts";
 export type { RoomEvents } from "./broker.ts";
-export type { JoinRollbackRoomOptions } from "./scaffold.ts";
 export { PacketType } from "./protocol.ts";
 export { logger } from "./logs.ts";
-export { joinRollbackRoom } from "./scaffold.ts";
 //# sourceMappingURL=mod.d.ts.map

package/dist/netcode/mod.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../src/netcode/mod.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACxE,YAAY,EACV,GAAG,EACH,OAAO,EACP,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../src/netcode/mod.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACxE,YAAY,EACV,GAAG,EACH,OAAO,EACP,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC"}

package/dist/netcode/reconcile.d.ts

@@ -0,0 +1,3 @@
+import type { App } from "../App.ts";
+export declare function reconcile(app: App, signal: AbortSignal): Promise<void>;
+//# sourceMappingURL=reconcile.d.ts.map

package/dist/netcode/reconcile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reconcile.d.ts","sourceRoot":"","sources":["../../src/netcode/reconcile.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAiBrC,wBAAsB,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAiC5E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloopjs/web",
-  "version": "0.0.88",
+  "version": "0.0.90",
   "author": "Neil Sarkar",
   "type": "module",
   "repository": {
@@ -33,8 +33,8 @@
     "typescript": "^5"
   },
   "dependencies": {
-    "@bloopjs/bloop": "0.0.88",
-    "@bloopjs/engine": "0.0.88",
+    "@bloopjs/bloop": "0.0.90",
+    "@bloopjs/engine": "0.0.90",
     "@preact/signals": "^1.3.1",
     "partysocket": "^1.1.6",
     "preact": "^10.25.4"

package/src/App.ts

@@ -19,6 +19,7 @@ import {
   type RoomEvents,
 } from "./netcode/broker";
 import { logger } from "./netcode/logs.ts";
+import { reconcile } from "./netcode/reconcile.ts";
 
 export type StartOptions = {
   /** A bloop game instance */
@@ -85,6 +86,8 @@ export class App {
   #now: number = performance.now();
   #debugUi: DebugUi | null = null;
 
+  #abortController: AbortController = new AbortController();
+
   constructor(
     sim: Sim,
     game: Bloop<any>,
@@ -106,6 +109,10 @@ export class App {
     };
 
     this.subscribe();
+
+    reconcile(this, this.#abortController.signal).catch((err) => {
+      console.error("Error in lemmyloop:", err);
+    });
   }
 
   /** The simulation instance associated with this app */
@@ -172,6 +179,63 @@ export class App {
     // Skip emitting input events during replay to avoid filling the event buffer
     const shouldEmitInputs = () => !this.sim.isReplaying;
 
+    // Resize handling - emits resize events when viewport changes
+    let resizeObserver: ResizeObserver | null = null;
+    let cleanupPixelRatio: (() => void) | null = null;
+
+    const emitResize = () => {
+      const canvas = this.canvas;
+      const pixelRatio = window.devicePixelRatio || 1;
+
+      let width: number;
+      let height: number;
+
+      if (canvas) {
+        const rect = canvas.getBoundingClientRect();
+        width = Math.round(rect.width);
+        height = Math.round(rect.height);
+      } else {
+        // Fallback to window dimensions if no canvas
+        width = window.innerWidth;
+        height = window.innerHeight;
+      }
+
+      this.sim.emit.resize(
+        width,
+        height,
+        Math.round(width * pixelRatio),
+        Math.round(height * pixelRatio),
+        pixelRatio,
+      );
+    };
+
+    // Observe canvas size changes
+    const canvas = this.canvas;
+    if (canvas) {
+      resizeObserver = new ResizeObserver(() => emitResize());
+      resizeObserver.observe(canvas);
+    } else {
+      // Fallback: observe window resize if no canvas
+      window.addEventListener("resize", emitResize);
+    }
+
+    // Detect devicePixelRatio changes (monitor switch, browser zoom)
+    const updatePixelRatioListener = () => {
+      const mediaQuery = window.matchMedia(
+        `(resolution: ${window.devicePixelRatio}dppx)`,
+      );
+      const handler = () => {
+        emitResize();
+        updatePixelRatioListener(); // Re-register for new ratio
+      };
+      mediaQuery.addEventListener("change", handler, { once: true });
+      return () => mediaQuery.removeEventListener("change", handler);
+    };
+    cleanupPixelRatio = updatePixelRatioListener();
+
+    // Emit initial resize event
+    emitResize();
+
     const handleKeydown = (event: KeyboardEvent) => {
       if (shouldEmitInputs()) this.sim.emit.keydown(event.code as Key);
     };
@@ -353,6 +417,9 @@ export class App {
       window.removeEventListener("touchstart", handleTouchstart);
       window.removeEventListener("touchend", handleTouchend);
       window.removeEventListener("touchmove", handleTouchmove);
+      window.removeEventListener("resize", emitResize);
+      resizeObserver?.disconnect();
+      cleanupPixelRatio?.();
       if (this.#rafHandle != null) {
         cancelAnimationFrame(this.#rafHandle);
       }
@@ -367,6 +434,7 @@ export class App {
     this.afterFrame.unsubscribeAll();
     this.onHmr.unsubscribeAll();
     this.#debugUi?.unmount();
+    this.#abortController.abort();
   }
 
   /**

package/src/netcode/mod.ts

@@ -9,8 +9,6 @@ export type {
 } from "./logs.ts";
 export type { WebRtcPipe } from "./transport.ts";
 export type { RoomEvents } from "./broker.ts";
-export type { JoinRollbackRoomOptions } from "./scaffold.ts";
 
 export { PacketType } from "./protocol.ts";
 export { logger } from "./logs.ts";
-export { joinRollbackRoom } from "./scaffold.ts";

package/src/netcode/reconcile.ts

@@ -0,0 +1,171 @@
+import { unwrap } from "@bloopjs/bloop";
+import type { App } from "../App.ts";
+import * as Debug from "../debugui/mod.ts";
+import { logger } from "./logs.ts";
+
+// State
+let udp: RTCDataChannel | null = null;
+let localPeerId: number | null = null;
+let remotePeerId: number | null = null;
+let localStringPeerId: string | null = null;
+let remoteStringPeerId: string | null = null;
+const incomingPackets: Uint8Array[] = [];
+
+// actual netcode state (vs desired)
+const actual = {
+  roomCode: "",
+};
+
+export async function reconcile(app: App, signal: AbortSignal): Promise<void> {
+  // Process packets and send our state each frame
+  app.beforeFrame.subscribe((_frame) => {
+    if (!app.game.context.net.isInSession) {
+      return;
+    }
+
+    try {
+      receivePackets(app);
+      sendPacket(app);
+    } catch (e) {
+      console.error("Error in beforeFrame:", e);
+    }
+  });
+
+  // Wire up logger to debug state
+  logger.onLog = (log) => {
+    Debug.addLog(log);
+  };
+
+  while (!signal.aborted) {
+    const { net } = app.game.context;
+    if (net.wantsRoomCode && actual.roomCode !== net.wantsRoomCode) {
+      console.log("[netcode] wants a room code", {
+        actual: actual.roomCode,
+        wants: net.wantsRoomCode,
+      });
+      actual.roomCode = net.wantsRoomCode;
+      joinRollbackRoom(net.wantsRoomCode, app);
+    }
+
+    await sleep(150);
+  }
+}
+
+async function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function joinRollbackRoom(roomId: string, app: App): void {
+  app.joinRoom(roomId, {
+    onPeerIdAssign: (peerId) => {
+      localStringPeerId = peerId;
+    },
+    onBrokerMessage: (_message) => {},
+    onMessage(_peerId, data, _reliable) {
+      incomingPackets.push(new Uint8Array(data));
+    },
+    onDataChannelClose(_peerId, reliable) {
+      if (!reliable && remotePeerId !== null) {
+        app.sim.emit.network("peer:leave", { peerId: remotePeerId });
+      }
+    },
+    onDataChannelOpen(peerId, reliable, channel) {
+      if (!reliable) {
+        udp = channel;
+
+        if (localStringPeerId === null) {
+          console.error("[netcode] Local peer ID not assigned yet!");
+          return;
+        }
+
+        const ids = assignPeerIds(localStringPeerId, peerId);
+        localPeerId = ids.local;
+        Debug.setLocalId(localPeerId);
+        remotePeerId = ids.remote;
+        remoteStringPeerId = peerId;
+        Debug.setRemoteId(remotePeerId);
+
+        // Set up local and remote peers in net state
+        app.sim.emit.network("peer:join", { peerId: localPeerId });
+        app.sim.emit.network("peer:join", { peerId: remotePeerId });
+        app.sim.emit.network("peer:assign_local_id", { peerId: localPeerId });
+        app.sim.emit.network("session:start", {});
+      }
+    },
+    onPeerConnected(peerId) {
+      Debug.addPeer({
+        id: peerId,
+        nickname: peerId.substring(0, 6),
+        ack: -1,
+        seq: -1,
+        lastPacketTime: performance.now(),
+      });
+      console.log(
+        `[netcode] Peer connected: ${peerId}. Total peers: ${Debug.debugState.netStatus.value.peers.length}`,
+      );
+    },
+    onPeerDisconnected(peerId) {
+      Debug.removePeer(peerId);
+      if (remotePeerId !== null && peerId === remoteStringPeerId) {
+        app.sim.emit.network("peer:leave", { peerId: remotePeerId });
+        app.sim.emit.network("session:end", {});
+      }
+    },
+  });
+}
+
+function assignPeerIds(
+  localId: string,
+  remoteId: string,
+): { local: number; remote: number } {
+  if (localId < remoteId) {
+    return { local: 0, remote: 1 };
+  } else {
+    return { local: 1, remote: 0 };
+  }
+}
+
+function receivePackets(app: App) {
+  for (const packetData of incomingPackets) {
+    app.sim.emit.packet(packetData);
+
+    if (remotePeerId == null) {
+      return;
+    }
+
+    const peerState = unwrap(
+      app.sim.net.peers[remotePeerId],
+      `Remote peer state not found for peerId ${remotePeerId}`,
+    );
+    Debug.updatePeer(remoteStringPeerId!, {
+      ack: peerState.ack,
+      seq: peerState.seq,
+      lastPacketTime: performance.now(),
+    });
+  }
+  incomingPackets.length = 0;
+}
+
+function sendPacket(app: App) {
+  if (!udp || remotePeerId === null) {
+    console.warn("[netcode] Cannot send packet, udp or remotePeerId is null");
+    return;
+  }
+
+  if (udp.readyState !== "open") {
+    console.warn(
+      "[netcode] Data channel not open, cannot send packet. readyState=",
+      udp.readyState,
+    );
+    return;
+  }
+
+  const packet = app.sim.getOutboundPacket(remotePeerId);
+
+  if (!packet) {
+    console.warn("[netcode] No packet to send");
+    return;
+  }
+
+  udp.send(packet);
+}

package/dist/netcode/scaffold.d.ts

@@ -1,13 +0,0 @@
-import type { App } from "../App.ts";
-export type JoinRollbackRoomOptions = {
-    /** Called when session becomes active */
-    onSessionStart?: () => void;
-    /** Called when session ends */
-    onSessionEnd?: () => void;
-};
-/**
- * Join a rollback netcode room and wire up packet processing.
- * This is a scaffold/stopgap - not the final architecture.
- */
-export declare function joinRollbackRoom(roomId: string, app: App, opts?: JoinRollbackRoomOptions): void;
-//# sourceMappingURL=scaffold.d.ts.map

package/dist/netcode/scaffold.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../../src/netcode/scaffold.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAIrC,MAAM,MAAM,uBAAuB,GAAG;IACpC,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,IAAI,CAAC,EAAE,uBAAuB,GAC7B,IAAI,CAmJN"}

package/src/netcode/scaffold.ts

@@ -1,168 +0,0 @@
-import { unwrap } from "@bloopjs/bloop";
-import type { App } from "../App.ts";
-import * as Debug from "../debugui/mod.ts";
-import { logger } from "./logs.ts";
-
-export type JoinRollbackRoomOptions = {
-  /** Called when session becomes active */
-  onSessionStart?: () => void;
-  /** Called when session ends */
-  onSessionEnd?: () => void;
-};
-
-/**
- * Join a rollback netcode room and wire up packet processing.
- * This is a scaffold/stopgap - not the final architecture.
- */
-export function joinRollbackRoom(
-  roomId: string,
-  app: App,
-  opts?: JoinRollbackRoomOptions,
-): void {
-  // State
-  let udp: RTCDataChannel | null = null;
-  let sessionActive = false;
-  let localPeerId: number | null = null;
-  let remotePeerId: number | null = null;
-  let localStringPeerId: string | null = null;
-  let remoteStringPeerId: string | null = null;
-  const incomingPackets: Uint8Array[] = [];
-
-  function assignPeerIds(
-    localId: string,
-    remoteId: string,
-  ): { local: number; remote: number } {
-    if (localId < remoteId) {
-      return { local: 0, remote: 1 };
-    } else {
-      return { local: 1, remote: 0 };
-    }
-  }
-
-  function receivePackets() {
-    for (const packetData of incomingPackets) {
-      app.sim.emit.packet(packetData);
-
-      if (remotePeerId == null) {
-        return;
-      }
-
-      const peerState = unwrap(
-        app.sim.net.peers[remotePeerId],
-        `Remote peer state not found for peerId ${remotePeerId}`,
-      );
-      Debug.updatePeer(remoteStringPeerId!, {
-        ack: peerState.ack,
-        seq: peerState.seq,
-        lastPacketTime: performance.now(),
-      });
-    }
-    incomingPackets.length = 0;
-  }
-
-  function sendPacket() {
-    if (!udp || remotePeerId === null) {
-      console.warn("[netcode] Cannot send packet, udp or remotePeerId is null");
-      return;
-    }
-
-    if (udp.readyState !== "open") {
-      console.warn(
-        "[netcode] Data channel not open, cannot send packet. readyState=",
-        udp.readyState,
-      );
-      return;
-    }
-
-    const packet = app.sim.getOutboundPacket(remotePeerId);
-
-    if (!packet) {
-      console.warn("[netcode] No packet to send");
-      return;
-    }
-
-    udp.send(packet);
-  }
-
-  // Wire up logger to debug state
-  logger.onLog = (log) => {
-    Debug.addLog(log);
-  };
-
-  app.joinRoom(roomId, {
-    onPeerIdAssign: (peerId) => {
-      localStringPeerId = peerId;
-    },
-    onBrokerMessage: (_message) => {},
-    onMessage(_peerId, data, _reliable) {
-      incomingPackets.push(new Uint8Array(data));
-    },
-    onDataChannelClose(peerId, reliable) {
-      if (!reliable && remotePeerId !== null) {
-        app.sim.emit.network("peer:leave", { peerId: remotePeerId });
-        sessionActive = false;
-        opts?.onSessionEnd?.();
-      }
-    },
-    onDataChannelOpen(peerId, reliable, channel) {
-      if (!reliable) {
-        udp = channel;
-
-        if (localStringPeerId === null) {
-          console.error("[netcode] Local peer ID not assigned yet!");
-          return;
-        }
-
-        const ids = assignPeerIds(localStringPeerId, peerId);
-        localPeerId = ids.local;
-        Debug.setLocalId(localPeerId);
-        remotePeerId = ids.remote;
-        remoteStringPeerId = peerId;
-        Debug.setRemoteId(remotePeerId);
-
-        // Set up local and remote peers in net state
-        app.sim.emit.network("peer:join", { peerId: localPeerId });
-        app.sim.emit.network("peer:join", { peerId: remotePeerId });
-        app.sim.emit.network("peer:assign_local_id", { peerId: localPeerId });
-        app.sim.emit.network("session:start", {});
-
-        sessionActive = true;
-        opts?.onSessionStart?.();
-      }
-    },
-    onPeerConnected(peerId) {
-      Debug.addPeer({
-        id: peerId,
-        nickname: peerId.substring(0, 6),
-        ack: -1,
-        seq: -1,
-        lastPacketTime: performance.now(),
-      });
-      console.log(
-        `[netcode] Peer connected: ${peerId}. Total peers: ${Debug.debugState.netStatus.value.peers.length}`,
-      );
-    },
-    onPeerDisconnected(peerId) {
-      Debug.removePeer(peerId);
-      if (remotePeerId !== null && peerId === remoteStringPeerId) {
-        app.sim.emit.network("peer:leave", { peerId: remotePeerId });
-        sessionActive = false;
-        opts?.onSessionEnd?.();
-      }
-    },
-  });
-
-  // Process packets and send our state each frame
-  app.beforeFrame.subscribe((_frame) => {
-    if (!sessionActive || !udp || remotePeerId === null) {
-      return;
-    }
-
-    try {
-      receivePackets();
-      sendPacket();
-    } catch (e) {
-      console.error("Error in beforeFrame:", e);
-    }
-  });
-}