jsbeeb 1.16.0 → 1.17.1

package/src/disc.js

@@ -527,6 +527,13 @@ class Side {
     }
 }
 
+/** How an image's tracks are laid out on the surface, and whether that is for the loader to decide. */
+export const DiscLayout = Object.freeze({
+    auto: "auto",
+    contiguous: "contiguous",
+    expanded40: "expanded40",
+});
+
 export class DiscConfig {
     constructor() {
         // TODO is this even useful?
@@ -553,6 +560,74 @@ class SsdFormat {
     static get tracksPerDisc() {
         return 80;
     }
+
+    static get trackSize() {
+        return SsdFormat.sectorSize * SsdFormat.sectorsPerTrack;
+    }
+}
+
+/** @returns {Number} how many logical tracks of `data` hold anything, ignoring a run of trailing zeros */
+function tracksWithData(data, numSides) {
+    let lastUsed = data.length - 1;
+    while (lastUsed >= 0 && data[lastUsed] === 0) lastUsed--;
+    return Math.floor(lastUsed / (SsdFormat.trackSize * numSides)) + 1;
+}
+
+// The DFS catalogue is the first two sectors of a side. Sector 1 holds how many files there are and
+// how many sectors the disc has.
+const DfsEntryCountOffset = 0x105;
+const DfsSectorCountOffset = 0x106;
+const DfsEntrySize = 8;
+const DfsMaxEntries = 31;
+
+/**
+ * Whether an SSD or DSD image was written by a 40 track drive. Only its catalogue can say: images
+ * are routinely padded out or cut short, so their size means nothing.
+ *
+ * @param {Uint8Array} data
+ * @param {boolean} isDsd
+ * @returns {{is40Track: boolean, reason: string}}
+ */
+export function sniffDfsLayout(data, isDsd) {
+    const contiguous = (reason) => ({ is40Track: false, reason });
+    if (data.length < 2 * SsdFormat.sectorSize) return contiguous("it is smaller than a catalogue");
+    const entryBytes = data[DfsEntryCountOffset];
+    if (entryBytes % DfsEntrySize !== 0 || entryBytes > DfsMaxEntries * DfsEntrySize)
+        return contiguous(`its catalogue claims ${entryBytes} bytes of file entries`);
+    const sectors = ((data[DfsSectorCountOffset] & 3) << 8) | data[DfsSectorCountOffset + 1];
+    const reason = `its catalogue claims ${sectors} sectors`;
+    const fortyTrackSectors = (SsdFormat.tracksPerDisc / 2) * SsdFormat.sectorsPerTrack;
+    if (sectors === 0 || sectors > fortyTrackSectors) return contiguous(reason);
+    const tracks = tracksWithData(data, isDsd ? 2 : 1);
+    if (tracks > IbmDiscFormat.tracksPerDisc / 2) return contiguous(`it holds data as far as track ${tracks - 1}`);
+    return { is40Track: true, reason };
+}
+
+// One track could match by luck; a disc's worth of them could not.
+const MinDoubleSteppedTracks = 4;
+
+/**
+ * Whether a surface holds a 40 track format, going by where its sectors say they are: a track
+ * written by a 48 tpi head sits at twice the number its own headers claim, with nothing readable
+ * on the tracks between. Only a flux image can be asked this, since for any other format the
+ * layout is the loader's own doing.
+ *
+ * @param {Disc} disc
+ * @returns {{is40Track: boolean, reason: string}}
+ */
+export function sniffSurfaceLayout(disc) {
+    let doubleStepped = 0;
+    // Both heads move together, so a disc has one pitch and the side that boots can speak for it.
+    // Track 0 is where it claims to be at either pitch, so it says nothing.
+    for (let trackNum = 1; trackNum < disc.tracksUsed; ++trackNum) {
+        const sectors = disc.getTrack(false, trackNum).findSectorIds(() => {});
+        if (!sectors.length) continue;
+        if (trackNum & 1) return { is40Track: false, reason: `track ${trackNum} holds sectors of its own` };
+        if (sectors.some((sector) => sector.trackNumber === trackNum / 2)) doubleStepped++;
+    }
+    if (doubleStepped < MinDoubleSteppedTracks)
+        return { is40Track: false, reason: `only ${doubleStepped} tracks sit at twice their own number` };
+    return { is40Track: true, reason: `${doubleStepped} tracks sit at twice the number their sectors claim` };
 }
 
 /**
@@ -576,10 +651,19 @@ export function loadSsd(disc, data, isDsd, onChange) {
         throw new Error("SSD file is too large");
     }
 
+    disc.is40Track = disc.config.expandTo80;
+    const trackStep = disc.is40Track ? 2 : 1;
+    // Tracks twice as far apart are half as many, and an image can run past the last of them as
+    // far as the surface has room for.
+    const numTracks = Math.min(
+        IbmDiscFormat.tracksPerDisc / trackStep,
+        Math.max(SsdFormat.tracksPerDisc / trackStep, tracksWithData(data, numSides)),
+    );
+
     let offset = 0;
-    for (let track = 0; track < SsdFormat.tracksPerDisc; ++track) {
+    for (let track = 0; track < numTracks; ++track) {
         for (let side = 0; side < numSides; ++side) {
-            const trackBuilder = disc.buildTrack(side === 1, track);
+            const trackBuilder = disc.buildTrack(side === 1, track * trackStep);
             // Sync pattern at start of track, as the index pulse starts, aka GAP 5.
             trackBuilder
                 .appendRepeatFmByte(0xff, IbmDiscFormat.stdGap1FFs)
@@ -631,14 +715,12 @@ export function loadSsd(disc, data, isDsd, onChange) {
         dataCopy.set(data);
         disc.addTrackWriteListener(
             /** @param {Track} trackObj  */
-            (side, trackNum, trackObj) => {
-                const trackOffset =
-                    SsdFormat.sectorSize * SsdFormat.sectorsPerTrack * (trackNum * numSides + (side ? 1 : 0));
+            (side, _trackNum, trackObj) => {
                 for (const sector of trackObj.findSectors())
-                    if (!sectorShortfall(sector, trackNum))
-                        dataCopy.set(sector.sectorData, trackOffset + sector.sectorNumber * SsdFormat.sectorSize);
+                    if (!sectorShortfall(sector)) dataCopy.set(sector.sectorData, ssdOffsetOf(sector, side, numSides));
                 onChange(dataCopy);
             },
+            true,
         );
     }
     return disc;
@@ -720,17 +802,30 @@ export function loadAdf(disc, data, isDsd) {
 }
 
 /** Why a sector will not fit in an SSD or DSD image, or null if it will. */
-function sectorShortfall(sector, trackNum) {
+function sectorShortfall(sector) {
     if (sector.hasDataCrcError || sector.hasHeaderCrcError) return "with a CRC error";
     // A header whose data mark never arrives leaves the sector with nothing to write.
     if (!sector.sectorData) return "with no data";
     if (sector.sectorNumber >= SsdFormat.sectorsPerTrack)
         return `numbered past the ${SsdFormat.sectorsPerTrack} a track holds`;
     if (sector.sectorData.length !== SsdFormat.sectorSize) return `not ${SsdFormat.sectorSize} bytes`;
-    if (trackNum >= SsdFormat.tracksPerDisc) return `past track ${SsdFormat.tracksPerDisc}`;
+    if (sector.trackNumber >= SsdFormat.tracksPerDisc) return `past track ${SsdFormat.tracksPerDisc}`;
     return null;
 }
 
+/**
+ * Where a sector belongs in an SSD or DSD image, which is the track its own header claims rather
+ * than the one it sits on.
+ *
+ * @param {Sector} sector
+ * @param {boolean} isSideUpper
+ * @param {Number} numSides
+ */
+function ssdOffsetOf(sector, isSideUpper, numSides) {
+    const track = sector.trackNumber * numSides + (isSideUpper ? 1 : 0);
+    return track * SsdFormat.trackSize + sector.sectorNumber * SsdFormat.sectorSize;
+}
+
 /**
  * SSD and DSD images hold sector contents and nothing else, so anything a DFS sector could not
  * have held is lost. Copy protection usually shows up as one of these.
@@ -743,7 +838,7 @@ export function ssdOrDsdShortfalls(disc) {
     for (let trackNum = 0; trackNum < disc.tracksUsed; ++trackNum) {
         for (const upper of disc.isDoubleSided ? [false, true] : [false]) {
             for (const sector of disc.getTrack(upper, trackNum).findSectors()) {
-                const shortfall = sectorShortfall(sector, trackNum);
+                const shortfall = sectorShortfall(sector);
                 if (shortfall) counts.set(shortfall, (counts.get(shortfall) ?? 0) + 1);
             }
         }
@@ -770,22 +865,19 @@ export function toSsdOrDsd(disc, { force = false } = {}) {
             );
     }
     const numSides = disc.isDoubleSided ? 2 : 1;
-    const result = new Uint8Array(
-        numSides * SsdFormat.tracksPerDisc * SsdFormat.sectorsPerTrack * SsdFormat.sectorSize,
-    );
-    let offset = 0;
+    const result = new Uint8Array(numSides * SsdFormat.tracksPerDisc * SsdFormat.trackSize);
+    let numTracks = 0;
     for (let trackNum = 0; trackNum < disc.tracksUsed; ++trackNum) {
         for (let side = 0; side < numSides; ++side) {
             const trackObj = disc.getTrack(side === 1, trackNum);
             for (const sector of trackObj.findSectors()) {
-                if (sectorShortfall(sector, trackNum)) continue;
-                const sectorOffset = offset + sector.sectorNumber * SsdFormat.sectorSize;
-                for (let x = 0; x < SsdFormat.sectorSize; ++x) result[sectorOffset + x] = sector.sectorData[x];
+                if (sectorShortfall(sector)) continue;
+                result.set(sector.sectorData, ssdOffsetOf(sector, side === 1, numSides));
+                numTracks = Math.max(numTracks, sector.trackNumber + 1);
             }
-            offset += SsdFormat.sectorsPerTrack * SsdFormat.sectorSize;
         }
     }
-    return result.slice(0, offset);
+    return result.slice(0, numTracks * numSides * SsdFormat.trackSize);
 }
 
 export class Disc {
@@ -810,8 +902,11 @@ export class Disc {
         this.dirtyTrack = -1;
         this.tracksUsed = 0;
         this.isDoubleSided = false;
+        // Whether the surface holds a 48 tpi layout, which a drive reads by double stepping.
+        this.is40Track = false;
 
         this._trackWriteListeners = new Set();
+        this._savingListeners = new Set();
         this.isWriteable = isWriteable;
 
         // Track which tracks have been written since the last snapshot.
@@ -838,14 +933,32 @@ export class Disc {
         this.initSurface(0);
     }
 
-    /** @param {function(boolean, Number, Track): void} listener called once per flushed track */
-    addTrackWriteListener(listener) {
+    /**
+     * @param {function(boolean, Number, Track): void} listener called once per flushed track
+     * @param {boolean} [savesChanges] whether the listener puts the image somewhere it is read back from
+     */
+    addTrackWriteListener(listener, savesChanges = false) {
         this._trackWriteListeners.add(listener);
+        if (savesChanges) this._savingListeners.add(listener);
+    }
+
+    get savesChanges() {
+        return this._savingListeners.size > 0;
     }
 
     /** @param {function(boolean, Number, Track): void} listener */
     removeTrackWriteListener(listener) {
         this._trackWriteListeners.delete(listener);
+        this._savingListeners.delete(listener);
+    }
+
+    /** @param {function(): void} listener called once, when a track is first written to this disc */
+    notifyOnFirstTrackWrite(listener) {
+        const onFirstWrite = () => {
+            this.removeTrackWriteListener(onFirstWrite);
+            listener();
+        };
+        this.addTrackWriteListener(onFirstWrite);
     }
 
     /**
@@ -944,10 +1057,11 @@ export class Disc {
         // console.log(`wrote to ${track}:${position * 32}`);
     }
 
+    /** @returns {?{isSideUpper: boolean, trackNum: Number}} the track written, if there was one */
     flushWrites() {
         if (!this.isDirty) {
             if (this.dirtySide !== -1 || this.dirtyTrack !== -1) throw new Error("Bad state in disc dirty tracking");
-            return;
+            return null;
         }
 
         const dirtySide = this.dirtySide;
@@ -958,6 +1072,24 @@ export class Disc {
         const trackObj = this.getTrack(dirtySide, dirtyTrack);
         this.setTrackUsed(dirtySide, dirtyTrack);
         for (const listener of this._trackWriteListeners) listener(dirtySide, dirtyTrack, trackObj);
+        return { isSideUpper: dirtySide, trackNum: dirtyTrack };
+    }
+
+    /**
+     * Leave a track with no flux on it at all, as an erase head does.
+     *
+     * @param {boolean} isSideUpper
+     * @param {Number} trackNum
+     */
+    eraseTrack(isSideUpper, trackNum) {
+        const trackObj = this.getTrack(isSideUpper, trackNum);
+        trackObj.pulses2Us.fill(0);
+        trackObj.length = IbmDiscFormat.bytesPerTrack;
+        const dirtyKey = trackNum | (isSideUpper ? 0x100 : 0);
+        this._snapshotDirtyTracks.add(dirtyKey);
+        this._everDirtyTracks.add(dirtyKey);
+        this.setTrackUsed(isSideUpper, trackNum);
+        for (const listener of this._trackWriteListeners) listener(isSideUpper, trackNum, trackObj);
     }
 
     /**

package/src/fdc.js

@@ -1,6 +1,15 @@
 // Floppy disc assorted utils.
-import { Disc, DiscConfig, loadAdf, loadSsd, toSsdOrDsd } from "./disc.js";
-import { loadHfe, toHfe } from "./disc-hfe.js";
+import {
+    Disc,
+    DiscConfig,
+    DiscLayout,
+    loadAdf,
+    loadSsd,
+    sniffDfsLayout,
+    sniffSurfaceLayout,
+    toSsdOrDsd,
+} from "./disc.js";
+import { loadHfe, sniffHfeLayout, toHfe } from "./disc-hfe.js";
 import * as utils from "./utils.js";
 
 export function load(name) {
@@ -19,15 +28,29 @@ export class DiscType {
      * @param {function(Disc, Uint8Array, function?): Disc} options.loader - Function to load this disc type.
      * @param {function(Disc): Uint8Array} options.saver - Function to save this disc type.
      * @param {function(Uint8Array, string): void|null} [options.nameSetter] - Function to set the name/label in the disc image, or null if not supported.
+     * @param {function(Uint8Array): {is40Track: boolean, reason: string}} [options.layoutSniffer] - Function to tell a 40 track image from an 80 track one, for formats that carry the evidence.
+     * @param {boolean} [options.isFluxImage] - Whether the image is a picture of the surface rather than a list of the sectors on it.
      * @param {boolean} [options.isDoubleSided] - Whether the disc format is double-sided.
      * @param {boolean} [options.isDoubleDensity] - Whether the disc format is double density.
      * @param {number|undefined} [options.byteSize] - The size in bytes of this disc format, or undefined if variable.
      */
-    constructor({ extension, loader, saver, nameSetter, isDoubleSided, isDoubleDensity, byteSize } = {}) {
+    constructor({
+        extension,
+        loader,
+        saver,
+        nameSetter = null,
+        layoutSniffer,
+        isFluxImage,
+        isDoubleSided,
+        isDoubleDensity,
+        byteSize,
+    } = {}) {
         this._extension = extension;
         this._loader = loader;
         this._saver = saver;
         this._nameSetter = nameSetter;
+        this._layoutSniffer = layoutSniffer;
+        this._isFluxImage = isFluxImage;
         this._isDoubleSided = isDoubleSided;
         this._isDoubleDensity = isDoubleDensity;
         this._byteSize = byteSize;
@@ -97,6 +120,24 @@ export class DiscType {
         return this._nameSetter !== null;
     }
 
+    /**
+     * Whether the image holds a picture of the surface, so that where its tracks sit is a fact
+     * about the disc rather than a decision the loader made.
+     * @returns {boolean}
+     */
+    get isFluxImage() {
+        return !!this._isFluxImage;
+    }
+
+    /**
+     * What an image of this type says about its track layout.
+     * @param {Uint8Array} data - The disc image data
+     * @returns {?{is40Track: boolean, reason: string}} null for formats that cannot say
+     */
+    sniffLayout(data) {
+        return this._layoutSniffer ? this._layoutSniffer(data) : null;
+    }
+
     /**
      * Sets the disc name in the disc data using the format-specific setter
      * @param {Uint8Array} data - The disc data to modify
@@ -114,8 +155,9 @@ export class DiscType {
 // Standard sizes
 const SsdByteSize = 80 * 10 * 256; // 80 tracks, 10 sectors, 256 bytes/sector
 const DsdByteSize = SsdByteSize * 2; // Double-sided
-const AdfsLargeByteSize = 2 * 80 * 16 * 256; // Double-sided, 16 sectors/track
-const AdfsSmallByteSize = 80 * 16 * 256; // Single-sided, 16 sectors/track
+// ADFS comes in three sizes: S is 40 tracks on one side, M is 80 on one, L is 80 on both.
+const AdfsMediumByteSize = 80 * 16 * 256;
+const AdfsLargeByteSize = AdfsMediumByteSize * 2;
 
 /**
  * Set the name in a DFS disc image (SSD/DSD format)
@@ -133,6 +175,8 @@ const hfeDiscType = new DiscType({
     extension: ".hfe",
     loader: loadHfe,
     saver: toHfe,
+    layoutSniffer: sniffHfeLayout,
+    isFluxImage: true,
     isDoubleSided: true,
     isDoubleDensity: true,
 });
@@ -152,7 +196,7 @@ const adlDiscType = new DiscType({
     byteSize: AdfsLargeByteSize,
 });
 
-// ADFS (Small) discs are standard ADFS (non-double) density, single sided
+// ADFS M and S: single sided, and sized as the larger of the two.
 const adfDiscType = new DiscType({
     extension: ".adf",
     loader: (disc, data, _onChange) => {
@@ -164,7 +208,7 @@ const adfDiscType = new DiscType({
     },
     isDoubleSided: false,
     isDoubleDensity: true,
-    byteSize: AdfsSmallByteSize,
+    byteSize: AdfsMediumByteSize,
 });
 
 // DSD (Double-sided disc)
@@ -173,6 +217,7 @@ const dsdDiscType = new DiscType({
     loader: (disc, data, onChange) => loadSsd(disc, data, true, onChange),
     saver: toSsdOrDsd,
     nameSetter: setDfsDiscName,
+    layoutSniffer: (data) => sniffDfsLayout(data, true),
     isDoubleSided: true,
     isDoubleDensity: false,
     byteSize: DsdByteSize,
@@ -184,6 +229,7 @@ const ssdDiscType = new DiscType({
     loader: (disc, data, onChange) => loadSsd(disc, data, false, onChange),
     saver: toSsdOrDsd,
     nameSetter: setDfsDiscName,
+    layoutSniffer: (data) => sniffDfsLayout(data, false),
     isDoubleSided: false,
     isDoubleDensity: false,
     byteSize: SsdByteSize,
@@ -202,22 +248,57 @@ export function guessDiscTypeFromName(name) {
     return ssdDiscType;
 }
 
+/**
+ * @param {DiscType} discType
+ * @param {Uint8Array} data
+ * @param {string} name
+ * @param {string} layout - one of DiscLayout
+ * @returns {boolean} whether to lay the image out for a 40 track drive
+ */
+function is40TrackLayout(discType, data, name, layout) {
+    if (layout !== DiscLayout.auto) return layout === DiscLayout.expanded40;
+    const sniffed = discType.sniffLayout(data);
+    if (!sniffed) return false;
+    console.log(`${name} loaded as ${sniffed.is40Track ? "40" : "80"} track: ${sniffed.reason}`);
+    return sniffed.is40Track;
+}
+
 /**
  * Create a disc object of the appropriate type based on the file name
  * @param {Object} fdc - The FDC controller object
  * @param {string} name - The file name with extension
  * @param {string|Uint8Array} stringData - The disc image data as string or Uint8Array
  * @param {function(Uint8Array): void} onChange - Optional callback when disc content changes
+ * @param {string} [layout] - one of DiscLayout; by default the image is asked what it is
  * @returns {Disc} The loaded disc object
  */
-export function discFor(fdc, name, stringData, onChange) {
+export function discFor(fdc, name, stringData, onChange, layout = DiscLayout.auto) {
     const data = typeof stringData !== "string" ? stringData : utils.stringToUint8Array(stringData);
-    const disc = guessDiscTypeFromName(name).loader(new Disc(true, new DiscConfig(), name), data, onChange);
+    const discType = guessDiscTypeFromName(name);
+    const config = new DiscConfig();
+    config.expandTo80 = is40TrackLayout(discType, data, name, layout);
+    const disc = discType.loader(new Disc(true, config, name), data, onChange);
+    // A flux image of a 40 track disc read in an 80 track drive already holds it spread across the
+    // surface, so nothing needs moving and only the drive needs telling to step twice.
+    if (layout === DiscLayout.auto && discType.isFluxImage && !disc.is40Track) {
+        const sniffed = sniffSurfaceLayout(disc);
+        disc.is40Track = sniffed.is40Track;
+        console.log(`${name} surface reads as ${sniffed.is40Track ? "40" : "80"} track: ${sniffed.reason}`);
+    }
     disc.setOriginalImageCrc32(data instanceof Uint8Array ? data : new Uint8Array(data));
     return disc;
 }
 
-export function localDisc(fdc, name) {
+/**
+ * Create or open a disc held in the browser's local storage.
+ * @param {Object} fdc - The FDC controller object
+ * @param {string} name - The file name with extension
+ * @param {string} [layout] - one of DiscLayout; by default the image is asked what it is
+ * @param {function(*): void} [onSaveError] - called with whatever was thrown, the first time a write
+ *   cannot be stored
+ * @returns {Disc} The loaded disc object
+ */
+export function localDisc(fdc, name, layout = DiscLayout.auto, onSaveError = () => {}) {
     const discName = "disc_" + name;
     let data;
     const dataString = window.localStorage[discName];
@@ -235,13 +316,17 @@ export function localDisc(fdc, name) {
         console.log("Loading browser-local disc " + name);
         data = utils.stringToUint8Array(dataString);
     }
+    let reportedSaveError = false;
     const onChange = (data) => {
         try {
             const str = utils.uint8ArrayToString(data);
             window.localStorage.setItem(discName, str);
         } catch (e) {
-            window.alert("Writing to localStorage failed: " + e);
+            console.log(`Unable to save browser-local disc ${name}: ${e}`);
+            if (reportedSaveError) return;
+            reportedSaveError = true;
+            onSaveError(e);
         }
     };
-    return discFor(fdc, name, data, onChange);
+    return discFor(fdc, name, data, onChange, layout);
 }

package/src/google-drive.js

@@ -49,10 +49,11 @@ export class GoogleDriveLoader {
 
     _loadScript(src) {
         // https://github.com/google/google-api-javascript-client/issues/319
-        return new Promise((resolve) => {
+        return new Promise((resolve, reject) => {
             const script = document.createElement("script");
             script.src = src;
             script.onload = resolve;
+            script.onerror = () => reject(new Error(`Failed to fetch ${src}; a browser extension may be blocking it`));
             document.body.appendChild(script);
         });
     }
@@ -134,7 +135,7 @@ export class GoogleDriveLoader {
         return { fileId: meta.id, disc: this.makeDisc(fdc, data, meta) };
     }
 
-    makeDisc(fdc, data, meta) {
+    makeDisc(fdc, data, meta, layout) {
         let flusher = null;
         const name = meta.name;
         const id = meta.id;
@@ -148,12 +149,12 @@ export class GoogleDriveLoader {
         } else {
             console.log("Making read-only disc");
         }
-        return discFor(fdc, name, data, flusher);
+        return discFor(fdc, name, data, flusher, layout);
     }
 
-    async load(fdc, fileId) {
+    async load(fdc, fileId, layout) {
         const meta = (await this.driveClient.files.get({ fileId, fields: FILE_FIELDS })).result;
         const data = (await this.driveClient.files.get({ fileId, alt: "media" })).body;
-        return this.makeDisc(fdc, data, meta);
+        return this.makeDisc(fdc, data, meta, layout);
     }
 }

package/src/intel-fdc.js

@@ -1741,8 +1741,15 @@ export class IntelFdc {
      * @param {Number} drive
      * @param {Disc} disc
      */
-    loadDisc(drive, disc) {
+    /**
+     * @param {Number} drive
+     * @param {Disc} disc
+     * @param {Number} [tracksPerStep] where to leave the drive's 40/80 switch, which by default
+     *   follows the disc, since no drive can tell what pitch the disc in it was written at
+     */
+    loadDisc(drive, disc, tracksPerStep = disc?.is40Track ? 2 : 1) {
         this._drives[drive].setDisc(disc);
+        this._drives[drive].tracksPerStep = tracksPerStep;
     }
 
     get motorOn() {

package/src/jsbeeb.css

@@ -162,6 +162,54 @@ th {
   overflow: auto;
 }
 
+#hfe-list {
+  height: 380px;
+  overflow: auto;
+  list-style: none;
+  padding-left: 0;
+}
+
+#hfe-list li a {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr);
+  gap: 0 1rem;
+  align-items: baseline;
+  padding: 3px 6px;
+  border-radius: 3px;
+  text-decoration: none;
+}
+
+#hfe-list li a:hover,
+#hfe-list li a:focus-visible {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+#hfe-list .name {
+  font-weight: 600;
+}
+
+#hfe-list .publisher,
+#hfe-list .detail {
+  opacity: 0.65;
+  font-size: 0.9em;
+}
+
+#hfe-list .detail {
+  font-family: monospace;
+}
+
+.hfe-credit {
+  font-size: 0.9em;
+  opacity: 0.75;
+}
+
+@media (max-width: 40rem) {
+  #hfe-list li a {
+    grid-template-columns: minmax(0, 1fr);
+    padding-bottom: 6px;
+  }
+}
+
 div.filter {
   margin-top: 8px;
 }
@@ -576,3 +624,20 @@ div.smoothie-chart-tooltip {
   font-size: 10px;
   pointer-events: none;
 }
+
+.drive-tracks {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.drive-tracks-label {
+  color: var(--bs-dropdown-link-color);
+}
+
+.drive-tracks .btn {
+  /* The stock small button is taller than the menu rows around it. */
+  padding: 0 6px;
+  line-height: 1.4;
+}

package/src/keyboard.js

@@ -43,6 +43,7 @@ export class Keyboard extends EventTarget {
         this.pauseEmu = false;
         this.stepEmuWhenPaused = false;
         this.keyLayout = keyLayout;
+        this.saidCapsLockIsTapped = false;
 
         // Modifier key states
         this.lastShiftLocation = 1;
@@ -315,21 +316,19 @@ export class Keyboard extends EventTarget {
         // Simulate a key release after a short delay
         setTimeout(() => this.keyInterface.keyUp(utils.keyCodes.CAPSLOCK), CAPS_LOCK_DELAY);
 
-        if (isMac && window.localStorage && !window.localStorage.getItem("warnedAboutRubbishMacs")) {
-            this.dispatchEvent(
-                new CustomEvent("showError", {
-                    detail: {
-                        context: "handling caps lock on Mac OS X",
-                        error: `Mac OS X does not generate key up events for caps lock presses.
-                jsbeeb can only simulate a 'tap' of the caps lock key. This means it doesn't work well for games
-                that use caps lock for left or fire, as we can't tell if it's being held down. If you need to play
-                such a game, please see the documentation about remapping keys.
-                Close this window to continue (you won't see this error again)`,
-                    },
-                }),
-            );
-            window.localStorage.setItem("warnedAboutRubbishMacs", "true");
-        }
+        if (this.saidCapsLockIsTapped) return;
+        this.saidCapsLockIsTapped = true;
+        this.dispatchEvent(
+            new CustomEvent("notice", {
+                detail: {
+                    message:
+                        "macOS sends no key up for caps lock, so jsbeeb can only tap it. " +
+                        "For a game that holds caps lock for left or fire, remap that key instead.",
+                    title: "Keyboard",
+                    quietKey: "warnedAboutRubbishMacs",
+                },
+            }),
+        );
     }
 
     /**

package/src/machine-session.js

@@ -410,7 +410,8 @@ export class MachineSession {
      */
     loadDisc(imagePath) {
         const data = new Uint8Array(readFileSync(imagePath));
-        this._machine.processor.fdc.loadDisc(0, fdc.discFor(this._machine.processor.fdc, imagePath, data));
+        const machineFdc = this._machine.processor.fdc;
+        machineFdc.loadDisc(0, fdc.discFor(machineFdc, imagePath, data));
     }
 
     /**