@bloopjs/web 0.0.60 → 0.0.61

package/package.json

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

package/src/App.ts

@@ -1,13 +1,18 @@
 import { type Bloop, type MountOpts, mount, type Sim } from "@bloopjs/bloop";
 import type { Key } from "@bloopjs/engine";
-import { mouseButtonCodeToMouseButton } from "@bloopjs/engine";
+import { mouseButtonCodeToMouseButton, readTapeHeader } from "@bloopjs/engine";
+import { DebugUi, type DebugUiOptions } from "./debugui/mod.ts";
+import {
+  debugState,
+  triggerHmrFlash,
+  wirePlaybarHandlers,
+  wireTapeDragDrop,
+} from "./debugui/state.ts";
 import {
   joinRoom as joinRoomInternal,
   type RoomEvents,
 } from "./netcode/broker";
 import { logger } from "./netcode/logs.ts";
-import { DebugUi, type DebugUiOptions } from "./debugui/mod.ts";
-import { debugState, triggerHmrFlash } from "./debugui/state.ts";
 
 export type StartOptions = {
   /** A bloop game instance */
@@ -41,7 +46,7 @@ export async function start(opts: StartOptions): Promise<App> {
 
   const debugOpts = opts.debugUi
     ? typeof opts.debugUi === "boolean"
-      ? {}
+      ? { initiallyVisible: true }
       : opts.debugUi
     : undefined;
 
@@ -109,6 +114,11 @@ export class App {
   #initDebugUi(opts: DebugUiOptions = {}): DebugUi {
     if (this.#debugUi) return this.#debugUi;
     this.#debugUi = new DebugUi(opts);
+
+    // Wire up playbar handlers and drag-drop
+    wirePlaybarHandlers(this);
+    wireTapeDragDrop(this.#debugUi.canvas, this);
+
     return this.#debugUi;
   }
 
@@ -127,6 +137,21 @@ export class App {
     joinRoomInternal(this.brokerUrl, roomId, callbacks);
   }
 
+  /** Load a tape for replay */
+  loadTape(tape: Uint8Array): void {
+    const header = readTapeHeader(tape);
+    this.sim.loadTape(tape);
+    this.sim.seek(header.startFrame);
+    this.sim.pause();
+
+    // Update debug state with tape info
+    debugState.tapeStartFrame.value = header.startFrame;
+    debugState.tapeFrameCount.value = header.frameCount;
+    debugState.tapeUtilization.value = 1; // Loaded tape is "full"
+    debugState.playheadPosition.value = 0;
+    debugState.isPlaying.value = false;
+  }
+
   /** Event listeners for before a frame is processed */
   beforeFrame: ReturnType<typeof createListener> = createListener<[number]>();
   /** Event listeners for after a frame is processed */
@@ -136,38 +161,46 @@ export class App {
 
   /** Subscribe to the browser events and start the render loop */
   subscribe(): void {
+    // TODO: move this logic to the engine
+    // Skip emitting input events during replay to avoid filling the event buffer
+    const shouldEmitInputs = () => !this.sim.isReplaying;
+
     const handleKeydown = (event: KeyboardEvent) => {
-      this.sim.emit.keydown(event.code as Key);
+      if (shouldEmitInputs()) this.sim.emit.keydown(event.code as Key);
     };
     window.addEventListener("keydown", handleKeydown);
 
     const handleKeyup = (event: KeyboardEvent) => {
-      this.sim.emit.keyup(event.code as Key);
+      if (shouldEmitInputs()) this.sim.emit.keyup(event.code as Key);
     };
     window.addEventListener("keyup", handleKeyup);
 
     const handleMousemove = (event: MouseEvent) => {
-      this.sim.emit.mousemove(event.clientX, event.clientY);
+      if (shouldEmitInputs()) this.sim.emit.mousemove(event.clientX, event.clientY);
     };
     window.addEventListener("mousemove", handleMousemove);
 
     const handleMousedown = (event: MouseEvent) => {
-      this.sim.emit.mousedown(mouseButtonCodeToMouseButton(event.button + 1));
+      if (shouldEmitInputs())
+        this.sim.emit.mousedown(mouseButtonCodeToMouseButton(event.button + 1));
     };
     window.addEventListener("mousedown", handleMousedown);
 
     const handleMouseup = (event: MouseEvent) => {
-      this.sim.emit.mouseup(mouseButtonCodeToMouseButton(event.button + 1));
+      if (shouldEmitInputs())
+        this.sim.emit.mouseup(mouseButtonCodeToMouseButton(event.button + 1));
     };
     window.addEventListener("mouseup", handleMouseup);
 
     const handleMousewheel = (event: WheelEvent) => {
-      this.sim.emit.mousewheel(event.deltaX, event.deltaY);
+      if (shouldEmitInputs())
+        this.sim.emit.mousewheel(event.deltaX, event.deltaY);
     };
     window.addEventListener("wheel", handleMousewheel);
 
     // Touch events for mobile support
     const handleTouchstart = (event: TouchEvent) => {
+      if (!shouldEmitInputs()) return;
       const touch = event.touches[0];
       if (touch) {
         this.sim.emit.mousemove(touch.clientX, touch.clientY);
@@ -177,11 +210,12 @@ export class App {
     window.addEventListener("touchstart", handleTouchstart);
 
     const handleTouchend = () => {
-      this.sim.emit.mouseup("Left");
+      if (shouldEmitInputs()) this.sim.emit.mouseup("Left");
     };
     window.addEventListener("touchend", handleTouchend);
 
     const handleTouchmove = (event: TouchEvent) => {
+      if (!shouldEmitInputs()) return;
       const touch = event.touches[0];
       if (touch) {
         this.sim.emit.mousemove(touch.clientX, touch.clientY);
@@ -190,21 +224,43 @@ export class App {
     window.addEventListener("touchmove", handleTouchmove);
 
     const playbarHotkeys = (event: KeyboardEvent) => {
+      // Ctrl/Cmd+S to save tape
+      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
+        event.preventDefault();
+        if (this.sim.hasHistory) {
+          const tape = this.sim.saveTape();
+          const blob = new Blob([tape], { type: "application/octet-stream" });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = `tape-${Date.now()}.bloop`;
+          a.click();
+          URL.revokeObjectURL(url);
+        }
+        return;
+      }
+
       const isPauseHotkey =
         event.key === "Enter" && (event.ctrlKey || event.metaKey);
       if (isPauseHotkey || event.key === "6") {
         this.sim.isPaused ? this.sim.unpause() : this.sim.pause();
       }
 
-      if (this.sim.isPaused) {
+      if (this.sim.hasHistory) {
         switch (event.key) {
+          case "4":
+            debugState.onJumpBack.value?.();
+            break;
           case ",":
           case "5":
-            this.sim.stepBack();
+            if (this.sim.isPaused) this.sim.stepBack();
             break;
           case ".":
           case "7":
-            this.sim.step();
+            if (this.sim.isPaused) this.sim.seek(this.sim.time.frame + 1);
+            break;
+          case "8":
+            debugState.onJumpForward.value?.();
             break;
         }
       }
@@ -219,11 +275,13 @@ export class App {
       const stepStart = performance.now();
       const ticks = this.sim.step(stepStart - this.#now);
 
-      // Update debug metrics only when we actually ran simulation
+      // Always update frame number (even when paused/stepping)
+      debugState.frameNumber.value = this.sim.time.frame;
+
+      // Update performance metrics only when we actually ran simulation
       if (ticks > 0) {
         const stepEnd = performance.now();
         debugState.frameTime.value = stepEnd - stepStart;
-        debugState.frameNumber.value = this.sim.time.frame;
 
         // Measure snapshot size when debug UI is visible (letterboxed mode)
         if (debugState.layoutMode.value === "letterboxed") {
@@ -243,6 +301,25 @@ export class App {
         }
       }
 
+      // Update tape playback state
+      debugState.isPlaying.value = !this.sim.isPaused;
+      if (this.sim.hasHistory && debugState.tapeFrameCount.value > 0) {
+        const currentFrame = this.sim.time.frame;
+        const startFrame = debugState.tapeStartFrame.value;
+        const frameCount = debugState.tapeFrameCount.value;
+        const position = (currentFrame - startFrame) / frameCount;
+        debugState.playheadPosition.value = Math.max(0, Math.min(1, position));
+
+        // Auto-pause at end of tape
+        if (
+          this.sim.isReplaying &&
+          !this.sim.isPaused &&
+          currentFrame >= startFrame + frameCount
+        ) {
+          this.sim.pause();
+        }
+      }
+
       if (!this.sim.isPaused) {
         try {
           this.afterFrame.notify(this.sim.time.frame);

package/src/debugui/components/BottomBar.tsx

@@ -1,32 +1,129 @@
-type BottomBarProps = {
-  tapeUtilization: number; // 0-1, how full the tape is
-  playheadPosition: number; // 0-1, current position in tape
-  isPlaying: boolean;
-};
-
-export function BottomBar({
-  tapeUtilization = 0,
-  playheadPosition = 0,
-  isPlaying = true,
-}: BottomBarProps) {
-  // Placeholder handlers - behavior not wired up yet
-  const handleJumpBack = () => {};
-  const handleStepBack = () => {};
-  const handlePlayPause = () => {};
-  const handleStepForward = () => {};
-  const handleJumpForward = () => {};
-  const handleSeek = () => {};
+import { useRef, useCallback } from "preact/hooks";
+import { debugState } from "../state.ts";
+
+/** Hook that returns handlers for repeat-on-hold behavior with initial debounce */
+function useRepeatOnHold(action: () => void) {
+  const rafId = useRef<number | null>(null);
+  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const startRepeat = useCallback(() => {
+    // Fire immediately on first press
+    action();
+
+    // Wait 300ms before starting repeat
+    timeoutId.current = setTimeout(() => {
+      const repeat = () => {
+        action();
+        rafId.current = requestAnimationFrame(repeat);
+      };
+      rafId.current = requestAnimationFrame(repeat);
+    }, 300);
+  }, [action]);
+
+  const stopRepeat = useCallback(() => {
+    if (timeoutId.current !== null) {
+      clearTimeout(timeoutId.current);
+      timeoutId.current = null;
+    }
+    if (rafId.current !== null) {
+      cancelAnimationFrame(rafId.current);
+      rafId.current = null;
+    }
+  }, []);
+
+  return {
+    onMouseDown: startRepeat,
+    onMouseUp: stopRepeat,
+    onMouseLeave: stopRepeat,
+  };
+}
+
+/** Hook for seek bar drag behavior */
+function useSeekDrag(onSeek: (ratio: number) => void) {
+  const isDragging = useRef(false);
+  const targetRef = useRef<HTMLElement | null>(null);
+
+  const getRatio = (clientX: number, target: HTMLElement) => {
+    const rect = target.getBoundingClientRect();
+    const clickX = clientX - rect.left;
+    return Math.max(0, Math.min(1, clickX / rect.width));
+  };
+
+  const handleMouseDown = useCallback(
+    (e: { currentTarget: EventTarget; clientX: number }) => {
+      const target = e.currentTarget as HTMLElement;
+      isDragging.current = true;
+      targetRef.current = target;
+      onSeek(getRatio(e.clientX, target));
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        if (isDragging.current && targetRef.current) {
+          onSeek(getRatio(moveEvent.clientX, targetRef.current));
+        }
+      };
+
+      const handleMouseUp = () => {
+        isDragging.current = false;
+        targetRef.current = null;
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    },
+    [onSeek],
+  );
+
+  return { onMouseDown: handleMouseDown };
+}
+
+export function BottomBar() {
+  const isPlaying = debugState.isPlaying.value;
+  const tapeUtilization = debugState.tapeUtilization.value;
+  const playheadPosition = debugState.playheadPosition.value;
+
+  const handleJumpBack = useCallback(() => {
+    debugState.onJumpBack.value?.();
+  }, []);
+
+  const handleStepBack = useCallback(() => {
+    debugState.onStepBack.value?.();
+  }, []);
+
+  const handlePlayPause = useCallback(() => {
+    debugState.onPlayPause.value?.();
+  }, []);
+
+  const handleStepForward = useCallback(() => {
+    debugState.onStepForward.value?.();
+  }, []);
+
+  const handleJumpForward = useCallback(() => {
+    debugState.onJumpForward.value?.();
+  }, []);
+
+  const jumpBackRepeat = useRepeatOnHold(handleJumpBack);
+  const stepBackRepeat = useRepeatOnHold(handleStepBack);
+  const stepForwardRepeat = useRepeatOnHold(handleStepForward);
+  const jumpForwardRepeat = useRepeatOnHold(handleJumpForward);
+
+  const handleSeek = useCallback((ratio: number) => {
+    debugState.onSeek.value?.(ratio);
+  }, []);
+
+  const seekDrag = useSeekDrag(handleSeek);
 
   return (
     <div className="bottom-bar">
       <div className="playbar-controls">
-        <button className="playbar-btn" onClick={handleJumpBack}>
+        <button className="playbar-btn" {...jumpBackRepeat}>
           {"<<"}
           <span className="tooltip tooltip-left">
             Jump back <kbd>4</kbd>
           </span>
         </button>
-        <button className="playbar-btn" onClick={handleStepBack}>
+        <button className="playbar-btn" {...stepBackRepeat}>
           {"<"}
           <span className="tooltip">
             Step back <kbd>5</kbd>
@@ -38,20 +135,20 @@ export function BottomBar({
             {isPlaying ? "Pause" : "Play"} <kbd>6</kbd>
           </span>
         </button>
-        <button className="playbar-btn" onClick={handleStepForward}>
+        <button className="playbar-btn" {...stepForwardRepeat}>
           {">"}
           <span className="tooltip">
             Step forward <kbd>7</kbd>
           </span>
         </button>
-        <button className="playbar-btn" onClick={handleJumpForward}>
+        <button className="playbar-btn" {...jumpForwardRepeat}>
           {">>"}
           <span className="tooltip">
             Jump forward <kbd>8</kbd>
           </span>
         </button>
       </div>
-      <div className="seek-bar" onClick={handleSeek}>
+      <div className="seek-bar" {...seekDrag}>
         <div
           className="seek-bar-fill"
           style={{ width: `${tapeUtilization * 100}%` }}

package/src/debugui/components/Root.tsx

@@ -98,7 +98,7 @@ function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
         max={rightMax}
         side="right"
       />
-      <BottomBar tapeUtilization={0.67} playheadPosition={0.8} isPlaying={true} />
+      <BottomBar />
     </main>
   );
 }

package/src/debugui/state.ts

@@ -4,6 +4,7 @@ import {
   type Signal,
   signal,
 } from "@preact/signals";
+import type { App } from "../App";
 import type { Log } from "../netcode/logs.ts";
 
 export type FrameNumber = number;
@@ -39,6 +40,19 @@ export type DebugState = {
   frameNumber: Signal<number>;
   // HMR flash indicator
   hmrFlash: Signal<boolean>;
+  // Tape playback state
+  isPlaying: Signal<boolean>;
+  tapeUtilization: Signal<number>; // 0-1, how full the tape buffer is
+  playheadPosition: Signal<number>; // 0-1, current position in tape
+  tapeStartFrame: Signal<number>; // first frame in tape
+  tapeFrameCount: Signal<number>; // total frames in tape
+  // Playbar handlers (set by App)
+  onJumpBack: Signal<(() => void) | null>;
+  onStepBack: Signal<(() => void) | null>;
+  onPlayPause: Signal<(() => void) | null>;
+  onStepForward: Signal<(() => void) | null>;
+  onJumpForward: Signal<(() => void) | null>;
+  onSeek: Signal<((position: number) => void) | null>;
 };
 
 const layoutMode = signal<LayoutMode>("off");
@@ -55,6 +69,21 @@ const snapshotSize = signal(0);
 const frameNumber = signal(0);
 const hmrFlash = signal(false);
 
+// Tape playback state
+const isPlaying = signal(true);
+const tapeUtilization = signal(0);
+const playheadPosition = signal(0);
+const tapeStartFrame = signal(0);
+const tapeFrameCount = signal(0);
+
+// Playbar handlers
+const onJumpBack = signal<(() => void) | null>(null);
+const onStepBack = signal<(() => void) | null>(null);
+const onPlayPause = signal<(() => void) | null>(null);
+const onStepForward = signal<(() => void) | null>(null);
+const onJumpForward = signal<(() => void) | null>(null);
+const onSeek = signal<((position: number) => void) | null>(null);
+
 export const debugState: DebugState = {
   /** Layout mode: off, letterboxed, or full */
   layoutMode,
@@ -85,6 +114,21 @@ export const debugState: DebugState = {
 
   /** HMR flash indicator */
   hmrFlash,
+
+  /** Tape playback state */
+  isPlaying,
+  tapeUtilization,
+  playheadPosition,
+  tapeStartFrame,
+  tapeFrameCount,
+
+  /** Playbar handlers */
+  onJumpBack,
+  onStepBack,
+  onPlayPause,
+  onStepForward,
+  onJumpForward,
+  onSeek,
 };
 
 /** Cycle through layout modes: off -> letterboxed -> full -> off */
@@ -201,4 +245,68 @@ export function resetState(): void {
   debugState.snapshotSize.value = 0;
   debugState.frameNumber.value = 0;
   debugState.hmrFlash.value = false;
+  // Tape state
+  debugState.isPlaying.value = true;
+  debugState.tapeUtilization.value = 0;
+  debugState.playheadPosition.value = 0;
+  debugState.tapeStartFrame.value = 0;
+  debugState.tapeFrameCount.value = 0;
+  // Don't reset handlers - they're set once by App
+}
+
+/** Wire up playbar handlers to control an App instance */
+export function wirePlaybarHandlers(app: App): void {
+  debugState.onPlayPause.value = () => {
+    app.sim.isPaused ? app.sim.unpause() : app.sim.pause();
+  };
+  debugState.onStepBack.value = () => {
+    if (app.sim.hasHistory) app.sim.stepBack();
+  };
+  debugState.onStepForward.value = () => {
+    if (app.sim.hasHistory) {
+      app.sim.seek(app.sim.time.frame + 1);
+    }
+  };
+  debugState.onJumpBack.value = () => {
+    if (app.sim.hasHistory) {
+      const target = Math.max(
+        debugState.tapeStartFrame.value,
+        app.sim.time.frame - 10,
+      );
+      app.sim.seek(target);
+    }
+  };
+  debugState.onJumpForward.value = () => {
+    if (app.sim.hasHistory) {
+      const maxFrame =
+        debugState.tapeStartFrame.value + debugState.tapeFrameCount.value;
+      const target = Math.min(maxFrame, app.sim.time.frame + 10);
+      app.sim.seek(target);
+    }
+  };
+  debugState.onSeek.value = (ratio: number) => {
+    if (app.sim.hasHistory) {
+      const startFrame = debugState.tapeStartFrame.value;
+      const frameCount = debugState.tapeFrameCount.value;
+      const targetFrame = startFrame + Math.floor(ratio * frameCount);
+      app.sim.seek(targetFrame);
+    }
+  };
+}
+
+/** Set up drag-and-drop tape loading on a canvas element */
+export function wireTapeDragDrop(canvas: HTMLCanvasElement, app: App): void {
+  canvas.addEventListener("dragover", (e) => {
+    e.preventDefault();
+    e.dataTransfer!.dropEffect = "copy";
+  });
+  canvas.addEventListener("drop", async (e) => {
+    e.preventDefault();
+    const file = e.dataTransfer?.files[0];
+    if (!file?.name.endsWith(".bloop")) {
+      return;
+    }
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    app.loadTape(bytes);
+  });
 }

package/src/debugui/styles.ts

@@ -159,6 +159,7 @@ export const styles = /*css*/ `
   min-width: 18px;
   min-height: 18px;
   border: none;
+  outline: none;
   background: transparent;
   color: #888;
   font-size: 10px;