jsbeeb 1.10.0 → 1.11.0

package/package.json

@@ -7,7 +7,7 @@
   "name": "jsbeeb",
   "description": "Emulate a BBC Micro",
   "repository": "git@github.com:mattgodbolt/jsbeeb.git",
-  "version": "1.10.0",
+  "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.12.0"
@@ -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",

package/src/6502.js

@@ -1106,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/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/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/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/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");