@moonbase-machines/player 0.0.0-stage → 0.9.0

package/index.js

@@ -0,0 +1,28 @@
+// @moonbase-machines/player: every module by name, for one bundled file or to take the whole package at once:
+// import { remakeMain } from '@moonbase-machines/player'. Each module can be imported on its own too:
+// '@moonbase-machines/player/<module>.js' (remake/main.js, original.js, disk/disk.js).
+export * as original from './original.js';
+export * as audio from './audio.js';
+export * as modal from './modal.js';
+export * as parts from './parts.js';
+export * as diskDialogs from './disk/dialogs.js';
+export * as diskDisk from './disk/disk.js';
+export * as diskLocal from './disk/local.js';
+export * as diskMemory from './disk/memory.js';
+export * as remakeC64View from './remake/c64-view.js';
+export * as remakeCardView from './remake/card-view.js';
+export * as remakeCard from './remake/card.js';
+export * as remakeCards from './remake/cards.js';
+export * as remakeCompile from './remake/compile.js';
+export * as remakeEngine from './remake/engine.js';
+export * as remakeEvents from './remake/events.js';
+export * as remakeLayout from './remake/layout.js';
+export * as remakeLift from './remake/lift.js';
+export * as remakeLoad from './remake/load.js';
+export * as remakeMain from './remake/main.js';
+export * as remakeProblems from './remake/problems.js';
+export * as remakeRaster from './remake/raster.js';
+export * as remakeScenes from './remake/scenes.js';
+export * as remakeScript from './remake/script.js';
+export * as remakeVector from './remake/vector.js';
+export * as remakeView from './remake/view.js';

package/modal.js

@@ -0,0 +1,68 @@
+// A modal window, the one way every dialog and window over a game is shown: the disk's dialogs
+// (disk/dialogs.js) and a program's own windows (Aztlan's help and About box, its macapp.js). It opens
+// inside the place it is given, the game's screen, not over the whole page: what it covers is that place
+// alone, which scrolls with it, and the rest of the page is the page's. Its frame and look are the place's
+// (a class, as Aztlan's window definition 1 has it, and the place's own styles); without a place, the page.
+//
+//   const m = modal({ within, className, content, cancel })
+//     within     the element it opens in (positioned), else the page
+//     className  its frame's classes
+//     content    what it shows
+//     cancel()   what Escape does (closing it, else)
+//   m.box, m.close()
+// While it is open the rest of `within` is inert, and the keys are the topmost one's, wherever the focus
+// is (WebKit leaves it on the page when a button is clicked): Escape cancels; Return presses its default
+// button (`.default`), unless on a button, or in a box that takes Return itself; Tab stays inside it. When
+// it closes the focus goes back where it was, or into the window under it.
+const open = [];
+// (listened for from the first one opened: a module the tests load in Node, with no page)
+let listening = false;
+const keys = e => {
+  const m = open.at(-1);
+  if (!m) return;
+  if (e.key === 'Escape') { e.preventDefault(); m.cancel(); }
+  else if (e.key === 'Enter' && !(e.target instanceof HTMLButtonElement) && e.target.tagName !== 'TEXTAREA') {
+    const d = m.box.querySelector('.default:not(:disabled)');
+    if (d) { e.preventDefault(); d.click(); }
+  }
+  else if (e.key === 'Tab') {
+    const f = focusable(m.box), at = f.indexOf(document.activeElement);
+    if (f.length) { e.preventDefault(); f[(at + (e.shiftKey ? f.length - 1 : 1)) % f.length].focus(); }
+  }
+  // (the game under it has none of the keys)
+  e.stopPropagation();
+};
+const focusable = box => [...box.querySelectorAll('button:not(:disabled), input:not([type=hidden]):not([type=file]):not([hidden]), select:not([hidden]), [tabindex="0"]')];
+const first = box => box.querySelector('input:not([type=file]), select:not([hidden])') ?? box.querySelector('.default') ?? focusable(box)[0];
+
+export function modal({ within = document.body, className = '', content, cancel = null }) {
+  if (!listening) { document.addEventListener('keydown', keys, true); listening = true; }
+  const layer = document.createElement('div');
+  layer.className = 'modal-layer' + (within === document.body ? ' page' : '');
+  const box = document.createElement('div');
+  box.className = 'modal ' + className;
+  box.setAttribute('role', 'dialog'); box.setAttribute('aria-modal', 'true');
+  box.append(content); layer.append(box);
+  const before = document.activeElement;
+  const others = [...within.children].filter(el => !el.inert);
+  for (const el of others) el.inert = true;
+  within.append(layer);
+  const m = {
+    box,
+    cancel: () => (cancel ?? m.close)(),
+    close() {
+      layer.remove();
+      open.splice(open.indexOf(m), 1);
+      for (const el of others) el.inert = false;
+      const under = open.at(-1);
+      (under && !under.box.contains(before) ? first(under.box) : before)?.focus?.({ preventScroll: true });
+    },
+  };
+  open.push(m);
+  // (the first box to type in or list to choose from, else the default button, has the focus)
+  first(box)?.focus({ preventScroll: true });
+  return m;
+}
+
+// whether a modal window is open: a game's keys and commands wait while one is
+export const modalOpen = () => open.length > 0;

