blockyard 0.0.9 → 0.1.0

package/public/js/dosworker.js

@@ -0,0 +1,196 @@
+// THE DOS WORKER: the PC runs here, off the page's thread, for the DOOM and Quake Diversions
+// (operator, 2026-09-15: "Get DOOM working as a diversion inside blockyard with zero dependancies",
+// then "get Quake working as a diversion").
+//
+// A worker because the emulated 486 wants every millisecond it can get: on the page's own thread it
+// would share a 16 ms frame with the layout, the SSE feed and every other tab of the app, and the
+// game would stutter whenever the monitor redrew a chart. Here it runs in ~10 ms slices and yields
+// between them so key presses arrive; the page draws what it is sent.
+//
+// Messages in:  boot {game, rate, controls}, run {on}, key {codes}, mouse {dx, dy, buttons}, audio {port}
+// Messages out: status {text}, frame {pixels, palette?}, text {cells, cursor}, stats {mips},
+//               saved {name}, exit {code, cells}, error {message}
+//               (and controls {scheme}: rebind the running game's keys)
+import { createPC } from './dospc.js';
+import { createSoundCard } from './soundcard.js';
+import { withControls, rebindKeys, quakeAutoexec, GAMES } from './dosio.js';
+
+const SLICE_MS = 10;
+const CHUNK = 50000;                       // instructions between looks for a finished picture
+
+let pc = null, card = null, audioPort = null;
+let running = false, scheduled = false;
+let clock = 0, lastWall = 0;               // machine time: wall time while running, frozen while not
+let lastFrameSeq = -1, lastPalSeq = -1, lastText = null;
+let pixels = new Uint8Array(64000);        // bounced back by the page after each frame, to reuse
+let lastWrites = -1, seenWrites = -1;
+const keyEntries = {};                     // where DOOM's key settings live, once found
+const yieldChannel = new MessageChannel();
+yieldChannel.port1.onmessage = () => { scheduled = false; loop(); };
+
+const post = (m, transfer) => self.postMessage(m, transfer ?? []);
+const now = () => (running ? clock + (performance.now() - lastWall) : clock);
+
+// ------------------------------------------------------------------ saved files (IndexedDB)
+// Savegames and the config the game writes on quit, kept in this browser. A browser that refuses
+// IndexedDB still plays; its saves last as long as the tab.
+function db() {
+  return new Promise((resolve) => {
+    try {
+      const req = indexedDB.open(game.db, 1);
+      req.onupgradeneeded = () => req.result.createObjectStore('files');
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => resolve(null);
+    } catch { resolve(null); }
+  });
+}
+async function loadSaved() {
+  const d = await db();
+  if (!d) return {};
+  return new Promise((resolve) => {
+    const out = {};
+    try {
+      const tx = d.transaction('files', 'readonly');
+      const cur = tx.objectStore('files').openCursor();
+      cur.onsuccess = () => {
+        const c = cur.result;
+        if (!c) { resolve(out); return; }
+        if (c.value instanceof Uint8Array) out[c.key] = c.value;
+        c.continue();
+      };
+      cur.onerror = () => resolve(out);
+    } catch { resolve(out); }
+  });
+}
+async function store(name, bytes) {
+  const d = await db();
+  if (!d) return;
+  try {
+    const tx = d.transaction('files', 'readwrite');
+    if (bytes) tx.objectStore('files').put(bytes, name); else tx.objectStore('files').delete(name);
+  } catch { /* quota, private mode: the save lives for this session */ }
+}
+
+// ------------------------------------------------------------------ boot
+let game = null;
+async function fetchFile(name, required) {
+  const r = await fetch(`/games/${game.key}/${name}`, { credentials: 'same-origin' });
+  if (!r.ok) {
+    if (required) throw new Error(`${name} is not installed: put the shareware files in ${game.dir}/ on the server (HTTP ${r.status})`);
+    return null;
+  }
+  return new Uint8Array(await r.arrayBuffer());
+}
+
+async function boot({ game: key = 'doom', rate, controls }) {
+  game = { key, ...GAMES[key] };
+  if (!GAMES[key]) throw new Error(`no game called ${key}`);
+  post({ type: 'status', text: `loading ${game.label}…` });
+  const names = [game.exe, ...game.required, ...game.optional];
+  const [saved, ...got] = await Promise.all([loadSaved(), ...names.map((n, i) => fetchFile(n, i <= game.required.length))]);
+  const fetched = Object.fromEntries(names.map((n, i) => [n, got[i]]));
+  const files = {};
+  for (const n of [...game.required, ...game.optional]) if (fetched[n]) files[n] = fetched[n];
+  // the game's saves and the config it wrote on its last quit, over the shipped ones
+  const firstRun = !saved[game.config];
+  for (const [name, bytes] of Object.entries(saved)) files[name] = bytes;
+  if (key === 'doom' && files[game.config]) files[game.config] = withControls(files[game.config], controls);
+  if (key === 'quake') files['ID1/AUTOEXEC.CFG'] = quakeAutoexec({ firstRun });
+  pc = createPC({
+    files,
+    args: game.args,
+    programName: game.exe,
+    now,
+    sound: rate ? (mem) => (card = createSoundCard({ mem, rate })) : null,
+    onWrite: (name, bytes) => { store(name, bytes); post({ type: 'saved', name, deleted: !bytes }); },
+    onExit: (code) => { running = false; post({ type: 'exit', code, cells: pc.mem.slice(0xb8000, 0xb8000 + 4000) }); },
+    log: (m) => post({ type: 'log', text: m }),
+  });
+  pc.boot(fetched[game.exe]);
+  post({ type: 'status', text: 'booted' });
+}
+
+// ------------------------------------------------------------------ the loop
+function loop() {
+  if (!running || !pc || pc.exited) return;
+  const start = performance.now();
+  let n = 0;
+  try {
+    // in chunks of about half a millisecond, looking for a finished picture after each: at 50 frames
+    // a second two of Quake's frame copies could otherwise land in one 10 ms slice and one never be shown
+    do { n += pc.run(CHUNK); present(); } while (performance.now() - start < SLICE_MS && !pc.exited);
+  } catch (e) {
+    running = false;
+    post({ type: 'error', message: e.message });
+    return;
+  }
+  const spent = performance.now() - start;
+  mips = mips * 0.95 + (n / Math.max(0.001, spent)) * 0.05 * 1000 / 1e6;
+  if (card && audioPort && card.buffered > 0) {
+    const chunk = card.drain();
+    audioPort.postMessage(chunk, [chunk.buffer]);
+  }
+  if (performance.now() - lastStats > 1000) { lastStats = performance.now(); post({ type: 'stats', mips }); }
+  if (!scheduled) { scheduled = true; yieldChannel.port2.postMessage(0); }
+}
+let mips = 0, lastStats = 0, textTick = 0;
+
+function present() {
+  if (pc.vga.mode === 0x13) {
+    lastText = null;
+    // a new picture: a page flipped (DOOM), the palette changed, or the linear window was written
+    // (Quake copies each finished frame into A0000h and never flips). A copy can straddle two chunks,
+    // so writes are only shown once a chunk has passed without any: never half a frame
+    const writing = pc.vga.writes !== seenWrites;
+    seenWrites = pc.vga.writes;
+    if (writing && pc.vga.frames === lastFrameSeq) return;
+    if (pc.vga.frames === lastFrameSeq && pc.vga.palSeq === lastPalSeq && pc.vga.writes === lastWrites) return;
+    if (!pixels) return;                       // the page still has the last frame
+    lastFrameSeq = pc.vga.frames; lastWrites = pc.vga.writes;
+    const m = { type: 'frame', pixels: pc.renderIndexed(pixels) };
+    if (pc.vga.palSeq !== lastPalSeq) { lastPalSeq = pc.vga.palSeq; m.palette = pc.vga.pal.slice(); }
+    const buf = pixels.buffer;
+    pixels = null;
+    post(m, [buf]);
+    return;
+  }
+  lastFrameSeq = -1; lastPalSeq = -1;
+  if (++textTick % 20 !== 0) return;          // text mode changes slowly: look every ten milliseconds
+  const cells = pc.mem.subarray(0xb8000, 0xb8000 + 4000);
+  if (lastText && lastText.every((v, i) => v === cells[i])) return;
+  lastText = cells.slice();
+  post({ type: 'text', cells: lastText.slice(), cursor: [pc.text.x, pc.text.y] });
+}
+
+function setRunning(on) {
+  if (on === running) return;
+  if (on) { lastWall = performance.now(); running = true; loop(); }
+  else { clock = now(); running = false; }
+}
+
+self.onmessage = async (e) => {
+  const m = e.data;
+  try {
+    switch (m.type) {
+      case 'boot': await boot(m); setRunning(true); break;
+      case 'run': setRunning(m.on); break;
+      case 'key': if (pc) for (const c of m.codes) pc.key(c); break;
+      case 'mouse':
+        if (pc) { pc.mouse.dx += m.dx; pc.mouse.dy += m.dy; pc.mouse.buttons = m.buttons; }
+        break;
+      case 'controls':
+        if (pc) {
+          // the running game's keys now, and the config it would read if it started again
+          rebindKeys(pc.mem, m.scheme, keyEntries);
+          const cfg = pc.dir.get('DEFAULT.CFG');
+          if (cfg) pc.dir.set('DEFAULT.CFG', withControls(cfg, m.scheme));
+        }
+        break;
+      case 'audio': audioPort = m.port; break;
+      case 'pixels': pixels = new Uint8Array(m.buffer); break;
+    }
+  } catch (err) {
+    running = false;
+    post({ type: 'error', message: err.message });
+  }
+};

