@bloopjs/web 0.0.95 → 0.0.97

package/dist/netcode/reconcile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reconcile.d.ts","sourceRoot":"","sources":["../../src/netcode/reconcile.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAiBrC,wBAAsB,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAiC5E"}
+{"version":3,"file":"reconcile.d.ts","sourceRoot":"","sources":["../../src/netcode/reconcile.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAiBrC,wBAAsB,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CA0C5E"}

package/package.json

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

package/src/App.ts

@@ -379,6 +379,8 @@ export class App {
 
       // Update tape playback state
       debugState.isPlaying.value = !this.sim.isPaused;
+      debugState.isRecording.value = this.sim.isRecording;
+      debugState.isReplaying.value = this.sim.isReplaying;
       if (this.sim.hasHistory && debugState.tapeFrameCount.value > 0) {
         const currentFrame = this.sim.time.frame;
         const startFrame = debugState.tapeStartFrame.value;

package/src/debugui/components/BottomBar.tsx

@@ -2,6 +2,52 @@ import { useRef, useCallback } from "preact/hooks";
 import { debugState } from "../state.ts";
 import { LoadTapeDialog } from "./LoadTapeDialog.tsx";
 
+// Simple SVG icons for playbar
+const iconProps = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor" };
+
+const Icons = {
+  jumpBack: (
+    <svg {...iconProps}>
+      <path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" />
+    </svg>
+  ),
+  stepBack: (
+    <svg {...iconProps}>
+      <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
+    </svg>
+  ),
+  play: (
+    <svg {...iconProps}>
+      <path d="M8 5v14l11-7z" />
+    </svg>
+  ),
+  pause: (
+    <svg {...iconProps}>
+      <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+    </svg>
+  ),
+  stepForward: (
+    <svg {...iconProps}>
+      <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />
+    </svg>
+  ),
+  jumpForward: (
+    <svg {...iconProps}>
+      <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
+    </svg>
+  ),
+  save: (
+    <svg {...iconProps}>
+      <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" />
+    </svg>
+  ),
+  load: (
+    <svg {...iconProps}>
+      <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" />
+    </svg>
+  ),
+};
+
 /** Hook that returns handlers for repeat-on-hold behavior with initial debounce */
 function useRepeatOnHold(action: () => void) {
   const rafId = useRef<number | null>(null);
@@ -81,6 +127,8 @@ function useSeekDrag(onSeek: (ratio: number) => void) {
 
 export function BottomBar() {
   const isPlaying = debugState.isPlaying.value;
+  const isRecording = debugState.isRecording.value;
+  const isReplaying = debugState.isReplaying.value;
   const tapeUtilization = debugState.tapeUtilization.value;
   const playheadPosition = debugState.playheadPosition.value;
 
@@ -126,44 +174,57 @@ export function BottomBar() {
   return (
     <div className="bottom-bar">
       <div className="playbar-controls">
+        {isRecording && (
+          <span className="recording-indicator" title="Recording">
+            <span className="recording-dot" />
+            <span className="recording-label">REC</span>
+          </span>
+        )}
+        {isReplaying && (
+          <span className="replay-indicator" title="Replaying tape">
+            REPLAY
+          </span>
+        )}
         <button className="playbar-btn jump-back" {...jumpBackRepeat}>
-          {"<<"}
+          {Icons.jumpBack}
           <span className="tooltip tooltip-left">
             Jump back <kbd>4</kbd>
           </span>
         </button>
         <button className="playbar-btn step-back" {...stepBackRepeat}>
-          {"<"}
+          {Icons.stepBack}
           <span className="tooltip">
             Step back <kbd>5</kbd>
           </span>
         </button>
         <button className="playbar-btn play-pause" onClick={handlePlayPause}>
-          {isPlaying ? "||" : ">"}
+          {isPlaying ? Icons.pause : Icons.play}
           <span className="tooltip">
             {isPlaying ? "Pause" : "Play"} <kbd>6</kbd>
           </span>
         </button>
         <button className="playbar-btn step-forward" {...stepForwardRepeat}>
-          {">"}
+          {Icons.stepForward}
           <span className="tooltip">
             Step forward <kbd>7</kbd>
           </span>
         </button>
         <button className="playbar-btn jump-forward" {...jumpForwardRepeat}>
-          {">>"}
+          {Icons.jumpForward}
           <span className="tooltip">
             Jump forward <kbd>8</kbd>
           </span>
         </button>
         <button className="playbar-btn save-tape-btn" onClick={handleSaveTapeClick}>
-          Save
+          {Icons.save}
+          <span className="btn-label">Save</span>
           <span className="tooltip">
             Save tape <kbd>Cmd+S</kbd>
           </span>
         </button>
         <button className="playbar-btn load-tape-btn" onClick={handleLoadTapeClick}>
-          Load
+          {Icons.load}
+          <span className="btn-label">Load</span>
           <span className="tooltip">Load tape</span>
         </button>
       </div>

package/src/debugui/state.ts

@@ -42,6 +42,8 @@ export type DebugState = {
   hmrFlash: Signal<boolean>;
   // Tape playback state
   isPlaying: Signal<boolean>;
+  isRecording: Signal<boolean>; // whether sim is currently recording
+  isReplaying: Signal<boolean>; // whether sim is replaying a tape
   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
@@ -77,6 +79,8 @@ const hmrFlash = signal(false);
 
 // Tape playback state
 const isPlaying = signal(true);
+const isRecording = signal(false);
+const isReplaying = signal(false);
 const tapeUtilization = signal(0);
 const playheadPosition = signal(0);
 const tapeStartFrame = signal(0);
@@ -130,6 +134,8 @@ export const debugState: DebugState = {
 
   /** Tape playback state */
   isPlaying,
+  isRecording,
+  isReplaying,
   tapeUtilization,
   playheadPosition,
   tapeStartFrame,
@@ -267,6 +273,8 @@ export function resetState(): void {
   debugState.hmrFlash.value = false;
   // Tape state
   debugState.isPlaying.value = true;
+  debugState.isRecording.value = false;
+  debugState.isReplaying.value = false;
   debugState.tapeUtilization.value = 0;
   debugState.playheadPosition.value = 0;
   debugState.tapeStartFrame.value = 0;

package/src/debugui/styles.ts

@@ -270,6 +270,73 @@ export const styles = /*css*/ `
   flex-shrink: 0;
 }
 
+/* Recording indicator - mobile: just the dot */
+.recording-indicator {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+
+.recording-indicator .recording-label {
+  display: none;
+}
+
+.recording-dot {
+  width: 10px;
+  height: 10px;
+  background: #ff4444;
+  border-radius: 50%;
+  animation: recording-pulse 1s ease-in-out infinite;
+}
+
+@keyframes recording-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* Replay indicator - mobile: hidden */
+.replay-indicator {
+  display: none;
+}
+
+/* Desktop: full indicators with text */
+@media (min-width: 769px) {
+  .recording-indicator {
+    gap: 4px;
+    padding: 2px 6px;
+    background: rgba(255, 0, 0, 0.2);
+    border: 1px solid #ff4444;
+    border-radius: 3px;
+  }
+
+  .recording-indicator .recording-label {
+    display: inline;
+    color: #ff4444;
+    font-size: 10px;
+    font-weight: bold;
+    font-family: monospace;
+  }
+
+  .recording-dot {
+    width: 8px;
+    height: 8px;
+  }
+
+  .replay-indicator {
+    display: flex;
+    align-items: center;
+    padding: 2px 6px;
+    background: rgba(100, 100, 255, 0.2);
+    border: 1px solid #6666ff;
+    border-radius: 3px;
+    color: #6666ff;
+    font-size: 10px;
+    font-weight: bold;
+    font-family: monospace;
+    margin-right: 4px;
+  }
+}
+
 /* Mobile-first: hide step/jump buttons */
 .playbar-btn.jump-back,
 .playbar-btn.step-back,
@@ -308,14 +375,33 @@ export const styles = /*css*/ `
   position: relative;
 }
 
-/* Desktop: smaller buttons */
+/* Desktop: sized to match indicators */
 @media (min-width: 769px) {
   .playbar-btn {
-    width: 1.5vh;
-    height: 1.5vh;
-    min-width: 18px;
-    min-height: 18px;
-    font-size: 10px;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  /* Save/Load buttons need room for icon + text */
+  .playbar-btn.save-tape-btn,
+  .playbar-btn.load-tape-btn {
+    width: auto;
+    padding: 0 6px;
+    gap: 4px;
+  }
+}
+
+/* Mobile-first: hide button text labels, show only icons */
+.btn-label {
+  display: none;
+}
+
+/* Desktop: show button text labels */
+@media (min-width: 769px) {
+  .btn-label {
+    display: inline;
   }
 }
 

package/src/netcode/reconcile.ts

@@ -19,6 +19,9 @@ const actual = {
 export async function reconcile(app: App, signal: AbortSignal): Promise<void> {
   // Process packets and send our state each frame
   app.beforeFrame.subscribe((_frame) => {
+    // Skip network processing during tape replay
+    if (app.sim.isReplaying) return;
+
     if (!app.game.context.net.isInSession) {
       return;
     }
@@ -37,6 +40,12 @@ export async function reconcile(app: App, signal: AbortSignal): Promise<void> {
   };
 
   while (!signal.aborted) {
+    // Skip room join checks during tape replay
+    if (app.sim.isReplaying) {
+      await sleep(150);
+      continue;
+    }
+
     const { net } = app.game.context;
     if (net.wantsRoomCode && actual.roomCode !== net.wantsRoomCode) {
       console.log("[netcode] wants a room code", {