@moonbase-machines/player 0.9.1 → 0.11.0

package/original.js

@@ -1,200 +0,0 @@
-// 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/remake/main.js

@@ -1,51 +0,0 @@
-// The remake in the browser: one player for every title. The page gives it the title's folder and its game's data;
-// the player makes its part of the page, the stage the game is drawn on and the options line under it with the
-// game's status, loads the title (load.js), puts its stylesheet in the page where it has one, and hands the game to
-// its engine: the remake's own for a title of scenes, 'card' or 'vector' (scenes.js), or the title's own, a module in
-// its folder (its title.js `engine`), given the same. A failure is said in the status line.
-//
-//   await play({ title, data, root, disk, preview, words, watch, claim, pace, route, mini, roms })
-//     title      the title's folder, an absolute URL
-//     data       its game's data, an absolute URL (for a title of its own engine, the folder its data is in)
-//     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
-//     preview    the preview's build: what only it has may be used
-//     words      the page's words the player shows: { printer: { line, print, tear } }
-//     watch      called with the game, { engine, press, quick }, for a page that follows it
-//     claim      k => true to take a key of the player's before the game does
-//     pace       how much of the original's waits: 1 all (the default), 0 none, between a part of each; read at
-//                each wait
-//   and what only a workshop has, given by its pages, never looked for here:
-//     route      a route to play first, { route, keys }: its keys, and the pilots' key handling (expand, give,
-//                petscii, pollsAt)
-//     mini       a mini view for a title with an `inset`, (at, { memory }) => { mode(m) }
-//     roms       the makers' ROMs this machine has: { chargen } for a Commodore 64 title's characters
-//
-// What the engine is handed, its own engine's or the remake's, `game`: { title, scripts, disk, folder, stage,
-// options, status, fail, kept, preview, words, ...the page's options }; `stage` is its to draw in, `options` the
-// line its own controls go on, before the status.
-import { loadTitle } from './load.js';
-import { play as scenes } from './scenes.js';
-
-export async function play(options) {
-  const { title: folder, data, root, disk: kept, preview = false, words } = options;
-  root.classList.add('remake');
-  root.innerHTML = '<div class="stage"></div><p class="options"><span id="status">Loading.</span></p>';
-  const stage = root.querySelector('.stage'), line = root.querySelector('.options'), status = root.querySelector('#status');
-  const fail = err => { status.textContent = 'The remake stopped: ' + err.message; status.className = 'error'; console.error(err); };
-  try {
-    // ?fixed: the title with its bugs fixed, for one that has such a version (its title.js `fixed`)
-    const fixed = new URLSearchParams(location.search).has('fixed');
-    const { title, scripts, disk } = await loadTitle(folder, { data, fixed });
-    title.disk = disk;
-    // the title's own styles, where it has them (its title.js `style`, a file in its folder), in place before it
-    // draws by them
-    if (title.style && !document.querySelector(`link[data-title="${title.slug}"]`)) {
-      const link = Object.assign(document.createElement('link'), { rel: 'stylesheet', href: new URL(title.style, folder).href });
-      link.dataset.title = title.slug; document.head.append(link);
-      await new Promise(done => { link.onload = link.onerror = done; });
-    }
-    const game = { ...options, title, scripts, disk, folder, data, stage, options: line, status, fail, kept, preview, words, fixed };
-    await (title.own ?? { play: scenes }).play(game);
-  } catch (err) { fail(err); }
-}

package/remake/scenes.js

