@bloopjs/web 0.0.97 → 0.0.99

package/package.json

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

package/src/App.ts

@@ -221,6 +221,15 @@ export class App {
       window.addEventListener("resize", emitResize);
     }
 
+    // Convert viewport coordinates to canvas-relative coordinates
+    const toCanvasCoords = (clientX: number, clientY: number) => {
+      if (canvas) {
+        const rect = canvas.getBoundingClientRect();
+        return { x: clientX - rect.left, y: clientY - rect.top };
+      }
+      return { x: clientX, y: clientY };
+    };
+
     // Detect devicePixelRatio changes (monitor switch, browser zoom)
     const updatePixelRatioListener = () => {
       const mediaQuery = window.matchMedia(
@@ -249,8 +258,10 @@ export class App {
     window.addEventListener("keyup", handleKeyup);
 
     const handleMousemove = (event: MouseEvent) => {
-      if (shouldEmitInputs())
-        this.sim.emit.mousemove(event.clientX, event.clientY);
+      if (shouldEmitInputs()) {
+        const { x, y } = toCanvasCoords(event.clientX, event.clientY);
+        this.sim.emit.mousemove(x, y);
+      }
     };
     window.addEventListener("mousemove", handleMousemove);
 
@@ -277,7 +288,8 @@ export class App {
       if (!shouldEmitInputs()) return;
       const touch = event.touches[0];
       if (touch) {
-        this.sim.emit.mousemove(touch.clientX, touch.clientY);
+        const { x, y } = toCanvasCoords(touch.clientX, touch.clientY);
+        this.sim.emit.mousemove(x, y);
         this.sim.emit.mousedown("Left");
       }
     };
@@ -292,7 +304,8 @@ export class App {
       if (!shouldEmitInputs()) return;
       const touch = event.touches[0];
       if (touch) {
-        this.sim.emit.mousemove(touch.clientX, touch.clientY);
+        const { x, y } = toCanvasCoords(touch.clientX, touch.clientY);
+        this.sim.emit.mousemove(x, y);
       }
     };
     window.addEventListener("touchmove", handleTouchmove);

package/src/debugui/DebugUi.ts

@@ -1,6 +1,6 @@
-import { type ComponentChild, render } from "preact";
+import { type ComponentChild, h, render } from "preact";
 import { Root } from "./components/Root.tsx";
-import { type DebugState, cycleLayout, debugState } from "./state.ts";
+import { cycleLayout, type DebugState, debugState } from "./state.ts";
 import { styles } from "./styles.ts";
 
 export type DebugUiOptions = {
@@ -69,7 +69,7 @@ export class DebugUi {
 
   #render(): void {
     render(
-      Root({ canvas: this.#canvas, hotkey: this.#hotkey }) as ComponentChild,
+      Root({ canvas: this.#canvas, hotkey: this.#hotkey }),
       this.#mountPoint,
     );
   }