package/original.js

@@ -0,0 +1,200 @@
+// The original: a game's disk in the machine it was made for, its screen on a canvas, the keyboard passed
+// on, and each picture the engine draws also given as SVG over the canvas. Each game's machine is loaded when its
+// game asks for it, the Commodore 64 (@moonbase-machines/c64) or the Apple IIe (@moonbase-machines/apple2e), and not
+// the other; on moonbase's own ROMs, which need nothing of the makers'.
+//
+//   await play({ data, root, disk, words, downloadDisk, roms, studies })
+//     data          the game's data, an absolute URL (<name>.json: its disks' files, its kind, its saves)
+//     root          the page's section the player is made in
+//     disk          the title's player's disk (disk/disk.js), opened before the player starts
+//     words         the page's words the player shows: { printer: { line, print, tear } }
+//     downloadDisk  a C64 game's disk offered to download, with what is saved on it
+//   and what only a workshop has, given by its pages, never looked for here:
+//     roms          the makers' ROMs this machine has: an Apple game's line 1, Apple's own booting its disks,
+//                   { apple: { system, disk2 }, image: async name => its disk image's bytes }; a C64 game's
+//                   Commodore's, { choice ('commodore' or 'moonbase-petscii', @moonbase-machines/c64/start.js), load:
+//                   async name => a ROM's bytes }
+//     studies       files of its own for a C64 game's disk, a name to its bytes in base64, in the drive, not kept
+import { Speaker } from './audio.js';
+import { paperBox, phoneKeys, KEYS_MARKUP } from './parts.js';
+
+export async function play({ data, root, disk, words, downloadDisk = false, roms = null, studies = null }) {
+  root.classList.add('game');
+  root.innerHTML = `<div class="stage"><svg id="vector" viewBox="0 0 140 192" preserveAspectRatio="none"></svg><canvas id="screen" width="560" height="384" tabindex="0"></canvas></div>
+  <p class="options"><span id="status">Loading.</span>${KEYS_MARKUP}<label><input type="checkbox" id="vectors"> Draw the pictures as vectors</label><label hidden><input type="checkbox" id="printer" checked> Printer</label><button id="disk" type="button" hidden>Download the disk</button></p>`;
+  root.append(paperBox(words.printer));
+  const $ = id => root.querySelector('#' + id);
+  const canvas = $('screen'), ctx = canvas.getContext('2d');
+  phoneKeys(root, canvas.parentElement);
+  // (the game's name, for a disk downloaded: its data's file's)
+  const name = new URL(data).pathname.split('/').pop().replace(/\.json$/, '');
+  const parts = { name, roms, studies, disk, downloadDisk, $, canvas, ctx, layer: $('vector'), status: $('status'), vectorToggle: $('vectors'), speaker: new Speaker() };
+  const game = await (await fetch(data)).json();
+  if (game.kind === 'c64') await c64(game, parts); else await apple(game, parts);
+}
+
+// the screen stretched evenly: a whole number of the device's pixels to each of the machine's dots
+// (the 64's 384 by 272, the Apple's 280 by 192), so every dot is drawn the same size and a line one
+// dot thick is as thick as any other; the next whole number up from the column's width, a little
+// wider than it and centred on it, unless that is wider than the window; kept so as the window, or
+// its zoom, changes
+function evenly(canvas, dots, lines) {
+  const stage = canvas.parentElement, column = stage.parentElement;
+  const fit = () => {
+    const dpr = window.devicePixelRatio || 1, pad = parseFloat(getComputedStyle(column).paddingLeft) * 2;
+    const room = column.clientWidth - pad, most = document.documentElement.clientWidth - 16;
+    let k = Math.ceil(room * dpr / dots - 0.01);
+    if (dots * k / dpr > most) k = Math.max(1, Math.floor(most * dpr / dots));
+    const w = dots * k / dpr;
+    Object.assign(stage.style, { width: w + 'px', height: lines * k / dpr + 'px', aspectRatio: 'auto', marginLeft: (room - w) / 2 + 'px' });
+  };
+  fit();
+  addEventListener('resize', fit);
+}
+
+// An Apple II game: the machine, the canvas, the keys, and the hooks for the vectors. With Apple's
+// ROMs and the game's disk images, where the page gives them (`roms`), it is line 1, the Apple itself booting the
+// disks; without them, moonbase's (line 2), the game started at once.
+async function apple(game, { roms: makers, disk, canvas, ctx, layer, status, vectorToggle, speaker }) {
+const [{ Machine }, { placed }, { withSaves, keepSaves, onDisks, driveFiles }, { screen }, { shapes }, { elements }] = await Promise.all([
+  import('@moonbase-machines/apple2e/machine.js'), import('@moonbase-machines/apple2e/prodos.js'), import('@moonbase-machines/apple2e/saves.js'),
+  import('@moonbase-machines/apple2e/screen.js'), import('@moonbase-machines/vector/pictures.js'), import('@moonbase-machines/vector/svg.js')]);
+evenly(canvas, 280, 192);
+// the title's saves on its own volume, the player's disk's (@moonbase-machines/apple2e/saves.js): on line 2 the
+// machine's files; on line 1 written onto that volume's disk before it boots, and kept as the title's DOS writes it
+const saving = withSaves(game, disk);
+let roms = null, disks = null;
+if (makers?.apple) try {
+  roms = makers.apple;
+  disks = onDisks(game, placed(saving, new Map(await Promise.all(game.images.map(async n => [n, await makers.image(n)])))), disk);
+} catch { roms = null; }
+const m = new Machine(saving, { log: (...a) => console.log(...a), ...roms ? { roms, disks } : {} });
+console.log(roms ? "line 1: Apple's ROMs, the disks booted" : "line 2: moonbase's machine");
+keepSaves(game, roms ? driveFiles(m, disks, game) : m.disk, disk);
+m.diskTime = true;   // reads from the disk take the time a disk took, as the games' loading screens expect
+
+// Where the engine is hooked, found in PART0 once it is loaded, in whichever bank the game runs
+// in. The picture routine's loop draws the shapes the loader has put at $E000 one by one, so on
+// its first shape the whole picture is read for the SVG, and from there to the routine's exit,
+// which sets X to 0 and Y to $E0, the machine marks every screen byte written as the picture's.
+// The box routine, which clears the picture window, starts by keeping its three colors, and
+// there the SVG and the marks are cleared, and the window's color, in A, is kept to go under
+// the next pictures' polygons.
+let hooked = false, window_ = 0;
+function hook() {
+  const find = (bytes, code) => { outer: for (let a = 0x4000; a < 0x8000 - bytes.length; a++) { for (let i = 0; i < bytes.length; i++) if (bytes[i] !== null && code[a + i] !== bytes[i]) continue outer; return a; } return -1; };
+  for (const code of [m.aux, m.main]) {
+    const shape = find([0x20, null, null, 0x20, null, null, 0xee, null, null, 0x4c], code);   // JSR fill; JSR outline; INC count; JMP loop
+    const exit = find([0xa2, 0x00, 0xa0, 0xe0, 0x18, 0x60], code);   // LDX #0; LDY #$E0; CLC; RTS
+    const box = find([0x8d, null, null, 0x8e, null, null, 0x8c, null, null, 0xad, null, null, 0xc9, 0x80, 0xf0], code);
+    if (shape < 0 || exit < 0 || box < 0) continue;
+    m.cpu.hooks.set(shape, c => { if (c.read16(0x60) === 0xe000) { layer.insertAdjacentHTML('beforeend', elements(shapes(a => m.read(a), 0xe000), { background: window_ })); m.marking = 1; } return false; });
+    m.cpu.hooks.set(exit, () => { m.marking = 0; return false; });
+    m.cpu.hooks.set(box, c => { if (c.a !== 0x80) window_ = c.a & 15; layer.innerHTML = ''; m.owner.fill(0); return false; });
+    hooked = true;
+    return;
+  }
+}
+
+// the keys, as the Apple II's keyboard gives them
+const KEYS = { Escape: 27, Enter: 13, Backspace: 127, Delete: 127, ArrowLeft: 8, ArrowRight: 21, ArrowUp: 11, ArrowDown: 10, Tab: 9 };
+window.addEventListener('keydown', e => {
+  speaker.start();
+  if (e.metaKey || e.altKey || e.repeat) return;   // a held key is one key
+  // control with a letter is the Apple's control character: control-E opens Animal Rescue's main menu
+  const k = e.ctrlKey ? (/^[a-z]$/i.test(e.key) ? e.key.toUpperCase().charCodeAt(0) & 0x1f : undefined) : KEYS[e.key] ?? (e.key.length === 1 ? e.key.charCodeAt(0) : undefined);
+  if (k === undefined) return;
+  console.log('key', JSON.stringify(e.key), '->', k, 'at pc $' + m.cpu.pc.toString(16));
+  m.press(k); e.preventDefault();
+});
+
+const rgba = new Uint8ClampedArray(560 * 384 * 4);
+const image = new ImageData(rgba, 560, 384);
+const cols = new Uint8Array(140 * 192);
+let mode = '';
+function frame() {
+  if (!m.halted) m.runCycles(17030);   // a frame's worth of the Apple's clock, at 60 a second
+  const now = `text ${m.sw.text} page2 ${m.sw.page2} hires ${m.sw.hires} dhires ${m.sw.dhires}`;
+  if (now !== mode) { console.log('screen:', now, 'at pc $' + m.cpu.pc.toString(16), 'cycles', m.cpu.cycles); mode = now; }
+  speaker.feed(m.clicks, m.cpu.cycles); m.clicks.length = 0;
+  if (!hooked) hook();
+  const text = m.sw.text;
+  screen(m, rgba, { cols, owner: vectorToggle.checked && layer.innerHTML ? m.owner : null });
+  ctx.putImageData(image, 0, 0);
+  layer.style.visibility = vectorToggle.checked && !text ? 'visible' : 'hidden';
+  status.textContent = m.halted ? 'The game has stopped: ' + m.halted + '.' : (m.idle > 2000 ? 'Waiting for a key.' : 'Running.');
+  requestAnimationFrame(frame);
+}
+canvas.addEventListener('pointerdown', () => { speaker.start(); canvas.focus(); });
+canvas.focus();
+frame();
+}
+
+// A C64 game: on moonbase's own ROMs (@moonbase-machines/c64/rom.js), as the site has it everywhere, or on
+// Commodore's where the page gives them (`roms`) and asks for them; the machine autostarted
+// with LOAD"name",8,1, and RUN for a BASIC program, typed into the KERNAL's buffer, the frame on a canvas of
+// 384 by 272 doubled, the keys as the matrix and the arrows as the joystick.
+async function c64(game, { name, roms: makers, studies, disk, downloadDisk, $, canvas, layer, status, vectorToggle, speaker }) {
+  const [{ C64 }, { Printer, paper }, { WIDTH, HEIGHT }, { keyboard, painter }, { SID }, { c64Roms, typed: startTyped }, { add }, { keepDrive }] = await Promise.all([
+    import('@moonbase-machines/c64/machine.js'), import('@moonbase-machines/c64/printer.js'), import('@moonbase-machines/c64/vic.js'), import('@moonbase-machines/c64/browser.js'),
+    import('@moonbase-machines/c64/sid.js'), import('@moonbase-machines/c64/start.js'), import('@moonbase-machines/c64/d64.js'), import('@moonbase-machines/c64/saves.js')]);
+  evenly(canvas, WIDTH, HEIGHT);
+  const roms = await c64Roms(makers?.choice ?? null, makers?.load);
+  if (!roms) { status.textContent = 'Commodore\'s ROMs, asked for, are not here.'; return; }
+  // a printer on device 4 (@moonbase-machines/c64/printer.js): on unless its box is off, what it prints drawn
+  // below the screen as a sheet of paper, until it is torn off
+  const box = $('printer'), sheet = $('paper'), shown = $('paper-box');
+  try { box.checked = localStorage.getItem('printer') !== '0'; } catch {}
+  box.parentElement.hidden = false;
+  const printer = new Printer({ on: box.checked });
+  box.addEventListener('change', () => { printer.on = box.checked; try { localStorage.setItem('printer', box.checked ? '1' : '0'); } catch {} });
+  printer.changed = () => { shown.hidden = !printer.lines.length; if (printer.lines.length) paper(sheet, printer, roms.chargen); };
+  $('tear').addEventListener('click', () => printer.tear());
+  $('print-paper').addEventListener('click', () => window.print());   // (the sheet alone: its print style)
+  const m = new C64(game, roms, { log: (...a) => console.log(...a), printer });
+  // What the game SAVEs to its disk, kept on the player's disk and given back to the drive the next time
+  // (@moonbase-machines/c64/saves.js)
+  keepDrive(m.drive, disk);
+  // (and, where the page gives them, `studies`, files of its own for the disk, a name to a file: in the drive, not
+  // kept)
+  const raw = t => Uint8Array.from(atob(t), c => c.charCodeAt(0));
+  for (const [file, data] of Object.entries(studies ?? {})) m.drive.saved.set(file, raw(data));
+  // the disk as it now stands, its own files and those saved, to download where the title offers it
+  // (Crayon's): a .d64 that VICE or a real 64 can use (@moonbase-machines/c64/d64.js `add`)
+  if (downloadDisk) {
+    const download = $('disk');
+    download.hidden = false;
+    download.addEventListener('click', () => {
+      const image = add(m.drive.image, [...m.drive.saved].map(([name, data]) => ({ name, data })));
+      const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(new Blob([image], { type: 'application/octet-stream' })), download: name + '.d64' });
+      a.click(); URL.revokeObjectURL(a.href);
+    });
+  }
+  layer.style.display = 'none'; vectorToggle.parentElement.style.display = 'none';
+  const draw = painter(canvas);
+  let typing = null, typed = 0;
+  const keys = keyboard(m, { onKey: () => speaker.start(), log: true });
+  // once BASIC is ready, the start typed in; the KERNAL's buffer takes ten characters at a time.
+  // The C64 runs 50 frames a second, so frames are run to keep up with the clock, two at most.
+  let frames = 0, sid = null, started = performance.now();
+  function frame() {
+    const due = Math.min(2, Math.floor((performance.now() - started) / 20) - frames);
+    for (let i = 0; i < due; i++) {
+      m.runFrame(); frames++; keys.frame();
+      if (speaker.node) {
+        if (!sid) sid = new SID(speaker.rate);
+        const n = Math.round(19656 / 985248 * speaker.rate), first = m.cpu.cycles - 19656;
+        const wave = sid.render(n, m.sidWrites.map(([c, r, v]) => [Math.floor((c - first) / 19656 * n), r, v]));
+        speaker.node.port.postMessage(wave, [wave.buffer]);
+      }
+      m.sidWrites.length = 0;
+    }
+    // (LOAD, and RUN for a BASIC program: @moonbase-machines/c64/start.js)
+    if (frames >= 120 && typing === null && !typed) { typing = startTyped(m, game); typed = 1; }
+    if (typing !== null && !m.ram[0xc6]) { typing = m.type(typing); if (!typing.length) typing = null; }
+    draw(m.vic.frame);
+    status.textContent = m.halted ? 'The game has stopped: ' + m.halted + '.' : 'Running.';
+    requestAnimationFrame(frame);
+  }
+  canvas.focus(); frame();
+}

