jsbeeb 1.22.0 → 1.22.2

package/src/web/emulation-loop.js

@@ -0,0 +1,314 @@
+import * as utils from "../utils.js";
+
+// A timer, not requestAnimationFrame: a display presentation stall withholds
+// animation frames, and with them the sound chip's samples (issue #885).
+const TickMs = 10;
+
+export const RewindCaptureInterval = 50; // emulated frames, ~1 second
+
+// Under ?audioDebug, one console line per second in which the emulator sat
+// idle between ticks or a tick ran long, or the audio queue underran or
+// dropped, so a click can be matched to a cause. The sound chip posts samples
+// throughout execute(), so only the idle time starves the audio queue.
+const AudioDebugLogIntervalMs = 1000;
+const AudioDebugSlowTickMs = 30;
+const AudioDebugSlowPresentMs = 30;
+
+const VirtualMhzUpdateMs = 3333;
+
+class VirtualSpeedUpdater {
+    constructor(cpuSpeed) {
+        this.cpuSpeed = cpuSpeed;
+        this.cycles = 0;
+        this.time = 0;
+        this.v = document.querySelector(".virtualMHz");
+        this.header = document.getElementById("virtual-mhz-header");
+        this.speedy = false;
+        this.display();
+    }
+
+    update(cycles, time, speedy) {
+        this.cycles += cycles;
+        this.time += time;
+        this.speedy = speedy;
+    }
+
+    display() {
+        // MRG would be nice to graph instantaneous speed to get some idea where the time goes.
+        if (this.cycles) {
+            const thisMHz = this.cycles / this.time / 1000;
+            this.v.textContent = thisMHz.toFixed(1);
+            if (this.cycles >= 10 * this.cpuSpeed) {
+                this.cycles = this.time = 0;
+            }
+            this.header.style.color = this.speedy ? "red" : "white";
+        }
+        setTimeout(() => this.display(), VirtualMhzUpdateMs);
+    }
+}
+
+/**
+ * Runs the machine in real time: the tick that turns wall-clock time into
+ * cycles, starting and stopping, the audio lead, fast-forward, rewind capture
+ * and the speed readout. Owns `running`, and dispatches a "running" event
+ * whenever it changes hands.
+ */
+export class EmulationLoop extends EventTarget {
+    constructor({
+        processor,
+        display,
+        audioHandler,
+        dbgr,
+        gamepad,
+        keyboard,
+        syncLights,
+        rewindBuffer,
+        onRewindCaptured,
+        clocksPerSecond,
+        cpuSpeed,
+        fastTape,
+        audioStatsNode,
+    }) {
+        super();
+        this.processor = processor;
+        this.display = display;
+        this.audioHandler = audioHandler;
+        this.dbgr = dbgr;
+        this.gamepad = gamepad;
+        this.keyboard = keyboard;
+        this.syncLights = syncLights;
+        this.rewindBuffer = rewindBuffer;
+        this.onRewindCaptured = onRewindCaptured;
+        this.clocksPerSecond = clocksPerSecond;
+        this.maxCyclesPerTick = clocksPerSecond / 10;
+        this.rewindCaptureCycles = (RewindCaptureInterval * clocksPerSecond) / 50;
+        this.fastTape = fastTape;
+        this.audioStatsNode = audioStatsNode;
+
+        this.running = false;
+        this.fastAsPossible = false;
+        this.last = 0;
+        this.lastEnd = 0;
+        this.tickToken = null;
+        this.emulationLeadMs = 0;
+        this.rewindCycleCounter = 0;
+        this.wasPreviouslyRunning = false;
+
+        this.virtualSpeedUpdater = new VirtualSpeedUpdater(cpuSpeed);
+        this.audioDebugLog = { start: 0, ticks: 0, cycles: 0, maxIdle: 0, maxExecute: 0, maxPaint: 0, maxSnapshot: 0 };
+
+        document.addEventListener("visibilitychange", () => this.handleVisibilityChange(), false);
+    }
+
+    isRunning() {
+        return this.running;
+    }
+
+    go() {
+        this.audioHandler.unmute();
+        this.running = true;
+        this.dispatchEvent(new Event("running"));
+        this.run();
+    }
+
+    stop(debug) {
+        this.running = false;
+        this.dispatchEvent(new Event("running"));
+        this.processor.stop();
+        if (debug) this.dbgr.debug(this.processor.pc);
+        this.audioHandler.mute();
+    }
+
+    run() {
+        this.scheduleTick(0);
+    }
+
+    toggleFastAsPossible() {
+        this.fastAsPossible = !this.fastAsPossible;
+    }
+
+    // A user-blocking task runs ahead of rendering and ordinary timers, so a stuck
+    // compositor does not hold the tick off too.
+    scheduleTick(delayMs) {
+        const token = (this.tickToken = {});
+        const fire = () => {
+            if (this.tickToken === token) this.tick();
+        };
+        if (window.scheduler?.postTask) window.scheduler.postTask(fire, { delay: delayMs, priority: "user-blocking" });
+        else window.setTimeout(fire, delayMs);
+    }
+
+    tick() {
+        if (!this.running) {
+            this.last = 0;
+            return;
+        }
+        const now = performance.now();
+
+        const { processor, display, audioHandler } = this;
+        const motorOn = processor.acia.motorOn;
+        const speedy = this.fastAsPossible || (this.fastTape && motorOn);
+
+        // In speedy mode, we still run all the state machines accurately
+        // but we paint less often because painting is the most expensive
+        // part of jsbeeb at this time.
+        // We need need to paint per odd number of frames so that interlace
+        // modes, i.e. MODE 7, still look ok.
+        display.video.frameSkipCount = speedy ? 9 : 0;
+
+        this.scheduleTick(speedy ? 0 : TickMs);
+
+        this.gamepad.update(processor.sysvia);
+        this.syncLights();
+        if (this.last !== 0) {
+            let cycles;
+            if (!speedy) {
+                const sinceLast = Math.max(0, now - this.last);
+                cycles = (sinceLast * this.clocksPerSecond) / 1000;
+                cycles = Math.min(cycles, this.maxCyclesPerTick);
+            } else {
+                cycles = this.clocksPerSecond / 50;
+            }
+            cycles |= 0;
+            try {
+                if (!processor.execute(cycles)) {
+                    this.stop(true);
+                }
+                audioHandler.flushChipEvents();
+                const end = performance.now();
+                this.virtualSpeedUpdater.update(cycles, end - now, speedy);
+                const paintMs = display.takePaintMs();
+                let snapshotMs = 0;
+                this.rewindCycleCounter += cycles;
+                if (this.rewindCycleCounter >= this.rewindCaptureCycles) {
+                    this.rewindCycleCounter -= this.rewindCaptureCycles;
+                    this.rewindBuffer.push(processor.snapshotState());
+                    this.onRewindCaptured();
+                    snapshotMs = performance.now() - end;
+                }
+                if (this.audioStatsNode)
+                    this.logAudioDebugTick(
+                        now,
+                        cycles,
+                        speedy ? 0 : now - this.lastEnd,
+                        end - now,
+                        paintMs,
+                        snapshotMs,
+                    );
+            } catch (e) {
+                this.running = false;
+                utils.noteEvent("exception", "thrown", e.stack);
+                this.dbgr.debug(processor.pc);
+                throw e;
+            }
+            if (this.keyboard.postFrameShouldPause()) {
+                this.stop(false);
+            }
+        }
+        this.last = Math.max(this.last, now);
+        this.lastEnd = performance.now();
+    }
+
+    // A change of audio buffer depth is taken by the picture, not the sound:
+    // gaining lead emulates ahead at once; losing it moves `last` forward so the
+    // ticks emulate nothing until the queue has drained by that much.
+    setEmulationLead(leadMs) {
+        if (!this.running) return;
+        const aheadMs = leadMs - this.emulationLeadMs;
+        this.emulationLeadMs = leadMs;
+        if (aheadMs > 0) {
+            if (!this.processor.execute((aheadMs * this.clocksPerSecond) / 1000)) this.stop(true);
+            this.audioHandler.flushChipEvents();
+        } else {
+            this.last -= aheadMs;
+        }
+    }
+
+    handleVisibilityChange() {
+        const { processor } = this;
+        if (document.visibilityState === "hidden") {
+            this.wasPreviouslyRunning = this.running;
+            const keepRunningWhenHidden =
+                processor.acia.motorOn || processor.fdc.motorOn[0] || processor.fdc.motorOn[1];
+            if (this.running && !keepRunningWhenHidden) {
+                this.stop(false);
+            }
+        } else {
+            if (this.wasPreviouslyRunning) {
+                this.go();
+            }
+        }
+    }
+
+    logAudioDebugTick(now, cycles, idleMs, executeMs, paintMs, snapshotMs) {
+        const log = this.audioDebugLog;
+        if (log.start === 0) log.start = now;
+        log.ticks++;
+        log.cycles += cycles;
+        log.maxIdle = Math.max(log.maxIdle, idleMs);
+        log.maxExecute = Math.max(log.maxExecute, executeMs);
+        log.maxPaint = Math.max(log.maxPaint, paintMs);
+        log.maxSnapshot = Math.max(log.maxSnapshot, snapshotMs);
+        if (now - log.start < AudioDebugLogIntervalMs) return;
+        const audio = this.audioHandler.takeEventCounts();
+        const present = this.display.takePresentMs();
+        const leadMin = Number.isFinite(audio.leadMinMs) ? `${audio.leadMinMs.toFixed(1)}ms` : "(no stats)";
+        if (
+            log.maxIdle > AudioDebugSlowTickMs ||
+            log.maxExecute > AudioDebugSlowTickMs ||
+            present > AudioDebugSlowPresentMs ||
+            audio.stall ||
+            audio.skip
+        ) {
+            console.log(
+                `${(now / 1000).toFixed(0)}s: ${log.ticks} ticks emulating ${((1000 * log.cycles) / this.clocksPerSecond).toFixed(0)}ms, ` +
+                    `idle max ${log.maxIdle.toFixed(0)}ms, ` +
+                    `execute max ${log.maxExecute.toFixed(0)}ms (paint ${log.maxPaint.toFixed(1)}ms), ` +
+                    `present max ${present.toFixed(0)}ms, snapshot ${log.maxSnapshot.toFixed(1)}ms; ` +
+                    `audio lead min ${leadMin}, stalls ${audio.stall}, skipped ${audio.skip.toFixed(0)}ms`,
+            );
+        }
+        log.start = now;
+        log.ticks = log.cycles = log.maxIdle = log.maxExecute = log.maxPaint = log.maxSnapshot = 0;
+    }
+
+    benchmarkCpu(numCycles) {
+        numCycles = numCycles || 10 * 1000 * 1000;
+        const oldFS = this.display.frameSkip;
+        this.display.frameSkip = 1000000;
+        const startTime = performance.now();
+        this.processor.execute(numCycles);
+        const endTime = performance.now();
+        this.display.frameSkip = oldFS;
+        const msTaken = endTime - startTime;
+        const virtualMhz = numCycles / msTaken / 1000;
+        console.log("Took " + msTaken + "ms to execute " + numCycles + " cycles");
+        console.log("Virtual " + virtualMhz.toFixed(2) + "MHz");
+    }
+
+    benchmarkVideo(numCycles) {
+        numCycles = numCycles || 10 * 1000 * 1000;
+        const oldFS = this.display.frameSkip;
+        this.display.frameSkip = 1000000;
+        const startTime = performance.now();
+        this.display.video.polltime(numCycles);
+        const endTime = performance.now();
+        this.display.frameSkip = oldFS;
+        const msTaken = endTime - startTime;
+        const virtualMhz = numCycles / msTaken / 1000;
+        console.log("Took " + msTaken + "ms to execute " + numCycles + " video cycles");
+        console.log("Virtual " + virtualMhz.toFixed(2) + "MHz");
+    }
+
+    profileCpu(arg) {
+        console.profile("CPU");
+        this.benchmarkCpu(arg);
+        console.profileEnd();
+    }
+
+    profileVideo(arg) {
+        console.profile("Video");
+        this.benchmarkVideo(arg);
+        console.profileEnd();
+    }
+}

