@bongos/core 1.24.82 → 1.24.84

package/tests/hall_visor.mjs

@@ -8,6 +8,8 @@
 //   - in game mode the last Escape reaches the options menu, never the visor.
 // Plus the criterion's own proof half that is the visor's: an Artisan and an Artist
 // are offered DIFFERENT actions on the glass. The pure parts run in a vm.
+// The minimal visor (Helm look 3, task 1005195) adds the look's own pins: the sheet spends
+// tokens only, and over the hall's real sheets the foot row holds at a desk, 390 and 320.
 import assert from 'node:assert/strict';
 import { test, after } from 'node:test';
 import { createRequire } from 'node:module';
@@ -87,6 +89,35 @@ test('source: the visor loads after the shell on every scene page, with its shee
   assert.match(read('visor.css'), /pointer-events: none/, 'the glass lets the pointer through');
 });
 
+// Helm look 3 (task 1005195): the glass is the kit's, and nothing on it is typed in.
+test('source: the minimal visor spends the Helm tokens and types in no colour, size, corner, shadow or breakpoint', () => {
+  const css = read('visor.css').replace(/\/\*[\s\S]*?\*\//g, '');
+  assert.doesNotMatch(css, /#[0-9a-f]{3,8}\b|\brgba?\(|\bhsla?\(/i, 'no colour literal');
+  assert.doesNotMatch(css, /font-size:\s*[\d.]/, 'every size is a --ds-text-* step');
+  assert.doesNotMatch(css, /border-radius:(?!\s*var\(--press-radius\))/, 'no corner but the press corner: Helm draws no pill');
+  assert.doesNotMatch(css, /@media|@container/, 'the phone rules live in style.css (the design-count ratchet)');
+  assert.doesNotMatch(css, /animation|@keyframes/, 'nothing on the glass moves by itself');
+  for (const m of css.match(/(?:box|text)-shadow:[^;]+/g) || []) assert.match(m, /^(?:box|text)-shadow:\s*(?:none|var\(--[a-z-]+\))$/, `${m}: a shadow is a token`);
+  for (const m of css.match(/transition:[^;]+/g) || []) assert.match(m, /var\(--ds-dur-/, `${m}: a duration token, so reduced motion stills it`);
+  assert.match(css, /\.visor__main \{[^}]*background: var\(--accent\)[^}]*clip-path: var\(--cut-path\)/, 'the one accent button is cut');
+  assert.match(css, /\.visor__main:focus-visible[^{]*\{[^}]*box-shadow: var\(--press-focus\)/, 'a cut control takes the inset ring');
+  assert.match(css, /\.visor__hint \{[^}]*background: none; border: 0/, 'a key hint has no box');
+  assert.match(css, /\.visor__place, \.visor__name, \.visor__unit, \.visor__main, \.visor__hint[^{]*\{\s*font-family: var\(--name-face\)/, 'names are in the name voice');
+  // it reads over any sky with one treatment, never a per-hour style
+  assert.match(css, /html\[data-game="on"\] \.visor:not\(\[hidden\]\) \{[^}]*background: linear-gradient\(to bottom, var\(--night-glass\), transparent[^;]*var\(--night-glass\)\)/, 'the glass darkens toward its edges');
+  assert.match(css, /text-shadow: var\(--type-halo\); -webkit-text-stroke: 4px var\(--night-glass\); paint-order: stroke fill/, 'type wears the halo over a stroke of the night');
+  assert.match(css, /\.visor__line--under \{ stroke: var\(--night-glass\)/, 'every line is drawn over the night');
+  assert.doesNotMatch(css, /data-hour|data-time|data-sky/, 'no per-hour style');
+  // the frame is two arcs, a notch and a sight; the compass, the side lines and the pills are gone
+  assert.equal((VISOR.match(/svgOpen\('visor__frame /g) || []).length, 2, 'two arcs');
+  assert.doesNotMatch(VISOR + css, /visor__cell|visor__mark|visor__line--side|visor__pill/, 'the old frame and the pills are gone');
+  const phone = read('style.css').match(/tasks 1005148 and 1005195, the visor[\s\S]*?\n\}/);
+  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');
+});
+
 // ---------- in a browser: the glass over a stand-in scene ----------
 const lib = require(path.join(ROOT, 'modules', 'ui-design', 'kit', 'lib.js'));
 let browser = null;
@@ -95,7 +126,7 @@ 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 TYPES = { '.js': 'text/javascript', '.css': 'text/css', '.png': 'image/png', '.svg': 'image/svg+xml' };
 // The stand-in scene: a canvas filling the window that pans on drag, and the sky's Escape rule.
 const SCENE = `<script>
   window.cam = { x: 0, y: 0 }; window.picked = true; window.optionsOpened = 0;
@@ -109,18 +140,23 @@ const SCENE = `<script>
     me() { return { builder: { total_credits: 56021 } }; }, spriteSrc(id) { return '/builders/characters/' + id + '.png'; }, openTool(id) { window.toolOpened = id; } };
   window.__visorScene = { name: 'test', place: 'Test city', actions: [{ label: 'Back to centre', key: '0', run() { window.centred = true; } }], keys: [{ label: 'Look around', key: 'drag' }] };
 </script>`;
-const PAGE = (game) => `<!doctype html><html${game ? ' data-game="on"' : ''}><head><meta charset="utf-8">
+// `helm` links the hall's real sheet (the token tier) instead of the stand-in colours.
+const PAGE = (game, helm) => helm ? `<!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">
+<style>body{margin:0}#world{position:fixed;inset:0;width:100vw;height:100vh;display:block}</style></head>
+<body><canvas id="world"></canvas>${SCENE}<script src="/builders/shell-game.js"></script><script src="/builders/visor.js"></script></body></html>`
+  : `<!doctype html><html${game ? ' data-game="on"' : ''}><head><meta charset="utf-8">
 <link rel="stylesheet" href="/builders/visor.css"><style>:root{--ink:#111;--ink-soft:#555;--ink-faint:#777;--rule:#ccc;--rule-soft:#ddd;--bg-card:#fff;--bg-deep:#eee;--accent:#fb9569;--accent-on:#111;--accent-deep:#a3481a;--focus:#a3481a}
 body{margin:0}#world{position:fixed;inset:0;width:100vw;height:100vh;display:block}</style></head>
 <body><canvas id="world"></canvas>${SCENE}<script src="/builders/shell-game.js"></script><script src="/builders/visor.js"></script></body></html>`;
 
-async function open({ game = true } = {}) {
-  const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+async function open({ game = true, helm = false, width = 1280, height = 800 } = {}) {
+  const ctx = await browser.newContext({ viewport: { width, height } });
   await ctx.route(ORIGIN + '/**', (route) => {
     const p = new URL(route.request().url()).pathname;
-    if (p === '/' ) return route.fulfill({ contentType: 'text/html', body: 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) });
+    if (p === '/' ) return route.fulfill({ contentType: 'text/html', body: PAGE(game, helm) });
+    const f = p.startsWith('/modules/') ? path.join(ROOT, p) : path.join(HALL, p.replace(/^\/builders\//, ''));
+    if ((p.startsWith('/builders/') || p.startsWith('/modules/')) && 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 page = await ctx.newPage();
@@ -139,12 +175,16 @@ test('outside game mode the hall is as it was: no glass', { skip }, async () =>
   await ctx.close();
 });
 
-test('in game mode the glass shows the place, the main action, the sprite and the credits', { skip }, async () => {
+test('in game mode the glass shows the place, the main action, the key hints, the sprite and the credits', { skip }, async () => {
   const { ctx, page, errors } = await open();
   const g = await page.evaluate(() => ({
     shown: getComputedStyle(document.getElementById('visor')).display,
     place: document.querySelector('.visor__place').textContent,
-    main: document.querySelector('.visor__pill--main').textContent,
+    main: document.querySelector('.visor__main').textContent,
+    hints: [...document.querySelectorAll('.visor__hints .visor__hint')].map((h) => h.textContent),
+    num: document.querySelector('.visor__num').textContent,
+    unit: document.querySelector('.visor__unit').textContent,
+    arcs: document.querySelectorAll('.visor__frame').length,
     who: document.querySelector('.visor__name').textContent,
     credits: document.querySelector('.visor__credits').textContent,
     sprite: document.querySelector('.visor__sprite').getAttribute('src'),
@@ -154,6 +194,10 @@ test('in game mode the glass shows the place, the main action, the sprite and th
   assert.match(g.main, /^Goal sky/, 'Claim a task opens a classic page, so it is off the glass in game mode (task 1005200)');
   assert.equal(g.who, 'Artisan');
   assert.equal(g.credits, '56,021 credits');
+  assert.deepEqual([g.num, g.unit], ['56,021', 'credits'], 'the count and its word are two spans of the same text');
+  // task 1005195: every other control is a quiet key hint. Actions kept its key and its sheet; nothing was dropped.
+  assert.deepEqual(g.hints, ['TYour thinking', 'AActions', 'EscOptions']);
+  assert.equal(g.arcs, 2, 'two arcs frame the glass');
   assert.equal(g.sprite, '/builders/characters/artisan.png');
   assert.deepEqual(errors, []);
   await ctx.close();
@@ -199,7 +243,10 @@ test('the sheet lists the character\'s actions, then this place, and runs a scen
 test('an Artist\'s glass offers other actions, and its keys open the Artist\'s tools', { skip }, async () => {
   const { ctx, page } = await open();
   await page.evaluate(() => { OTBCraftMode.held = 'artist'; OTBVisor.render(); });
-  assert.match(await page.textContent('.visor__pill--main'), /^Review this page/);
+  assert.match(await page.textContent('.visor__main'), /^Review this page/);
+  assert.deepEqual(await page.$$eval('.visor__hints [data-visor-act]', (h) => h.map((x) => x.getAttribute('data-visor-act'))), ['words', 'idea'], 'the Artist\'s other tools are key hints');
+  await page.click('.visor__hints [data-visor-act="idea"]');
+  assert.equal(await page.evaluate(() => window.toolOpened), 'lightbulb', 'a hint runs its action, like its row in the sheet');
   await page.keyboard.press('e');
   assert.equal(await page.evaluate(() => window.toolOpened), 'paintbrush');
   await ctx.close();
@@ -223,3 +270,74 @@ test('no character, or no scene: no glass', { skip }, async () => {
   assert.equal(await page.evaluate(() => document.getElementById('visor').hidden), true);
   await ctx.close();
 });
+
+// ---------- Helm look 3 (task 1005195): the foot row over the hall's real sheets ----------
+const box = (sel) => `(() => [...document.querySelectorAll(${JSON.stringify(sel)})].filter((e) => e.getClientRects().length).map((e) => { const b = e.getBoundingClientRect(); return { l: b.left, t: b.top, r: b.right, b: b.bottom, w: b.width, h: b.height }; }))()`;
+const apart = (a, b) => a.r <= b.l + 0.5 || b.r <= a.l + 0.5 || a.b <= b.t + 0.5 || b.b <= a.t + 0.5;
+
+for (const [width, height] of [[1440, 900], [390, 844], [320, 640]]) {
+  test(`at ${width}px the foot row fits: no sideways scroll, nothing collides, every control clears 24px`, { skip }, async () => {
+    for (const who of ['artisan', 'artist', 'patron']) {
+      const { ctx, page, errors } = await open({ helm: true, width, height });
+      await page.evaluate((w) => { OTBCraftMode.held = w; OTBVisor.render(); }, who);
+      assert.equal(await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth), 0, `${who}: no sideways scroll`);
+      const [me] = await page.evaluate(box('.visor__me'));
+      const [main] = await page.evaluate(box('.visor__main'));
+      const hints = await page.evaluate(box('.visor__hint'));
+      const parts = [me, main, ...hints];
+      for (const p of parts) assert.ok(p.l >= 0 && p.r <= width + 0.5 && p.b <= height, `${who}: every part is inside the window`);
+      for (let i = 0; i < parts.length; i++) for (let j = i + 1; j < parts.length; j++) assert.ok(apart(parts[i], parts[j]), `${who}: parts ${i} and ${j} keep apart`);
+      for (const p of [main, ...hints]) assert.ok(p.w >= 24 && p.h >= 24, `${who}: a control is at least 24px both ways (${Math.round(p.w)}x${Math.round(p.h)})`);
+      assert.equal(await page.evaluate(() => document.querySelector('[data-visor-sheet]').getClientRects().length), 1, `${who}: Actions is on the glass at every width`);
+      if (width <= 640) {
+        assert.equal(hints.length, 1, `${who}: a phone keeps only Actions of the hints`);
+        assert.equal(await page.evaluate(() => document.querySelectorAll('.visor__place, .visor__frame--top, .visor__notch').length), 3);
+        assert.equal(await page.evaluate(() => [...document.querySelectorAll('.visor__place, .visor__frame--top, .visor__notch')].filter((e) => e.getClientRects().length).length), 0, `${who}: the top of a phone is the scene's`);
+        assert.ok(height - main.b >= 52 - 0.5 && height - main.b < 76, `${who}: the foot row sits lower on a phone`);
+      } else {
+        const [place] = await page.evaluate(box('.visor__place'));
+        const [arc] = await page.evaluate(box('.visor__frame--top'));
+        assert.ok(place && Math.abs((place.l + place.r) / 2 - width / 2) < 1, `${who}: the place is centred under the top arc`);
+        assert.ok(arc.t >= 0 && place.b <= 64, `${who}: the arc and the place keep inside the top inset, above a scene's own top row`);
+      }
+      await page.click('[data-visor-sheet]');
+      const [sheet] = await page.evaluate(box('.visor__sheet'));
+      assert.ok(sheet.l >= 0 && sheet.r <= width && sheet.t >= 0 && sheet.b <= Math.min(...parts.map((p) => p.t)) + 0.5, `${who}: the sheet stands inside the window, over the foot row`);
+      assert.deepEqual(errors, []);
+      await ctx.close();
+    }
+  });
+}
+
+test('the glass is the kit\'s: the cut accent button, ice hints with no box, the name voice, the inset focus ring', { skip }, async () => {
+  const { ctx, page } = await open({ helm: true, width: 1440, height: 900 });
+  const g = await page.evaluate(() => {
+    const cs = (s) => getComputedStyle(document.querySelector(s));
+    const root = getComputedStyle(document.documentElement);
+    const probe = (v) => { const d = document.createElement('i'); d.style.color = v; document.body.appendChild(d); const c = getComputedStyle(d).color; d.remove(); return c; };
+    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,
+      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,
+      cut: root.getPropertyValue('--cut-path').trim() !== '',
+    };
+  });
+  assert.equal(g.mainBg, g.accent, 'the one accent fill is the button you press');
+  assert.match(g.mainClip, /^polygon\(/, 'cut corner');
+  assert.equal(g.mainCase, 'uppercase', 'the name voice');
+  assert.equal(g.hintBg, 'rgba(0, 0, 0, 0)');
+  assert.equal(g.hintBorder, '0px', 'a hint has no box');
+  assert.equal(g.hintColor, g.ice, 'hints are ice');
+  assert.equal(g.num, g.white, 'the count is white');
+  assert.equal(g.unit, g.ice, 'its word is ice');
+  assert.notEqual(g.placeShadow, 'none', 'type over the scene wears the halo');
+  assert.equal(g.radius, '0px', 'no round thing on the glass');
+  assert.match(g.spriteClip, /^polygon\(/, 'the sprite sits in a cut box');
+  await page.keyboard.press('Tab');
+  const f = await page.evaluate(() => { const a = document.activeElement; const s = getComputedStyle(a); return { cls: a.className, outline: s.outlineStyle, ring: s.boxShadow }; });
+  assert.equal(f.cls, 'visor__main', 'the accent button is the first stop');
+  assert.equal(f.outline, 'none');
+  assert.match(f.ring, /inset/, 'focus is the inset two-tone ring (--press-focus)');
+  await ctx.close();
+});