jsbeeb 1.22.0 → 1.22.1

package/src/web/media-loader.js

@@ -0,0 +1,358 @@
+import * as utils from "../utils.js";
+import * as disc from "../fdc.js";
+import { DiscLayout } from "../disc.js";
+import { loadTapeFromData } from "../tapes.js";
+import { toast } from "./toast.js";
+import { errorText, reportIgnoredFiles, reportLoadFailure, unzipAndReport } from "./reporting.js";
+
+/** The images offered on the Discs dialog's built-in list. */
+export const BuiltInImages = [
+    {
+        name: "Elite",
+        desc: "An 8-bit classic. Hit F10 to launch from the space station, then use <, >, S, X and A to fly around.",
+        file: "elite.ssd",
+    },
+    {
+        name: "Welcome",
+        desc: "The disc supplied with BBC Disc systems to demonstrate some of the features of the system.",
+        file: "Welcome.ssd",
+    },
+    {
+        name: "Music 5000",
+        desc: "The Music 5000 system disk and demo songs.",
+        file: "5000mstr36008.ssd",
+    },
+];
+
+export function splitImage(image) {
+    const match = image.match(/(([^:]+):\/?\/?|[!^|])?(.*)/);
+    const schema = match[2] || match[1] || "";
+    image = match[3];
+    return { image: image, schema: schema };
+}
+
+function readFileAsBinaryString(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            resolve(e.target.result);
+        };
+        reader.onerror = (e) => {
+            console.error(`Error reading file ${file.name}:`, e);
+            reject(new Error(`Failed to read file ${file.name}`));
+        };
+        reader.readAsBinaryString(file);
+    });
+}
+
+/**
+ * Getting discs and tapes into the machine: resolving any image reference the
+ * 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 {
+    /**
+     * @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 }) {
+        this.processor = processor;
+        this.model = model;
+        this.drives = drives;
+        this.urlState = urlState;
+        this.config = config;
+        this.modals = modals;
+        this.sources = sources;
+
+        document.getElementById("disc_load").addEventListener("change", async (evt) => {
+            if (evt.target.files.length === 0) return;
+            utils.noteEvent("local", "click"); // NB no filename here
+            const file = evt.target.files[0];
+            try {
+                await this.loadHTMLFile(file);
+            } catch (error) {
+                reportLoadFailure(file.name, error);
+            }
+            evt.target.value = ""; // clear so if the user picks the same file again after a reset we get a "change"
+        });
+
+        document.getElementById("fs_load").addEventListener("change", async (evt) => {
+            if (evt.target.files.length === 0) return;
+            utils.noteEvent("local", "click"); // NB no filename here
+            const file = evt.target.files[0];
+            try {
+                await this.loadSCSIFile(file);
+            } catch (error) {
+                reportLoadFailure(file.name, error);
+            }
+            evt.target.value = ""; // clear so if the user picks the same file again after a reset we get a "change"
+        });
+
+        document.getElementById("tape_load").addEventListener("change", async (evt) => {
+            if (evt.target.files.length === 0) return;
+            const file = evt.target.files[0];
+            utils.noteEvent("local", "clickTape"); // NB no filename here
+
+            try {
+                let tapeData = await readFileAsBinaryString(file);
+                let tapeName = file.name;
+                if (/\.zip/i.test(tapeName)) {
+                    const unzipped = await unzipAndReport(utils.stringToUint8Array(tapeData));
+                    tapeData = unzipped.data;
+                    tapeName = unzipped.name;
+                }
+                this.setProcessorTape(await loadTapeFromData(tapeName, tapeData, model));
+                delete this.params.tape;
+                urlState.updateUrl();
+                modals.hide("tapes");
+            } catch (error) {
+                reportLoadFailure(file.name, error);
+            }
+
+            evt.target.value = ""; // clear so if the user picks the same file again after a reset we get a "change"
+        });
+
+        const pastetext = document.getElementById("paste-text");
+        pastetext.addEventListener("dragover", (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            event.dataTransfer.dropEffect = "copy";
+        });
+        pastetext.addEventListener("drop", async (event) => {
+            utils.noteEvent("local", "drop");
+            const file = event.dataTransfer.files[0];
+            if (!file) return;
+            try {
+                const arrayBuffer = await file.arrayBuffer();
+                if (isSnapshotFile(file.name, arrayBuffer)) {
+                    await loadSnapshot(file, arrayBuffer);
+                } else if (file.name.toLowerCase().endsWith(".uef")) {
+                    // Regular UEF tape image (not a BeebEm save state)
+                    this.setProcessorTape(await loadTapeFromData(file.name, new Uint8Array(arrayBuffer), model));
+                    toast(`Loaded ${file.name} as the tape.`, { title: "Dropped" });
+                } else {
+                    await this.loadHTMLFile(file);
+                    toast(`Loaded ${file.name} into drive 0.`, { title: "Dropped" });
+                }
+            } catch (error) {
+                reportLoadFailure(file.name, error);
+            }
+        });
+
+        const discList = document.getElementById("disc-list");
+        const discTemplate = discList.querySelector(".template");
+        for (const image of BuiltInImages) {
+            const elem = discTemplate.cloneNode(true);
+            elem.classList.remove("template");
+            discList.appendChild(elem);
+            elem.querySelector(".name").textContent = image.name;
+            elem.querySelector(".description").textContent = image.desc;
+            elem.addEventListener("click", async () => {
+                utils.noteEvent("images", "click", image.file);
+                this.setDisc1Image(image.file);
+                modals.hide("discs");
+                try {
+                    drives.putDiscIn(0, await this.loadDiscImage(this.params.disc1, drives.layoutForDrive(0)));
+                } catch (error) {
+                    reportLoadFailure(`${image.name} (${image.file})`, error);
+                }
+            });
+        }
+    }
+
+    get params() {
+        return this.urlState.params;
+    }
+
+    /** Route tape to the correct interface (ACIA for BBC, PPIA for Atom) */
+    setProcessorTape(tape) {
+        if (this.model.isAtom) {
+            this.processor.atomppia.setTape(tape);
+        } else {
+            this.processor.acia.setTape(tape);
+        }
+    }
+
+    setDisc1Image(name) {
+        delete this.params.disc;
+        this.params.disc1 = name;
+        this.urlState.updateUrl();
+        this.config.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 } }));
+    }
+
+    setTapeImage(name) {
+        this.params.tape = name;
+        this.urlState.updateUrl();
+        this.config.dispatchEvent(new CustomEvent("media-changed", { detail: { tape: name } }));
+    }
+
+    async loadHTMLFile(file) {
+        const imageData = utils.stringToUint8Array(await readFileAsBinaryString(file));
+        const loadedDisc = disc.discFor(
+            this.processor.fdc,
+            file.name,
+            imageData,
+            undefined,
+            this.drives.layoutForDrive(0),
+        );
+        // 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.modals.hide("discs");
+    }
+
+    async loadSCSIFile(file) {
+        const binaryData = await readFileAsBinaryString(file);
+        const { processor } = this;
+        processor.filestore.scsi = utils.stringToUint8Array(binaryData);
+
+        processor.filestore.PC = 0x400;
+        processor.filestore.SP = 0xff;
+        processor.filestore.A = 1;
+        processor.filestore.emulationSpeed = 0;
+
+        // Reset any open receive blocks
+        processor.econet.receiveBlocks = [];
+        processor.econet.nextReceiveBlockNumber = 1;
+
+        this.modals.hide("econetfs");
+    }
+
+    async loadDiscImage(discImage, layout = DiscLayout.auto) {
+        if (!discImage) return null;
+        const split = splitImage(discImage);
+        discImage = split.image;
+        const schema = split.schema;
+        if (schema[0] === "!" || schema === "local") {
+            return disc.localDisc(this.processor.fdc, discImage, layout, (error) =>
+                toast(
+                    `Browser storage would not take changes to ${discImage} (${errorText(error)}). Use Discs, Download to keep a copy.`,
+                    { title: "Disc", quietKey: "quietLocalDiscSaveFailed" },
+                ),
+            );
+        }
+        // TODO: come up with a decent UX for passing an 'onChange' parameter to each of these.
+        // Consider:
+        // * hashing contents and making a local disc image named by original disc hash, save by that, and offer
+        //   to load the modified disc on load.
+        // * popping up a message that notes the disc has changed, and offers a way to make a local image
+        // * Dialog box (ugh) saying "is this ok?"
+        switch (schema) {
+            case "|":
+            case "sth": {
+                const { name, data, ignored } = await this.sources.sth(discImage);
+                reportIgnoredFiles(name, ignored);
+                return disc.discFor(this.processor.fdc, name, data, undefined, layout);
+            }
+
+            case "hfe":
+                return disc.discFor(
+                    this.processor.fdc,
+                    discImage,
+                    await this.sources.hfe(discImage),
+                    undefined,
+                    layout,
+                );
+
+            case "gd": {
+                const splat = discImage.match(/([^/]+)\/?(.*)/);
+                let name = "(unknown)";
+                if (splat) {
+                    discImage = splat[1];
+                    name = splat[2];
+                }
+                return this.sources.drive({ name, id: discImage }, layout);
+            }
+            case "b64data":
+                return disc.discFor(this.processor.fdc, "disk.ssd", atob(discImage), undefined, layout);
+
+            case "data": {
+                const arr = Array.prototype.map.call(atob(discImage), (x) => x.charCodeAt(0));
+                const { name, data } = await unzipAndReport(arr);
+                return disc.discFor(this.processor.fdc, name, data, undefined, layout);
+            }
+            case "http":
+            case "https":
+            case "file": {
+                const asUrl = `${schema}://${discImage}`;
+                // url may end in query params etc, which can upset the DSD/SSD etc detection on the extension.
+                discImage = new URL(asUrl).pathname;
+                let discData = await utils.loadData(asUrl);
+                if (/\.zip/i.test(discImage)) {
+                    const unzipped = await unzipAndReport(discData);
+                    discData = unzipped.data;
+                    discImage = unzipped.name;
+                }
+                return disc.discFor(this.processor.fdc, discImage, discData, undefined, layout);
+            }
+            default:
+                return disc.discFor(
+                    this.processor.fdc,
+                    discImage,
+                    await disc.load("discs/" + discImage),
+                    undefined,
+                    layout,
+                );
+        }
+    }
+
+    async loadTapeImage(tapeImage) {
+        const split = splitImage(tapeImage);
+        tapeImage = split.image;
+        const schema = split.schema;
+
+        switch (schema) {
+            case "|":
+            case "sth": {
+                const { name, data, ignored } = await this.sources.tapeSth(tapeImage);
+                reportIgnoredFiles(name, ignored);
+                return await loadTapeFromData(name, data, this.model);
+            }
+
+            case "data": {
+                const arr = Array.prototype.map.call(atob(tapeImage), (x) => x.charCodeAt(0));
+                const { name, data } = await unzipAndReport(arr);
+                return await loadTapeFromData(name, data, this.model);
+            }
+
+            case "http":
+            case "https":
+            case "file": {
+                const asUrl = `${schema}://${tapeImage}`;
+                // url may end in query params etc, which can upset file handling
+                tapeImage = new URL(asUrl).pathname;
+                let tapeData = await utils.loadData(asUrl);
+                if (/\.zip/i.test(tapeImage)) {
+                    const unzipped = await unzipAndReport(tapeData);
+                    tapeData = unzipped.data;
+                    tapeImage = unzipped.name;
+                }
+                return await loadTapeFromData(tapeImage, tapeData, this.model);
+            }
+
+            default: {
+                const tapePath = "tapes/" + tapeImage;
+                let tapeData = await utils.loadData(tapePath);
+                let tapeName = tapeImage;
+                if (/\.zip/i.test(tapeName)) {
+                    const unzipped = await unzipAndReport(tapeData);
+                    tapeData = unzipped.data;
+                    tapeName = unzipped.name;
+                }
+                return await loadTapeFromData(tapeName, tapeData, this.model);
+            }
+        }
+    }
+}

