web-a2e 1.0.0

package/src/js/disk-manager/disk-persistence.js

@@ -0,0 +1,301 @@
+/*
+ * disk-persistence.js - Disk image persistence to IndexedDB
+ *
+ * Written by
+ *  Mike Daley <michael_daley@icloud.com>
+ */
+
+import { createDatabaseManager } from "../utils/indexeddb-helper.js";
+
+const DB_NAME = "a2e-disk-persistence";
+const DB_VERSION = 3;
+const STORE_NAME = "disks";
+const RECENT_STORE_NAME = "recentDisks";
+const MAX_RECENT_DISKS = 10;
+
+const db = createDatabaseManager({
+  dbName: DB_NAME,
+  version: DB_VERSION,
+  onUpgrade: (event) => {
+    const database = event.target.result;
+    const oldVersion = event.oldVersion;
+
+    if (!database.objectStoreNames.contains(STORE_NAME)) {
+      database.createObjectStore(STORE_NAME, { keyPath: "driveNum" });
+    }
+
+    // v2: Add recent disks store
+    if (!database.objectStoreNames.contains(RECENT_STORE_NAME)) {
+      const recentStore = database.createObjectStore(RECENT_STORE_NAME, {
+        keyPath: "id",
+        autoIncrement: true,
+      });
+      recentStore.createIndex("filename", "filename", { unique: false });
+      recentStore.createIndex("accessedAt", "accessedAt", { unique: false });
+      recentStore.createIndex("driveNum", "driveNum", { unique: false });
+    } else if (oldVersion < 3) {
+      // v3: Add driveNum index to existing store
+      const transaction = event.target.transaction;
+      const recentStore = transaction.objectStore(RECENT_STORE_NAME);
+      if (!recentStore.indexNames.contains("driveNum")) {
+        recentStore.createIndex("driveNum", "driveNum", { unique: false });
+      }
+    }
+  },
+});
+
+/**
+ * Save a disk image to IndexedDB
+ * @param {number} driveNum - Drive number (0 or 1)
+ * @param {string} filename - The disk filename
+ * @param {Uint8Array} data - The disk image data
+ * @returns {Promise<void>}
+ */
+export async function saveDiskToStorage(driveNum, filename, data) {
+  try {
+    const diskRecord = {
+      driveNum,
+      filename,
+      data: new Uint8Array(data),
+      savedAt: Date.now(),
+    };
+
+    await db.put(STORE_NAME, diskRecord);
+    console.log(`Saved disk to storage: drive ${driveNum + 1}, ${filename}`);
+  } catch (error) {
+    console.error("Error saving disk to storage:", error);
+  }
+}
+
+/**
+ * Load a disk image from IndexedDB
+ * @param {number} driveNum - Drive number (0 or 1)
+ * @returns {Promise<{filename: string, data: Uint8Array} | null>}
+ */
+export async function loadDiskFromStorage(driveNum) {
+  try {
+    const result = await db.get(STORE_NAME, driveNum);
+    if (result) {
+      console.log(`Loaded disk from storage: drive ${driveNum + 1}, ${result.filename}`);
+      return {
+        filename: result.filename,
+        data: new Uint8Array(result.data),
+      };
+    }
+    return null;
+  } catch (error) {
+    console.error("Error loading disk from storage:", error);
+    return null;
+  }
+}
+
+/**
+ * Remove a disk from IndexedDB storage
+ * @param {number} driveNum - Drive number (0 or 1)
+ * @returns {Promise<void>}
+ */
+export async function clearDiskFromStorage(driveNum) {
+  try {
+    await db.remove(STORE_NAME, driveNum);
+    console.log(`Cleared disk from storage: drive ${driveNum + 1}`);
+  } catch (error) {
+    console.error("Error clearing disk from storage:", error);
+  }
+}
+
+/**
+ * Check if there are any persisted disks
+ * @returns {Promise<boolean>}
+ */
+export async function hasPersistedDisks() {
+  try {
+    const count = await db.count(STORE_NAME);
+    return count > 0;
+  } catch (error) {
+    console.error("Error checking persisted disks:", error);
+    return false;
+  }
+}
+
+// ============================================================================
+// Recent Disks Functions
+// ============================================================================
+
+/**
+ * Find a recent disk by filename for a specific drive
+ * @param {number} driveNum - Drive number (0 or 1)
+ * @param {string} filename
+ * @returns {Promise<number|null>} The record ID or null
+ */
+async function findRecentDiskByFilename(driveNum, filename) {
+  let foundId = null;
+
+  await db.iterate(
+    RECENT_STORE_NAME,
+    { indexName: "filename", range: IDBKeyRange.only(filename) },
+    (value, cursor) => {
+      if (value.driveNum === driveNum) {
+        foundId = cursor.primaryKey;
+        return false; // Stop iteration
+      }
+    }
+  );
+
+  return foundId;
+}
+
+/**
+ * Trim recent disks to MAX_RECENT_DISKS entries for a specific drive
+ * @param {number} driveNum - Drive number (0 or 1)
+ * @returns {Promise<void>}
+ */
+async function trimRecentDisks(driveNum) {
+  // Collect all records for this drive
+  const records = [];
+
+  await db.iterate(
+    RECENT_STORE_NAME,
+    { indexName: "accessedAt" },
+    (value, cursor) => {
+      if (value.driveNum === driveNum) {
+        records.push({ id: cursor.primaryKey, accessedAt: value.accessedAt });
+      }
+    }
+  );
+
+  // Delete excess entries (oldest first since sorted by accessedAt)
+  if (records.length > MAX_RECENT_DISKS) {
+    const deleteCount = records.length - MAX_RECENT_DISKS;
+    for (let i = 0; i < deleteCount; i++) {
+      await db.remove(RECENT_STORE_NAME, records[i].id);
+    }
+  }
+}
+
+/**
+ * Add a disk to the recent disks list for a specific drive
+ * If the disk already exists (same filename for same drive), update its access time
+ * Maintains a maximum of MAX_RECENT_DISKS entries per drive
+ * @param {number} driveNum - Drive number (0 or 1)
+ * @param {string} filename - The disk filename
+ * @param {Uint8Array} data - The disk image data
+ * @returns {Promise<void>}
+ */
+export async function addToRecentDisks(driveNum, filename, data) {
+  try {
+    // Check if this filename already exists for this drive and remove it
+    const existingId = await findRecentDiskByFilename(driveNum, filename);
+    if (existingId !== null) {
+      await db.remove(RECENT_STORE_NAME, existingId);
+    }
+
+    // Add the new entry
+    const diskRecord = {
+      driveNum,
+      filename,
+      data: new Uint8Array(data),
+      accessedAt: Date.now(),
+    };
+
+    await db.add(RECENT_STORE_NAME, diskRecord);
+
+    // Trim to MAX_RECENT_DISKS for this drive
+    await trimRecentDisks(driveNum);
+
+    console.log(`Added to recent disks (drive ${driveNum + 1}): ${filename}`);
+  } catch (error) {
+    console.error("Error adding to recent disks:", error);
+  }
+}
+
+/**
+ * Get the list of recent disks for a specific drive, sorted by most recently accessed
+ * @param {number} driveNum - Drive number (0 or 1)
+ * @returns {Promise<Array<{id: number, filename: string, accessedAt: number}>>}
+ */
+export async function getRecentDisks(driveNum) {
+  try {
+    const results = [];
+
+    await db.iterate(
+      RECENT_STORE_NAME,
+      { indexName: "accessedAt", direction: "prev" },
+      (value) => {
+        if (value.driveNum === driveNum) {
+          results.push({
+            id: value.id,
+            filename: value.filename,
+            accessedAt: value.accessedAt,
+          });
+        }
+      }
+    );
+
+    return results;
+  } catch (error) {
+    console.error("Error getting recent disks:", error);
+    return [];
+  }
+}
+
+/**
+ * Load a recent disk by its ID
+ * @param {number} id - The record ID
+ * @returns {Promise<{filename: string, data: Uint8Array} | null>}
+ */
+export async function loadRecentDisk(id) {
+  try {
+    const result = await db.get(RECENT_STORE_NAME, id);
+    if (result) {
+      return {
+        filename: result.filename,
+        data: new Uint8Array(result.data),
+      };
+    }
+    return null;
+  } catch (error) {
+    console.error("Error loading recent disk:", error);
+    return null;
+  }
+}
+
+/**
+ * Remove a disk from the recent list
+ * @param {number} id - The record ID
+ * @returns {Promise<void>}
+ */
+export async function removeRecentDisk(id) {
+  try {
+    await db.remove(RECENT_STORE_NAME, id);
+    console.log(`Removed recent disk with id: ${id}`);
+  } catch (error) {
+    console.error("Error removing recent disk:", error);
+  }
+}
+
+/**
+ * Clear all recent disks for a specific drive
+ * @param {number} driveNum - Drive number (0 or 1)
+ * @returns {Promise<void>}
+ */
+export async function clearRecentDisks(driveNum) {
+  try {
+    // Collect IDs to delete
+    const idsToDelete = [];
+
+    await db.iterate(RECENT_STORE_NAME, {}, (value, cursor) => {
+      if (value.driveNum === driveNum) {
+        idsToDelete.push(cursor.primaryKey);
+      }
+    });
+
+    // Delete them
+    for (const id of idsToDelete) {
+      await db.remove(RECENT_STORE_NAME, id);
+    }
+
+    console.log(`Cleared recent disks for drive ${driveNum + 1}`);
+  } catch (error) {
+    console.error("Error clearing recent disks:", error);
+  }
+}

