@moood/render 0.0.0 → 0.1.2

package/README.md

@@ -1,29 +1,29 @@
-# @moood/render
-
-A scene of [moood](https://moood.me) rendered on your machine — with moood's own engine, the version
-the site runs (`moood-render --version`), in a Chromium you have already (nothing is downloaded, no
-network): a PNG and the errors the scene's code threw.
-
-    npm i -g @moood/render
-    moood-render <world>/scenes/<folder> --at 0,2.5 --device 16:9 --out frame.png
-
-- **A scene** is a folder of a world's repository (`scene.json` and its code beside it — see
-  https://github.com/moood-me/docs), or a spec as a `.json` file. The modules it lists are read from
-  the world's `modules/` (`--world <the world's repository>`; by default two folders up).
-- **`--at`** — moments, in seconds from the scene's start: a frame each (`frame-2.5s.png`). Time is a
-  virtual clock stepped from the start, a tenth of a second at a time; chance (`Math.random`) is the
-  same every run. The same moment and state give the same picture — pixel-close, not bit-equal (the
-  GPU emulation's rounding): compare frames with a small tolerance.
-- **`--state '{"dawn": 1}'`** — values over the scene's starting state.
-- **`--device`** — `16:9` (1600×900), `4:3`, `21:9` (the same height), `tile` (640×360), `big` (1920×1080).
-- **`--bare`** — without the title and captions over it.
-- **The browser**: `--chromium <path>`, or `MOOOD_CHROMIUM`, or Playwright's own (`PLAYWRIGHT_BROWSERS_PATH`).
-
-From code:
-
-    import { render, readScene, readModules } from '@moood/render';
-    const spec = readScene('world/scenes/kukhnya');
-    const [frame] = await render({ spec, modules: readModules('world', spec), at: [3] });
-    // frame.png (a Buffer), frame.errors
-
-Exits 1 if the scene's code threw.
+# @moood/render
+
+A scene of [moood](https://moood.me) rendered on your machine — with moood's own engine, the version
+the site runs (`moood-render --version`), in a Chromium you have already (nothing is downloaded, no
+network): a PNG and the errors the scene's code threw.
+
+    npm i -g @moood/render
+    moood-render <world>/scenes/<folder> --at 0,2.5 --device 16:9 --out frame.png
+
+- **A scene** is a folder of a world's repository (`scene.json` and its code beside it — see
+  https://github.com/moood-me/docs), or a spec as a `.json` file. The modules it lists are read from
+  the world's `modules/` (`--world <the world's repository>`; by default two folders up).
+- **`--at`** — moments, in seconds from the scene's start: a frame each (`frame-2.5s.png`). Time is a
+  virtual clock stepped from the start, a tenth of a second at a time; chance (`Math.random`) is the
+  same every run. The same moment and state give the same picture — pixel-close, not bit-equal (the
+  GPU emulation's rounding): compare frames with a small tolerance.
+- **`--state '{"dawn": 1}'`** — values over the scene's starting state.
+- **`--device`** — `16:9` (1600×900), `4:3`, `21:9` (the same height), `tile` (640×360), `big` (1920×1080).
+- **`--bare`** — without the title and captions over it.
+- **The browser**: `--chromium <path>`, or `MOOOD_CHROMIUM`, or Playwright's own (`PLAYWRIGHT_BROWSERS_PATH`).
+
+From code:
+
+    import { render, readScene, readModules } from '@moood/render';
+    const spec = readScene('world/scenes/kukhnya');
+    const [frame] = await render({ spec, modules: readModules('world', spec), at: [3] });
+    // frame.png (a Buffer), frame.errors
+
+Exits 1 if the scene's code threw.

package/cli.js

@@ -1,34 +1,34 @@
-#!/usr/bin/env node
-// moood-render <scene folder | spec.json> [--world <its world's repository>] [--device 16:9] [--at 0,1.5,3]
-//              [--state '{"dawn":1}'] [--bare] [--out frame.png] [--chromium <path>]
-// A frame for each moment (--out frame.png → frame.png, or frame-1.5s.png … for several); the
-// errors the scene's code threw, on stderr. The world defaults to the folder two levels up
-// (<world>/scenes/<folder>): where its modules are.
-import { statSync, writeFileSync, readFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { parseArgs } from 'node:util';
-import { ENGINE, readModules, readScene, render } from './index.js';
-
-const { values: o, positionals: [what] } = parseArgs({
-  allowPositionals: true,
-  options: { world: { type: 'string' }, device: { type: 'string', default: '16:9' }, at: { type: 'string', default: '0' },
-             state: { type: 'string' }, bare: { type: 'boolean' }, out: { type: 'string', default: 'frame.png' },
-             chromium: { type: 'string' }, version: { type: 'boolean' } },
-});
-if (o.version) { console.log(`moood engine ${ENGINE}`); process.exit(0); }
-if (!what) { console.error('moood-render <scene folder | spec.json> [--world …] [--device 16:9] [--at 0,1.5] [--state {…}] [--bare] [--out frame.png]'); process.exit(2); }
-
-const folder = statSync(what).isDirectory();
-const spec = folder ? readScene(what) : JSON.parse(readFileSync(what, 'utf8'));
-const world = o.world || (folder ? resolve(what, '..', '..') : dirname(resolve(what)));
-const at = o.at.split(',').map(Number);
-const frames = await render({ spec, modules: readModules(world, spec), device: o.device, at, state: o.state ? JSON.parse(o.state) : {},
-                              bare: o.bare, chromium: o.chromium });
-let failed = false;
-for (const f of frames) {
-  const out = frames.length > 1 ? o.out.replace(/(\.png)?$/, `-${f.at}s.png`) : o.out;
-  writeFileSync(out, f.png);
-  console.log(out);
-  for (const e of f.errors) { console.error(`${f.at}s: ${e}`); failed = true; }
-}
-process.exit(failed ? 1 : 0);
+#!/usr/bin/env node
+// moood-render <scene folder | spec.json> [--world <its world's repository>] [--device 16:9] [--at 0,1.5,3]
+//              [--state '{"dawn":1}'] [--bare] [--out frame.png] [--chromium <path>]
+// A frame for each moment (--out frame.png → frame.png, or frame-1.5s.png … for several); the
+// errors the scene's code threw, on stderr. The world defaults to the folder two levels up
+// (<world>/scenes/<folder>): where its modules are.
+import { statSync, writeFileSync, readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { parseArgs } from 'node:util';
+import { ENGINE, readModules, readScene, render } from './index.js';
+
+const { values: o, positionals: [what] } = parseArgs({
+  allowPositionals: true,
+  options: { world: { type: 'string' }, device: { type: 'string', default: '16:9' }, at: { type: 'string', default: '0' },
+             state: { type: 'string' }, bare: { type: 'boolean' }, out: { type: 'string', default: 'frame.png' },
+             chromium: { type: 'string' }, version: { type: 'boolean' } },
+});
+if (o.version) { console.log(`moood engine ${ENGINE}`); process.exit(0); }
+if (!what) { console.error('moood-render <scene folder | spec.json> [--world …] [--device 16:9] [--at 0,1.5] [--state {…}] [--bare] [--out frame.png]'); process.exit(2); }
+
+const folder = statSync(what).isDirectory();
+const spec = folder ? readScene(what) : JSON.parse(readFileSync(what, 'utf8'));
+const world = o.world || (folder ? resolve(what, '..', '..') : dirname(resolve(what)));
+const at = o.at.split(',').map(Number);
+const frames = await render({ spec, modules: readModules(world, spec), device: o.device, at, state: o.state ? JSON.parse(o.state) : {},
+                              bare: o.bare, chromium: o.chromium });
+let failed = false;
+for (const f of frames) {
+  const out = frames.length > 1 ? o.out.replace(/(\.png)?$/, `-${f.at}s.png`) : o.out;
+  writeFileSync(out, f.png);
+  console.log(out);
+  for (const e of f.errors) { console.error(`${f.at}s: ${e}`); failed = true; }
+}
+process.exit(failed ? 1 : 0);

package/engine/actions.js

@@ -1,69 +1,69 @@
-// What can be done with the things in a scene: whatever plays on it (a game) offers some of the
-// scene's elements, each with what can be done with it. The pointer over one of them is a hand; the
-// player picks it — it glows (select.js), its actions open beside it — and picks an action; the
-// others don't answer a click.
-//   const actions = MooodActions.create({ canvas, stage, onAct(element, action) })
-//   actions.setSpec(spec) — the scene shown (what was offered is gone with the scene before)
-//   actions.offer({ <element id>: [{ id, label } | label, …], … }) — what is offered now (in place
-//     of what was); {} — nothing
-//   actions.clear() — nothing picked
-const MooodActions = (() => {
-  function create({ canvas, stage, onAct }) {
-    let spec = null, offers = {}, open = null; // open: the element whose actions are shown
-    const menu = document.createElement('div');
-    menu.id = 'actions';
-    menu.hidden = true;
-    document.body.append(menu);
-    const idAt = path => {
-      const m = /^objects\[(\d+)\]$/.exec(path || '');
-      return m ? spec?.objects?.[Number(m[1])]?.id ?? null : null;
-    };
-    const listed = id => (offers[id] || []).map(a => (typeof a === 'string' ? { id: a, label: a } : a));
-    const selection = MooodSelect.create({ canvas, stage, withCard: false, only: path => listed(idAt(path)).length > 0, onChange: show });
-    let hovered = 0;
-    canvas.addEventListener('pointermove', e => {
-      if (e.pointerType !== 'mouse' || performance.now() - hovered < 120) return;
-      hovered = performance.now();
-      canvas.style.cursor = Object.keys(offers).length && selection.at(e.clientX, e.clientY) ? 'pointer' : '';
-    });
-
-    function show() {
-      const o = selection.object(), acts = o ? listed(o.id) : [];
-      open = acts.length ? o : null;
-      menu.hidden = !open;
-      if (!open) return;
-      const title = document.createElement('b');
-      title.textContent = o.name || '';
-      menu.replaceChildren(title, ...acts.map(a => {
-        const b = document.createElement('button');
-        b.type = 'button';
-        b.textContent = a.label;
-        b.onclick = () => { const el = open; selection.clear(); onAct?.(el, a); };
-        return b;
-      }));
-      place();
-    }
-    // beside the thing, wherever it is now (the camera moves): right of it, else left, within the screen
-    function place() {
-      if (!open) return;
-      requestAnimationFrame(place);
-      const b = selection.box();
-      if (!b) return;
-      const w = menu.offsetWidth, h = menu.offsetHeight, m = 12;
-      const x = b.x + b.w + m + w < innerWidth ? b.x + b.w + m : Math.max(m, b.x - m - w);
-      const y = Math.min(innerHeight - h - m, Math.max(m, b.y + b.h / 2 - h / 2));
-      menu.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
-    }
-
-    return {
-      setSpec(next) { spec = next; offers = {}; selection.setSpec(next); },
-      offer(next) {
-        offers = next || {};
-        const o = selection.object();
-        if (o && !listed(o.id).length) selection.clear(); else show();
-      },
-      clear: () => selection.clear(),
-    };
-  }
-  return { create };
-})();
+// What can be done with the things in a scene: whatever plays on it (a game) offers some of the
+// scene's elements, each with what can be done with it. The pointer over one of them is a hand; the
+// player picks it — it glows (select.js), its actions open beside it — and picks an action; the
+// others don't answer a click.
+//   const actions = MooodActions.create({ canvas, stage, onAct(element, action) })
+//   actions.setSpec(spec) — the scene shown (what was offered is gone with the scene before)
+//   actions.offer({ <element id>: [{ id, label } | label, …], … }) — what is offered now (in place
+//     of what was); {} — nothing
+//   actions.clear() — nothing picked
+const MooodActions = (() => {
+  function create({ canvas, stage, onAct }) {
+    let spec = null, offers = {}, open = null; // open: the element whose actions are shown
+    const menu = document.createElement('div');
+    menu.id = 'actions';
+    menu.hidden = true;
+    document.body.append(menu);
+    const idAt = path => {
+      const m = /^objects\[(\d+)\]$/.exec(path || '');
+      return m ? spec?.objects?.[Number(m[1])]?.id ?? null : null;
+    };
+    const listed = id => (offers[id] || []).map(a => (typeof a === 'string' ? { id: a, label: a } : a));
+    const selection = MooodSelect.create({ canvas, stage, withCard: false, only: path => listed(idAt(path)).length > 0, onChange: show });
+    let hovered = 0;
+    canvas.addEventListener('pointermove', e => {
+      if (e.pointerType !== 'mouse' || performance.now() - hovered < 120) return;
+      hovered = performance.now();
+      canvas.style.cursor = Object.keys(offers).length && selection.at(e.clientX, e.clientY) ? 'pointer' : '';
+    });
+
+    function show() {
+      const o = selection.object(), acts = o ? listed(o.id) : [];
+      open = acts.length ? o : null;
+      menu.hidden = !open;
+      if (!open) return;
+      const title = document.createElement('b');
+      title.textContent = o.name || '';
+      menu.replaceChildren(title, ...acts.map(a => {
+        const b = document.createElement('button');
+        b.type = 'button';
+        b.textContent = a.label;
+        b.onclick = () => { const el = open; selection.clear(); onAct?.(el, a); };
+        return b;
+      }));
+      place();
+    }
+    // beside the thing, wherever it is now (the camera moves): right of it, else left, within the screen
+    function place() {
+      if (!open) return;
+      requestAnimationFrame(place);
+      const b = selection.box();
+      if (!b) return;
+      const w = menu.offsetWidth, h = menu.offsetHeight, m = 12;
+      const x = b.x + b.w + m + w < innerWidth ? b.x + b.w + m : Math.max(m, b.x - m - w);
+      const y = Math.min(innerHeight - h - m, Math.max(m, b.y + b.h / 2 - h / 2));
+      menu.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+    }
+
+    return {
+      setSpec(next) { spec = next; offers = {}; selection.setSpec(next); },
+      offer(next) {
+        offers = next || {};
+        const o = selection.object();
+        if (o && !listed(o.id).length) selection.clear(); else show();
+      },
+      clear: () => selection.clear(),
+    };
+  }
+  return { create };
+})();

package/engine/captions.js

@@ -1,20 +1,20 @@
-// Timed captions — the director's lines that appear over the scene one after another
-// (spec.captions: [{ text, at: seconds, for?: seconds }]). Without `for` a line stays.
-const MooodCaptions = (() => {
-  let box = null, timers = [];
-  function show(list) {
-    for (const t of timers) clearTimeout(t);
-    timers = [];
-    if (!box) { box = document.createElement('div'); box.id = 'captions'; document.body.append(box); }
-    box.textContent = '';
-    for (const c of Array.isArray(list) ? list : []) {
-      if (!c || typeof c.text !== 'string') continue;
-      const p = document.createElement('p');
-      p.textContent = c.text;
-      box.append(p);
-      timers.push(setTimeout(() => p.classList.add('on'), Math.max(0, c.at || 0) * 1000));
-      if (c.for > 0) timers.push(setTimeout(() => p.classList.remove('on'), (Math.max(0, c.at || 0) + c.for) * 1000));
-    }
-  }
-  return { show };
-})();
+// Timed captions — the director's lines that appear over the scene one after another
+// (spec.captions: [{ text, at: seconds, for?: seconds }]). Without `for` a line stays.
+const MooodCaptions = (() => {
+  let box = null, timers = [];
+  function show(list) {
+    for (const t of timers) clearTimeout(t);
+    timers = [];
+    if (!box) { box = document.createElement('div'); box.id = 'captions'; document.body.append(box); }
+    box.textContent = '';
+    for (const c of Array.isArray(list) ? list : []) {
+      if (!c || typeof c.text !== 'string') continue;
+      const p = document.createElement('p');
+      p.textContent = c.text;
+      box.append(p);
+      timers.push(setTimeout(() => p.classList.add('on'), Math.max(0, c.at || 0) * 1000));
+      if (c.for > 0) timers.push(setTimeout(() => p.classList.remove('on'), (Math.max(0, c.at || 0) + c.for) * 1000));
+    }
+  }
+  return { show };
+})();

package/engine/directions.js

@@ -1,44 +1,44 @@
-// The ways a scene can change before the eyes (spec.directions): each a state value from 0 (the
-// scene as it is) to 1 (fully changed), painted by the scene itself. For now a panel to try them:
-// a slider per direction, and ▶ / ◀ to watch it happen there and back. A direction can't move
-// while one it excludes (or that excludes it) has moved off 0.
-const MooodDirections = (() => {
-  const SECONDS = 6; // ▶ / ◀: how long the change takes
-
-  function show(spec, panel) {
-    const all = Array.isArray(spec?.directions) ? spec.directions.filter(d => d && d.key) : [];
-    panel.replaceChildren();
-    panel.hidden = !all.length;
-    if (!all.length) return;
-    const excluded = d => all.filter(o => o.key !== d.key && ((d.excludes || []).includes(o.key) || (o.excludes || []).includes(d.key)));
-    const blocked = d => excluded(d).some(o => (MooodState.get(o.key) || 0) > 0.001);
-    const rows = all.map(d => {
-      const row = document.createElement('div'), name = document.createElement('span');
-      const slider = document.createElement('input'), back = document.createElement('button'), go = document.createElement('button');
-      row.className = 'direction';
-      name.textContent = d.name || d.key;
-      Object.assign(slider, { type: 'range', min: 0, max: 1, step: 0.01 });
-      back.type = go.type = 'button';
-      back.textContent = '◀'; go.textContent = '▶';
-      back.title = 'обратно'; go.title = 'превратить';
-      slider.oninput = () => MooodState.set(d.key, Number(slider.value));
-      go.onclick = () => MooodState.set(d.key, 1, SECONDS * (1 - (MooodState.get(d.key) || 0)));
-      back.onclick = () => MooodState.set(d.key, 0, SECONDS * (MooodState.get(d.key) || 0));
-      row.append(name, back, slider, go);
-      panel.append(row);
-      return { d, row, slider, back, go };
-    });
-    const sync = () => {
-      for (const r of rows) {
-        const off = blocked(r.d);
-        r.slider.value = MooodState.get(r.d.key) || 0;
-        r.slider.disabled = r.go.disabled = off;
-        r.row.classList.toggle('blocked', off);
-      }
-      requestAnimationFrame(sync);
-    };
-    sync();
-  }
-
-  return { show };
-})();
+// The ways a scene can change before the eyes (spec.directions): each a state value from 0 (the
+// scene as it is) to 1 (fully changed), painted by the scene itself. For now a panel to try them:
+// a slider per direction, and ▶ / ◀ to watch it happen there and back. A direction can't move
+// while one it excludes (or that excludes it) has moved off 0.
+const MooodDirections = (() => {
+  const SECONDS = 6; // ▶ / ◀: how long the change takes
+
+  function show(spec, panel) {
+    const all = Array.isArray(spec?.directions) ? spec.directions.filter(d => d && d.key) : [];
+    panel.replaceChildren();
+    panel.hidden = !all.length;
+    if (!all.length) return;
+    const excluded = d => all.filter(o => o.key !== d.key && ((d.excludes || []).includes(o.key) || (o.excludes || []).includes(d.key)));
+    const blocked = d => excluded(d).some(o => (MooodState.get(o.key) || 0) > 0.001);
+    const rows = all.map(d => {
+      const row = document.createElement('div'), name = document.createElement('span');
+      const slider = document.createElement('input'), back = document.createElement('button'), go = document.createElement('button');
+      row.className = 'direction';
+      name.textContent = d.name || d.key;
+      Object.assign(slider, { type: 'range', min: 0, max: 1, step: 0.01 });
+      back.type = go.type = 'button';
+      back.textContent = '◀'; go.textContent = '▶';
+      back.title = 'обратно'; go.title = 'превратить';
+      slider.oninput = () => MooodState.set(d.key, Number(slider.value));
+      go.onclick = () => MooodState.set(d.key, 1, SECONDS * (1 - (MooodState.get(d.key) || 0)));
+      back.onclick = () => MooodState.set(d.key, 0, SECONDS * (MooodState.get(d.key) || 0));
+      row.append(name, back, slider, go);
+      panel.append(row);
+      return { d, row, slider, back, go };
+    });
+    const sync = () => {
+      for (const r of rows) {
+        const off = blocked(r.d);
+        r.slider.value = MooodState.get(r.d.key) || 0;
+        r.slider.disabled = r.go.disabled = off;
+        r.row.classList.toggle('blocked', off);
+      }
+      requestAnimationFrame(sync);
+    };
+    sync();
+  }
+
+  return { show };
+})();