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;
  let regie = null;
  /* Welche Bereiche der Vorhang stillgelegt hat -- gemerkt, damit
     beim Schliessen genau die wieder freigegeben werden. */
  let geschwiegen = [];

  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();
  }

  /* =================================================================
     DAS REGIE-TOR

     Filipe: „die soll jeder sehen aber nur vanvan und dogfather
     sollen da rein kommen bitte."

     DIE KACHEL STEHT IMMER DA. Was sich aendert, ist der Satz darauf
     und das, was ein Druck bewirkt. Wer nicht hinein darf, bekommt
     KEIN Eingabefeld -- eine Kachel, die jeder sieht, waere sonst
     eine Ratestelle fuer jeden im Haus.
     ================================================================= */
  function regieZeichnen() {
    const tor = $('regie-tor');
    if (!tor || !regie) return;
    const darf = !!regie.darf;
    const offen = !!regie.offen;
    tor.dataset.darf = darf ? 'ja' : 'nein';
    tor.dataset.offen = offen ? 'ja' : 'nein';

    $('regie-marke').textContent = darf ? (offen ? 'Offen' : 'Verschlossen') : 'Nur ihr zwei';

    if (!darf) {
      $('regie-titel').textContent = 'Der Platz hinter dem Pult';
      $('regie-satz').textContent = 'Hier führen DogFather und VanVan die Sendung. '
        + 'Für dich ist die Tür zu — und das bleibt sie auch.';
      tor.setAttribute('aria-label',
        'Regie — nur für DogFather und VanVan, du kommst hier nicht hinein');
      return;
    }

    if (offen) {
      const bis = regie.bis ? alsTermin(regie.bis) : '';
      $('regie-titel').textContent = 'Regie — aufgeschlossen';
      $('regie-satz').textContent = bis
        ? `Offen bis ${bis}. Ein Druck, und du stehst am Pult.`
        : 'Offen. Ein Druck, und du stehst am Pult.';
      tor.setAttribute('aria-label', 'In die Regie gehen');
    } else {
      $('regie-titel').textContent = 'Regie aufschließen';
      $('regie-satz').textContent = 'Warteschlange, Ton, Werbung, der rote Knopf. '
        + 'Einmal dein Zugangscode, dann zwölf Stunden offen.';
      tor.setAttribute('aria-label', 'Regie mit deinem Zugangscode aufschließen');
    }
  }

  /** Ein Druck auf die Kachel. Drei Ausgaenge, und jeder sagt etwas
   *  anderes: hinein / aufschliessen / das ist nicht deine Tuer. */
  function regieDruck() {
    if (!regie?.darf) {
      sagFehler('Die Regie gehört DogFather und VanVan. '
        + 'Dein Zugang reicht hier nicht — das ist kein Fehler.');
      return;
    }
    if (regie.offen) { window.location.href = 'reaktion.html'; return; }
    vorhangAuf();
  }

  function vorhangAuf() {
    const v = $('regie-vorhang');
    v.hidden = false;
    /* ==== DER REST DER SEITE WIRD STILLGELEGT =====================
       Ohne das waere der Vorhang nur ein Bild: Esc schliesst, ein
       Druck daneben schliesst, der Finger steht im Feld -- aber die
       Tabulatortaste lief weiter durch die Knoepfe DAHINTER. Wer die
       Maus nicht benutzt, landete nach drei Tastendruecken auf
       „Abmelden", sichtbar war aber das Codefeld. Das ist dieselbe
       Sorte Fehler wie ein Knopf, der auf einem anderen liegt: Man
       tippt auf A und bekommt B.

       `inert` statt eines selbstgebauten Fokusfaengers: Es nimmt dem
       ganzen Bereich Klicks, Fokus und Vorleseprogramme in einem
       Zug. Ein Fokusfaenger von Hand ist zwanzig Zeilen, die beim
       naechsten neuen Knopf nicht mehr stimmen.

       NICHT NUR `main`, SONDERN ALLES AUSSER DEM VORHANG. Der erste
       Entwurf legte `#foyer` stumm -- und die eigene Messung fiel
       sofort darueber: Die KOPFLEISTE steht ausserhalb davon, also
       lief die Tabulatortaste weiter nach „Abmelden". Ein halber
       Riegel ist hier so gut wie keiner.

       ABGELEITET STATT AUFGEZAEHLT: Was neben dem Vorhang steht,
       wird gefragt und nicht in eine Liste geschrieben. Eine Liste
       waere die, die den naechsten Kasten vergisst, den jemand ins
       `body` haengt. */
    geschwiegen = [...document.body.children].filter(
      (e) => e !== v && 'inert' in e && !e.inert);
    for (const e of geschwiegen) e.inert = true;
    $('regie-fehler').hidden = true;
    const feld = $('regie-code');
    feld.value = '';
    /* Erst zeigen, dann den Finger hineinsetzen -- ein `focus()` auf
       etwas, das noch `hidden` ist, landet nirgends. */
    setTimeout(() => feld.focus(), 30);
    document.addEventListener('keydown', vorhangTaste);
  }

  function vorhangZu() {
    $('regie-vorhang').hidden = true;
    /* NUR ZURUECKNEHMEN, WAS ICH SELBST GESETZT HABE. Haette ich
       stumpf alles wieder freigegeben, wuerde ein Bereich, den eine
       andere Stelle aus eigenem Grund stillgelegt hat, hier
       versehentlich wieder hoerbar. */
    for (const e of geschwiegen) e.inert = false;
    geschwiegen = [];
    /* DAS FELD WIRD GELEERT, auch beim Abbrechen. Ein Zugangscode,
       der in einem geschlossenen Fenster stehen bleibt, steht beim
       naechsten Bildschirmteilen wieder da. */
    $('regie-code').value = '';
    document.removeEventListener('keydown', vorhangTaste);
    $('regie-tor')?.focus();
  }

  /* Esc schliesst. Ohne das waere der Vorhang eine Falle fuer jeden,
     der die Maus gerade nicht hat. */
  function vorhangTaste(e) {
    if (e.key === 'Escape') { e.preventDefault(); vorhangZu(); }
  }

  async function regieAufschliessen(e) {
    e.preventDefault();
    const code = $('regie-code').value.trim();
    const knopf = $('regie-los');
    const fehlerfeld = $('regie-fehler');
    fehlerfeld.hidden = true;
    if (!code) {
      fehlerfeld.textContent = 'Tipp erst deinen Code ein.';
      fehlerfeld.hidden = false;
      return;
    }
    knopf.disabled = true;
    try {
      const a = await hole('/workspace/api/reaktion/regie', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code }),
      });
      if (!a.ok) {
        const wort = (await a.json().catch(() => null))?.fehler;
        /* DER FEHLER STEHT IM FENSTER, nicht oben auf der Seite. Wer
           gerade tippt, schaut auf das Feld -- eine Meldung hinter
           dem Vorhang haette er nie gesehen. */
        fehlerfeld.textContent = (window.sagWas && wort && window.sagWas(wort))
          || 'Das ging gerade nicht.';
        fehlerfeld.hidden = false;
        $('regie-code').value = '';
        $('regie-code').focus();
        return;
      }
      regie = await a.json();
      regieZeichnen();
      vorhangZu();
      window.location.href = 'reaktion.html';
    } catch {
      fehlerfeld.textContent = 'Das ging gerade nicht.';
      fehlerfeld.hidden = false;
    } finally { knopf.disabled = false; }
  }

  async function regieAbschliessen() {
    const a = await hole('/workspace/api/reaktion/regie', { method: 'DELETE' });
    if (!a.ok) { sagFehler('Das ging gerade nicht.'); return; }
    regie = await a.json();
    regieZeichnen();
    sagFehler('Regie wieder abgeschlossen.');
  }

  /* =================================================================
     HOLEN
     ================================================================= */
  async function regieHolen() {
    try {
      const a = await hole('/workspace/api/reaktion/regie');
      if (!a.ok) return;
      regie = await a.json();
      regieZeichnen();
    } catch { /* die Kachel bleibt stehen, wie sie war */ }
  }

  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();

    $('regie-tor').addEventListener('click', regieDruck);
    $('regie-form').addEventListener('submit', regieAufschliessen);
    $('regie-ab').addEventListener('click', vorhangZu);
    /* Ein Druck neben das Fenster schliesst es auch -- aber nur, wenn
       er WIRKLICH daneben war und nicht auf ein Kind davon. */
    $('regie-vorhang').addEventListener('click', (e) => {
      if (e.target === $('regie-vorhang')) vorhangZu();
    });
    /* Rechte Maustaste auf die offene Kachel schliesst wieder ab. Als
       eigener Knopf waere es ein zweites Bedienelement in einer
       Kachel, die selbst ein einziger grosser Knopf ist -- ein Knopf
       im Knopf ist in jedem Vorleseprogramm ein Durcheinander.
       ERREICHBAR BLEIBT ES TROTZDEM: Nach zwölf Stunden fällt das
       Schloss von selbst zu, und wer sofort abschließen will, kann
       sich abmelden. */
    $('regie-tor').addEventListener('contextmenu', (e) => {
      if (regie?.darf && regie.offen) { e.preventDefault(); regieAbschliessen(); }
    });

    standHolen();
    ratenHolen();
    regieHolen();

    /* ==== 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(); regieHolen();
      }
    });
  }

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