package/src/js/disk-manager/disk-surface-renderer.js

@@ -0,0 +1,388 @@
+/*
+ * disk-surface-renderer.js - Disk surface visualization renderer
+ *
+ * Written by
+ *  Mike Daley <michael_daley@icloud.com>
+ */
+
+const CANVAS_W = 280;
+const CANVAS_H = 240;
+const CENTER_X = 140;
+const CENTER_Y = 115;
+const OUTER_RADIUS = 105;
+const HUB_HOLE_RADIUS = 28;      // large center hole (~27% of disk)
+const HUB_RING_INNER = 28;       // white reinforcement ring starts at hole edge
+const HUB_RING_OUTER = 34;       // ring is ~6px wide
+const TRACK_OUTER = OUTER_RADIUS - 3;   // outermost track position
+const TRACK_INNER = HUB_RING_OUTER + 4; // innermost track position (just outside hub ring)
+const NUM_TRACKS = 35;
+const NUM_SECTORS = 16;
+const TRACK_RANGE = TRACK_OUTER - TRACK_INNER;
+const INDEX_HOLE_RADIUS = 4;
+const INDEX_HOLE_DIST = (HUB_RING_INNER + HUB_RING_OUTER) / 2; // centered in hub ring
+const RPM_RAD_PER_MS = Math.PI / 100; // 300 RPM
+const PX_RATIO = 2; // backing store scale for sharper rendering
+
+export class DiskSurfaceRenderer {
+  constructor(canvas) {
+    this.canvas = canvas;
+
+    // Set high-res backing store; CSS sizes the element
+    canvas.width = CANVAS_W * PX_RATIO;
+    canvas.height = CANVAS_H * PX_RATIO;
+
+    this.ctx = canvas.getContext('2d');
+    this.ctx.scale(PX_RATIO, PX_RATIO);
+
+    // Rotation state
+    this.angle = 0;
+    this.lastTimestamp = 0;
+    this.motorOn = false;
+    this.angularVelocity = 0;
+    this.spinning = false;
+
+    // Previous state for dirty checking
+    this._prev = {};
+
+    // Theme colors (read from CSS variables)
+    this._lastTheme = null;
+    this._updateThemeColors();
+
+    this._drawEmpty();
+  }
+
+  _updateThemeColors() {
+    const s = getComputedStyle(document.documentElement);
+    const v = (name, fallback) => s.getPropertyValue(name).trim() || fallback;
+    this._colors = {
+      bg:             v('--disk-bg', '#161b22'),
+      medium:         v('--disk-medium', '#1a1308'),
+      sectorLine:     v('--disk-sector-line', 'rgba(255,255,255,0.08)'),
+      ghostOutline:   v('--disk-ghost-outline', 'rgba(255,255,255,0.06)'),
+      ghostSector:    v('--disk-ghost-sector', 'rgba(255,255,255,0.03)'),
+      ghostHub:       v('--disk-ghost-hub', 'rgba(210,208,200,0.08)'),
+      hubRing:        v('--disk-hub-ring', 'rgba(210,208,200,0.85)'),
+      hubEdge:        v('--disk-hub-edge', 'rgba(255,255,255,0.12)'),
+      hubEdgeInner:   v('--disk-hub-edge-inner', 'rgba(255,255,255,0.08)'),
+      holeEdge:       v('--disk-hole-edge', 'rgba(0,0,0,0.3)'),
+      diskEdge:       v('--disk-edge', 'rgba(255,255,255,0.06)'),
+    };
+  }
+
+  update(state) {
+    const {
+      hasDisk, isActive, isWriteMode, quarterTrack, track,
+      trackAccessCounts, maxAccessCount, diskColor, timestamp
+    } = state;
+
+    // Check for theme changes
+    const currentTheme = document.documentElement.dataset.theme;
+    if (this._lastTheme !== currentTheme) {
+      this._lastTheme = currentTheme;
+      this._updateThemeColors();
+      this._prev = {};  // force full redraw
+    }
+
+    // Rotation physics
+    const dt = this.lastTimestamp > 0 ? timestamp - this.lastTimestamp : 0;
+    this.lastTimestamp = timestamp;
+
+    if (isActive && hasDisk) {
+      this.motorOn = true;
+      this.spinning = true;
+      this.angularVelocity = RPM_RAD_PER_MS;
+    } else if (this.motorOn) {
+      this.motorOn = false;
+      this._prev = {};
+    }
+
+    if (this.spinning && dt > 0) {
+      if (!this.motorOn) {
+        this.angularVelocity *= Math.pow(0.5, dt / 600);
+        if (this.angularVelocity < RPM_RAD_PER_MS * 0.005) {
+          this.angularVelocity = 0;
+          this.spinning = false;
+        }
+      }
+      this.angle += this.angularVelocity * dt;
+    }
+
+    if (!hasDisk) {
+      if (this._prev.hasDisk !== false) {
+        this._drawEmpty();
+        this._prev = { hasDisk: false };
+      }
+      return;
+    }
+
+    if (!this.spinning) {
+      if (
+        this._prev.hasDisk === true &&
+        this._prev.quarterTrack === quarterTrack &&
+        this._prev.track === track &&
+        this._prev.isActive === isActive &&
+        this._prev.isWriteMode === isWriteMode &&
+        this._prev.maxAccessCount === maxAccessCount &&
+        this._prev.diskColor === diskColor
+      ) {
+        return;
+      }
+    }
+
+    this._prev = {
+      hasDisk: true, quarterTrack, track, isActive,
+      isWriteMode, maxAccessCount, diskColor
+    };
+
+    this._drawDisk(state);
+  }
+
+  reset() {
+    this.angle = 0;
+    this.lastTimestamp = 0;
+    this.motorOn = false;
+    this.angularVelocity = 0;
+    this.spinning = false;
+    this._prev = {};
+    this._drawEmpty();
+  }
+
+  // ---- Drawing ----
+
+  _drawEmpty() {
+    const ctx = this.ctx;
+    const c = this._colors;
+    ctx.clearRect(0, 0, CANVAS_W, CANVAS_H);
+
+    ctx.fillStyle = c.bg;
+    ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
+
+    // Ghost disk — faint outline of the platter
+    ctx.beginPath();
+    ctx.arc(CENTER_X, CENTER_Y, OUTER_RADIUS, 0, Math.PI * 2);
+    ctx.strokeStyle = c.ghostOutline;
+    ctx.lineWidth = 1;
+    ctx.stroke();
+
+    // Ghost sector lines
+    const TWO_PI = Math.PI * 2;
+    ctx.save();
+    ctx.translate(CENTER_X, CENTER_Y);
+    for (let s = 0; s < NUM_SECTORS; s++) {
+      const a = (s / NUM_SECTORS) * TWO_PI;
+      ctx.strokeStyle = c.ghostSector;
+      ctx.lineWidth = 0.5;
+      ctx.beginPath();
+      ctx.moveTo(Math.cos(a) * TRACK_INNER, Math.sin(a) * TRACK_INNER);
+      ctx.lineTo(Math.cos(a) * TRACK_OUTER, Math.sin(a) * TRACK_OUTER);
+      ctx.stroke();
+    }
+    ctx.restore();
+
+    // Ghost hub ring
+    ctx.beginPath();
+    ctx.arc(CENTER_X, CENTER_Y, HUB_RING_OUTER, 0, Math.PI * 2);
+    ctx.arc(CENTER_X, CENTER_Y, HUB_RING_INNER, TWO_PI, 0, true);
+    ctx.fillStyle = c.ghostHub;
+    ctx.fill();
+
+    // Ghost center hole
+    ctx.beginPath();
+    ctx.arc(CENTER_X, CENTER_Y, HUB_HOLE_RADIUS, 0, Math.PI * 2);
+    ctx.strokeStyle = c.ghostOutline;
+    ctx.lineWidth = 0.5;
+    ctx.stroke();
+
+  }
+
+  _drawDisk(state) {
+    const {
+      isActive, isWriteMode, quarterTrack,
+      trackAccessCounts, maxAccessCount, diskColor
+    } = state;
+
+    const ctx = this.ctx;
+    const c = this._colors;
+    ctx.clearRect(0, 0, CANVAS_W, CANVAS_H);
+
+    // Background
+    ctx.fillStyle = c.bg;
+    ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
+
+    // 1. Magnetic medium — dark brown disk
+    ctx.beginPath();
+    ctx.arc(CENTER_X, CENTER_Y, OUTER_RADIUS, 0, Math.PI * 2);
+    ctx.fillStyle = c.medium;
+    ctx.fill();
+
+    // Subtle edge
+    ctx.strokeStyle = c.diskEdge;
+    ctx.lineWidth = 0.5;
+    ctx.stroke();
+
+    // 2. Accessed track rings only (rotated with disk)
+    ctx.save();
+    ctx.translate(CENTER_X, CENTER_Y);
+    ctx.rotate(this.angle);
+    this._drawAccessedTracks(ctx, trackAccessCounts, maxAccessCount);
+
+    // 3. Sector lines (rotated)
+    this._drawSectorLines(ctx);
+    ctx.restore();
+
+    // 5. Head and activity glow
+    this._drawHeadArm(ctx, quarterTrack, isActive, isWriteMode);
+
+    if (isActive) {
+      this._drawHeadGlow(ctx, quarterTrack, isWriteMode);
+    }
+
+    // 7. Hub ring + center hole
+    this._drawHub(ctx);
+
+    // 8. Index hole — punched through the hub ring, rotates with disk
+    this._drawIndexHole(ctx);
+  }
+
+  _drawAccessedTracks(ctx, trackAccessCounts, maxAccessCount) {
+    if (!trackAccessCounts || maxAccessCount === 0) return;
+
+    const logMax = Math.log(maxAccessCount + 1);
+
+    for (let t = 0; t < NUM_TRACKS; t++) {
+      const count = trackAccessCounts[t];
+      if (count === 0) continue;
+
+      // Track 0 = outermost, track 34 = innermost
+      const outerR = TRACK_OUTER - (t * TRACK_RANGE / NUM_TRACKS);
+      const innerR = TRACK_OUTER - ((t + 1) * TRACK_RANGE / NUM_TRACKS);
+
+      const intensity = Math.log(count + 1) / logMax;
+      const r = Math.round(40 + 215 * intensity);
+      const g = Math.round(60 + 80 * intensity - 40 * intensity * intensity);
+      const b = Math.round(100 - 80 * intensity);
+      const a = 0.3 + 0.55 * intensity;
+
+      ctx.fillStyle = `rgba(${r},${g},${b},${a})`;
+      ctx.beginPath();
+      ctx.arc(0, 0, outerR - 0.5, 0, Math.PI * 2);
+      ctx.arc(0, 0, innerR + 0.5, Math.PI * 2, 0, true);
+      ctx.fill();
+    }
+  }
+
+  _drawSectorLines(ctx) {
+    const TWO_PI = Math.PI * 2;
+
+    ctx.strokeStyle = this._colors.sectorLine;
+    ctx.lineWidth = 0.5;
+    for (let s = 0; s < NUM_SECTORS; s++) {
+      const a = (s / NUM_SECTORS) * TWO_PI;
+      ctx.beginPath();
+      ctx.moveTo(Math.cos(a) * TRACK_INNER, Math.sin(a) * TRACK_INNER);
+      ctx.lineTo(Math.cos(a) * TRACK_OUTER, Math.sin(a) * TRACK_OUTER);
+      ctx.stroke();
+    }
+  }
+
+  _drawIndexHole(ctx) {
+    // Red parallelogram across the hub ring, rotates with disk
+    const outerR = HUB_RING_OUTER;
+    const innerR = HUB_RING_INNER;
+    const outerHalf = 1.5;   // shorter side (next to disk)
+    const innerHalf = 2.5;   // slightly longer side (next to center hole)
+
+    ctx.save();
+    ctx.translate(CENTER_X, CENTER_Y);
+    ctx.rotate(this.angle);
+
+    ctx.beginPath();
+    ctx.moveTo(outerR, -outerHalf);
+    ctx.lineTo(outerR,  outerHalf);
+    ctx.lineTo(innerR,  innerHalf);
+    ctx.lineTo(innerR, -innerHalf);
+    ctx.closePath();
+
+    ctx.fillStyle = 'rgba(200,30,30,0.9)';
+    ctx.fill();
+    ctx.strokeStyle = 'rgba(120,10,10,0.6)';
+    ctx.lineWidth = 0.5;
+    ctx.stroke();
+
+    ctx.restore();
+  }
+
+  _drawHeadArm(ctx, quarterTrack, isActive, isWriteMode) {
+    const trackPos = quarterTrack / 4;
+    const headR = TRACK_OUTER - ((trackPos + 0.5) * TRACK_RANGE / NUM_TRACKS);
+
+    // Head color: green when reading, red when writing, grey when idle
+    if (isActive) {
+      ctx.fillStyle = isWriteMode
+        ? 'rgba(220,40,40,0.85)'
+        : 'rgba(40,200,60,0.85)';
+    } else {
+      ctx.fillStyle = 'rgba(160,155,150,0.7)';
+    }
+    ctx.fillRect(CENTER_X - 3, CENTER_Y - headR - 2, 6, 4);
+  }
+
+  _drawHeadGlow(ctx, quarterTrack, isWriteMode) {
+    const trackPos = quarterTrack / 4;
+    const headR = TRACK_OUTER - ((trackPos + 0.5) * TRACK_RANGE / NUM_TRACKS);
+
+    ctx.fillStyle = isWriteMode
+      ? 'rgba(220,40,40,0.4)'
+      : 'rgba(40,200,60,0.4)';
+    ctx.fillRect(CENTER_X - 4, CENTER_Y - headR - 3, 8, 6);
+  }
+
+  _drawHub(ctx) {
+    const c = this._colors;
+
+    // White reinforcement hub ring
+    ctx.beginPath();
+    ctx.arc(CENTER_X, CENTER_Y, HUB_RING_OUTER, 0, Math.PI * 2);
+    ctx.arc(CENTER_X, CENTER_Y, HUB_RING_INNER, Math.PI * 2, 0, true);
+    ctx.fillStyle = c.hubRing;
+    ctx.fill();
+
+    // Ring edge lines
+    ctx.beginPath();
+    ctx.arc(CENTER_X, CENTER_Y, HUB_RING_OUTER, 0, Math.PI * 2);
+    ctx.strokeStyle = c.hubEdge;
+    ctx.lineWidth = 0.5;
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.arc(CENTER_X, CENTER_Y, HUB_RING_INNER, 0, Math.PI * 2);
+    ctx.strokeStyle = c.hubEdgeInner;
+    ctx.lineWidth = 0.5;
+    ctx.stroke();
+
+    // Center hole — see through to background
+    ctx.beginPath();
+    ctx.arc(CENTER_X, CENTER_Y, HUB_HOLE_RADIUS, 0, Math.PI * 2);
+    ctx.fillStyle = c.bg;
+    ctx.fill();
+
+    // Hole edge
+    ctx.strokeStyle = c.holeEdge;
+    ctx.lineWidth = 0.5;
+    ctx.stroke();
+  }
+
+  _tintColor(hex, strength) {
+    let r = 0, g = 0, b = 0;
+    if (hex.length === 7) {
+      r = parseInt(hex.slice(1, 3), 16);
+      g = parseInt(hex.slice(3, 5), 16);
+      b = parseInt(hex.slice(5, 7), 16);
+    }
+    const br = 0x88, bg = 0x85, bb = 0x80;
+    r = Math.round(r * strength + br * (1 - strength));
+    g = Math.round(g * strength + bg * (1 - strength));
+    b = Math.round(b * strength + bb * (1 - strength));
+    return `rgb(${r},${g},${b})`;
+  }
+}