@bongos/core 1.24.91 → 1.24.93

package/tests/hall_sky_visor.mjs

@@ -0,0 +1,150 @@
+// tests/hall_sky_visor.mjs — the sky as the visor's scene in game mode (task 1005210; ADR 0403).
+//
+// In game mode the visor is the control and the sky is the view: the sky's top row, its jump
+// field, its thought composer and its foot's clock and legend leave the scene and come back as
+// visor actions (sky-visor.js, thinking.css). Driven in a real browser over the page's OWN
+// markup (goal-map.html's and thinking.html's <main>, word for word) with the real visor and
+// the hall's real sheets. The pills are wired here the way sky-interaction.js wires them (a
+// press flips aria-pressed), because what is under test is the visor's side: that each pill is
+// a row, that a row presses its pill exactly once, and that the rows follow the pills.
+import assert from 'node:assert/strict';
+import { test, after } from 'node:test';
+import { createRequire } from 'node:module';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules/hall-ui/public');
+const read = (f) => fs.readFileSync(path.join(HALL, f), 'utf8');
+
+test('source: both sky pages load sky-visor.js after every other sky file', () => {
+  for (const p of ['goal-map.html', 'thinking.html']) {
+    const html = read(p);
+    const at = html.indexOf('/builders/sky-visor.js');
+    assert.ok(at > 0, `${p} loads it`);
+    for (const f of ['sky-interaction.js', 'sky-panel.js', 'sky-composer.js', 'sky-tour.js']) assert.ok(html.indexOf('/builders/' + f) < at, `${p}: after ${f}`);
+  }
+  assert.doesNotMatch(read('sky-interaction.js'), /window\.__visorScene = /, 'one registration, in sky-visor.js');
+});
+
+test('source: the sky keeps its controls in classic mode; in game mode they open from the visor', () => {
+  const css = read('thinking.css');
+  for (const rule of [
+    'html.visor-on .top .tools, html.visor-on .top .lens { display: none; }',
+    'html.visor-on .composer:not(.is-open), html.visor-on .jump:not(.is-open) { display: none; }',
+    'html.visor-on .time:not(.is-open), html.visor-on .legend:not(.is-open) { display: none; }',
+  ]) assert.ok(css.includes('\n' + rule), rule);
+});
+
+// ---------- in a browser ----------
+const lib = require(path.join(ROOT, 'modules', 'ui-design', 'kit', 'lib.js'));
+let browser = null;
+try { browser = await lib.launchBrowser(); } catch (e) { if (!(e instanceof lib.NoBrowserError)) throw e; }
+after(() => browser && browser.close());
+const skip = !browser && 'no system Edge or Chrome';
+
+const ORIGIN = 'http://hall.test';
+const TYPES = { '.js': 'text/javascript', '.css': 'text/css', '.png': 'image/png' };
+const mainOf = (page) => { const html = read(page); return html.slice(html.indexOf('<main'), html.indexOf('</main>') + 7); };
+// The sky's own wiring, as far as the visor needs it: SKY.$ / on / S, and a press that flips.
+const STUB = `<script>
+  window.OTB = { escapeHtml: (s) => String(s) };
+  window.OTBCraftMode = { character() { return 'artist'; }, current() { return null; }, me() { return { builder: { total_credits: 10 } }; }, spriteSrc() { return ''; }, openTool() {} };
+  const $ = (id) => document.getElementById(id);
+  window.OTBSky = { $, on: (id, ev, fn) => { const el = $(id); if (el) el.addEventListener(ev, fn); }, S: { clockHidden: false } };
+  window.presses = {};
+  document.querySelectorAll('#tools button, #lensGroup button').forEach((b) => b.addEventListener('click', () => {
+    window.presses[b.id] = (window.presses[b.id] || 0) + 1;
+    if (b.hasAttribute('aria-pressed')) b.setAttribute('aria-pressed', String(b.getAttribute('aria-pressed') !== 'true'));
+  }));
+</script>`;
+const PAGE = (page, game) => `<!doctype html><html data-theme="dark" data-faces="helm"${game ? ' data-game="on"' : ''}><head><meta charset="utf-8">
+<link rel="stylesheet" href="/builders/style.css"><link rel="stylesheet" href="/builders/visor.css"><link rel="stylesheet" href="/builders/thinking.css"></head>
+<body data-page="${page.replace('.html', '')}">${mainOf(page)}${STUB}
+<script src="/builders/shell-game.js"></script><script src="/builders/visor.js"></script><script src="/builders/sky-visor.js"></script></body></html>`;
+
+async function open(page, { game = true } = {}) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+  await ctx.route(ORIGIN + '/**', (route) => {
+    const p = new URL(route.request().url()).pathname;
+    if (p === '/') return route.fulfill({ contentType: 'text/html', body: PAGE(page, game) });
+    const f = path.join(HALL, p.replace(/^\/builders\//, ''));
+    if (p.startsWith('/builders/') && TYPES[path.extname(p)] && fs.existsSync(f)) return route.fulfill({ contentType: TYPES[path.extname(p)], body: fs.readFileSync(f) });
+    return route.fulfill({ status: 404, body: '' });
+  });
+  const pg = await ctx.newPage();
+  const errors = [];
+  pg.on('pageerror', (e) => errors.push(String(e.message)));
+  await pg.addInitScript((g) => { try { localStorage.setItem('hall-game', g ? 'on' : 'off'); } catch (_) { /* none */ } }, game);
+  await pg.goto(ORIGIN + '/');
+  await pg.waitForFunction(() => !!window.OTBVisor && !!window.__visorScene);
+  return { ctx, page: pg, errors };
+}
+// every button and field on the sky a person can see (dialogs and side panels are pop-ups)
+const sceneControls = () => [...document.querySelectorAll('.sky-stage button, .sky-stage input')]
+  .filter((e) => e.getClientRects().length && !e.closest('#start, #tour, #panel, #room, #menu')).map((e) => e.id || e.className);
+const labels = () => window.__visorScene.actions.map((a) => a.label + (a.key ? ' [' + a.key + ']' : ''));
+
+test('game mode, the project sky: no control of its own, and every one is a visor action', { skip }, async () => {
+  const { ctx, page, errors } = await open('goal-map.html');
+  assert.deepEqual(await page.evaluate(sceneControls), [], 'the sky shows no button or field');
+  assert.deepEqual(await page.evaluate(labels), [
+    'Write a thought [/]', 'Jump to a goal or a thought [j]', 'List · off [L]', 'Explore · on', 'My ideas · off',
+    'Clock · off', 'How to read the sky [?]', 'Fit the whole sky [0]', 'Legend · off',
+  ]);
+  assert.equal(await page.textContent('.visor__hint--place'), '/Write a thought', 'writing a thought is the lead, on the glass');
+  assert.deepEqual(errors, []);
+  await ctx.close();
+});
+
+test('game mode, your sky: the lens switch and its own pills are rows too', { skip }, async () => {
+  const { ctx, page } = await open('thinking.html');
+  assert.deepEqual(await page.evaluate(sceneControls), []);
+  const got = await page.evaluate(labels);
+  for (const want of ['Simple · off', 'Your thinking · on', 'My influence · off', 'Claude layer · off', 'What if · off']) assert.ok(got.includes(want), want);
+  await ctx.close();
+});
+
+test('a row presses its pill once, and the row follows the pill', { skip }, async () => {
+  const { ctx, page } = await open('goal-map.html');
+  await page.keyboard.press('a');
+  await page.click('.visor__sheet [data-visor-scene] >> text=My ideas · off');
+  assert.deepEqual(await page.evaluate(() => [window.presses.ideasBtn, document.getElementById('ideasBtn').getAttribute('aria-pressed')]), [1, 'true'], 'one press, not two');
+  await page.waitForFunction(() => window.__visorScene.actions.some((a) => a.label === 'My ideas · on'));
+  await ctx.close();
+});
+
+test('J opens the jump field and / is the composer; each closes again when left empty', { skip }, async () => {
+  const { ctx, page } = await open('goal-map.html');
+  await page.keyboard.press('j');
+  assert.deepEqual(await page.evaluate(() => [getComputedStyle(document.querySelector('.jump')).display, document.activeElement.id]), ['block', 'jump']);
+  await page.evaluate(() => window.__visorScene.actions[0].run());
+  assert.deepEqual(await page.evaluate(() => [getComputedStyle(document.querySelector('.jump')).display, getComputedStyle(document.getElementById('composerWrap')).display, document.activeElement.id]), ['none', 'flex', 'thought'], 'one field at a time');
+  await page.keyboard.type('half a thought');
+  await page.evaluate(() => document.activeElement.blur());
+  await page.waitForTimeout(20);
+  assert.equal(await page.evaluate(() => getComputedStyle(document.getElementById('composerWrap')).display), 'flex', 'words in it: it stays');
+  await page.evaluate(() => { document.getElementById('thought').value = ''; document.getElementById('thought').focus(); document.activeElement.blur(); });
+  await page.waitForTimeout(20);
+  assert.equal(await page.evaluate(() => getComputedStyle(document.getElementById('composerWrap')).display), 'none', 'left empty: it closes');
+  await ctx.close();
+});
+
+test('the clock and the legend open from the visor', { skip }, async () => {
+  const { ctx, page } = await open('goal-map.html');
+  const shown = () => page.evaluate(() => ['time', 'legend'].map((id) => getComputedStyle(document.getElementById(id)).display));
+  assert.deepEqual(await shown(), ['none', 'none']);
+  await page.evaluate(() => { for (const a of window.__visorScene.actions) if (/^(Clock|Legend)/.test(a.label)) a.run(); });
+  assert.deepEqual(await shown(), ['flex', 'flex']);
+  await page.waitForFunction(() => window.__visorScene.actions.some((a) => a.label === 'Clock · on'));
+  await ctx.close();
+});
+
+test('classic mode: the sky keeps its own top row, fields and foot', { skip }, async () => {
+  const { ctx, page } = await open('goal-map.html', { game: false });
+  const ids = await page.evaluate(sceneControls);
+  for (const id of ['roomBtn', 'exploreBtn', 'ideasBtn', 'jump', 'thought', 'fileGo', 'play', 'clock']) assert.ok(ids.includes(id), id);
+  await ctx.close();
+});

package/tests/hall_visor.mjs

@@ -66,6 +66,17 @@ test('a key means an action only when nothing else spent it', () => {
   assert.equal(V.keyFor('artisan', ev('Escape')), null, 'the ambient glass never takes Escape (ADR 0399 §2.4)');
 });
 
+// task 1005209: a scene action the visor binds (bind: true) answers its key after the character's.
+test("a place's own key: the visor binds it only when the scene asks, and the character's keys win", () => {
+  const V = loadPure();
+  const ev = (key) => ({ key, defaultPrevented: false, ctrlKey: false, metaKey: false, altKey: false });
+  const run = () => {};
+  V.scene({ name: 'x', place: 'X', actions: [{ label: 'Decide', key: 'D', bind: true, lead: true, run }, { label: 'Back to centre', key: '0', run }, { label: 'Claim here', key: 'c', bind: true, run }] });
+  assert.equal(V.keyFor('artisan', ev('d')).label, 'Decide', 'bound, and case does not matter');
+  assert.equal(V.keyFor('artisan', ev('0')), null, "a key the scene binds itself stays the scene's");
+  assert.equal(V.keyFor('artisan', ev('c')).id, 'claim', "the character's key wins a clash");
+});
+
 // task 1005203: the four segments are the version the project is building, in quarters.
 test('progress: the starred version while open, else the one building, else none', () => {
   const V = loadPure();
@@ -109,7 +120,7 @@ test('source: the visor loads after the shell on every scene page, with its shee
     assert.ok(at('/builders/visor.js') > at('/builders/shell.js?') && at('/builders/shell.js?') > at('/builders/shell-game.js'), `${f}: shell-game, shell, then the visor`);
     assert.match(html, /<link rel="stylesheet" href="\/builders\/visor\.css/, `${f}: links visor.css`);
   }
-  for (const f of ['sky-interaction.js', 'city.js', 'home-city.js']) assert.match(read(f), /window\.__visorScene = /, `${f} registers its scene`);
+  for (const f of ['sky-visor.js', 'city.js', 'home-city.js']) assert.match(read(f), /window\.__visorScene = /, `${f} registers its scene`);
   assert.doesNotMatch(VISOR, /cam\.(x|y|k)\s*=/, 'the visor writes no camera (ADR 0399 §2.2)');
   assert.doesNotMatch(VISOR, /setAttribute\('hidden'|\.hidden = true;[^\n]*nav/, 'it hides nothing but itself');
   assert.match(read('visor.css'), /html\[data-game="on"\] \.visor/, 'game mode only');
@@ -146,7 +157,7 @@ test('source: the minimal visor spends the Helm tokens and types in no colour, s
   assert.ok(phone, 'the phone rules sit in the shared phone block');
   assert.match(phone[0], /\.visor__hint:not\(\[data-visor-sheet\]\) \{ display: none; \}/, 'a phone keeps only Actions of the hints');
   assert.doesNotMatch(read('home-city.css'), /visor-on/, 'Home has no top-right pill to clear any more');
-  assert.match(read('city.css'), /\nhtml\.visor-on \.city-door \{ bottom: 150px; \}/, 'the city\'s door clears the centred button at every width');
+  assert.match(read('city.css'), /\nhtml\.visor-on \.city-door \{ bottom: 224px; \}/, 'the city\'s door clears the centred button at every width');
 });
 
 // ---------- in a browser: the glass over a stand-in scene ----------
@@ -260,6 +271,21 @@ test('Escape closes one layer, top first: the sheet, then the scene\'s pick, the
   await ctx.close();
 });
 
+test('a lead scene action is the first key hint, and its click and its key run it (task 1005209)', { skip }, async () => {
+  const { ctx, page, errors } = await open();
+  await page.evaluate(() => OTBVisor.scene({ name: 'test', place: 'Test city', actions: [{ label: 'Decide 2 in a row', key: 'd', bind: true, lead: true, run() { window.decided = (window.decided || 0) + 1; } }] }));
+  const hints = await page.$$eval('.visor__hints .visor__hint', (h) => h.map((x) => x.textContent));
+  assert.deepEqual(hints, ['DDecide 2 in a row', 'TYour thinking', 'AActions', 'EscOptions']);
+  await page.click('.visor__hint--place');
+  await page.keyboard.press('d');
+  assert.equal(await page.evaluate(() => window.decided), 2, 'the hint and D both press it');
+  await page.evaluate(() => document.documentElement.removeAttribute('data-game'));
+  await page.keyboard.press('d');
+  assert.equal(await page.evaluate(() => window.decided), 2, 'outside game mode the glass binds no key');
+  assert.deepEqual(errors, []);
+  await ctx.close();
+});
+
 test('the sheet lists the character\'s actions, then this place, and runs a scene action', { skip }, async () => {
   const { ctx, page } = await open();
   await page.click('[data-visor-sheet]');