@bloopjs/web 0.0.90 → 0.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloopjs/web",
-  "version": "0.0.90",
+  "version": "0.0.91",
   "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.91",
+    "@bloopjs/engine": "0.0.91",
     "@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,6 +115,10 @@ export function BottomBar() {
 
   const seekDrag = useSeekDrag(handleSeek);
 
+  const handleLoadTapeClick = useCallback(() => {
+    debugState.isLoadDialogOpen.value = true;
+  }, []);
+
   return (
     <div className="bottom-bar">
       <div className="playbar-controls">
@@ -147,6 +152,10 @@ export function BottomBar() {
             Jump forward <kbd>8</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 +169,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,11 @@ export type DebugState = {
   onStepForward: Signal<(() => void) | null>;
   onJumpForward: Signal<(() => void) | null>;
   onSeek: Signal<((position: number) => void) | null>;
+  // Tape loading
+  onLoadTape: Signal<((bytes: Uint8Array, fileName: string) => void) | null>;
+  onReplayLastTape: Signal<(() => void) | null>;
+  lastTapeName: Signal<string | null>;
+  isLoadDialogOpen: Signal<boolean>;
 };
 
 const layoutMode = signal<LayoutMode>("off");
@@ -84,6 +89,12 @@ const onStepForward = signal<(() => void) | null>(null);
 const onJumpForward = signal<(() => void) | null>(null);
 const onSeek = signal<((position: number) => void) | null>(null);
 
+// Tape loading
+const onLoadTape = signal<((bytes: Uint8Array, fileName: string) => void) | null>(null);
+const onReplayLastTape = 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 +140,12 @@ export const debugState: DebugState = {
   onStepForward,
   onJumpForward,
   onSeek,
+
+  /** Tape loading */
+  onLoadTape,
+  onReplayLastTape,
+  lastTapeName,
+  isLoadDialogOpen,
 };
 
 /** Cycle through layout modes: off -> letterboxed -> full -> off */
@@ -310,3 +327,76 @@ 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;
+    }
+  };
+
+  // Check for saved tape on init
+  checkForSavedTape();
+}

package/src/debugui/styles.ts

@@ -445,4 +445,87 @@ export const styles = /*css*/ `
   border-radius: 4px;
   border: 1px inset lavender;
 }
+
+/* Load Tape Dialog */
+.load-tape-dialog {
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 0;
+  color: #ccc;
+  font-family: monospace;
+  max-width: 320px;
+  width: 90vw;
+}
+
+.load-tape-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.load-tape-dialog-content {
+  padding: 16px;
+}
+
+.load-tape-dialog h3 {
+  margin: 0 0 16px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.drop-zone {
+  border: 2px dashed #444;
+  border-radius: 8px;
+  padding: 32px 16px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.drop-zone:hover {
+  border-color: #666;
+  background: #222;
+}
+
+.drop-zone.drag-over {
+  border-color: #7b3fa0;
+  background: rgba(123, 63, 160, 0.1);
+}
+
+.drop-zone-text {
+  color: #888;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.hidden-file-input {
+  display: none;
+}
+
+.replay-last-btn {
+  width: 100%;
+  margin-top: 12px;
+  padding: 8px 12px;
+  background: #333;
+  border: none;
+  border-radius: 4px;
+  color: #ccc;
+  font-family: monospace;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.replay-last-btn:hover {
+  background: #444;
+  color: #fff;
+}
+
+.load-tape-btn {
+  margin-left: 4px;
+}
 `;