@thebattlearena/corner 0.9.0 → 0.10.0

package/ring/skills/play-by-play/templates/now-panel.js

@@ -0,0 +1,719 @@
+// «Qué necesita de ti ahora», the dark panel on top of the chronicle (`section[data-ring-now]`):
+// what the judge has to do, counted live from the page's bus (`window.ringPage`, which
+// interview-form.js and endpoints-view.js fill from `respuestas` and `veredictos`) and from each
+// bout's line the skill wrote (`.now-bout[data-pr][data-label][data-frozen]`). Per bout it shows
+// the next question and the next endpoints or routes with their controls, so the judge answers and
+// judges without going down; «Ver la cola» shows the rest. «Aceptar las N recomendaciones del
+// réferi» saves the recommended option of every unanswered question only after a dialog that lists
+// each one (Julio: nothing is saved without him knowing). With nothing to do, the panel says who
+// has the ball and the latest news (`.now-ball`, `.now-news`). It also runs «Abrir todo» of «La
+// crónica» and opens the folded stage an in-page link points into.
+(() => {
+  const ring = (window.ringPage ??= {
+    questions: new Map(),
+    boards: new Map(),
+    scales: {},
+    changed() {
+      document.dispatchEvent(new CustomEvent('ring:change'));
+    },
+  });
+
+  const el = (tag, attrs = {}, ...children) => {
+    const node = document.createElement(tag);
+    Object.entries(attrs).forEach(([key, value]) => {
+      if (value === undefined || value === null || value === false) return;
+      if (key === 'text') return void (node.textContent = value);
+      if (key.startsWith('on'))
+        return void node.addEventListener(key.slice(2), value);
+      node.setAttribute(key, value === true ? '' : value);
+    });
+    children
+      .flat(Infinity)
+      .filter(
+        (child) => child !== null && child !== undefined && child !== false,
+      )
+      .forEach((child) => node.append(child));
+    return node;
+  };
+  /** replaceChildren that flattens arrays and skips null, undefined and false, like `el`. */
+  const put = (node, ...children) =>
+    node.replaceChildren(
+      ...children
+        .flat(Infinity)
+        .filter((child) => child !== null && child !== undefined && child !== false),
+    );
+  const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+  const list = (items) =>
+    items.length < 2
+      ? items.join('')
+      : `${items.slice(0, -1).join(', ')} y ${items.at(-1)}`;
+
+  // «La crónica»: «Abrir todo» and the stage a link points into.
+  document.querySelectorAll('[data-ring-open-all]').forEach((button) => {
+    button.addEventListener('click', () => {
+      const stages = [...document.querySelectorAll('details.stage')];
+      const open = !stages.every((stage) => stage.open);
+      stages.forEach((stage) => (stage.open = open));
+      button.textContent = open ? 'Cerrar todo' : 'Abrir todo';
+    });
+  });
+  const reveal = (target) => {
+    for (let node = target; node; node = node.parentElement)
+      if (node.tagName === 'DETAILS') node.open = true;
+    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+  document.addEventListener('click', (event) => {
+    const link = event.target.closest?.('a[href^="#"]');
+    const target =
+      link && link.getAttribute('href').length > 1
+        ? document.getElementById(
+            decodeURIComponent(link.getAttribute('href').slice(1)),
+          )
+        : null;
+    if (!target) return;
+    event.preventDefault();
+    history.replaceState(null, '', link.getAttribute('href'));
+    reveal(target);
+  });
+  if (location.hash.length > 1) {
+    const target = document.getElementById(
+      decodeURIComponent(location.hash.slice(1)),
+    );
+    if (target) setTimeout(() => reveal(target), 300);
+  }
+
+  const panel = document.querySelector('section[data-ring-now]');
+  if (!panel) return;
+  // The ball and the news of the whole fight sit outside the bouts; a bout's own sit inside its
+  // div.now-bout and are kept (moved, never lost) into its card on every repaint.
+  const fightNotes = [...panel.querySelectorAll('.now-ball, .now-news')].filter(
+    (node) => !node.closest('.now-bout'),
+  );
+  const bouts = [...panel.querySelectorAll('.now-bout[data-pr]')].map(
+    (node) => ({
+      node,
+      pr: Number(node.dataset.pr),
+      label: node.dataset.label || `#${node.dataset.pr}`,
+      frozen: (node.dataset.frozen || '').trim(),
+      notes: [...node.querySelectorAll('.now-ball, .now-news')],
+    }),
+  );
+  /** Where a bout starts in «La crónica»: its h3.bout in an open stage, else its first one. */
+  const boutTarget = (pr) => {
+    const heads = [
+      ...document.querySelectorAll(
+        `h3.bout[data-pr="${pr}"], h3.bout[id="bout-${pr}"], h3.bout[id^="bout-${pr}-"]`,
+      ),
+    ];
+    return heads.find((head) => head.closest('details.stage[open]')) ?? heads[0];
+  };
+  const head = el('div', { class: 'now-head' });
+  const counters = el('div', { class: 'now-counters' });
+  const actions = el('div', { class: 'now-actions' });
+  const boutsBox =
+    panel.querySelector('.now-bouts') ?? el('div', { class: 'now-bouts' });
+  const status = el('div', { class: 'now-status' }, fightNotes);
+  panel.prepend(head, counters);
+  panel.append(boutsBox, actions, status);
+
+  /** An image drop for the panel's forms; keeps the uploaded asset ids in `attached`. */
+  function attacher(attached, say) {
+    const file = el('input', {
+      type: 'file',
+      accept: 'image/*',
+      multiple: true,
+      hidden: true,
+    });
+    const thumbs = el('div', { class: 'thumbs' });
+    const add = async (files) => {
+      for (const picked of files) {
+        say(`Subiendo ${picked.name}…`);
+        try {
+          if (!ring.upload) throw new Error('Esta vista no puede adjuntar');
+          const up = await ring.upload(picked);
+          attached.push(up.id);
+          thumbs.append(el('img', { src: up.url, alt: picked.name }));
+          say('');
+        } catch (error) {
+          say(error.message);
+        }
+      }
+    };
+    file.addEventListener('change', () => add([...file.files]));
+    const drop = el('div', {
+      class: 'drop',
+      tabindex: '0',
+      text: 'Arrastra imágenes aquí o haz clic para adjuntar',
+      onclick: () => file.click(),
+      onkeydown: (event) => ['Enter', ' '].includes(event.key) && file.click(),
+      ondragover: (event) => {
+        event.preventDefault();
+        drop.classList.add('over');
+      },
+      ondragleave: () => drop.classList.remove('over'),
+      ondrop: (event) => {
+        event.preventDefault();
+        drop.classList.remove('over');
+        add([...event.dataTransfer.files]);
+      },
+    });
+    return [drop, file, thumbs];
+  }
+
+  // Each form is built once and kept, so typing, a picked option or an image survive a repaint.
+  const questionForms = new Map();
+  function questionForm(question) {
+    if (questionForms.has(question.id)) return questionForms.get(question.id);
+    const name = `now-${question.id}`;
+    const say = (text) => (state.textContent = text);
+    const attached = [];
+    const note = el('textarea', {
+      placeholder: 'Comentario para el réferi (opcional)',
+    });
+    const extra = el(
+      'div',
+      { class: 'now-extra', hidden: true },
+      note,
+      attacher(attached, say),
+    );
+    const state = el('span', { class: 'status', role: 'status' });
+    const save = el('button', {
+      type: 'button',
+      class: 'save',
+      text: 'Guardar respuesta',
+      disabled: true,
+      onclick: async () => {
+        const picked = form.querySelector(`input[name="${name}"]:checked`);
+        if (!picked) return say('Elige una opción');
+        const option = question.options.find(
+          (entry) => entry.key === picked.value,
+        );
+        save.disabled = true;
+        say('Guardando…');
+        try {
+          await question.save({
+            choice: option.key,
+            text: option.text(),
+            note: note.value,
+            attachments: attached,
+          });
+          say('Guardada');
+        } catch (error) {
+          say(error.message);
+          save.disabled = false;
+        }
+      },
+    });
+    const form = el(
+      'div',
+      { class: 'now-q', id: `now-${question.id}` },
+      el(
+        'div',
+        { class: 'now-q-head' },
+        el('b', { text: question.title }),
+        question.time ? el('time', { text: question.time }) : null,
+        question.hasContext
+          ? el('button', {
+              type: 'button',
+              class: 'more',
+              text: 'Ver más información',
+              onclick: () =>
+                ring.openContext?.(question.title, question.context),
+            })
+          : null,
+      ),
+      el(
+        'div',
+        {
+          class: 'now-opts',
+          role: 'radiogroup',
+          onchange: () => (save.disabled = false),
+        },
+        question.options.map((option) =>
+          el(
+            'label',
+            { class: `now-opt${option.rec ? ' rec' : ''}` },
+            el('input', { type: 'radio', name, value: option.key }),
+            el('i', { text: option.key }),
+            el('span', { text: option.text() }),
+            option.rec ? el('em', { text: 'Recomienda el réferi' }) : null,
+          ),
+        ),
+      ),
+      el(
+        'div',
+        { class: 'now-row q-actions' },
+        save,
+        el('button', {
+          type: 'button',
+          class: 'ghost',
+          text: 'Comentario o imagen',
+          onclick: () => (extra.hidden = !extra.hidden),
+        }),
+        el('a', {
+          href: `#${question.id}`,
+          class: 'jump',
+          text: 'En la crónica',
+        }),
+        state,
+      ),
+      extra,
+    );
+    questionForms.set(question.id, form);
+    return form;
+  }
+
+  const verdictRows = new Map();
+  function verdictRow(item) {
+    const known = verdictRows.get(item.key);
+    if (known) {
+      known.item = item;
+      known.node.classList.toggle('stale', item.verdict === 'stale');
+      return known.node;
+    }
+    const entry = { item };
+    const attached = [];
+    const say = (text) => (state.textContent = text);
+    const state = el('span', { class: 'status', role: 'status' });
+    const comment = el('textarea', {
+      placeholder: '¿Qué hay que mejorar? (obligatorio)',
+    });
+    const send = async (verdict) => {
+      say('Guardando…');
+      try {
+        await entry.item.save(verdict, comment.value, attached);
+        say('Guardado');
+      } catch (error) {
+        say(error.message);
+      }
+    };
+    const improve = el(
+      'div',
+      { class: 'now-extra', hidden: true },
+      comment,
+      attacher(attached, say),
+      el(
+        'div',
+        { class: 'now-row' },
+        el('button', {
+          type: 'button',
+          class: 'save',
+          text: 'Guardar «se mejora»',
+          onclick: () => send('improve'),
+        }),
+      ),
+    );
+    entry.node = el(
+      'div',
+      { class: `now-ep${item.verdict === 'stale' ? ' stale' : ''}` },
+      el(
+        'div',
+        { class: 'now-ep-line' },
+        el('b', { class: `m ${item.chipClass}`, text: item.chip }),
+        el('a', { href: `#${item.key}`, class: 'path', text: item.path }),
+        el('span', { class: 'was', text: 'desactualizado' }),
+        el(
+          'span',
+          { class: 'now-ep-buttons' },
+          el('button', {
+            type: 'button',
+            class: 'approve',
+            text: '✓ Se aprueba',
+            onclick: () => send('approved'),
+          }),
+          el('button', {
+            type: 'button',
+            class: 'improve-btn',
+            text: '✎ Se mejora',
+            onclick: () => (improve.hidden = !improve.hidden),
+          }),
+        ),
+      ),
+      state,
+      improve,
+    );
+    verdictRows.set(item.key, entry);
+    return entry.node;
+  }
+
+  const expanded = new Set();
+  const pendingOf = (pr) => {
+    const questions = [...ring.questions.values()]
+      .filter((question) => question.pr === pr)
+      .sort(
+        (a, b) =>
+          a.esc.localeCompare(b.esc, 'es', { numeric: true }) || a.n - b.n,
+      );
+    const boards = [...ring.boards.values()].filter((board) => board.pr === pr);
+    const items = boards.flatMap((board) =>
+      board.items
+        .filter((item) => ['none', 'stale'].includes(item.verdict))
+        .map((item) => ({ ...item, noun: board.noun })),
+    );
+    return {
+      questions,
+      open: questions.filter((question) => !question.answered),
+      boards,
+      items,
+      approved: boards.reduce((sum, board) => sum + board.approved, 0),
+      total: boards.reduce((sum, board) => sum + board.total, 0),
+    };
+  };
+  const nounCount = (items) => {
+    const byNoun = {};
+    items.forEach((item) => (byNoun[item.noun] = (byNoun[item.noun] ?? 0) + 1));
+    return Object.entries(byNoun).map(([noun, n]) =>
+      plural(n, noun === 'rutas' ? 'ruta' : 'endpoint', noun),
+    );
+  };
+
+  function boutCard(bout, pending) {
+    const scale = ring.scales[bout.pr];
+    const red = !scale?.green;
+    const showAll = expanded.has(bout.pr);
+    const questions = showAll ? pending.open : pending.open.slice(0, 1);
+    const items = showAll ? pending.items : pending.items.slice(0, 2);
+    const restQuestions = pending.open.length - questions.length;
+    const restItems = pending.items.length - items.length;
+    const answered = pending.questions.length - pending.open.length;
+    const nothing = !pending.open.length && !pending.items.length;
+    bout.node.className = `now-bout${nothing ? ' clear' : ''}`;
+    put(bout.node, 
+      el(
+        'div',
+        { class: 'now-bout-head' },
+        el(
+          'h3',
+          {},
+          el('a', {
+            href: '#',
+            text: `#${bout.pr}`,
+            onclick: (event) => {
+              event.preventDefault();
+              const target = boutTarget(bout.pr);
+              if (target) reveal(target);
+            },
+          }),
+          ` · ${bout.label}`,
+        ),
+        pending.open.length
+          ? el('span', {
+              class: 'now-of',
+              text: `pregunta ${answered + 1} de ${pending.questions.length}`,
+            })
+          : null,
+        scale
+          ? el('span', {
+              class: `now-scale ${red ? 'red' : 'green'}`,
+              text: `${red ? 'No da el peso' : 'Da el peso'} · ${scale.approved}/${scale.total}`,
+            })
+          : null,
+      ),
+      bout.frozen
+        ? el('p', { class: 'now-frozen', text: `Congelada: ${bout.frozen}` })
+        : null,
+      nothing
+        ? el('p', {
+            class: 'now-none',
+            text:
+              scale &&
+              !scale.green &&
+              scale.total &&
+              scale.approved === scale.total
+                ? 'Todo aprobado en la página; falta que apruebes el contrato con el réferi (approve-contract).'
+                : 'Nada pendiente de ti en esta pelea.',
+          })
+        : null,
+      questions.map(questionForm),
+      pending.boards.length && items.length
+        ? el('h4', {
+            class: 'now-sub',
+            text: `Veredictos · ${pending.approved} de ${pending.total}`,
+          })
+        : null,
+      items.map(verdictRow),
+      restQuestions || restItems || showAll
+        ? el(
+            'button',
+            {
+              type: 'button',
+              class: 'now-queue',
+              'aria-expanded': showAll ? 'true' : 'false',
+              onclick: () => {
+                if (showAll) expanded.delete(bout.pr);
+                else expanded.add(bout.pr);
+                paint();
+              },
+            },
+            el('span', { class: 'chev', text: showAll ? '▾' : '▸' }),
+            el('b', {
+              text: showAll
+                ? 'Ocultar la cola'
+                : `Siguientes ${list(
+                    [
+                      restQuestions
+                        ? plural(restQuestions, 'pregunta', 'preguntas')
+                        : '',
+                      ...nounCount(pending.items.slice(items.length)),
+                    ].filter(Boolean),
+                  )}`,
+            }),
+            showAll ? null : el('span', { class: 'muted', text: 'en la cola' }),
+            el('span', { class: 'go', text: showAll ? '' : 'Ver la cola ▸' }),
+          )
+        : null,
+      bout.notes.length
+        ? el('div', { class: 'now-bout-status' }, bout.notes)
+        : null,
+    );
+  }
+
+  function counter(n, label, sub, tone) {
+    return el(
+      'div',
+      { class: `now-count ${n ? tone : 'zero'}` },
+      el('b', { text: String(n) }),
+      el('span', { text: label }),
+      el('small', { text: sub }),
+    );
+  }
+
+  const recommended = () =>
+    [...ring.questions.values()]
+      .filter((question) => !question.answered)
+      .map((question) => ({
+        question,
+        option: question.options.find((option) => option.rec),
+      }))
+      .filter((entry) => entry.option);
+
+  let dialog = null;
+  function confirmAccept() {
+    const entries = recommended();
+    if (!entries.length) return;
+    dialog?.remove();
+    const say = el('p', { class: 'status', role: 'status' });
+    const boxes = entries.map((entry) =>
+      el('input', { type: 'checkbox', checked: true }),
+    );
+    const go = el('button', { type: 'button', class: 'save' });
+    const label = () => {
+      const n = boxes.filter((box) => box.checked).length;
+      go.textContent = `Guardar ${plural(n, 'respuesta', 'respuestas')}`;
+      go.disabled = !n;
+    };
+    dialog = el(
+      'dialog',
+      {
+        class: 'ctx-dialog now-confirm',
+        'aria-labelledby': 'now-confirm-title',
+      },
+      el(
+        'div',
+        { class: 'ctx-head' },
+        el('h3', {
+          id: 'now-confirm-title',
+          text: 'Aceptar las recomendaciones del réferi',
+        }),
+        el('button', {
+          type: 'button',
+          class: 'ctx-close',
+          'aria-label': 'Cerrar',
+          text: '×',
+          onclick: () => dialog.close(),
+        }),
+      ),
+      el(
+        'div',
+        { class: 'ctx-body' },
+        el('p', {
+          text: 'Se guardará esta respuesta en cada pregunta marcada, como si la eligieras una por una. Desmarca las que quieras contestar tú.',
+        }),
+        el(
+          'ul',
+          { class: 'now-confirm-list' },
+          entries.map(({ question, option }, index) =>
+            el(
+              'li',
+              {},
+              el(
+                'label',
+                {},
+                boxes[index],
+                el(
+                  'span',
+                  {},
+                  el('b', { text: `#${question.pr} · ${question.title}` }),
+                  el('br'),
+                  `${option.key}: ${option.text()}`,
+                ),
+              ),
+            ),
+          ),
+        ),
+        el(
+          'div',
+          { class: 'now-row' },
+          go,
+          el('button', {
+            type: 'button',
+            class: 'ghost',
+            text: 'Cancelar',
+            onclick: () => dialog.close(),
+          }),
+        ),
+        say,
+      ),
+    );
+    boxes.forEach((box) => box.addEventListener('change', label));
+    label();
+    go.addEventListener('click', async () => {
+      go.disabled = true;
+      let saved = 0;
+      const failed = [];
+      for (const [index, { question, option }] of entries.entries()) {
+        if (!boxes[index].checked) continue;
+        say.textContent = `Guardando ${saved + 1}…`;
+        try {
+          await question.save({ choice: option.key, text: option.text() });
+          saved += 1;
+        } catch (error) {
+          failed.push(`${question.title}: ${error.message}`);
+        }
+      }
+      say.textContent = failed.length
+        ? `Guardadas ${saved}; no se guardaron ${failed.length}: ${failed.join(' · ')}`
+        : `Guardadas ${saved}.`;
+      if (!failed.length) setTimeout(() => dialog.close(), 900);
+      else go.disabled = false;
+    });
+    document.body.append(dialog);
+    dialog.addEventListener(
+      'click',
+      (event) => event.target === dialog && dialog.close(),
+    );
+    dialog.showModal();
+  }
+
+  let queued = false;
+  function paint() {
+    queued = false;
+    const perBout = bouts.map((bout) => ({
+      bout,
+      pending: pendingOf(bout.pr),
+    }));
+    const open = perBout.flatMap(({ pending }) => pending.open);
+    const items = perBout.flatMap(({ pending }) => pending.items);
+    const red = bouts.filter(
+      (bout) => ring.scales[bout.pr] && !ring.scales[bout.pr].green,
+    );
+    const frozen = bouts.filter((bout) => bout.frozen);
+    const busy = open.length + items.length > 0;
+    panel.classList.toggle('idle', !busy);
+    const oldest = open
+      .map((question) => question.time)
+      .filter(Boolean)
+      .sort()[0];
+    put(head, 
+      el(
+        'div',
+        {},
+        el('span', {
+          class: 'now-kicker',
+          text: busy ? 'Tu turno, juez' : 'Sin pendientes del juez',
+        }),
+        el('h2', {
+          text: busy ? 'Qué necesita de ti ahora' : 'Nada que pedirte ahora',
+        }),
+      ),
+      busy
+        ? el(
+            'div',
+            { class: 'now-wait' },
+            oldest
+              ? el('span', { text: `el réferi espera desde las ${oldest}` })
+              : null,
+            open.length
+              ? el('em', {
+                  text: 'sin tu respuesta, el luchador no recibe rebote',
+                })
+              : null,
+          )
+        : null,
+    );
+    const byBout = (pick) =>
+      perBout
+        .filter(({ pending }) => pick(pending).length)
+        .map(
+          ({ bout, pending }) =>
+            `${pick(pending).length} en ${bout.label.toLowerCase()}`,
+        );
+    put(counters, 
+      counter(
+        open.length,
+        'Preguntas sin respuesta',
+        list(byBout((p) => p.open)) || 'ninguna',
+        'red',
+      ),
+      counter(
+        items.length,
+        'Veredictos pendientes',
+        list(nounCount(items)) || 'ninguno',
+        'red',
+      ),
+      counter(
+        red.length,
+        'Básculas en rojo',
+        red.length
+          ? `no da el peso: ${list(red.map((bout) => `#${bout.pr}`))}`
+          : 'todas dan el peso',
+        'gold',
+      ),
+      counter(
+        frozen.length,
+        frozen.length === 1 ? 'Pelea congelada' : 'Peleas congeladas',
+        frozen.length
+          ? frozen.map((bout) => `#${bout.pr} ${bout.frozen}`).join(' · ')
+          : 'ninguna',
+        'grey',
+      ),
+    );
+    perBout.forEach(({ bout, pending }) => boutCard(bout, pending));
+    const accept = recommended();
+    put(actions, 
+      accept.length
+        ? el('button', {
+            type: 'button',
+            class: 'now-accept',
+            text: `✓ Aceptar ${accept.length === 1 ? 'la recomendación' : `las ${accept.length} recomendaciones`} del réferi`,
+            onclick: confirmAccept,
+          })
+        : null,
+      open.length
+        ? el('button', {
+            type: 'button',
+            class: 'now-one',
+            text: 'Revisar una por una',
+            onclick: () => {
+              const first = panel.querySelector('.now-q input[type="radio"]');
+              first
+                ?.closest('.now-q')
+                .scrollIntoView({ behavior: 'smooth', block: 'center' });
+              first?.focus();
+            },
+          })
+        : null,
+      open.length
+        ? el('span', { text: 'cada respuesta vuelve al réferi como rebote' })
+        : null,
+    );
+    actions.hidden = !actions.childElementCount;
+  }
+  const schedule = () => {
+    if (queued) return;
+    queued = true;
+    setTimeout(paint, 0);
+  };
+  document.addEventListener('ring:change', schedule);
+  paint();
+})();