jsbeeb 1.22.4 → 1.24.0

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

@@ -1,9 +1,10 @@
-import * as utils from "../utils.js";
 import * as bootstrap from "bootstrap";
 import * as disc from "../fdc.js";
-import { GoogleDriveLoader } from "../google-drive.js";
+import { GoogleDriveLoader } from "./google-drive.js";
 import { toast } from "./toast.js";
 import { errorText } from "./reporting.js";
+import { replaceOrAddExtension } from "../archive.js";
+import { noteEvent } from "./analytics.js";
 
 /**
  * The Google Drive picker: signing in, listing the user's discs, loading one
@@ -32,8 +33,12 @@ export class GoogleDrivePicker {
             else this.authReject?.(new Error("Unable to authorize Google Drive"));
         });
 
-        // Closing the loading dialog while the auth panel waits is a cancellation, not an error.
-        document.getElementById("loading-dialog").addEventListener("hidden.bs.modal", () => this.authResolve?.(false));
+        // Closing the loading dialog puts the auth panel away; while the panel
+        // waits, that close is a cancellation, not an error.
+        document.getElementById("loading-dialog").addEventListener("hidden.bs.modal", () => {
+            this.authEl.style.display = "none";
+            this.authResolve?.(false);
+        });
 
         // Loading the Google client holds the main thread for ~100ms, so it waits for
         // someone to ask for Drive.
@@ -94,7 +99,7 @@ export class GoogleDrivePicker {
                 }
             }
 
-            const ssd = await this.googleDrive.load(this.processor.fdc, cat.id, layout);
+            const ssd = await this.googleDrive.load(cat.id, layout);
             console.log("Google Drive loading finished");
             this.modals.loadingFinished();
             if (!ssd.savesChanges) {
@@ -133,7 +138,7 @@ export class GoogleDrivePicker {
             dbList.appendChild(row);
             row.querySelector(".name").textContent = item.name;
             row.addEventListener("click", async () => {
-                utils.noteEvent("google-drive", "click", item.name);
+                noteEvent("google-drive", "click", item.name);
                 this.media.setDisc1Image(`gd:${item.id}/${item.name}`);
                 this.modal.hide();
                 try {
@@ -165,10 +170,10 @@ export class GoogleDrivePicker {
                 this.modals.loadingFinished(`Unable to create ${name} on Google Drive: ${errorText(e)}`);
                 return;
             }
-            name = utils.replaceOrAddExtension(name, discType.extension);
+            name = replaceOrAddExtension(name, discType.extension);
             console.log(`Saving existing disc: ${name}`);
         } else {
-            // TODO support HFE, I guess?
+            // TODO(#1070) blank HFE images have no fixed byteSize, so only SSD and DSD blanks can be made here.
             const discType = disc.guessDiscTypeFromName(name);
             if (!discType.byteSize) {
                 this.modals.loadingFinished(
@@ -184,7 +189,7 @@ export class GoogleDrivePicker {
         }
 
         try {
-            const result = await this.googleDrive.create(this.processor.fdc, name, data);
+            const result = await this.googleDrive.create(name, data);
             this.media.setDisc1Image("gd:" + result.fileId + "/" + name);
             this.drives.putDiscIn(0, result.disc);
             this.modals.loadingFinished();

package/src/{google-drive.js → web/google-drive.js}

@@ -1,7 +1,6 @@
-"use strict";
-
-import { debounce, uint8ArrayToString } from "./utils.js";
-import { discFor } from "./fdc.js";
+import { discFor } from "../fdc.js";
+import { uint8ArrayToString } from "../binary.js";
+import { debounce } from "../debounce.js";
 
 const MIME_TYPE = "application/vnd.jsbeeb.disc-image";
 const CLIENT_ID = "356883185894-bhim19837nroivv18p0j25gecora60r5.apps.googleusercontent.com";
@@ -138,14 +137,14 @@ export class GoogleDriveLoader {
         });
     }
 
-    async create(fdc, name, data) {
+    async create(name, data) {
         console.log(`Google Drive: creating disc image: '${name}'`);
         const response = await this.saveFile(name, data);
         const meta = response.result;
-        return { fileId: meta.id, disc: this.makeDisc(fdc, data, meta) };
+        return { fileId: meta.id, disc: this.makeDisc(data, meta) };
     }
 
-    makeDisc(fdc, data, meta, layout) {
+    makeDisc(data, meta, layout) {
         let flusher = null;
         const name = meta.name;
         const id = meta.id;
@@ -159,12 +158,12 @@ export class GoogleDriveLoader {
         } else {
             console.log("Making read-only disc");
         }
-        return discFor(fdc, name, data, flusher, layout);
+        return discFor(name, data, flusher, layout);
     }
 
-    async load(fdc, fileId, layout) {
+    async load(fileId, layout) {
         const meta = (await this.driveClient.files.get({ fileId, fields: FILE_FIELDS })).result;
         const data = (await this.driveClient.files.get({ fileId, alt: "media" })).body;
-        return this.makeDisc(fdc, data, meta, layout);
+        return this.makeDisc(data, meta, layout);
     }
 }

package/src/web/hfe-picker.js

@@ -1,8 +1,8 @@
-import * as utils from "../utils.js";
 import * as bootstrap from "bootstrap";
 import { BbcDiscArchive, Provenance, describe as describeHfe, matches, provenancesIn } from "../bbcdiscs.js";
 import { errorText } from "./reporting.js";
 import { clearArchiveList, showArchiveMessage } from "./archive-list.js";
+import { noteEvent } from "./analytics.js";
 
 const HfeProvenanceLabels = {
     [Provenance.Captured]: ["Captured", "Direct from disc"],
@@ -57,15 +57,16 @@ export class HfePicker {
     }
 
     async pick(file) {
-        utils.noteEvent("hfe", "click", file.path);
-        this.media.setDisc1Image("hfe:" + file.path);
+        noteEvent("hfe", "click", file.path);
+        const image = "hfe:" + file.path;
+        this.media.setDisc1Image(image);
         const needsAutoboot = this.urlState.params.autoboot !== undefined;
         if (needsAutoboot) this.processor.reset(true);
 
         const name = describeHfe(file).title;
         this.modals.popupLoading("Loading " + name);
         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();
             if (needsAutoboot) this.autoboot(name);

package/src/web/icons.js

@@ -0,0 +1,42 @@
+import arrowCounterclockwise from "bootstrap-icons/icons/arrow-counterclockwise.svg?raw";
+import cassette from "bootstrap-icons/icons/cassette.svg?raw";
+import clockHistory from "bootstrap-icons/icons/clock-history.svg?raw";
+import display from "bootstrap-icons/icons/display.svg?raw";
+import floppy from "bootstrap-icons/icons/floppy.svg?raw";
+import gear from "bootstrap-icons/icons/gear.svg?raw";
+import headphones from "bootstrap-icons/icons/headphones.svg?raw";
+import pauseFill from "bootstrap-icons/icons/pause-fill.svg?raw";
+import playFill from "bootstrap-icons/icons/play-fill.svg?raw";
+import soundwave from "bootstrap-icons/icons/soundwave.svg?raw";
+import stars from "bootstrap-icons/icons/stars.svg?raw";
+import threeDots from "bootstrap-icons/icons/three-dots.svg?raw";
+import tv from "bootstrap-icons/icons/tv.svg?raw";
+import volumeUp from "bootstrap-icons/icons/volume-up.svg?raw";
+
+/** The Bootstrap Icons the page uses, by their upstream names; nothing else of the set is bundled. */
+const Icons = {
+    "arrow-counterclockwise": arrowCounterclockwise,
+    cassette,
+    "clock-history": clockHistory,
+    display,
+    floppy,
+    gear,
+    headphones,
+    "pause-fill": pauseFill,
+    "play-fill": playFill,
+    soundwave,
+    stars,
+    "three-dots": threeDots,
+    tv,
+    "volume-up": volumeUp,
+};
+
+export const IconNames = Object.freeze(Object.keys(Icons));
+
+/** Puts the named SVG inside every `[data-icon]` element under `root`; an unknown name leaves them all untouched. */
+export function installIcons(root = document) {
+    const placeholders = [...root.querySelectorAll("[data-icon]")];
+    const unknown = placeholders.find((el) => !(el.dataset.icon in Icons));
+    if (unknown) throw new Error(`No icon named ${unknown.dataset.icon}`);
+    for (const el of placeholders) el.innerHTML = Icons[el.dataset.icon];
+}

