jsbeeb 1.22.0 → 1.22.2

package/src/utils.js

@@ -924,6 +924,14 @@ export function getKeyMap(keyLayout) {
     return keys2;
 }
 
+export function replaceOrAddExtension(name, newExt) {
+    const lastDot = name.lastIndexOf(".");
+    if (lastDot === -1) {
+        return name + newExt;
+    }
+    return name.substring(0, lastDot) + newExt;
+}
+
 export function hexbyte(value) {
     return ((value >>> 4) & 0xf).toString(16) + (value & 0xf).toString(16);
 }

package/src/web/analogue-inputs.js

@@ -0,0 +1,134 @@
+import { GamepadSource } from "../gamepad-source.js";
+import { MicrophoneInput } from "../microphone-input.js";
+import { MouseJoystickSource } from "../mouse-joystick-source.js";
+import { calculateMouseCoordinates } from "../mouse-coordinates.js";
+import { toast } from "./toast.js";
+
+const AdcChannelCount = 4;
+
+/**
+ * What feeds the analogue port and the touchscreen: the gamepad, the mouse
+ * acting as a joystick, and the microphone, with the mouse on the monitor
+ * routed to whichever of them wants it.
+ */
+export class AnalogueInputs {
+    constructor({ processor, screenCanvas, getGamepads, urlState, config, audioHandler }) {
+        this.processor = processor;
+        this.urlState = urlState;
+        this.config = config;
+
+        this.gamepadSource = new GamepadSource(getGamepads);
+        // Create MicrophoneInput but don't enable by default
+        this.microphoneInput = new MicrophoneInput();
+        this.microphoneInput.setErrorCallback((message) => {
+            toast(`${message} The microphone channel has been turned off.`, { title: "Microphone" });
+        });
+
+        // Create MouseJoystickSource but don't enable by default
+        this.mouseJoystickSource = new MouseJoystickSource(screenCanvas);
+
+        const cubMonitor = document.getElementById("cub-monitor");
+        const onCubMouseEvent = (evt) => {
+            audioHandler.tryResume();
+            if (document.activeElement !== document.body) document.activeElement.blur();
+            const screenRect = screenCanvas.getBoundingClientRect();
+            const { x, y } = calculateMouseCoordinates(evt, screenRect);
+
+            // Handle touchscreen
+            if (processor.touchScreen) processor.touchScreen.onMouse(x, y, evt.buttons);
+
+            // Handle mouse joystick if enabled
+            if (urlState.params.mouseJoystickEnabled && this.mouseJoystickSource.isEnabled()) {
+                // Use the API methods instead of direct manipulation
+                this.mouseJoystickSource.onMouseMove(x, y);
+
+                // Handle button events
+                if (evt.type === "mousedown" && evt.button === 0) {
+                    this.mouseJoystickSource.onMouseDown(0);
+                } else if (evt.type === "mouseup" && evt.button === 0) {
+                    this.mouseJoystickSource.onMouseUp(0);
+                }
+            }
+
+            evt.preventDefault();
+        };
+        for (const eventType of ["mousemove", "mousedown", "mouseup"]) {
+            cubMonitor.addEventListener(eventType, onCubMouseEvent);
+        }
+    }
+
+    /** Helper to manage ADC source configuration */
+    updateAdcSources(mouseJoystickEnabled, microphoneChannel) {
+        const { processor } = this;
+        // Default all channels to the gamepad source.
+        for (let ch = 0; ch < AdcChannelCount; ch++) {
+            processor.adconverter.setChannelSource(ch, this.gamepadSource);
+        }
+
+        // Apply mouse joystick if enabled (takes priority on channels 0 & 1)
+        if (mouseJoystickEnabled) {
+            processor.adconverter.setChannelSource(0, this.mouseJoystickSource);
+            processor.adconverter.setChannelSource(1, this.mouseJoystickSource);
+            this.mouseJoystickSource.setVia(processor.sysvia);
+        } else {
+            this.mouseJoystickSource.setVia(null);
+        }
+
+        // Apply microphone if configured (can override any channel)
+        if (microphoneChannel === undefined) return;
+        if (Number.isInteger(microphoneChannel) && microphoneChannel >= 0 && microphoneChannel < AdcChannelCount) {
+            processor.adconverter.setChannelSource(microphoneChannel, this.microphoneInput);
+        } else {
+            toast(
+                `There is no analogue channel ${microphoneChannel}; channels are 0 to 3. ` +
+                    `The microphone channel has been turned off.`,
+                { title: "Microphone" },
+            );
+            this.clearMicrophoneChannel();
+        }
+    }
+
+    clearMicrophoneChannel() {
+        this.config.setMicrophoneChannel(undefined);
+        delete this.urlState.params.microphoneChannel;
+        this.urlState.updateUrl();
+    }
+
+    async ensureMicrophoneRunning() {
+        const { microphoneInput } = this;
+        if (microphoneInput.audioContext && microphoneInput.audioContext.state !== "running") {
+            try {
+                await microphoneInput.audioContext.resume();
+                console.log("Microphone: Audio context resumed, new state:", microphoneInput.audioContext.state);
+            } catch (err) {
+                console.error("Microphone: Error resuming audio context:", err);
+                return false;
+            }
+        }
+        return true;
+    }
+
+    async setupMicrophone() {
+        // The channel can have been turned off between the request and now.
+        if (this.urlState.params.microphoneChannel === undefined) return;
+        const micPermissionStatus = document.getElementById("micPermissionStatus");
+        micPermissionStatus.textContent = "Requesting microphone access...";
+
+        // Try to initialise the microphone
+        const success = await this.microphoneInput.initialise();
+        if (success) {
+            // Note: Channel assignment is handled by updateAdcSources()
+            micPermissionStatus.textContent = "Microphone connected successfully";
+            await this.ensureMicrophoneRunning();
+
+            // Try starting audio context from user gesture
+            const tryAgain = async () => {
+                if (await this.ensureMicrophoneRunning()) document.removeEventListener("click", tryAgain);
+            };
+            document.addEventListener("click", tryAgain);
+        } else {
+            micPermissionStatus.textContent = `Error: ${this.microphoneInput.getErrorMessage() || "Unknown error"}`;
+            this.clearMicrophoneChannel();
+        }
+    }
+}

