@thebattlearena/corner 0.9.0 → 0.10.0

package/ring/skills/play-by-play/templates/interview-form.js

@@ -0,0 +1,516 @@
+// «La entrevista» answered from the chronicle page. Every `ol.qa[data-escalation="pr<n>-E<k>"]`
+// gets a form per question: each of the referee's options is itself selectable and its text
+// editable (what is saved is the text as left), an «Otro» row with an open field, an optional
+// comment, images to drop or attach, and «Guardar respuesta». The answer goes to the page's `db`
+// (collection `respuestas`, doc `<escalation>-q<n>`: { escalation, question, choice, text, note,
+// attachments, answeredAt, by }) and is painted live. Only who can edit the page (the judge) writes
+// and uploads (capabilities: db rules write "admin", assets for editors); everyone else reads.
+// The referee reads `respuestas` with ArtifactData and logs them (`judges-card.mjs page-answers`).
+// The form is drawn even when the viewer does not serve the capabilities: then it says so on save.
+(() => {
+  // The page's bus: what the judge has to do, registered by each script, read by «Qué necesita de
+  // ti ahora» (now-panel.js), which answers and judges through the same functions.
+  const ring = (window.ringPage ??= {
+    questions: new Map(),
+    boards: new Map(),
+    scales: {},
+    changed() {
+      document.dispatchEvent(new CustomEvent('ring:change'));
+    },
+  });
+  const lists = [...document.querySelectorAll('ol.qa[data-escalation]')];
+  if (!lists.length) return;
+  const waitClaude = () =>
+    new Promise((resolve) => {
+      let waited = 0;
+      const tick = () => {
+        if (window.claude && window.claude.use) return resolve(window.claude);
+        if ((waited += 200) > 10000) return resolve(null);
+        setTimeout(tick, 200);
+      };
+      tick();
+    });
+  const fmt = (iso) => {
+    try {
+      return new Date(iso).toLocaleString('es-MX', {
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    } catch {
+      return '';
+    }
+  };
+  const make = (tag, props = {}) =>
+    Object.assign(document.createElement(tag), props);
+  // Checking a radio from code fires no `change`: emit it so «Guardar respuesta» enables.
+  const pick = (radio) => {
+    if (radio.checked) return;
+    radio.checked = true;
+    radio.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+  const api = { db: null, user: null, assets: null };
+  const ready = (async () => {
+    const claude = await waitClaude();
+    if (!claude) return;
+    api.db = await claude.use('db');
+    api.user = await claude.use('user');
+    api.assets = await claude.use('assets');
+  })();
+
+  // A minimal Markdown renderer for the questions' context: headings, paragraphs, lists, code
+  // blocks, tables, inline code, bold, italics and links. It escapes the HTML first, so the text
+  // can never inject markup.
+  const escapeHtml = (text) =>
+    String(text)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  const emphasis = (text) =>
+    escapeHtml(text)
+      .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+      .replace(/(^|[^*])\*([^*\s][^*]*)\*/g, '$1<em>$2</em>')
+      .replace(
+        /\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g,
+        '<a href="$2" target="_blank" rel="noopener">$1</a>',
+      );
+  // Code spans first, so a `*` inside code never opens an emphasis.
+  const inline = (text) =>
+    String(text)
+      .split(/(`[^`]+`)/)
+      .map((part) =>
+        /^`[^`]+`$/.test(part)
+          ? `<code>${escapeHtml(part.slice(1, -1))}</code>`
+          : emphasis(part),
+      )
+      .join('');
+  const cells = (line) =>
+    line
+      .trim()
+      .replace(/^\||\|$/g, '')
+      .split('|')
+      .map((cell) => cell.trim());
+  function markdown(source) {
+    const lines = String(source).replace(/\r/g, '').split('\n');
+    const out = [];
+    let i = 0;
+    while (i < lines.length) {
+      const line = lines[i];
+      if (/^```/.test(line)) {
+        const code = [];
+        i += 1;
+        while (i < lines.length && !/^```/.test(lines[i]))
+          code.push(lines[i++]);
+        i += 1;
+        out.push(`<pre><code>${escapeHtml(code.join('\n'))}</code></pre>`);
+        continue;
+      }
+      const heading = /^(#{1,6})\s+(.*)$/.exec(line);
+      if (heading) {
+        const level = Math.min(heading[1].length + 2, 6);
+        out.push(`<h${level}>${inline(heading[2])}</h${level}>`);
+        i += 1;
+        continue;
+      }
+      if (
+        /^\s*\|.*\|\s*$/.test(line) &&
+        /^\s*\|?\s*:?-{3,}/.test(lines[i + 1] ?? '')
+      ) {
+        const head = cells(line);
+        i += 2;
+        const rows = [];
+        while (i < lines.length && /^\s*\|.*\|\s*$/.test(lines[i]))
+          rows.push(cells(lines[i++]));
+        out.push(
+          `<div class="tbl"><table><thead><tr>${head.map((cell) => `<th>${inline(cell)}</th>`).join('')}</tr></thead><tbody>${rows
+            .map(
+              (row) =>
+                `<tr>${row.map((cell) => `<td>${inline(cell)}</td>`).join('')}</tr>`,
+            )
+            .join('')}</tbody></table></div>`,
+        );
+        continue;
+      }
+      const bullet = /^\s*(?:[-*]|\d+\.)\s+/;
+      if (bullet.test(line)) {
+        const ordered = /^\s*\d+\./.test(line);
+        const items = [];
+        while (i < lines.length && bullet.test(lines[i]))
+          items.push(lines[i++].replace(bullet, ''));
+        const tag = ordered ? 'ol' : 'ul';
+        out.push(
+          `<${tag}>${items.map((item) => `<li>${inline(item)}</li>`).join('')}</${tag}>`,
+        );
+        continue;
+      }
+      if (!line.trim()) {
+        i += 1;
+        continue;
+      }
+      const paragraph = [];
+      while (
+        i < lines.length &&
+        lines[i].trim() &&
+        !/^(```|#{1,6}\s|\s*(?:[-*]|\d+\.)\s+|\s*\|)/.test(lines[i])
+      )
+        paragraph.push(lines[i++]);
+      if (!paragraph.length) paragraph.push(lines[i++]);
+      out.push(`<p>${inline(paragraph.join(' '))}</p>`);
+    }
+    return out.join('\n');
+  }
+
+  // One accessible modal for every question: a native <dialog> traps the focus and closes with Esc;
+  // a click outside its box closes it too, and the focus goes back to the button that opened it.
+  let dialog = null;
+  let opener = null;
+  function openContext(title, source) {
+    if (!dialog) {
+      dialog = make('dialog', { className: 'ctx-dialog' });
+      dialog.setAttribute('aria-labelledby', 'ctx-title');
+      const close = make('button', {
+        type: 'button',
+        className: 'ctx-close',
+        textContent: '×',
+        ariaLabel: 'Cerrar',
+      });
+      close.setAttribute('aria-label', 'Cerrar');
+      close.onclick = () => dialog.close();
+      dialog.append(
+        make('div', { className: 'ctx-head' }),
+        make('div', { className: 'ctx-body' }),
+      );
+      dialog
+        .querySelector('.ctx-head')
+        .append(make('h3', { id: 'ctx-title' }), close);
+      dialog.addEventListener('click', (event) => {
+        if (event.target === dialog) dialog.close();
+      });
+      dialog.addEventListener('close', () => opener?.focus());
+      document.body.append(dialog);
+    }
+    opener = document.activeElement;
+    dialog.querySelector('#ctx-title').textContent = title;
+    dialog.querySelector('.ctx-body').innerHTML = markdown(source);
+    dialog.showModal();
+    dialog.querySelector('.ctx-close').focus();
+  }
+  ring.openContext = openContext;
+
+  /** Uploads one image for the judge; resolves its asset id and url, or throws a message. */
+  ring.upload = async (picked) => {
+    await ready;
+    if (!api.assets)
+      throw new Error('Adjuntar sólo funciona para quien puede editar la página');
+    if (!picked.type.startsWith('image/'))
+      throw new Error(`${picked.name}: sólo imágenes`);
+    try {
+      return await api.assets.upload(picked);
+    } catch (error) {
+      throw new Error(
+        `No se pudo subir ${picked.name} (${error.code || 'error'})`,
+      );
+    }
+  };
+
+  /** Saves the judge's answer to one question; throws a message the form can show. */
+  async function writeAnswer(esc, n, { choice, text, note = '', attachments = [] }) {
+    await ready;
+    if (!api.db) throw new Error('Esta vista no puede guardar respuestas');
+    try {
+      const by = api.user ? await api.user.id() : null;
+      await api.db
+        .collection('respuestas')
+        .doc(`${esc}-q${n}`)
+        .set({
+          escalation: esc,
+          question: Number(n),
+          choice,
+          text,
+          note: String(note).trim(),
+          attachments: attachments.slice(),
+          answeredAt: new Date().toISOString(),
+          by,
+        });
+    } catch (error) {
+      throw new Error(
+        ['permission_denied', 'not_granted'].includes(error.code)
+          ? 'Sólo el juez (quien edita la página) puede contestar'
+          : `No se guardó (${error.code || 'error'})`,
+      );
+    }
+  }
+
+  const questionsOf = (list) =>
+    [...list.children]
+      .map((li) => ({
+        n: (li.querySelector('.q')?.textContent.match(/^\s*(\d+)/) || [])[1],
+        q: li.querySelector('.q'),
+        ul: li.querySelector('ul'),
+        box: li.querySelector('.answer'),
+      }))
+      .filter((item) => item.n && item.ul && item.box);
+
+  function formFor(esc, item, contexts) {
+    const name = `q-${esc}-${item.n}`;
+    const id = `${esc}-q${item.n}`;
+    item.q.closest('li').id = id;
+    const time = item.q.querySelector('time')?.textContent.trim() ?? '';
+    const title = [...item.q.childNodes]
+      .filter((node) => !(node.nodeType === 1 && node.tagName === 'TIME'))
+      .map((node) => node.textContent)
+      .join('')
+      .trim();
+    const context = contexts[item.n];
+    if (context)
+      item.q.append(
+        ' ',
+        make('button', {
+          type: 'button',
+          className: 'more',
+          textContent: 'Ver más información',
+          onclick: () =>
+            openContext(
+              item.q.textContent.replace('Ver más información', '').trim(),
+              context,
+            ),
+        }),
+      );
+    [...item.ul.children].forEach((option) => {
+      const key = option.querySelector('i')?.textContent.trim();
+      if (!key) return;
+      const radio = make('input', {
+        type: 'radio',
+        name,
+        value: key,
+        className: 'pick',
+      });
+      option.prepend(radio);
+      option.classList.add('selectable');
+      const span = make('span', {
+        className: 'otext',
+        contentEditable: 'true',
+        spellcheck: true,
+        title: 'Puedes editar el texto antes de guardar',
+      });
+      [...option.childNodes]
+        .filter(
+          (node) =>
+            node !== radio && !(node.nodeType === 1 && node.tagName === 'I'),
+        )
+        .forEach((node) => span.appendChild(node));
+      option.appendChild(span);
+      option.addEventListener('click', (event) => {
+        if (event.target !== span) pick(radio);
+      });
+      span.addEventListener('focus', () => pick(radio));
+    });
+    const other = make('li', { className: 'selectable other' });
+    const otherRadio = make('input', {
+      type: 'radio',
+      name,
+      value: 'otro',
+      className: 'pick',
+    });
+    const otherText = make('input', {
+      type: 'text',
+      className: 'otro-text',
+      placeholder: 'Otra opción: escríbela aquí',
+    });
+    otherText.addEventListener('focus', () => pick(otherRadio));
+    other.append(otherRadio, make('i', { textContent: '✎' }), otherText);
+    item.ul.append(other);
+
+    const form = make('div', { className: 'ans-form' });
+    const note = make('textarea', {
+      placeholder: 'Comentario para el réferi (opcional)',
+    });
+    const drop = make('div', {
+      className: 'drop',
+      tabIndex: 0,
+      textContent: 'Arrastra imágenes aquí o haz clic para adjuntar',
+    });
+    const file = make('input', {
+      type: 'file',
+      accept: 'image/*',
+      multiple: true,
+      hidden: true,
+    });
+    const thumbs = make('div', { className: 'thumbs' });
+    const save = make('button', {
+      type: 'button',
+      className: 'save',
+      textContent: 'Guardar respuesta',
+      disabled: true,
+    });
+    // Nothing comes picked, not even the recommended option: saving needs a choice of the judge.
+    item.ul.addEventListener('change', () => {
+      save.disabled = !item.ul.querySelector(`input[name="${name}"]:checked`);
+    });
+    const status = make('span', { className: 'status' });
+    const row = make('div', { className: 'row' });
+    row.append(save, status);
+    form.append(note, drop, file, thumbs, row);
+    item.ul.after(form);
+
+    const attached = [];
+    const addFiles = async (files) => {
+      await ready;
+      if (!api.assets)
+        return void (status.textContent =
+          'Adjuntar sólo funciona para quien puede editar la página');
+      for (const picked of files) {
+        if (!picked.type.startsWith('image/')) {
+          status.textContent = `${picked.name}: sólo imágenes`;
+          continue;
+        }
+        status.textContent = `Subiendo ${picked.name}…`;
+        try {
+          const up = await api.assets.upload(picked);
+          attached.push(up.id);
+          thumbs.append(make('img', { src: up.url, alt: picked.name }));
+          status.textContent = '';
+        } catch (error) {
+          status.textContent = `No se pudo subir ${picked.name} (${error.code || 'error'})`;
+        }
+      }
+    };
+    drop.onclick = () => file.click();
+    drop.onkeydown = (event) => {
+      if (event.key === 'Enter' || event.key === ' ') file.click();
+    };
+    file.onchange = () => addFiles([...file.files]);
+    drop.ondragover = (event) => {
+      event.preventDefault();
+      drop.classList.add('over');
+    };
+    drop.ondragleave = () => drop.classList.remove('over');
+    drop.ondrop = (event) => {
+      event.preventDefault();
+      drop.classList.remove('over');
+      addFiles([...event.dataTransfer.files]);
+    };
+    save.onclick = async () => {
+      const picked = item.ul.querySelector(`input[name="${name}"]:checked`);
+      if (!picked) return void (status.textContent = 'Elige una opción');
+      const choice = picked.value;
+      const text =
+        choice === 'otro'
+          ? otherText.value.trim()
+          : picked.closest('li').querySelector('.otext')?.textContent.trim();
+      if (!text) return void (status.textContent = 'Escribe tu opción');
+      save.disabled = true;
+      status.textContent = 'Guardando…';
+      try {
+        await writeAnswer(esc, item.n, {
+          choice,
+          text,
+          note: note.value,
+          attachments: attached,
+        });
+        status.textContent = 'Guardada';
+      } catch (error) {
+        status.textContent = error.message;
+      }
+      save.disabled = false;
+    };
+    const options = [...item.ul.querySelectorAll('li.selectable:not(.other)')].map(
+      (option) => ({
+        key: option.querySelector('input.pick').value,
+        text: () => option.querySelector('.otext')?.textContent.trim() ?? '',
+        rec: option.classList.contains('rec'),
+      }),
+    );
+    ring.questions.set(id, {
+      id,
+      esc,
+      pr: Number((/^pr(\d+)-/.exec(esc) || [])[1]) || null,
+      n: Number(item.n),
+      title,
+      time,
+      hasContext: Boolean(context),
+      context: context ?? null,
+      options,
+      answered: !item.box.classList.contains('pending'),
+      save: (payload) => writeAnswer(esc, item.n, payload),
+    });
+    return { name, otherText, note, id };
+  }
+
+  function paint(item, ui, answer) {
+    item.box.className = 'answer done';
+    item.box.textContent = '';
+    const choice = answer.choice === 'otro' ? 'Otro' : `(${answer.choice})`;
+    item.box.append(
+      make('div', {
+        textContent: `Juez · ${fmt(answer.answeredAt)} · ${choice} — ${answer.text || ''}${answer.note ? ` · ${answer.note}` : ''}`,
+      }),
+    );
+    (answer.attachments || []).forEach((id) => {
+      const image = make('img', {
+        src: `/_blob/${id}`,
+        alt: 'Adjunto del juez',
+      });
+      image.onerror = () =>
+        image.replaceWith(document.createTextNode(' [adjunto no disponible] '));
+      item.box.append(image);
+    });
+    const radio = item.ul.querySelector(
+      `input[name="${ui.name}"][value="${answer.choice}"]`,
+    );
+    if (radio) radio.checked = true;
+    item.ul.dispatchEvent(new Event('change'));
+    if (answer.choice === 'otro' && document.activeElement !== ui.otherText)
+      ui.otherText.value = answer.text || '';
+    if (document.activeElement !== ui.note) ui.note.value = answer.note || '';
+    const entry = ring.questions.get(ui.id);
+    if (entry && !entry.answered) {
+      entry.answered = true;
+      ring.changed();
+    }
+  }
+
+  const contextsOf = (esc) => {
+    try {
+      return JSON.parse(
+        document.getElementById(`ring-context-${esc}`)?.textContent ?? '{}',
+      );
+    } catch {
+      return {};
+    }
+  };
+  const escalations = lists.map((list) => {
+    const esc = list.dataset.escalation;
+    const contexts = contextsOf(esc);
+    const items = questionsOf(list).map((item) => ({
+      ...item,
+      ui: formFor(esc, item, contexts),
+    }));
+    return { esc, items };
+  });
+  ring.changed();
+
+  ready.then(() => {
+    if (!api.db) return;
+    escalations.forEach(({ esc, items }) => {
+      api.db
+        .collection('respuestas')
+        .where('escalation', '==', esc)
+        .onSnapshot(
+          (snap) => {
+            const byQuestion = {};
+            snap.docs.forEach((doc) => {
+              const value = doc.data();
+              if (value) byQuestion[String(value.question)] = value;
+            });
+            items.forEach((item) => {
+              if (byQuestion[item.n]) paint(item, item.ui, byQuestion[item.n]);
+            });
+          },
+          () => {},
+        );
+    });
+  });
+})();