@bloopjs/web 0.0.91 → 0.0.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloopjs/web",
-  "version": "0.0.91",
+  "version": "0.0.92",
   "author": "Neil Sarkar",
   "type": "module",
   "repository": {
@@ -33,8 +33,8 @@
     "typescript": "^5"
   },
   "dependencies": {
-    "@bloopjs/bloop": "0.0.91",
-    "@bloopjs/engine": "0.0.91",
+    "@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/debugui/components/BottomBar.tsx

@@ -119,39 +119,49 @@ export function BottomBar() {
     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>

package/src/debugui/state.ts

@@ -53,9 +53,10 @@ export type DebugState = {
   onStepForward: Signal<(() => void) | null>;
   onJumpForward: Signal<(() => void) | null>;
   onSeek: Signal<((position: number) => void) | null>;
-  // Tape loading
+  // 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>;
 };
@@ -89,9 +90,10 @@ const onStepForward = signal<(() => void) | null>(null);
 const onJumpForward = signal<(() => void) | null>(null);
 const onSeek = signal<((position: number) => void) | null>(null);
 
-// Tape loading
+// 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);
 
@@ -141,9 +143,10 @@ export const debugState: DebugState = {
   onJumpForward,
   onSeek,
 
-  /** Tape loading */
+  /** Tape loading/saving */
   onLoadTape,
   onReplayLastTape,
+  onSaveTape,
   lastTapeName,
   isLoadDialogOpen,
 };
@@ -397,6 +400,18 @@ export function wireTapeLoadHandlers(app: App): void {
     }
   };
 
+  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();
 }

package/src/debugui/styles.ts

@@ -4,10 +4,26 @@ export const styles = /*css*/ `
   box-sizing: border-box;
 }
 
+/* Mobile-first CSS variables */
+:host {
+  --bar-size: 10vw;
+  --bar-size-h: 10vh;
+  --bar-size-h: 10dvh;
+}
+
+/* Desktop overrides */
+@media (min-width: 769px) {
+  :host {
+    --bar-size: 2vw;
+    --bar-size-h: 2vh;
+  }
+}
+
 /* Layout */
 .fullscreen {
   width: 100vw;
   height: 100vh;
+  height: 100dvh;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -24,17 +40,96 @@ export const styles = /*css*/ `
   display: block;
 }
 
