@moonbase-machines/player 0.10.0 → 0.11.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,
 };
 }
@@ -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.11.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.11.0",
+    "@moonbase-machines/c64": "0.11.0",
+    "@moonbase-machines/charset": "0.11.0",
+    "@moonbase-machines/mos6502": "0.11.0",
+    "@moonbase-machines/vector": "0.11.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/settings.js

@@ -0,0 +1,82 @@
+// A person's settings: what the player, its engines and a site's pages let a person choose (the sound, the printer,
+// the old style text, a page's own choices), each declared where it acts, in one shape, and kept through the provider
+// (provider.js) on a disk of the owner's, settings/<owner>, where the person's files go. The store is typed against
+// the declarations: only a declared setting can be read or kept, every value checked against its type. Nothing here
+// knows of an address: a site that lets its address set a setting for a visit reads it itself and gives the value.
+//
+// A declaration: { name, type, default, owner, words, labels?, title? }
+//   name     its name, in the store's file (and for a site, in whatever sets it for a visit)
+//   type     'boolean', or an array of its fixed values, an enum
+//   default  its value where nothing gives one
+//   owner    whose it is: 'person' (the only owner yet; a parent's or teacher's later is another layer here, with
+//            nothing changed where the setting is declared)
+//   words    what its control calls it; labels, an enum's values' words in order; title, a note on the control
+//
+//   check(type, value)       whether a value is of the type
+//   describe(type)           the type in words, for saying what was refused
+//
+//   const settings = settingsStore({ disks, visit, fixed, hidden })
+//     disks     { owner: disk }, the owner's settings disk (settings/<owner>), opened by the provider; its one file,
+//               `settings`, the values by name
+//     visit     def => a value for this visit, or undefined: the site's, from wherever it lets a visit set one (its
+//               address, say); checked here, a value not of the type refused and said once; never kept
+//     fixed     { name: value }, what the page fixes, over everything; hidden, [name], what it does not offer
+//   settings.get(def)          its value: the page's fixed one, else the visit's, else the kept one where it is of
+//                              the type (one that is not falls back, said), else its default
+//   settings.set(def, value)   kept, for the next visit; a promise, kept when stored (a value not of the type throws)
+//   settings.offered(def)      whether its control is shown: not where the page hides it or fixes it
+import { textBytes, bytesText } from './disk/disk.js';
+
+const FILE = 'settings';
+
+export function check(type, value) {
+  if (Array.isArray(type)) return type.includes(value);
+  if (type === 'boolean') return typeof value === 'boolean';
+  throw new Error('settings: no such type: ' + JSON.stringify(type));
+}
+
+export const describe = type => Array.isArray(type) ? 'one of ' + type.map(v => v === '' ? 'nothing' : v).join(', ') : 'on or off';
+
+export function settingsStore({ disks, visit = () => undefined, fixed = {}, hidden = [] }) {
+  const said = new Set();
+  const say = (key, what) => { if (!said.has(key)) { said.add(key); console.warn(what); } };
+  const layers = Object.fromEntries(Object.entries(disks).map(([owner, disk]) => {
+    let kept = null;
+    try { kept = JSON.parse(bytesText(disk.read(FILE)) ?? '{}'); } catch {}
+    return [owner, { disk, kept: kept && typeof kept === 'object' && !Array.isArray(kept) ? kept : {} }];
+  }));
+  // (the declaration itself checked as it is first met: its owner has a store here, its default is of its type)
+  const seen = new Set();
+  const layer = def => {
+    const l = layers[def.owner];
+    if (!l) throw new Error(`settings: no store for the owner ${def.owner} (${def.name})`);
+    if (!seen.has(def.name)) { seen.add(def.name); if (!check(def.type, def.default)) throw new Error(`settings: ${def.name}'s default ${JSON.stringify(def.default)} is not ${describe(def.type)}`); }
+    return l;
+  };
+  return {
+    get(def) {
+      const l = layer(def);
+      if (def.name in fixed) {
+        if (!check(def.type, fixed[def.name])) throw new Error(`settings: ${def.name} fixed at ${JSON.stringify(fixed[def.name])}, not ${describe(def.type)}`);
+        return fixed[def.name];
+      }
+      const v = visit(def);
+      if (v !== undefined) {
+        if (check(def.type, v)) return v;
+        say('visit ' + def.name, `${def.name}: ${JSON.stringify(v)} for this visit refused: not ${describe(def.type)}`);
+      }
+      if (def.name in l.kept) {
+        if (check(def.type, l.kept[def.name])) return l.kept[def.name];
+        say('kept ' + def.name, `${def.name}: the kept ${JSON.stringify(l.kept[def.name])} is not ${describe(def.type)}; its default used`);
+      }
+      return def.default;
+    },
+    set(def, value) {
+      const l = layer(def);
+      if (!check(def.type, value)) throw new Error(`settings: ${def.name} cannot be ${JSON.stringify(value)}: not ${describe(def.type)}`);
+      l.kept[def.name] = value;
+      return l.disk.write(FILE, textBytes(JSON.stringify(l.kept)));
+    },
+    offered: def => !hidden.includes(def.name) && !(def.name in fixed),
+  };
+}