package/src/web/modals.js

@@ -0,0 +1,83 @@
+import * as bootstrap from "bootstrap";
+import { toast } from "./toast.js";
+
+/**
+ * The dialogs the page raises itself, and the rule that a dialog pauses the
+ * emulator: the first one up stops it, and the last one down starts it again
+ * if it was running before.
+ */
+export class Modals {
+    constructor({ isRunning, stop, go }) {
+        this.errorDialog = document.getElementById("error-dialog");
+        this.errorModal = new bootstrap.Modal(this.errorDialog);
+        this.loadingDialog = document.getElementById("loading-dialog");
+        this.loadingModal = new bootstrap.Modal(this.loadingDialog);
+        this.googleDriveAuth = document.getElementById("google-drive-auth");
+        this.aysEl = document.getElementById("are-you-sure");
+        this.aysModal = new bootstrap.Modal(this.aysEl);
+
+        let savedRunning = false;
+        document.addEventListener("show.bs.modal", () => {
+            if (!this.anyVisible()) savedRunning = isRunning();
+            if (isRunning()) stop(false);
+        });
+        document.addEventListener("hidden.bs.modal", () => {
+            if (!this.anyVisible() && savedRunning) go();
+        });
+    }
+
+    anyVisible() {
+        return document.querySelectorAll(".modal.show").length !== 0;
+    }
+
+    show(id) {
+        const el = document.getElementById(id);
+        if (el) bootstrap.Modal.getOrCreateInstance(el).show();
+    }
+
+    hide(id) {
+        const el = document.getElementById(id);
+        if (el) bootstrap.Modal.getInstance(el)?.hide();
+    }
+
+    showError(context, error) {
+        this.errorDialog.querySelector(".context").textContent = context;
+        this.errorDialog.querySelector(".error").textContent = error;
+        this.errorModal.show();
+    }
+
+    popupLoading(msg) {
+        this.loadingDialog.querySelector(".loading").textContent = msg;
+        this.googleDriveAuth.style.display = "none";
+        this.loadingModal.show();
+    }
+
+    loadingFinished(message) {
+        this.googleDriveAuth.style.display = "none";
+        this.loadingModal.hide();
+        if (message) toast(message);
+    }
+
+    areYouSure(message, yesText, noText, yesFunc) {
+        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();
+    }
+}

