@bloopjs/web 0.0.56 → 0.0.57

package/dist/mod.js

@@ -3440,6 +3440,7 @@ __export(exports_mod, {
   resetState: () => resetState,
   removePeer: () => removePeer,
   debugState: () => debugState,
+  cycleLayout: () => cycleLayout,
   clearLogs: () => clearLogs,
   addPeer: () => addPeer,
   addLog: () => addLog,
@@ -4471,7 +4472,7 @@ function useSignalEffect(i4) {
 }
 
 // src/debugui/state.ts
-var isVisible = d2(false);
+var layoutMode = d2("off");
 var netStatus = d2({
   ourId: null,
   remoteId: null,
@@ -4479,16 +4480,35 @@ var netStatus = d2({
   peers: []
 });
 var logs = d2([]);
+var fps = d2(0);
+var frameTime = d2(0);
+var snapshotSize = d2(0);
+var frameNumber = d2(0);
 var debugState = {
-  isVisible,
+  layoutMode,
+  isVisible: w3(() => layoutMode.value !== "off"),
   netStatus,
   logs,
   peer: w3(() => netStatus.value.peers[0] ?? null),
   advantage: w3(() => {
     const peer = netStatus.value.peers[0];
     return peer ? peer.seq - peer.ack : null;
-  })
+  }),
+  fps,
+  frameTime,
+  snapshotSize,
+  frameNumber
 };
+function cycleLayout() {
+  const current = layoutMode.value;
+  if (current === "off") {
+    layoutMode.value = "letterboxed";
+  } else if (current === "letterboxed") {
+    layoutMode.value = "full";
+  } else {
+    layoutMode.value = "off";
+  }
+}
 function addLog(log) {
   debugState.logs.value = [...debugState.logs.value, log];
 }
@@ -4538,7 +4558,7 @@ function clearLogs() {
   debugState.logs.value = [];
 }
 function resetState() {
-  debugState.isVisible.value = false;
+  debugState.layoutMode.value = "off";
   debugState.logs.value = [];
   debugState.netStatus.value = {
     ourId: null,
@@ -4546,6 +4566,10 @@ function resetState() {
     rtt: null,
     peers: []
   };
+  debugState.fps.value = 0;
+  debugState.frameTime.value = 0;
+  debugState.snapshotSize.value = 0;
+  debugState.frameNumber.value = 0;
 }
 // ../../node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js
 var f4 = 0;
@@ -4808,26 +4832,257 @@ function LogEntry({ log }) {
 
 // src/debugui/components/DebugToggle.tsx
 function DebugToggle({ hotkey = "Escape" }) {
-  const isVisible2 = debugState.isVisible.value;
-  const toggle = () => {
-    debugState.isVisible.value = !debugState.isVisible.value;
-  };
+  const isVisible = debugState.isVisible.value;
   return /* @__PURE__ */ u4("button", {
     className: "debug-toggle",
-    onClick: toggle,
+    onClick: cycleLayout,
     onMouseDown: (e4) => e4.stopPropagation(),
     onMouseUp: (e4) => e4.stopPropagation(),
-    title: isVisible2 ? `Hide debug (${hotkey})` : `Show debug (${hotkey})`,
-    children: isVisible2 ? "✕" : "⚙"
+    title: isVisible ? `Hide debug (${hotkey})` : `Show debug (${hotkey})`,
+    children: isVisible ? "✕" : "⚙"
+  }, undefined, false, undefined, this);
+}
+
+// src/debugui/components/TopBar.tsx
+function TopBar({ leftLabel, rightLabel }) {
+  const fps2 = debugState.fps.value;
+  const frameNumber2 = debugState.frameNumber.value;
+  const rtt = debugState.netStatus.value.rtt;
+  const isOnline = debugState.netStatus.value.peers.length > 0;
+  return /* @__PURE__ */ u4("div", {
+    className: "top-bar",
+    children: [
+      /* @__PURE__ */ u4("span", {
+        className: "top-bar-side-label",
+        children: leftLabel
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ u4("div", {
+        className: "top-bar-center",
+        children: [
+          /* @__PURE__ */ u4("div", {
+            className: "top-bar-item",
+            children: [
+              /* @__PURE__ */ u4("span", {
+                className: "top-bar-label",
+                children: "FPS"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ u4("span", {
+                className: "top-bar-value",
+                children: fps2
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ u4("div", {
+            className: "top-bar-item",
+            children: [
+              /* @__PURE__ */ u4("span", {
+                className: "top-bar-label",
+                children: "Frame"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ u4("span", {
+                className: "top-bar-value",
+                children: frameNumber2
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          isOnline && rtt !== null && /* @__PURE__ */ u4("div", {
+            className: "top-bar-item",
+            children: [
+              /* @__PURE__ */ u4("span", {
+                className: "top-bar-label",
+                children: "Ping"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ u4("span", {
+                className: "top-bar-value",
+                children: [
+                  rtt,
+                  "ms"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ u4("span", {
+        className: "top-bar-side-label",
+        children: rightLabel
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/debugui/components/VerticalBar.tsx
+function VerticalBar({
+  value,
+  max,
+  side,
+  color = "#4a9eff"
+}) {
+  const percentage = max > 0 ? Math.min(100, value / max * 100) : 0;
+  return /* @__PURE__ */ u4("div", {
+    className: `${side}-bar`,
+    children: /* @__PURE__ */ u4("div", {
+      className: "vertical-bar",
+      children: /* @__PURE__ */ u4("div", {
+        className: "vertical-bar-fill",
+        style: { height: `${percentage}%`, background: color }
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 
+// src/debugui/components/BottomBar.tsx
+function BottomBar({
+  tapeUtilization = 0,
+  playheadPosition = 0,
+  isPlaying = true
+}) {
+  const handleJumpBack = () => {};
+  const handleStepBack = () => {};
+  const handlePlayPause = () => {};
+  const handleStepForward = () => {};
+  const handleJumpForward = () => {};
+  const handleSeek = () => {};
+  return /* @__PURE__ */ u4("div", {
+    className: "bottom-bar",
+    children: [
+      /* @__PURE__ */ u4("div", {
+        className: "playbar-controls",
+        children: [
+          /* @__PURE__ */ u4("button", {
+            className: "playbar-btn",
+            onClick: handleJumpBack,
+            children: [
+              "<<",
+              /* @__PURE__ */ u4("span", {
+                className: "tooltip tooltip-left",
+                children: [
+                  "Jump back ",
+                  /* @__PURE__ */ u4("kbd", {
+                    children: "4"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ u4("button", {
+            className: "playbar-btn",
+            onClick: handleStepBack,
+            children: [
+              "<",
+              /* @__PURE__ */ u4("span", {
+                className: "tooltip",
+                children: [
+                  "Step back ",
+                  /* @__PURE__ */ u4("kbd", {
+                    children: "5"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ u4("button", {
+            className: "playbar-btn",
+            onClick: handlePlayPause,
+            children: [
+              isPlaying ? "||" : ">",
+              /* @__PURE__ */ u4("span", {
+                className: "tooltip",
+                children: [
+                  isPlaying ? "Pause" : "Play",
+                  " ",
+                  /* @__PURE__ */ u4("kbd", {
+                    children: "6"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ u4("button", {
+            className: "playbar-btn",
+            onClick: handleStepForward,
+            children: [
+              ">",
+              /* @__PURE__ */ u4("span", {
+                className: "tooltip",
+                children: [
+                  "Step forward ",
+                  /* @__PURE__ */ u4("kbd", {
+                    children: "7"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ u4("button", {
+            className: "playbar-btn",
+            onClick: handleJumpForward,
+            children: [
+              ">>",
+              /* @__PURE__ */ u4("span", {
+                className: "tooltip",
+                children: [
+                  "Jump forward ",
+                  /* @__PURE__ */ u4("kbd", {
+                    children: "8"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ u4("div", {
+        className: "seek-bar",
+        onClick: handleSeek,
+        children: [
+          /* @__PURE__ */ u4("div", {
+            className: "seek-bar-fill",
+            style: { width: `${tapeUtilization * 100}%` }
+          }, undefined, false, undefined, this),
+          tapeUtilization > 0 && /* @__PURE__ */ u4("div", {
+            className: "seek-bar-position",
+            style: { left: `${playheadPosition * tapeUtilization * 100}%` }
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/debugui/components/Root.tsx
 function Root({ canvas, hotkey = "Escape" }) {
-  const isVisible2 = debugState.isVisible.value;
+  const layoutMode2 = debugState.layoutMode.value;
+  if (layoutMode2 === "off") {
+    return /* @__PURE__ */ u4(k, {
+      children: [
+        /* @__PURE__ */ u4("main", {
+          className: "fullscreen",
+          children: /* @__PURE__ */ u4(GameCanvas, {
+            canvas
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ u4(DebugToggle, {
+          hotkey
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  if (layoutMode2 === "letterboxed") {
+    return /* @__PURE__ */ u4(k, {
+      children: [
+        /* @__PURE__ */ u4(LetterboxedLayout, {
+          canvas
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ u4(DebugToggle, {
+          hotkey
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
   return /* @__PURE__ */ u4(k, {
     children: [
-      isVisible2 ? /* @__PURE__ */ u4("main", {
+      /* @__PURE__ */ u4("main", {
         className: "layout",
         children: [
           /* @__PURE__ */ u4("section", {
@@ -4845,14 +5100,53 @@ function Root({ canvas, hotkey = "Escape" }) {
             children: /* @__PURE__ */ u4(Logs, {}, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : /* @__PURE__ */ u4("main", {
-        className: "fullscreen",
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ u4(DebugToggle, {
+        hotkey
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function LetterboxedLayout({ canvas }) {
+  const isOnline = debugState.netStatus.value.peers.length > 0;
+  const advantage = debugState.advantage.value ?? 0;
+  const frameTime2 = debugState.frameTime.value;
+  const snapshotSize2 = debugState.snapshotSize.value;
+  const leftValue = isOnline ? Math.abs(advantage) : frameTime2;
+  const leftMax = isOnline ? 10 : 16.67;
+  const leftLabel = isOnline ? "ADV" : "MS";
+  const leftColor = isOnline ? advantage >= 0 ? "#4a9eff" : "#ff4a4a" : frameTime2 > 16.67 ? "#ff4a4a" : "#4aff4a";
+  const rightValue = isOnline ? 0 : snapshotSize2;
+  const rightMax = isOnline ? 10 : 1e4;
+  const rightLabel = isOnline ? "RB" : "KB";
+  return /* @__PURE__ */ u4("main", {
+    className: "layout-letterboxed",
+    children: [
+      /* @__PURE__ */ u4(TopBar, {
+        leftLabel,
+        rightLabel
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ u4(VerticalBar, {
+        value: leftValue,
+        max: leftMax,
+        side: "left",
+        color: leftColor
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ u4("div", {
+        className: "letterboxed-game",
         children: /* @__PURE__ */ u4(GameCanvas, {
           canvas
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ u4(DebugToggle, {
-        hotkey
+      /* @__PURE__ */ u4(VerticalBar, {
+        value: rightValue,
+        max: rightMax,
+        side: "right"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ u4(BottomBar, {
+        tapeUtilization: 0.67,
+        playheadPosition: 0.8,
+        isPlaying: true
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
@@ -4881,13 +5175,24 @@ var styles = `
 
 /* Layout */
 .fullscreen {
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   margin: 0;
   padding: 0;
   overflow: hidden;
 }
 
+.fullscreen .canvas-container {
+  width: 100%;
+  height: 100%;
+}
+
+.fullscreen canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 .layout {
   display: grid;
   grid-template-areas:
@@ -4901,6 +5206,225 @@ var styles = `
   padding: 1rem;
 }
 
+/* Letterboxed layout - using equal vw/vh percentages keeps game at viewport aspect ratio */
+.layout-letterboxed {
+  display: grid;
+  grid-template-areas:
+    "top-bar top-bar top-bar"
+    "left-bar game right-bar"
+    "bottom-bar bottom-bar bottom-bar";
+  grid-template-columns: 2vw 1fr 2vw;
+  grid-template-rows: 2vh 1fr 2vh;
+  width: 100vw;
+  height: 100vh;
+  background: #1a1a1a;
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+.top-bar {
+  grid-area: top-bar;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #111;
+  color: #aaa;
+  font-family: monospace;
+  font-size: 12px;
+  padding: 0;
+}
+
+.top-bar-side-label {
+  width: 2vw;
+  text-align: center;
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #666;
+}
+
+.top-bar-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  flex: 1;
+}
+
+.top-bar-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.top-bar-label {
+  opacity: 0.6;
+}
+
+.top-bar-value {
+  color: #fff;
+  font-weight: 500;
+}
+
+.left-bar {
+  grid-area: left-bar;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  background: #111;
+  padding: 4px 0;
+}
+
+.right-bar {
+  grid-area: right-bar;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  background: #111;
+  padding: 4px 0;
+}
+
+.vertical-bar {
+  width: 12px;
+  flex: 1;
+  background: #333;
+  border-radius: 2px;
+  position: relative;
+  overflow: hidden;
+}
+
+.vertical-bar-fill {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #4a9eff;
+  border-radius: 2px;
+  transition: height 0.1s ease-out;
+}
+
+
+.bottom-bar {
+  grid-area: bottom-bar;
+  display: flex;
+  align-items: center;
+  background: #111;
+  padding: 0 8px;
+  gap: 8px;
+}
+
+.playbar-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.playbar-btn {
+  width: 1.5vh;
+  height: 1.5vh;
+  min-width: 18px;
+  min-height: 18px;
+  border: none;
+  background: transparent;
+  color: #888;
+  font-size: 10px;
+  cursor: pointer;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, color 0.15s;
+  position: relative;
+}
+
+.playbar-btn:hover {
+  background: #333;
+  color: #fff;
+}
+
+.playbar-btn:hover .tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: #222;
+  color: #ccc;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.tooltip-left {
+  left: 0;
+  transform: none;
+}
+
+.tooltip kbd {
+  background: #444;
+  padding: 1px 4px;
+  border-radius: 2px;
+  margin-left: 4px;
+  font-family: monospace;
+}
+
+.seek-bar {
+  flex: 1;
+  height: 16px;
+  background: #222;
+  border-radius: 4px;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.seek-bar-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: linear-gradient(to right, #4a2070, #7b3fa0);
+  border-radius: 4px;
+  transition: width 0.1s ease-out;
+}
+
+.seek-bar-position {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #fff;
+}
+
+.letterboxed-game {
+  grid-area: game;
+  overflow: hidden;
+}
+
+.letterboxed-game .canvas-container {
+  width: 100%;
+  height: 100%;
+}
+
+.letterboxed-game canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 .game {
   grid-area: game;
   border-radius: 8px;
@@ -5087,7 +5611,7 @@ class DebugUi {
     const container = options.container ?? document.body;
     const initiallyVisible = options.initiallyVisible ?? new URLSearchParams(window.location.search).has("debug");
     this.#host = document.createElement("bloop-debug-ui");
-    this.#host.style.cssText = "display:block;width:100%;height:100%;position:absolute;top:0;left:0;";
+    this.#host.style.cssText = "display:block;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;overscroll-behavior:none;";
     this.#shadow = this.#host.attachShadow({ mode: "open" });
     const styleEl = document.createElement("style");
     styleEl.textContent = styles;
@@ -5096,12 +5620,12 @@ class DebugUi {
     this.#mountPoint.id = "debug-root";
     this.#mountPoint.style.cssText = "width:100%;height:100%;";
     this.#shadow.appendChild(this.#mountPoint);
-    debugState.isVisible.value = initiallyVisible;
+    debugState.layoutMode.value = initiallyVisible ? "letterboxed" : "off";
     this.#canvas = document.createElement("canvas");
     this.#render();
     container.appendChild(this.#host);
     this.#cleanup = this.#setupHotkey();
-    debugState.isVisible.subscribe(() => {
+    debugState.layoutMode.subscribe(() => {
       this.#render();
     });
   }
@@ -5111,7 +5635,7 @@ class DebugUi {
   #setupHotkey() {
     const handler = (e4) => {
       if (e4.key === this.#hotkey) {
-        debugState.isVisible.value = !debugState.isVisible.value;
+        cycleLayout();
       }
     };
     window.addEventListener("keydown", handler);
@@ -5127,7 +5651,7 @@ class DebugUi {
     return debugState.isVisible.value;
   }
   set isVisible(value) {
-    debugState.isVisible.value = value;
+    debugState.layoutMode.value = value ? "letterboxed" : "off";
   }
   unmount() {
     this.#cleanup?.();
@@ -5259,8 +5783,29 @@ class App {
       }
     };
     window.addEventListener("keydown", playbarHotkeys);
+    let fpsFrames = 0;
+    let fpsLastTime = performance.now();
     const frame = () => {
-      this.sim.step(performance.now() - this.#now);
+      const stepStart = performance.now();
+      const ticks = this.sim.step(stepStart - this.#now);
+      if (ticks > 0) {
+        const stepEnd = performance.now();
+        debugState.frameTime.value = stepEnd - stepStart;
+        debugState.frameNumber.value = this.sim.time.frame;
+        if (debugState.layoutMode.value === "letterboxed") {
+          const bag = this.game.bag;
+          if (bag) {
+            debugState.snapshotSize.value = JSON.stringify(bag).length;
+          }
+        }
+        fpsFrames++;
+        const elapsed = stepEnd - fpsLastTime;
+        if (elapsed >= 1000) {
+          debugState.fps.value = Math.round(fpsFrames * 1000 / elapsed);
+          fpsFrames = 0;
+          fpsLastTime = stepEnd;
+        }
+      }
       if (!this.sim.isPaused) {
         try {
           this.afterFrame.notify(this.sim.time.frame);
@@ -5466,5 +6011,5 @@ export {
   App
 };
 
-//# debugId=720184D07033E06D64756E2164756E21
+//# debugId=97C22D9653CE8DB864756E2164756E21
 //# sourceMappingURL=mod.js.map