package/package.json

@@ -1,6 +1,27 @@
 {
   "name": "@moonbase-machines/player",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.9.0",
+  "description": "The player for Mark Wharton's titles of 1985 to 1995: the Original, a game's own disk on Moonbase's machines, and the Remake, its scenes on an engine; the player's own disk of saves in the browser.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Mark Wharton",
+  "exports": {
+    ".": "./index.js",
+    "./*": "./*"
+  },
+  "bin": {
+    "moonbase-compile": "./bin/moonbase-compile.mjs",
+    "moonbase-play": "./bin/moonbase-play.mjs"
+  },
+  "dependencies": {
+    "@moonbase-machines/apple2e": "0.9.0",
+    "@moonbase-machines/c64": "0.9.0",
+    "@moonbase-machines/charset": "0.9.0",
+    "@moonbase-machines/mos6502": "0.9.0",
+    "@moonbase-machines/vector": "0.9.0"
+  },
+  "scripts": {
+    "test": "node --test test/*.test.js",
+    "prepack": "node ../../tools/package-files.mjs player"
+  }
+}

package/parts.js

@@ -0,0 +1,33 @@
+// The parts both players make the same: the printer's paper under the screen, and a phone's keyboard.
+//
+//   paperBox(words)        the paper's box (hidden until there is something printed): its line, Print and
+//                          Tear off, and the sheet (#paper-box, #print-paper, #tear, #paper)
+//   phoneKeys(root, stage) on a phone, the Keyboard button (#keyboard) opens its keyboard on a box (#keys-box)
+//                          whose keys go to the window's own listener; a keyboard that names no key gives
+//                          its characters, passed on as keys
+export function paperBox({ line, print, tear }) {
+  const box = document.createElement('div');
+  box.id = 'paper-box'; box.hidden = true;
+  box.innerHTML = '<p><span></span> <button id="print-paper" type="button"></button> <button id="tear" type="button"></button></p><canvas id="paper"></canvas>';
+  box.querySelector('span').textContent = line;
+  box.querySelector('#print-paper').textContent = print;
+  box.querySelector('#tear').textContent = tear;
+  return box;
+}
+
+export function phoneKeys(root, stage) {
+  const kb = root.querySelector('#keyboard'), box = root.querySelector('#keys-box');
+  if (!kb || !box || !matchMedia('(pointer: coarse)').matches) return;
+  kb.hidden = false;
+  kb.addEventListener('click', () => box.focus());
+  stage.addEventListener('click', () => box.focus());
+  let unnamed = false;
+  box.addEventListener('keydown', e => { unnamed = e.key === 'Unidentified'; });
+  box.addEventListener('input', () => {
+    if (unnamed) for (const ch of box.value) for (const t of ['keydown', 'keyup']) window.dispatchEvent(new KeyboardEvent(t, { key: ch }));
+    box.value = '';
+  });
+}
+
+// the options line's keyboard parts, as both players have them
+export const KEYS_MARKUP = '<button type="button" id="keyboard" class="full" hidden>Keyboard</button><input id="keys-box" class="keys-box" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" aria-label="Keys for the game">';