package/src/web/keyboard-setup.js

@@ -1,20 +1,27 @@
-import * as utils from "../utils.js";
-import { Keyboard } from "../keyboard.js";
+import { Keyboard } from "./keyboard.js";
 import { showNotice } from "./reporting.js";
+import { noteEvent } from "./analytics.js";
+import { keyCodes } from "../keymap.js";
 
-/** The page's keyboard: the emulated one and the browser shortcuts around it. */
+const PasteBoxId = "paste-text";
+const TypingTargets = 'input, textarea, select, [contenteditable]:not([contenteditable="false"])';
+
+/**
+ * Builds the emulated keyboard and wires the browser's shortcuts around it,
+ * exposing it as `keyboard` for whoever needs the machine's keys.
+ */
 export class KeyboardSetup {
     /**
      * @param {object} opts
      * @param {object} opts.actions what each shortcut does, supplied late-bound:
      *   enterDebugger, reload, toggleFast, openRewind, openPrinter,
-     *   pause, resume, onAnyKeyDown
+     *   pause, resume, paste, onAnyKeyDown
      * @param {import("./accessibility-switches.js").AccessibilitySwitches} opts.accessibilitySwitches
      */
     constructor({ actions, accessibilitySwitches, processor, dbgr, keyLayout }) {
         const keyboard = (this.keyboard = new Keyboard({
             processor,
-            inputEnabledFunction: () => document.activeElement && document.activeElement.id === "paste-text",
+            inputEnabledFunction: () => document.activeElement && document.activeElement.id === PasteBoxId,
             keyLayout,
             dbgr,
         }));
@@ -23,28 +30,28 @@ export class KeyboardSetup {
         keyboard.addEventListener("resume", () => actions.resume());
         keyboard.addEventListener("break", (e) => {
             // F12/Break: Reset processor
-            if (e.detail) utils.noteEvent("keyboard", "press", "break");
+            if (e.detail) noteEvent("keyboard", "press", "break");
         });
 
         const onDown = (note, action) => (down) => {
             if (down) {
-                if (note) utils.noteEvent("keyboard", "press", note);
+                if (note) noteEvent("keyboard", "press", note);
                 action();
             }
         };
         const alt = { alt: true, ctrl: false };
         const ctrl = { alt: false, ctrl: true };
-        keyboard.registerKeyHandler(utils.keyCodes.S, onDown("S", actions.enterDebugger), alt);
-        keyboard.registerKeyHandler(utils.keyCodes.R, onDown(null, actions.reload), alt);
-        keyboard.registerKeyHandler(utils.keyCodes.HOME, onDown("home", actions.enterDebugger), ctrl);
-        keyboard.registerKeyHandler(utils.keyCodes.INSERT, onDown("insert", actions.toggleFast), ctrl);
+        keyboard.registerKeyHandler(keyCodes.S, onDown("S", actions.enterDebugger), alt);
+        keyboard.registerKeyHandler(keyCodes.R, onDown(null, actions.reload), alt);
+        keyboard.registerKeyHandler(keyCodes.HOME, onDown("home", actions.enterDebugger), ctrl);
+        keyboard.registerKeyHandler(keyCodes.INSERT, onDown("insert", actions.toggleFast), ctrl);
         keyboard.registerKeyHandler(
-            utils.keyCodes.END,
+            keyCodes.END,
             onDown("end", () => keyboard.pauseEmulation()),
             ctrl,
         );
-        keyboard.registerKeyHandler(utils.keyCodes.PAGEDOWN, onDown("pagedown", actions.openRewind), alt);
-        keyboard.registerKeyHandler(utils.keyCodes.B, onDown(null, actions.openPrinter), ctrl);
+        keyboard.registerKeyHandler(keyCodes.PAGEDOWN, onDown("pagedown", actions.openRewind), alt);
+        keyboard.registerKeyHandler(keyCodes.B, onDown(null, actions.openPrinter), ctrl);
 
         // 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
@@ -52,8 +59,8 @@ export class KeyboardSetup {
         // 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);
+            keyboard.registerKeyHandler(keyCodes.K1 + i, handleSwitch(i), alt);
+            keyboard.registerKeyHandler(keyCodes.F1 + i, handleSwitch(i), alt);
         }
 
         document.addEventListener("keydown", (evt) => {
@@ -62,29 +69,11 @@ export class KeyboardSetup {
         });
         document.addEventListener("keypress", (evt) => keyboard.keyPress(evt));
         document.addEventListener("keyup", (evt) => keyboard.keyUp(evt));
-    }
-
-    sendRawKeyboard(keysToSend, checkCapsAndShiftLocks) {
-        this.keyboard.sendRawKeyboard(keysToSend, checkCapsAndShiftLocks);
-    }
-
-    clearKeys() {
-        this.keyboard.clearKeys();
-    }
-
-    setKeyLayout(keyLayout) {
-        this.keyboard.setKeyLayout(keyLayout);
-    }
-
-    resumeEmulation() {
-        this.keyboard.resumeEmulation();
-    }
-
-    setRunning(running) {
-        this.keyboard.setRunning(running);
-    }
-
-    postFrameShouldPause() {
-        return this.keyboard.postFrameShouldPause();
+        document.addEventListener("paste", (evt) => {
+            const target = document.activeElement;
+            if (target && target.id !== PasteBoxId && target.matches(TypingTargets)) return;
+            const text = evt.clipboardData?.getData("text/plain");
+            if (text) actions.paste(text);
+        });
     }
 }

package/src/{keyboard.js → web/keyboard.js}

@@ -1,6 +1,5 @@
-"use strict";
-import * as utils from "./utils.js";
-import { ATOM } from "./utils_atom.js";
+import { keyCodes } from "../keymap.js";
+import { Typist } from "../typist.js";
 
 const isMac = typeof window !== "undefined" && /^Mac/i.test(window.navigator?.platform || "");
 
@@ -29,13 +28,8 @@ export class Keyboard extends EventTarget {
         this.inputEnabledFunction = inputEnabledFunction;
         this.dbgr = dbgr;
 
-        // Key interface: routes key events to SysVia (BBC) or PPIA (Atom).
-        // Both provide keyDown, keyUp, keyToggleRaw, setKeyLayout,
-        // clearKeys, disableKeyboard, enableKeyboard.
-        this.keyInterface = processor.model.isAtom ? processor.atomppia : processor.sysvia;
-        // The SHIFT key constant used by stringToMachineKeys in the paste key array.
-        // Compared by reference in _deliverPasteKey to avoid toggling shift off.
-        this._shiftKey = processor.model.isAtom ? ATOM.SHIFT : utils.BBC.SHIFT;
+        this.keyInterface = processor.keyboardInterface;
+        this.typist = new Typist(processor);
 
         // State
         this.emuKeyHandlers = {};
@@ -49,13 +43,6 @@ export class Keyboard extends EventTarget {
         this.lastShiftLocation = 1;
         this.lastCtrlLocation = 1;
         this.lastAltLocation = 1;
-
-        // Paste state — uses a scheduler task instead of a debugInstruction
-        // hook so the CPU can remain on the fast execution path during paste.
-        this._pasteKeys = [];
-        this._pasteLastChar = undefined;
-        this._pasteClocksPerMs = 0;
-        this._pasteTask = this.processor.scheduler.newTask(() => this._deliverPasteKey());
     }
 
     /**
@@ -65,7 +52,6 @@ export class Keyboard extends EventTarget {
      */
     keyCode(evt) {
         const ret = evt.which || evt.charCode || evt.keyCode;
-        const keyCodes = utils.keyCodes;
 
         switch (evt.location) {
             default:
@@ -108,9 +94,9 @@ export class Keyboard extends EventTarget {
             case 3: // numpad
                 switch (ret) {
                     case keyCodes.ENTER:
-                        return utils.keyCodes.NUMPADENTER;
+                        return keyCodes.NUMPADENTER;
                     case keyCodes.DELETE:
-                        return utils.keyCodes.NUMPAD_DECIMAL_POINT;
+                        return keyCodes.NUMPAD_DECIMAL_POINT;
                 }
                 break;
         }
@@ -143,7 +129,7 @@ export class Keyboard extends EventTarget {
      */
     setKeyLayout(layout) {
         this.keyLayout = layout;
-        this.keyInterface.setKeyLayout(layout);
+        this.processor.setKeyLayout(layout);
     }
 
     /**
@@ -226,7 +212,7 @@ export class Keyboard extends EventTarget {
         const code = this.keyCode(evt);
         evt.preventDefault();
 
-        if (this.isPasting && code === utils.keyCodes.ESCAPE) {
+        if (this.isPasting && code === keyCodes.ESCAPE) {
             this.cancelPaste();
             return;
         }
@@ -255,11 +241,11 @@ export class Keyboard extends EventTarget {
      * @private
      */
     _handleSpecialKeys(code) {
-        if (code === utils.keyCodes.F12 || code === utils.keyCodes.BREAK) {
+        if (code === keyCodes.F12 || code === keyCodes.BREAK) {
             this.dispatchEvent(new CustomEvent("break", { detail: true }));
             this.processor.setReset(true);
             return true;
-        } else if (isMac && code === utils.keyCodes.CAPSLOCK) {
+        } else if (isMac && code === keyCodes.CAPSLOCK) {
             // Special CapsLock handling for Mac
             this.handleMacCapsLock();
             return true;
@@ -286,11 +272,11 @@ export class Keyboard extends EventTarget {
         evt.preventDefault();
 
         // Handle special key cases
-        if (code === utils.keyCodes.F12 || code === utils.keyCodes.BREAK) {
+        if (code === keyCodes.F12 || code === keyCodes.BREAK) {
             this.dispatchEvent(new CustomEvent("break", { detail: false }));
             this.processor.setReset(false);
             return;
-        } else if (isMac && code === utils.keyCodes.CAPSLOCK) {
+        } else if (isMac && code === keyCodes.CAPSLOCK) {
             // Special CapsLock handling for Mac
             this.handleMacCapsLock();
             return;
@@ -311,10 +297,10 @@ export class Keyboard extends EventTarget {
 
         // Mac browsers seem to model caps lock as a physical key that's down when capslock is on, and up when it's off.
         // No event is generated when it is physically released on the keyboard. So, we simulate a "tap" here.
-        this.keyInterface.keyDown(utils.keyCodes.CAPSLOCK);
+        this.keyInterface.keyDown(keyCodes.CAPSLOCK);
 
         // Simulate a key release after a short delay
-        setTimeout(() => this.keyInterface.keyUp(utils.keyCodes.CAPSLOCK), CAPS_LOCK_DELAY);
+        setTimeout(() => this.keyInterface.keyUp(keyCodes.CAPSLOCK), CAPS_LOCK_DELAY);
 
         if (this.saidCapsLockIsTapped) return;
         this.saidCapsLockIsTapped = true;
@@ -331,104 +317,17 @@ export class Keyboard extends EventTarget {
         );
     }
 
-    /**
-     * Send raw keyboard input to the emulated machine (for paste/autotype).
-     * @param {Array} keysToSend - Array of machine-specific key codes to send
-     * @param {boolean} checkCapsAndShiftLocks - Whether to check caps and shift locks
-     */
+    /** Sends raw keys, and millisecond delays, to the machine: paste and autoboot come through here. */
     sendRawKeyboard(keysToSend, checkCapsAndShiftLocks) {
-        if (this.isPasting) this.cancelPaste();
-
-        this.keyInterface.disableKeyboard();
-        // The paste task lives on the processor's scheduler, which is polled with peripheral
-        // cycles, so paste delays stay in real time whatever the CPU multiplier is.
-        this._pasteClocksPerMs = this.processor.peripheralCyclesPerSecond / 1000;
-
-        if (checkCapsAndShiftLocks) {
-            let toggleKey = null;
-            if (!this.keyInterface.capsLockLight) toggleKey = utils.BBC.CAPSLOCK;
-            else if (this.keyInterface.shiftLockLight) toggleKey = utils.BBC.SHIFTLOCK;
-            if (toggleKey) {
-                keysToSend.unshift(toggleKey);
-                keysToSend.push(toggleKey);
-            }
-        }
-
-        this._pasteKeys = keysToSend;
-        this._pasteLastChar = undefined;
-        this._pasteTask.schedule(0);
+        this.typist.type(keysToSend, checkCapsAndShiftLocks);
     }
 
-    /**
-     * Scheduler callback that delivers one key per invocation, rescheduling
-     * itself for the next key. Replaces the old debugInstruction hook so the
-     * CPU stays on the fast execution path during paste.
-     * @private
-     */
-    _deliverPasteKey() {
-        if (this._pasteLastChar && this._pasteLastChar !== this._shiftKey) {
-            this.keyInterface.keyToggleRaw(this._pasteLastChar);
-        }
-
-        if (this._pasteKeys.length === 0) {
-            this._pasteLastChar = undefined;
-            this.keyInterface.enableKeyboard();
-            return;
-        }
-
-        // Atom's PPIA keyboard is polled, not interrupt-driven like the BBC's
-        // SysVIA. Insert a debounce gap after every key release so the ROM
-        // sees the key-up before the next key-down arrives.
-        if (this._pasteLastChar && this._pasteLastChar !== this._shiftKey && this.processor.model.isAtom) {
-            this._pasteLastChar = undefined;
-            this._pasteTask.schedule(30 * this._pasteClocksPerMs);
-            return;
-        }
-
-        const ch = this._pasteKeys[0];
-        const debounce = this._pasteLastChar === ch;
-        this._pasteLastChar = ch;
-        if (debounce) {
-            this._pasteLastChar = undefined;
-            this._pasteTask.schedule(30 * this._pasteClocksPerMs);
-            return;
-        }
-
-        // Atom ROM polls the keyboard once per VSync (~16ms at 60 Hz).
-        // 80ms gives the ROM ~5 scan cycles to detect, debounce, and
-        // process each keypress.
-        let delayMs = this.processor.model.isAtom ? 80 : 50;
-        if (typeof this._pasteLastChar === "number") {
-            delayMs = this._pasteLastChar;
-            this._pasteLastChar = undefined;
-        } else {
-            this.keyInterface.keyToggleRaw(this._pasteLastChar);
-        }
-
-        this._pasteKeys.shift();
-        this._pasteTask.schedule(delayMs * this._pasteClocksPerMs);
-    }
-
-    /**
-     * Cancel any in-progress paste operation.
-     */
     cancelPaste() {
-        if (!this.isPasting) return;
-        this._pasteTask.cancel();
-        if (this._pasteLastChar && this._pasteLastChar !== this._shiftKey) {
-            this.keyInterface.keyToggleRaw(this._pasteLastChar);
-        }
-        this._pasteLastChar = undefined;
-        this._pasteKeys = [];
-        this.keyInterface.enableKeyboard();
+        this.typist.cancel();
     }
 
-    /**
-     * Whether a paste operation is currently in progress.
-     * @returns {boolean}
-     */
     get isPasting() {
-        return this._pasteKeys.length > 0 || this._pasteTask.scheduled();
+        return this.typist.isTyping;
     }
 
     /**

package/src/web/layout.js

@@ -78,6 +78,10 @@ export class Layout {
         this.cubMonitorPic = document.getElementById("cub-monitor-pic");
         this.borderReservedSize = embed ? 0 : 100;
         this.bottomReservedSize = embed ? 0 : 68;
+        if (embed) {
+            for (const el of document.querySelectorAll(".embed-hide")) el.style.display = "none";
+            document.body.style.backgroundColor = "transparent";
+        }
 
         window.addEventListener("resize", () => this.resize());
         window.setTimeout(() => this.resize(), 1);

package/src/web/local-disc.js

@@ -0,0 +1,44 @@
+import { DiscLayout } from "../disc.js";
+import { discFor, guessDiscTypeFromName } from "../fdc.js";
+import { stringToUint8Array, uint8ArrayToString } from "../binary.js";
+
+/**
+ * Create or open a disc held in the browser's local storage.
+ * @param {string} name - The file name with extension
+ * @param {string} [layout] - one of DiscLayout; by default the image is asked what it is
+ * @param {function(*): void} [onSaveError] - called with whatever was thrown, the first time a write
+ *   cannot be stored
+ * @returns {Disc} The loaded disc object
+ */
+export function localDisc(name, layout = DiscLayout.auto, onSaveError = () => {}) {
+    const discName = "disc_" + name;
+    let data;
+    const dataString = window.localStorage[discName];
+    if (!dataString) {
+        console.log("Creating browser-local disc " + name);
+        const discType = guessDiscTypeFromName(name);
+        if (!discType.byteSize) {
+            throw new Error(`Cannot create blank disc of type ${discType.extension} - unknown size`);
+        }
+        data = new Uint8Array(discType.byteSize);
+        if (discType.supportsCatalogue) {
+            discType.setDiscName(data, name);
+        }
+    } else {
+        console.log("Loading browser-local disc " + name);
+        data = stringToUint8Array(dataString);
+    }
+    let reportedSaveError = false;
+    const onChange = (data) => {
+        try {
+            const str = uint8ArrayToString(data);
+            window.localStorage.setItem(discName, str);
+        } catch (e) {
+            console.log(`Unable to save browser-local disc ${name}: ${e}`);
+            if (reportedSaveError) return;
+            reportedSaveError = true;
+            onSaveError(e);
+        }
+    };
+    return discFor(name, data, onChange, layout);
+}