@@ -1,243 +0,0 @@
-// A title of scenes played, the remake's own engine (main.js hands it the game): its scripts on the engine, its events
-// drawn by the view, on the stage; its controls on the options line, the sound, the old style text, a C64 title's
-// printer, the bugs fixed where the title has a version so, the mini view where the page gives one. A run's events
-// are drawn one after another, with a moment for each sound and flash, so that what the original took time over takes
-// time here too.
-import { Printer, paper } from '@moonbase-machines/c64/printer.js';
-import { makeEngine } from './load.js';
-import { Speaker } from '../audio.js';
-import { SID } from '@moonbase-machines/c64/sid.js';
-import { matrixOf } from '@moonbase-machines/c64/kernal.js';
-import { standIn } from '@moonbase-machines/c64/rom.js';
-import { withSaves, keepSaves } from '@moonbase-machines/apple2e/saves.js';
-import { Drive } from '@moonbase-machines/c64/drive.js';
-import { keepDrive } from '@moonbase-machines/c64/saves.js';
-import { paperBox, phoneKeys, KEYS_MARKUP } from '../parts.js';
-import { View } from './view.js';
-import { CardView } from './card-view.js';
-import { C64View } from './c64-view.js';
-
-export async function play(game) {
-  const { title, scripts, disk, root, stage, status, fail, kept, words, fixed } = game;
-  root.classList.add('game');   // (the screen of a machine: the stage the game's own shape, player.css)
-  stage.innerHTML = `<svg id="screen" preserveAspectRatio="xMidYMid meet" tabindex="0" aria-label="The game's screen"></svg>`;
-  status.insertAdjacentHTML('afterend', `${KEYS_MARKUP}<label><input type="checkbox" id="sound"> Sound</label><label><input type="checkbox" id="old-style"> Old style text</label><label hidden><input type="checkbox" id="printer" checked> Printer</label><label hidden title="The game with its bugs fixed: it starts again"><input type="checkbox" id="fixed"> Bugs fixed</label><label hidden>Mini view <select id="mini"><option value="">Off</option><option value="live">Live</option><option value="pictures">Pictures</option></select></label>`);
-  root.append(paperBox(words.printer));
-  const $ = id => root.querySelector('#' + id);
-  const svg = $('screen'), soundBox = $('sound');
-  phoneKeys(root, stage);
-
-try {
-  // the choice of the fixed version, where there is one: the page again, with ?fixed or without
-  const fixedBox = $('fixed');
-  if (fixedBox && title.fixed) {
-    fixedBox.checked = fixed; fixedBox.parentElement.hidden = false;
-    fixedBox.addEventListener('change', () => { const u = new URL(location.href); if (fixedBox.checked) u.searchParams.set('fixed', ''); else u.searchParams.delete('fixed'); location.href = u.href.replace('fixed=&', 'fixed&').replace(/fixed=$/, 'fixed'); });
-  }
-  // its view's own drawing, for a title that has one (its title.js `view`, load.js)
-  const extra = title.viewSteps ?? {};
-  // a Commodore 64's character ROM, for its view: Commodore's where the page gives them (`roms`), else moonbase's own
-  const chargen = disk.kind === 'c64' ? game.roms?.chargen ?? standIn().chargen : null;
-
-  // A printer on device 4, for a Commodore 64 title (@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
-  if (disk.kind === 'c64') {
-    const box = $('printer'), sheet = $('paper'), shown = $('paper-box');
-    try { box.checked = localStorage.getItem('remake-printer') !== '0'; } catch {}
-    box.parentElement.hidden = false;
-    const printer = title.printer = new Printer({ on: box.checked });
-    box.addEventListener('change', () => { printer.on = box.checked; try { localStorage.setItem('remake-printer', box.checked ? '1' : '0'); } catch {} });
-    printer.changed = () => { shown.hidden = !printer.lines.length; if (printer.lines.length) paper(sheet, printer, chargen); };
-    $('tear').addEventListener('click', () => printer.tear());
-    $('print-paper').addEventListener('click', () => window.print());   // (the sheet alone: its print style)
-  }
-  // what the game saves, on the player's disk: an Apple title's data disk (@moonbase-machines/apple2e/saves.js), a
-  // Commodore 64 title's drive (@moonbase-machines/c64/saves.js, the drive card.js puts on the bus)
-  title.disk = withSaves(disk, kept);
-  if (disk.kind === 'c64') keepDrive(title.drive = new Drive(Uint8Array.from(atob(disk.image), ch => ch.charCodeAt(0))), kept);
-  const engine = makeEngine(title, scripts);
-  if (title.files) keepSaves(disk, title.files, kept);
-  const queue = [];
-  // The view, and every event it has drawn, so that it can be drawn again from the start when
-  // the old style text is turned on or off. The choice is kept in this browser.
-  const oldStyleBox = $('old-style'), history = [];
-  const remember = { get() { try { return localStorage.getItem('remake-old-style') === '1'; } catch { return false; } }, set(v) { try { localStorage.setItem('remake-old-style', v ? '1' : '0'); } catch {} } };
-  oldStyleBox.checked = remember.get() || new URLSearchParams(location.search).has('old-style');   // ?old-style, for a screenshot
-  let onView = null;   // (the mini view's, given each view made)
-  const makeView = () => { svg.replaceChildren(); const v = disk.kind === 'c64' ? new C64View(svg, { engine, chargen }) : title.engine === 'card' ? new CardView(svg, { engine, inset: game.mini ? title.inset : null }) : new View(svg, { disk, volume: Object.keys(disk.volumes)[0], engine, extra }); v.oldStyle = oldStyleBox.checked; onView?.(v); return v; };
-  let view = makeView();
-  engine.on(e => queue.push(view.snapshot({ ...e })));
-  // The mini view, where the page gives one (`mini`) and the title has a place for it (its title.js `inset`): Off,
-  // Live or Pictures, the choice kept in this browser; shown in the band at the top of the screen while the band is
-  // there. A picture only: the game's screen otherwise as it is
-  const miniBox = $('mini');
-  if (title.inset && game.mini) {
-    miniBox.parentElement.hidden = false;
-    try { miniBox.value = localStorage.getItem('remake-mini') ?? ''; } catch {}
-    const { top, bottom, view: [left, right] } = title.inset, at = document.createElement('div');
-    at.className = 'mini'; at.hidden = true;
-    Object.assign(at.style, { left: `${left / 5.6}%`, top: `${top / 3.84}%`, width: `${(right - left) / 5.6}%`, height: `${(bottom - top + 1) / 3.84}%` });
-    svg.parentElement.append(at);
-    const mini = await game.mini(at, { memory: () => engine.mem });
-    // (each view's painting followed by the mini view shown or not, as the band is there or not)
-    onView = v => { v.insetOn = !!miniBox.value; const prompts = v.prompts.bind(v); v.prompts = () => { prompts(); at.hidden = !(miniBox.value && v.banded); }; };
-    onView(view);
-    const show = () => { view.insetOn = !!miniBox.value; mini.mode(miniBox.value); view.prompts(); };
-    miniBox.addEventListener('change', () => { try { localStorage.setItem('remake-mini', miniBox.value); } catch {} show(); });
-    show();
-  }
-  oldStyleBox.addEventListener('change', () => {
-    remember.set(oldStyleBox.checked);
-    view = makeView();
-    for (const e of history) view.apply(e);
-    view.prompts();
-  });
-
-  // the sound: the original's are off until the teacher turns them on, at the engine's sound flag.
-  // A title that keeps the original's time (a card title's, Engine.time) clicks the speaker as
-  // the original did, and the clicks are played as the emulator plays them (audio.js), the
-  // box the sound's on and off.
-  const speaker = engine.timed ? new Speaker() : null;
-  if (speaker) soundBox.checked = true;
-  const hear = () => { if (disk.kind !== 'c64') speaker?.feed(soundBox.checked ? engine.clicks : [], engine.cycles); engine.clicks.length = 0; };
-  const V = title.map?.vars ?? { sound: 0, soundOn: 0 };
-  let audio = null;
-  const tone = (from, to, ms) => {
-    if (!(engine.mem[V.sound] & V.soundOn)) return;
-    audio ??= new AudioContext();
-    const o = audio.createOscillator(), g = audio.createGain(), t = audio.currentTime;
-    o.type = 'square'; o.frequency.setValueAtTime(from, t); o.frequency.linearRampToValueAtTime(to, t + ms / 1000);
-    g.gain.setValueAtTime(0.06, t); g.gain.linearRampToValueAtTime(0, t + ms / 1000);
-    o.connect(g).connect(audio.destination); o.start(t); o.stop(t + ms / 1000);
-  };
-  const pitch = p => 16000 / (p + 8);
-  soundBox.addEventListener('change', () => { if (!speaker) engine.mem[V.sound] = soundBox.checked ? V.soundOn : 0; });
-
-  // how long each step takes to be seen or heard, in milliseconds
-  const PACE = { sound: 220, beep: 60, 'flash-box': 60, flash: 250, object: 30, 'object-keep': 30 };
-  const pace = () => game.pace ?? 1;   // (the original's waits, a part of each: 1 all, 0 none; read at each wait)
-  let drawing = false;
-  const sleep = ms => new Promise(r => setTimeout(r, ms));
-  async function runs() {
-    if (drawing) return;
-    drawing = true;
-    try {
-      for (;;) {
-        const r = engine.run();
-        hear();
-        // the original took time here, a disk's read or a wait it counted out: the screen as it
-        // is, for that long (card.js)
-        if (r === 'pace') {
-          for (const e of queue.splice(0)) { history.push(e); view.apply(e); }
-          view.prompts(); if (!quick && pace()) await sleep(engine.delay * pace()); engine.delay = 0;
-          continue;
-        }
-        engine.delay = 0;
-        while (queue.length) {
-          const e = queue.shift();
-          history.push(e);
-          view.apply(e);
-          if (quick) continue;   // (at full speed: no sound, no wait)
-          if (e.step === 'sound') { const [end, start] = e.words.split(' ').map(h => parseInt(h, 16)); tone(pitch(start), pitch(end), 180); }
-          if (e.step === 'beep') tone(pitch(e.a & 31) * 2, pitch(e.a & 31) * 2, 50);
-          if (!pace()) continue;   // (none of the original's waits: its sounds still)
-          if (PACE[e.step]) await sleep(PACE[e.step] * pace());
-          if (e.step === 'pause') await sleep(e.ms * pace());   // a delay the original counted out
-        }
-        view.prompts();
-        status.textContent = r === 'end' ? 'The end.' : 'Waiting for a key.';
-        if (!engine.keys.length || r === 'end') break;
-      }
-    } catch (err) { fail(err); }
-    drawing = false;
-  }
-
-  // keys as the Apple's keyboard gave them
-  // (a Commodore 64's in PETSCII: its cursor keys, DEL and RUN/STOP, and its letters capitals)
-  const KEYS = disk.kind === 'c64'
-    ? { ArrowLeft: 157, ArrowRight: 29, ArrowDown: 17, ArrowUp: 145, Enter: 13, Backspace: 20, Delete: 20, Escape: 3, ' ': 32 }
-    : { ArrowLeft: 8, ArrowRight: 21, ArrowDown: 10, ArrowUp: 11, Enter: 13, Backspace: 127, Delete: 127, Escape: 27, ' ': 32 };
-  let quick = false;
-  const press = k => { engine.press(k); audio?.resume(); speaker?.start(); if (disk.kind !== 'c64') runs(); };
-  // (a page that follows the game, the island's, given it: the engine, its memory, a key pressed as the
-  // player presses one, and `quick(on)`, the game at full speed, none of its waits, to jump ahead in it)
-  game.watch?.({ engine, press, quick: on => { quick = on; } });
-  // A game that goes on without waiting for keys, as Nature Park's truck: each turn of its loop is
-  // a step `tick`, which takes a key or none. A turn passes every 100 milliseconds, as the
-  // original's took, with the key pressed since the last or still held, as the Apple's keyboard
-  // told the game a key was down.
-  const ticking = () => engine.waitingOn?.words?.[0] === 'tick';
-  let held = null, tapped = null;
-  setInterval(() => {
-    if (!ticking() || drawing || engine.keys.length) return;
-    const k = tapped ?? held ?? -1; tapped = null;
-    press(k);
-  }, 100);
-  window.addEventListener('keydown', e => {
-    if (e.metaKey || e.altKey) return;
-    const k = e.ctrlKey ? (/^[a-z]$/i.test(e.key) ? e.key.toUpperCase().charCodeAt(0) & 0x1f : undefined) : KEYS[e.key] ?? (e.key.length === 1 ? (disk.kind === 'c64' ? e.key.toUpperCase() : e.key).charCodeAt(0) : undefined);
-    if (k === undefined) return;
-    e.preventDefault();
-    if (ticking()) { tapped = held = k; return; }
-    // a Commodore 64's key held down in its keyboard's matrix, which its KERNAL scans and repeats
-    // as long as it is held, as the original's did (@moonbase-machines/c64/kernal.js); a character typed only
-    // with shift into the buffer
-    const m = disk.kind === 'c64' && !e.ctrlKey && matrixOf(k);
-    if (m) { if (!e.repeat) { engine.clock.held = { ...m, key: e.key }; audio?.resume(); speaker?.start(); } return; }
-    if (!e.repeat && !game.claim?.(k)) press(k);   // (the player's key offered to the page first: `claim`, main.js)
-  });
-  window.addEventListener('keyup', e => {
-    held = null;
-    const h = engine.clock?.held;
-    if (h?.key === e.key) { if (h.seen) engine.clock.held = null; else h.up = true; }
-  });
-  svg.addEventListener('click', e => { const key = e.target.closest('.key')?.dataset.key; if (key) press(+key); });
-  svg.focus();
-  // A Commodore 64 title runs on the clock, as the original did, waiting for a key or not: a
-  // sixtieth of a second of the original's cycles at a time (the engine's run stops at each 16 ms of
-  // them), its raster and its interrupt at the time they come (card.js), and the screen
-  // painted after each. And the SID, its writes played a sixtieth of a second at a time, as the
-  // emulator plays a frame's (original.js).
-  if (disk.kind === 'c64') {
-    // a route the page gives (`route`, a workshop's pilots' route) played first as the pilots play it, each key when
-    // the game waits for one, off the clock, so that it goes where it went on both sides; then the game goes on as
-    // usual
-    if (game.route) {
-      const { route, name: routeName, keys: { expand, give, petscii, pollsAt } } = game.route;
-      title.seed = route.seed;   // (RND's numbers from the route's seed, as the pilots have them)
-      if (route.printer && title.printer) { title.printer.on = true; $('printer').checked = true; }
-      status.textContent = 'Playing the route ' + routeName + '.';
-      // (a key behind the one pressed goes into the KERNAL's buffer, as the pilots hold a key)
-      const side = { press: k => engine.press(k), also: k => { const m = engine.mem, put = v => { if (m[0xc6] < 10) { m[0x277 + m[0xc6]] = v; m[0xc6]++; } }; if (engine.keys.length) put(engine.keys.shift()); put(k); } };
-      const go = () => { let r; do { engine.delay = 0; r = engine.run(); } while (r === 'pace'); queue.length = 0; };
-      go();
-      for (const [i, [k]] of expand(route.keys).entries()) { give(side, k, petscii); engine.polls = pollsAt(route, i + 1) ?? undefined; go(); }
-      engine.polls = undefined; view.prompts();
-    }
-    engine.sid = []; engine.clock = { irq: 0, ahead: [], since: 0 };
-    let sid = null, from = null, sent = 0, stopped = false;
-    status.textContent = 'Playing.';
-    setInterval(() => {
-      engine.delay -= 1000 / 60;   // a load's time, or the last run's
-      if (!stopped && !engine.ended && engine.delay < 16) {
-        engine.delay = Math.max(0, engine.delay);
-        // a key of ?keys when the game is waiting for one, two seconds at least after the last, as
-        // a player would press them (a wait the game counts out goes on by itself on the clock)
-        if (engine.clock.ahead.length && engine.idle > (engine.routines.polls ?? 200) && !engine.keys.length && ++engine.clock.since > 120) { engine.press(engine.clock.ahead.shift()); engine.clock.since = 0; }
-        try { engine.run(); queue.length = 0; view.prompts(); } catch (err) { stopped = true; fail(err); }
-        if (engine.ended) status.textContent = 'The end.';
-      }
-      if (speaker?.node && soundBox.checked) {
-        sid ??= new SID(speaker.rate); from ??= performance.now();
-        const n = Math.floor((performance.now() - from) / 1000 * speaker.rate) - sent;
-        if (n > 0) { const wave = sid.render(n, engine.sid.map(([, r, v]) => [0, r, v])); sent += n; speaker.node.port.postMessage(wave, [wave.buffer]); }
-      }
-      engine.sid.length = 0;
-    }, 1000 / 60);
-  }
-  // ?keys=space,space,right,return presses keys at the start, to go straight to a scene
-  const start = new URLSearchParams(location.search).get('keys');
-  if (start) for (const k of start.split(',')) { const a = { space: 32, return: 13, escape: 27, delete: 127, left: 8, right: 21, down: 10, up: 11, 'control-e': 5, 'control-t': 20, none: -1 }[k] ?? k.charCodeAt(0); if (disk.kind === 'c64') engine.clock.ahead.push({ 8: 157, 21: 29, 10: 17, 11: 145, 127: 20, 27: 3 }[a] ?? a); else engine.press(a); }
-  if (disk.kind !== 'c64') runs();
-} catch (err) { fail(err); }
-}