package/player.css

@@ -0,0 +1,48 @@
+/* The player's own look: the stage the game is drawn on, the options line under it, the paper a C64 game's printer
+   prints on, and the modal window and the disk's dialogs (modal.js, disk/dialogs.js). Its colours are the page's,
+   where the page names them (--screen, --muted, --gold, --alert, --line, --surface, --ink, --bg, --accent,
+   --accent-ink, --sans), else these. */
+
+.game .stage { position: relative; width: min(100%, 960px, calc((var(--vvh, 100vh) - 260px) * 560 / 384)); margin: 0 auto; aspect-ratio: 560 / 384; background: var(--screen, #000); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px -12px #0006; }
+.game .stage canvas, .game .stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.game .stage canvas { image-rendering: pixelated; }
+/* the remake's mini view, where the page gives one: in the band at the top of the screen, placed by the title's inset */
+.game .stage .mini { position: absolute; overflow: hidden; border-radius: 3px; background: #000; pointer-events: none; }
+.game .stage .mini.toggle { pointer-events: auto; cursor: pointer; }
+.game .stage .mini canvas, .game .stage .mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
+.game.remake .stage { background: #fff; }
+.game.remake .stage svg .key { cursor: pointer; }
+.game.remake .stage svg .key:hover rect { stroke: var(--gold, #a8801f); }
+.options { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center; font-size: 15px; color: var(--muted, #5d6475); margin: 14px 0; }
+#status.error { color: var(--alert, #9b3d2e); }
+#paper { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 2px 8px #0005; }
+#paper-box { max-width: 960px; margin: 0 auto; }
+@media print {
+  @page { size: landscape; margin: 10mm; }
+  body { background: #fff; }
+  body *:not(:has(#paper)):not(#paper) { display: none; }
+  main, section, #paper-box { margin: 0; padding: 0; max-width: none; }
+  #paper { width: 100%; box-shadow: none; }
+}
+/* the button that opens a phone's keyboard, and the box it types into: there, and unseen */
+.full { font: inherit; font-size: 13px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line, #e4dfd3); background: transparent; color: var(--muted, #5d6475); cursor: pointer; }
+.full:hover { color: var(--ink, #1b2233); border-color: var(--gold, #a8801f); }
+.keys-box { position: absolute; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
+
+/* a modal window and the disk's dialogs in it: over the place it opens in, a game's screen, its frame and look that
+   game's own where it has one (its title's stylesheet); on the page, the page's */
+.modal-layer { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; }
+.modal-layer.page { position: fixed; background: #0007; }
+.modal { border: 1px solid var(--line, #e4dfd3); border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #1b2233); font: 16px/1.5 var(--sans, system-ui, sans-serif); padding: 20px 22px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 20px 50px -20px #0008; }
+.modal .disk h2 { font-size: 20px; margin: 0 0 12px; }
+.modal .disk label { display: flex; gap: 8px; align-items: center; }
+.modal .disk input, .modal .disk select { font: inherit; background: var(--bg, #fbf9f4); color: var(--ink, #1b2233); border: 1px solid var(--line, #e4dfd3); border-radius: 6px; padding: 6px 8px; }
+.modal .disk label input { flex: 1; min-width: 0; }
+.modal .disk select { display: block; width: 100%; margin: 6px 0 4px; }
+.modal .disk .note { margin: 0; color: var(--muted, #5d6475); font-size: 15px; }
+.modal .disk button { font: 600 15px var(--sans, system-ui, sans-serif); padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line, #e4dfd3); background: transparent; color: var(--ink, #1b2233); cursor: pointer; white-space: nowrap; }
+.modal .disk button:disabled { opacity: 0.45; cursor: default; }
+.modal .disk .buttons { display: flex; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; margin: 18px 0 0; }
+.modal .disk .buttons .aside { display: flex; gap: 8px; margin-right: auto; }
+@media (max-width: 600px) { .modal .disk .buttons { flex-wrap: wrap; } }
+.modal .disk .buttons .default { background: var(--accent, #1d2a4a); color: var(--accent-ink, #f3e3b5); border-color: var(--accent, #1d2a4a); }

package/remake/c64-view.js

@@ -0,0 +1,30 @@
+// The view of a Commodore 64 title (Zoopak): the frame the VIC-II paints from the remake's
+// memory and chips (@moonbase-machines/c64/paint.js), border and all, 384 by 272 in the machine's colours. The
+// character ROM, which a text screen in the machine's own letters needs, is the one the emulator
+// is given (the page's `roms`), when it is there.
+import { paint } from '@moonbase-machines/c64/paint.js';
+import { PALETTE, WIDTH, HEIGHT } from '@moonbase-machines/c64/vic.js';
+
+const NS = 'http://www.w3.org/2000/svg';
+
+export class C64View {
+  constructor(svg, { engine, chargen }) {
+    this.svg = svg; this.engine = engine; this.chargen = chargen;
+    svg.setAttribute('viewBox', `0 0 ${WIDTH * 2} ${HEIGHT * 2}`);
+    this.canvas = document.createElement('canvas'); this.canvas.width = WIDTH; this.canvas.height = HEIGHT;
+    this.image = document.createElementNS(NS, 'image');
+    for (const [k, v] of Object.entries({ x: 0, y: 0, width: WIDTH * 2, height: HEIGHT * 2, preserveAspectRatio: 'none', style: 'image-rendering: pixelated' })) this.image.setAttribute(k, v);
+    svg.append(this.image);
+  }
+  snapshot(e) { return e; }
+  apply() {}
+  prompts() {
+    const e = this.engine, frame = paint(e.mem, e.title.chip, this.chargen, this.vic, e.title.splits);
+    const ctx = this.canvas.getContext('2d'), pixels = ctx.createImageData(WIDTH, HEIGHT);
+    for (let i = 0; i < frame.length; i++) { const [r, g, b] = PALETTE[frame[i]]; pixels.data.set([r, g, b, 255], i * 4); }
+    ctx.putImageData(pixels, 0, 0);
+    // and the border's colour on either side, where the page is wider than the frame
+    this.svg.style.background = `rgb(${PALETTE[frame[0]].join(',')})`;
+    this.image.setAttribute('href', this.canvas.toDataURL());
+  }
+}

package/remake/card-view.js

@@ -0,0 +1,53 @@
+// The view of a card toolkit title (card.js): the screen as the remake's memory holds
+// it, the hi-res page the soft switches show, or the text screen, painted dot for dot as the
+// machine's page paints it (@moonbase-machines/apple2e/screen.js), 560 by 384. The toolkit's pictures are bitmaps,
+// and this is them as they are; drawing them sharper is for later.
+//
+// `inset` (a title's, its title.js), when set on: the screen's band at the top, where it is (its rows above
+// `top` all white), its dots `move` moved `by`, to make room for a mini view; `banded`, whether the band was there
+// at the last painting.
+import { paintHires, paintText } from '@moonbase-machines/apple2e/screen.js';
+
+const NS = 'http://www.w3.org/2000/svg';
+
+export class CardView {
+  constructor(svg, { engine, inset = null }) {
+    this.svg = svg; this.engine = engine; this.inset = inset; this.insetOn = false; this.banded = false;
+    svg.setAttribute('viewBox', '0 0 560 384');
+    this.canvas = document.createElement('canvas'); this.canvas.width = 560; this.canvas.height = 384;
+    this.image = document.createElementNS(NS, 'image');
+    for (const [k, v] of Object.entries({ x: 0, y: 0, width: 560, height: 384, preserveAspectRatio: 'none', style: 'image-rendering: pixelated' })) this.image.setAttribute(k, v);
+    svg.append(this.image);
+  }
+  snapshot(e) { return e; }
+  apply() {}
+  // the screen, when a run has gone as far as it goes
+  prompts() {
+    const mem = this.engine.mem, s = this.engine.title.screen, ctx = this.canvas.getContext('2d');
+    const pixels = ctx.createImageData(560, 384);
+    if (s.text) paintText(pixels.data, mem, mem, false, [0, 24]);
+    else {
+      const page = s.page2 ? 0x4000 : 0x2000;
+      paintHires(pixels.data, mem.subarray(page, page + 0x2000));
+      if (s.mixed) paintText(pixels.data, mem, mem, false, [20, 24]);
+    }
+    this.banded = this.insetOn && !!this.inset && band(pixels.data, this.inset);
+    if (this.banded) shift(pixels.data, this.inset);
+    ctx.putImageData(pixels, 0, 0);
+    this.image.setAttribute('href', this.canvas.toDataURL());
+  }
+}
+
+// (whether the band is on the screen: its rows above `top` white, the whole width)
+function band(px, { top }) {
+  for (let y = 0; y < top; y++) for (let x = 0; x < 560; x++) { const i = (y * 560 + x) * 4; if (px[i] < 200 || px[i + 1] < 200 || px[i + 2] < 200) return false; }
+  return true;
+}
+// (the band's rows `top` to `bottom`: the dots `move` moved `by`, white where they were)
+function shift(px, { top, bottom, move: [from, to], by }) {
+  for (let y = top; y <= bottom; y++) {
+    const row = y * 560 * 4;
+    px.copyWithin(row + (from + by) * 4, row + from * 4, row + to * 4);
+    if (by < 0) px.fill(255, row + (to + by) * 4, row + to * 4); else px.fill(255, row + from * 4, row + (from + by) * 4);
+  }
+}