jsbeeb 1.22.0 → 1.22.1

package/src/web/snapshot-ui.js

@@ -0,0 +1,219 @@
+import * as disc from "../fdc.js";
+import { DiscLayout } from "../disc.js";
+import { downloadBlob } from "../dom-utils.js";
+import { toast } from "./toast.js";
+import {
+    createSnapshot,
+    restoreSnapshot,
+    snapshotToJSON,
+    snapshotFromJSON,
+    isSameModel,
+    hasCoProcessor,
+} from "../snapshot.js";
+import { isBemSnapshot, parseBemSnapshot } from "../bem-snapshot.js";
+import { isUefSnapshot, parseUefSnapshot } from "../uef-snapshot.js";
+
+const PendingStateKey = "jsbeeb-pending-state";
+
+/** Enough for the restored OS to settle before the user sees the screen. */
+const PostRestoreCycles = 40000;
+
+async function compressBlob(blob) {
+    const stream = blob.stream().pipeThrough(new CompressionStream("gzip"));
+    return new Response(stream).blob();
+}
+
+async function decompressBlob(blob) {
+    const stream = blob.stream().pipeThrough(new DecompressionStream("gzip"));
+    return new Response(stream).blob();
+}
+
+export function isSnapshotFile(filename, arrayBuffer) {
+    const lower = filename.toLowerCase();
+    if (lower.endsWith(".snp") || lower.endsWith(".json") || lower.endsWith(".json.gz") || lower.endsWith(".gz"))
+        return true;
+    // .uef can be either a BeebEm save state or a regular tape image - check content
+    if (lower.endsWith(".uef") && arrayBuffer) return isUefSnapshot(arrayBuffer);
+    return false;
+}
+
+/** The saved snapshot in whichever of the formats we read the buffer holds. */
+export async function readSnapshot(arrayBuffer) {
+    if (isBemSnapshot(arrayBuffer)) return await parseBemSnapshot(arrayBuffer);
+    if (isUefSnapshot(arrayBuffer)) return parseUefSnapshot(arrayBuffer);
+    // Detect gzip (magic bytes 0x1f 0x8b) or plain JSON
+    const bytes = new Uint8Array(arrayBuffer);
+    let text;
+    if (bytes[0] === 0x1f && bytes[1] === 0x8b) {
+        const decompressed = await decompressBlob(new Blob([arrayBuffer]));
+        text = await decompressed.text();
+    } else {
+        text = new TextDecoder().decode(arrayBuffer);
+    }
+    return snapshotFromJSON(text);
+}
+
+/**
+ * What a snapshot needs to put the same discs back: their URL references
+ * where they have one, the image bytes where they do not, and CRCs for
+ * saying when a source has changed underneath a state.
+ */
+export function snapshotMedia(fdcDrives, params) {
+    const manifest = {};
+    if (params.disc1 || params.disc) manifest.disc1 = params.disc1 || params.disc;
+    if (params.disc2) manifest.disc2 = params.disc2;
+
+    // For each drive with a disc loaded, include CRC32 for verification
+    // and embed original image data if no URL source exists (local file).
+    for (let driveIndex = 0; driveIndex < 2; driveIndex++) {
+        const driveDisc = fdcDrives[driveIndex].disc;
+        if (!driveDisc || driveDisc.originalImageCrc32 == null) continue;
+        const discKey = driveIndex === 0 ? "disc1" : "disc2";
+        const crcKey = discKey + "Crc32";
+        manifest[crcKey] = driveDisc.originalImageCrc32;
+        // The snapshot's dirty tracks are indexed by physical track, so restoring has to lay
+        // the disc out the way this one was rather than work it out again.
+        manifest[discKey + "Layout"] = driveDisc.is40Track ? DiscLayout.expanded40 : DiscLayout.contiguous;
+        if (!manifest[discKey] && driveDisc.originalImageData) {
+            manifest[discKey + "ImageData"] = driveDisc.originalImageData;
+            manifest[discKey + "Name"] = driveDisc.name;
+        }
+    }
+    return Object.keys(manifest).length > 0 ? manifest : undefined;
+}
+
+/** Saving and restoring states: the menu item, the file input and the reload across a model change. */
+export class SnapshotUI {
+    constructor({ processor, model, video, media, drives, urlState, modals, isRunning, stop, go }) {
+        this.processor = processor;
+        this.model = model;
+        this.video = video;
+        this.media = media;
+        this.drives = drives;
+        this.urlState = urlState;
+        this.modals = modals;
+        this.isRunning = isRunning;
+        this.stop = stop;
+        this.go = go;
+
+        document.getElementById("save-state").addEventListener("click", async (event) => {
+            event.preventDefault();
+            await this.saveState();
+        });
+
+        document.getElementById("load-state").addEventListener("change", async (event) => {
+            const file = event.target.files[0];
+            if (!file) return;
+            event.target.value = "";
+            await this.loadStateFromFile(file);
+        });
+    }
+
+    async saveState() {
+        const wasRunning = this.isRunning();
+        if (wasRunning) this.stop(false);
+        try {
+            const manifest = snapshotMedia(this.processor.fdc.drives, this.urlState.params);
+            const snapshot = createSnapshot(this.processor, this.model, manifest);
+            const json = snapshotToJSON(snapshot);
+            const blob = await compressBlob(new Blob([json]));
+            const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+            downloadBlob(blob, `jsbeeb-${this.model.name}-${timestamp}.json.gz`);
+        } catch (e) {
+            this.modals.showError("saving state", e);
+        }
+        if (wasRunning) this.go();
+    }
+
+    async loadStateFromFile(file, preReadBuffer) {
+        const wasRunning = this.isRunning();
+        if (wasRunning) this.stop(false);
+        try {
+            const arrayBuffer = preReadBuffer || (await file.arrayBuffer());
+            const snapshot = await readSnapshot(arrayBuffer);
+            if (!isSameModel(snapshot.model, this.model.name) || hasCoProcessor(snapshot) !== this.processor.hasTube) {
+                // Model or co-processor mismatch: stash state and reload with a matching machine
+                sessionStorage.setItem(PendingStateKey, snapshotToJSON(snapshot));
+                window.location.href = this.urlState.urlWith({
+                    model: snapshot.model,
+                    coProcessor: hasCoProcessor(snapshot),
+                });
+                return;
+            }
+            await this.restore(snapshot);
+            // Force a repaint so the display updates even while paused
+            this.video.paint();
+        } catch (e) {
+            this.modals.showError("loading state", e);
+        }
+        if (wasRunning) this.go();
+    }
+
+    /** Picks up the state a cross-model reload stashed, once the matching machine is up. */
+    async restorePendingState() {
+        const pendingState = sessionStorage.getItem(PendingStateKey);
+        if (!pendingState) return;
+        sessionStorage.removeItem(PendingStateKey);
+        try {
+            await this.restore(snapshotFromJSON(pendingState));
+            this.processor.execute(PostRestoreCycles);
+        } catch (e) {
+            this.modals.showError("restoring saved state", e);
+        }
+    }
+
+    async restore(snapshot) {
+        // Order matters: reload disc media first so the base disc is in the
+        // drive before restoreSnapshot applies dirty track overlays on top.
+        await this.reloadSnapshotMedia(snapshot.media);
+        restoreSnapshot(this.processor, this.model, snapshot);
+    }
+
+    async reloadSnapshotMedia(savedMedia) {
+        if (!savedMedia) return;
+        for (let driveIndex = 0; driveIndex < 2; driveIndex++) {
+            const discKey = driveIndex === 0 ? "disc1" : "disc2";
+            const imageDataKey = discKey + "ImageData";
+            const crcKey = discKey + "Crc32";
+
+            // A snapshot from before layout detection has no field, and was contiguous.
+            const layout = savedMedia[discKey + "Layout"] ?? DiscLayout.contiguous;
+
+            let loadedDisc = null;
+            if (savedMedia[discKey]) {
+                // URL-based disc — reload from source
+                loadedDisc = await this.media.loadDiscImage(savedMedia[discKey], layout);
+            } else if (savedMedia[imageDataKey]) {
+                // Locally-loaded disc — reconstruct from embedded image data
+                const imageData =
+                    savedMedia[imageDataKey] instanceof Uint8Array
+                        ? 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);
+                // Retain the image bytes so subsequent saves can re-embed them.
+                loadedDisc.setOriginalImage(imageData);
+            }
+            if (!loadedDisc) continue;
+
+            // Verify CRC32 if present
+            if (savedMedia[crcKey] != null && loadedDisc.originalImageCrc32 != null) {
+                if (loadedDisc.originalImageCrc32 !== savedMedia[crcKey]) {
+                    toast(
+                        `${loadedDisc.name} has changed since this state was saved. The state has been restored anyway and may not run correctly.`,
+                        { title: "Restoring state" },
+                    );
+                }
+            }
+
+            this.drives.putDiscIn(driveIndex, loadedDisc);
+            // Only update the URL/query for URL-sourced discs. For embedded
+            // (local-file) discs, setting parsedQuery would put a bogus source
+            // in the URL and break subsequent saves/reloads.
+            if (savedMedia[discKey]) {
+                if (driveIndex === 0) this.media.setDisc1Image(savedMedia[discKey]);
+                else this.media.setDisc2Image(savedMedia[discKey]);
+            }
+        }
+    }
+}

