jsbeeb 1.22.4 → 1.24.0

package/src/web/rewind-ui.js

@@ -1,6 +1,8 @@
-"use strict";
+import { renderThumbnails, executeUntilFrame } from "./rewind-thumbnail.js";
+import { RewindBuffer } from "../rewind.js";
+import { RewindCaptureInterval } from "./emulation-loop.js";
 
-import { renderThumbnails, executeUntilFrame } from "../rewind-thumbnail.js";
+const RewindBufferSnapshots = 30;
 
 /**
  * Rewind scrubber UI — a filmstrip overlay showing thumbnails of recent
@@ -9,18 +11,16 @@ import { renderThumbnails, executeUntilFrame } from "../rewind-thumbnail.js";
 export class RewindUI {
     /**
      * @param {object} options
-     * @param {object} options.rewindBuffer - RewindBuffer instance
      * @param {object} options.processor - Cpu6502 instance
      * @param {object} options.video - Video instance
-     * @param {number} options.captureInterval - rewind capture interval in frames
-     * @param {object} options.loop - the emulation loop, for pausing and resuming
+     * @param {object} options.loop - the emulation loop: says when to capture, and is held while the panel is open
      */
-    constructor({ rewindBuffer, processor, video, captureInterval, loop }) {
-        this.rewindBuffer = rewindBuffer;
+    constructor({ processor, video, loop }) {
+        this.rewindBuffer = new RewindBuffer(RewindBufferSnapshots);
         this.processor = processor;
         this.video = video;
-        this.captureInterval = captureInterval;
         this.loop = loop;
+        loop.addEventListener("rewind-capture", () => this.capture());
 
         this.panel = document.getElementById("rewind-panel");
         this.filmstrip = document.getElementById("rewind-filmstrip");
@@ -28,7 +28,7 @@ export class RewindUI {
         this.openBtn = document.getElementById("rewind-open");
 
         this.isOpen = false;
-        this.wasRunning = false;
+        this.resumeLoop = null;
         this.selectedIndex = -1;
         this.snapshots = [];
         this.savedState = null;
@@ -41,6 +41,11 @@ export class RewindUI {
         });
     }
 
+    capture() {
+        this.rewindBuffer.push(this.processor.snapshotState());
+        this.updateButtonState();
+    }
+
     /** Forget everything captured, as on a hard reset. */
     reset() {
         this.close();
@@ -55,37 +60,32 @@ export class RewindUI {
         this.snapshots = this.rewindBuffer.getAll();
         if (this.snapshots.length === 0) return;
 
-        this.wasRunning = this.loop.isRunning();
-        if (this.wasRunning) this.loop.stop(false);
-
+        this.resumeLoop = this.loop.pause("the rewind panel");
         this.isOpen = true;
-        this.savedState = this.processor.snapshotState();
-
         try {
+            this.savedState = this.processor.snapshotState();
             const thumbnails = renderThumbnails(
                 this.processor,
                 this.snapshots,
                 this.video,
-                this.captureInterval,
+                RewindCaptureInterval,
                 this.savedState,
             );
             this._populateFilmstrip(thumbnails);
+            this.panel.hidden = false;
+            // Use capture phase so keys don't leak to the emulator's keyboard handler
+            document.addEventListener("keydown", this._onKeyDown, true);
+
+            // Select the newest snapshot ("now") and jump to it
+            this.selectedIndex = this.snapshots.length - 1;
+            this._restoreAndPaint(this.selectedIndex);
+            this._updateSelectionHighlight();
+            this.filmstrip.scrollLeft = this.filmstrip.scrollWidth;
         } catch (e) {
-            this.processor.restoreState(this.savedState);
+            if (this.savedState) this.processor.restoreState(this.savedState);
             this._closePanel();
-            if (this.wasRunning) this.loop.go();
             throw e;
         }
-
-        this.panel.hidden = false;
-        // Use capture phase so keys don't leak to the emulator's keyboard handler
-        document.addEventListener("keydown", this._onKeyDown, true);
-
-        // Select the newest snapshot ("now") and jump to it
-        this.selectedIndex = this.snapshots.length - 1;
-        this._restoreAndPaint(this.selectedIndex);
-        this._updateSelectionHighlight();
-        this.filmstrip.scrollLeft = this.filmstrip.scrollWidth;
     }
 
     /**
@@ -100,7 +100,6 @@ export class RewindUI {
             this.processor.restoreState(this.snapshots[this.selectedIndex]);
         }
         this._closePanel();
-        if (this.wasRunning) this.loop.go();
     }
 
     /**
@@ -110,7 +109,6 @@ export class RewindUI {
         if (!this.isOpen) return;
         this._renderState(this.savedState);
         this._closePanel();
-        if (this.wasRunning) this.loop.go();
     }
 
     /** Alias for cancel — closing the panel without explicit commit cancels. */
@@ -146,6 +144,8 @@ export class RewindUI {
         this.snapshots = [];
         this.savedState = null;
         document.removeEventListener("keydown", this._onKeyDown, true);
+        this.resumeLoop?.();
+        this.resumeLoop = null;
     }
 
     /**

package/src/web/run-controls.js

@@ -0,0 +1,39 @@
+/**
+ * The play and pause buttons on the top bar, kept in step with the loop's
+ * running state. pause() and resume() are also the desktop app's menu actions.
+ */
+export class RunControls {
+    /**
+     * @param {object} options
+     * @param {object} options.loop - the emulation loop
+     * @param {object} options.dbgr - the debugger, hidden on resume
+     * @param {object} options.keyboard - the machine keyboard, told the running state
+     */
+    constructor({ loop, dbgr, keyboard }) {
+        this.loop = loop;
+        this.dbgr = dbgr;
+        this.keyboard = keyboard;
+        this.playButton = document.getElementById("debug-play");
+        this.pauseButton = document.getElementById("debug-pause");
+
+        loop.addEventListener("running", () => {
+            const running = loop.isRunning();
+            keyboard.setRunning(running);
+            this.playButton.disabled = running;
+            this.pauseButton.disabled = !running;
+        });
+        this.pauseButton.addEventListener("click", () => this.pause());
+        this.playButton.addEventListener("click", () => this.resume());
+    }
+
+    /** Stop the loop into the debugger. */
+    pause() {
+        this.loop.stop(true);
+    }
+
+    /** Hide the debugger; the keyboard's resume event restarts the loop. */
+    resume() {
+        this.dbgr.hide();
+        this.keyboard.resumeEmulation();
+    }
+}

package/src/web/settings.js

@@ -1,159 +1,88 @@
-import * as utils from "../utils.js";
-import { Config } from "./config.js";
 import { DefaultModel, findModel } from "../models.js";
 import { DefaultAudioOutput, isAudioOutput } from "../audio-output.js";
-import { SpeechOutput } from "../speech-output.js";
 import { guessModelFromHostname } from "../url-params.js";
+import { fittedRoms } from "./config.js";
 import { toast } from "./toast.js";
 
-// A slider fires for every pixel of a drag, and each URL update is a history entry.
-const UrlSettleMs = 300;
+// Kept in browser storage for next time, as well as in the URL.
+const StoredSettings = ["keyLayout", "displayMode", "audioOutput", "speakerAmount"];
+
+/** The URL spellings of a model plus a fitting, from before fittings had settings of their own. */
+export function mapLegacyModels(parsedQuery) {
+    if (!parsedQuery.model) return;
+    switch (parsedQuery.model.toLowerCase()) {
+        case "masterturbo":
+            parsedQuery.model = "Master";
+            parsedQuery.coProcessor = true;
+            break;
+        case "bmusic5000":
+            parsedQuery.model = "B-DFS1.2";
+            parsedQuery.hasMusic5000 = true;
+            break;
+        case "bteletext":
+            parsedQuery.model = "B-DFS1.2";
+            parsedQuery.hasTeletextAdaptor = true;
+            break;
+    }
+}
 
 /**
- * The user's settings: resolved from the URL, browser storage and the
- * defaults, kept in step across the Settings dialog, the top bar, storage and
- * the URL, and applied to the machine. Built before anything it applies to;
- * wire() hands it the targets once they exist, which is before any setting
- * can change hands.
+ * The user's settings, resolved from the URL, browser storage and the
+ * defaults. set() adopts a change, persists it and dispatches an event named
+ * for each changed setting carrying its new value, then one "change" event
+ * carrying them all; whatever a setting reaches subscribes with on().
  */
-export class Settings {
-    constructor({ urlState, makeConfig = (...handlers) => new Config(...handlers) }) {
+export class Settings extends EventTarget {
+    constructor({ urlState }) {
+        super();
         this.urlState = urlState;
-        this.targets = null;
-        const parsedQuery = urlState.params;
-
-        // Speech output: initialised from URL param; can be toggled at runtime via the Settings panel.
-        // Must be created before Config so the onClose callback and the initial checkbox state can reference it.
-        this.speechOutput = new SpeechOutput();
-        this.setSpeechOutput(!!parsedQuery.speechOutput);
-
-        this.keyLayout = window.localStorage.keyLayout || "physical";
-        if (parsedQuery.keyLayout) {
-            this.keyLayout = (parsedQuery.keyLayout + "").toLowerCase();
-        }
-
-        this.config = makeConfig(
-            (changed) => {
-                if (changed.audioOutput) this.applyAudioOutput(changed.audioOutput);
-                if (changed.speakerAmount !== undefined) this.applySpeakerAmount(changed.speakerAmount);
-                if (changed.displayMode) this.applyDisplayMode(changed.displayMode);
-            },
-            (changed) => this.onDialogClosed(changed),
-            async () => {
-                const restart = await this.targets.modals.confirm(
-                    "Your change is saved, but only takes effect when the emulator restarts. Restart now?",
-                    "Restart now",
-                    "Later",
-                );
-                if (restart) window.location.reload();
-            },
-        );
+        const params = urlState.params;
+        mapLegacyModels(params);
 
-        // Perform mapping of legacy models to the new format
-        this.config.mapLegacyModels(parsedQuery);
-
-        const requestedModelName = parsedQuery.model || guessModelFromHostname(window.location.hostname);
-        const requestedModel = findModel(requestedModelName);
-        if (!requestedModel)
+        const requestedModelName = params.model || guessModelFromHostname(window.location.hostname);
+        this.model = findModel(requestedModelName);
+        if (!this.model) {
             toast(`There is no model called "${requestedModelName}". Using ${DefaultModel.name} instead.`, {
                 title: "Model",
             });
-        this.config.setModel((requestedModel ?? DefaultModel).name);
-        this.config.setKeyLayout(this.keyLayout);
-        this.config.setTubeCpuMultiplier(parsedQuery.tubeCpuMultiplier || 1);
-        this.config.setMicrophoneChannel(parsedQuery.microphoneChannel);
-        this.config.setCheckboxes({
-            coProcessor: !!parsedQuery.coProcessor,
-            hasEconet: !!parsedQuery.hasEconet,
-            hasMusic5000: !!parsedQuery.hasMusic5000,
-            hasTeletextAdaptor: !!parsedQuery.hasTeletextAdaptor,
-            mouseJoystickEnabled: !!parsedQuery.mouseJoystickEnabled,
-            speechOutput: this.speechOutput.enabled,
-        });
-
-        this.displayMode = parsedQuery.displayMode || window.localStorage.displayMode || "rgb";
-        this.config.setDisplayMode(this.displayMode);
+            this.model = DefaultModel;
+        }
+        this.keyLayout =
+            (params.keyLayout && `${params.keyLayout}`.toLowerCase()) || window.localStorage.keyLayout || "physical";
+        this.tubeCpuMultiplier = params.tubeCpuMultiplier || 1;
+        this.microphoneChannel = params.microphoneChannel;
+        this.coProcessor = !!params.coProcessor;
+        this.hasEconet = !!params.hasEconet;
+        this.hasMusic5000 = !!params.hasMusic5000;
+        this.hasTeletextAdaptor = !!params.hasTeletextAdaptor;
+        this.mouseJoystickEnabled = !!params.mouseJoystickEnabled;
+        this.speechOutput = !!params.speechOutput;
+        this.displayMode = params.displayMode || window.localStorage.displayMode || "rgb";
         this.audioOutput =
-            [parsedQuery.audioOutput, window.localStorage.audioOutput].find(isAudioOutput) ?? DefaultAudioOutput;
+            [params.audioOutput, window.localStorage.audioOutput].find(isAudioOutput) ?? DefaultAudioOutput;
         this.speakerAmount =
-            [parsedQuery.speakerAmount, parseFloat(window.localStorage.speakerAmount)].find(Number.isFinite) ?? 1;
-        this.config.setAudioOutput(this.audioOutput);
-        this.config.setSpeakerAmount(this.speakerAmount);
-
-        this.updateUrlOnceSettled = utils.debounce(() => urlState.updateUrl(), UrlSettleMs);
-    }
-
-    get model() {
-        return this.config.model;
-    }
-
-    /** What applying a setting reaches: everything here exists before a setting can change. */
-    wire(targets) {
-        this.targets = targets;
-    }
-
-    setSpeechOutput(enabled) {
-        this.speechOutput.enabled = enabled;
-        if (enabled && typeof speechSynthesis === "undefined")
-            toast("This browser has no speech synthesis, so speech output has nothing to speak with.", {
-                title: "Speech",
-            });
+            [params.speakerAmount, parseFloat(window.localStorage.speakerAmount)].find(Number.isFinite) ?? 1;
     }
 
-    applyAudioOutput(output) {
-        this.audioOutput = output;
-        this.targets.audioHandler.setAudioOutput(output);
-        this.config.setAudioOutput(output);
-        this.targets.quickSettings?.showAudioOutput(output);
-        window.localStorage.audioOutput = output;
-        this.urlState.set({ audioOutput: output });
+    get extraRoms() {
+        return fittedRoms(this);
     }
 
-    applySpeakerAmount(amount) {
-        this.speakerAmount = amount;
-        this.targets.audioHandler.setSpeakerAmount(amount);
-        this.config.setSpeakerAmount(amount);
-        this.targets.quickSettings?.showSpeakerAmount(amount);
-        window.localStorage.speakerAmount = amount;
-        this.urlState.params.speakerAmount = amount;
-        this.updateUrlOnceSettled();
+    /** Calls `listener` with the new value whenever the setting `name` is set. */
+    on(name, listener) {
+        this.addEventListener(name, () => listener(this[name]));
     }
 
-    applyDisplayMode(mode) {
-        this.displayMode = mode;
-        this.targets.display.setMode(mode);
-        // The monitor picture may have changed shape.
-        this.targets.layout.resize();
-        this.config.setDisplayMode(mode);
-        this.targets.quickSettings?.showDisplayMode(mode);
-        window.localStorage.displayMode = mode;
-        this.urlState.set({ displayMode: mode });
-    }
-
-    onDialogClosed(changed) {
-        const { urlState } = this;
-        const { machine, keys, inputs } = this.targets;
-        const parsedQuery = urlState.params;
-        urlState.set(changed);
-        if (changed.keyLayout) {
-            window.localStorage.keyLayout = changed.keyLayout;
-            machine.emulationConfig.keyLayout = changed.keyLayout;
-            keys.setKeyLayout(changed.keyLayout);
-        }
-        if (changed.mouseJoystickEnabled !== undefined || Object.hasOwn(changed, "microphoneChannel")) {
-            inputs.updateAdcSources(parsedQuery.mouseJoystickEnabled, parsedQuery.microphoneChannel);
-
-            if (changed.microphoneChannel !== undefined) {
-                inputs.setupMicrophone();
-            }
-        }
-        if (changed.speechOutput !== undefined) this.setSpeechOutput(!!changed.speechOutput);
-        if (changed.tubeCpuMultiplier !== undefined) {
-            machine.emulationConfig.tubeCpuMultiplier = changed.tubeCpuMultiplier;
-            this.config.setTubeCpuMultiplier(changed.tubeCpuMultiplier);
-            if (machine.processor.hasTube) {
-                machine.processor.tube.cpuMultiplier = changed.tubeCpuMultiplier;
-            }
+    /** Adopts `changes` (an undefined value clears a setting), persists them and tells the subscribers. */
+    set(changes) {
+        for (const [name, value] of Object.entries(changes)) {
+            this[name] = name === "model" ? (findModel(value) ?? this.model) : value;
+            if (!StoredSettings.includes(name)) continue;
+            if (value === undefined) window.localStorage.removeItem(name);
+            else window.localStorage[name] = value;
         }
+        this.urlState.set(changes, { settle: "speakerAmount" in changes });
+        for (const name of Object.keys(changes)) this.dispatchEvent(new Event(name));
+        this.dispatchEvent(new CustomEvent("change", { detail: changes }));
     }
 }

package/src/web/snapshot-ui.js

@@ -1,6 +1,6 @@
 import * as disc from "../fdc.js";
 import { DiscLayout } from "../disc.js";
-import { downloadBlob } from "../dom-utils.js";
+import { downloadBlob } from "./dom-utils.js";
 import {
     createSnapshot,
     restoreSnapshot,
@@ -113,9 +113,7 @@ export class SnapshotUI {
     }
 
     async saveState() {
-        const wasRunning = this.loop.isRunning();
-        if (wasRunning) this.loop.stop(false);
-        let failure = null;
+        const resume = this.loop.pause("saving state");
         try {
             const manifest = snapshotMedia(this.processor.fdc.drives, this.urlState.params, this.defaultBootDisc);
             const snapshot = createSnapshot(this.processor, this.model, manifest);
@@ -124,18 +122,14 @@ export class SnapshotUI {
             const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
             downloadBlob(blob, `jsbeeb-${this.model.name}-${timestamp}.json.gz`);
         } catch (e) {
-            failure = e;
+            this.modals.showError("saving state", e);
+        } finally {
+            resume();
         }
-        // Resume before reporting failure: the error dialog pauses a running
-        // loop itself, and resumes it on close.
-        if (wasRunning) this.loop.go();
-        if (failure) this.modals.showError("saving state", failure);
     }
 
     async loadStateFromFile(file, preReadBuffer) {
-        const wasRunning = this.loop.isRunning();
-        if (wasRunning) this.loop.stop(false);
-        let failure = null;
+        const resume = this.loop.pause("loading state");
         try {
             const arrayBuffer = preReadBuffer || (await file.arrayBuffer());
             const snapshot = await readSnapshot(arrayBuffer);
@@ -152,10 +146,10 @@ export class SnapshotUI {
             // Force a repaint so the display updates even while paused
             this.video.paint();
         } catch (e) {
-            failure = e;
+            this.modals.showError("loading state", e);
+        } finally {
+            resume();
         }
-        if (wasRunning) this.loop.go();
-        if (failure) this.modals.showError("loading state", failure);
     }
 
     /** Picks up the state a cross-model reload stashed, once the matching machine is up. */
@@ -199,7 +193,7 @@ export class SnapshotUI {
                         ? savedMedia[imageDataKey]
                         : new Uint8Array(Object.values(savedMedia[imageDataKey]));
                 const discName = savedMedia[discKey + "Name"] || "snapshot.ssd";
-                loadedDisc = disc.discFor(this.processor.fdc, discName, imageData, undefined, layout);
+                loadedDisc = disc.discFor(discName, imageData, undefined, layout);
                 // Retain the image bytes so subsequent saves can re-embed them.
                 loadedDisc.setOriginalImage(imageData);
             }

package/src/{speech-output.js → web/speech-output.js}

@@ -1,5 +1,3 @@
-"use strict";
-
 /**
  * RS-423 handler that routes transmitted bytes to the Web Speech API.
  *

package/src/web/sth-picker.js

@@ -1,8 +1,8 @@
-import * as utils from "../utils.js";
 import * as bootstrap from "bootstrap";
 import { StairwayToHell } from "../sth.js";
 import { errorText } from "./reporting.js";
 import { clearArchiveList, filterArchiveList, showArchiveMessage } from "./archive-list.js";
+import { noteEvent } from "./analytics.js";
 
 /**
  * The Stairway to Hell archive picker: one modal browsing either the disc or
@@ -69,8 +69,9 @@ export class SthPicker {
     }
 
     async pickDisc(item) {
-        utils.noteEvent("sth", "click", item);
-        this.media.setDisc1Image("sth:" + item);
+        noteEvent("sth", "click", item);
+        const image = "sth:" + item;
+        this.media.setDisc1Image(image);
         const needsAutoboot = this.urlState.params.autoboot !== undefined;
         if (needsAutoboot) {
             this.processor.reset(true);
@@ -78,7 +79,7 @@ export class SthPicker {
 
         this.modals.popupLoading("Loading " + item);
         try {
-            const loaded = await this.media.loadDiscImage(this.urlState.params.disc1, this.drives.layoutForDrive(0));
+            const loaded = await this.media.loadDiscImage(image, this.drives.layoutForDrive(0));
             this.drives.putDiscIn(0, loaded);
             this.modals.loadingFinished();
 
@@ -92,12 +93,13 @@ export class SthPicker {
     }
 
     async pickTape(item) {
-        utils.noteEvent("sth", "clickTape", item);
-        this.media.setTapeImage("sth:" + item);
+        noteEvent("sth", "clickTape", item);
+        const image = "sth:" + item;
+        this.media.setTapeImage(image);
 
         this.modals.popupLoading("Loading " + item);
         try {
-            const tape = await this.media.loadTapeImage(this.urlState.params.tape);
+            const tape = await this.media.loadTapeImage(image);
             this.media.setProcessorTape(tape);
             this.modals.loadingFinished();
         } catch (err) {

package/src/web/url-state.js

@@ -1,4 +1,8 @@
 import { buildUrlFromParams, ParamTypes, parseQueryString } from "../url-params.js";
+import { debounce } from "../debounce.js";
+
+// A slider fires for every pixel of a drag, and each URL update is a history entry.
+const UrlSettleMs = 300;
 
 /** How each parameter the page understands is parsed and written back. */
 export const UrlParamTypes = {
@@ -9,8 +13,6 @@ export const UrlParamTypes = {
     embed: ParamTypes.BOOL,
     fasttape: ParamTypes.BOOL,
     noseek: ParamTypes.BOOL,
-    debug: ParamTypes.BOOL,
-    verbose: ParamTypes.BOOL,
     autoboot: ParamTypes.BOOL,
     autochain: ParamTypes.BOOL,
     autorun: ParamTypes.BOOL,
@@ -28,9 +30,9 @@ export const UrlParamTypes = {
     audioDebug: ParamTypes.BOOL,
 
     // Numeric parameters
-    speed: ParamTypes.INT,
     stationId: ParamTypes.INT,
     frameSkip: ParamTypes.INT,
+    videoCyclesBatch: ParamTypes.INT,
     audiofilterfreq: ParamTypes.FLOAT,
     audiofilterq: ParamTypes.FLOAT,
     speakerAmount: ParamTypes.FLOAT,
@@ -52,6 +54,12 @@ export const UrlParamTypes = {
     audioOutput: ParamTypes.STRING,
     drive0Tracks: ParamTypes.STRING,
     drive1Tracks: ParamTypes.STRING,
+    loadBasic: ParamTypes.STRING,
+    embedBasic: ParamTypes.STRING,
+    patch: ParamTypes.STRING,
+    sbLeft: ParamTypes.STRING,
+    sbRight: ParamTypes.STRING,
+    sbBottom: ParamTypes.STRING,
 };
 
 /**
@@ -67,6 +75,7 @@ export class UrlState {
         // Parameters may be given after the hash as well as in the query.
         const queryString = location.search.substring(1) + "&" + location.hash.substring(1);
         this.params = parseQueryString(queryString, paramTypes);
+        this.updateUrlOnceSettled = debounce(() => this.updateUrl(), UrlSettleMs);
     }
 
     /** The page's URL with the parameters as they are now. */
@@ -79,13 +88,18 @@ export class UrlState {
         return buildUrlFromParams(this.baseUrl, { ...this.params, ...overrides }, this.paramTypes);
     }
 
-    /** Apply `changes` to the parameters (undefined deletes a key) and push the new URL. */
-    set(changes) {
+    /**
+     * Apply `changes` to the parameters (undefined deletes a key) and push the
+     * new URL; `settle: true` lets a burst of changes finish before pushing one
+     * history entry for the lot.
+     */
+    set(changes, { settle = false } = {}) {
         for (const [key, value] of Object.entries(changes)) {
             if (value === undefined) delete this.params[key];
             else this.params[key] = value;
         }
-        this.updateUrl();
+        if (settle) this.updateUrlOnceSettled();
+        else this.updateUrl();
     }
 
     updateUrl() {