package/src/web/front-panel.js

@@ -0,0 +1,133 @@
+import { toast } from "./toast.js";
+
+class Light {
+    constructor(name) {
+        this.dom = document.getElementById(name);
+        this.on = false;
+    }
+
+    update(val) {
+        if (val === this.on) return;
+        this.on = val;
+        this.dom.classList.toggle("on", this.on);
+    }
+}
+
+/**
+ * The furniture around the screen: the keyboard and drive lights, the tape
+ * controls, and the pop-up window the printer prints into.
+ */
+export class FrontPanel {
+    constructor({ processor, model, printer }) {
+        this.processor = processor;
+        this.model = model;
+        this.printer = printer;
+        this.printerWindow = null;
+        this.printerTextArea = null;
+
+        for (const link of document.querySelectorAll("#tape-menu a")) {
+            link.addEventListener("click", (e) => {
+                const type = e.target.dataset.id;
+                if (type === undefined) return;
+
+                if (type === "rewind") {
+                    console.log("Rewinding tape to the start");
+                    if (model.isAtom) {
+                        processor.atomppia.stopTape();
+                        processor.atomppia.rewindTape();
+                        this.updateTapeButton();
+                    } else {
+                        processor.acia.rewindTape();
+                    }
+                }
+            });
+        }
+
+        this.tapePlayStopBtn = document.getElementById("tape-play-stop");
+        this.tapeControlHeader = document.getElementById("tape-control-header");
+        this.tapeControlCell = document.getElementById("tape-control-cell");
+
+        this.tapePlayStopBtn.addEventListener("click", () => {
+            if (processor.atomppia.motorOn) {
+                processor.atomppia.stopTape();
+            } else {
+                processor.atomppia.playTape();
+            }
+            this.updateTapeButton();
+        });
+
+        this.cassette = new Light("motorlight");
+        this.caps = new Light("capslight");
+        this.shift = new Light("shiftlight");
+        this.drive0 = new Light("drive0");
+        this.drive1 = new Light("drive1");
+        this.network = new Light("networklight");
+
+        this.updateLedVisibility();
+    }
+
+    updateTapeButton() {
+        if (!this.model.isAtom) return;
+        const playing = this.processor.atomppia.motorOn;
+        const label = playing ? "Stop cassette" : "Play cassette";
+        this.tapePlayStopBtn.textContent = playing ? "■" : "▶";
+        this.tapePlayStopBtn.title = label;
+        this.tapePlayStopBtn.setAttribute("aria-label", label);
+        this.tapePlayStopBtn.classList.toggle("playing", playing);
+    }
+
+    showTapeControl(visible) {
+        const display = visible ? "" : "none";
+        this.tapeControlHeader.style.display = display;
+        this.tapeControlCell.style.display = display;
+    }
+
+    updateLedVisibility() {
+        const bbcDisplay = this.model.isAtom ? "none" : "";
+        for (const el of document.querySelectorAll(".bbc-only")) {
+            el.style.display = bbcDisplay;
+        }
+        this.showTapeControl(this.model.isAtom);
+    }
+
+    syncLights() {
+        const { processor } = this;
+        if (this.model.isAtom) {
+            this.cassette.update(processor.atomppia.motorOn);
+        } else {
+            this.caps.update(processor.sysvia.capsLockLight);
+            this.shift.update(processor.sysvia.shiftLockLight);
+            this.drive0.update(processor.fdc.motorOn[0]);
+            this.drive1.update(processor.fdc.motorOn[1]);
+            this.cassette.update(processor.acia.motorOn);
+            if (processor.econet) {
+                this.network.update(processor.econet.activityLight());
+            }
+        }
+    }
+
+    /** What the printer prints lands in its window, when one is open. */
+    printChar(char) {
+        if (this.printerTextArea) this.printerTextArea.value += char;
+    }
+
+    checkPrinterWindow() {
+        if (this.printerWindow && !this.printerWindow.closed) return;
+
+        this.printerWindow = window.open("", "_blank", "height=300,width=400");
+        if (!this.printerWindow) {
+            toast(
+                "The printer output window was blocked. Allow pop-up windows for this site, then press Ctrl-B again.",
+                {
+                    title: "Printer",
+                },
+            );
+            return;
+        }
+        this.printerWindow.document.write(
+            '<textarea id="text" rows="15" cols="40" placeholder="Printer outputs here..."></textarea>',
+        );
+        this.printerTextArea = this.printerWindow.document.getElementById("text");
+        this.printerTextArea.value = this.printer.text;
+    }
+}

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