package/src/web/reporting.js

@@ -0,0 +1,28 @@
+import * as utils from "../utils.js";
+import { toast } from "./toast.js";
+
+export const errorText = (error) => error?.message ?? `${error}`;
+
+export function reportLoadFailure(description, error) {
+    console.error(`Error loading ${description}:`, error);
+    toast(`Could not load ${description}: ${errorText(error)}`, { title: "Loading" });
+}
+
+export function reportIgnoredFiles(name, ignored) {
+    if (!ignored.length) return;
+    toast(`Loaded ${name}. The archive also holds ${ignored.join(", ")}, and only one file is loaded from it.`, {
+        title: "Archive",
+    });
+}
+
+export async function unzipAndReport(data) {
+    const unzipped = await utils.unzipDiscImage(data);
+    reportIgnoredFiles(unzipped.name, unzipped.ignored);
+    return unzipped;
+}
+
+/** Handles a component's "notice" event by toasting it. */
+export function showNotice(event) {
+    const { message, title, quietKey } = event.detail;
+    toast(message, { title, quietKey });
+}

package/src/{rewind-ui.js → web/rewind-ui.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-import { renderThumbnails, executeUntilFrame } from "./rewind-thumbnail.js";
+import { renderThumbnails, executeUntilFrame } from "../rewind-thumbnail.js";
 
 /**
  * Rewind scrubber UI — a filmstrip overlay showing thumbnails of recent

package/src/web/settings.js

@@ -0,0 +1,160 @@
+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 { toast } from "./toast.js";
+
+// A slider fires for every pixel of a drag, and each URL update is a history entry.
+const UrlSettleMs = 300;
+
+/**
+ * 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.
+ */
+export class Settings {
+    constructor({ urlState, makeConfig = (...handlers) => new Config(...handlers) }) {
+        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),
+            () => {
+                this.targets.modals.areYouSure(
+                    "Your change is saved, but only takes effect when the emulator restarts. Restart now?",
+                    "Restart now",
+                    "Later",
+                    () => window.location.reload(),
+                );
+            },
+        );
+
+        // 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)
+            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.audioOutput =
+            [parsedQuery.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",
+            });
+    }
+
+    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.params.audioOutput = output;
+        this.urlState.updateUrl();
+    }
+
+    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();
+    }
+
+    applyDisplayMode(mode) {
+        this.displayMode = mode;
+        this.targets.display.setMode(mode);
+        this.config.setDisplayMode(mode);
+        this.targets.quickSettings?.showDisplayMode(mode);
+        window.localStorage.displayMode = mode;
+        this.urlState.params.displayMode = mode;
+        this.urlState.updateUrl();
+    }
+
+    onDialogClosed(changed) {
+        const { urlState } = this;
+        const { machine, keys, inputs } = this.targets;
+        const parsedQuery = urlState.params;
+        Object.assign(parsedQuery, changed);
+        if (changed.keyLayout) {
+            window.localStorage.keyLayout = changed.keyLayout;
+            machine.emulationConfig.keyLayout = changed.keyLayout;
+            keys.setKeyLayout(changed.keyLayout);
+        }
+        if (changed.mouseJoystickEnabled !== undefined || changed.microphoneChannel !== undefined) {
+            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;
+            }
+        }
+        urlState.updateUrl();
+    }
+}