Regieplatz, Bildschirm teilen, Zuruecksetzen und der Preis
Vier Sachen aus Filipes Ansagen vom 28.09.2026.
=======================================================================
1. DER REGIEPLATZ
"kann das nicht bissl aufgeteilt sein auf links und rechts und eine
barre unten in der mitte. kannst du das nicht hoch professionell
machen und hochwertig vom aussehen?"
Die Teilung folgt dem, was WANN gebraucht wird:
LINKS Was laeuft. Das liest man.
RECHTS Was eingetragen wird. Das tippt man VOR der Sendung.
UNTEN Der Transport. Den fasst man WAEHREND der Sendung an.
Vorher stand alles in einem Stapel, und wer im Live an den Play-Knopf
wollte, musste an den Eingabefeldern vorbeiscrollen. Der Play-Knopf
ist jetzt rund und 58 px -- der einzige, den man blind treffen muss,
und die Form unterscheidet ihn schon vor dem Hinsehen.
UND EIN FUND, DEN NUR DIE MESSUNG FAND: Nach dem Umbau lag die Leiste
bei y=986 in einem 900 Pixel hohen Fenster. Die Rechnung ging auf
(links, rechts, Leiste darunter) und das Ergebnis war trotzdem
falsch. Jetzt klebt sie (`position: sticky`) -- unten, wie gewollt,
und immer sichtbar. Ihr Grund musste dafuer dicht werden: eine
halbdurchsichtige Leiste, durch die Text scrollt, ist die Flaeche,
auf der man sich im Live verliest.
=======================================================================
2. DEN BILDSCHIRM TEILEN
"waere es nicht einfach eine bildschirm uebertragung zu installieren
und es zu perfektionieren?"
Ja -- der Weg war schon da: Die Kamerabilder laufen als
Direktverbindung von Mensch zu Mensch. Geteilt wird deshalb AN STELLE
der Kamera; `replaceTrack` tauscht die Bildspur in jeder bestehenden
Leitung aus, ohne dass eine einzige neu ausgehandelt werden muss.
Eine zweite Spur daneben waere eine zweite Verhandlung je Zuschauer,
und jede davon kann scheitern.
Vier Dinge, die sonst schiefgegangen waeren:
- Wer waehrenddessen dazukommt, bekommt den Bildschirm und nicht
das Gesicht.
- Das eigene Fenster zeigt, was die anderen sehen -- sonst waere es
die eine Anzeige, der man nicht trauen kann.
- Der Stopp-Knopf des Browsers wird gehoert; sonst bliebe die Seite
auf "teilt" stehen und sendete ein totes Bild.
- Der Kameraknopf wird grau, solange geteilt wird. Er haette keine
Wirkung mehr -- und ein Knopf, der still nichts tut, ist
schlimmer als keiner.
Ein Bildschirm wird ausserdem NICHT zugeschnitten: `cover` ist fuer
ein Gesicht richtig, bei einem Schreibtisch faellt links und rechts
genau das weg, worum es geht.
UND DIE WAHRHEIT STEHT AN DER BEDIENUNG: Netflix, Disney+ und Prime
bleiben beim Teilen schwarz (Widevine schaltet den Videobereich ab --
auf Discord und Zoom ist es genauso), und einen Film weiterzusenden
waere eine oeffentliche Wiedergabe. Wer das erst erfaehrt, nachdem im
Stream zehn Minuten ein schwarzes Rechteck stand, erfaehrt es zu
spaet.
=======================================================================
3. ALLES ZURUECKSETZEN
"brauch ich auch noch einen button wo ich alles easy zuruecksetzen
kann."
"Alles" heisst: der Schreibtisch, nicht das Gedaechtnis. Geleert
werden Titel, Video, zweites Video, Vorschaubild, Beginn,
Warteschlange, Gaesteliste; Anordnung, Kameragroesse, Ecke, Tempo und
Chatmodus gehen auf Vorgabe.
NICHT ANGETASTET werden Spenden, die Dogen der Leute, der Chatverlauf
und die Massnahmen der Moderation. Eine bezahlte Spende aus den
Buechern zu nehmen waere eine Faelschung; eine stillschweigend
aufgehobene Sperre waere eine Entscheidung, die niemand getroffen
hat. Beides steht nebeneinander im Dialog, BEVOR etwas passiert -- ein
"Bist du sicher?" ohne diese Liste ist keine Frage, sondern eine
Huerde.
Im Live ist der Knopf grau und sagt warum. Und die Spalten stehen
einzeln da statt als "alles ausser": Eine Ausnahmeliste waechst still
mit jeder neuen Spalte mit, und dann loescht das Zuruecksetzen
irgendwann etwas, das es nie loeschen sollte.
=======================================================================
4. DER PREIS BEI DEN DOGEN
"da muss ich auch sehen so viel dogen sind so viel euro. damit ich
auch immer weiss was es ist. aber nur ich. die leute sollen nur sehen
was dogen kosten."
Das ist keine Ruecknahme von "nie Geld", sondern ihre Grenze. Die
Regel war richtig fuer alles, was ANZEIGE ist -- Karte, Stream, Chat,
Punktestand -- und falsch fuer die eine Stelle, an der jemand KAUFT.
GENAU ZWEI AUSNAHMEN, und die Pruefung nennt sie beim Namen statt die
Regel aufzuweichen:
knoepfe[].cent fuer alle -- der Preis am Kaufknopf
kurs_cent_je_doge nur fuer die Leitung
DIE ERLAUBNIS STECKT IN DEN DATEN UND NICHT IN EINEM `if`. Ein
Zuschauer hat den Kurs nicht und kann deshalb GAR KEINEN Preis
ausrechnen -- auch nicht, wenn eine spaetere Zeile es versuchte. Eine
Abfrage "darf der das sehen?" in der Oberflaeche waere eine Regel, die
man vergessen kann; eine fehlende Zahl ist eine, die man nicht
vergessen kann.
Eine Zahl statt dreissig Einzelumrechnungen: Wer je Zeile einen Cent
mitschickt, hat dreissig Gelegenheiten, eine zu vergessen.
=======================================================================
FUENF BEFUNDE GEGEN DIE EIGENEN PRUEFUNGEN
1. Eine Pruefung fragte "liegt die Leiste unter beiden Spalten?" --
das tut eine klebende Leiste beim Hochscrollen absichtlich nicht.
Sie stellte die Frage von vorher. Jetzt zaehlt die Reihenfolge im
Dokument, die beim Scrollen wie beim Stillstand gilt.
2. Eine Messung klickte auf einen Namen und wartete 400 ms auf die
UHR -- und verschluckte den Klickfehler still. Derselbe Lauf war
dreimal gruen und beim vierten rot, ohne Codeaenderung. Jetzt wird
auf das Merkmal gewartet, bis zu dreimal, und die Zahl der
Anlaeufe steht im Protokoll.
3. Eine Pruefung loeschte erst selbst den Chat (eine Sendung zu
beenden tut das mit Absicht) und fragte dann, ob er noch da ist.
4. "Die Dogen sind unberuehrt (0 Staende)" -- null bleibt auch dann
null, wenn das Zuruecksetzen sie mitnaehme. Jetzt steht vorher
eine echte Spende da, und die Zahl gehoert in die BEDINGUNG.
5. `knopf-still--haupt` stand seit Wochen im HTML und war in KEINEM
Stilblatt definiert -- eine Klasse, die aussieht, als sei etwas
hervorgehoben, und auf dem Bildschirm ist es das nicht. Gefunden
beim Nachsehen, ob es sie gibt, bevor ich sie ein zweites Mal
benutze.
Und eine neue Pruefung, die es vorher nicht gab: ALLE 118 Kennungen,
die das Programm mit `$('...')` anspricht, werden gegen das HTML
gehalten. Nach einem Umbau, der die halbe Tafel neu sortiert, waere
eine verlorene Kennung KEIN Fehler beim Laden -- `$()` gibt still
`null` zurueck, und der Fehler erscheint erst, wenn jemand mitten in
der Sendung den Knopf drueckt.
pruef-reaktion 365/0 (vorher 321) - pruef-spenden 172/0 (vorher 167) -
pruef-buehne 36/0 - pruef-css-klassen ok - pruef-tippziele 11/0 -
mess-reaktion und mess-buehne ohne Beanstandung
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -212,6 +212,9 @@
|
||||
'Es sind schon zwei Gäste dabei. Nimm erst jemanden heraus.',
|
||||
layout_unbekannt:
|
||||
'Diese Anordnung gibt es nicht.',
|
||||
laeuft_noch:
|
||||
'Die Sendung läuft gerade. Beende sie zuerst — mitten im Live '
|
||||
+ 'zurückzusetzen würde allen das Video wegnehmen.',
|
||||
satz_unbekannt:
|
||||
'Diesen Münzsatz gibt es nicht. Wähl einen aus der Liste — '
|
||||
+ '„Eigenes Zeichen" geht erst, wenn du eines hochgeladen hast.',
|
||||
|
||||
@@ -278,6 +278,11 @@
|
||||
Ohne diese Beschriftung sind beide ein schwarzes Rechteck,
|
||||
und man fragt den anderen, ob bei ihm etwas klemmt. */
|
||||
fenster.dataset.kamera = s.kamera_aus ? 'aus' : 'an';
|
||||
/* EIN BILDSCHIRM WIRD NICHT ZUGESCHNITTEN. Ein Kamerafenster
|
||||
steht auf `object-fit: cover` -- richtig fuer ein Gesicht,
|
||||
falsch fuer einen Schreibtisch: Dort faellt genau das weg,
|
||||
worum es geht. Das Stilblatt schaltet daran auf `contain`. */
|
||||
fenster.dataset.bildschirm = s.bildschirm ? 'ja' : 'nein';
|
||||
/* `stumm` setzt der Host fuer alle, `mikro_aus` der Mensch fuer
|
||||
sich. Beides sieht man dem Fenster an, und beides heisst
|
||||
dasselbe: von hier kommt gerade kein Ton. */
|
||||
@@ -291,8 +296,13 @@
|
||||
}
|
||||
const draht = drähte.get(s.id);
|
||||
const v = fenster.querySelector('video');
|
||||
if (s.id === meineId && meinStrom && v.srcObject !== meinStrom) {
|
||||
v.srcObject = meinStrom;
|
||||
/* IM EIGENEN FENSTER STEHT, WAS DIE ANDEREN SEHEN. Zeigte es
|
||||
weiter die Kamera, waehrend der Bildschirm hinausgeht, waere
|
||||
es die eine Anzeige, der man nicht trauen kann -- und man
|
||||
merkt es erst, wenn jemand nachfragt. */
|
||||
const meins = bildschirmStrom || meinStrom;
|
||||
if (s.id === meineId && meins && v.srcObject !== meins) {
|
||||
v.srcObject = meins;
|
||||
v.play().catch(() => { /* stumm darf immer */ });
|
||||
}
|
||||
if (draht && draht.strom && v.srcObject !== draht.strom) {
|
||||
@@ -326,6 +336,31 @@
|
||||
const mAus = !!lage.ich.mikro_aus;
|
||||
$('s-kamera').setAttribute('aria-pressed', String(kAus));
|
||||
$('s-mikro').setAttribute('aria-pressed', String(mAus));
|
||||
|
||||
/* ==== DER BILDSCHIRM ==========================================
|
||||
`aria-pressed` steht hier fuer „teilt gerade" und nicht wie
|
||||
bei den Nachbarn fuer „ist aus". Das ist kein Bruch, sondern
|
||||
der Unterschied: Kamera und Mikro schaltet man AB, den
|
||||
Bildschirm schaltet man AN.
|
||||
|
||||
UND DIE KAMERA WIRD DERWEIL GRAU. Solange der Bildschirm
|
||||
hinausgeht, ist die Bildspur der Leitungen der Bildschirm --
|
||||
der Kameraknopf haette dann keine Wirkung mehr auf das, was
|
||||
ankommt. Ein Knopf, der still nichts tut, ist schlimmer als
|
||||
einer, der nicht da ist. */
|
||||
const teilt = !!lage.ich.bildschirm;
|
||||
const knopf = $('s-teilen');
|
||||
if (knopf) {
|
||||
knopf.setAttribute('aria-pressed', String(teilt));
|
||||
knopf.title = teilt
|
||||
? 'Teilen beenden — dann läuft wieder deine Kamera'
|
||||
: 'Deinen Bildschirm statt der Kamera zeigen';
|
||||
$('s-teilen-wort').textContent = teilt ? 'Teilt' : 'Bildschirm';
|
||||
}
|
||||
$('s-kamera').disabled = teilt;
|
||||
$('s-kamera').title = teilt
|
||||
? 'Solange du den Bildschirm teilst, geht dein Bildschirm hinaus'
|
||||
: '';
|
||||
$('s-kamera-wort').textContent = kAus ? 'Kamera an' : 'Kamera';
|
||||
$('s-mikro-wort').textContent = mAus ? 'Mikro an' : 'Mikro';
|
||||
$('s-kamera').title = kAus ? 'Bild wieder einschalten' : 'Bild abschalten';
|
||||
@@ -337,6 +372,146 @@
|
||||
* ERST DAS GERAET, DANN DIE ANSAGE. Andersherum stuende bei allen
|
||||
* „Kamera aus", waehrend noch ein Bild fliesst -- und das ist die
|
||||
* unangenehmere Reihenfolge: Man glaubt, man sei unsichtbar. */
|
||||
/* =================================================================
|
||||
DEN BILDSCHIRM TEILEN
|
||||
|
||||
Filipe: „waere es nicht einfach eine bildschirm uebertragung zu
|
||||
installieren und es zu perfektionieren?"
|
||||
|
||||
Es ist einfach, weil der Weg schon da ist: Die Kamerabilder
|
||||
laufen als Direktverbindung von Mensch zu Mensch. Geteilt wird
|
||||
deshalb nicht NEBEN der Kamera, sondern AN IHRER STELLE --
|
||||
`replaceTrack` tauscht die Bildspur in jeder bestehenden
|
||||
Leitung aus, ohne dass eine einzige neu ausgehandelt werden
|
||||
muss. Eine zweite Spur daneben waere eine zweite Verhandlung je
|
||||
Zuschauer, und jede davon kann scheitern.
|
||||
|
||||
WAS DAMIT NICHT GEHT, STEHT IM REGIEPULT und nicht nur hier:
|
||||
Netflix, Disney+ und Prime bleiben schwarz (Kopierschutz), und
|
||||
einen Film weiterzusenden waere eine oeffentliche Wiedergabe.
|
||||
================================================================= */
|
||||
let bildschirmStrom = null;
|
||||
let bildschirmSpur = null;
|
||||
|
||||
async function bildschirmSchalten() {
|
||||
if (bildschirmStrom) { await bildschirmBeenden(); return; }
|
||||
if (!navigator.mediaDevices?.getDisplayMedia) {
|
||||
sagFehler('Dieser Browser kann den Bildschirm nicht teilen. '
|
||||
+ 'Am Handy geht es grundsätzlich nicht — dort gibt es die Funktion nicht.');
|
||||
return;
|
||||
}
|
||||
/* OHNE KAMERA KEINE LEITUNG. Die Verbindungen entstehen aus dem
|
||||
eigenen Strom; ohne ihn gibt es nichts, worin man tauschen
|
||||
könnte. */
|
||||
if (!meinStrom) await kameraHolen();
|
||||
if (!meinStrom) return;
|
||||
|
||||
let strom;
|
||||
try {
|
||||
strom = await navigator.mediaDevices.getDisplayMedia({
|
||||
/* 15 Bilder je Sekunde und höchstens 1280 breit. Ein
|
||||
Bildschirm ist meist ruhig, und jede Verbindung kostet
|
||||
den, der teilt, Upload: Bei 12 Zuschauern ist der
|
||||
Unterschied zwischen „läuft" und „stockt" genau diese
|
||||
Zahl. Gemessen steht die Grenze im Kopf von
|
||||
reaktion-tabellen.js. */
|
||||
video: { frameRate: { ideal: 15, max: 30 }, width: { max: 1280 } },
|
||||
/* KEIN RECHNERTON. `getDisplayMedia` kann ihn liefern, und
|
||||
er käme zusätzlich zum Mikrofon heraus -- alles doppelt
|
||||
und einmal davon verzögert. Der Ton bleibt beim Mikro. */
|
||||
audio: false,
|
||||
});
|
||||
} catch {
|
||||
/* Abgebrochen ist kein Fehler: Wer im Auswahlfenster
|
||||
„Abbrechen" drückt, hat sich entschieden. Eine Fehlermeldung
|
||||
darauf wäre eine Belehrung. */
|
||||
return;
|
||||
}
|
||||
|
||||
bildschirmStrom = strom;
|
||||
bildschirmSpur = strom.getVideoTracks()[0] || null;
|
||||
/* DER BROWSER HAT EINEN EIGENEN STOPP-KNOPF, unten am Rand. Wer
|
||||
ihn drückt, erwartet, dass alles zurückgeht -- ohne diesen
|
||||
Zuhörer bliebe die Seite auf „teilt" stehen und sendete ein
|
||||
totes Bild. */
|
||||
if (bildschirmSpur) {
|
||||
bildschirmSpur.addEventListener('ended', () => { bildschirmBeenden(); });
|
||||
}
|
||||
await bildSpurTauschen(bildschirmSpur);
|
||||
await bildschirmMelden(true);
|
||||
}
|
||||
|
||||
async function bildschirmBeenden() {
|
||||
if (!bildschirmStrom) return;
|
||||
try { for (const sp of bildschirmStrom.getTracks()) sp.stop(); } catch { /* war schon aus */ }
|
||||
bildschirmStrom = null;
|
||||
bildschirmSpur = null;
|
||||
await bildSpurTauschen(meinStrom ? meinStrom.getVideoTracks()[0] : null);
|
||||
await bildschirmMelden(false);
|
||||
}
|
||||
|
||||
/** Die Bildspur in JEDER bestehenden Leitung austauschen. */
|
||||
async function bildSpurTauschen(spur) {
|
||||
for (const d of drähte.values()) {
|
||||
const sender = d.pc.getSenders().find((x) => x.track && x.track.kind === 'video');
|
||||
if (!sender) continue;
|
||||
try { await sender.replaceTrack(spur); } catch { /* diese Leitung eben nicht */ }
|
||||
}
|
||||
kamerasZeichnen();
|
||||
}
|
||||
|
||||
async function bildschirmMelden(an) {
|
||||
try {
|
||||
const a = await hole('/workspace/api/reaktion/senden', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ bildschirm: an }),
|
||||
});
|
||||
if (a.ok) { lage = { ...(await a.json()) }; zeichnen(); }
|
||||
} catch { /* die Leitung laeuft trotzdem -- nur das Schild fehlt */ }
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
ALLES ZURUECKSETZEN
|
||||
|
||||
Filipe: „brauch ich auch noch einen button wo ich alles easy
|
||||
zuruecksetzen kann."
|
||||
|
||||
ZWEI SPALTEN IM DIALOG, und das ist der ganze Punkt: Was geleert
|
||||
wird, steht neben dem, was bleibt. Ein „Bist du sicher?" ohne
|
||||
diese Liste ist keine Frage, sondern eine Huerde -- man klickt
|
||||
sie weg und erfaehrt erst danach, was fehlt.
|
||||
================================================================= */
|
||||
async function allesZuruecksetzen() {
|
||||
if (!window.frageNach) return;
|
||||
const ja = await window.frageNach({
|
||||
titel: 'Das Pult zurücksetzen?',
|
||||
was: 'Titel, Video, zweites Video, Vorschaubild, Beginn, die '
|
||||
+ 'Warteschlange und die Gästeliste werden geleert. Anordnung, '
|
||||
+ 'Kameragröße, Ecke, Tempo und der Chatmodus gehen auf ihre '
|
||||
+ 'Vorgaben zurück.',
|
||||
bleibt: 'Spenden, die Dogen der Leute, der Chatverlauf und alle '
|
||||
+ 'Maßnahmen der Moderation bleiben unberührt.',
|
||||
ja: 'Ja, zurücksetzen',
|
||||
nein: 'Doch nicht',
|
||||
endgueltig: true,
|
||||
});
|
||||
if (!ja) return;
|
||||
const a = await hole('/workspace/api/reaktion/zuruecksetzen', { method: 'POST' });
|
||||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||||
lage = { ...(await a.json()) };
|
||||
zeichnen();
|
||||
/* DIE FELDER LEERT DER SERVER NICHT -- er kennt sie nicht. Ohne
|
||||
diese Zeilen stuende der alte Text weiter im Eingabefeld,
|
||||
waehrend die Sendung leer ist: die eine Anzeige, der man nicht
|
||||
trauen kann. */
|
||||
for (const id of ['p-titel', 'p-video', 'p-vorschau', 'p-zweit', 'p-beginn']) {
|
||||
const e = $(id);
|
||||
if (e) e.value = '';
|
||||
}
|
||||
sagFehler('');
|
||||
}
|
||||
|
||||
async function sendenSchalten(was, aus) {
|
||||
if (!meinStrom) return;
|
||||
const spuren = was === 'kamera'
|
||||
@@ -688,7 +863,18 @@
|
||||
}
|
||||
};
|
||||
if (binSender && meinStrom) {
|
||||
for (const spur of meinStrom.getTracks()) pc.addTrack(spur, meinStrom);
|
||||
/* ==== WAS HINAUSGEHT, IST NICHT IMMER DIE KAMERA ==========
|
||||
Teile ich gerade den Bildschirm, muss auch eine NEUE
|
||||
Verbindung den Bildschirm bekommen -- sonst sieht jeder, der
|
||||
waehrenddessen dazukommt, mein Gesicht statt dessen, worum
|
||||
es geht. Genau das ist die Sorte Fehler, die erst auffaellt,
|
||||
wenn jemand im Chat fragt, was er sehen soll.
|
||||
Der Ton kommt weiter vom Mikrofon: `getDisplayMedia` liefert
|
||||
den Ton des Rechners, und den will hier niemand. */
|
||||
const bild = bildschirmSpur || meinStrom.getVideoTracks()[0];
|
||||
const ton = meinStrom.getAudioTracks()[0];
|
||||
if (bild) pc.addTrack(bild, meinStrom);
|
||||
if (ton) pc.addTrack(ton, meinStrom);
|
||||
}
|
||||
return d;
|
||||
}
|
||||
@@ -1683,10 +1869,17 @@
|
||||
$('zeichen-weg').addEventListener('click', zeichenWeg);
|
||||
|
||||
/* ---- Spenden ---- */
|
||||
$('p-zuruecksetzen').addEventListener('click', allesZuruecksetzen);
|
||||
$('sp-zeigen').addEventListener('click', spendeEintragen);
|
||||
$('sp-betrag').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); spendeEintragen(); }
|
||||
});
|
||||
/* Beim Tippen mitrechnen: Die Zahl von der Zahlungsmeldung steht
|
||||
in Euro, eingetragen wird in Dogen -- ohne die Umrechnung
|
||||
daneben ist jeder Eintrag geraten. */
|
||||
$('sp-betrag').addEventListener('input', () => {
|
||||
$('sp-preis').textContent = alsPreis(dogenInMille($('sp-betrag').value));
|
||||
});
|
||||
|
||||
$('v-spiel').addEventListener('click', spielPause);
|
||||
$('v-zurueck').addEventListener('click', () => springen(-10));
|
||||
@@ -2161,6 +2354,17 @@
|
||||
$('p-beenden').disabled = lage.stand === 'zu';
|
||||
$('p-starten').textContent = lage.video ? 'Auf Sendung' : 'Erst ein Video eintragen';
|
||||
|
||||
/* ZURUECKSETZEN GEHT NICHT IM LIVE. Wer mitten in der Sendung
|
||||
zuruecksetzt, zieht allen das Video unter den Fuessen weg --
|
||||
und das ist nicht rueckgaengig zu machen. Der Knopf wird grau
|
||||
und sagt, warum; einer, der verschwindet, laesst einen
|
||||
suchen. */
|
||||
const laeuftGerade = lage.stand === 'live';
|
||||
$('p-zuruecksetzen').disabled = laeuftGerade;
|
||||
$('zurueck-hinweis').textContent = laeuftGerade
|
||||
? 'Geht erst, wenn die Sendung beendet ist.'
|
||||
: 'Leert das Pult — Spenden, Dogen und Chat bleiben.';
|
||||
|
||||
for (const k of $('layout-reihe').children) {
|
||||
k.setAttribute('aria-pressed', String(k.dataset.layout === (lage.layout || 'kino')));
|
||||
}
|
||||
@@ -2384,6 +2588,11 @@
|
||||
const zeile = el('li', 'spendenzeile');
|
||||
const betrag = el('strong', 'spendenzeile__betrag');
|
||||
betrag.append(window.Spendenkarte.dogenStueck(k.dogen_mille, k.zeichen));
|
||||
/* Der Preis daneben -- das ist die Zahl, die in Filipes
|
||||
Zahlungsmeldung steht. Ohne sie muesste er beim Bestaetigen
|
||||
im Kopf umrechnen, und das mitten in einer Sendung. */
|
||||
const preis = alsPreis(k.dogen_mille);
|
||||
if (preis) betrag.append(el('span', 'preis preis--unter', preis));
|
||||
zeile.append(betrag);
|
||||
|
||||
/* ==== DIE SCHRANKE VOR DEM STREAM =========================
|
||||
@@ -2435,6 +2644,8 @@
|
||||
const zeile = el('li', 'spendenzeile');
|
||||
const betrag = el('strong', 'spendenzeile__betrag');
|
||||
betrag.append(window.Spendenkarte.dogenStueck(k.dogen_mille, k.zeichen));
|
||||
const preis = alsPreis(k.dogen_mille);
|
||||
if (preis) betrag.append(el('span', 'preis preis--unter', preis));
|
||||
zeile.append(betrag);
|
||||
const mitte = el('div', 'spendenzeile__mitte');
|
||||
mitte.append(el('span', 'spendenzeile__wer', k.name || 'Jemand'));
|
||||
@@ -2465,6 +2676,8 @@
|
||||
zeile.append(el('span', 'dogenzeile__wer', p.name));
|
||||
const wert = el('strong', 'dogenzeile__wert');
|
||||
wert.append(window.Spendenkarte.dogenStueck(p.mille, spendenLage.zeichen));
|
||||
const preis = alsPreis(p.mille);
|
||||
if (preis) wert.append(el('span', 'preis preis--unter', preis));
|
||||
zeile.append(wert);
|
||||
staende.append(zeile);
|
||||
}
|
||||
@@ -2945,8 +3158,27 @@
|
||||
|
||||
/* Die Grenze steht in DOGEN — im Feld wie in der Leitung.
|
||||
Diese Seite kennt keinen anderen Wert mehr. */
|
||||
zeile.append(feld('Ab Dogen', eingabe('text', milleAlsWort(st.ab_mille),
|
||||
{ inputMode: 'decimal', className: 'stufe-ab' })));
|
||||
/* ==== WAS EINE STUFE IN GELD BEDEUTET ==================
|
||||
Filipe: „da muss ich auch sehen so viel dogen sind so viel
|
||||
euro. damit ich auch immer weiss was es ist."
|
||||
|
||||
Direkt am Feld und nicht in einer Fußzeile: Wer eine Grenze
|
||||
verschiebt, will im selben Blick sehen, was er verschoben
|
||||
hat. Die Zahl rechnet beim Tippen mit -- eine Umrechnung,
|
||||
die erst nach dem Speichern stimmt, kommt zu spät. */
|
||||
const abFeld = eingabe('text', milleAlsWort(st.ab_mille),
|
||||
{ inputMode: 'decimal', className: 'stufe-ab' });
|
||||
const abPreis = el('span', 'preis', alsPreis(st.ab_mille));
|
||||
abFeld.addEventListener('input', () => {
|
||||
abPreis.textContent = alsPreis(dogenInMille(abFeld.value));
|
||||
});
|
||||
const abKasten = el('label', 'stufe-feld');
|
||||
const abWort = el('span');
|
||||
abWort.append(document.createTextNode('Ab Dogen '));
|
||||
abWort.append(abPreis);
|
||||
abKasten.append(abWort);
|
||||
abKasten.append(abFeld);
|
||||
zeile.append(abKasten);
|
||||
zeile.append(feld('Name', eingabe('text', st.name,
|
||||
{ maxLength: 40, className: 'stufe-name' })));
|
||||
|
||||
@@ -3228,6 +3460,13 @@
|
||||
const k = el('a', 'geben__betrag');
|
||||
k.append(window.Spendenkarte.dogenStueck(b.mille, spendenLage.zeichen,
|
||||
'dogen--nurzahl'));
|
||||
/* ==== DER PREIS STEHT AM KNOPF =========================
|
||||
Filipe: „die leute sollen nur sehen was dogen kosten.
|
||||
sonst wissen die ja nicht wie viel es kosten wird."
|
||||
Klein unter der Zahl: Die Dogen sind die Währung des
|
||||
Hauses, der Preis ist die Auskunft dazu. Andersherum
|
||||
wäre es ein Geldknopf mit Dogen als Beiwerk. */
|
||||
if (b.cent) k.append(el('span', 'geben__preis', window.Spendenkarte.alsGeld(b.cent)));
|
||||
k.href = b.ziel;
|
||||
k.target = '_blank';
|
||||
k.rel = 'noopener noreferrer';
|
||||
@@ -3351,6 +3590,25 @@
|
||||
return Math.round(zahl * 1000);
|
||||
}
|
||||
|
||||
/** Dogen in Geld — oder nichts.
|
||||
*
|
||||
* ==== DIE ERLAUBNIS STECKT IN DEN DATEN, NICHT IN EINEM `if`
|
||||
*
|
||||
* Der Kurs kommt nur für die Leitung mit (`kurs_cent_je_doge`).
|
||||
* Ein Zuschauer hat ihn nicht und kann deshalb GAR KEINEN Preis
|
||||
* ausrechnen -- auch nicht, wenn eine spätere Zeile es versuchte.
|
||||
* Eine Abfrage „darf der das sehen?" in der Oberfläche wäre eine
|
||||
* Regel, die man vergessen kann; eine fehlende Zahl ist eine, die
|
||||
* man nicht vergessen kann.
|
||||
*
|
||||
* Die Kaufknöpfe sind die Ausnahme: Dort schickt der Server den
|
||||
* Betrag ausdrücklich mit, für jeden. */
|
||||
function alsPreis(mille) {
|
||||
const kurs = spendenLage?.kurs_cent_je_doge;
|
||||
if (!kurs) return '';
|
||||
return window.Spendenkarte.alsGeld(Math.round((Number(mille) || 0) * kurs / 1000));
|
||||
}
|
||||
|
||||
/** Tausendstel zurück in das, was im Feld steht. */
|
||||
function milleAlsWort(mille) {
|
||||
return String((Math.round(Number(mille) || 0) / 1000)).replace('.', ',');
|
||||
@@ -3412,6 +3670,7 @@
|
||||
() => sendenSchalten('kamera', !lage.ich.kamera_aus));
|
||||
$('s-mikro').addEventListener('click',
|
||||
() => sendenSchalten('mikro', !lage.ich.mikro_aus));
|
||||
$('s-teilen').addEventListener('click', bildschirmSchalten);
|
||||
|
||||
/* Die Chat-Stufe -- nur fuer die zwei */
|
||||
$('chat-meldungen')?.addEventListener('click', meldungenZeigen);
|
||||
|
||||
@@ -105,6 +105,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
/** Cent als Geld.
|
||||
*
|
||||
* ==== WARUM ES DIESE FUNKTION WIEDER GIBT
|
||||
*
|
||||
* Am 28.09. flog sie raus: „es soll auch nie geld da stehen
|
||||
* sondern Dogen." Das war richtig für alles, was ANZEIGE ist --
|
||||
* Karte, Stream, Chat, Punktestand. Es war falsch für die eine
|
||||
* Stelle, an der jemand KAUFT: Wer auf „0,2 Dogen" drückt, muss
|
||||
* vorher wissen, dass ihn das zwei Euro kostet.
|
||||
*
|
||||
* Sie formatiert nur. Ob überhaupt ein Betrag da ist, entscheidet
|
||||
* der Server -- ein Zuschauer bekommt außerhalb der Kaufknöpfe
|
||||
* keinen. */
|
||||
function alsGeld(cent) {
|
||||
const c = Math.round(Number(cent) || 0);
|
||||
try {
|
||||
return new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency', currency: 'EUR',
|
||||
minimumFractionDigits: c % 100 === 0 ? 0 : 2,
|
||||
}).format(c / 100);
|
||||
} catch {
|
||||
return (c / 100).toFixed(2).replace('.', ',') + ' €';
|
||||
}
|
||||
}
|
||||
|
||||
/** „Doge" oder „Dogen" — die Einzahl gibt es nur bei genau einem. */
|
||||
function dogenWort(mille) {
|
||||
return Math.abs(Math.round(Number(mille) || 0)) === 1000 ? 'Doge' : 'Dogen';
|
||||
@@ -288,7 +313,7 @@
|
||||
}
|
||||
|
||||
window.Spendenkarte = {
|
||||
zeigen, alsDogen, dogenWort, dogenStueck, muenzeFuer,
|
||||
zeigen, alsDogen, dogenWort, dogenStueck, muenzeFuer, alsGeld,
|
||||
/* „dogen" ist keine Zeichnung, aber eine gueltige Vorlage --
|
||||
deshalb steht sie hier dabei und nicht in `VORLAGEN`. */
|
||||
VORLAGEN: ['dogen', ...Object.keys(VORLAGEN)],
|
||||
|
||||
Reference in New Issue
Block a user