jsbeeb 1.9.1 → 1.11.0

package/package.json

@@ -7,10 +7,10 @@
   "name": "jsbeeb",
   "description": "Emulate a BBC Micro",
   "repository": "git@github.com:mattgodbolt/jsbeeb.git",
-  "version": "1.9.1",
+  "version": "1.11.0",
   "//": "If you change the version of Node, it must also be updated at the top of the Dockerfile.",
   "engines": {
-    "node": "22"
+    "node": ">=22.12.0"
   },
   "type": "module",
   "main": "./src/app/app.js",
@@ -31,12 +31,8 @@
     "bootstrap": "^5.3.8",
     "bootswatch": "^5.3.8",
     "event-emitter-es6": "^1.1.5",
-    "fflate": "^0.8.2",
-    "jquery": "^4.0.0",
-    "pako": "^2.1.0",
     "sharp": "^0.34.5",
-    "smoothie": "^1.36.1",
-    "underscore": "^1.13.7"
+    "smoothie": "^1.36.1"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
@@ -51,11 +47,11 @@
     "npm-run-all2": "^8.0.4",
     "pixelmatch": "^7.1.0",
     "prettier": "^3.8.1",
-    "vite": "^7.3.1",
+    "vite": "^8.0.3",
     "vitest": "^4.0.10"
   },
   "optionalDependencies": {
-    "electron": "^40.4.1",
+    "electron": "^41.1.1",
     "electron-builder": "^26.8.1",
     "electron-store": "^11.0.2"
   },

package/src/6502.js

@@ -9,6 +9,7 @@ import { Scheduler } from "./scheduler.js";
 import { TouchScreen } from "./touchscreen.js";
 import { TeletextAdaptor } from "./teletext_adaptor.js";
 import { Filestore } from "./filestore.js";
+import { FakeRelayNoise } from "./relaynoise.js";
 
 const signExtend = utils.signExtend;
 
