@prplkane/roundtable 0.0.0-stage → 0.6.4

package/src/ui/avatars.js

@@ -0,0 +1,132 @@
+// Pixel avatars for the seat cards: one per mood, plus the chairman's gavel. 12x12, one colour
+// (currentColor, so the card's vendor colour), drawn with crisp edges like the logo tile.
+// The shape says how the seat argues; the colour says whose CLI it is.
+
+const ART = {
+  grill: [ // a pointing hand, thumb up (a nod to Ace Attorney's "Objection!"): attack assumptions, demand evidence
+    '............',
+    '...XX.......',
+    '...XX.......',
+    'XX.XXXXXXXXX',
+    'XX.XXXXXXXXX',
+    'XX.XXXXX....',
+    'XX.XXXX.....',
+    'XX.XXXXX....',
+    'XX..XXX.....',
+    '............',
+    '............',
+    '............',
+  ],
+  steelman: [ // a heater shield with a gem at its heart (a nod to The Rising of the Shield Hero): the strongest version of each option first
+    'XXXXXXXXXXXX',
+    'XXXXXXXXXXXX',
+    'XXXXX..XXXXX',
+    'XXXX.XX.XXXX',
+    'XXX.XXXX.XXX',
+    'XXXX.XX.XXXX',
+    'XXXXX..XXXXX',
+    '.XXXXXXXXXX.',
+    '.XXXXXXXXXX.',
+    '..XXXXXXXX..',
+    '...XXXXXX...',
+    '.....XX.....',
+  ],
+  builder: [ // a hard hat (a nod to Bob the Builder): what it takes to ship
+    '............',
+    '............',
+    '............',
+    '....XXXX....',
+    '..XX.XX.XX..',
+    '.XXX.XX.XXX.',
+    '.XXX.XX.XXX.',
+    '.XXX.XX.XXX.',
+    'XXXXXXXXXXXX',
+    'XXXXXXXXXXXX',
+    '............',
+    '............',
+  ],
+  contrarian: [ // a reverse card: the stance the others are least likely to take
+    '.XXXXXXXXXX.',
+    '.X........X.',
+    '.X.....X..X.',
+    '.X.XXXXXX.X.',
+    '.X.....X..X.',
+    '.X........X.',
+    '.X........X.',
+    '.X..X.....X.',
+    '.X.XXXXXX.X.',
+    '.X..X.....X.',
+    '.X........X.',
+    '.XXXXXXXXXX.',
+  ],
+  custom: [ // a quill: the seat's own sentence
+    '..........XX',
+    '.........XXX',
+    '........XXX.',
+    '.......XXX..',
+    '......XXX...',
+    '.....XXX....',
+    '....XXX.....',
+    '...XXX......',
+    '...XX.......',
+    '..X.........',
+    '.X..........',
+    'X...........',
+  ],
+  chairman: [ // a judge's gavel with a cross on its head (a nod to Higuruma's): writes the verdict; the human decides
+    'XXXXXXX.....',
+    '.XXXXX......',
+    '.XX.XX.....X',
+    '.X...XXXXXXX',
+    '.XX.XXXXXXXX',
+    '.XXXXX.....X',
+    '.XXXXX......',
+    'XXXXXXX.....',
+    '............',
+    'XXXXXXXX....',
+    'XXXXXXXX....',
+    '............',
+  ],
+  // the searcher: an open eye, pointed at the corners, a glint in the iris. It is the court's
+  // investigator: it looks for evidence before the trial and reads; it never argues or votes.
+  // (An eye inside a magnifier's lens has no room at 12 pixels and reads as a snout.)
+  searcher: [
+    '............',
+    '............',
+    '....XXXX....',
+    '..XX....XX..',
+    '.X..XXXX..X.',
+    'X..XX.XXX..X',
+    'X..XXXXXX..X',
+    '.X..XXXX..X.',
+    '..XX....XX..',
+    '....XXXX....',
+    '............',
+    '............',
+  ],
+};
+
+// Each run of filled cells in a row is one rect, so a pixel drawing stays small. The session
+// ceremony draws its larger gavel with the same helper, so both read as one family.
+export function pixelRects(rows, mark = 'X') {
+  const rects = [];
+  rows.forEach((row, y) => {
+    for (let x = 0; x < row.length; x++) {
+      if (row[x] !== mark) continue;
+      let w = 1;
+      while (row[x + w] === mark) w++;
+      rects.push(`<rect x="${x}" y="${y}" width="${w}" height="1"/>`);
+      x += w - 1;
+    }
+  });
+  return rects.join('');
+}
+
+// The raw rows, for a drawing built from the same art elsewhere (the session gavel).
+export const sprite = (name) => ART[name] || ART.grill;
+
+// One <svg> per avatar.
+export function avatar(name, rows = ART[name] || ART.grill) {
+  const rects = pixelRects(rows);
+  return `<svg viewBox="0 0 12 12" shape-rendering="crispEdges" fill="currentColor" aria-hidden="true">${rects}</svg>`;
+}

package/src/ui/ceremony.js

