@bloopjs/web 0.0.90 → 0.0.92

package/package.json

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

package/src/App.ts

@@ -13,6 +13,7 @@ import {
   triggerHmrFlash,
   wirePlaybarHandlers,
   wireTapeDragDrop,
+  wireTapeLoadHandlers,
 } from "./debugui/state.ts";
 import {
   joinRoom as joinRoomInternal,
@@ -129,9 +130,10 @@ export class App {
     if (this.#debugUi) return this.#debugUi;
     this.#debugUi = new DebugUi(opts);
 
-    // Wire up playbar handlers and drag-drop
+    // Wire up playbar handlers, drag-drop, and tape loading
     wirePlaybarHandlers(this);
     wireTapeDragDrop(this.#debugUi.canvas, this);
+    wireTapeLoadHandlers(this);
 
     return this.#debugUi;
   }

package/src/debugui/components/BottomBar.tsx

@@ -1,5 +1,6 @@
 import { useRef, useCallback } from "preact/hooks";
 import { debugState } from "../state.ts";
+import { LoadTapeDialog } from "./LoadTapeDialog.tsx";
 
 /** Hook that returns handlers for repeat-on-hold behavior with initial debounce */
 function useRepeatOnHold(action: () => void) {
@@ -114,39 +115,57 @@ export function BottomBar() {
 
   const seekDrag = useSeekDrag(handleSeek);
 
+  const handleLoadTapeClick = useCallback(() => {
+    debugState.isLoadDialogOpen.value = true;
+  }, []);
+
+  const handleSaveTapeClick = useCallback(() => {
+    debugState.onSaveTape.value?.();
+  }, []);
+
   return (
     <div className="bottom-bar">
       <div className="playbar-controls">
-        <button className="playbar-btn" {...jumpBackRepeat}>
+        <button className="playbar-btn jump-back" {...jumpBackRepeat}>
           {"<<"}
           <span className="tooltip tooltip-left">
             Jump back <kbd>4</kbd>
           </span>
         </button>
-        <button className="playbar-btn" {...stepBackRepeat}>
+        <button className="playbar-btn step-back" {...stepBackRepeat}>
           {"<"}
           <span className="tooltip">
             Step back <kbd>5</kbd>
           </span>
         </button>
-        <button className="playbar-btn" onClick={handlePlayPause}>
+        <button className="playbar-btn play-pause" onClick={handlePlayPause}>
           {isPlaying ? "||" : ">"}
           <span className="tooltip">
             {isPlaying ? "Pause" : "Play"} <kbd>6</kbd>
           </span>
         </button>
-        <button className="playbar-btn" {...stepForwardRepeat}>
+        <button className="playbar-btn step-forward" {...stepForwardRepeat}>
           {">"}
           <span className="tooltip">
             Step forward <kbd>7</kbd>
           </span>
         </button>
-        <button className="playbar-btn" {...jumpForwardRepeat}>
+        <button className="playbar-btn jump-forward" {...jumpForwardRepeat}>
           {">>"}
           <span className="tooltip">
             Jump forward <kbd>8</kbd>
           </span>
         </button>
+        <button className="playbar-btn save-tape-btn" onClick={handleSaveTapeClick}>
+          Save
+          <span className="tooltip">
+            Save tape <kbd>Cmd+S</kbd>
+          </span>
+        </button>
+        <button className="playbar-btn load-tape-btn" onClick={handleLoadTapeClick}>
+          Load
+          <span className="tooltip">Load tape</span>
+        </button>
       </div>
       <div className="seek-bar" {...seekDrag}>
         <div
@@ -160,6 +179,7 @@ export function BottomBar() {
           />
         )}
       </div>
+      <LoadTapeDialog />
     </div>
   );
 }

package/src/debugui/components/LoadTapeDialog.tsx

@@ -0,0 +1,112 @@
+import { useRef, useEffect, useCallback, useState } from "preact/hooks";
+import { debugState } from "../state.ts";
+
+export function LoadTapeDialog() {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const isOpen = debugState.isLoadDialogOpen.value;
+  const lastTapeName = debugState.lastTapeName.value;
+
+  // Sync dialog open/close with signal
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    if (isOpen && !dialog.open) {
+      dialog.showModal();
+    } else if (!isOpen && dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen]);
+
+  // Handle escape key closing dialog
+  const handleClose = useCallback(() => {
+    debugState.isLoadDialogOpen.value = false;
+  }, []);
+
+  const handleFileSelect = useCallback(async (file: File) => {
+    if (!file.name.endsWith(".bloop")) return;
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    debugState.onLoadTape.value?.(bytes, file.name);
+  }, []);
+
+  const handleDropZoneClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileInputChange = useCallback(
+    (e: { currentTarget: HTMLInputElement }) => {
+      const input = e.currentTarget;
+      const file = input.files?.[0];
+      if (file) {
+        handleFileSelect(file);
+        input.value = ""; // Reset for next selection
+      }
+    },
+    [handleFileSelect],
+  );
+
+  const handleDragOver = useCallback(
+    (e: { preventDefault: () => void; dataTransfer: DataTransfer | null }) => {
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+      setIsDragOver(true);
+    },
+    [],
+  );
+
+  const handleDragLeave = useCallback(() => {
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: { preventDefault: () => void; dataTransfer: DataTransfer | null }) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      const file = e.dataTransfer?.files[0];
+      if (file) {
+        handleFileSelect(file);
+      }
+    },
+    [handleFileSelect],
+  );
+
+  const handleReplayLast = useCallback(() => {
+    debugState.onReplayLastTape.value?.();
+  }, []);
+
+  return (
+    <dialog ref={dialogRef} className="load-tape-dialog" onClose={handleClose}>
+      <div className="load-tape-dialog-content">
+        <h3>Load Tape</h3>
+        <div
+          className={`drop-zone ${isDragOver ? "drag-over" : ""}`}
+          onClick={handleDropZoneClick}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          <span className="drop-zone-text">
+            Drop .bloop file here
+            <br />
+            or click to browse
+          </span>
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".bloop"
+          className="hidden-file-input"
+          onChange={handleFileInputChange}
+        />
+        {lastTapeName && (
+          <button className="replay-last-btn" onClick={handleReplayLast}>
+            Replay last: {lastTapeName}
+          </button>
+        )}
+      </div>
+    </dialog>
+  );
+}

package/src/debugui/state.ts

@@ -53,6 +53,12 @@ export type DebugState = {
   onStepForward: Signal<(() => void) | null>;
   onJumpForward: Signal<(() => void) | null>;
   onSeek: Signal<((position: number) => void) | null>;
+  // Tape loading/saving
+  onLoadTape: Signal<((bytes: Uint8Array, fileName: string) => void) | null>;
+  onReplayLastTape: Signal<(() => void) | null>;
+  onSaveTape: Signal<(() => void) | null>;
+  lastTapeName: Signal<string | null>;
+  isLoadDialogOpen: Signal<boolean>;
 };
 
 const layoutMode = signal<LayoutMode>("off");
@@ -84,6 +90,13 @@ const onStepForward = signal<(() => void) | null>(null);
 const onJumpForward = signal<(() => void) | null>(null);
 const onSeek = signal<((position: number) => void) | null>(null);
 
+// Tape loading/saving
+const onLoadTape = signal<((bytes: Uint8Array, fileName: string) => void) | null>(null);
+const onReplayLastTape = signal<(() => void) | null>(null);
+const onSaveTape = signal<(() => void) | null>(null);
+const lastTapeName = signal<string | null>(null);
+const isLoadDialogOpen = signal(false);
+
 export const debugState: DebugState = {
   /** Layout mode: off, letterboxed, or full */
   layoutMode,
@@ -129,6 +142,13 @@ export const debugState: DebugState = {
   onStepForward,
   onJumpForward,
   onSeek,
+
+  /** Tape loading/saving */
+  onLoadTape,
+  onReplayLastTape,
+  onSaveTape,
+  lastTapeName,
+  isLoadDialogOpen,
 };
 
 /** Cycle through layout modes: off -> letterboxed -> full -> off */
@@ -310,3 +330,88 @@ export function wireTapeDragDrop(canvas: HTMLCanvasElement, app: App): void {
     app.loadTape(bytes);
   });
 }
