dogfather-universe/workspace/assets/js/reaktion-foyer.js

/* =====================================================================
   DAS FOYER (08.10.2026)

   Die Seite vor dem Saal. Drei Reihen:

     LINKS   was ansteht -- nur fuer DogFather und VanVan
     MITTE   der Weg hinein, sobald etwas laeuft oder gleich losgeht
     RECHTS  Videos anraten -- jeder darf, niemand sieht fremde

   ---------------------------------------------------------------------
   HIER WIRD NUR GELESEN

   Der Saal meldet jeden an, der ihn oeffnet, baut Verbindungen auf
   und haelt den Ereignisstrom offen. Diese Seite tut nichts davon:
   Sie holt den Stand, zeichnet ihn und fragt alle 20 Sekunden nach.
   Erst der Knopf in der Mitte fuehrt hinein.

   WARUM 20 SEKUNDEN UND KEIN EREIGNISSTROM: Ein Strom haelt eine
   Verbindung offen, und manche Browser lassen nur sechs je Adresse
   zu -- im Saal wird jede davon gebraucht. Das Foyer ist der
   ruhigste Zustand des Hauses: kein Video, keine Kamera, kein Chat.
   Eine Abfrage alle zwanzig Sekunden kostet dort nichts und kann
   nicht haengenbleiben.
   ===================================================================== */
