@bongos/core 1.25.6 → 1.25.7

package/tests/hall_visor.mjs

@@ -105,8 +105,8 @@ test('no key ever means two things: every character over every real scene, and O
     assert.notEqual(r.options.key, 'esc', `${c}: Options is not on Escape; Escape is Close`);
     assert.ok(r.options.key, `${c}: Options has a key of its own`);
   }
-  assert.equal(V.resolveKeys('artist').options.key, 'o', 'O is Options where nothing else holds it');
-  assert.equal(V.resolveKeys('patron').options.key, 'p', "the Patron's O is the Board room, so Options moves to its next letter");
+  assert.equal(V.resolveKeys('artist').options.key, 'm', 'M is the game menu where nothing else holds it');
+  assert.equal(V.resolveKeys('patron').options.key, 'm', 'no character holds M, so the game menu keeps it for all three');
 });
 
 test('a clash moves the later claimant to a free letter of its own name, and its key follows', () => {
@@ -205,6 +205,25 @@ test('source: the minimal visor spends the Helm tokens and types in no colour, s
   assert.doesNotMatch(glass, /background|box-shadow|backdrop-filter|filter:/, 'the glass itself paints nothing: no edge band, no vignette, no veil');
   assert.doesNotMatch(css, /--night-glass|linear-gradient|radial-gradient\((?!circle, currentColor)|--type-halo/, 'no band of the night anywhere on the glass, and no dark glow round its type');
   assert.match(css, /\.visor__place, \.visor__who, \.visor__hint \{ background: var\(--night-plate\); clip-path: var\(--cut-path-sm\); \}/, 'the place, each hint and your credits stand on a small cut plate of the night');
+  // smoked glass (task 1005252): where the browser can blur, each plate is a pane that softens the scene
+  // behind it, from the Helm tokens; asking for less transparency puts the night plate back
+  const PANES = '.visor__place, .visor__who, .visor__hint, .visor__progress-words {';
+  const block = (head) => { const at = css.indexOf(head); assert.ok(at >= 0, head); const open = css.indexOf(PANES, at); assert.ok(open > at, head + ' holds the four plates'); return css.slice(open, css.indexOf('}', open)); };
+  const smoke = block('@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {');
+  assert.ok(smoke.includes('background: var(--smoke-sheen), var(--smoke);'), 'a light smoke with a sheen, from tokens');
+  assert.ok(smoke.includes('box-shadow: var(--smoke-edge);'), 'a lit top edge makes it a pane');
+  assert.ok(smoke.includes(' backdrop-filter: var(--smoke-blur);'), 'it blurs the scene behind it');
+  const STYLE = fs.readFileSync(new URL('../modules/hall-ui/public/style.css', import.meta.url), 'utf8');
+  const plainAt = STYLE.indexOf('@media (prefers-reduced-transparency: reduce) {');
+  const plain = STYLE.slice(plainAt, STYLE.indexOf('}', plainAt));
+  assert.ok(plainAt >= 0 && plain.includes('html .visor__place, html .visor__who, html .visor__hint, html .visor__progress-words {'), 'less transparency is answered in style.css, lifted over visor.css');
+  assert.ok(plain.includes('background: var(--night-plate);') && plain.includes(' backdrop-filter: none;'), 'less transparency: the night plate again');
+  const smokeTokens = STYLE.match(/--smoke[a-z-]*:[^;]*;/g) || [];
+  assert.equal(smokeTokens.length, 4, 'four smoke tokens: the tint, the blur, the sheen, the edge');
+  assert.doesNotMatch(smokeTokens.join(' '), /rgba?\(|#[0-9a-f]{3,8}\b/i, 'every smoke colour derives from a Helm token, no literal');
+  assert.ok(STYLE.includes('html[data-game="on"] .visor__who, html[data-game="on"] .visor__hint { background: var(--night-plate); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }'), 'a phone keeps the night plate: no live blur on the weakest GPU');
+  assert.ok(STYLE.indexOf('backdrop-filter: none; }') > STYLE.indexOf('tasks 1005148 and 1005195, the visor'), 'and that rule sits in the shared phone block');
+  assert.ok(css.indexOf('@supports ((backdrop-filter') > css.indexOf('.visor__progress-words {'), 'the smoke comes after every plate rule, so it wins the cascade');
   assert.match(css, /\.visor__line--under \{ stroke: var\(--bg\); stroke-opacity: 1/, 'every line is drawn over a solid stroke of the night, so it reads on cloud and on night');
   assert.match(css, /\.visor__key \{[^}]*background: var\(--bg\)/, 'a key sits on a chip of the night');
   assert.doesNotMatch(css, /data-hour|data-time|data-sky/, 'no per-hour style');
@@ -365,12 +384,26 @@ test('a lead scene action is the first key hint, and its click and its key run i
   await ctx.close();
 });
 
+// task 1005251: the options window keeps its aria-modal box after it closes. Only a dialog that
+// is SHOWN holds the visor's keys; before this, one visit to Options left every key dead.
+test('a closed dialog left in the page does not hold the keys; an open one does', { skip }, async () => {
+  const { ctx, page } = await open();
+  await page.evaluate(() => { const d = document.createElement('div'); d.id = 'gone'; d.setAttribute('aria-modal', 'true'); d.hidden = true; document.body.appendChild(d); });
+  await page.keyboard.press('a');
+  assert.equal(await page.evaluate(() => OTBVisor.isOpen()), true, 'a hidden modal box: A still opens the sheet');
+  await page.keyboard.press('Escape');
+  await page.evaluate(() => { document.getElementById('gone').hidden = false; document.getElementById('gone').textContent = 'up'; });
+  await page.keyboard.press('a');
+  assert.equal(await page.evaluate(() => OTBVisor.isOpen()), false, 'a modal that is up keeps the keyboard');
+  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]');
   const rows = await page.$$eval('.visor__sheet .visor__row', (r) => r.map((x) => [...x.children].map((c) => c.textContent).join(' ')));
   // task 1005200: Claim a task and Blockers open classic pages, so they are off the glass.
-  assert.deepEqual(rows, ['Goal sky G', 'Your thinking T', 'Back to centre 0', 'Look around drag', 'Options O']);
+  assert.deepEqual(rows, ['Goal sky G', 'Your thinking T', 'Back to centre 0', 'Look around drag', 'Game menu M']);
   assert.equal(await page.$eval('.visor__sheet [data-visor-close]', (b) => b.textContent), 'Esc', 'Escape is the Close of the sheet, and only that');
   await page.click('[data-visor-scene="0"]');
   assert.deepEqual(await page.evaluate(() => ({ centred: window.centred, open: OTBVisor.isOpen() })), { centred: true, open: false });
@@ -481,7 +514,7 @@ test('the glass is the kit\'s: the cut accent button, ice hints with no box, the
     return {
       mainBg: cs('.visor__main').backgroundColor, accent: probe('var(--accent)'), mainClip: cs('.visor__main').clipPath,
       mainCase: cs('.visor__main').textTransform, hintBg: cs('.visor__hint').backgroundColor, hintBorder: cs('.visor__hint').borderTopWidth,
-      plate: probe('var(--night-plate)'), placeBg: cs('.visor__place').backgroundColor, whoBg: cs('.visor__who').backgroundColor, hintClip: cs('.visor__hint').clipPath,
+      plate: probe('var(--smoke)'), blur: cs('.visor__place').backdropFilter, edge: cs('.visor__hint').boxShadow, placeBg: cs('.visor__place').backgroundColor, whoBg: cs('.visor__who').backgroundColor, hintClip: cs('.visor__hint').clipPath,
       glassBg: cs('#visor').backgroundImage + ' ' + cs('#visor').backgroundColor,
       hintColor: cs('.visor__hint').color, ice: probe('var(--ink-soft)'), num: cs('.visor__num').color, unit: cs('.visor__unit').color, white: probe('var(--ink)'),
       placeShadow: cs('.visor__place').textShadow, radius: cs('.visor__sprite').borderTopLeftRadius, spriteClip: cs('.visor__sprite').clipPath,
@@ -492,7 +525,9 @@ test('the glass is the kit\'s: the cut accent button, ice hints with no box, the
   assert.match(g.mainClip, /^polygon\(/, 'cut corner');
   assert.equal(g.mainCase, 'uppercase', 'the name voice');
   assert.equal(g.glassBg, 'none rgba(0, 0, 0, 0)', 'the glass darkens nothing: the scene shows to every edge');
-  assert.equal(g.hintBg, g.plate, 'a hint stands on a plate of the night');
+  assert.equal(g.hintBg, g.plate, 'a hint stands on a pane of smoked glass (task 1005252)');
+  assert.match(g.blur, /blur\(14px\)/, 'the pane blurs the scene behind it');
+  assert.match(g.edge, /inset/, 'and has a lit edge');
   assert.equal(g.placeBg, g.plate, 'so does the place');
   assert.equal(g.whoBg, g.plate, 'and your credits');
   assert.match(g.hintClip, /^polygon\(/, 'the plate is cut');