@@ -0,0 +1,175 @@
+import * as utils from "../utils.js";
+import * as bootstrap from "bootstrap";
+import * as disc from "../fdc.js";
+import { GoogleDriveLoader } from "../google-drive.js";
+import { toast } from "./toast.js";
+import { errorText } from "./reporting.js";
+
+/**
+ * The Google Drive picker: signing in, listing the user's discs, loading one
+ * and creating a new one, blank or from what is in drive 0.
+ */
+export class GoogleDrivePicker {
+    constructor({ media, drives, modals, processor, loader = new GoogleDriveLoader() }) {
+        this.media = media;
+        this.drives = drives;
+        this.modals = modals;
+        this.processor = processor;
+        this.googleDrive = loader;
+
+        this.authEl = document.getElementById("google-drive-auth");
+        this.el = document.getElementById("google-drive");
+        this.modal = new bootstrap.Modal(this.el);
+        this.authResolve = null;
+        this.authReject = null;
+
+        document.querySelector("#google-drive-auth form").addEventListener("submit", async (e) => {
+            this.authEl.style.display = "none";
+            e.preventDefault();
+            const authed = await this.auth(false);
+            if (authed) this.authResolve();
+            else this.authReject(new Error("Unable to authorize Google Drive"));
+        });
+
+        // Loading the Google client holds the main thread for ~100ms, so it waits for
+        // someone to ask for Drive.
+        document.getElementById("open-drive-link").addEventListener("click", async (e) => {
+            e.preventDefault();
+            try {
+                await this.googleDrive.initialise();
+            } catch (error) {
+                toast(`Google Drive is unavailable: ${errorText(error)}`, { title: "Google Drive" });
+                return;
+            }
+            const authed = await this.auth(false);
+            if (authed) {
+                this.modal.show();
+            }
+        });
+
+        this.el.addEventListener("show.bs.modal", () => this.showList());
+        document.querySelector("#google-drive form").addEventListener("submit", (e) => this.create(e));
+    }
+
+    async auth(imm) {
+        try {
+            return await this.googleDrive.authorize(imm);
+        } catch (err) {
+            console.log("Error handling google auth: " + errorText(err));
+            this.el.querySelector(".loading").textContent =
+                `There was an error accessing your Google Drive account: ${errorText(err)}`;
+            return false;
+        }
+    }
+
+    async load(cat, layout) {
+        this.modals.popupLoading("Loading '" + cat.name + "' from Google Drive");
+        try {
+            const available = await this.googleDrive.initialise();
+            console.log("Google Drive available =", available);
+            if (!available) throw new Error("Google Drive is not available");
+
+            const authed = await this.auth(true);
+            console.log("Google Drive authed=", authed);
+
+            if (!authed) {
+                await new Promise((resolve, reject) => {
+                    this.authResolve = resolve;
+                    this.authReject = reject;
+                    this.authEl.style.display = "";
+                });
+            }
+
+            const ssd = await this.googleDrive.load(this.processor.fdc, cat.id, layout);
+            console.log("Google Drive loading finished");
+            this.modals.loadingFinished();
+            if (!ssd.savesChanges) {
+                toast(`${cat.name} is read only on Google Drive, so changes to it are not written back.`, {
+                    title: "Google Drive",
+                    quietKey: "quietDriveReadOnly",
+                });
+            }
+            return ssd;
+        } catch (error) {
+            console.error("Google Drive loading error:", error);
+            this.modals.loadingFinished(`Unable to load ${cat.name} from Google Drive: ${errorText(error)}`);
+        }
+    }
+
+    async showList() {
+        const gdLoading = this.el.querySelector(".loading");
+        gdLoading.textContent = "Loading...";
+        gdLoading.style.display = "";
+        for (const el of this.el.querySelectorAll("li:not(.template)")) el.remove();
+        let cat;
+        try {
+            cat = await this.googleDrive.listFiles();
+        } catch (error) {
+            console.error("Error listing Google Drive files:", error);
+            gdLoading.textContent = `Unable to list your Google Drive files: ${errorText(error)}`;
+            return;
+        }
+        const dbList = this.el.querySelector(".list");
+        gdLoading.style.display = "none";
+        const template = dbList.querySelector(".template");
+        for (const item of cat) {
+            const row = template.cloneNode(true);
+            row.classList.remove("template");
+            dbList.appendChild(row);
+            row.querySelector(".name").textContent = item.name;
+            row.addEventListener("click", async () => {
+                utils.noteEvent("google-drive", "click", item.name);
+                this.media.setDisc1Image(`gd:${item.id}/${item.name}`);
+                this.modal.hide();
+                const ssd = await this.load(item, this.drives.layoutForDrive(0));
+                if (ssd) this.drives.putDiscIn(0, ssd);
+            });
+        }
+    }
+
+    async create(e) {
+        e.preventDefault();
+        let name = document.querySelector("#google-drive .disc-name").value;
+        if (!name) return;
+
+        this.modal.hide();
+        this.modals.popupLoading("Creating '" + name + "' on Google Drive");
+
+        let data;
+        if (document.querySelector("#google-drive .create-from-existing").checked) {
+            const discType = disc.guessDiscTypeFromName(name);
+            try {
+                data = discType.saver(this.processor.fdc.drives[0].disc);
+            } catch (e) {
+                this.modals.loadingFinished(`Unable to create ${name} on Google Drive: ${errorText(e)}`);
+                return;
+            }
+            name = utils.replaceOrAddExtension(name, discType.extension);
+            console.log(`Saving existing disc: ${name}`);
+        } else {
+            // TODO support HFE, I guess?
+            const discType = disc.guessDiscTypeFromName(name);
+            if (!discType.byteSize) {
+                this.modals.loadingFinished(
+                    `Unable to create ${name} on Google Drive: blank ${discType.extension} discs have no known size`,
+                );
+                return;
+            }
+            data = new Uint8Array(discType.byteSize);
+            if (discType.supportsCatalogue) {
+                discType.setDiscName(data, name);
+            }
+            console.log(`Creating blank: ${name}`);
+        }
+
+        try {
+            const result = await this.googleDrive.create(this.processor.fdc, name, data);
+            this.media.setDisc1Image("gd:" + result.fileId + "/" + name);
+            this.drives.putDiscIn(0, result.disc);
+            this.modals.loadingFinished();
+        } catch (error) {
+            console.error(`Error creating Google Drive disc: ${error}`, error);
+            this.modals.loadingFinished(`Unable to create ${name} on Google Drive: ${errorText(error)}`);
+        }
+    }
+}