+/* Mobile-first: vertical scroll layout */
 .layout {
-  display: grid;
-  grid-template-areas:
-    "game stats"
-    "logs logs";
-  grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
-  grid-template-rows: calc(50% - 0.5rem) calc(50% - 0.5rem);
-  gap: 1rem;
+  /* Use fixed position on mobile to escape parent overflow:hidden */
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+  padding: 0;
+  gap: 0;
+  background: #1a1a1a;
+}
+
+.layout .game {
+  /* Use dvh with vh fallback for mobile Safari address bar */
+  height: 100vh;
+  height: 100dvh;
+  width: 100%;
+  flex-shrink: 0;
+  /* Mobile: no border radius, fullscreen game */
+  border-radius: 0;
+}
+
+/* Mobile: stretch canvas to fill game area */
+.layout .game .canvas-container {
   width: 100%;
   height: 100%;
+}
+
+.layout .game .canvas-container canvas {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  display: block;
+}
+
+.layout .stats,
+.layout .logs {
+  width: 100%;
+  min-height: 50vh;
+  min-height: 50dvh;
   padding: 1rem;
+  flex-shrink: 0;
+}
+
+/* Desktop: 2x2 grid layout */
+@media (min-width: 769px) {
+  .layout {
+    position: static;
+    display: grid;
+    grid-template-areas:
+      "game stats"
+      "logs logs";
+    grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
+    grid-template-rows: calc(50% - 0.5rem) calc(50% - 0.5rem);
+    gap: 1rem;
+    padding: 1rem;
+    height: 100%;
+    overflow: hidden;
+    -webkit-overflow-scrolling: auto;
+    overscroll-behavior-y: auto;
+  }
+
+  .layout .game {
+    height: auto;
+    flex-shrink: initial;
+    border-radius: 8px;
+  }
+
+  /* Desktop: restore centered canvas with constraints */
+  .layout .game .canvas-container canvas {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .layout .stats,
+  .layout .logs {
+    min-height: auto;
+    padding: 1rem;
+    flex-shrink: initial;
+  }
 }
 
 /* Letterboxed layout - using equal vw/vh percentages keeps game at viewport aspect ratio */
@@ -44,10 +139,12 @@ export const styles = /*css*/ `
     "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;
+  grid-template-columns: var(--bar-size) 1fr var(--bar-size);
+  grid-template-rows: var(--bar-size-h) 1fr var(--bar-size-h);
   width: 100vw;
+  /* Use dvh with vh fallback for mobile Safari address bar */
   height: 100vh;
+  height: 100dvh;
   background: #1a1a1a;
   overflow: hidden;
   overscroll-behavior: none;
@@ -66,7 +163,7 @@ export const styles = /*css*/ `
 }
 
 .top-bar-side-label {
-  width: 2vw;
+  width: var(--bar-size);
   text-align: center;
   font-size: 9px;
   text-transform: uppercase;
@@ -74,6 +171,17 @@ export const styles = /*css*/ `
   color: #666;
 }
 
+/* Mobile: larger top bar text */
+@media (max-width: 768px) {
+  .top-bar-side-label {
+    font-size: 12px;
+  }
+
+  .top-bar {
+    font-size: 14px;
+  }
+}
+
 .top-bar-center {
   display: flex;
   align-items: center;
@@ -142,8 +250,17 @@ export const styles = /*css*/ `
   display: flex;
   align-items: center;
   background: #111;
-  padding: 0 8px;
-  gap: 8px;
+  /* Mobile-first: more padding */
+  padding: 0 16px;
+  gap: 12px;
+}
+
+/* Desktop: tighter padding */
+@media (min-width: 769px) {
+  .bottom-bar {
+    padding: 0 8px;
+    gap: 8px;
+  }
 }
 
 .playbar-controls {
@@ -153,16 +270,35 @@ export const styles = /*css*/ `
   flex-shrink: 0;
 }
 
+/* Mobile-first: hide step/jump buttons */
+.playbar-btn.jump-back,
+.playbar-btn.step-back,
+.playbar-btn.step-forward,
+.playbar-btn.jump-forward {
+  display: none;
+}
+
+/* Desktop: show all controls */
+@media (min-width: 769px) {
+  .playbar-btn.jump-back,
+  .playbar-btn.step-back,
+  .playbar-btn.step-forward,
+  .playbar-btn.jump-forward {
+    display: flex;
+  }
+}
+
 .playbar-btn {
-  width: 1.5vh;
-  height: 1.5vh;
-  min-width: 18px;
-  min-height: 18px;
+  /* Mobile-first: larger buttons */
+  width: 4vh;
+  height: 4vh;
+  min-width: 32px;
+  min-height: 32px;
   border: none;
   outline: none;
   background: transparent;
   color: #888;
-  font-size: 10px;
+  font-size: 16px;
   cursor: pointer;
   border-radius: 2px;
   display: flex;
@@ -172,6 +308,17 @@ export const styles = /*css*/ `
   position: relative;
 }
 
+/* Desktop: smaller buttons */
+@media (min-width: 769px) {
+  .playbar-btn {
+    width: 1.5vh;
+    height: 1.5vh;
+    min-width: 18px;
+    min-height: 18px;
+    font-size: 10px;
+  }
+}
+
 .playbar-btn:hover {
   background: #333;
   color: #fff;
@@ -215,7 +362,8 @@ export const styles = /*css*/ `
 
 .seek-bar {
   flex: 1;
-  height: 16px;
+  /* Mobile-first: larger seek bar */
+  height: 32px;
   background: #222;
   border-radius: 4px;
   position: relative;
@@ -223,6 +371,13 @@ export const styles = /*css*/ `
   overflow: hidden;
 }
 
+/* Desktop: smaller seek bar */
+@media (min-width: 769px) {
+  .seek-bar {
+    height: 16px;
+  }
+}
+
 .seek-bar-fill {
   position: absolute;
   top: 0;