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