@bloopjs/web 0.0.101 → 0.0.103

package/dist/mod.js

@@ -1450,7 +1450,7 @@ function readTapeHeader(tape) {
     eventCount: view.getUint16(14, true)
   };
 }
-var DEFAULT_WASM_URL = new URL("https://unpkg.com/@bloopjs/engine@0.0.101/wasm/bloop.wasm");
+var DEFAULT_WASM_URL = new URL("https://unpkg.com/@bloopjs/engine@0.0.103/wasm/bloop.wasm");
 var MAX_ROLLBACK_FRAMES = 500;
 var TIME_CTX_OFFSET = 0;
 var INPUT_CTX_OFFSET = TIME_CTX_OFFSET + 4;
@@ -1556,6 +1556,9 @@ class Sim {
       throw new Error(`failed to start recording, error code=${result}`);
     }
   }
+  stopRecording() {
+    this.wasm.stop_recording();
+  }
   saveTape() {
     const tapeLen = this.wasm.get_tape_len();
     const tapePtr = this.wasm.get_tape_ptr();
@@ -1621,21 +1624,33 @@ class Sim {
   }
   emit = {
     keydown: (key, peerId = 0) => {
+      if (this.#isPaused)
+        return;
       this.wasm.emit_keydown(keyToKeyCode(key), peerId);
     },
     keyup: (key, peerId = 0) => {
+      if (this.#isPaused)
+        return;
       this.wasm.emit_keyup(keyToKeyCode(key), peerId);
     },
     mousemove: (x, y, peerId = 0) => {
+      if (this.#isPaused)
+        return;
       this.wasm.emit_mousemove(x, y, peerId);
     },
     mousedown: (button, peerId = 0) => {
+      if (this.#isPaused)
+        return;
       this.wasm.emit_mousedown(mouseButtonToMouseButtonCode(button), peerId);
     },
     mouseup: (button, peerId = 0) => {
+      if (this.#isPaused)
+        return;
       this.wasm.emit_mouseup(mouseButtonToMouseButtonCode(button), peerId);
     },
     mousewheel: (x, y, peerId = 0) => {
+      if (this.#isPaused)
+        return;
       this.wasm.emit_mousewheel(x, y, peerId);
     },
     resize: (width, height, physicalWidth, physicalHeight, pixelRatio) => {
@@ -3309,7 +3324,7 @@ function readTapeHeader2(tape) {
     eventCount: view.getUint16(14, true)
   };
 }
-var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.101/wasm/bloop.wasm");
+var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.103/wasm/bloop.wasm");
 var TIME_CTX_OFFSET2 = 0;
 var INPUT_CTX_OFFSET2 = TIME_CTX_OFFSET2 + 4;
 var EVENTS_OFFSET2 = INPUT_CTX_OFFSET2 + 4;
@@ -4432,9 +4447,12 @@ var onJumpForward = d3(null);
 var onSeek = d3(null);
 var onLoadTape = d3(null);
 var onReplayLastTape = d3(null);
+var onReplayLastSaved = d3(null);
 var onSaveTape = d3(null);
 var lastTapeName = d3(null);
+var lastSavedTapeName = d3(null);
 var isLoadDialogOpen = d3(false);
+var onToggleRecording = d3(null);
 var debugState = {
   layoutMode,
   isVisible: w3(() => layoutMode.value !== "off"),
@@ -4465,9 +4483,12 @@ var debugState = {
   onSeek,
   onLoadTape,
   onReplayLastTape,
+  onReplayLastSaved,
   onSaveTape,
   lastTapeName,
-  isLoadDialogOpen
+  lastSavedTapeName,
+  isLoadDialogOpen,
+  onToggleRecording
 };
 function cycleLayout() {
   const current = layoutMode.value;
@@ -4603,12 +4624,20 @@ function wirePlaybarHandlers(app) {
   };
   debugState.onSeek.value = (ratio) => {
     if (app.sim.hasHistory) {
+      app.sim.pause();
       const startFrame = debugState.tapeStartFrame.value;
       const frameCount = debugState.tapeFrameCount.value;
       const targetFrame = startFrame + Math.floor(ratio * frameCount);
       app.sim.seek(targetFrame);
     }
   };
+  debugState.onToggleRecording.value = () => {
+    if (app.sim.isRecording) {
+      app.sim.stopRecording();
+    } else {
+      app.sim.record();
+    }
+  };
 }
 function wireTapeDragDrop(canvas, app) {
   canvas.addEventListener("dragover", (e4) => {
@@ -4627,7 +4656,8 @@ function wireTapeDragDrop(canvas, app) {
 }
 var TAPE_DB_NAME = "bloop-debug";
 var TAPE_STORE_NAME = "tapes";
-var TAPE_KEY = "last";
+var TAPE_KEY_LOADED = "last-loaded";
+var TAPE_KEY_SAVED = "last-saved";
 function openTapeDB() {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open(TAPE_DB_NAME, 1);
@@ -4638,21 +4668,21 @@ function openTapeDB() {
     };
   });
 }
-async function saveTapeToStorage(bytes, fileName) {
+async function saveTapeToStorage(bytes, fileName, key = TAPE_KEY_LOADED) {
   const db = await openTapeDB();
   return new Promise((resolve, reject) => {
     const tx = db.transaction(TAPE_STORE_NAME, "readwrite");
-    tx.objectStore(TAPE_STORE_NAME).put({ bytes, fileName }, TAPE_KEY);
+    tx.objectStore(TAPE_STORE_NAME).put({ bytes, fileName }, key);
     tx.oncomplete = () => resolve();
     tx.onerror = () => reject(tx.error);
   });
 }
-async function loadTapeFromStorage() {
+async function loadTapeFromStorage(key = TAPE_KEY_LOADED) {
   try {
     const db = await openTapeDB();
     return new Promise((resolve, reject) => {
       const tx = db.transaction(TAPE_STORE_NAME, "readonly");
-      const request = tx.objectStore(TAPE_STORE_NAME).get(TAPE_KEY);
+      const request = tx.objectStore(TAPE_STORE_NAME).get(key);
       request.onsuccess = () => resolve(request.result ?? null);
       request.onerror = () => reject(request.error);
     });
@@ -4661,32 +4691,46 @@ async function loadTapeFromStorage() {
   }
 }
 async function checkForSavedTape() {
-  const saved = await loadTapeFromStorage();
-  debugState.lastTapeName.value = saved?.fileName ?? null;
+  const [loaded, saved] = await Promise.all([
+    loadTapeFromStorage(TAPE_KEY_LOADED),
+    loadTapeFromStorage(TAPE_KEY_SAVED)
+  ]);
+  debugState.lastTapeName.value = loaded?.fileName ?? null;
+  debugState.lastSavedTapeName.value = saved?.fileName ?? null;
 }
 function wireTapeLoadHandlers(app) {
   debugState.onLoadTape.value = async (bytes, fileName) => {
     app.loadTape(bytes);
-    await saveTapeToStorage(bytes, fileName);
+    await saveTapeToStorage(bytes, fileName, TAPE_KEY_LOADED);
     debugState.lastTapeName.value = fileName;
     debugState.isLoadDialogOpen.value = false;
   };
   debugState.onReplayLastTape.value = async () => {
-    const saved = await loadTapeFromStorage();
+    const saved = await loadTapeFromStorage(TAPE_KEY_LOADED);
     if (saved) {
       app.loadTape(saved.bytes);
       debugState.isLoadDialogOpen.value = false;
     }
   };
-  debugState.onSaveTape.value = () => {
+  debugState.onReplayLastSaved.value = async () => {
+    const saved = await loadTapeFromStorage(TAPE_KEY_SAVED);
+    if (saved) {
+      app.loadTape(saved.bytes);
+      debugState.isLoadDialogOpen.value = false;
+    }
+  };
+  debugState.onSaveTape.value = async () => {
     if (!app.sim.hasHistory)
       return;
     const tape = app.sim.saveTape();
+    const fileName = `tape-${Date.now()}.bloop`;
+    await saveTapeToStorage(tape, fileName, TAPE_KEY_SAVED);
+    debugState.lastSavedTapeName.value = fileName;
     const blob = new Blob([tape], { type: "application/octet-stream" });
     const url = URL.createObjectURL(blob);
     const a4 = document.createElement("a");
     a4.href = url;
-    a4.download = `tape-${Date.now()}.bloop`;
+    a4.download = fileName;
     a4.click();
     URL.revokeObjectURL(url);
   };
@@ -4970,8 +5014,14 @@ function TopBar({ leftLabel, rightLabel }) {
   const frameNumber2 = debugState.frameNumber.value;
   const rtt = debugState.netStatus.value.rtt;
   const isOnline = debugState.netStatus.value.peers.length > 0;
+  const stopPropagation = q2((e4) => {
+    e4.stopPropagation();
+  }, []);
   return /* @__PURE__ */ u4("div", {
     className: "top-bar",
+    onMouseDown: stopPropagation,
+    onMouseUp: stopPropagation,
+    onClick: stopPropagation,
     children: [
       /* @__PURE__ */ u4("span", {
         className: "top-bar-side-label",
@@ -5037,18 +5087,31 @@ function VerticalBar({
   value,
   max,
   side,
-  color = "#4a9eff"
+  color = "#4a9eff",
+  displayValue
 }) {
   const percentage = max > 0 ? Math.min(100, value / max * 100) : 0;
+  const stopPropagation = q2((e4) => {
+    e4.stopPropagation();
+  }, []);
   return /* @__PURE__ */ u4("div", {
     className: `${side}-bar`,
+    onMouseDown: stopPropagation,
+    onMouseUp: stopPropagation,
+    onClick: stopPropagation,
     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)
+      children: [
+        /* @__PURE__ */ u4("div", {
+          className: "vertical-bar-fill",
+          style: { height: `${percentage}%`, background: color }
+        }, undefined, false, undefined, this),
+        displayValue && /* @__PURE__ */ u4("span", {
+          className: `vertical-bar-popover ${side}`,
+          children: displayValue
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
 
@@ -5058,7 +5121,6 @@ function LoadTapeDialog() {
   const fileInputRef = A2(null);
   const [isDragOver, setIsDragOver] = d2(false);
   const isOpen = debugState.isLoadDialogOpen.value;
-  const lastTapeName2 = debugState.lastTapeName.value;
   y2(() => {
     const dialog = dialogRef.current;
     if (!dialog)
@@ -5109,11 +5171,20 @@ function LoadTapeDialog() {
   const handleReplayLast = q2(() => {
     debugState.onReplayLastTape.value?.();
   }, []);
+  const handleReplayLastSaved = q2(() => {
+    debugState.onReplayLastSaved.value?.();
+  }, []);
+  const handleDialogClick = q2((e4) => {
+    if (e4.target === e4.currentTarget) {
+      debugState.isLoadDialogOpen.value = false;
+    }
+  }, []);
   return /* @__PURE__ */ u4("dialog", {
     ref: dialogRef,
     className: "load-tape-dialog",
     onClose: handleClose,
-    children: /* @__PURE__ */ u4("div", {
+    onClick: handleDialogClick,
+    children: isOpen && /* @__PURE__ */ u4("div", {
       className: "load-tape-dialog-content",
       children: [
         /* @__PURE__ */ u4("h3", {
@@ -5141,12 +5212,17 @@ function LoadTapeDialog() {
           className: "hidden-file-input",
           onChange: handleFileInputChange
         }, undefined, false, undefined, this),
-        lastTapeName2 && /* @__PURE__ */ u4("button", {
+        debugState.lastSavedTapeName.value && /* @__PURE__ */ u4("button", {
+          className: "replay-last-btn",
+          onClick: handleReplayLastSaved,
+          children: "Replay last saved tape"
+        }, undefined, false, undefined, this),
+        debugState.lastTapeName.value && /* @__PURE__ */ u4("button", {
           className: "replay-last-btn",
           onClick: handleReplayLast,
           children: [
-            "Replay last: ",
-            lastTapeName2
+            "Replay last loaded: ",
+            debugState.lastTapeName.value
           ]
         }, undefined, true, undefined, this)
       ]
@@ -5157,6 +5233,14 @@ function LoadTapeDialog() {
 // src/debugui/components/BottomBar.tsx
 var iconProps = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor" };
 var Icons = {
+  record: /* @__PURE__ */ u4("svg", {
+    ...iconProps,
+    children: /* @__PURE__ */ u4("circle", {
+      cx: "12",
+      cy: "12",
+      r: "8"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this),
   jumpBack: /* @__PURE__ */ u4("svg", {
     ...iconProps,
     children: /* @__PURE__ */ u4("path", {
@@ -5299,22 +5383,33 @@ function BottomBar() {
   const handleSaveTapeClick = q2(() => {
     debugState.onSaveTape.value?.();
   }, []);
+  const handleToggleRecording = q2(() => {
+    debugState.onToggleRecording.value?.();
+  }, []);
+  const stopPropagation = q2((e4) => {
+    e4.stopPropagation();
+  }, []);
   return /* @__PURE__ */ u4("div", {
     className: "bottom-bar",
+    onMouseDown: stopPropagation,
+    onMouseUp: stopPropagation,
+    onClick: stopPropagation,
     children: [
       /* @__PURE__ */ u4("div", {
         className: "playbar-controls",
         children: [
-          isRecording2 && /* @__PURE__ */ u4("span", {
-            className: "recording-indicator",
-            title: "Recording",
+          /* @__PURE__ */ u4("button", {
+            className: `playbar-btn record-btn ${isRecording2 ? "recording" : ""}`,
+            onClick: handleToggleRecording,
             children: [
-              /* @__PURE__ */ u4("span", {
-                className: "recording-dot"
+              Icons.record,
+              isRecording2 && /* @__PURE__ */ u4("span", {
+                className: "btn-label",
+                children: "REC"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ u4("span", {
-                className: "recording-label",
-                children: "REC"
+                className: "tooltip tooltip-left",
+                children: isRecording2 ? "Stop recording" : "Start recording"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
@@ -5525,11 +5620,13 @@ function LetterboxedLayout({ canvas }) {
   const hmrFlash2 = debugState.hmrFlash.value;
   const leftValue = isOnline ? Math.abs(advantage) : frameTime2;
   const leftMax = isOnline ? 10 : 16.67;
-  const leftLabel = isOnline ? "ADV" : "MS";
+  const leftLabel = isOnline ? "adv" : "time";
   const leftColor = isOnline ? advantage >= 0 ? "#4a9eff" : "#ff4a4a" : frameTime2 > 16.67 ? "#ff4a4a" : "#4aff4a";
+  const leftDisplayValue = isOnline ? `${advantage >= 0 ? "+" : ""}${advantage} frames` : `${frameTime2.toFixed(1)}ms`;
   const rightValue = isOnline ? 0 : snapshotSize2;
   const rightMax = isOnline ? 10 : 1e4;
-  const rightLabel = isOnline ? "RB" : "KB";
+  const rightLabel = isOnline ? "rb" : "size";
+  const rightDisplayValue = isOnline ? "0 frames" : snapshotSize2 >= 1000 ? `${(snapshotSize2 / 1000).toFixed(1)}kb` : `${snapshotSize2}b`;
   const gameClassName = hmrFlash2 ? "letterboxed-game hmr-flash" : "letterboxed-game";
   return /* @__PURE__ */ u4("main", {
     className: "layout-letterboxed",
@@ -5542,7 +5639,8 @@ function LetterboxedLayout({ canvas }) {
         value: leftValue,
         max: leftMax,
         side: "left",
-        color: leftColor
+        color: leftColor,
+        displayValue: leftDisplayValue
       }, undefined, false, undefined, this),
       /* @__PURE__ */ u4("div", {
         className: gameClassName,
@@ -5553,7 +5651,8 @@ function LetterboxedLayout({ canvas }) {
       /* @__PURE__ */ u4(VerticalBar, {
         value: rightValue,
         max: rightMax,
-        side: "right"
+        side: "right",
+        displayValue: rightDisplayValue
       }, undefined, false, undefined, this),
       /* @__PURE__ */ u4(BottomBar, {}, undefined, false, undefined, this)
     ]
@@ -5737,6 +5836,7 @@ var styles = `
   font-family: monospace;
   font-size: 12px;
   padding: 0;
+  user-select: none;
 }
 
 .top-bar-side-label {
@@ -5790,6 +5890,7 @@ var styles = `
   justify-content: flex-end;
   background: #111;
   padding: 4px 0;
+  user-select: none;
 }
 
 .right-bar {
@@ -5800,6 +5901,7 @@ var styles = `
   justify-content: flex-end;
   background: #111;
   padding: 4px 0;
+  user-select: none;
 }
 
 .vertical-bar {
@@ -5808,7 +5910,6 @@ var styles = `
   background: #333;
   border-radius: 2px;
   position: relative;
-  overflow: hidden;
 }
 
 .vertical-bar-fill {
@@ -5821,6 +5922,37 @@ var styles = `
   transition: height 0.1s ease-out;
 }
 
+.vertical-bar-popover {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #222;
+  color: #ccc;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-family: monospace;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.vertical-bar-popover.left {
+  left: calc(100% + 8px);
+}
+
+.vertical-bar-popover.right {
+  right: calc(100% + 8px);
+}
+
+.vertical-bar:hover .vertical-bar-popover {
+  opacity: 1;
+  visibility: visible;
+}
+
 
 .bottom-bar {
   grid-area: bottom-bar;
@@ -5830,6 +5962,7 @@ var styles = `
   /* Mobile-first: more padding */
   padding: 0 16px;
   gap: 12px;
+  user-select: none;
 }
 
 /* Desktop: tighter padding */
@@ -5847,22 +5980,16 @@ var styles = `
   flex-shrink: 0;
 }
 
-/* Recording indicator - mobile: just the dot */
-.recording-indicator {
-  display: flex;
-  align-items: center;
-  margin-right: 4px;
+/* Record button */
+.record-btn {
+  color: #666;
 }
 
-.recording-indicator .recording-label {
-  display: none;
+.record-btn.recording {
+  color: #ff4444;
 }
 
-.recording-dot {
-  width: 10px;
-  height: 10px;
-  background: #ff4444;
-  border-radius: 50%;
+.record-btn.recording svg {
   animation: recording-pulse 1s ease-in-out infinite;
 }
 
@@ -5871,6 +5998,17 @@ var styles = `
   50% { opacity: 0.4; }
 }
 
+/* Desktop: show REC label when recording */
+@media (min-width: 769px) {
+  .record-btn.recording {
+    width: auto;
+    padding: 0 6px;
+    gap: 4px;
+    background: rgba(255, 68, 68, 0.15);
+    border-radius: 3px;
+  }
+}
+
 /* Replay indicator - mobile: hidden */
 .replay-indicator {
   display: none;
@@ -6032,6 +6170,7 @@ var styles = `
   position: relative;
   cursor: pointer;
   overflow: hidden;
+  user-select: none;
 }
 
 /* Desktop: smaller seek bar */
@@ -7686,5 +7825,5 @@ export {
   App
 };
 
-//# debugId=5705F0D8DF18CA1364756E2164756E21
+//# debugId=A1466E71356AC5F764756E2164756E21
 //# sourceMappingURL=mod.js.map