jsbeeb 1.22.2 → 1.22.3

package/README.md

@@ -1,5 +1,5 @@
 [![jsbeeb tests](https://github.com/mattgodbolt/jsbeeb/actions/workflows/test-and-deploy.yml/badge.svg)](https://github.com/mattgodbolt/jsbeeb/actions/workflows/test-and-deploy.yml)
-[![coverage](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmattgodbolt%2Fjsbeeb%2Fbadges%2Fcoverage.json)](https://github.com/mattgodbolt/jsbeeb/actions/workflows/test-and-deploy.yml)
+[![coverage](https://img.shields.io/endpoint?url=https%3A%2F%2Fbbc.xania.org%2Fcoverage%2Fbadge.json)](https://bbc.xania.org/coverage/index.html)
 
 # jsbeeb - JavaScript BBC Micro Emulator
 
@@ -16,6 +16,7 @@ different peripherals.
 - [Emulator Shortcuts](#emulator-shortcuts)
 - [Printer Output](#printer-output)
 - [Save State and Rewind](#save-state-and-rewind)
+- [Joystick Support](#joystick-support)
 - [Getting Set Up to Run Locally](#getting-set-up-to-run-locally)
 - [Running as a Desktop Application](#running-as-a-desktop-application)
 - [URL Parameters](#url-parameters)
@@ -120,10 +121,10 @@ Save and load full emulator state snapshots from the **State** menu (or `Ctrl+S`
 
 The emulator continuously captures snapshots into a 30-slot rewind buffer (~1 per second). Open the rewind scrubber from **State > Rewind** or press **Alt+PageDown** to browse recent states as a visual filmstrip:
 
-- **Left/Right arrows** — navigate between snapshots (the main screen updates live)
+- **Left/Right arrows**: navigate between snapshots (the main screen updates live)
 - **Click** a thumbnail to jump to that point
-- **Enter** — commit selection and close the panel
-- **Escape** — cancel and restore the original state
+- **Enter**: commit selection and close the panel
+- **Escape**: cancel and restore the original state
 
 ### Joystick Support
 
@@ -146,13 +147,13 @@ presses `SPACE`. To play Superior's Space Invaders on a pad, where `COPY` fires:
 
 The gamepad control names are:
 
-- `FIRE` — every button at once, which is usually what you want for a one-button game
-- `UP` `DOWN` `LEFT` `RIGHT` — both analogue sticks at once, plus one face button each (`UP` is also `A`, `DOWN` is
+- `FIRE`: every button at once, which is usually what you want for a one-button game
+- `UP` `DOWN` `LEFT` `RIGHT`: both analogue sticks at once, plus one face button each (`UP` is also `A`, `DOWN` is
   `X`, `LEFT` is `Y`, `RIGHT` is `B`)
-- `UP1` `DOWN1` `LEFT1` `RIGHT1` — the left stick only; `UP2` `DOWN2` … — the right stick only; `UP3` `DOWN3` … — the
-  face buttons only
-- `A` `B` `X` `Y` `START` `BACK` `LB` `RB` `LT` `RT` — individual buttons, by their Xbox 360 names
-- `FIRE1` `FIRE2` — clicking the left and right sticks
+- `UP1` `DOWN1` `LEFT1` `RIGHT1`: the left stick only; `UP2` `DOWN2` and so on: the right stick only; `UP3` `DOWN3`
+  and so on: the face buttons only
+- `A` `B` `X` `Y` `START` `BACK` `LB` `RB` `LT` `RT`: individual buttons, by their Xbox 360 names
+- `FIRE1` `FIRE2`: clicking the left and right sticks
 
 The BBC key names are the same as for the keyboard, and digits may be written either way round: `GP.A=1` and `GP.A=K1`
 both press `1`. Unlike `KEY.`, gamepad mappings are BBC-only: there's no Atom equivalent. The D-pad's default mapping
@@ -191,7 +192,9 @@ site to make it smaller and faster to load when it's deployed to [https://bbc.xa
 
 ## Running as a Desktop Application
 
-jsbeeb can also run as a standalone desktop application using Electron:
+jsbeeb can also run as a standalone desktop application using Electron. Prebuilt packages (Debian/Ubuntu `.deb`,
+Fedora/RHEL `.rpm` and a Windows installer) are attached to each
+[GitHub release](https://github.com/mattgodbolt/jsbeeb/releases), or you can build your own:
 
 ### Running in Development
 
@@ -235,17 +238,15 @@ USE_SYSTEM_FPM=true npm run electron:build
 **Debian/Ubuntu:**
 
 ```sh
-sudo apt install ./out/dist/jsbeeb_1.0.1_amd64.deb
+sudo apt install ./out/dist/jsbeeb_<version>_amd64.deb
 ```
 
 **Fedora/RHEL/CentOS:**
 
 ```sh
-sudo rpm -i out/dist/jsbeeb-1.0.1.x86_64.rpm
+sudo rpm -i out/dist/jsbeeb-<version>.x86_64.rpm
 ```
 
-**Note:** Electron support was re-enabled in November 2024 after being disabled during the ESM migration in 2021. It now works with Electron 28+ which added full ES Modules support.
-
 ## URL Parameters
 
 - `autoboot` - fakes a shift break
@@ -335,19 +336,11 @@ Note that every update you make means you need to make a new raw link.
 
 If you're looking to help:
 
-- Testing
-  - Play lots of games and report issues either on [GitHub](https://github.com/mattgodbolt/jsbeeb/issues) or by email (
-    matt@godbolt.org).
-- Core
-  - Get the "boo" of the boot "boo-beep" working (disabled currently as the JavaScript startup makes the sound
-    dreadfully choppy on Chrome at least).
-- Save disc support
-  - Local discs need to be made more workable and need an "export" feature
-  - Multiple discs need a UI
-- `git grep -i todo`
-- Optimisation
-  - While every attempt to make things fast has been made, I'm sure there's some more clever things that can be done
-    without compromising emulation accuracy
+- Play lots of games and report anything that doesn't behave like the real machine, either on
+  [GitHub](https://github.com/mattgodbolt/jsbeeb/issues) or by email (matt@godbolt.org).
+- Pick something from the [issue tracker](https://github.com/mattgodbolt/jsbeeb/issues): there's a mix of emulation
+  accuracy work, missing hardware and peripherals, user interface improvements and performance ideas in there, at all
+  levels of difficulty.
 
 ## Tests
 
@@ -370,12 +363,14 @@ For timing correctness, we have:
   correctness-sensitive when it comes to the timers and interrupts of the BBC.
 - Some 65C12-specific read-modify-write tests written by Ed Spittles.
 
-Tests can be run automatically if you have `node` installed - just run `make` and it'll ensure the relevant libraries
-are installed, then it'll run the tests. Please note it can take a while to run the whole test suite.
+Tests are run via npm scripts: `npm test` runs the whole suite. The vitest suites are `npm run test:unit`,
+`npm run test:integration` and `npm run test:shader`; CPU tests are `npm run test:cpu`, and the smoke test is
+`npm run test:smoke` (the shader and smoke tests need Chrome installed). Please note it can take a while to run the
+whole test suite.
 
 ## Thanks
 
-jsbeeb was heavily based on Sarah Walker's C [B-Em emulator](https://github.com/stardot/b-em) -- thanks to her for her
+jsbeeb was heavily based on Sarah Walker's C [B-Em emulator](https://github.com/stardot/b-em); thanks to her for her
 hard work and for open sourcing her code. B-em is now being maintained by a group of enthusiasts - thanks to them too!
 
 Huge thanks to Richard Talbot-Watkins for his advice and help along the way in fathoming out the instruction timings,
@@ -410,7 +405,8 @@ and posted the [video up on YouTube](https://www.youtube.com/watch?v=37jyHQT7fXQ
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+This project is licensed under the GNU General Public License v3.0 (or later); see the [LICENSE](LICENSE) file for
+details.
 
 ## Contact
 

package/package.json

@@ -7,7 +7,7 @@
   "name": "jsbeeb",
   "description": "Emulate a BBC Micro",
   "repository": "git@github.com:mattgodbolt/jsbeeb.git",
-  "version": "1.22.2",
+  "version": "1.22.3",
   "//engines": "If you change the version of Node, it must also be updated at the top of the Dockerfile.",
   "engines": {
     "node": ">=24.15.0"

package/src/app/electron.js

@@ -4,7 +4,7 @@
 // Handles IPC communication for loading disc/tape images and showing modals from Electron's main process.
 
 function init(args) {
-    const { loadDiscImage, loadTapeImage, loadStateFile, processor, modals, actions, config } = args;
+    const { loadDiscImage, loadTapeImage, loadStateFile, processor, modals, actions, config, media } = args;
     const api = window.electronAPI;
 
     api.onLoadDisc(async (message) => {
@@ -58,7 +58,9 @@ function init(args) {
         config.addEventListener("settings-changed", (e) => {
             api.saveSettings(e.detail);
         });
-        config.addEventListener("media-changed", (e) => {
+    }
+    if (media) {
+        media.addEventListener("media-changed", (e) => {
             api.saveSettings(e.detail);
         });
     }

package/src/main.js

@@ -22,6 +22,7 @@ import { Display } from "./web/display.js";
 import { Layout } from "./web/layout.js";
 import { EmulationLoop, RewindCaptureInterval } from "./web/emulation-loop.js";
 import { KeyboardSetup } from "./web/keyboard-setup.js";
+import { AccessibilitySwitches } from "./web/accessibility-switches.js";
 import { AnalogueInputs } from "./web/analogue-inputs.js";
 import { FrontPanel } from "./web/front-panel.js";
 import { Machine } from "./web/machine.js";
@@ -92,19 +93,7 @@ const printer = new Printer({
         }),
 });
 
-const keys = new KeyboardSetup({
-    enterDebugger: () => loop.stop(true),
-    reload: () => window.location.reload(),
-    toggleFast: () => loop.toggleFastAsPossible(),
-    openRewind: () => rewindUI.open(),
-    openPrinter: () => frontPanel.checkPrinterWindow(),
-    pause: () => loop.stop(false),
-    resume: () => loop.go(),
-    onAnyKeyDown: () => {
-        audioHandler.tryResume();
-        inputs.ensureMicrophoneRunning();
-    },
-});
+const accessibilitySwitches = new AccessibilitySwitches();
 
 const settings = new Settings({ urlState });
 const { config, speechOutput, keyLayout, displayMode, audioOutput, speakerAmount } = settings;
@@ -188,7 +177,7 @@ const machine = new Machine({
     cpuMultiplier,
     extraRoms,
     stationId,
-    userPort: keys.userPort,
+    userPort: accessibilitySwitches.userPort,
     printer,
     speechOutput,
     video,
@@ -197,6 +186,26 @@ const machine = new Machine({
 });
 const processor = machine.processor;
 
+const keys = new KeyboardSetup({
+    actions: {
+        enterDebugger: () => loop.stop(true),
+        reload: () => window.location.reload(),
+        toggleFast: () => loop.toggleFastAsPossible(),
+        openRewind: () => rewindUI.open(),
+        openPrinter: () => frontPanel.checkPrinterWindow(),
+        pause: () => loop.stop(false),
+        resume: () => loop.go(),
+        onAnyKeyDown: () => {
+            audioHandler.tryResume();
+            inputs.ensureMicrophoneRunning();
+        },
+    },
+    accessibilitySwitches,
+    processor,
+    dbgr,
+    keyLayout,
+});
+
 const rewindBuffer = new RewindBuffer(30);
 const loop = new EmulationLoop({
     processor,
@@ -225,23 +234,15 @@ loop.addEventListener("running", () => {
 
 const modals = new Modals({ loop });
 
-const drives = new Drives({ fdc: processor.fdc, driveTracks, areYouSure: modals.areYouSure.bind(modals) });
+const drives = new Drives({ fdc: processor.fdc, driveTracks, confirm: modals.confirm.bind(modals) });
 const media = new MediaLoader({
     processor,
     model,
     drives,
     urlState,
-    config,
     modals,
     isSnapshotFile,
     loadSnapshot: (file, buffer) => snapshots.loadStateFromFile(file, buffer),
-    // The archives are created further down; each source resolves when used.
-    sources: {
-        sth: (name) => sthPicker.discs.fetch(name),
-        tapeSth: (name) => sthPicker.tapes.fetch(name),
-        hfe: (path) => hfePicker.archive.fetch(path),
-        drive: (cat, layout) => drivePicker.load(cat, layout),
-    },
 });
 const autoBoot = new Autoboot({
     model,
@@ -257,7 +258,7 @@ const sthPicker = new SthPicker({
     processor,
     autoboot: (image) => autoBoot.boot(image),
 });
-const hfePicker = new HfePicker({
+new HfePicker({
     media,
     drives,
     modals,
@@ -265,7 +266,7 @@ const hfePicker = new HfePicker({
     processor,
     autoboot: (image) => autoBoot.boot(image),
 });
-const drivePicker = new GoogleDrivePicker({ media, drives, modals, processor });
+new GoogleDrivePicker({ media, drives, modals, processor });
 const snapshots = new SnapshotUI({
     processor,
     model,
@@ -295,8 +296,6 @@ if (parsedQuery.microphoneChannel !== undefined) {
 // Apply ADC source settings from URL parameters
 inputs.updateAdcSources(parsedQuery.mouseJoystickEnabled, parsedQuery.microphoneChannel);
 
-keys.attach({ processor, dbgr, keyLayout });
-
 const frontPanel = new FrontPanel({ processor, model, printer });
 
 // ------------------------------------------------------------------------
@@ -315,7 +314,7 @@ rewindUI.updateButtonState();
 if (processor.fdc) new DiscVisualiser({ fdc: processor.fdc });
 else document.getElementById("disc-visualiser-open").classList.add("disabled");
 
-new Layout({
+const layout = new Layout({
     screenCanvas,
     display,
     embed: parsedQuery.embed !== undefined,
@@ -323,7 +322,7 @@ new Layout({
 });
 
 // Everything a setting can reach now exists.
-settings.wire({ audioHandler, display, quickSettings, machine, keys, inputs, modals });
+settings.wire({ audioHandler, display, layout, quickSettings, machine, keys, inputs, modals });
 
 // ------------------------------------------------------------------------
 // The page's own handlers.
@@ -500,6 +499,7 @@ electron({
     loadTapeImage: media.loadTapeImage.bind(media),
     processor,
     config,
+    media,
     modals: {
         show: (modalId, sthType) => {
             if (modalId === "sth" && sthType) {

package/src/web/accessibility-switches.js

@@ -0,0 +1,26 @@
+/**
+ * The accessibility switches on the user port. Bits 0-7 correspond to switches
+ * 1-8, active low: 0xff = no switches pressed; a clear bit = that switch held.
+ *
+ * On real hardware, the Brilliant Computing switch interface box and special-ed
+ * joystick connect to the User Port only; they do not touch the analogue port
+ * or the System VIA fire buttons (PB4/PB5), which belong to the standard
+ * analogue joystick connector.
+ */
+export class AccessibilitySwitches {
+    constructor() {
+        this.switchState = 0xff;
+        const switches = this;
+        this.userPort = {
+            write() {},
+            read() {
+                return switches.switchState;
+            },
+        };
+    }
+
+    setSwitch(index, held) {
+        if (held) this.switchState &= ~(1 << index);
+        else this.switchState |= 1 << index;
+    }
+}

package/src/web/analogue-inputs.js

@@ -90,8 +90,7 @@ export class AnalogueInputs {
 
     clearMicrophoneChannel() {
         this.config.setMicrophoneChannel(undefined);
-        delete this.urlState.params.microphoneChannel;
-        this.urlState.updateUrl();
+        this.urlState.set({ microphoneChannel: undefined });
     }
 
     async ensureMicrophoneRunning() {

package/src/web/archive-list.js

@@ -28,12 +28,7 @@ export class AutobootTicks {
         for (const check of this.checks) {
             check.addEventListener("click", () => {
                 this.show(check.checked);
-                if (check.checked) {
-                    urlState.params.autoboot = "";
-                } else {
-                    delete urlState.params.autoboot;
-                }
-                urlState.updateUrl();
+                urlState.set({ autoboot: check.checked ? true : undefined });
             });
         }
     }

package/src/web/debug.js

@@ -544,7 +544,7 @@ export class Debugger {
             case "N":
                 this.updatePrevMem();
                 this.cpu.execute(1);
-                self.debug(this.cpu.pc);
+                this.debug(this.cpu.pc);
                 break;
             case "m":
                 this.stepOver();

package/src/web/display.js

@@ -111,9 +111,6 @@ export class Display {
         this.sizeCanvasFor(this.filterClass);
         this.video.paint();
         this.setCrtPic();
-        window.setTimeout(() => window.dispatchEvent(new Event("resize")), 1);
-        // Relayout now as well: the monitor picture may have changed shape.
-        window.dispatchEvent(new Event("resize"));
     }
 
     sizeCanvasFor(filterClass) {

package/src/web/drives.js

@@ -11,7 +11,7 @@ const tracksPerStepFor = (tracks) => (tracks === "40" ? 2 : 1);
  * switches on the Discs menu, and downloading what is in drive 0.
  */
 export class Drives {
-    constructor({ fdc, driveTracks, areYouSure }) {
+    constructor({ fdc, driveTracks, confirm }) {
         this.fdc = fdc;
         this.driveTracks = driveTracks;
         this.saidWritesAreNotKept = false;
@@ -33,7 +33,7 @@ export class Drives {
             if (drive) this.showDriveTracks(driveIndex);
         }
 
-        document.getElementById("download-drive-link").addEventListener("click", () => {
+        document.getElementById("download-drive-link").addEventListener("click", async () => {
             const disc = this.discToDownload();
             if (!disc) return;
             const save = (options) =>
@@ -41,9 +41,8 @@ export class Drives {
             try {
                 save();
             } catch (e) {
-                areYouSure(`${e.message} Save anyway, losing what will not fit?`, "Save anyway", "Cancel", () =>
-                    save({ force: true }),
-                );
+                if (await confirm(`${e.message} Save anyway, losing what will not fit?`, "Save anyway", "Cancel"))
+                    save({ force: true });
             }
         });
 

package/src/web/google-drive-picker.js

@@ -16,6 +16,7 @@ export class GoogleDrivePicker {
         this.modals = modals;
         this.processor = processor;
         this.googleDrive = loader;
+        media.addSource("drive", (cat, layout) => this.load(cat, layout));
 
         this.authEl = document.getElementById("google-drive-auth");
         this.el = document.getElementById("google-drive");

package/src/web/hfe-picker.js

@@ -41,6 +41,7 @@ export class HfePicker {
                 showArchiveMessage("hfe", "hfe-list", "There was an error accessing the HFE archive");
             },
         );
+        media.addSource("hfe", (path) => this.archive.fetch(path));
 
         this.modal = new bootstrap.Modal(document.getElementById("hfe"));
         document.getElementById("hfe").addEventListener("shown.bs.modal", () => {

package/src/web/keyboard-setup.js

@@ -2,36 +2,16 @@ import * as utils from "../utils.js";
 import { Keyboard } from "../keyboard.js";
 import { showNotice } from "./reporting.js";
 
-/**
- * The page's keyboard: the emulated one, the browser shortcuts around it, and
- * the accessibility switches on the user port. Built in two steps because the
- * user port has to exist before the processor does, and the keyboard after.
- */
+/** The page's keyboard: the emulated one and the browser shortcuts around it. */
 export class KeyboardSetup {
     /**
-     * @param {object} actions what each shortcut does, supplied late-bound:
+     * @param {object} opts
+     * @param {object} opts.actions what each shortcut does, supplied late-bound:
      *   enterDebugger, reload, toggleFast, openRewind, openPrinter,
      *   pause, resume, onAnyKeyDown
+     * @param {import("./accessibility-switches.js").AccessibilitySwitches} opts.accessibilitySwitches
      */
-    constructor(actions) {
-        this.actions = actions;
-        this.keyboard = null;
-
-        // Accessibility switch state: bits 0-7 correspond to switches 1-8.
-        // Active low: 0xff = no switches pressed; clearing a bit = that switch is pressed.
-        this.switchState = 0xff;
-        const setup = this;
-        this.userPort = {
-            write() {},
-            read() {
-                return setup.switchState;
-            },
-        };
-    }
-
-    /** Initialise keyboard now that processor exists */
-    attach({ processor, dbgr, keyLayout }) {
-        const { actions } = this;
+    constructor({ actions, accessibilitySwitches, processor, dbgr, keyLayout }) {
         const keyboard = (this.keyboard = new Keyboard({
             processor,
             inputEnabledFunction: () => document.activeElement && document.activeElement.id === "paste-text",
@@ -66,22 +46,11 @@ export class KeyboardSetup {
         keyboard.registerKeyHandler(utils.keyCodes.PAGEDOWN, onDown("pagedown", actions.openRewind), alt);
         keyboard.registerKeyHandler(utils.keyCodes.B, onDown(null, actions.openPrinter), ctrl);
 
-        // Register accessibility switch key handlers.
-        // Keys 1-8 (K1-K8) and function keys F1-F8 both map to user port bits 0-7
-        // (active low: pressing the key clears the corresponding bit in &FE60).
-        //
-        // On real hardware, the Brilliant Computing switch interface box and special-ed
-        // joystick connect to the User Port only; they do not touch the analogue port
-        // or the System VIA fire buttons (PB4/PB5), which belong to the standard
-        // analogue joystick connector.  So we only update switchState here.
-        const handleSwitch = (bit) => (down) => {
-            if (down) this.switchState &= ~(1 << bit);
-            else this.switchState |= 1 << bit;
-        };
-
-        // Alt+1-8 and Alt+F1-F8 trigger the switches.  Using Alt means the underlying
-        // key is never forwarded to the BBC Micro (keyboard.js bails out early when a
-        // handler fires), so typing numbers or using function keys works normally.
+        // Alt+1-8 and Alt+F1-F8 trigger the accessibility switches. Using Alt means
+        // the underlying key is never forwarded to the BBC Micro (keyboard.js bails
+        // out early when a handler fires), so typing numbers or using function keys
+        // works normally.
+        const handleSwitch = (index) => (down) => accessibilitySwitches.setSwitch(index, down);
         for (let i = 0; i < 8; i++) {
             keyboard.registerKeyHandler(utils.keyCodes.K1 + i, handleSwitch(i), alt);
             keyboard.registerKeyHandler(utils.keyCodes.F1 + i, handleSwitch(i), alt);
@@ -96,11 +65,7 @@ export class KeyboardSetup {
     }
 
     sendRawKeyboard(keysToSend, checkCapsAndShiftLocks) {
-        if (this.keyboard) {
-            this.keyboard.sendRawKeyboard(keysToSend, checkCapsAndShiftLocks);
-        } else {
-            console.warn("Tried to send keys before keyboard was initialised");
-        }
+        this.keyboard.sendRawKeyboard(keysToSend, checkCapsAndShiftLocks);
     }
 
     clearKeys() {

package/src/web/media-loader.js

@@ -50,22 +50,20 @@ function readFileAsBinaryString(file) {
  * URL schema can name, the local file inputs, the drop zone and the built-in
  * list. Choosing what goes in a drive funnels through drives.putDiscIn.
  */
-export class MediaLoader {
+export class MediaLoader extends EventTarget {
     /**
      * @param {object} deps
-     * @param {object} deps.sources fetchers keyed by schema: sth, tapeSth and hfe
-     *   resolve an archive name to image data; drive loads a Google Drive file
      * @param {Function} deps.isSnapshotFile says whether a dropped file is a save state
      * @param {Function} deps.loadSnapshot restores a dropped save state
      */
-    constructor({ processor, model, drives, urlState, config, modals, sources, isSnapshotFile, loadSnapshot }) {
+    constructor({ processor, model, drives, urlState, modals, isSnapshotFile, loadSnapshot }) {
+        super();
         this.processor = processor;
         this.model = model;
         this.drives = drives;
         this.urlState = urlState;
-        this.config = config;
         this.modals = modals;
-        this.sources = sources;
+        this.sources = {};
 
         document.getElementById("disc_load").addEventListener("change", async (evt) => {
             if (evt.target.files.length === 0) return;
@@ -105,8 +103,7 @@ export class MediaLoader {
                     tapeName = unzipped.name;
                 }
                 this.setProcessorTape(await loadTapeFromData(tapeName, tapeData, model));
-                delete this.params.tape;
-                urlState.updateUrl();
+                urlState.set({ tape: undefined });
                 modals.hide("tapes");
             } catch (error) {
                 reportLoadFailure(file.name, error);
@@ -167,6 +164,11 @@ export class MediaLoader {
         return this.urlState.params;
     }
 
+    /** Register the fetcher behind an image schema; each picker calls this as it is constructed. */
+    addSource(schema, fetcher) {
+        this.sources[schema] = fetcher;
+    }
+
     /** Route tape to the correct interface (ACIA for BBC, PPIA for Atom) */
     setProcessorTape(tape) {
         if (this.model.isAtom) {
@@ -177,22 +179,18 @@ export class MediaLoader {
     }
 
     setDisc1Image(name) {
-        delete this.params.disc;
-        this.params.disc1 = name;
-        this.urlState.updateUrl();
-        this.config.dispatchEvent(new CustomEvent("media-changed", { detail: { disc1: name } }));
+        this.urlState.set({ disc: undefined, disc1: name });
+        this.dispatchEvent(new CustomEvent("media-changed", { detail: { disc1: name } }));
     }
 
     setDisc2Image(name) {
-        this.params.disc2 = name;
-        this.urlState.updateUrl();
-        this.config.dispatchEvent(new CustomEvent("media-changed", { detail: { disc2: name } }));
+        this.urlState.set({ disc2: name });
+        this.dispatchEvent(new CustomEvent("media-changed", { detail: { disc2: name } }));
     }
 
     setTapeImage(name) {
-        this.params.tape = name;
-        this.urlState.updateUrl();
-        this.config.dispatchEvent(new CustomEvent("media-changed", { detail: { tape: name } }));
+        this.urlState.set({ tape: name });
+        this.dispatchEvent(new CustomEvent("media-changed", { detail: { tape: name } }));
     }
 
     async loadHTMLFile(file) {
@@ -207,9 +205,7 @@ export class MediaLoader {
         // Local file: retain the image bytes for embedding in save-to-file snapshots.
         loadedDisc.setOriginalImage(imageData);
         this.drives.putDiscIn(0, loadedDisc);
-        delete this.params.disc;
-        delete this.params.disc1;
-        this.urlState.updateUrl();
+        this.urlState.set({ disc: undefined, disc1: undefined });
         this.modals.hide("discs");
     }
 

package/src/web/modals.js

@@ -58,26 +58,29 @@ export class Modals {
         if (message) toast(message);
     }
 
-    areYouSure(message, yesText, noText, yesFunc) {
+    /** @returns {Promise<boolean>} true for the yes button; false for any other way out of the dialog */
+    confirm(message, yesText, noText) {
         const yesButton = this.aysEl.querySelector(".ays-yes");
         this.aysEl.querySelector(".context").textContent = message;
         this.aysEl.querySelector(".ays-no").textContent = noText;
         yesButton.textContent = yesText;
-        let confirmed = false;
-        const onYes = () => {
-            confirmed = true;
-            this.aysModal.hide();
-        };
-        yesButton.addEventListener("click", onYes, { once: true });
-        // The "no" button, Escape and a click outside raise no event of their own: they only hide the modal.
-        this.aysEl.addEventListener(
-            "hidden.bs.modal",
-            () => {
-                yesButton.removeEventListener("click", onYes);
-                if (confirmed) yesFunc();
-            },
-            { once: true },
-        );
-        this.aysModal.show();
+        return new Promise((resolve) => {
+            let confirmed = false;
+            const onYes = () => {
+                confirmed = true;
+                this.aysModal.hide();
+            };
+            yesButton.addEventListener("click", onYes, { once: true });
+            // The "no" button, Escape and a click outside raise no event of their own: they only hide the modal.
+            this.aysEl.addEventListener(
+                "hidden.bs.modal",
+                () => {
+                    yesButton.removeEventListener("click", onYes);
+                    resolve(confirmed);
+                },
+                { once: true },
+            );
+            this.aysModal.show();
+        });
     }
 }

package/src/web/settings.js

@@ -39,13 +39,13 @@ export class Settings {
                 if (changed.displayMode) this.applyDisplayMode(changed.displayMode);
             },
             (changed) => this.onDialogClosed(changed),
-            () => {
-                this.targets.modals.areYouSure(
+            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",
-                    () => window.location.reload(),
                 );
+                if (restart) window.location.reload();
             },
         );
 
@@ -106,8 +106,7 @@ export class Settings {
         this.config.setAudioOutput(output);
         this.targets.quickSettings?.showAudioOutput(output);
         window.localStorage.audioOutput = output;
-        this.urlState.params.audioOutput = output;
-        this.urlState.updateUrl();
+        this.urlState.set({ audioOutput: output });
     }
 
     applySpeakerAmount(amount) {
@@ -123,18 +122,19 @@ export class Settings {
     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.params.displayMode = mode;
-        this.urlState.updateUrl();
+        this.urlState.set({ displayMode: mode });
     }
 
     onDialogClosed(changed) {
         const { urlState } = this;
         const { machine, keys, inputs } = this.targets;
         const parsedQuery = urlState.params;
-        Object.assign(parsedQuery, changed);
+        urlState.set(changed);
         if (changed.keyLayout) {
             window.localStorage.keyLayout = changed.keyLayout;
             machine.emulationConfig.keyLayout = changed.keyLayout;
@@ -155,6 +155,5 @@ export class Settings {
                 machine.processor.tube.cpuMultiplier = changed.tubeCpuMultiplier;
             }
         }
-        urlState.updateUrl();
     }
 }

package/src/web/sth-picker.js

@@ -46,6 +46,8 @@ export class SthPicker {
             onError,
             true,
         );
+        media.addSource("sth", (name) => this.discs.fetch(name));
+        media.addSource("tapeSth", (name) => this.tapes.fetch(name));
 
         document.addEventListener("click", (e) => {
             const target = e.target.closest("a.sth");

package/src/web/url-state.js

@@ -56,7 +56,8 @@ export const UrlParamTypes = {
 
 /**
  * The page's settings as carried in its URL. `params` is the one parsed
- * object: whoever changes a setting edits it in place and calls updateUrl.
+ * object: whoever changes a setting hands the change to set(), which edits
+ * it in place and writes the URL in one step.
  */
 export class UrlState {
     constructor(location, history, paramTypes = UrlParamTypes) {
@@ -78,6 +79,15 @@ 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) {
+        for (const [key, value] of Object.entries(changes)) {
+            if (value === undefined) delete this.params[key];
+            else this.params[key] = value;
+        }
+        this.updateUrl();
+    }
+
     updateUrl() {
         this.history.pushState(null, null, this.url());
     }