package/src/web/sth-picker.js

@@ -0,0 +1,125 @@
+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";
+
+/**
+ * The Stairway to Hell archive picker: one modal browsing either the disc or
+ * the tape catalogue, filtered as it renders.
+ */
+export class SthPicker {
+    constructor({ media, drives, modals, urlState, processor, autoboot }) {
+        this.media = media;
+        this.drives = drives;
+        this.modals = modals;
+        this.urlState = urlState;
+        this.processor = processor;
+        this.autoboot = autoboot;
+
+        this.modal = new bootstrap.Modal(document.getElementById("sth"));
+        document.getElementById("sth").addEventListener("shown.bs.modal", () => {
+            document.getElementById("sth-filter").focus();
+        });
+
+        const startLoad = () => showArchiveMessage("sth", "sth-list", "Loading catalog from STH archive");
+        const onError = () => showArchiveMessage("sth", "sth-list", "There was an error accessing the STH archive");
+        this.discs = new StairwayToHell(
+            startLoad,
+            (cat) => this.renderCatalogue(cat, (item) => this.pickDisc(item)),
+            onError,
+            false,
+        );
+        this.tapes = new StairwayToHell(
+            startLoad,
+            (cat) => this.renderCatalogue(cat, (item) => this.pickTape(item)),
+            onError,
+            true,
+        );
+
+        document.addEventListener("click", (e) => {
+            const target = e.target.closest("a.sth");
+            if (!target) return;
+            const type = target.dataset.id;
+            if (type === "discs") {
+                this.discs.populate();
+            } else if (type === "tapes") {
+                this.tapes.populate();
+            } else {
+                console.log("unknown id", type);
+            }
+        });
+
+        const sthFilter = document.getElementById("sth-filter");
+        const applyFilter = () => filterArchiveList("sth-list", sthFilter.value);
+        sthFilter.addEventListener("change", applyFilter);
+        sthFilter.addEventListener("keyup", applyFilter);
+    }
+
+    async pickDisc(item) {
+        utils.noteEvent("sth", "click", item);
+        this.media.setDisc1Image("sth:" + item);
+        const needsAutoboot = this.urlState.params.autoboot !== undefined;
+        if (needsAutoboot) {
+            this.processor.reset(true);
+        }
+
+        this.modals.popupLoading("Loading " + item);
+        try {
+            const loaded = await this.media.loadDiscImage(this.urlState.params.disc1, this.drives.layoutForDrive(0));
+            this.drives.putDiscIn(0, loaded);
+            this.modals.loadingFinished();
+
+            if (needsAutoboot) {
+                this.autoboot(item);
+            }
+        } catch (err) {
+            console.error("Error loading disc image:", err);
+            this.modals.loadingFinished(`Unable to load ${item} from the STH archive: ${errorText(err)}`);
+        }
+    }
+
+    async pickTape(item) {
+        utils.noteEvent("sth", "clickTape", item);
+        this.media.setTapeImage("sth:" + item);
+
+        this.modals.popupLoading("Loading " + item);
+        try {
+            const tape = await this.media.loadTapeImage(this.urlState.params.tape);
+            this.media.setProcessorTape(tape);
+            this.modals.loadingFinished();
+        } catch (err) {
+            console.error("Error loading tape image:", err);
+            this.modals.loadingFinished(`Unable to load ${item} from the STH archive: ${errorText(err)}`);
+        }
+    }
+
+    renderCatalogue(cat, onClick) {
+        clearArchiveList("sth-list");
+        const sthList = document.getElementById("sth-list");
+        document.querySelector("#sth .loading").style.display = "none";
+        const template = sthList.querySelector(".template");
+
+        const doSome = (all) => {
+            const MaxAtATime = 100;
+            const Delay = 30;
+            const batch = all.slice(0, MaxAtATime);
+            const remaining = all.slice(MaxAtATime);
+            const filter = document.getElementById("sth-filter").value;
+            for (const name of batch) {
+                const row = template.cloneNode(true);
+                row.classList.remove("template");
+                sthList.appendChild(row);
+                row.querySelector(".name").textContent = name;
+                row.addEventListener("click", () => {
+                    onClick(name);
+                    this.modal.hide();
+                });
+                row.style.display = name.toLowerCase().indexOf(filter) >= 0 ? "" : "none";
+            }
+            if (all.length) setTimeout(() => doSome(remaining), Delay);
+        };
+
+        doSome(cat);
+    }
+}

