@thebattlearena/corner 0.9.1-beta.70 → 0.10.1-beta.78

package/ring/scripts/bout-stats-render.mjs

@@ -0,0 +1,366 @@
+// Renders the numbers of bout-stats.mjs as the "El cierre en números" block of the chronicle, in
+// the Battle Arena voice: a weigh-in (code against tests), round by round between the ropes, the
+// fight clock (24 h), a CompuBox of punch types, the referee's scorecards and the highlight reel.
+// Inline SVG and HTML only, colored through the template's tokens (classes cn-*), so light and dark
+// both work and nothing loads from outside. PURE and zero-dependency.
+
+const LABELS = {
+  es: {
+    title: 'El cierre en números',
+    tiles: {
+      duration: 'de pelea, del primer registro al último',
+      commits: 'commits del luchador',
+      rounds: 'rounds con su campana',
+      lines: 'líneas agregadas',
+    },
+    weighIn: 'La báscula',
+    weighInNote: (ratio) =>
+      `${ratio} líneas de prueba por cada línea de código.`,
+    red: 'Esquina roja',
+    blue: 'Esquina azul',
+    code: 'Código',
+    tests: 'Pruebas',
+    lockfile: 'Lockfile',
+    other: 'Config, scripts y assets',
+    deadWeight: 'Peso muerto',
+    linesUnit: 'líneas',
+    rounds: 'Round por round',
+    roundsNote: 'Commits por día, por fecha del commit.',
+    star: 'Round estelar',
+    clock: 'El reloj de la pelea',
+    clockNote: 'Commits por hora del día. La franja sombreada es la madrugada.',
+    peak: 'hora pico',
+    night: 'de madrugada (00–06)',
+    bands: ['Madrugada 00–06', 'Mañana 06–12', 'Tarde 12–18', 'Noche 18–24'],
+    compubox: 'CompuBox',
+    compuboxNote: 'Cada commit, por su tipo de golpe.',
+    types: {
+      feat: 'Golpes de poder',
+      fix: 'Jabs',
+      refactor: 'Juego de piernas',
+      test: 'Guardia',
+      docs: 'Esquina',
+      perf: 'Velocidad',
+      style: 'Estilo',
+      build: 'Calentamiento',
+      ci: 'Campana',
+      chore: 'Vendajes',
+      other: 'Otros',
+    },
+    card: 'La tarjeta del árbitro',
+    decisions: 'decisiones registradas',
+    judge: (n) => `${n} del juez`,
+    contracts: 'contratos firmados por el juez',
+    reboundsLabel: 'puntos de rebote',
+    reboundsSub: (closed, open) => `${closed} cerrados · ${open} abiertos`,
+    findings: 'hallazgos de esquinero',
+    findingsSub: (f) =>
+      `${f.applied} aplicados · ${f.discarded} descartados · ${f.ticket} a ticket`,
+    fouls: 'faltas que el árbitro se marcó',
+    reel: 'Mejores momentos',
+    commitsWord: 'commits',
+    tags: {
+      reclamo: 'Reclamo',
+      dado: 'Golpe dado',
+      recibido: 'Golpe recibido',
+      falta: 'Falta',
+      juez: 'Juez',
+      arbitro: 'Árbitro',
+      bateria: 'Batería',
+      campana: 'Campana',
+    },
+    weekday: 'es-MX',
+  },
+  en: {
+    title: 'The bout in numbers',
+    tiles: {
+      duration: 'of fighting, first record to last',
+      commits: "the wrestler's commits",
+      rounds: 'rounds with their bell',
+      lines: 'lines added',
+    },
+    weighIn: 'The weigh-in',
+    weighInNote: (ratio) => `${ratio} lines of tests for every line of code.`,
+    red: 'Red corner',
+    blue: 'Blue corner',
+    code: 'Code',
+    tests: 'Tests',
+    lockfile: 'Lockfile',
+    other: 'Config, scripts and assets',
+    deadWeight: 'Dead weight',
+    linesUnit: 'lines',
+    rounds: 'Round by round',
+    roundsNote: 'Commits per day, by commit date.',
+    star: 'Main event',
+    clock: 'The fight clock',
+    clockNote:
+      'Commits per hour of the day. The shaded band is the small hours.',
+    peak: 'peak hour',
+    night: 'in the small hours (00–06)',
+    bands: [
+      'Small hours 00–06',
+      'Morning 06–12',
+      'Afternoon 12–18',
+      'Night 18–24',
+    ],
+    compubox: 'CompuBox',
+    compuboxNote: 'Every commit, by its punch type.',
+    types: {
+      feat: 'Power punches',
+      fix: 'Jabs',
+      refactor: 'Footwork',
+      test: 'Guard',
+      docs: 'Corner',
+      perf: 'Speed',
+      style: 'Style',
+      build: 'Warm-up',
+      ci: 'Bell',
+      chore: 'Hand wraps',
+      other: 'Other',
+    },
+    card: "The referee's card",
+    decisions: 'decisions logged',
+    judge: (n) => `${n} by the judge`,
+    contracts: 'contracts the judge signed',
+    reboundsLabel: 'rebound points',
+    reboundsSub: (closed, open) => `${closed} closed · ${open} open`,
+    findings: 'cornerman findings',
+    findingsSub: (f) =>
+      `${f.applied} applied · ${f.discarded} discarded · ${f.ticket} ticketed`,
+    fouls: 'fouls the referee called on itself',
+    reel: 'Highlight reel',
+    commitsWord: 'commits',
+    tags: {
+      reclamo: 'Claim',
+      dado: 'Blow landed',
+      recibido: 'Blow taken',
+      falta: 'Foul',
+      juez: 'Judge',
+      arbitro: 'Referee',
+      bateria: 'Battery',
+      campana: 'Bell',
+    },
+    weekday: 'en-US',
+  },
+};
+
+const esc = (text) =>
+  String(text)
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;');
+const fmt = (n, locale) => new Intl.NumberFormat(locale).format(n);
+const r1 = (n) => Math.round(n * 10) / 10;
+
+function tiles(stats, t, locale) {
+  const tile = (value, label) =>
+    value === null || value === undefined
+      ? ''
+      : `<div><b>${esc(value)}</b><span>${esc(label)}</span></div>`;
+  return `<div class="cn-tiles cn-cards">${[
+    tile(stats.duration.label, t.tiles.duration),
+    tile(stats.rhythm && fmt(stats.rhythm.total, locale), t.tiles.commits),
+    tile(stats.book.roundBells, t.tiles.rounds),
+    tile(stats.lines && fmt(stats.lines.added, locale), t.tiles.lines),
+  ].join('')}</div>`;
+}
+
+function weighIn({ buckets }, t, locale) {
+  const code = buckets.code.added;
+  const tests = buckets.tests.added;
+  const both = code + tests || 1;
+  const ratio = code
+    ? new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }).format(
+        tests / code,
+      )
+    : '0';
+  const dead = [
+    [t.lockfile, buckets.lockfile.added],
+    [t.other, buckets.other.added],
+  ].filter(([, n]) => n);
+  const corner = (side, label, name, n) =>
+    `<div class="cn-corner cn-${side}"><span class="cn-corner-label">${esc(label)}</span><b>${fmt(n, locale)}</b><span>${esc(name)} · ${esc(t.linesUnit)}</span></div>`;
+  return `<h4 class="cn-h">${esc(t.weighIn)}</h4><p class="cn-note">${esc(t.weighInNote(ratio))}</p>
+<div class="cn-weigh">
+  <div class="cn-weigh-top">${corner('red', t.red, t.code, code)}<div class="cn-vs">VS</div>${corner('blue', t.blue, t.tests, tests)}</div>
+  <div class="cn-tape" role="img" aria-label="${esc(`${t.code} ${code}, ${t.tests} ${tests}`)}"><i class="cn-tape-red" style="width:${r1((code * 100) / both)}%" title="${esc(`${t.code}: ${fmt(code, locale)}`)}"></i><i class="cn-tape-blue" style="width:${r1((tests * 100) / both)}%" title="${esc(`${t.tests}: ${fmt(tests, locale)}`)}"></i></div>
+  ${dead.length ? `<div class="cn-dead"><span>${esc(t.deadWeight)}</span>${dead.map(([name, n]) => `<span>${esc(name)} <b>${fmt(n, locale)}</b></span>`).join('')}</div>` : ''}
+</div>`;
+}
+
+function roundByRound(byDay, t, locale) {
+  const W = 640;
+  const H = 262;
+  const top = 72;
+  const base = 218;
+  const max = Math.max(1, ...byDay.map((d) => d.n));
+  const slot = (W - 60) / byDay.length;
+  const bar = Math.min(64, slot * 0.6);
+  const star = byDay.findIndex((d) => d.n === max);
+  const ropes = [0.25, 0.5, 0.75]
+    .map(
+      (f, i) =>
+        `<line class="cn-rope cn-rope-${i}" x1="22" x2="${W - 22}" y1="${r1(base - f * (base - top))}" y2="${r1(base - f * (base - top))}"/>`,
+    )
+    .join('');
+  const label = (day) =>
+    new Intl.DateTimeFormat(t.weekday, {
+      weekday: 'short',
+      day: 'numeric',
+      timeZone: 'UTC',
+    }).format(new Date(`${day}T12:00:00Z`));
+  const bars = byDay
+    .map((d, i) => {
+      const h = (d.n / max) * (base - top);
+      const x = 30 + slot * i + (slot - bar) / 2;
+      const y = base - h;
+      const cls = `cn-bar cn-fill-${i % 5}${i === star ? ' cn-bar-star' : ''}`;
+      return `<g><title>${esc(`${label(d.day)}: ${fmt(d.n, locale)} ${t.commitsWord}`)}</title><path class="${cls}" d="M${r1(x)},${base} V${r1(y + Math.min(4, h))} q0,-4 4,-4 h${r1(bar - 8)} q4,0 4,4 V${base} Z"/>${
+        d.n
+          ? `<text class="cn-val" x="${r1(x + bar / 2)}" y="${r1(y - 8)}">${fmt(d.n, locale)}</text>`
+          : ''
+      }<text class="cn-axis" x="${r1(x + bar / 2)}" y="${base + 22}">${esc(label(d.day))}</text>${
+        i === star
+          ? `<text class="cn-star" x="${r1(x + bar / 2)}" y="${r1(y - 40)}">${esc(t.star)}</text>`
+          : ''
+      }</g>`;
+    })
+    .join('');
+  return `<h4 class="cn-h">${esc(t.rounds)}</h4><p class="cn-note">${esc(t.roundsNote)}</p>
+<div class="cn-chart"><svg viewBox="0 0 ${W} ${H}" role="img" aria-label="${esc(t.rounds)}">${ropes}<rect class="cn-post" x="14" y="${top - 6}" width="8" height="${base - top + 6}" rx="2"/><rect class="cn-post" x="${W - 22}" y="${top - 6}" width="8" height="${base - top + 6}" rx="2"/><line class="cn-canvas-line" x1="14" x2="${W - 14}" y1="${base}" y2="${base}"/>${bars}</svg></div>`;
+}
+
+function fightClock(byHour, t, locale) {
+  const C = 170;
+  const r0 = 62;
+  const len = 92;
+  const max = Math.max(1, ...byHour);
+  const peak = byHour.indexOf(max);
+  const point = (r, deg) => {
+    const a = ((deg - 90) * Math.PI) / 180;
+    return [r1(C + r * Math.cos(a)), r1(C + r * Math.sin(a))];
+  };
+  const wedge = (ri, ro, from, to) => {
+    const [x1, y1] = point(ri, from);
+    const [x2, y2] = point(ro, from);
+    const [x3, y3] = point(ro, to);
+    const [x4, y4] = point(ri, to);
+    const large = to - from > 180 ? 1 : 0;
+    return `M${x1},${y1} L${x2},${y2} A${ro},${ro} 0 ${large} 1 ${x3},${y3} L${x4},${y4} A${ri},${ri} 0 ${large} 0 ${x1},${y1} Z`;
+  };
+  const night = `<path class="cn-night" d="${wedge(r0, r0 + len + 4, 0, 90)}"/>`;
+  const hours = byHour
+    .map((n, h) => {
+      const ro = r0 + 3 + (n / max) * len;
+      const cls = `cn-hour cn-band-${Math.floor(h / 6)}${h === peak ? ' cn-hour-peak' : ''}`;
+      return n
+        ? `<path class="${cls}" d="${wedge(r0 + 3, ro, h * 15 + 2, h * 15 + 13)}"><title>${String(h).padStart(2, '0')}:00 · ${fmt(n, locale)} ${t.commitsWord}</title></path>`
+        : '';
+    })
+    .join('');
+  const ticks = [0, 6, 12, 18]
+    .map((h) => {
+      const [x, y] = point(r0 + len + 18, h * 15 + 7.5);
+      return `<text class="cn-axis" x="${x}" y="${y + 4}">${String(h).padStart(2, '0')}</text>`;
+    })
+    .join('');
+  const bandCounts = [0, 1, 2, 3].map((band) =>
+    byHour.slice(band * 6, band * 6 + 6).reduce((a, b) => a + b, 0),
+  );
+  const nightCount = bandCounts[0];
+  const legend = bandCounts
+    .map(
+      (n, band) =>
+        `<li><i class="cn-band-${band}"></i>${esc(t.bands[band])}<b>${fmt(n, locale)}</b></li>`,
+    )
+    .join('');
+  return `<h4 class="cn-h">${esc(t.clock)}</h4><p class="cn-note">${esc(t.clockNote)}</p>
+<div class="cn-chart cn-clock-wrap"><svg class="cn-clock" viewBox="-24 -24 388 388" role="img" aria-label="${esc(t.clock)}"><circle class="cn-face" cx="${C}" cy="${C}" r="${r0 + len + 4}"/>${night}<circle class="cn-hub" cx="${C}" cy="${C}" r="${r0}"/>${hours}${ticks}<text class="cn-clock-big" x="${C}" y="${C + 6}">${String(peak).padStart(2, '0')}:00</text><text class="cn-clock-sub" x="${C}" y="${C + 28}">${esc(t.peak)}</text></svg>
+<div class="cn-clock-facts"><div><b>${fmt(max, locale)}</b><span>${esc(t.commitsWord)} · ${String(peak).padStart(2, '0')}:00, ${esc(t.peak)}</span></div><div><b>${fmt(nightCount, locale)}</b><span>${esc(t.commitsWord)} ${esc(t.night)}</span></div><ul class="cn-bands">${legend}</ul></div></div>`;
+}
+
+function compuBox(byType, total, t, locale) {
+  const max = Math.max(1, ...byType.map((x) => x.n));
+  const rows = byType
+    .map(({ type, n }) => {
+      const cls =
+        {
+          feat: 'cn-fill-0',
+          fix: 'cn-fill-1',
+          refactor: 'cn-fill-2',
+          test: 'cn-fill-3',
+          docs: 'cn-fill-4',
+        }[type] ?? 'cn-ink';
+      const pct = total ? Math.round((n * 100) / total) : 0;
+      return `<div class="cn-box-row" title="${esc(`${t.types[type]} (${type}): ${fmt(n, locale)}`)}"><span class="cn-box-name">${esc(t.types[type])}<code>${esc(type)}</code></span><span class="cn-box-track"><i class="${cls}" style="width:${r1((n * 100) / max)}%"></i></span><b>${fmt(n, locale)}</b><span class="cn-box-pct">${pct}%</span></div>`;
+    })
+    .join('');
+  return `<h4 class="cn-h">${esc(t.compubox)}</h4><p class="cn-note">${esc(t.compuboxNote)}</p><div class="cn-chart cn-box">${rows}</div>`;
+}
+
+function refereeCard(book, t, locale) {
+  const f = book.findings;
+  let next = 0;
+  const card = (n, label, sub, cls = `cn-head-${next++ % 5}`) =>
+    `<div class="cn-score ${cls}"><span class="cn-score-head">${esc(label)}</span><b>${fmt(n, locale)}</b>${sub ? `<span>${esc(sub)}</span>` : ''}</div>`;
+  return `<h4 class="cn-h">${esc(t.card)}</h4><div class="cn-scores">${[
+    card(book.decisions, t.decisions, t.judge(book.judgeDecisions)),
+    card(
+      book.rebounds.total,
+      t.reboundsLabel,
+      t.reboundsSub(
+        book.rebounds.closed,
+        book.rebounds.total - book.rebounds.closed,
+      ),
+    ),
+    f.total ? card(f.total, t.findings, t.findingsSub(f)) : '',
+    book.contracts ? card(book.contracts, t.contracts, '') : '',
+    card(book.fouls, t.fouls, '', 'cn-score-foul'),
+  ].join('')}</div>`;
+}
+
+function reel(moments, timeZone, t) {
+  if (!moments.length) return '';
+  const first = Date.parse(moments[0].at);
+  const span = Math.max(1, Date.parse(moments.at(-1).at) - first);
+  const when = (at) =>
+    new Intl.DateTimeFormat(t.weekday, {
+      timeZone,
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    }).format(new Date(at));
+  const marks = moments
+    .map(
+      (m, i) =>
+        `<span class="cn-bell cn-fill-${i % 5}" style="left:${r1(3 + ((Date.parse(m.at) - first) * 94) / span)}%" title="${esc(`${when(m.at)} · ${m.title}`)}">${i + 1}</span>`,
+    )
+    .join('');
+  const items = moments
+    .map(
+      (m, i) =>
+        `<li><span class="cn-reel-n">${i + 1}</span><time>${esc(when(m.at))}</time><p><span class="tag t-${esc(m.tag)}">${esc(t.tags[m.tag] ?? m.tag)}</span>${esc(m.title)}</p></li>`,
+    )
+    .join('');
+  return `<h4 class="cn-h">${esc(t.reel)}</h4><div class="cn-reel"><div class="cn-reel-line">${marks}</div><ol>${items}</ol></div>`;
+}
+
+/** The whole block. `stats` is collectStats()'s output; moments come from readMoments(). PURE. */
+export function renderStats(stats, { lang = 'es', moments = [] } = {}) {
+  const t = LABELS[lang] ?? LABELS.es;
+  const locale = lang === 'en' ? 'en-US' : 'es-MX';
+  return `<section class="round cn">
+  <div class="cn-picado" aria-hidden="true"></div>
+  <h2>${esc(t.title)}</h2>
+  ${tiles(stats, t, locale)}
+  ${stats.lines ? weighIn(stats.lines, t, locale) : ''}
+  ${stats.rhythm?.byDay.length ? roundByRound(stats.rhythm.byDay, t, locale) : ''}
+  ${stats.rhythm?.total ? fightClock(stats.rhythm.byHour, t, locale) : ''}
+  ${stats.rhythm?.total ? compuBox(stats.rhythm.byType, stats.rhythm.total, t, locale) : ''}
+  ${refereeCard(stats.book, t, locale)}
+  ${reel(moments, stats.timezone, t)}
+  <!-- CHANGELOG: the skill writes <h4 class="cn-h"> and <ul class="cn-changelog"> here -->
+</section>`;
+}