package/public/js/login.js

@@ -1,6 +1,11 @@
 // Login page. Separate file because the page's CSP is script-src 'self' -- an
 // inline <script> would simply not run, and "the button does nothing" is a
 // miserable bug to chase over HTTP.
+// the theme the browser last saw (settings.js keeps a copy under blockyard.settings), so a light
+// theme's sign-in page is light too; a first visit gets the shipped look
+import { followTheme } from './theme.js';
+followTheme();
+
 const err = document.getElementById('err');
 const form = document.getElementById('f');
 const btn = document.getElementById('go');

package/public/js/markets.js

@@ -20,6 +20,7 @@ import { board3d } from './details3d.js';
 import { loadSettings, setSetting, marketsOptions } from './settings.js';
 import { drawPriceChart, readout, EX_COLORS } from './pricechart.js';
 import { niceTicks } from './charts.js';
+import { INK } from './theme.js';
 import { renderDepth } from './depthchart.js';
 
 export const REFRESH_MS = 15_000;
@@ -119,13 +120,23 @@ export function fitZ(aspect, gridW, cam = CAMERA_3D) {
   return Math.max(12, Math.min(160, Math.floor(z * 0.97)));
 }
 
-export function chart3d(ser, { hours = MAX_3D_HOURS, zMax = C3.zMax } = {}) {
+// `fit`: the price range the board was last drawn to ({ lo, hi }), from the caller's memory. A
+// STEADY FIT (operator, 2026-09-15: "when the black hole sequence finishes, it causes a strange
+// redraw of the entire market screen that snaps it into a new sized view"). A refresh arriving
+// during an effect is parked until the effect ends, and every refresh re-fitted the price range
+// from the new candles -- so the whole chart re-scaled, unanimated, at the moment the effect let
+// go. The last fit is kept while the data still sits inside it and fills at least two-thirds of
+// it; only data that leaves the range, or shrinks well inside it, re-fits.
+export function chart3d(ser, { hours = MAX_3D_HOURS, zMax = C3.zMax, fit = null } = {}) {
   const cs = (ser?.candles ?? []).slice(-hours).filter((k) => Number.isFinite(k.c) && Number.isFinite(k.o));
   if (!cs.length) return { tiles: [], gridW: C3.slot, gridH: C3.depth, axes: null, lo: null, hi: null };
   let lo = Infinity, hi = -Infinity, vmax = 1e-9;
   for (const k of cs) { lo = Math.min(lo, k.l ?? k.c); hi = Math.max(hi, k.h ?? k.c); vmax = Math.max(vmax, k.v ?? 0); }
   const pad = (hi - lo) * 0.04 || 1;
+  const rawLo = lo, rawHi = hi;
   lo -= pad; hi += pad;
+  if (fit && Number.isFinite(fit.lo) && Number.isFinite(fit.hi) && fit.hi > fit.lo
+    && rawLo >= fit.lo && rawHi <= fit.hi && (rawHi - rawLo) >= (fit.hi - fit.lo) * 0.66) { lo = fit.lo; hi = fit.hi; }
   const Z = (p) => C3.zBase + ((p - lo) / (hi - lo)) * zMax;
   const id = ser.base?.id ?? 'x';
   const name = `${ser.base?.name ?? ''} ${ser.base?.pair ?? ''}`.trim();
@@ -176,18 +187,18 @@ export function tableHtml(d, fmt, now = Date.now()) {
     const spreadBps = e.spread != null && e.last ? (e.spread / e.last) * 1e4 : null;
     return `<tr>
       <td class="w"><b>${fmt.esc(e.name)}</b></td>
-      <td class="faint">${fmt.esc(e.pair)}</td>
+      <td class="faint opt">${fmt.esc(e.pair)}</td>
       <td class="r">${money(e.last)}</td>
       <td class="r">${money(e.bid)}</td>
       <td class="r">${money(e.ask)}</td>
       <td class="r">${e.spread == null ? '–' : `${money(e.spread)} <span class="faint">${spreadBps < 0.1 ? '<0.1' : spreadBps.toFixed(1)} bp</span>`}</td>
       <td class="r ${ch > 0 ? 'xpos' : ch < 0 ? 'xneg' : ''}">${ch == null ? '–' : `${ch > 0 ? '+' : ''}${(ch * 100).toFixed(2)}%`}</td>
-      <td class="r">${money(e.low24, 0)} – ${money(e.high24, 0)}</td>
-      <td class="r">${e.vol24 == null ? '–' : `${fmt.num(Math.round(e.vol24))} <span class="faint">BTC</span>`}</td>
+      <td class="r opt">${money(e.low24, 0)} – ${money(e.high24, 0)}</td>
+      <td class="r opt">${e.vol24 == null ? '–' : `${fmt.num(Math.round(e.vol24))} <span class="faint">BTC</span>`}</td>
       <td class="r ${e.stale ? 'stale' : 'faint'}">${e.error ? `<span class="warn" title="${fmt.esc(e.error)}">${fmt.esc(e.error.slice(0, 40))}</span>` : e.at ? fmt.ago(e.at, now) : '–'}</td>
     </tr>`;
   }).join('');
-  return `<div class="scroll"><table class="t mktbl"><thead><tr><th>exchange</th><th>pair</th><th class="r">last</th><th class="r">bid</th><th class="r">ask</th><th class="r">spread</th><th class="r">24 h</th><th class="r">24 h low – high</th><th class="r">24 h volume</th><th class="r">updated</th></tr></thead><tbody>${rows}</tbody></table></div>`;
+  return `<div class="scroll"><table class="t mktbl"><thead><tr><th>exchange</th><th class="opt">pair</th><th class="r">last</th><th class="r">bid</th><th class="r">ask</th><th class="r">spread</th><th class="r">24 h</th><th class="r opt">24 h low – high</th><th class="r opt">24 h volume</th><th class="r">updated</th></tr></thead><tbody>${rows}</tbody></table></div>`;
 }
 
 // (legend3dHtml lived here: a 250px column of prose beside the board explaining that a green body
