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