(() => {
  'use strict';

  const $ = (id) => document.getElementById(id);
  const el = (art, klasse, text) => {
    const n = document.createElement(art);
    if (klasse) n.className = klasse;
    if (text !== undefined) n.textContent = text;
    return n;
  };

  let lage = null;
  let raten = null;

  async function hole(pfad, einstellungen) {
    return fetch(pfad, { credentials: 'same-origin', ...(einstellungen || {}) });
  }

  function sagFehler(text) {
    const f = $('fehler');
    if (!f) return;
    f.textContent = text;
    f.hidden = false;
    clearTimeout(sagFehler.uhr);
    sagFehler.uhr = setTimeout(() => { f.hidden = true; }, 6000);
  }

  /** Maschinenworte werden uebersetzt -- dieselbe Tafel wie im ganzen
   *  Haus. Wo sie nichts kennt, steht ein Satz und kein Schluessel. */
  function melde(antwort, ersatz) {
    const wort = antwort && antwort.fehler;
    const satz = (window.sagWas && wort) ? window.sagWas(wort) : null;
    sagFehler(satz || ersatz || 'Das hat gerade nicht geklappt.');
  }

  /* =================================================================
     ZEIT UND DATUM -- IMMER DEUTSCH, IMMER DIESELBE FORM

     „Do, 9. Okt, 20:30". Nicht „09.10.2026 20:30": Wer einen Plan
     ueberfliegt, sucht den WOCHENTAG, nicht die Jahreszahl -- und
     das Jahr steht ohnehin nur dann dabei, wenn es ein anderes ist.
     ================================================================= */
  function alsTermin(wert) {
    if (!wert) return '';
    const d = new Date(wert);
    if (Number.isNaN(d.getTime())) return '';
    const heute = new Date();
    const gleichesJahr = d.getFullYear() === heute.getFullYear();
    try {
      return new Intl.DateTimeFormat('de-DE', {
        weekday: 'short', day: 'numeric', month: 'short',
        ...(gleichesJahr ? {} : { year: 'numeric' }),
        hour: '2-digit', minute: '2-digit',
      }).format(d);
    } catch {
      return d.toLocaleString('de-DE');
    }
  }

  /** Ist dieser Termin schon vorbei? */
  const vorbei = (wert) => {
    const d = wert ? new Date(wert) : null;
    return !!(d && !Number.isNaN(d.getTime()) && d.getTime() < Date.now());
  };

  const vorschaubild = (video) => `https://i.ytimg.com/vi/${video}/mqdefault.jpg`;

  /* =================================================================
     DIE MITTE
     ================================================================= */
  const WORTE = {
    zu: 'Geschlossen',
    vorbereitung: 'Gleich',
    live: 'Auf Sendung',
  };

  function mitteZeichnen() {
    const stand = lage?.stand || 'zu';
    const lampe = $('lampe');
    lampe.dataset.stand = stand;
    $('lampe-wort').textContent = WORTE[stand] || '…';

    /* ---- Das Bild ---- */
    const kasten = $('saal-karte');
    const bild = $('saal-bild');
    const quelle = String(lage?.vorschau || '').trim()
      || (lage?.video ? vorschaubild(lage.video) : '');
    if (quelle) {
      if (bild.getAttribute('src') !== quelle) bild.setAttribute('src', quelle);
      kasten.dataset.bild = 'ja';
      /* Ein Bild, das 404 antwortet, steht genauso im Dokument wie
         eines, das laedt -- auf dem Bildschirm ist an seiner Stelle
         nichts. Dann lieber der Platzhaltersatz. */
      bild.onerror = () => { kasten.dataset.bild = 'nein'; };
    } else {
      bild.removeAttribute('src');
      kasten.dataset.bild = 'nein';
    }

    /* ---- Titel und Satz ---- */
    const titel = lage?.titel || lage?.video_titel || '';
    $('saal-titel').textContent = stand === 'zu' && !titel
      ? 'Gerade ist nichts angesetzt'
      : (titel || 'Ohne Titel');
    $('saal-titel').dataset.leer = (stand === 'zu' && !titel) ? 'ja' : 'nein';

    const beginn = lage?.beginnt_am ? alsTermin(lage.beginnt_am) : '';
    const satz = $('saal-satz');
    if (stand === 'live') {
      satz.textContent = 'Es läuft gerade. Du kannst jederzeit dazukommen — '
        + 'alle sehen dieselbe Stelle.';
    } else if (stand === 'vorbereitung') {
      satz.textContent = beginn
        ? `Der Wartebereich ist offen, Start um ${beginn}. Der Chat läuft schon.`
        : 'Der Wartebereich ist offen. Der Chat läuft schon.';
    } else {
      satz.textContent = beginn
        ? `Angesetzt: ${beginn}. Vorher geht hier nichts auf — schau später noch mal rein.`
        : 'Sobald DogFather oder VanVan aufmachen, kannst du hier hinein.';
    }
    $('saal-leer').textContent = stand === 'zu'
      ? 'Gerade läuft nichts.'
      : 'Für diese Sendung gibt es kein Vorschaubild.';

    /* ---- Der Knopf ----
       ER STEHT NUR DA, WENN ER AUCH HINEINFUEHRT. Filipe: „in der
       mitte sollen die leute dan wenn eine sendung läuft drauf
       drücken können und der sendung beitreten. auch bei der
       vorschau schon." Bei „zu" gibt es nichts zu betreten -- und
       ein Knopf, der auf eine geschlossene Tuer fuehrt, ist
       schlimmer als keiner. */
    const knopf = $('saal-knopf');
    const offen = stand === 'live' || stand === 'vorbereitung';
    knopf.hidden = !offen;
    $('saal-knopf-wort').textContent = stand === 'live'
      ? 'Jetzt beitreten' : 'In den Wartebereich';
    knopf.dataset.stand = stand;

    /* ---- Wie viele dabei sind ----
       NUR DIE ZAHL, nie die Namen -- dieselbe Regel wie im Saal: Wer
       zusieht, soll nicht ablesen koennen, wer sonst noch zusieht.
       Und nur, wenn ueberhaupt jemand da ist: „0 dabei" ist keine
       Auskunft, sondern eine Enttaeuschung. */
    const zahl = $('saal-zahl');
    const wie = Number(lage?.dabei) || 0;
    zahl.hidden = !(offen && wie > 0);
    zahl.textContent = wie === 1 ? '1 ist schon dabei' : `${wie} sind schon dabei`;
  }

  /* =================================================================
     LINKS: DER PLAN  (nur fuer die zwei)
     ================================================================= */
  function planZeichnen() {
    const reihe = $('reihe-plan');
    /* `liste` bekommt nur, wer die Sendung fuehrt -- das entscheidet
       der Server. Diese Seite fragt deshalb nicht nach der Rolle,
       sondern danach, ob die Auskunft ueberhaupt gekommen ist. Eine
       zweite Rollenliste im Browser waere die, die irgendwann von
       der echten abweicht. */
    const liste = Array.isArray(lage?.liste) ? lage.liste : null;
    reihe.hidden = !liste;
    if (!liste) return;

    /* ==== NACH TERMIN, NICHT NACH PLATZ =========================
       Im Pult ist die Reihenfolge die Aussage („was kommt als
       Naechstes im Live"), hier der Termin („Donnerstag um acht").
       Was keinen hat, steht hinten -- es liegt bereit, aber es ist
       noch nichts verabredet. */
    const sortiert = [
      ...liste.filter((z) => z.wann).sort((a, b) => String(a.wann).localeCompare(b.wann)),
      ...liste.filter((z) => !z.wann),
    ];

    const kasten = $('plan-liste');
    kasten.textContent = '';
    if (!sortiert.length) {
      kasten.append(el('li', 'plan-leer',
        'Noch nichts vorbereitet. Im Saal unter „Warteschlange“ anhängen.'));
      return;
    }
    for (const z of sortiert) {
      const zeile = el('li', 'plan-zeile');
      if (z.wann) zeile.dataset.termin = vorbei(z.wann) ? 'vorbei' : 'ja';

      const b = document.createElement('img');
      b.className = 'plan-zeile__bild';
      b.src = vorschaubild(z.video);
      b.alt = '';
      b.loading = 'lazy';
      b.decoding = 'async';
      zeile.append(b);

      const text = el('div', 'plan-zeile__text');
      const name = el('span', 'plan-zeile__titel', z.titel || z.video);
      /* Holt YouTube den Namen nicht heraus, steht dort die Kennung --
         kein erfundener Titel. Dieselbe Regel wie in der
         Warteschlange. */
      name.dataset.roh = z.titel ? 'nein' : 'ja';
      name.title = z.titel || ('Kennung ' + z.video);
      text.append(name);

      const wann = el('span', 'plan-zeile__wann',
        z.wann ? alsTermin(z.wann) : 'noch ohne Termin');
      if (z.wann && vorbei(z.wann)) wann.textContent += ' · überfällig';
      text.append(wann);
      zeile.append(text);

      kasten.append(zeile);
    }
  }

  /* =================================================================
     RECHTS: ANRATEN
     ================================================================= */
  const STAND_WORT = {
    offen: 'wartet',
    uebernommen: 'kommt dran',
    abgelehnt: 'diesmal nicht',
  };

  function ratenZeichnen() {
    if (!raten) return;
    notizGrenze();
    const darf = !!raten.darf_entscheiden;
    const liste = raten.vorschlaege || [];

    const zahl = $('raten-zahl');
    zahl.hidden = !(darf && raten.offen > 0);
    zahl.textContent = raten.offen === 1 ? '1 offen' : `${raten.offen} offen`;

    $('raten-satz').textContent = darf
      ? 'Was das Rudel euch anträgt. Nur ihr zwei seht das hier.'
      : 'Schick uns ein Video, das wir zusammen schauen sollen. '
        + 'Sehen tun das nur DogFather und VanVan.';

    const kasten = $('raten-liste');
    kasten.textContent = '';
    if (!liste.length) {
      kasten.append(el('li', 'raten-leer', darf
        ? 'Noch nichts angeraten.'
        : 'Von dir ist noch nichts dabei.'));
    }

    for (const v of liste) {
      const zeile = el('li', 'raten-zeile');
      zeile.dataset.stand = v.stand;

      const b = document.createElement('img');
      b.className = 'raten-zeile__bild';
      b.src = vorschaubild(v.video);
      b.alt = '';
      b.loading = 'lazy';
      b.decoding = 'async';
      zeile.append(b);

      const text = el('div', 'raten-zeile__text');
      const name = el('span', 'raten-zeile__titel', v.titel || v.video);
      name.dataset.roh = v.titel ? 'nein' : 'ja';
      name.title = v.titel || ('Kennung ' + v.video);
      text.append(name);

      const unter = el('span', 'raten-zeile__unter');
      /* Beim Host steht, WER es war; beim Einsender waere das er
         selbst -- und eine Zeile, die einem den eigenen Namen
         vorliest, ist Platz ohne Auskunft. */
      unter.textContent = [
        darf && v.name ? v.name : '',
        STAND_WORT[v.stand] || v.stand,
      ].filter(Boolean).join(' · ');
      text.append(unter);

      if (v.notiz) text.append(el('p', 'raten-zeile__notiz', v.notiz));
      zeile.append(text);

      const knoepfe = el('div', 'raten-zeile__knoepfe');
      if (darf && v.stand === 'offen') {
        const ja = el('button', 'raten-knopf raten-knopf--ja', 'Nehmen');
        ja.type = 'button';
        ja.title = 'In die Warteschlange legen';
        ja.addEventListener('click', () => entscheiden(v.id, 'uebernehmen'));
        const nein = el('button', 'raten-knopf', 'Diesmal nicht');
        nein.type = 'button';
        nein.addEventListener('click', () => entscheiden(v.id, 'ablehnen'));
        knoepfe.append(ja, nein);
      }
      /* ==== WER DAS × BEKOMMT =================================
         Die Leitung bei den ENTSCHIEDENEN (die offenen haben ihre
         zwei Knoepfe), der Einsender bei seinen OFFENEN.

         Der Einsender darf nur zurueckziehen, was noch nicht
         entschieden ist: Was entschieden ist, ist Geschichte -- auch
         fuer ihn. Koennte er einen abgelehnten loeschen, verschwaende
         die Spur, dass ueberhaupt entschieden wurde, und derselbe
         Vorschlag saehe beim naechsten Mal aus wie der erste. */
      const wegErlaubt = darf ? v.stand !== 'offen' : v.stand === 'offen';
      if (wegErlaubt) {
        const weg = el('button', 'raten-knopf raten-knopf--weg', '×');
        weg.type = 'button';
        weg.title = darf ? 'Aus der Liste nehmen' : 'Zurückziehen';
        weg.addEventListener('click', () => zurueckziehen(v.id));
        knoepfe.append(weg);
      }
      if (knoepfe.children.length) zeile.append(knoepfe);

      kasten.append(zeile);
    }

    /* ==== DIE GRENZE KOMMT VOM SERVER, UND ZWAR EINMAL =============
       Hier stand sie VIERMAL: dreimal als `raten.je_person_max || 5`
       und einmal als ausgeschriebenes Wort „fünf“ im Satz. Das sind
       vier Antworten auf eine Frage. Wer die Grenze im Server auf
       drei setzt, hat danach einen Knopf, der bei drei sperrt, und
       einen Satz, der von fünf redet -- und niemand merkt es, weil
       beides fuer sich genommen stimmig aussieht.

       Gerechnet wird mit dem, was angekommen ist. Ist nichts
       angekommen, steht hier auch keine Zahl: Eine erfundene Grenze
       waere schlimmer als gar keine, weil man ihr glaubt.

       Dass man sie VORHER erfaehrt, bleibt der Punkt -- eine
       Grenze, von der man erst beim Anstossen erfaehrt, ist eine
       Falle. */
    const grenze = Number(raten.je_person_max) || 0;
    const offenEigene = liste.filter((v) => v.stand === 'offen').length;
    const rest = grenze ? Math.max(0, grenze - offenEigene) : null;

    const fuss = $('raten-fuss');
    if (darf) {
      fuss.textContent = 'Was du nimmst, landet unten in der Warteschlange.';
    } else if (rest === null) {
      fuss.textContent = '';
    } else if (rest > 0) {
      fuss.textContent = `Du kannst noch ${rest} ${rest === 1 ? 'Video' : 'Videos'} anraten.`;
    } else {
      fuss.textContent = `Du hast gerade ${grenze} offene Vorschläge — `
        + 'warte, bis einer dran war.';
    }
    $('raten-los').disabled = !darf && rest === 0;
  }

  function restZeigen() {
    const feld = $('raten-notiz');
    const wort = $('raten-rest');
    /* ==== KEINE ERSATZZAHL MEHR ====================================
       Hier stand `feld.maxLength || 200`. Die 200 war eine Abschrift
       von `VORSCHLAG_NOTIZ_MAX` im Server -- die dritte Stelle, an
       der dieselbe Zahl stand. Jetzt lernt das Feld sie vom Server
       (siehe `notizGrenze()`), und diese Funktion liest nur noch ab.
       Ist sie noch nicht angekommen, meldet `maxLength` -1; dann
       steht hier NICHTS. „noch -1“ waere schlimmer als keine Zahl. */
    const max = feld.maxLength;
    if (!(max > 0)) { wort.textContent = ''; return; }
    const rest = max - feld.value.length;
    /* DIE ZAHL STEHT ERST DA, WENN ES ENG WIRD. Ein Zaehler, der von
       Anfang an mitlaeuft, macht aus einem Satz eine Aufgabe. */
    wort.textContent = rest <= 40 ? `noch ${rest}` : '';
  }

  /** Die Laenge der Notiz kommt vom Server und wird dem Feld
   *  angelegt. Einmal, und nur wenn sie sich geaendert hat -- ein
   *  `maxLength`, das bei jedem Zeichnen neu gesetzt wird, setzt in
   *  manchen Browsern den Einfuegezeiger zurueck. */
  function notizGrenze() {
    const grenze = Number(raten?.notiz_max) || 0;
    if (!grenze) return;
    const feld = $('raten-notiz');
    if (feld.maxLength === grenze) return;
    feld.maxLength = grenze;
    restZeigen();
  }

  async function abschicken(e) {
    e.preventDefault();
    const video = $('raten-video').value.trim();
    if (!video) { sagFehler('Trag erst eine YouTube-Adresse ein.'); return; }
    const knopf = $('raten-los');
    knopf.disabled = true;
    try {
      const a = await hole('/workspace/api/reaktion/vorschlag', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ video, notiz: $('raten-notiz').value.trim() }),
      });
      if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging gerade nicht.'); return; }
      $('raten-video').value = '';
      $('raten-notiz').value = '';
      restZeigen();
      sagFehler('Danke — angekommen. DogFather und VanVan sehen es.');
      await ratenHolen();
    } catch { sagFehler('Das ging gerade nicht.'); }
    finally { knopf.disabled = false; }
  }

  async function entscheiden(id, was) {
    /* ==== DIE ZWEI WEGE STEHEN AUSGESCHRIEBEN DA ===================
       Vorher hiess es `/vorschlag/${id}/${was}` -- eine Zeile fuer
       beide Wege, und im Quelltext stand nirgends, welche Woerter
       fuer `was` ueberhaupt erlaubt sind. `pruef-struktur` hat
       daraufhin „…/vorschlag/1/1“ gemeldet: Sie setzt in jeden
       Platzhalter eine 1 ein und kann nicht wissen, dass der zweite
       „uebernehmen“ oder „ablehnen“ heisst.
       Das war zu Recht ein Fehler -- ein naechster Leser weiss es
       genauso wenig. Jetzt stehen beide Adressen vollstaendig da,
       ein Schreibfehler faellt beim Lesen auf, und die Pruefung
       findet wieder, was sie pruefen soll. */
    const weg = was === 'uebernehmen'
      ? `/workspace/api/reaktion/vorschlag/${id}/uebernehmen`
      : `/workspace/api/reaktion/vorschlag/${id}/ablehnen`;
    const a = await hole(weg, { method: 'POST' });
    if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
    /* Beim Uebernehmen wandert es in die Warteschlange -- also muss
       auch der Plan links nachziehen. Eine der beiden Reihen allein
       zu zeichnen hiesse, dass links ein Video fehlt, das rechts
       eben angenommen wurde. */
    await Promise.all([standHolen(), ratenHolen()]);
  }

  async function zurueckziehen(id) {
    const a = await hole(`/workspace/api/reaktion/vorschlag/${id}`, { method: 'DELETE' });
    if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
    await ratenHolen();
  }

  /* =================================================================
     HOLEN
     ================================================================= */
  async function standHolen() {
    try {
      const a = await hole('/workspace/api/reaktion');
      if (!a.ok) return;
      lage = await a.json();
      mitteZeichnen();
      planZeichnen();
      kopfSatz();
    } catch { /* beim naechsten Takt wieder */ }
  }

  async function ratenHolen() {
    try {
      const a = await hole('/workspace/api/reaktion/vorschlaege');
      if (!a.ok) return;
      raten = await a.json();
      ratenZeichnen();
    } catch { /* die Reihe bleibt stehen, wie sie war */ }
  }

  /* ==== DER SATZ OBEN NENNT KEINE RICHTUNGEN MEHR ==================

     Hier stand: „Gerade läuft nichts. Links steht, was ansteht;
     rechts kannst du etwas anraten.“ Zwei Fehler in einem Satz, und
     beide derselbe:

       * „Links“ gibt es für die Community überhaupt nicht — der
         Plan ist nur für DogFather und VanVan da. Der Satz zeigte
         also ALLEN außer DogFather und VanVan auf einen leeren Rand.
       * Und am Telefon stehen die Reihen übereinander. Dort ist
         „links“ und „rechts“ auch für die zwei falsch.

     Eine Richtung im Text ist eine Aussage über das Aussehen — und
     das Aussehen ändert sich mit dem Bildschirm und mit der Rolle.
     Das ist dieselbe Falle wie eine feste Pixelzahl: Sie stimmt, bis
     jemand etwas verschiebt, und wird dann still falsch. Gesagt wird
     deshalb, WAS geht, nicht WO es steht.

     Dass der Plan da ist, wird nicht aus der Rolle geschlossen,
     sondern daran gemessen, ob die Auskunft gekommen ist — dieselbe
     Frage wie in `planZeichnen()`, und nur eine Antwort darauf. */
  function kopfSatz() {
    const stand = lage?.stand || 'zu';
    const mitPlan = Array.isArray(lage?.liste);
    $('kopf-satz').textContent = stand === 'live'
      ? 'Es läuft gerade — du kannst jederzeit dazukommen.'
      : stand === 'vorbereitung'
        ? 'Gleich geht es los. Der Wartebereich ist schon offen.'
        : mitPlan
          ? 'Gerade läuft nichts. Was ansteht, steht im Plan — und was '
            + 'das Rudel anträgt, wartet auf euch.'
          : 'Gerade läuft nichts. Du kannst uns aber jederzeit ein Video anraten.';
  }

  /* =================================================================
     LOS
     ================================================================= */
  function los() {
    $('raten-form').addEventListener('submit', abschicken);
    $('raten-notiz').addEventListener('input', restZeigen);
    restZeigen();

    standHolen();
    ratenHolen();

    /* ==== ALLE ZWANZIG SEKUNDEN NACHFRAGEN ====================
       Damit jemand, der das Foyer offen stehen laesst, den Start
       mitbekommt. Ein Ereignisstrom waere genauer und haelt dafuer
       eine Verbindung offen -- im Saal wird jede davon gebraucht
       (manche Browser lassen nur sechs je Adresse zu).

       UND NICHT, WENN DER REITER IM HINTERGRUND LIEGT. Ein Foyer,
       das jemand seit gestern offen hat, soll den Server nicht alle
       zwanzig Sekunden fragen. Beim Zurueckkommen wird sofort
       einmal geholt -- dann steht der Stand von JETZT da und nicht
       der von gestern. */
    setInterval(() => {
      if (document.visibilityState === 'visible') standHolen();
    }, 20000);
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible') { standHolen(); ratenHolen(); }
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', los);
  } else {
    los();
  }
})();