package/src/web/archive-list.js

@@ -0,0 +1,44 @@
+/** List plumbing every archive picker shares: one modal, one list, one filter box. */
+
+export function clearArchiveList(listId) {
+    for (const el of document.querySelectorAll(`#${listId} li:not(.template)`)) el.remove();
+}
+
+export function showArchiveMessage(modalId, listId, message) {
+    const loading = document.querySelector(`#${modalId} .loading`);
+    loading.textContent = message;
+    loading.style.display = "";
+    clearArchiveList(listId);
+}
+
+export function filterArchiveList(listId, filter) {
+    filter = filter.toLowerCase();
+    for (const el of document.querySelectorAll(`#${listId} li:not(.template)`)) {
+        el.style.display = el.textContent.toLowerCase().includes(filter) ? "" : "none";
+    }
+}
+
+/**
+ * Every archive picker offers the same autoboot choice, and it is one setting,
+ * so ticking it in either has to show in both.
+ */
+export class AutobootTicks {
+    constructor({ urlState }) {
+        this.checks = document.querySelectorAll(".modal .autoboot");
+        for (const check of this.checks) {
+            check.addEventListener("click", () => {
+                this.show(check.checked);
+                if (check.checked) {
+                    urlState.params.autoboot = "";
+                } else {
+                    delete urlState.params.autoboot;
+                }
+                urlState.updateUrl();
+            });
+        }
+    }
+
+    show(checked) {
+        for (const check of this.checks) check.checked = checked;
+    }
+}

package/src/web/audio-handler.js

@@ -14,8 +14,8 @@ const StallSpikeHeight = 20;
 
 // Nobody is watching an unfocused window, so its sound can run far behind
 // the picture, deep enough to ride out the browser starving the tab.
