@bloopjs/web 0.0.107 → 0.0.109

package/package.json

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

package/src/debugui/DebugUi.ts

@@ -54,9 +54,6 @@ export class DebugUi {
     // Use provided canvas or create new one
     this.#canvas = options.canvas ?? document.createElement("canvas");
 
-    // Append canvas to host element (light DOM) for slot projection
-    this.#host.appendChild(this.#canvas);
-
     // Render Preact app
     this.#render();
 
@@ -73,7 +70,7 @@ export class DebugUi {
   }
 
   #render(): void {
-    render(Root({ hotkey: this.#hotkey }), this.#mountPoint);
+    render(Root({ canvas: this.#canvas, hotkey: this.#hotkey }), this.#mountPoint);
   }
 
   #setupHotkey(): () => void {

package/src/debugui/components/Root.tsx

@@ -1,3 +1,4 @@
+import { useRef, useEffect } from "preact/hooks";
 import { debugState } from "../state.ts";
 import { Stats } from "./Stats.tsx";
 import { Logs } from "./Logs.tsx";
@@ -7,17 +8,18 @@ import { VerticalBar } from "./VerticalBar.tsx";
 import { BottomBar } from "./BottomBar.tsx";
 
 type RootProps = {
+  canvas: HTMLCanvasElement;
   hotkey?: string;
 };
 
-export function Root({ hotkey = "Escape" }: RootProps) {
+export function Root({ canvas, hotkey = "Escape" }: RootProps) {
   const layoutMode = debugState.layoutMode.value;
 
   if (layoutMode === "off") {
     return (
       <>
         <main className="fullscreen">
-          <CanvasSlot />
+          <GameCanvas canvas={canvas} />
         </main>
         <DebugToggle hotkey={hotkey} />
       </>
@@ -27,7 +29,7 @@ export function Root({ hotkey = "Escape" }: RootProps) {
   if (layoutMode === "letterboxed") {
     return (
       <>
-        <LetterboxedLayout />
+        <LetterboxedLayout canvas={canvas} />
         <DebugToggle hotkey={hotkey} />
       </>
     );
@@ -38,7 +40,7 @@ export function Root({ hotkey = "Escape" }: RootProps) {
     <>
       <main className="layout">
         <section className="game">
-          <CanvasSlot />
+          <GameCanvas canvas={canvas} />
         </section>
         <section className="stats">
           <Stats />
@@ -52,7 +54,7 @@ export function Root({ hotkey = "Escape" }: RootProps) {
   );
 }
 
-function LetterboxedLayout() {
+function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
   const isOnline = debugState.netStatus.value.peers.length > 0;
   const advantage = debugState.advantage.value ?? 0;
   const frameTime = debugState.frameTime.value;
@@ -98,7 +100,7 @@ function LetterboxedLayout() {
         displayValue={leftDisplayValue}
       />
       <div className={gameClassName}>
-        <CanvasSlot />
+        <GameCanvas canvas={canvas} />
       </div>
       <VerticalBar
         value={rightValue}
@@ -111,10 +113,15 @@ function LetterboxedLayout() {
   );
 }
 
-function CanvasSlot() {
-  return (
-    <div className="canvas-container">
-      <slot />
-    </div>
-  );
+function GameCanvas({ canvas }: { canvas: HTMLCanvasElement }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container && !container.contains(canvas)) {
+      container.appendChild(canvas);
+    }
+  }, [canvas]);
+
+  return <div className="canvas-container" ref={containerRef} />;
 }