package/src/web/url-state.js

@@ -0,0 +1,83 @@
+import { buildUrlFromParams, ParamTypes, parseQueryString } from "../url-params.js";
+
+/** How each parameter the page understands is parsed and written back. */
+export const UrlParamTypes = {
+    // Array parameters
+    rom: ParamTypes.ARRAY,
+
+    // Boolean parameters
+    embed: ParamTypes.BOOL,
+    fasttape: ParamTypes.BOOL,
+    noseek: ParamTypes.BOOL,
+    debug: ParamTypes.BOOL,
+    verbose: ParamTypes.BOOL,
+    autoboot: ParamTypes.BOOL,
+    autochain: ParamTypes.BOOL,
+    autorun: ParamTypes.BOOL,
+    hasMusic5000: ParamTypes.BOOL,
+    hasTeletextAdaptor: ParamTypes.BOOL,
+    hasEconet: ParamTypes.BOOL,
+    glEnabled: ParamTypes.BOOL,
+    fakeVideo: ParamTypes.BOOL,
+    logFdcCommands: ParamTypes.BOOL,
+    logFdcStateChanges: ParamTypes.BOOL,
+    coProcessor: ParamTypes.BOOL,
+    mouseJoystickEnabled: ParamTypes.BOOL,
+    speechOutput: ParamTypes.BOOL,
+    audioDebug: ParamTypes.BOOL,
+
+    // Numeric parameters
+    speed: ParamTypes.INT,
+    stationId: ParamTypes.INT,
+    frameSkip: ParamTypes.INT,
+    audiofilterfreq: ParamTypes.FLOAT,
+    audiofilterq: ParamTypes.FLOAT,
+    speakerAmount: ParamTypes.FLOAT,
+    audioLatencyMs: ParamTypes.FLOAT,
+    cpuMultiplier: ParamTypes.FLOAT,
+    tubeCpuMultiplier: ParamTypes.FLOAT,
+    microphoneChannel: ParamTypes.INT,
+
+    // String parameters (these are the default but listed for clarity)
+    model: ParamTypes.STRING,
+    disc: ParamTypes.STRING,
+    disc1: ParamTypes.STRING,
+    disc2: ParamTypes.STRING,
+    tape: ParamTypes.STRING,
+    mmc: ParamTypes.STRING,
+    keyLayout: ParamTypes.STRING,
+    autotype: ParamTypes.STRING,
+    displayMode: ParamTypes.STRING,
+    audioOutput: ParamTypes.STRING,
+    drive0Tracks: ParamTypes.STRING,
+    drive1Tracks: ParamTypes.STRING,
+};
+
+/**
+ * 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.
+ */
+export class UrlState {
+    constructor(location, history, paramTypes = UrlParamTypes) {
+        this.history = history;
+        this.paramTypes = paramTypes;
+        this.baseUrl = location.origin + location.pathname;
+        // 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);
+    }
+
+    /** The page's URL with the parameters as they are now. */
+    url() {
+        return buildUrlFromParams(this.baseUrl, this.params, this.paramTypes);
+    }
+
+    /** The page's URL with some parameters changed, leaving `params` as it is. */
+    urlWith(overrides) {
+        return buildUrlFromParams(this.baseUrl, { ...this.params, ...overrides }, this.paramTypes);
+    }
+
+    updateUrl() {
+        this.history.pushState(null, null, this.url());
+    }
+}

package/tests/test-machine.js

@@ -1,3 +1,4 @@
+import { installBasic } from "../src/basic-loader.js";
 import * as fdc from "../src/fdc.js";
 import { fake6502 } from "../src/fake6502.js";
 import { findModel } from "../src/models.js";
@@ -250,19 +251,10 @@ export class TestMachine {
     async loadBasic(source) {
         const tokeniser = await Tokeniser.create();
         const tokenised = tokeniser.tokenise(source);
-        // TODO: dedupe from main.js
-        const page = this.readbyte(0x18) << 8;
-        for (let i = 0; i < tokenised.length; ++i) {
-            this.writebyte(page + i, tokenised.charCodeAt(i));
-        }
-        // Set VARTOP (0x12/3) and TOP(0x02/3)
-        const end = page + tokenised.length;
-        const endLow = end & 0xff;
-        const endHigh = (end >>> 8) & 0xff;
-        this.writebyte(0x02, endLow);
-        this.writebyte(0x03, endHigh);
-        this.writebyte(0x12, endLow);
-        this.writebyte(0x13, endHigh);
+        installBasic(tokenised, {
+            readByte: (addr) => this.readbyte(addr),
+            writeByte: (addr, value) => this.writebyte(addr, value),
+        });
     }
 
     /**