-export const UnfocusedLatencyMs = 200;
-export const DefaultLatencyMs = 20;
+const UnfocusedLatencyMs = 200;
+const DefaultLatencyMs = 20;
 
 export class AudioHandler {
     constructor({

package/src/web/autoboot.js

@@ -0,0 +1,85 @@
+import * as utils from "../utils.js";
+import * as utils_atom from "../utils_atom.js";
+import * as tokeniser from "../basic-tokenise.js";
+import { basicIdleAddr, installBasic } from "../basic-loader.js";
+
+/** Booting and typing for the machine at startup: shift-break, *TAPE incantations and BASIC programs. */
+export class Autoboot {
+    /** @param {Function} deps.sendKeys sends a raw key sequence once the keyboard exists */
+    constructor({ model, processor, sendKeys }) {
+        this.model = model;
+        this.processor = processor;
+        this.sendKeys = sendKeys;
+    }
+
+    /** Convert text to machine-appropriate key sequences (BBC or Atom) */
+    stringToMachineKeys(text) {
+        return this.model.isAtom ? utils_atom.stringToATOMKeys(text) : utils.stringToBBCKeys(text);
+    }
+
+    boot(image) {
+        const BBC = utils.BBC;
+
+        console.log("Autobooting disc");
+        utils.noteEvent("init", "autoboot", image);
+
+        // Shift-break simulation, hold SHIFT for 1000ms.
+        this.sendKeys([BBC.SHIFT, 1000], false);
+    }
+
+    type(keys) {
+        console.log("Auto typing '" + keys + "'");
+        utils.noteEvent("init", "autochain");
+
+        const bbcKeys = this.stringToMachineKeys(keys);
+        this.sendKeys([1000].concat(bbcKeys), false);
+    }
+
+    chainTape() {
+        console.log("Auto Chaining Tape");
+        utils.noteEvent("init", "autochain");
+
+        const bbcKeys = this.stringToMachineKeys('*TAPE\nCH.""\n');
+        this.sendKeys([1000].concat(bbcKeys), false);
+    }
+
+    runTape() {
+        console.log("Auto Running Tape");
+        utils.noteEvent("init", "autorun");
+
+        const bbcKeys = this.stringToMachineKeys("*TAPE\n*/\n");
+        this.sendKeys([1000].concat(bbcKeys), false);
+    }
+
+    runBasic() {
+        console.log("Auto Running basic");
+        utils.noteEvent("init", "autorunbasic");
+
+        const bbcKeys = this.stringToMachineKeys("RUN\n");
+        this.sendKeys([1000].concat(bbcKeys), false);
+    }
+
+    /**
+     * Tokenises a BASIC program and installs it once the OS reaches its idle
+     * loop, so it lands after the machine has finished starting up.
+     */
+    async insertBasic(getBasicPromise, needsRun) {
+        const prog = await getBasicPromise;
+        const t = await tokeniser.create();
+        const tokenised = await t.tokenise(prog);
+
+        const { processor } = this;
+        const idleAddr = basicIdleAddr(processor.model);
+        const hook = processor.debugInstruction.add((addr) => {
+            if (addr !== idleAddr) return;
+            installBasic(tokenised, {
+                readByte: (a) => processor.readmem(a),
+                writeByte: (a, value) => processor.writemem(a, value),
+            });
+            hook.remove();
+            if (needsRun) {
+                this.runBasic();
+            }
+        });
+    }
+}

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

@@ -1,7 +1,7 @@
 "use strict";
-import { allModels, findModel, tubeModelFor } from "./models.js";
-import { getFilterForMode } from "./canvas.js";
-import { AudioOutputs } from "./audio-output.js";
+import { allModels, findModel, tubeModelFor } from "../models.js";
+import { getFilterForMode } from "../canvas.js";
+import { AudioOutputs } from "../audio-output.js";
 
 const round = (value) => Number(value.toFixed(2));
 
@@ -25,7 +25,7 @@ export function fittedRoms({ model, hasEconet, hasMusic5000, hasTeletextAdaptor
 }
 
 /** The settings the dialog presents as checkboxes. `enables` names a control only usable while ticked. */
-export const CheckboxSettings = [
+const CheckboxSettings = [
     { id: "65c02", field: "coProcessor", restartRequired: true, enables: "tubeCpuMultiplier" },
     { id: "hasTeletextAdaptor", field: "hasTeletextAdaptor", restartRequired: true },
     { id: "hasEconet", field: "hasEconet", restartRequired: true },

package/src/{disc-visualiser.js → web/disc-visualiser.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-import { IbmDiscFormat } from "./disc.js";
+import { IbmDiscFormat } from "../disc.js";
 import {
     DensityPalette,
     DensityRampHex,
@@ -15,7 +15,7 @@ import {
     renderTracks,
     trackPulseDensity,
     trackRegions,
-} from "./disc-surface.js";
+} from "../disc-surface.js";
 
 /** 300 rpm. */
 const RevolutionMs = 200;

package/src/web/display.js

@@ -0,0 +1,166 @@
+import * as canvasLib from "../canvas.js";
+import { FakeVideo, Video } from "../video.js";
+import { toast } from "./toast.js";
+
+/**
+ * The picture: the canvas and its filter, the video chip that paints into a
+ * framebuffer of our own, and the animation frame that presents it. A stalled
+ * display holds up the picture and not the emulation (issue #885).
+ */
+export class Display {
+    constructor({
+        screenCanvas,
+        model,
+        mode,
+        tryGl = true,
+        lowLatency = true,
+        fakeVideo = false,
+        frameSkip = 0,
+        makeCanvas = (canvasEl, filterClass) =>
+            tryGl
+                ? canvasLib.bestCanvas(canvasEl, filterClass, lowLatency)
+                : new canvasLib.Canvas(canvasEl, lowLatency),
+    }) {
+        this.screenCanvas = screenCanvas;
+        this.frames = 0;
+        this.frameSkip = frameSkip;
+        this.paintMsThisTick = 0;
+        this.presentMsMax = 0;
+        this.presentScheduled = false;
+
+        this.filterClass = canvasLib.getFilterForMode(mode);
+        // Each mode says how many pixels it wants to draw into. Set this before
+        // creating the context, which fixes its initial viewport.
+        this.sizeCanvasFor(this.filterClass);
+        this.canvas = makeCanvas(screenCanvas, this.filterClass);
+        this.reportAnyFallback(this.filterClass);
+        this.filterClass = this.canvas.filterClass;
+
+        // The emulator paints into its own framebuffer; flyback copies the
+        // finished frame into the canvas and an animation frame presents it.
+        this.videoFb32 = new Uint32Array(this.canvas.fb32.length);
+        this.pendingFrame = {
+            minx: 0,
+            miny: 0,
+            maxx: 0,
+            maxy: 0,
+            lineBaseEven: 0,
+            lineBaseOdd: 0,
+            lineGrid: new Uint8Array(0),
+        };
+
+        const display = this;
+        this.video = fakeVideo
+            ? new FakeVideo()
+            : new Video(
+                  model.isMaster,
+                  this.videoFb32,
+                  function paint(minx, miny, maxx, maxy) {
+                      display.onPaint(this, minx, miny, maxx, maxy);
+                  },
+                  { isAtom: model.isAtom },
+              );
+
+        this.setCrtPic();
+    }
+
+    onPaint(video, minx, miny, maxx, maxy) {
+        this.frames++;
+        if (this.frames < this.frameSkip) return;
+        this.frames = 0;
+        const start = performance.now();
+        this.canvas.fb32.set(this.videoFb32.subarray(miny * 1024, maxy * 1024), miny * 1024);
+        if (this.pendingFrame.lineGrid.length !== video.lineGrid.length)
+            this.pendingFrame.lineGrid = new Uint8Array(video.lineGrid.length);
+        this.pendingFrame.lineGrid.set(video.lineGrid);
+        Object.assign(this.pendingFrame, {
+            minx,
+            miny,
+            maxx,
+            maxy,
+            lineBaseEven: video.lineBaseEven,
+            lineBaseOdd: video.lineBaseOdd,
+        });
+        this.paintMsThisTick += performance.now() - start;
+        if (!this.presentScheduled) {
+            this.presentScheduled = true;
+            window.requestAnimationFrame(() => this.present());
+        }
+    }
+
+    present() {
+        this.presentScheduled = false;
+        const start = performance.now();
+        const { minx, miny, maxx, maxy } = this.pendingFrame;
+        this.canvas.paint(minx, miny, maxx, maxy, this.pendingFrame);
+        this.presentMsMax = Math.max(this.presentMsMax, performance.now() - start);
+    }
+
+    /** The mode is changed from a modal, which stops the emulator, so this repaints itself. */
+    setMode(mode) {
+        const newFilterClass = canvasLib.getFilterForMode(mode);
+        // Everything but the filter is the same whatever the mode: the framebuffer
+        // texture, the vertex buffers and fb32 all carry over untouched.
+        canvasLib.useBestFilter(this.canvas, newFilterClass);
+        this.reportAnyFallback(newFilterClass);
+        // Follow the filter we ended up with, not the one we asked for: everything
+        // downstream (the monitor picture, the canvas geometry, how large a drawing
+        // buffer to ask for) comes from its display config.
+        this.filterClass = this.canvas.filterClass;
+        // Back to the mode's own size, undoing any scaling the last one asked for.
+        this.sizeCanvasFor(this.filterClass);
+        this.video.paint();
+        this.setCrtPic();
+        window.setTimeout(() => window.dispatchEvent(new Event("resize")), 1);
+        // Relayout now as well: the monitor picture may have changed shape.
+        window.dispatchEvent(new Event("resize"));
+    }
+
+    sizeCanvasFor(filterClass) {
+        const displayConfig = filterClass.getDisplayConfig();
+        if (
+            this.screenCanvas.width === displayConfig.canvasWidth &&
+            this.screenCanvas.height === displayConfig.canvasHeight
+        )
+            return;
+        this.screenCanvas.width = displayConfig.canvasWidth;
+        this.screenCanvas.height = displayConfig.canvasHeight;
+    }
+
+    // Test which filter is actually in use, not merely whether we got WebGL: a
+    // filter can decline a context that works perfectly well for other modes, in
+    // which case we are quietly left with an unfiltered display.
+    reportAnyFallback(filterClass) {
+        if (this.canvas.filterClass === filterClass) return;
+        const reason = this.canvas.fallbackReason ? ` (${this.canvas.fallbackReason})` : "";
+        const { name } = filterClass.getDisplayConfig();
+        toast(`${name} is not available on this device, so the standard display is in use${reason}.`, {
+            title: "Display",
+            quietKey: "quietDisplayFallback",
+        });
+    }
+
+    /** The monitor picture around the screen follows the filter in use. */
+    setCrtPic() {
+        const config = this.filterClass.getDisplayConfig();
+        const monitorPic = document.getElementById("cub-monitor-pic");
+        monitorPic.src = config.image;
+        monitorPic.alt = config.imageAlt;
+        monitorPic.width = config.imageWidth;
+        monitorPic.height = config.imageHeight;
+    }
+
+    /** This tick's time spent copying frames out of the emulator, and start counting afresh. */
+    takePaintMs() {
+        const ms = this.paintMsThisTick;
+        this.paintMsThisTick = 0;
+        return ms;
+    }
+
+    /** The longest present since last asked, and start counting afresh. */
+    takePresentMs() {
+        const ms = this.presentMsMax;
+        this.presentMsMax = 0;
+        return ms;
+    }
+}

package/src/web/drives.js

@@ -0,0 +1,116 @@
+import { toast } from "./toast.js";
+import { DiscLayout, toSsdOrDsd } from "../disc.js";
+import { toHfe } from "../disc-hfe.js";
+import { downloadDriveData } from "../dom-utils.js";
+import { DriveTracks } from "../url-params.js";
+
+const tracksPerStepFor = (tracks) => (tracks === "40" ? 2 : 1);
+
+/**
+ * The disc drives as the page sees them: putting a disc in, the 40/80 track
+ * switches on the Discs menu, and downloading what is in drive 0.
+ */
+export class Drives {
+    constructor({ fdc, driveTracks, areYouSure }) {
+        this.fdc = fdc;
+        this.driveTracks = driveTracks;
+        this.saidWritesAreNotKept = false;
+
+        for (const item of document.querySelectorAll(".drive-tracks")) {
+            const driveIndex = Number(item.dataset.drive);
+            const drive = fdc?.drives[driveIndex];
+            const fixed = drive ? this.tracksPerStepForDrive(driveIndex) : undefined;
+            if (fixed !== undefined) drive.tracksPerStep = fixed;
+            for (const button of this.driveTracksButtons(driveIndex)) {
+                button.disabled = !drive;
+                button.addEventListener("click", (event) => {
+                    // Setting a switch is not picking from a menu, so leave the menu where it is.
+                    event.stopPropagation();
+                    drive.tracksPerStep = tracksPerStepFor(button.dataset.tracks);
+                    this.showDriveTracks(driveIndex);
+                });
+            }
+            if (drive) this.showDriveTracks(driveIndex);
+        }
+
+        document.getElementById("download-drive-link").addEventListener("click", () => {
+            const disc = this.discToDownload();
+            if (!disc) return;
+            const save = (options) =>
+                downloadDriveData(toSsdOrDsd(disc, options), disc.name, disc.isDoubleSided ? ".dsd" : ".ssd");
+            try {
+                save();
+            } catch (e) {
+                areYouSure(`${e.message} Save anyway, losing what will not fit?`, "Save anyway", "Cancel", () =>
+                    save({ force: true }),
+                );
+            }
+        });
+
+        document.getElementById("download-drive-hfe-link").addEventListener("click", () => {
+            const disc = this.discToDownload();
+            if (!disc) return;
+            downloadDriveData(toHfe(disc), disc.name, ".hfe");
+        });
+    }
+
+    /** @returns {import("../disc.js").Disc|null} the disc in drive 0, saying so when there is nothing to download */
+    discToDownload() {
+        const disc = this.fdc?.drives[0].disc;
+        if (!disc) toast("There is no disc in drive 0 to download.", { title: "Disc" });
+        return disc ?? null;
+    }
+
+    /** @returns {string} the DiscLayout to load an image for this drive with */
+    layoutForDrive(driveIndex) {
+        return this.driveTracks[driveIndex] === DriveTracks.eighty ? DiscLayout.contiguous : DiscLayout.auto;
+    }
+
+    /** @returns {Number|undefined} the tracksPerStep the user fixed this drive at, if they fixed one */
+    tracksPerStepForDrive(driveIndex) {
+        if (this.driveTracks[driveIndex] === DriveTracks.auto) return undefined;
+        return this.driveTracks[driveIndex] === DriveTracks.forty ? 2 : 1;
+    }
+
+    putDiscIn(driveIndex, loadedDisc) {
+        const drive = this.fdc.drives[driveIndex];
+        const fixed = this.tracksPerStepForDrive(driveIndex);
+        const was = drive.tracksPerStep;
+        this.fdc.loadDisc(driveIndex, loadedDisc, fixed);
+        this.showDriveTracks(driveIndex);
+        this.noteUnsavedWrites(loadedDisc);
+        // A switch the user fixed does not move, so anything it does is not news.
+        if (fixed === undefined && drive.tracksPerStep !== was) this.noteDriveTracks(driveIndex, loadedDisc.name);
+    }
+
+    noteUnsavedWrites(loadedDisc) {
+        if (loadedDisc.savesChanges || this.saidWritesAreNotKept) return;
+        loadedDisc.notifyOnFirstTrackWrite(() => {
+            if (this.saidWritesAreNotKept) return;
+            this.saidWritesAreNotKept = true;
+            toast(`Changes to ${loadedDisc.name} are not saved. Use Discs, Download to keep a copy.`, {
+                title: "Disc",
+                quietKey: "quietDiscNotSaved",
+            });
+        });
+    }
+
+    showDriveTracks(driveIndex) {
+        const drive = this.fdc?.drives[driveIndex];
+        if (!drive) return;
+        for (const button of this.driveTracksButtons(driveIndex))
+            button.classList.toggle("active", tracksPerStepFor(button.dataset.tracks) === drive.tracksPerStep);
+    }
+
+    driveTracksButtons(driveIndex) {
+        return document.querySelectorAll(`.drive-tracks[data-drive="${driveIndex}"] [data-tracks]`);
+    }
+
+    noteDriveTracks(driveIndex, discName) {
+        const tracks = this.fdc.drives[driveIndex].tracksPerStep === 2 ? "40" : "80";
+        toast(`Drive ${driveIndex} switched to ${tracks} track for ${discName}.`, {
+            title: "Disc drive",
+            quietKey: "quietDriveTracks",
+        });
+    }
+}