@@ -573,7 +574,18 @@ function is1MHzAccess(addr) {
 export class Cpu6502 extends Base6502 {
     constructor(
         model,
-        { dbgr, video, soundChip, ddNoise, music5000, cmos, config, econet, cycleAccurate = true } = {},
+        {
+            dbgr,
+            video,
+            soundChip,
+            ddNoise,
+            relayNoise = new FakeRelayNoise(),
+            music5000,
+            cmos,
+            config,
+            econet,
+            cycleAccurate = true,
+        } = {},
     ) {
         super(model, { cycleAccurate });
         this.config = fixUpConfig(config);
@@ -587,6 +599,7 @@ export class Cpu6502 extends Base6502 {
         this.soundChip = soundChip;
         this.music5000 = music5000;
         this.ddNoise = ddNoise;
+        this.relayNoise = relayNoise;
         this.memStatOffsetByIFetchBank = 0;
         this.memStatOffset = 0;
         this.memStat = new Uint8Array(512);
@@ -633,7 +646,7 @@ export class Cpu6502 extends Base6502 {
             getGamepads: this.config.getGamepads,
         });
         this.uservia = new via.UserVia(this, this.scheduler, this.model.isMaster, this.config.userPort);
-        this.acia = new Acia(this, this.soundChip.toneGenerator, this.scheduler, this.touchScreen);
+        this.acia = new Acia(this, this.soundChip.toneGenerator, this.scheduler, this.touchScreen, this.relayNoise);
         this.serial = new Serial(this.acia);
         this.adconverter = new Adc(this.sysvia, this.scheduler);
         this.soundChip.setScheduler(this.scheduler);
@@ -1093,7 +1106,7 @@ export class Cpu6502 extends Base6502 {
         const ramRomOs = this.ramRomOs;
         let data = await utils.loadData(name);
         if (/\.zip/i.test(name)) {
-            data = utils.unzipRomImage(data).data;
+            data = (await utils.unzipRomImage(data)).data;
         }
         ramRomOs.set(data, offset);
     }

package/src/acia.js

@@ -5,10 +5,11 @@
 // http://www.classiccmp.org/dunfield/r/6850.pdf
 
 export class Acia {
-    constructor(cpu, toneGen, scheduler, rs423Handler) {
+    constructor(cpu, toneGen, scheduler, rs423Handler, relayNoise) {
         this.cpu = cpu;
         this.toneGen = toneGen;
         this.rs423Handler = rs423Handler;
+        this.relayNoise = relayNoise;
 
         this.sr = 0x00;
         this.cr = 0x00;
@@ -58,10 +59,12 @@ export class Acia {
     setMotor(on) {
         if (on && !this.motorOn) {
             this.runTape();
+            this.relayNoise.motorOn();
         } else if (!on && this.motorOn) {
             this.toneGen.mute();
             this.runTapeTask.cancel();
             this.setTapeCarrier(false);
+            this.relayNoise.motorOff();
         }
         this.motorOn = on;
     }

package/src/app/electron.js

@@ -3,8 +3,6 @@
 // Electron integration for jsbeeb desktop application.
 // Handles IPC communication for loading disc/tape images and showing modals from Electron's main process.
 
-export let initialise = function () {};
-
 function init(args) {
     const { loadDiscImage, loadTapeImage, loadStateFile, processor, modals, actions, config } = args;
     const api = window.electronAPI;
@@ -66,6 +64,8 @@ function init(args) {
     }
 }
 
-if (typeof window.electronAPI !== "undefined") {
-    initialise = init;
+export function initialise(args) {
+    if (typeof window.electronAPI !== "undefined") {
+        init(args);
+    }
 }

package/src/audio-utils.js

@@ -0,0 +1,13 @@
+"use strict";
+
+/**
+ * Create an AudioContext with a fallback for older WebKit browsers.
+ * @param {AudioContextOptions} [options] - passed to the AudioContext constructor
+ * @returns {AudioContext|null}
+ */
+export function createAudioContext(options) {
+    /*global webkitAudioContext*/
+    if (typeof AudioContext !== "undefined") return new AudioContext(options);
+    if (typeof webkitAudioContext !== "undefined") return new webkitAudioContext(options);
+    return null;
+}

package/src/bem-snapshot.js

@@ -1,4 +1,5 @@
 "use strict";
+import { decompress } from "./utils.js";
 
 // B-em snapshot format parser (versions 1 and 3).
 // v1 (BEMSNAP1): Fixed-size 327,885 byte packed struct. Reference: beebjit state.c
@@ -434,39 +435,6 @@ function readString(data, pos) {
     return str;
 }
 
-async function inflateRaw(compressedData) {
-    // Use DecompressionStream (available in modern browsers and Node 18+)
-    if (typeof DecompressionStream !== "undefined") {
-        const ds = new DecompressionStream("deflate");
-        const writer = ds.writable.getWriter();
-        const reader = ds.readable.getReader();
-        const chunks = [];
-
-        // Start reading before writing to avoid backpressure deadlock
-        const readPromise = (async () => {
-            for (;;) {
-                const { done, value } = await reader.read();
-                if (done) break;
-                chunks.push(value);
-            }
-        })();
-
-        await writer.write(compressedData);
-        await writer.close();
-        await readPromise;
-
-        const totalLength = chunks.reduce((sum, c) => sum + c.length, 0);
-        const result = new Uint8Array(totalLength);
-        let offset = 0;
-        for (const chunk of chunks) {
-            result.set(chunk, offset);
-            offset += chunk.length;
-        }
-        return result;
-    }
-    throw new Error("Zlib decompression not available (need DecompressionStream API)");
-}
-
 function parseBemV3(buffer) {
     const bytes = new Uint8Array(buffer);
     let offset = 8; // Skip "BEMSNAP3" signature
@@ -523,7 +491,7 @@ function parseBemV3(buffer) {
     if (memSection) {
         // Memory is zlib-compressed; decompression is async.
         // Decompressed layout: 2 bytes (fe30, fe34) + 64KB RAM + 256KB ROM
-        return inflateRaw(memSection.data).then((memData) => {
+        return decompress(memSection.data, "deflate").then((memData) => {
             cpuState.fe30 = memData[0];
             cpuState.fe34 = memData[1];
             const ramStart = 2;

package/src/config.js

@@ -1,5 +1,4 @@
 "use strict";
-import $ from "jquery";
 import EventEmitter from "event-emitter-es6";
 import { findModel } from "./models.js";
 import { getFilterForMode } from "./canvas.js";
@@ -12,8 +11,8 @@ export class Config extends EventEmitter {
         this.changed = {};
         this.model = null;
         this.coProcessor = null;
-        const $configuration = document.getElementById("configuration");
-        $configuration.addEventListener("show.bs.modal", () => {
+        const configuration = document.getElementById("configuration");
+        configuration.addEventListener("show.bs.modal", () => {
             this.changed = {};
             this.setDropdownText(this.model.name);
             this.set65c02(this.model.tube);
@@ -23,116 +22,122 @@ export class Config extends EventEmitter {
             this.setEconet(this.model.hasEconet);
         });
 
-        $configuration.addEventListener("hide.bs.modal", () => {
+        configuration.addEventListener("hide.bs.modal", () => {
             this.onClose(this.changed);
             if (Object.keys(this.changed).length > 0) {
                 this.emit("settings-changed", this.changed);
             }
         });
 
-        $(".model-menu a").on("click", (e) => {
-            this.changed.model = $(e.target).attr("data-target");
-            this.setDropdownText($(e.target).text());
-        });
+        for (const link of document.querySelectorAll(".model-menu a")) {
+            link.addEventListener("click", (e) => {
+                this.changed.model = e.target.dataset.target;
+                this.setDropdownText(e.target.textContent);
+            });
+        }
 
-        $("#65c02").on("click", () => {
-            this.changed.coProcessor = $("#65c02").prop("checked");
-            $("#tubeCpuMultiplier").prop("disabled", !$("#65c02").prop("checked"));
+        document.getElementById("65c02").addEventListener("click", () => {
+            this.changed.coProcessor = document.getElementById("65c02").checked;
+            document.getElementById("tubeCpuMultiplier").disabled = !document.getElementById("65c02").checked;
         });
 
-        $("#tubeCpuMultiplier").on("input", () => {
-            const val = parseInt($("#tubeCpuMultiplier").val(), 10);
-            $("#tubeCpuMultiplierValue").text(val);
+        document.getElementById("tubeCpuMultiplier").addEventListener("input", () => {
+            const val = parseInt(document.getElementById("tubeCpuMultiplier").value, 10);
+            document.getElementById("tubeCpuMultiplierValue").textContent = val;
             this.changed.tubeCpuMultiplier = val;
         });
 
-        $("#hasTeletextAdaptor").on("click", () => {
-            this.changed.hasTeletextAdaptor = $("#hasTeletextAdaptor").prop("checked");
+        document.getElementById("hasTeletextAdaptor").addEventListener("click", () => {
+            this.changed.hasTeletextAdaptor = document.getElementById("hasTeletextAdaptor").checked;
         });
 
-        $("#hasEconet").on("click", () => {
-            this.changed.hasEconet = $("#hasEconet").prop("checked");
+        document.getElementById("hasEconet").addEventListener("click", () => {
+            this.changed.hasEconet = document.getElementById("hasEconet").checked;
         });
 
-        $("#hasMusic5000").on("click", () => {
-            this.changed.hasMusic5000 = $("#hasMusic5000").prop("checked");
+        document.getElementById("hasMusic5000").addEventListener("click", () => {
+            this.changed.hasMusic5000 = document.getElementById("hasMusic5000").checked;
         });
 
-        $(".keyboard-menu a").on("click", (e) => {
-            const keyLayout = $(e.target).attr("data-target");
-            this.changed.keyLayout = keyLayout;
-            this.setKeyLayout(keyLayout);
-        });
+        for (const link of document.querySelectorAll(".keyboard-menu a")) {
+            link.addEventListener("click", (e) => {
+                const keyLayout = e.target.dataset.target;
+                this.changed.keyLayout = keyLayout;
+                this.setKeyLayout(keyLayout);
+            });
+        }
 
-        $(".mic-channel-option").on("click", (e) => {
-            const channelString = $(e.target).data("channel");
-            const channel = channelString === "" ? undefined : parseInt($(e.target).data("channel"), 10);
-            this.changed.microphoneChannel = channel;
-            this.setMicrophoneChannel(channel);
-        });
+        for (const option of document.querySelectorAll(".mic-channel-option")) {
+            option.addEventListener("click", (e) => {
+                const channelString = e.target.dataset.channel;
+                const channel = channelString === "" ? undefined : parseInt(channelString, 10);
+                this.changed.microphoneChannel = channel;
+                this.setMicrophoneChannel(channel);
+            });
+        }
 
-        $("#mouseJoystickEnabled").on("click", () => {
-            this.changed.mouseJoystickEnabled = $("#mouseJoystickEnabled").prop("checked");
+        document.getElementById("mouseJoystickEnabled").addEventListener("click", () => {
+            this.changed.mouseJoystickEnabled = document.getElementById("mouseJoystickEnabled").checked;
         });
 
-        $("#speechOutput").on("click", () => {
-            this.changed.speechOutput = $("#speechOutput").prop("checked");
+        document.getElementById("speechOutput").addEventListener("click", () => {
+            this.changed.speechOutput = document.getElementById("speechOutput").checked;
         });
 
-        $(".display-mode-option").on("click", (e) => {
-            const mode = $(e.target).data("mode");
-            this.changed.displayMode = mode;
-            this.setDisplayMode(mode);
-            this.onChange({ displayMode: mode });
-        });
+        for (const option of document.querySelectorAll(".display-mode-option")) {
+            option.addEventListener("click", (e) => {
+                const mode = e.target.dataset.mode;
+                this.changed.displayMode = mode;
+                this.setDisplayMode(mode);
+                this.onChange({ displayMode: mode });
+            });
+        }
     }
 
     setMicrophoneChannel(channel) {
-        if (channel !== undefined) {
-            $(".mic-channel-text").text(`Channel ${channel}`);
-        } else {
-            $(".mic-channel-text").text("Disabled");
-        }
+        const text = channel !== undefined ? `Channel ${channel}` : "Disabled";
+        for (const el of document.querySelectorAll(".mic-channel-text")) el.textContent = text;
     }
 
     setMouseJoystickEnabled(enabled) {
-        $("#mouseJoystickEnabled").prop("checked", !!enabled);
+        document.getElementById("mouseJoystickEnabled").checked = !!enabled;
     }
 
     setSpeechOutput(enabled) {
-        $("#speechOutput").prop("checked", !!enabled);
+        document.getElementById("speechOutput").checked = !!enabled;
     }
 
     setDisplayMode(mode) {
         const config = getFilterForMode(mode).getDisplayConfig();
-        $(".display-mode-text").text(config.name);
+        for (const el of document.querySelectorAll(".display-mode-text")) el.textContent = config.name;
     }
 
     setModel(modelName) {
         this.model = findModel(modelName);
-        $(".bbc-model").text(this.model.name);
+        for (const el of document.querySelectorAll(".bbc-model")) el.textContent = this.model.name;
     }
 
     setKeyLayout(keyLayout) {
-        $(".keyboard-layout").text(keyLayout[0].toUpperCase() + keyLayout.substring(1));
+        const text = keyLayout[0].toUpperCase() + keyLayout.substring(1);
+        for (const el of document.querySelectorAll(".keyboard-layout")) el.textContent = text;
     }
 
     set65c02(enabled) {
         enabled = !!enabled;
-        $("#65c02").prop("checked", enabled);
+        document.getElementById("65c02").checked = enabled;
         this.model.tube = enabled ? findModel("Tube65c02") : null;
-        $("#tubeCpuMultiplier").prop("disabled", !enabled);
+        document.getElementById("tubeCpuMultiplier").disabled = !enabled;
     }
 
     setTubeCpuMultiplier(value) {
         this.tubeCpuMultiplier = value;
-        $("#tubeCpuMultiplier").val(value);
-        $("#tubeCpuMultiplierValue").text(value);
+        document.getElementById("tubeCpuMultiplier").value = value;
+        document.getElementById("tubeCpuMultiplierValue").textContent = value;
     }
 
     setEconet(enabled) {
         enabled = !!enabled;
-        $("#hasEconet").prop("checked", enabled);
+        document.getElementById("hasEconet").checked = enabled;
         this.model.hasEconet = enabled;
 
         if (enabled && this.model.isMaster) {
@@ -142,20 +147,21 @@ export class Config extends EventEmitter {
 
     setMusic5000(enabled) {
         enabled = !!enabled;
-        $("#hasMusic5000").prop("checked", enabled);
+        document.getElementById("hasMusic5000").checked = enabled;
         this.model.hasMusic5000 = enabled;
         this.addRemoveROM("ample.rom", enabled);
     }
 
     setTeletext(enabled) {
         enabled = !!enabled;
-        $("#hasTeletextAdaptor").prop("checked", enabled);
+        document.getElementById("hasTeletextAdaptor").checked = enabled;
         this.model.hasTeletextAdaptor = enabled;
         this.addRemoveROM("ats-3.0.rom", enabled);
     }
 
     setDropdownText(modelName) {
-        $("#bbc-model-dropdown .bbc-model").text(modelName);
+        const el = document.querySelector("#bbc-model-dropdown .bbc-model");
+        if (el) el.textContent = modelName;
     }
 
     addRemoveROM(romName, required) {

package/src/ddnoise.js

@@ -1,26 +1,20 @@
 "use strict";
-import * as utils from "./utils.js";
-import _ from "underscore";
+import { SamplePlayer } from "./sample-player.js";
 
-const IDLE = 0;
-const SPIN_UP = 1;
-const SPINNING = 2;
-const VOLUME = 0.25;
+const Idle = 0;
+const SpinUp = 1;
+const Spinning = 2;
+const Volume = 0.25;
 
-export class DdNoise {
-    constructor(context) {
-        this.context = context;
-        this.sounds = {};
-        this.state = IDLE;
+export class DdNoise extends SamplePlayer {
+    constructor(context, destination) {
+        super(context, destination, Volume);
+        this.state = Idle;
         this.motor = null;
-        this.gain = context.createGain();
-        this.gain.gain.value = VOLUME;
-        this.gain.connect(context.destination);
-        // workaround for older safaris that GC sounds when they're playing...
-        this.playing = [];
     }
+
     async initialise() {
-        const sounds = await loadSounds(this.context, {
+        await this.loadSounds({
             motorOn: "sounds/disc525/motoron.wav",
             motorOff: "sounds/disc525/motoroff.wav",
             motor: "sounds/disc525/motor.wav",
@@ -29,63 +23,35 @@ export class DdNoise {
             seek2: "sounds/disc525/seek2.wav",
             seek3: "sounds/disc525/seek3.wav",
         });
-        this.sounds = sounds;
-    }
-    oneShot(sound) {
-        const duration = sound.duration;
-        const context = this.context;
-        if (context.state !== "running") return duration;
-        const source = context.createBufferSource();
-        source.buffer = sound;
-        source.connect(this.gain);
-        source.start();
-        return duration;
-    }
-    play(sound, loop) {
-        if (this.context.state !== "running") return Promise.reject();
-        return new Promise((resolve) => {
-            const source = this.context.createBufferSource();
-            source.loop = !!loop;
-            source.buffer = sound;
-            source.connect(this.gain);
-            source.onended = () => {
-                this.playing = _.without(this.playing, source);
-                if (!source.loop) resolve();
-            };
-            source.start();
-            this.playing.push(source);
-            if (source.loop) {
-                resolve(source);
-            }
-        });
     }
+
     spinUp() {
-        if (this.state === SPINNING || this.state === SPIN_UP) return;
-        this.state = SPIN_UP;
+        if (this.state === Spinning || this.state === SpinUp) return;
+        this.state = SpinUp;
         this.play(this.sounds.motorOn).then(
             () => {
                 // Handle race: we may have had spinDown() called on us before the
                 // spinUp() initial sound finished playing.
-                if (this.state === IDLE) {
-                    return;
-                }
+                if (this.state === Idle) return;
                 this.play(this.sounds.motor, true).then((source) => {
                     this.motor = source;
-                    this.state = SPINNING;
+                    this.state = Spinning;
                 });
             },
             () => {},
         );
     }
+
     spinDown() {
-        if (this.state === IDLE) return;
-        this.state = IDLE;
+        if (this.state === Idle) return;
+        this.state = Idle;
         if (this.motor) {
             this.motor.stop();
             this.motor = null;
             this.oneShot(this.sounds.motorOff);
         }
     }
+
     seek(diff) {
         if (diff < 0) diff = -diff;
         if (diff === 0) return 0;
@@ -94,37 +60,9 @@ export class DdNoise {
         else if (diff <= 40) return this.oneShot(this.sounds.seek2);
         else return this.oneShot(this.sounds.seek3);
     }
-    mute() {
-        this.gain.gain.value = 0;
-    }
-    unmute() {
-        this.gain.gain.value = VOLUME;
-    }
-}
-
-async function loadSounds(context, sounds) {
-    const loaded = await Promise.all(
-        _.map(sounds, async (sound) => {
-            // Safari doesn't support the Promise stuff directly, so we create
-            // our own Promise here.
-            const data = await utils.loadData(sound);
-            return await new Promise((resolve) => {
-                context.decodeAudioData(data.buffer, (decodedData) => {
-                    resolve(decodedData);
-                });
-            });
-        }),
-    );
-    const keys = _.keys(sounds);
-    const result = {};
-    for (let i = 0; i < keys.length; ++i) {
-        result[keys[i]] = loaded[i];
-    }
-    return result;
 }
 
 export class FakeDdNoise {
-    constructor() {}
     seek() {
         return 0;
     }

package/src/dom-utils.js

@@ -0,0 +1,32 @@
+"use strict";
+
+// Minimal DOM helpers to replace jQuery usage.
+
+export function show(el) {
+    el.style.display = "";
+}
+
+export function hide(el) {
+    el.style.display = "none";
+}
+
+export function toggle(el, visible) {
+    el.style.display = visible ? "" : "none";
+}
+
+export function fadeIn(el, duration = 400) {
+    el.style.display = "";
+    el.style.transition = `opacity ${duration}ms`;
+    el.style.opacity = "0";
+    // Force reflow so the transition triggers.
+    void el.offsetHeight;
+    el.style.opacity = "1";
+}
+
+export function fadeOut(el, duration = 400) {
+    el.style.transition = `opacity ${duration}ms`;
+    el.style.opacity = "0";
+    setTimeout(() => {
+        if (el.style.opacity === "0") el.style.display = "none";
+    }, duration);
+}

package/src/fake6502.js

@@ -5,6 +5,7 @@ import { FakeVideo } from "./video.js";
 import { FakeSoundChip } from "./soundchip.js";
 import { findModel, TEST_6502, TEST_65C02, TEST_65C12 } from "./models.js";
 import { FakeDdNoise } from "./ddnoise.js";
+import { FakeRelayNoise } from "./relaynoise.js";
 import { Cpu6502 } from "./6502.js";
 import { Cmos } from "./cmos.js";
 import { FakeMusic5000 } from "./music5000.js";
@@ -24,6 +25,7 @@ export function fake6502(model, opts) {
         video: opts.video || fakeVideo,
         soundChip: opts.soundChip || soundChip,
         ddNoise: new FakeDdNoise(),
+        relayNoise: new FakeRelayNoise(),
         music5000: new FakeMusic5000(),
         cmos: new Cmos(),
         cycleAccurate: opts.cycleAccurate,

package/src/google-drive.js

@@ -1,7 +1,6 @@
 "use strict";
 
-import _ from "underscore";
-import * as utils from "./utils.js";
+import { debounce, uint8ArrayToString } from "./utils.js";
 import { discFor } from "./fdc.js";
 
 const MIME_TYPE = "application/vnd.jsbeeb.disc-image";
@@ -112,7 +111,7 @@ export class GoogleDriveLoader {
         const metadata = { name, mimeType: MIME_TYPE };
         if (!idOrNone) metadata.parents = [this.parentFolderId];
 
-        const base64Data = btoa(utils.uint8ArrayToString(data));
+        const base64Data = btoa(uint8ArrayToString(data));
         const multipartRequestBody =
             `${delimiter}Content-Type: application/json\r\n\r\n` +
             `${JSON.stringify(metadata)}${delimiter}` +
@@ -141,7 +140,7 @@ export class GoogleDriveLoader {
         const id = meta.id;
         if (meta.capabilities.canEdit) {
             console.log("Making editable disc");
-            flusher = _.debounce(async (changedData) => {
+            flusher = debounce(async (changedData) => {
                 console.log("Data changed...");
                 await this.saveFile(name, changedData, id);
                 console.log("Saved ok");