@@ -236,7 +247,9 @@ function drawBoard(id = 'mkBoard') {
   if (!canvas || !ser) return null;
   const hours = Math.min(MAX_3D_HOURS, ser.candles.length);
   const aspect = (canvas.clientHeight || 400) / Math.max(1, canvas.clientWidth || 1000);
-  const c3 = chart3d(ser, { zMax: fitZ(aspect, hours * C3.slot) });
+  const fitKey = `${ser.base?.id ?? 'x'}|${M.range}|${hours}`;
+  const c3 = chart3d(ser, { zMax: fitZ(aspect, hours * C3.slot), fit: M.fitKey === fitKey ? M.fit3d : null });
+  M.fitKey = fitKey; M.fit3d = c3.lo != null ? { lo: c3.lo, hi: c3.hi } : null;   // the fit the board was drawn to, kept for the next refresh
   const cam = { ...CAMERA_3D, oblique: { ...CAMERA_3D.oblique, headroom: C3.zBase + c3.zMax + 2 } };
   if (c3.tiles.length) board3d(canvas, c3.tiles, { ...cam, gridW: c3.gridW, gridH: c3.gridH, axes: c3.axes, ...marketsOptions(loadSettings()) });
   return { c3, ser };
@@ -295,6 +308,7 @@ function fetchMarkets(h, now) {
 // 24 h high, low and volume and the spread across books; every exchange's last, change and
 // spread; how fresh it is. Pure: the /api/markets reply in, markup out.
 export function priceInfoHtml(d, fmt, now = Date.now()) {
+  if (d?.enabled === false) return `<div class="kp-wait">${fmt.esc(d.note ?? 'market data is off on this monitor')}</div>`;
   if (!d?.exchanges) return '<div class="kp-wait">asking the exchanges…</div>';
   const usd = d.exchanges.filter((e) => e.quote === 'USD' && e.last != null && !e.stale);
   const med = d.summary?.median ?? null;
@@ -323,7 +337,19 @@ export function renderPriceInfo(id, h) {
 // The 3D board alone, on any canvas -- the Kiosk tab's markets panel (kiosk.js)
 export function renderMarketsBoard(id, h) {
   fetchMarkets(h, Date.now());
-  if (M.data?.enabled === false) return null;
+  if (M.data?.enabled === false) {
+    // the Kiosk's board says so on its own canvas, since there is nothing else on that panel
+    const cv = document.getElementById(id), ctx = cv?.getContext?.('2d');
+    if (ctx) {
+      const w = cv.clientWidth || 600, hh = cv.clientHeight || 300;
+      if (cv.width !== w || cv.height !== hh) { cv.width = w; cv.height = hh; }
+      ctx.clearRect(0, 0, w, hh);
+      ctx.fillStyle = INK.text; ctx.font = '13px system-ui, sans-serif'; ctx.textAlign = 'center';
+      ctx.fillText(M.data.polling === false ? 'market polling is off' : 'market data is off on this server', w / 2, hh / 2 - 10);
+      if (M.data.polling === false) ctx.fillText('Display settings → Markets & Price → Enable market polling', w / 2, hh / 2 + 12);
+    }
+    return { label: M.data.polling === false ? 'market polling is off · Display settings → Markets & Price' : 'market data is off on this server' };
+  }
   const b = drawBoard(id);
   if (!b) return null;
   const last = b.ser.candles.at(-1)?.c;
@@ -336,7 +362,19 @@ export function renderMarkets(s, state, h) {
   const put = (id, html) => { const el = document.getElementById(id); if (el && el.__html !== html) { el.innerHTML = html; el.__html = html; } };
   const d = M.data;
   if (!d) { put('mkTable', `<div class="note">${M.error ? h.fmt.esc(M.error) : 'asking the exchanges…'}</div>`); return; }
-  if (d.enabled === false) { put('mkTable', `<div class="caveat">${h.fmt.esc(d.note ?? 'market data is off')}</div>`); return; }
+  // OFF: the note at the TOP, where the figures go, with a button to the switch -- and the board,
+  // the chart and the depth panel folded away (the CSS class), because six hundred pixels of empty
+  // board above a note nobody scrolls to is no way to say "polling is off" (2026-09-15)
+  const card = document.querySelector('section.page[data-page="markets"] .mkcard');
+  if (d.enabled === false) {
+    card?.classList.add('mk-off');
+    put('mkBar', '');
+    put('mkTable', '');
+    put('mkSummary', `<div class="caveat mkoff">${h.fmt.esc(d.note ?? 'market data is off')}${d.polling === false ? ' <button type="button" class="btn small" id="mkOpenSettings">Open Display settings</button>' : ''}</div>`);
+    document.getElementById('mkOpenSettings')?.addEventListener('click', () => document.getElementById('btnSettings')?.click(), { once: true });
+    return;
+  }
+  card?.classList.remove('mk-off');
   put('mkSummary', summaryHtml(d, h.fmt));
   put('mkBar', toolbarHtml(d));
   bindChart();