+
+// IndexedDB helpers for tape persistence
+const TAPE_DB_NAME = "bloop-debug";
+const TAPE_STORE_NAME = "tapes";
+const TAPE_KEY = "last";
+
+function openTapeDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(TAPE_DB_NAME, 1);
+    request.onerror = () => reject(request.error);
+    request.onsuccess = () => resolve(request.result);
+    request.onupgradeneeded = () => {
+      request.result.createObjectStore(TAPE_STORE_NAME);
+    };
+  });
+}
+
+async function saveTapeToStorage(
+  bytes: Uint8Array,
+  fileName: string,
+): Promise<void> {
+  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.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+async function loadTapeFromStorage(): Promise<{
+  bytes: Uint8Array;
+  fileName: string;
+} | null> {
+  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);
+      request.onsuccess = () => resolve(request.result ?? null);
+      request.onerror = () => reject(request.error);
+    });
+  } catch {
+    return null;
+  }
+}
+
+/** Check for saved tape and update lastTapeName signal */
+export async function checkForSavedTape(): Promise<void> {
+  const saved = await loadTapeFromStorage();
+  debugState.lastTapeName.value = saved?.fileName ?? null;
+}
+
+/** Wire up tape loading handlers */
+export function wireTapeLoadHandlers(app: App): void {
+  debugState.onLoadTape.value = async (bytes: Uint8Array, fileName: string) => {
+    app.loadTape(bytes);
+    await saveTapeToStorage(bytes, fileName);
+    debugState.lastTapeName.value = fileName;
+    debugState.isLoadDialogOpen.value = false;
+  };
+
+  debugState.onReplayLastTape.value = async () => {
+    const saved = await loadTapeFromStorage();
+    if (saved) {
+      app.loadTape(saved.bytes);
+      debugState.isLoadDialogOpen.value = false;
+    }
+  };
+
+  debugState.onSaveTape.value = () => {
+    if (!app.sim.hasHistory) return;
+    const tape = app.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);
+  };
+
+  // Check for saved tape on init
+  checkForSavedTape();
+}