@moonbase-machines/player 0.10.0 → 0.12.0

package/engines/original.js

@@ -10,6 +10,9 @@
 // and `studies`, files of its own for a Commodore 64 game's disk, a name to its bytes in base64, in the drive, not kept.
 import { Speaker } from '../audio.js';
 
+// the setting the Apple's engine acts on (play.js `setting`): its pictures drawn as vectors over the screen
+const VECTORS = { name: 'vectors', type: 'boolean', default: false, owner: 'person', words: 'Draw the pictures as vectors' };
+
 export async function play(g) {
   g.stage.innerHTML = '<svg id="vector" viewBox="0 0 140 192" preserveAspectRatio="none"></svg><canvas id="screen" width="560" height="384" tabindex="0"></canvas>';
   const canvas = g.stage.querySelector('canvas'), ctx = canvas.getContext('2d'), layer = g.stage.querySelector('#vector');
@@ -19,12 +22,11 @@ export async function play(g) {
 // 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, saves, roms: makers, status, control, $ }, { canvas, ctx, layer, speaker }) {
+async function apple({ game, saves, roms: makers, status, setting }, { canvas, ctx, layer, speaker }) {
 const [{ Machine }, { placed }, { screen }, { shapes }, { elements }] = await Promise.all([
   import('@moonbase-machines/apple2e/machine.js'), import('@moonbase-machines/apple2e/prodos.js'),
   import('@moonbase-machines/apple2e/screen.js'), import('@moonbase-machines/vector/pictures.js'), import('@moonbase-machines/vector/svg.js')]);
-control('<label><input type="checkbox" id="vectors"> Draw the pictures as vectors</label>');
-const vectorToggle = $('vectors');
+const vectors = setting(VECTORS);
 // the title's saves on its own volume, the player's disk's (play.js `saves`): 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 = saves.data;
@@ -73,9 +75,9 @@ function frame() {
   speaker.feed(sound ? 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 });
+  screen(m, rgba, { cols, owner: vectors.value && layer.innerHTML ? m.owner : null });
   ctx.putImageData(image, 0, 0);
-  layer.style.visibility = vectorToggle.checked && !text ? 'visible' : 'hidden';
+  layer.style.visibility = vectors.value && !text ? 'visible' : 'hidden';
   status.textContent = m.halted ? 'The game has stopped: ' + m.halted + '.' : (m.idle > 2000 ? 'Waiting for a key.' : 'Running.');
   requestAnimationFrame(frame);
 }
@@ -86,7 +88,7 @@ return {
   run() { canvas.focus(); frame(); },
   press(k) { console.log('key', k, 'at pc $' + m.cpu.pc.toString(16)); m.press(k); },
   start() { speaker.start(); },
-  sound(on) { sound = on; }, soundOn: true,
+  sound(on) { sound = on; },
   engine: m,
 };
 }
@@ -94,7 +96,7 @@ return {
 // 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.
+// 384 by 272 doubled, the keys as the matrix, the arrows its cursor keys, and a gamepad the joystick.
 async function c64(g, { canvas, layer, speaker }) {
   const { game, saves, roms: makers, studies, status, printer } = g;
   const [{ C64 }, { keyboard, painter }, { SID }, { c64Roms, typed: startTyped }, { add }] = await Promise.all([
@@ -144,7 +146,7 @@ async function c64(g, { canvas, layer, speaker }) {
     press(k) { m.type(String.fromCharCode(k)); },   // (into the KERNAL's buffer, as typed)
     key(e) { for (const f of listeners[e.type]) f(e); },
     start() { speaker.start(); },
-    sound(on) { sound = on; }, soundOn: true,
+    sound(on) { sound = on; },
     engine: m,
     // the disk as it now stands, its own files and those saved: a .d64 that VICE or a real 64 can use
     // (@moonbase-machines/c64/d64.js `add`)

package/engines/scenes.js

@@ -1,10 +1,14 @@
 // The Remake's engine for a title of scenes, 'card' or 'vector' (play.js hands it the game): its scripts on the
 // remake's engine (remake/engine.js), its events drawn by the view on the stage, the view the machine's (an Apple's
-// hi-res page for a card title, CardView; a Commodore 64's, C64View; a vector title's pictures and text, View); its own
-// control on the options line, the old style text; the mini view where the page gives one and the title has a place
-// for it. A run's events are drawn one after another, with a moment for each sound and flash, so that what the
+// hi-res page for a card title, CardView; a Commodore 64's, C64View; a vector title's pictures and text, View); the
+// settings it acts on (play.js `game.setting`): the old style text, where its view draws text of its own (View); the
+// mini view, where the page gives one and the title has a place for it. 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 { makeEngine } from '../remake/load.js';
+
+// the settings this engine acts on (play.js `setting`): the old style text, a vector title's; the mini view
+const OLD_STYLE = { name: 'old-style', type: 'boolean', default: false, owner: 'person', words: 'Old style text' };
+const MINI = { name: 'mini', type: ['', 'live', 'pictures'], default: '', owner: 'person', words: 'Mini view', labels: ['Off', 'Live', 'Pictures'] };
 import { Speaker } from '../audio.js';
 import { SID } from '@moonbase-machines/c64/sid.js';
 import { matrixOf } from '@moonbase-machines/c64/kernal.js';
@@ -18,8 +22,7 @@ export async function play(g) {
   const { title, scripts, game: disk, stage, status, fail, saves, $ } = g;
   const c64 = disk.kind === 'c64';
   stage.innerHTML = `<svg id="screen" preserveAspectRatio="xMidYMid meet" tabindex="0" aria-label="The game's screen"></svg>`;
-  g.control('<label><input type="checkbox" id="old-style"> Old style text</label>');
-  const svg = $('screen');
+  const svg = $('screen'), drawn = c64 ? 'c64' : title.engine === 'card' ? 'card' : 'vector';
 
   // its view's own drawing, for a title that has one (its title.js `view`, load.js)
   const extra = title.viewSteps ?? {};
@@ -35,52 +38,49 @@ export async function play(g) {
   const engine = makeEngine(title, scripts);
   if (title.files) saves.keep(title.files);
   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
+  // 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: a setting only where the view draws text of its own, a vector title's (View), the others drawing
+  // the machine's own screen
+  const history = [];
+  const oldStyle = drawn === 'vector' ? g.setting(OLD_STYLE) : { value: false, on() { return this; } };
   let onView = null;   // (the mini view's, given each view made)
-  const makeView = () => { svg.replaceChildren(); const v = c64 ? new C64View(svg, { engine, chargen }) : title.engine === 'card' ? new CardView(svg, { engine, inset: g.mini ? title.inset : null }) : new View(svg, { disk, volume: Object.keys(disk.volumes)[0], engine, extra }); v.oldStyle = oldStyleBox.checked; onView?.(v); return v; };
+  const makeView = () => { svg.replaceChildren(); const v = drawn === 'c64' ? new C64View(svg, { engine, chargen }) : drawn === 'card' ? new CardView(svg, { engine, inset: g.mini ? title.inset : null }) : new View(svg, { disk, volume: Object.keys(disk.volumes)[0], engine, extra }); v.oldStyle = oldStyle.value; 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');
+  // Live or Pictures, a setting; 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
   if (title.inset && g.mini) {
-    miniBox.parentElement.hidden = false;
-    try { miniBox.value = localStorage.getItem('remake-mini') ?? ''; } catch {}
+    const choice = g.setting(MINI);
     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 g.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 = v => { v.insetOn = !!choice.value; const prompts = v.prompts.bind(v); v.prompts = () => { prompts(); at.hidden = !(choice.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(); });
+    const show = () => { view.insetOn = !!choice.value; mini.mode(choice.value); view.prompts(); };
+    choice.on(show);
     show();
   }
-  oldStyleBox.addEventListener('change', () => {
-    remember.set(oldStyleBox.checked);
+  oldStyle.on(() => {
     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.
+  // the sound: 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); a vector title's tones play where its own
+  // sound flag is on, the teacher's setting in the game, as on the original. The player's Sound setting (play.js) is
+  // the speaker, on or off, for both.
   const speaker = engine.timed ? new Speaker() : null;
-  let sounding = !!speaker;
+  let sounding = true;
   const hear = () => { if (!c64) speaker?.feed(sounding ? 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;
+    if (!sounding || !(engine.mem[V.sound] & V.soundOn)) return;
     audio ??= new AudioContext();
     const o = audio.createOscillator(), gain = audio.createGain(), t = audio.currentTime;
     o.type = 'square'; o.frequency.setValueAtTime(from, t); o.frequency.linearRampToValueAtTime(to, t + ms / 1000);
@@ -193,16 +193,14 @@ export async function play(g) {
     // pressed
     keys(list) { if (c64) engine.clock.ahead.push(...list); else for (const k of list) press(k); },
     start() { audio?.resume(); speaker?.start(); },
-    // the Sound box: the speaker's clicks, where the title keeps the original's time; else the game's own sound flag
-    sound(on) { if (speaker) sounding = on; else engine.mem[V.sound] = on ? V.soundOn : 0; },
-    soundOn: !!speaker,
+    sound(on) { sounding = on; },   // (the player's speaker: play.js)
     quick(on) { quick = on; },
     // 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
     route({ route, name, keys: { expand, give, petscii, pollsAt } }) {
       title.seed = route.seed;   // (the random numbers from the route's seed, as the pilots have them)
-      if (route.printer && title.printer) { title.printer.on = true; $('printer').checked = true; }
+      if (route.printer && title.printer) { title.printer.on = true; const box = $('printer'); if (box) box.checked = true; }
       status.textContent = 'Playing the route ' + name + '.';
       // (on a Commodore 64 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); } };

package/index.js

@@ -5,6 +5,8 @@
 export * as play from './play.js';
 export * as keys from './keys.js';
 export * as saves from './saves.js';
+export * as settings from './settings.js';
+export * as provider from './provider.js';
 export * as enginesOriginal from './engines/original.js';
 export * as enginesScenes from './engines/scenes.js';
 export * as audio from './audio.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moonbase-machines/player",
-  "version": "0.10.0",
+  "version": "0.12.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",
@@ -14,11 +14,11 @@
     "moonbase-play": "./bin/moonbase-play.mjs"
   },
   "dependencies": {
-    "@moonbase-machines/apple2e": "0.10.0",
-    "@moonbase-machines/c64": "0.10.0",
-    "@moonbase-machines/charset": "0.10.0",
-    "@moonbase-machines/mos6502": "0.10.0",
-    "@moonbase-machines/vector": "0.10.0"
+    "@moonbase-machines/apple2e": "0.12.0",
+    "@moonbase-machines/c64": "0.12.0",
+    "@moonbase-machines/charset": "0.12.0",
+    "@moonbase-machines/mos6502": "0.12.0",
+    "@moonbase-machines/vector": "0.12.0"
   },
   "scripts": {
     "test": "node --test test/*.test.js",

package/play.js

@@ -1,11 +1,13 @@
 // The player: one way in for every title and every way to play it, the Original (the game's own disk on the machine
 // it was made for) and the Remake (its scenes on the remake's engine, or the title's own engine). The player makes its
 // part of the page and owns it, the same for all: the section and its classes, the stage and its size, the options
-// line and the status, the keys, the sound, the printer, the saves on the player's disk, and what the page asks of it;
-// the engine plays the game on the stage and does nothing of the page's.
+// line and the status, the keys, the sound, the printer, the saves on the title's disk, and what the page asks of it;
+// the engine plays the game on the stage and does nothing of the page's. The page tells the player everything: the
+// disk and the settings are the page's to give (its provider, provider.js), and the player reads no address and
+// keeps nothing in the browser itself.
 //
-//   await play({ way, slug, title, data, root, disk, backend, preview, words, screen, watch, claim, pace, route, mini,
-//                roms, studies, downloadDisk })
+//   await play({ way, slug, title, data, root, disk, settings, preview, words, screen, watch, claim, pace, keys,
+//                route, mini, roms, studies, downloadDisk })
 //     way          'original' or 'remake' (the default)
 //     slug         the title's name in addresses: its section's class, its disk
 //     title        the title's folder, an absolute URL (title.js, its scenes, compiled/, its own modules), where it
@@ -13,8 +15,8 @@
 //     data         its game's data, an absolute URL (<name>.json: its disks' files, its kind, its saves), or 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); else the player opens it, `title/<slug>`, on `backend`
-//                  where the page gives one (the browser's own, unless it does)
+//     disk         the title's disk (disk/disk.js `openDisk`, `title/<slug>`), the page's to open where it keeps files
+//     settings     the person's settings, the page's typed store (settings.js): each declared setting's value, kept
 //     preview      the preview's build: what only it has may be used
 //     words        the page's words the player shows: { printer: { line, print, tear } }
 //     screen       [width, height], the screen's shape in its own dots where the page draws its own over it
@@ -25,6 +27,7 @@
 //     pace         how much of the original's waits: 1 all (the default), 0 none, between a part of each; a number or
 //                  a function, read at each wait
 //   and what only a workshop has, given by its pages, never looked for here:
+//     keys         keys to press at the start, by name (space, return, left...), to go straight to a scene
 //     route        a route to play first, { name, route, keys }: its keys, and the pilots' key handling
 //     mini         a mini view for a title with an `inset`, (at, { memory }) => { mode(m) }
 //     roms         the makers' ROMs this machine has (engines/original.js; a Commodore 64 remake's { chargen })
@@ -32,17 +35,18 @@
 //     downloadDisk a Commodore 64 game's disk offered to download, with what is saved on it
 //
 // An engine (engines/original.js, engines/scenes.js, or the title's own, its title.js `engine` a module in its folder)
-// exports `play(game)`: given `game`, the player's own for it (below), it makes what it draws on the stage and returns
+// exports `play(game)`: given `game`, the player's own for it (below), it declares the settings it acts on
+// (`game.setting(declaration)`, settings.js, each shown only so), makes what it draws on the stage and returns
 // its handle, or nothing where it cannot start (and has said why in the status):
-//   { run(), press(k)?, key(e, k)?, keys(list)?, route(route)?, start()?, sound(on)?, soundOn?, quick(on)?,
+//   { run(), press(k)?, key(e, k)?, keys(list)?, route(route)?, start()?, sound(on)?, quick(on)?,
 //     engine?, diskImage()? }
 // run() starts it; press(k) a key, the machine's code (none for a title of its own engine with no machine's keys,
 // which reads the keyboard itself); key(e, k), for an engine that reads the keyboard itself, each
-// keydown and keyup with its code (undefined where the machine has none); keys(list), ?keys= at the start; route, the
-// page's route; start(), at the player's first gesture (sound may start only then); sound(on) and soundOn, the
-// Sound box; quick(on) the game at full speed; engine, what `watch` gives a page; diskImage(), the disk to download.
+// keydown and keyup with its code (undefined where the machine has none); keys(list), the page's `keys` at the start;
+// route, the page's route; start(), at the player's first gesture (sound may start only then); sound(on), the
+// player's speaker on or off (the Sound setting; a game's own sound setting stays the game's); quick(on) the game at
+// full speed; engine, what `watch` gives a page; diskImage(), the disk to download.
 import { titleOf, loadTitle, read } from './remake/load.js';
-import { openDisk, titleDisk } from './disk/disk.js';
 import { savesFor } from './saves.js';
 import { code, named } from './keys.js';
 import { paperBox, phoneKeys, KEYS_MARKUP } from './parts.js';
@@ -50,24 +54,44 @@ import { paperBox, phoneKeys, KEYS_MARKUP } from './parts.js';
 // each machine's screen, in its own dots: an Apple's hi-res page, a Commodore 64's frame, border and all
 const SCREENS = { prodos: [280, 192], dos33: [280, 192], c64: [384, 272] };
 const ENGINES = { original: () => import('./engines/original.js'), card: () => import('./engines/scenes.js'), vector: () => import('./engines/scenes.js') };
+// the settings the player itself acts on (settings.js): the speaker; a Commodore 64's printer; a title's version with
+// its bugs fixed
+const SOUND = { name: 'sound', type: 'boolean', default: true, owner: 'person', words: 'Sound' };
+const PRINTER = { name: 'printer', type: 'boolean', default: true, owner: 'person', words: 'Printer' };
+const FIXED = { name: 'fixed', type: 'boolean', default: false, owner: 'person', words: 'Bugs fixed', title: 'The game with its bugs fixed: it starts again' };
 
 export async function play(options) {
-  const { way = 'remake', slug, root, preview = false, words } = options;
+  const { way = 'remake', slug, root, disk, settings, preview = false, words } = options;
   root.classList.add('player', way);
   if (slug) root.classList.add(slug);
-  root.innerHTML = `<div class="stage"></div><p class="options"><span id="status">Loading.</span>${KEYS_MARKUP}`
-    + '<label hidden><input type="checkbox" id="sound" checked> Sound</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.innerHTML = `<div class="stage"></div><p class="options"><span id="status">Loading.</span>${KEYS_MARKUP}<span class="settings"></span>`
     + '<button id="disk" type="button" hidden>Download the disk</button></p>';
   root.append(paperBox(words.printer));
   const $ = id => root.querySelector('#' + id);
-  const stage = root.querySelector('.stage'), status = $('status'), soundBox = $('sound');
+  const stage = root.querySelector('.stage'), status = $('status'), line = root.querySelector('.options .settings');
   const fail = err => { status.textContent = 'The game stopped: ' + err.message; status.className = 'error'; console.error(err); };
+  // A setting the player or its engine acts on, by its declaration (settings.js): its value from the page's store,
+  // and its control on the options line where the page offers it, a box for a boolean, a menu for an enum, each
+  // change kept and told; `first`, before the others (the sound)
+  const setting = (def, { first = false } = {}) => {
+    const s = { value: settings.get(def), told: [], on(f) { this.told.push(f); return this; } };
+    if (!settings.offered(def)) return s;
+    const label = document.createElement('label'), choice = Array.isArray(def.type);
+    if (def.title) label.title = def.title;
+    const control = choice
+      ? Object.assign(document.createElement('select'), { innerHTML: def.type.map((v, i) => `<option value="${v}">${def.labels[i]}</option>`).join('') })
+      : Object.assign(document.createElement('input'), { type: 'checkbox' });
+    control.id = def.name;
+    if (choice) { control.value = s.value; label.append(def.words + ' ', control); } else { control.checked = s.value; label.append(control, ' ' + def.words); }
+    control.addEventListener('change', () => { s.value = choice ? control.value : control.checked; settings.set(def, s.value); for (const f of s.told) f(s.value); });
+    line[first ? 'prepend' : 'append'](label);
+    return s;
+  };
   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');
+    if (!disk || !settings) throw new Error('the page gives the player its disk and its settings');
+    // the title with its bugs fixed, for one that has such a version (its title.js `fixed`), a setting: its scripts
+    // chosen as it loads, so a change loads the page again
+    const fixed = settings.get(FIXED);
     const folder = options.title ? new URL(options.title) : null, data = new URL(options.data);
     // the title, and for its remake its scripts; the game's data (none here for a title of its own engine, which
     // reads its own from its folder)
@@ -82,52 +106,39 @@ export async function play(options) {
       link.dataset.title = title.slug; document.head.append(link);
       await new Promise(done => { link.onload = link.onerror = done; });
     }
-    const disk = options.disk ?? await openDisk(titleDisk(slug), { backend: options.backend });
     // (a save the disk's backend could not store, said, not lost)
     disk.failed = err => { status.textContent = 'A file was not kept: ' + err.message; status.className = 'error'; };
     const [dots, lines] = options.screen ?? title?.screen ?? SCREENS[kind] ?? SCREENS.prodos;
     fit(stage, root, dots, lines);
 
-    // a printer on device 4, for a Commodore 64 game: on unless its box is off (the choice kept in this browser),
-    // what it prints drawn below the screen as a sheet of paper, until it is torn off
-    let printer = null;
     const g = {
-      way, slug, title, scripts, game, folder, data, stage, status, fail, disk, preview, words, fixed, $,
+      way, slug, title, scripts, game, folder, data, stage, status, fail, disk, preview, words, fixed, $, setting,
       saves: game ? savesFor(game, disk) : null, roms: options.roms, studies: options.studies, mini: options.mini ?? null,
       chargen: null,   // (the engine's Commodore 64 characters, for the printer's paper)
       pace: () => { const p = options.pace; return typeof p === 'function' ? p() : p ?? 1; },
-      // an engine's own control on the options line, after the sound
-      control(html) { $('printer').parentElement.insertAdjacentHTML('beforebegin', html); },
-      // the engine's sound turned on or off by the game itself (Aztlan's Game > Sounds): the box with it
-      sounding(on) { soundBox.checked = on; },
+      // an engine's own part of the options line that is no setting (Aztlan's preview selector), after the settings
+      control(html) { line.insertAdjacentHTML('afterend', html); },
     };
+    // a printer on device 4, for a Commodore 64 game: on unless the setting is off, what it prints drawn below the
+    // screen as a sheet of paper, until it is torn off
     if (kind === 'c64') {
       const { Printer, paper } = await import('@moonbase-machines/c64/printer.js');
-      const box = $('printer'), sheet = $('paper'), shown = $('paper-box');
-      try { box.checked = localStorage.getItem('printer') !== '0'; } catch {}
-      box.parentElement.hidden = false;
-      printer = g.printer = new Printer({ on: box.checked });
-      box.addEventListener('change', () => { printer.on = box.checked; try { localStorage.setItem('printer', box.checked ? '1' : '0'); } catch {} });
+      const on = setting(PRINTER);
+      const printer = g.printer = new Printer({ on: on.value });
+      on.on(v => { printer.on = v; });
+      const sheet = $('paper'), shown = $('paper-box');
       printer.changed = () => { shown.hidden = !printer.lines.length; if (printer.lines.length) paper(sheet, printer, g.chargen); };
       $('tear').addEventListener('click', () => printer.tear());
       $('print-paper').addEventListener('click', () => window.print());   // (the sheet alone: its print style)
     }
-    // the choice of the fixed version, where there is one: the page again, with ?fixed or without
-    if (way === 'remake' && title?.fixed) {
-      const box = $('fixed');
-      box.checked = fixed; box.parentElement.hidden = false;
-      box.addEventListener('change', () => { const u = new URL(location.href); if (box.checked) u.searchParams.set('fixed', ''); else u.searchParams.delete('fixed'); location.href = u.href.replace('fixed=&', 'fixed&').replace(/fixed=$/, 'fixed'); });
-    }
+    if (way === 'remake' && title?.fixed) setting(FIXED).on(() => location.reload());
 
     const engine = way === 'original' ? await ENGINES.original() : title.own ?? await ENGINES[title.engine]();
     const handle = await engine.play(g);
     if (!handle) return;
 
-    // the sound, where the engine has it: the box as the engine starts it, and the engine told of each change
-    if (handle.sound) {
-      soundBox.parentElement.hidden = false; soundBox.checked = handle.soundOn ?? true;
-      soundBox.addEventListener('change', () => handle.sound(soundBox.checked));
-    }
+    // the sound, where the engine has it: the player's speaker, on or off
+    if (handle.sound) { const on = setting(SOUND, { first: true }); handle.sound(on.value); on.on(v => handle.sound(v)); }
     // the keys, one listener for every engine: the machine's code for each (keys.js), offered to the page first
     // (`claim`), then the engine's: the event itself where it reads the keyboard, else the code pressed
     const keyed = e => {
@@ -153,15 +164,13 @@ export async function play(options) {
     }
     // a page that follows the game: its engine, a key pressed as the player presses one, the game at full speed
     options.watch?.({ engine: handle.engine, press: k => { handle.start?.(); handle.press?.(k); }, quick: on => handle.quick?.(on) });
-    // a route the page gives, played first; then the game; then ?keys=space,space,right,return, to go straight to a
-    // scene
+    // a route the page gives, played first; then the game; then the page's keys, to go straight to a scene
     if (options.route) {
       if (!handle.route) throw new Error('a route cannot be played on the ' + way);
       await handle.route(options.route);
     }
     handle.run();
-    const start = new URLSearchParams(location.search).get('keys');
-    if (start) { const list = start.split(',').map(n => named(n, kind)); if (handle.keys) handle.keys(list); else for (const k of list) handle.press?.(k); }
+    if (options.keys?.length) { const list = options.keys.map(n => named(n, kind)); if (handle.keys) handle.keys(list); else for (const k of list) handle.press?.(k); }
   } catch (err) { fail(err); }
 }
 

package/provider.js

@@ -0,0 +1,27 @@
+// The provider: where a visit keeps a person's files and settings, chosen once, and every page's disks and settings
+// from it. A site makes one a page from a module of its own, choosing the backend (this browser's; an account's, the
+// site's API's, when signed in) and giving a visit's values and its policy; a page with no site (moonbase-play's) makes
+// this one with nothing given. The player and the programs never choose: a page passes the title's disk and the
+// settings to play() (play.js), and a program that saves opens its disks here. Nothing here knows of an address.
+//
+//   const { disk, settings } = await provider({ backend, visit, fixed, hidden })
+//     backend    where files are kept (disk/disk.js says what one is); none given, this browser's, IndexedDB
+//                (disk/local.js), or where the browser keeps nothing (a private window may not) memory, for this
+//                visit only, and the disks say so (`kept`)
+//     visit      def => a setting's value for this visit, the site's to give (settings.js); fixed and hidden, the
+//                page's policy of the settings
+//   await disk(name)    a disk by its name, on the backend: titleDisk(slug), programDisk(name) (disk/disk.js)
+//   settings            the person's settings, the typed store (settings.js), on the disk settingsDisk('person')
+import { openDisk } from './disk/disk.js';
+import { local } from './disk/local.js';
+import { memory } from './disk/memory.js';
+import { settingsStore } from './settings.js';
+
+export async function provider({ backend, visit, fixed = {}, hidden = [] } = {}) {
+  if (!backend) { try { backend = await local(); } catch { backend = memory({ kept: false }); } }
+  const disk = name => openDisk(name, { backend });
+  const settings = settingsStore({ disks: { person: await disk(settingsDisk('person')) }, visit, fixed, hidden });
+  return { disk, settings };
+}
+
+export const settingsDisk = owner => `settings/${owner}`;

package/remake/README.md

@@ -0,0 +1,138 @@
+# The remake engine
+
+A remake is not a game written again in JavaScript. It is the title's own code, lifted from the original into scene
+scripts, compiled to JavaScript and run on this engine. The engine stands in for the machine and for the routines the
+title called. The logic is the original's, statement for statement, so the remake does what the original did, and the
+pilots can hold the two side by side, event by event.
+
+A title of its own engine is the exception: its `title.js` names a module in its folder as its `engine`, and that
+module plays the game itself (below).
+
+## A title's folder
+
+The page gives the player the title's folder (`../README.md` says what is in it). For a remake on this engine it holds:
+
+- `title.js`: the engine, `'card'` or `'vector'`; the scripts and the one it starts with; the files that load as
+  scripts (`fileScripts`); the memory at the start; the entries other scripts jump into; and the `map`, the routines
+  the scenes call, by address, each with the name of its step.
+- `<name>.scene`: the scripts, as lifted and as edited after. They are the source.
+- `compiled/<name>.js`: each scene compiled by `moonbase-compile`, which the remake runs. These are always compiled
+  again from the scene and never edited.
+- the title's own modules, where it has them: its problems (`modules`) and its view's drawing (`view`).
+
+## A scene script
+
+A scene is a step or a statement to a line (`script.js`), each line with the address in the original it came from:
+
+```
+L0813:                          a label
+0813  if a != 127 goto L0825    a branch on a compare, or on a flag: if zero goto L0825
+0817  call L08BF                a call into the script's own code
+081C  char 32                   a step: one of the title's routines, with its inputs
+0825  x = 0                     a statement on the registers a, x and y, the flags, the stack and memory
+data $08D7 00 00 80 80          bytes of the original's tables, at their addresses
+; a comment
+```
+
+A statement is the original's own instruction, written so it can be read. The engine runs it on three registers,
+four flags, a stack and 64K of memory, as the 6502 did. A step is a call into one of the title's routines, which the
+title's `map` names by address (`0x0800: 'char'`). The engine does the routine's work in JavaScript and emits an
+event. Everything a scene does is an event: the view draws the events, and a pilot reads them as the transcript to
+hold against the original's.
+
+### Code that rewrites itself
+
+A scene is the code as text, lifted once, so it can't follow code that changes its own instructions. The 6502 does
+follow it, because it reads each instruction's bytes from memory as it runs. A routine that keeps a pointer in the
+address bytes of its own `LDA` and moves the pointer by incrementing them would be lifted as a read of one fixed
+address. Microsoft's CHRGET in 6502 BASIC is the best-known case. Such a line needs either a step, the routine
+answered in JavaScript, or a hand edit to read through the pointer instead (`a = [$007A]`, the byte at the address
+held at `$7A` and `$7B`), with the reason beside it.
+
+## Compiled to JavaScript
+
+`moonbase-compile <title folder>` writes each scene as an ES module in `compiled/` (`compile.js`). The module's
+default export is `{ labels, data, steps, run }`:
+
+- `labels`, each label's step;
+- `data`, the bytes the script puts in memory;
+- `steps`, each step's address, its line in the scene and its text;
+- `run`, a function for each block of the script, by the step it starts at.
+
+A run of statements that only computes is one function, a loop where it branches back to its own start, each line
+with the scene's line beside it as a comment. Anything that can stop the run stays a step of its own, so the title
+waits where it waited: a routine's step, and a read or write that may reach the I/O page. A jump, a call or a return
+ends a function.
+
+The player loads the compiled modules with `import()` (`load.js` `loadTitle`). There is no JSON in between. The JSON
+beside the title, `<name>.json`, is the game's data: its disks' files, its kind and where it saves. `loadTitle` with
+`scenes` reads the `.scene` files instead and runs them line by line, which gives the same results more slowly.
+
+## The two engines
+
+The scripts are the same for every title. What differs is the routines their steps call, and there are two sets.
+
+- **Card** (`card.js`, `cards.js`, `card-view.js`, `c64-view.js`): a title on the Apple IIe or the Commodore 64. A
+  toolkit's own code is lifted into scripts too, beside the scenes. What cannot be a script is JavaScript here: the
+  routines that take their data inline after the call (fill, copy, print), the Apple's ROM routines and ProDOS's
+  calls (`@moonbase-machines/apple2e`), the Commodore 64's KERNAL, I/O page, drive, printer and BASIC
+  (`@moonbase-machines/c64`), the keyboard and the soft switches. The screen is the machine's own, written byte for
+  byte as the original wrote it.
+- **Vector** (`vector.js`, `layout.js`, `raster.js`, `problems.js`, `view.js`): a title on the vector engine. Its
+  routines (a text, a picture, a box, a wait, a key) are written again here by the original's rules for keys, random
+  numbers and waits. The view draws the pictures from their shapes as SVG (`@moonbase-machines/vector`), at any size.
+  A title's problems are its own module, rewritten in JavaScript as generators, run with the helpers in `problems.js`.
+
+`load.js` makes the engine from the title and its scripts (`makeEngine`), with the routines of the title's `engine`.
+`../engines/scenes.js` plays it on the page.
+
+## The original's time
+
+A title's code sits in the remake's memory where it came from, so the engine counts the time the original took
+(`Engine.time`). Each line costs its instruction's cycles, read from the opcode at its address, and a branch taken
+costs one more. A click of the speaker is kept at its cycle and played as the emulator plays it (`../audio.js`), so
+the remake runs at the original's speed and sounds as it did.
+
+## Bugs fixed
+
+The remake plays the game as it was, bugs and all, because the pilots hold it against the original. A title can
+also have a version with its bugs fixed, as a separate script beside the faithful one. Its `title.js` names each
+script that version replaces:
+
+```js
+fixed: { game: 'game-fixed' }
+```
+
+The player's setting **Bugs fixed** (`play.js`, `fixed`) is offered only for a title that has one. With it on,
+`loadTitle` runs `compiled/game-fixed.js` in place of `compiled/game.js`, and the page starts again when the
+setting changes. Only compiled scripts are replaced: with `scenes`, `loadTitle` runs the faithful scenes.
+
+Because every statement is the original's, with its address, a fix is an edit to a known line, not a guess at what
+the game meant. Make the fixed script from the faithful one by edits that each check the line they change is the
+one they expect. A changed line keeps its address, and a line that is new has none. That keeps the fixed version
+the same game with only its bugs changed. When the faithful script is lifted again, the edits are made again, and
+one whose line has changed stops instead of editing the wrong line.
+
+Corrupted text can be fixed the same way where the text is in the code: a string a call takes inline after it, or a
+scene's `data` line. Text the game reads from its disk at run time is the game's data, `<name>.json`, not a
+script, and a fixed script does not change it.
+
+## A title of its own engine
+
+When `title.js` names a module as its `engine`, the title has no scripts. `loadTitle` imports that module as
+`title.own`, and the player hands it the game (`../play.js`). That engine is the original program's own, read from
+its code and written again routine for routine, playing the game's data as the original read it.
+
+## The files
+
+| File | What it is |
+|---|---|
+| `engine.js` | runs the scripts: the statements on the registers, flags, stack and memory, the steps through the routines, every step an event |
+| `script.js` | reads a scene script, a step to a line |
+| `compile.js` | compiles a scene script to JavaScript (`moonbase-compile`) |
+| `load.js` | loads a title's folder, its compiled scripts or its scenes, and makes its engine |
+| `events.js` | what each step is as an event, in the same words for the original and the remake |
+| `lift.js` | the lifter: a file's 6502 walked from its entries into a scene script; the card engine uses it to lift code a title's scenes miss, as it runs |
+| `card.js`, `cards.js` | the card engine's routines, and what it knows of every title it plays |
+| `vector.js`, `layout.js`, `raster.js`, `problems.js` | the vector engine's routines; its text laid out as the engine laid it out; the original's screen dot for dot, for the scenes that read it back; its problems' helpers |
+| `view.js`, `card-view.js`, `c64-view.js` | the views: a vector title's as SVG, an Apple's hi-res page, a Commodore 64's screen |