@@ -0,0 +1,87 @@
+// The session cue: a pixel gavel that strikes once when a session opens and once when it ends,
+// with a few chips, a 1px shake and a short synthesized sound. It never gates a request, changes
+// review state or loads media. Replayed history never plays (ceremonyOutcome in review-view.js).
+import { pixelRects, sprite } from '/ui/avatars.js';
+import { playCue } from '/ui/sound.js';
+
+// The chairman seat's own 12x12 gavel, so the pop-up and the card show one drawing. Rows 0-7
+// are the gavel, rows 9-10 the block it strikes. Swing frames are redrawn on a grid twice as
+// fine (nearest cell), not rotated by CSS, so every frame stays crisp. The pivot is the end of
+// the handle; positive degrees lift the head, negative drop it onto the block.
+const ART = sprite('chairman');
+const GAVEL = ART.map((row, y) => (y <= 7 ? row : ''));
+const BLOCK = ART.map((row, y) => (y >= 9 ? row : ''));
+const FINE = 2, SIZE = 12 * FINE, PAD = 5, PIVOT = [11.5 * FINE, 4 * FINE]; // PAD: headroom for the lifted head
+function rotated(rows, deg) {
+  const r = (deg * Math.PI) / 180, cos = Math.cos(r), sin = Math.sin(r), [px, py] = PIVOT;
+  return Array.from({ length: SIZE + PAD }, (_, i) => Array.from({ length: SIZE }, (_, x) => {
+    const y = i - PAD, dx = x + 0.5 - px, dy = y + 0.5 - py;
+    const sx = px + dx * cos + dy * sin, sy = py - dx * sin + dy * cos;
+    return rows[Math.floor(sy / FINE)]?.[Math.floor(sx / FINE)] === 'X' ? 'X' : '.';
+  }).join(''));
+}
+const scaled = (rows) => [...Array(PAD).fill(''), ...rows.flatMap((row) => { const r = [...row].map((c) => c.repeat(FINE)).join(''); return Array(FINE).fill(r); })];
+const ANGLES = [0, 6, 12, -7, 3]; // rest, lifted, high, struck, bounce
+
+// [ms after play, frame]. The strike lands on frame 0 at HIT_MS, where the sound's knock is.
+const HIT_MS = 505;
+const SHOW_MS = 2000;
+const SWING = [[120, 1], [190, 2], [455, 1], [HIT_MS, 3], [600, 4], [680, 0]];
+const TAP = [[150, 1], [HIT_MS, 3], [620, 0]];
+
+const PHASES = {
+  open: { label: 'Session open', text: 'Independent replies first.', chips: [[-2, -2], [2, -3]] },
+  verdict: { label: 'Verdict ready', text: 'The verdict is ready to review.', chips: [[-3, -3], [-2, -5], [-4, -1], [2, -4], [3, -2], [1, -5]] },
+  cancelled: { label: 'Review stopped', text: 'Calls cancelled. Saved replies are kept.', chips: [] },
+  ended: { label: 'Session closed', text: 'Replies saved. No verdict was written.', chips: [[-3, -2], [-2, -4], [2, -3], [3, -1]] },
+  failed: { label: 'Session failed', text: 'It did not finish. The board shows what happened.', chips: [[-2, 2], [-1, 3], [2, 2]] },
+};
+
+export function installCeremony() {
+  const notice = document.createElement('div');
+  notice.className = 'session-ceremony'; notice.hidden = true;
+  notice.setAttribute('aria-hidden', 'true'); // The board's status already announces the step.
+  notice.innerHTML = `<div class="ceremony-card">
+    <svg class="ceremony-art" viewBox="0 0 ${SIZE} ${SIZE + PAD}" shape-rendering="crispEdges" focusable="false" aria-hidden="true">
+      <g class="ceremony-block">${pixelRects(scaled(BLOCK))}</g>
+      <g class="ceremony-gavel">${ANGLES.map((deg, i) => `<g${i ? ' hidden' : ''}>${pixelRects(deg ? rotated(GAVEL, deg) : scaled(GAVEL))}</g>`).join('')}</g>
+      <g class="ceremony-chips"></g>
+    </svg>
+    <div class="ceremony-text"><strong></strong><span></span></div>
+  </div>`;
+  document.body.append(notice);
+  const chips = notice.querySelector('.ceremony-chips');
+  const frames = [...notice.querySelector('.ceremony-gavel').children];
+  const show = (n) => frames.forEach((g, i) => g.toggleAttribute('hidden', i !== n));
+  let timers = [];
+
+  function cancel() {
+    timers.forEach(clearTimeout); timers = [];
+    notice.hidden = true; notice.classList.remove('is-playing'); chips.replaceChildren(); show(0);
+  }
+
+  function play(kind) {
+    const phase = PHASES[kind];
+    if (!phase) return;
+    cancel();
+    playCue(kind, HIT_MS / 1000); // sound follows the Sound toggle, even in a background tab
+    if (document.hidden) return; // nobody would see it; the sound already told them
+    const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+    notice.dataset.phase = kind;
+    notice.querySelector('strong').textContent = phase.label;
+    notice.querySelector('span').textContent = phase.text;
+    if (!still) {
+      // Chips leave from the block where the head lands and fly away from it, one art pixel each.
+      chips.innerHTML = phase.chips.map(([dx, dy]) => `<rect class="ceremony-chip" x="${dx < 0 ? 2 : 12}" y="${16 + PAD}" width="${FINE}" height="${FINE}" style="--dx:${dx}px;--dy:${dy}px"/>`).join('');
+      for (const [ms, n] of kind === 'open' ? TAP : SWING) timers.push(setTimeout(show, ms, n));
+    }
+    notice.hidden = false;
+    void notice.offsetWidth; // restart the animation if it was mid-play
+    notice.classList.add('is-playing');
+    timers.push(setTimeout(cancel, SHOW_MS));
+  }
+
+  document.addEventListener('keydown', (event) => { if (event.key === 'Escape') cancel(); });
+  document.addEventListener('visibilitychange', () => { if (document.hidden) cancel(); });
+  return { play, cancel };
+}