@bongos/core 1.24.94 → 1.24.95

package/tests/character_creation.mjs

@@ -153,7 +153,7 @@ test('a held character is the only one offered, and the top bar wears its sprite
   const sw = t.C.switchHtml();
   assert.match(sw, /craft-switch--character/);
   assert.match(sw, /data-craft-me/);
-  assert.match(sw, /\/builders\/characters\/artisan\.png/);
+  assert.match(sw, /\/builders\/characters\/artisan-face\.png/, 'the chip is the head, its own picture (task 1005218)');
   assert.ok(!/data-craft-opt=/.test(sw), 'the three-way switch is gone');
   // A session's stored mode from before the character cannot override it.
   t.session['hall-craft'] = 'patron';
@@ -162,7 +162,7 @@ test('a held character is the only one offered, and the top bar wears its sprite
 
 test('the sprite is drawn on first paint from the last held character, before /me answers', () => {
   const t = boot({ store: { 'hall-character': 'patron' } });
-  assert.match(t.C.switchHtml(), /\/builders\/characters\/patron\.png/);
+  assert.match(t.C.switchHtml(), /\/builders\/characters\/patron-face\.png/);
 });
 
 test('an older core that says nothing about characters changes nothing', () => {
@@ -187,15 +187,52 @@ test('the character section never writes `hidden` onto the nav: a character only
   assert.ok(!/nav-item|app-sidebar/.test(section), 'the character code does not touch the nav itself; applyNav does');
 });
 
-test('the owner\'s three sprites are on disk, one per character', () => {
+// task 1005218: the second look. Three pictures per character, drawn by
+// docs/design/characters/v2/draw-characters.js --hall: the whole figure (64), the head for
+// the chip (32) and the head wearing the visor for the visor's corner (32).
+test('each character\'s three pictures are on disk, at their sizes', () => {
   for (const id of ['artisan', 'artist', 'patron']) {
-    const f = path.join(HALL, 'characters', id + '.png');
-    assert.ok(fs.existsSync(f), `${id}.png`);
-    const head = fs.readFileSync(f).subarray(0, 8);
-    assert.deepEqual([...head], [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a], `${id}.png is a PNG`);
+    for (const [part, size] of [['', 64], ['-face', 32], ['-visor', 32]]) {
+      const f = path.join(HALL, 'characters', id + part + '.png');
+      assert.ok(fs.existsSync(f), `${id}${part}.png`);
+      const buf = fs.readFileSync(f);
+      assert.deepEqual([...buf.subarray(0, 8)], [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a], `${id}${part}.png is a PNG`);
+      assert.deepEqual([buf.readUInt32BE(16), buf.readUInt32BE(20)], [size, size], `${id}${part}.png is ${size} by ${size}`);
+    }
   }
 });
 
+test('the hall\'s pictures are what the drawing script draws: nobody edited one by hand', async () => {
+  const { createRequire } = await import('node:module');
+  const draw = createRequire(import.meta.url)(path.join(ROOT, 'docs/design/characters/v2/draw-characters.js'));
+  const drawn = draw.hallFiles();
+  const onDisk = fs.readdirSync(path.join(HALL, 'characters')).sort();
+  assert.deepEqual(onDisk, Object.keys(drawn).sort(), 'nine files, three per character, and nothing else');
+  // Compared pixel for pixel, not byte for byte: two zlib builds may pack the same picture differently.
+  const zlib = await import('node:zlib');
+  const pixels = (png) => {
+    const parts = [];
+    for (let at = 8; at < png.length;) {
+      const len = png.readUInt32BE(at), type = png.toString('latin1', at + 4, at + 8);
+      if (type === 'IDAT') parts.push(png.subarray(at + 8, at + 8 + len));
+      at += 12 + len;
+    }
+    return zlib.inflateSync(Buffer.concat(parts));
+  };
+  for (const [name, buf] of Object.entries(drawn)) {
+    assert.ok(pixels(buf).equals(pixels(fs.readFileSync(path.join(HALL, 'characters', name)))), name + ' is stale or hand-edited: run node docs/design/characters/v2/draw-characters.js --hall');
+  }
+});
+
+test('the three characters\' colours are mixed from the hall\'s tokens, never typed in (ADR 0405)', () => {
+  const css = fs.readFileSync(path.join(HALL, 'style.css'), 'utf8');
+  const block = css.slice(css.indexOf('--char-artisan:'), css.indexOf('--char-patron:') + 120);
+  assert.match(block, /--char-artisan: var\(--accent\);/);
+  assert.match(block, /--char-artist: color-mix\(/);
+  assert.match(block, /--char-patron: color-mix\(/);
+  assert.ok(!/#[0-9a-fA-F]{3,8}/.test(block), 'no literal colour');
+});
+
 // ---------- the server half ----------
 test('core_297 adds the account column, and the CHECK names exactly the three characters', () => {
   const sql = fs.readFileSync(path.join(ROOT, 'migrations/core_297_builder_character.sql'), 'utf8');

package/tests/hall_visor.mjs

@@ -179,7 +179,7 @@ const SCENE = `<script>
   cv.addEventListener('pointerup', () => { drag = null; });
   addEventListener('keydown', (e) => { if (e.key === 'Escape' && window.picked) { e.preventDefault(); window.picked = false; } });
   window.OTBCraftMode = { held: 'artisan', character() { return this.held; }, current() { return null; },
-    me() { return { builder: { total_credits: 56021 } }; }, spriteSrc(id) { return '/builders/characters/' + id + '.png'; }, openTool(id) { window.toolOpened = id; } };
+    me() { return { builder: { total_credits: 56021 } }; }, spriteSrc(id) { return '/builders/characters/' + id + '.png'; }, portraitSrc(id) { return '/builders/characters/' + id + '-visor.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>`;
 // `helm` links the hall's real sheet (the token tier) instead of the stand-in colours.
@@ -240,7 +240,7 @@ test('in game mode the glass shows the place, the main action, the key hints, th
   // 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.equal(g.sprite, '/builders/characters/artisan-visor.png', 'your picture on the glass is you wearing the visor (task 1005218)');
   assert.deepEqual(errors, []);
   await ctx.close();
 });
@@ -366,6 +366,32 @@ for (const [width, height] of [[1440, 900], [390, 844], [320, 640]]) {
   });
 }
 
+// task 1005218 (ADR 0405): each character has one colour, and the glass wears the held one.
+test('the glass wears the held character\'s colour: the Artisan\'s is the accent, the Artist\'s and the Patron\'s are their own', { skip }, async () => {
+  const { ctx, page } = await open({ helm: true });
+  const g = await page.evaluate(() => {
+    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; };
+    const out = { accent: probe('var(--accent)') };
+    for (const id of ['artisan', 'artist', 'patron']) {
+      window.OTBCraftMode.held = id; window.OTBVisor.render();
+      const cs = (s) => getComputedStyle(document.querySelector(s));
+      out[id] = { char: probe('var(--char-' + id + ')'), main: cs('.visor__main').backgroundColor, name: cs('.visor__name').color,
+        line: cs('.visor__line:not(.visor__line--under)').stroke, rim: cs('.visor__sprite').borderTopColor, src: document.querySelector('.visor__sprite').getAttribute('src') };
+    }
+    return out;
+  });
+  assert.equal(g.artisan.main, g.accent, 'an Artisan\'s glass is the accent it always was');
+  for (const id of ['artisan', 'artist', 'patron']) {
+    assert.equal(g[id].main, g[id].char, id + ': the one button is the character\'s colour');
+    assert.equal(g[id].name, g[id].char, id + ': so is the name');
+    assert.equal(g[id].line, g[id].char, id + ': and the frame\'s lines');
+    assert.equal(g[id].rim, g[id].char, id + ': and the rim of the picture');
+    assert.equal(g[id].src, '/builders/characters/' + id + '-visor.png');
+  }
+  assert.equal(new Set([g.artisan.char, g.artist.char, g.patron.char]).size, 3, 'three characters, three colours');
+  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(() => {