Dogen statt Geld -- und die Texte schreiben die Leute selbst
Filipe, 28.09.2026:
"der text der dazu erscheint sollen die leute selber schreiben
koennen. soll auf nicht zu viel aber auch nicht zu wenig
schreiben koennen. aber es sollen personalisierte texte sein von
den leuten selbst."
"mann soll nie die summe sehen sondern die dogen auch mit dem
symbol ... es soll auch nie geld da stehen sondern Dogen."
"ich will dass die den leuten auch als punkte hinzugefuegt werden."
DER TEXT KOMMT VON DEM, DER GIBT
Bisher konnte ihn nur die Leitung tippen; beim Melden schickte der
Zuschauer gar nichts mit. Jetzt stehen nach dem Tippen auf einen
Betrag zwei Felder da: Name auf der Karte (mit dem eigenen Namen
vorausgefuellt) und der eigene Text, bis 140 Zeichen.
140 ist gemessen, nicht geraten: Die Karte steht je nach Stufe sechs
bis elf Sekunden. Bei 140 Zeichen sind das zwei bis drei Zeilen -- die
fasst man im Vorbeischauen. Bei 200 wird die Schrift auf einer kleinen
Karte so eng, dass niemand mehr hinsieht, und ein Gruss, den keiner
liest, ist schlechter als ein kurzer. Der Zaehler erscheint erst ab
30 uebrigen Zeichen; einer, der von Anfang an mitlaeuft, macht aus
einem Gruss eine Aufgabe.
UND EINE SCHRANKE DAVOR. Der Text kommt von einem Fremden und steht
gleich im Livestream. Er laeuft ohnehin durch die Bestaetigung -- neu
ist, dass die Leitung ihn dort AENDERN kann. Ohne das bliebe nur "ganz
ablehnen", und dann faellt wegen eines Wortes eine echte Spende unter
den Tisch.
NIE WIEDER GELD AUF DEM BILDSCHIRM
Ein Doge sind zehn Euro (Filipes Angabe "1 euro sind 0,10 dogen",
rueckgefragt und bestaetigt -- zwischen den beiden Lesarten liegt der
Faktor 100). Gerechnet wird in Tausendsteln, nie in Kommazahlen.
Das Entscheidende ist nicht die Beschriftung: DER BROWSER BEKOMMT
KEINEN EURO-BETRAG MEHR, auch nicht verborgen im JSON. Der Kurs steht
einmal auf dem Server. Was nicht gesendet wird, kann an keiner Stelle
versehentlich erscheinen, und niemand muss daran denken. Gemessen:
38 Felder im Stand, kein Geldfeld, kein Eurozeichen, auch nicht auf
der Buehnentafel. Der einzige Ort, an dem noch ein Euro entsteht, ist
die PayPal-Adresse -- weil PayPal ihn braucht.
DIE PUNKTE: EIN BUCH, KEIN ZAEHLER
Ein Feld `dogen` an der Person waere kuerzer gewesen -- und die zweite
Antwort auf dieselbe Frage. Der Stand IST die Summe der Buchungen, und
eine Summe kann sich nicht von ihren Posten entfernen. Weil Filipe
spaeter etwas daran haengen will ("spezielle sachen ... wo mit diesen
dogpunkten zu tun hat"), steht neben jeder Zeile ein Grund und ein
Datum: Ein Zaehler, der kleiner wird, laesst keine Frage mehr
beantworten.
Dass nie doppelt gutgeschrieben wird, entscheidet ein eindeutiger
Index in der Datenbank und keine Bedingung im Programm -- "nochmal
zeigen" und ein wiederholter Strom koennen es damit gar nicht
ausloesen.
Ohne Person keine Punkte: Eine von Hand eingetragene Spende hat oft
nur einen Vornamen auf dem Handy. Daraus eine Person zu RATEN waere
schlimmer als keine Gutschrift -- deshalb waehlt die Leitung sie aus,
und tut sie es nicht, laeuft die Karte trotzdem.
DAS SYMBOL IST VORBEREITET
Filipe: "die symbole schick ich dir spaeter." Es wird im Regiepult
hochgeladen, ohne Deploy -- bis dahin steht eine gezeichnete Muenze
da. Es liegt bei den Stufenbildern, weil das der einzige Weg ist, der
Bilder OHNE Anmeldung ausliefert; sonst fehlte es ausgerechnet im
Stream.
=======================================================================
UND EINE REPARATUR AN DEM, WAS HEUTE MITTAG LIVE GING
Seit 3fedeea7 war der Buehnenmodus (reaktion.html?nur=buehne) kaputt:
Leinwand null Pixel hoch, im Stream ein schwarzes Bild. Das ist die
Fensterquelle fuer den Fall, dass Gaeste im Bild sind.
Ursache: Teil A hat die Zeilen des Saals festgenagelt (#teil-live auf
Zeile 2). Im Buehnenmodus stand aber seit jeher eine eigene Regel, die
dem Saal nur EINE Zeile gibt -- das Video landete in einer impliziten
Zeile, die sich nach ihrem Inhalt bemisst, waehrend die Leinwand ihre
Hoehe aus der Zeile nimmt. Beide warten aufeinander, heraus kommt
null.
Das ist heute der VIERTE Fall von "zwei Regeln fuer dieselbe Frage"
(Tafeln, Saalzeilen, Kamerabreite, Buehnenmodus). Die Loesung ist
jedes Mal dieselbe: nicht die zweite Regel richtig stellen, sondern
sie abschaffen.
DREI DINGE, DIE DARAN LEHRREICH SIND:
1. MEINE EIGENE PRUEFUNG WAR GRUEN UND WERTLOS. Ich hatte nach Teil A
extra geprueft: "genau eine Regel bestimmt die Zeilen des Saals".
Sie verlangte, dass die Zeile mit `.saal` BEGINNT -- und hat
`body[data-nur="buehne"] .saal { … }` deshalb nie gesehen. Jetzt
zaehlt sie jede Regel, in deren Auswahl `.saal` vorkommt, mit einer
Gegenprobe, die eine eingeschobene zweite wirklich findet.
2. EINE SEITE MIT ZWEI ANSICHTEN BRAUCHT BEIDE MESSUNGEN. Nach Teil A
liefen `pruef-buehne` (Schnittstelle) und `mess-reaktion` (normale
Ansicht). `mess-buehne` -- die einzige, die diese Ansicht
ueberhaupt oeffnet -- lief nicht.
3. EIN PYTHON-SKRIPT, DAS ERST AM ENDE SCHREIBT, MELDET "ok" FUER
AENDERUNGEN, DIE NIE ANKOMMEN. Eine fehlgeschlagene Zusicherung hat
einen ganzen Stapel verworfen, obwohl die erste Aenderung schon
bestaetigt war. Die Messung meldete daraufhin "Auf der Karte steht:
undefined" -- kein Fehler im Code, sondern eine Zeile, die nie
geschrieben wurde. Gefunden hat es die Messung, nicht das Lesen.
pruef-spenden 136/0 (vorher 95) - pruef-reaktion 321/0 -
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.',
|
||||
person_unbekannt:
|
||||
'Diese Person gibt es hier nicht. Wähl jemanden aus der Liste '
|
||||
+ 'oder lass das Feld leer.',
|
||||
kameragroesse_unklar:
|
||||
'Diese Größe gibt es nicht. Möglich sind 0,6-fach bis 2-fach.',
|
||||
ecke_unklar:
|
||||
@@ -229,11 +232,12 @@
|
||||
zu_viele_stufen:
|
||||
'Mehr als sechs Stufen werden unübersichtlich. Nimm eine weg, dann geht es.',
|
||||
stufe_betrag_unklar:
|
||||
'Bei einer Stufe ergibt der Betrag keinen Sinn. Schreib ihn in Euro, zum Beispiel 5 oder 7,50.',
|
||||
'Bei einer Stufe ergibt die Zahl keinen Sinn. Schreib sie in Dogen, '
|
||||
+ 'zum Beispiel 0,1 oder 2,5.',
|
||||
stufe_name_fehlt:
|
||||
'Jede Stufe braucht einen Namen – er steht auf der Karte.',
|
||||
stufe_doppelt:
|
||||
'Zwei Stufen fangen beim selben Betrag an. Dann wäre nicht entschieden, welche gilt.',
|
||||
'Zwei Stufen fangen bei derselben Zahl an. Dann wäre nicht entschieden, welche gilt.',
|
||||
vorlage_unbekannt:
|
||||
'Dieses Zeichen gibt es nicht. Wähl eines aus der Liste.',
|
||||
farbe_unklar:
|
||||
@@ -250,8 +254,8 @@
|
||||
'Es liegt kein zweites Video bereit. Trag eins unter „Sendung" ein, '
|
||||
+ 'dann kannst du hin und her wechseln.',
|
||||
betrag_unklar:
|
||||
'Dieser Betrag ergibt keinen Sinn. Schreib ihn in Euro, '
|
||||
+ 'zum Beispiel 5 oder 7,50.',
|
||||
'Diese Zahl ergibt keinen Sinn. Schreib sie in Dogen, '
|
||||
+ 'zum Beispiel 0,5 oder 2,5.',
|
||||
name_fehlt:
|
||||
'Ohne Namen keine Karte – er steht ja darauf.',
|
||||
nicht_offen:
|
||||
|
||||
+261
-44
@@ -1679,6 +1679,8 @@
|
||||
/* ---- Gestaltung ---- */
|
||||
$('stufe-neu').addEventListener('click', stufeDazu);
|
||||
$('stufen-sichern').addEventListener('click', stufenSichern);
|
||||
$('zeichen-datei').addEventListener('change', (e) => zeichenHoch(e.target));
|
||||
$('zeichen-weg').addEventListener('click', zeichenWeg);
|
||||
|
||||
/* ---- Spenden ---- */
|
||||
$('sp-zeigen').addEventListener('click', spendeEintragen);
|
||||
@@ -2380,16 +2382,46 @@
|
||||
}
|
||||
for (const k of offen) {
|
||||
const zeile = el('li', 'spendenzeile');
|
||||
zeile.append(el('strong', 'spendenzeile__betrag',
|
||||
window.Spendenkarte.alsGeld(k.betrag_cent, k.waehrung)));
|
||||
const betrag = el('strong', 'spendenzeile__betrag');
|
||||
betrag.append(window.Spendenkarte.dogenStueck(k.dogen_mille, k.zeichen));
|
||||
zeile.append(betrag);
|
||||
|
||||
/* ==== DIE SCHRANKE VOR DEM STREAM =========================
|
||||
|
||||
Der Text kommt jetzt von dem, der gibt (Filipe: „es sollen
|
||||
personalisierte texte sein von den leuten selbst") — und
|
||||
damit steht zum ersten Mal ein fremder Satz kurz davor, im
|
||||
Livestream zu erscheinen.
|
||||
|
||||
Er läuft ohnehin durch diese Bestätigung. Neu ist, dass er
|
||||
sich HIER ÄNDERN lässt: Ohne das bliebe nur „ganz
|
||||
ablehnen", und dann fiele wegen eines einzigen Wortes eine
|
||||
echte Spende unter den Tisch. Ein Feld ist die mildere und
|
||||
die schnellere Antwort. */
|
||||
const mitte = el('div', 'spendenzeile__mitte');
|
||||
mitte.append(el('span', 'spendenzeile__wer', k.name || 'Jemand'));
|
||||
if (k.gruss) mitte.append(el('span', 'spendenzeile__gruss', k.gruss));
|
||||
const wer = document.createElement('input');
|
||||
wer.type = 'text';
|
||||
wer.className = 'spendenzeile__feld';
|
||||
wer.maxLength = spendenLage.name_max || 40;
|
||||
wer.value = k.name || '';
|
||||
wer.setAttribute('aria-label', 'Name auf der Karte');
|
||||
mitte.append(wer);
|
||||
|
||||
const text = document.createElement('input');
|
||||
text.type = 'text';
|
||||
text.className = 'spendenzeile__feld spendenzeile__feld--gruss';
|
||||
text.maxLength = spendenLage.gruss_max || 140;
|
||||
text.value = k.gruss || '';
|
||||
text.placeholder = 'Kein Text dabei';
|
||||
text.setAttribute('aria-label', 'Text auf der Karte');
|
||||
mitte.append(text);
|
||||
zeile.append(mitte);
|
||||
|
||||
const ja = el('button', 'spendenzeile__ja', 'Stimmt – zeigen');
|
||||
ja.type = 'button';
|
||||
ja.addEventListener('click', () => spendeEntscheiden(k.id, true));
|
||||
ja.addEventListener('click', () => spendeEntscheiden(k.id, true, {
|
||||
name: wer.value.trim(), gruss: text.value.trim(),
|
||||
}));
|
||||
const nein = el('button', 'spendenzeile__nein', 'Stimmt nicht');
|
||||
nein.type = 'button';
|
||||
nein.addEventListener('click', () => spendeEntscheiden(k.id, false));
|
||||
@@ -2401,8 +2433,9 @@
|
||||
letzte.textContent = '';
|
||||
for (const k of (spendenLage.letzte || [])) {
|
||||
const zeile = el('li', 'spendenzeile');
|
||||
zeile.append(el('strong', 'spendenzeile__betrag',
|
||||
window.Spendenkarte.alsGeld(k.betrag_cent, k.waehrung)));
|
||||
const betrag = el('strong', 'spendenzeile__betrag');
|
||||
betrag.append(window.Spendenkarte.dogenStueck(k.dogen_mille, k.zeichen));
|
||||
zeile.append(betrag);
|
||||
const mitte = el('div', 'spendenzeile__mitte');
|
||||
mitte.append(el('span', 'spendenzeile__wer', k.name || 'Jemand'));
|
||||
if (k.stufe?.name) mitte.append(el('span', 'spendenzeile__gruss', k.stufe.name));
|
||||
@@ -2421,6 +2454,52 @@
|
||||
letzte.append(el('li', 'spendenliste__leer', 'Noch nichts gezeigt.'));
|
||||
}
|
||||
|
||||
/* ---- Wer wie viele Dogen hat ----
|
||||
Nur die Leitung sieht das. Wer nichts hat, steht nicht drin --
|
||||
eine Liste mit lauter Nullen ist keine Auskunft, sondern eine
|
||||
Personenliste mit einer Spalte daneben. */
|
||||
const staende = $('sp-staende');
|
||||
staende.textContent = '';
|
||||
for (const p of (spendenLage.staende || [])) {
|
||||
const zeile = el('li', 'dogenzeile');
|
||||
zeile.append(el('span', 'dogenzeile__wer', p.name));
|
||||
const wert = el('strong', 'dogenzeile__wert');
|
||||
wert.append(window.Spendenkarte.dogenStueck(p.mille, spendenLage.zeichen));
|
||||
zeile.append(wert);
|
||||
staende.append(zeile);
|
||||
}
|
||||
if (!(spendenLage.staende || []).length) {
|
||||
staende.append(el('li', 'spendenliste__leer',
|
||||
'Noch niemand hat Dogen. Sie kommen dazu, sobald eine Spende '
|
||||
+ 'einer Person zugeordnet ist.'));
|
||||
}
|
||||
|
||||
/* ---- Wem die nächste Handeintragung gutgeschrieben wird ----
|
||||
Die Auswahl wird nur neu gebaut, wenn sich die Namen geändert
|
||||
haben: `spendenPultZeichnen()` läuft bei jeder Meldung, und
|
||||
wer gerade eine Person ausgewählt hat, verlöre sie sonst
|
||||
mitten im Eintragen. */
|
||||
const wem = $('sp-wem');
|
||||
const namen = (spendenLage.personen || []).map((p) => `${p.id}:${p.name}`).join('|');
|
||||
if (wem.dataset.stand !== namen) {
|
||||
wem.dataset.stand = namen;
|
||||
const vorher = wem.value;
|
||||
wem.textContent = '';
|
||||
const leer = document.createElement('option');
|
||||
leer.value = '';
|
||||
leer.textContent = 'Niemandem';
|
||||
wem.append(leer);
|
||||
for (const p of (spendenLage.personen || [])) {
|
||||
const o = document.createElement('option');
|
||||
o.value = String(p.id);
|
||||
o.textContent = p.name;
|
||||
wem.append(o);
|
||||
}
|
||||
if (vorher) wem.value = vorher;
|
||||
}
|
||||
|
||||
zeichenZeichnen();
|
||||
|
||||
$('sp-hinweis').textContent = spendenLage.paypal
|
||||
? 'PayPal meldet uns nichts von selbst — die Karte läuft, wenn du sie '
|
||||
+ 'einträgst oder eine Meldung bestätigst.'
|
||||
@@ -2428,7 +2507,7 @@
|
||||
+ 'Ohne ihn gibt es hier keine Spendenknöpfe.';
|
||||
}
|
||||
|
||||
async function spendeEntscheiden(id, ja) {
|
||||
async function spendeEntscheiden(id, ja, felder) {
|
||||
/* BEIDE WEGE STEHEN AUSGESCHRIEBEN DA. Aus einer Verzweigung
|
||||
zusammengesetzt liessen sie sich nicht nachpruefen -- und ein
|
||||
Tippfehler im selteneren Zweig („ablehnen") faellt erst auf,
|
||||
@@ -2436,23 +2515,37 @@
|
||||
const weg = ja
|
||||
? `/workspace/api/spenden/${id}/bestaetigen`
|
||||
: `/workspace/api/spenden/${id}/ablehnen`;
|
||||
const a = await hole(weg, { method: 'POST' });
|
||||
const a = await hole(weg, felder
|
||||
? {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(felder),
|
||||
}
|
||||
: { method: 'POST' });
|
||||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||||
spendenHolen();
|
||||
}
|
||||
|
||||
async function spendeEintragen() {
|
||||
const cent = eurosInCent($('sp-betrag').value);
|
||||
if (!cent) { sagFehler('Erst einen Betrag eintragen.'); return; }
|
||||
const mille = dogenInMille($('sp-betrag').value);
|
||||
if (!mille) { sagFehler('Erst eine Zahl in Dogen eintragen.'); return; }
|
||||
const name = $('sp-name').value.trim();
|
||||
if (!name) { sagFehler('Wer hat gegeben? Der Name steht auf der Karte.'); return; }
|
||||
const wem = $('sp-wem').value;
|
||||
const a = await hole('/workspace/api/spenden', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ betrag_cent: cent, name, gruss: $('sp-gruss').value.trim() }),
|
||||
body: JSON.stringify({
|
||||
dogen_mille: mille, name, gruss: $('sp-gruss').value.trim(),
|
||||
/* Nur mitschicken, wenn jemand ausgewählt ist. Eine leere
|
||||
Kennung wäre eine Angabe über eine Person, die niemand
|
||||
gemacht hat. */
|
||||
...(wem ? { person_id: Number(wem) } : {}),
|
||||
}),
|
||||
});
|
||||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||||
$('sp-betrag').value = ''; $('sp-name').value = ''; $('sp-gruss').value = '';
|
||||
$('sp-wem').value = '';
|
||||
spendenHolen();
|
||||
}
|
||||
|
||||
@@ -2696,6 +2789,17 @@
|
||||
} catch { /* eine kaputte Meldung darf den Strom nicht reissen */ }
|
||||
});
|
||||
|
||||
/* MEIN EIGENER DOGEN-STAND. Er kommt als eigene Meldung und nur
|
||||
an mich -- eine Zahl, die niemanden sonst etwas angeht. */
|
||||
strom.addEventListener('dogen', (e) => {
|
||||
try {
|
||||
const d = JSON.parse(e.data);
|
||||
if (!spendenLage) return;
|
||||
spendenLage.ich = { ...(spendenLage.ich || {}), dogen_mille: d.mille };
|
||||
standZeigen();
|
||||
} catch { /* eine kaputte Meldung darf den Strom nicht reissen */ }
|
||||
});
|
||||
|
||||
strom.addEventListener('reaktion_signal', (e) => {
|
||||
try {
|
||||
const d = JSON.parse(e.data);
|
||||
@@ -2836,10 +2940,10 @@
|
||||
return e;
|
||||
};
|
||||
|
||||
/* Der Betrag steht in EURO im Feld und in CENT in der Leitung.
|
||||
Gerechnet wird nie mit dem, was hier steht. */
|
||||
zeile.append(feld('Ab', eingabe('text', (st.ab_cent / 100)
|
||||
.toString().replace('.', ','), { inputMode: 'decimal', className: 'stufe-ab' })));
|
||||
/* 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' })));
|
||||
zeile.append(feld('Name', eingabe('text', st.name,
|
||||
{ maxLength: 40, className: 'stufe-name' })));
|
||||
|
||||
@@ -2922,9 +3026,9 @@
|
||||
|
||||
function stufeDazu() {
|
||||
if (!stufen || stufen.liste.length >= stufen.gestaltung.stufen_max) return;
|
||||
const hoechste = stufen.liste.reduce((a, b) => Math.max(a, b.ab_cent), 0);
|
||||
const hoechste = stufen.liste.reduce((a, b) => Math.max(a, b.ab_mille), 0);
|
||||
stufen.liste.push({
|
||||
id: 0, ab_cent: hoechste ? hoechste * 2 : 100, name: 'Neue Stufe',
|
||||
id: 0, ab_mille: hoechste ? hoechste * 2 : 100, name: 'Neue Stufe',
|
||||
vorlage: 'stern', bild: '', farbe: '#8ec9ff', dauer_ms: 7000, groesse: 1,
|
||||
});
|
||||
stufenZeichnen();
|
||||
@@ -2935,7 +3039,7 @@
|
||||
function stufenAusFeldern() {
|
||||
return [...$('stufen').children].map((zeile, i) => ({
|
||||
id: stufen.liste[i]?.id || 0,
|
||||
ab_cent: eurosInCent(zeile.querySelector('.stufe-ab').value),
|
||||
ab_mille: dogenInMille(zeile.querySelector('.stufe-ab').value),
|
||||
name: zeile.querySelector('.stufe-name').value.trim(),
|
||||
vorlage: zeile.querySelector('.stufe-vorlage').value,
|
||||
farbe: zeile.querySelector('.stufe-farbe').value,
|
||||
@@ -2993,17 +3097,60 @@
|
||||
const a = await hole('/workspace/api/spenden/probe', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ betrag_cent: stufe.ab_cent }),
|
||||
body: JSON.stringify({ dogen_mille: stufe.ab_mille }),
|
||||
});
|
||||
if (!a.ok) melde(await a.json().catch(() => null), 'Das ging nicht.');
|
||||
}
|
||||
|
||||
/* ==== DAS DOGEN-ZEICHEN ==========================================
|
||||
|
||||
Filipe: „die symbole schick ich dir später. bereite jetzt alles
|
||||
vor."
|
||||
|
||||
Gezeigt wird immer dasselbe Stück wie überall sonst — mit einer
|
||||
Zahl daneben, damit man sieht, wie es neben einer Ziffer
|
||||
aussieht. Ein Symbol allein auf weißem Grund sagt darüber
|
||||
nichts. */
|
||||
function zeichenZeichnen() {
|
||||
const schau = $('zeichen-schau');
|
||||
if (!schau || !spendenLage) return;
|
||||
schau.textContent = '';
|
||||
schau.append(window.Spendenkarte.dogenStueck(2500, spendenLage.zeichen));
|
||||
$('zeichen-weg').hidden = !spendenLage.zeichen;
|
||||
$('zeichen-hoch').firstChild.textContent = spendenLage.zeichen
|
||||
? 'Anderes Zeichen ' : 'Zeichen hochladen ';
|
||||
}
|
||||
|
||||
async function zeichenHoch(feld) {
|
||||
const datei = feld.files && feld.files[0];
|
||||
if (!datei) return;
|
||||
feld.value = '';
|
||||
const a = await hole('/workspace/api/spenden/zeichen', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': datei.type || 'application/octet-stream' },
|
||||
body: datei,
|
||||
});
|
||||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das Bild ging nicht.'); return; }
|
||||
/* FRISCH HOLEN UND NICHT NUR HIER EINSETZEN. Das Zeichen steht an
|
||||
fünf Stellen gleichzeitig — auf den Karten, in beiden Listen,
|
||||
an den Knöpfen und beim eigenen Stand. Sie alle einzeln
|
||||
nachzuziehen wäre die Gelegenheit, eine zu vergessen. */
|
||||
spendenHolen();
|
||||
}
|
||||
|
||||
async function zeichenWeg() {
|
||||
const a = await hole('/workspace/api/spenden/zeichen', { method: 'DELETE' });
|
||||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||||
spendenHolen();
|
||||
}
|
||||
|
||||
async function spendenHolen() {
|
||||
try {
|
||||
const a = await hole('/workspace/api/spenden');
|
||||
if (!a.ok) return;
|
||||
spendenLage = await a.json();
|
||||
gebenZeichnen();
|
||||
standZeigen();
|
||||
if (lage && lage.ich.host) spendenPultZeichnen();
|
||||
/* DIE STUFENLEITER NUR BEIM ERSTEN MAL AUS DER LEITUNG NEHMEN.
|
||||
Wer gerade an den Feldern tippt und dabei eine Spende
|
||||
@@ -3033,11 +3180,13 @@
|
||||
const reihe = $('geben-betraege');
|
||||
if (!reihe.children.length) {
|
||||
for (const b of (spendenLage.knoepfe || [])) {
|
||||
const k = el('a', 'geben__betrag', window.Spendenkarte.alsGeld(b.cent, 'EUR'));
|
||||
const k = el('a', 'geben__betrag');
|
||||
k.append(window.Spendenkarte.dogenStueck(b.mille, spendenLage.zeichen,
|
||||
'dogen--nurzahl'));
|
||||
k.href = b.ziel;
|
||||
k.target = '_blank';
|
||||
k.rel = 'noopener noreferrer';
|
||||
k.addEventListener('click', () => nachgefragt(b.cent));
|
||||
k.addEventListener('click', () => nachgefragt(b.mille));
|
||||
reihe.append(k);
|
||||
}
|
||||
const frei = $('geben-frei');
|
||||
@@ -3047,52 +3196,119 @@
|
||||
}
|
||||
}
|
||||
|
||||
/** Nach dem Tippen auf einen Betrag: die eine Frage. */
|
||||
function nachgefragt(cent) {
|
||||
gemeldeterBetrag = cent;
|
||||
/** Nach dem Tippen auf einen Betrag: die eine Frage — und das
|
||||
* Feld für den eigenen Text.
|
||||
*
|
||||
* ==== WARUM DER TEXT ERST HIER KOMMT
|
||||
*
|
||||
* Er könnte auch vor dem Tippen dastehen. Dann schriebe ihn aber
|
||||
* auch, wer danach gar nicht spendet — und die Leitung bekäme
|
||||
* Texte ohne Spenden zu sehen. Hier steht er an der einzigen
|
||||
* Stelle, an der er sicher gemeint ist. */
|
||||
function nachgefragt(mille) {
|
||||
gemeldeterBetrag = mille;
|
||||
$('geben-danke').hidden = true;
|
||||
$('geben-nach').hidden = false;
|
||||
$('geben-frage').textContent = cent
|
||||
? `Hat es geklappt? Dann sag es — ${window.Spendenkarte.alsGeld(cent, 'EUR')}.`
|
||||
: 'Hat es geklappt? Dann sag kurz, wie viel.';
|
||||
$('geben-melden').textContent = cent
|
||||
? `Ja, ${window.Spendenkarte.alsGeld(cent, 'EUR')}` : 'Ja, melden';
|
||||
const wieviel = mille
|
||||
? `${window.Spendenkarte.alsDogen(mille)} ${window.Spendenkarte.dogenWort(mille)}`
|
||||
: '';
|
||||
$('geben-frage').textContent = mille
|
||||
? `Hat es geklappt? Dann sag es — ${wieviel}.`
|
||||
: 'Hat es geklappt? Dann sag kurz, wie viele Dogen.';
|
||||
$('geben-melden').textContent = mille ? `Ja, ${wieviel}` : 'Ja, melden';
|
||||
/* Der eigene Name steht schon drin — wer ihn so will, muss
|
||||
nichts tun. */
|
||||
const nf = $('geben-name');
|
||||
if (!nf.value && lage?.ich?.name) nf.value = lage.ich.name;
|
||||
restZeigen();
|
||||
nf.focus();
|
||||
}
|
||||
|
||||
/** Wie viel noch übrig ist.
|
||||
*
|
||||
* DIE ZAHL STEHT ERST DA, WENN ES ENG WIRD. Ein Zähler, der von
|
||||
* Anfang an mitläuft, macht aus einem Gruß eine Aufgabe. Ab
|
||||
* dreißig übrigen Zeichen ist er eine Hilfe, vorher eine
|
||||
* Aufsicht. */
|
||||
function restZeigen() {
|
||||
const feld = $('geben-text');
|
||||
const rest = (feld.maxLength || 140) - feld.value.length;
|
||||
const wort = $('geben-rest');
|
||||
wort.textContent = rest <= 30 ? `noch ${rest}` : '';
|
||||
wort.dataset.eng = rest <= 10 ? 'ja' : 'nein';
|
||||
}
|
||||
|
||||
/** Was ich selbst gesammelt habe.
|
||||
*
|
||||
* Filipe: „ich will dass die den leuten auch als punkte
|
||||
* hinzugefügt werden."
|
||||
*
|
||||
* NUR WENN ETWAS DA IST. Eine Null zu zeigen ist keine Auskunft,
|
||||
* sondern eine Aufforderung — und die gehört nicht neben einen
|
||||
* Spendenknopf. */
|
||||
function standZeigen() {
|
||||
const p = $('geben-stand');
|
||||
if (!p) return;
|
||||
const mille = spendenLage?.ich?.dogen_mille || 0;
|
||||
p.textContent = '';
|
||||
p.hidden = mille <= 0;
|
||||
if (mille <= 0) return;
|
||||
p.append(document.createTextNode('Du hast '));
|
||||
p.append(window.Spendenkarte.dogenStueck(mille, spendenLage.zeichen));
|
||||
}
|
||||
|
||||
async function spendeMelden() {
|
||||
let cent = gemeldeterBetrag;
|
||||
if (!cent) {
|
||||
let mille = gemeldeterBetrag;
|
||||
if (!mille) {
|
||||
const wort = window.frageNachText
|
||||
? await window.frageNachText({ titel: 'Wie viel war es?', knopf: 'Melden' })
|
||||
: prompt('Wie viel war es? (in Euro)');
|
||||
cent = eurosInCent(wort);
|
||||
if (!cent) return;
|
||||
? await window.frageNachText({ titel: 'Wie viele Dogen waren es?', knopf: 'Melden' })
|
||||
: prompt('Wie viele Dogen waren es?');
|
||||
mille = dogenInMille(wort);
|
||||
if (!mille) return;
|
||||
}
|
||||
try {
|
||||
const a = await hole('/workspace/api/spenden/melden', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ betrag_cent: cent }),
|
||||
body: JSON.stringify({
|
||||
dogen_mille: mille,
|
||||
name: $('geben-name').value.trim(),
|
||||
gruss: $('geben-text').value.trim(),
|
||||
}),
|
||||
});
|
||||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging gerade nicht.'); return; }
|
||||
$('geben-nach').hidden = true;
|
||||
$('geben-text').value = '';
|
||||
restZeigen();
|
||||
const d = $('geben-danke');
|
||||
d.hidden = false;
|
||||
d.textContent = 'Danke! Sobald DogFather es bestätigt, steht es im Bild.';
|
||||
d.textContent = 'Danke! Sobald DogFather es bestätigt, steht dein Text im Bild.';
|
||||
} catch { sagFehler('Das ging gerade nicht.'); }
|
||||
}
|
||||
|
||||
/** „5", „5,50", „5.50", „5 €" — alles dasselbe.
|
||||
/** „0,5", „0.5", „1", „2,5 Dogen" — alles dasselbe.
|
||||
*
|
||||
* GERECHNET WIRD IN CENT. Eine Kommazahl für Geld ist der
|
||||
* zuverlässigste Weg zu einem Betrag, der um einen Cent daneben
|
||||
* liegt — und bei Geld fällt das irgendwann jemandem auf. */
|
||||
function eurosInCent(wort) {
|
||||
* ==== GERECHNET WIRD IN TAUSENDSTELN
|
||||
*
|
||||
* Eine Kommazahl ist der zuverlässigste Weg zu einem Wert, der um
|
||||
* ein Tausendstel danebenliegt — und bei etwas, das Leute
|
||||
* sammeln, fällt das irgendwann dem auf, der am meisten hat.
|
||||
*
|
||||
* UND HIER STEHT KEIN KURS. Diese Datei weiß nicht, was ein Doge
|
||||
* in Geld wert ist, und soll es nicht wissen: Der Kurs steht
|
||||
* einmal auf dem Server. Was hier hereingeht und hinausgeht, sind
|
||||
* Dogen. */
|
||||
function dogenInMille(wort) {
|
||||
const t = String(wort || '').replace(/[^0-9,.]/g, '').replace(',', '.');
|
||||
if (!t) return 0;
|
||||
const zahl = Number(t);
|
||||
if (!Number.isFinite(zahl) || zahl <= 0) return 0;
|
||||
return Math.round(zahl * 100);
|
||||
return Math.round(zahl * 1000);
|
||||
}
|
||||
|
||||
/** Tausendstel zurück in das, was im Feld steht. */
|
||||
function milleAlsWort(mille) {
|
||||
return String((Math.round(Number(mille) || 0) / 1000)).replace('.', ',');
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
@@ -3144,6 +3360,7 @@
|
||||
/* Spenden melden */
|
||||
$('geben-melden').addEventListener('click', spendeMelden);
|
||||
$('geben-abbruch').addEventListener('click', () => { $('geben-nach').hidden = true; });
|
||||
$('geben-text').addEventListener('input', restZeigen);
|
||||
|
||||
/* Kamera und Mikro -- fuer jeden, der sendet */
|
||||
$('s-kamera').addEventListener('click',
|
||||
|
||||
@@ -63,22 +63,90 @@
|
||||
return svg;
|
||||
}
|
||||
|
||||
/** Betrag aus Cent in einen lesbaren Text.
|
||||
/* ==== DAS DOGEN-ZEICHEN ==========================================
|
||||
|
||||
Filipe: „die dogen auch mit dem symbol, die symbole schick ich
|
||||
dir später."
|
||||
|
||||
Bis sein Symbol da ist, steht hier eine gezeichnete Münze mit
|
||||
einer Pfote darin. GEZEICHNET UND NICHT ALS BILDDATEI, aus dem
|
||||
gleichen Grund wie bei den Stufenzeichen: Sie muss in jeder
|
||||
Farbe funktionieren und in jeder Größe scharf bleiben.
|
||||
|
||||
Ein leerer Platzhalter wäre die schlechtere Zwischenlösung —
|
||||
man hält ihn für kaputt und sucht den Fehler. */
|
||||
const ZEICHEN = '<circle cx="32" cy="32" r="27" fill="none" stroke-width="4"/>'
|
||||
+ '<circle cx="23" cy="25" r="4" stroke="none"/>'
|
||||
+ '<circle cx="32.5" cy="21.5" r="4.5" stroke="none"/>'
|
||||
+ '<circle cx="42" cy="25" r="4" stroke="none"/>'
|
||||
+ '<path stroke="none" d="M32.5 30c5.5 0 9.5 4.4 9.5 8.2s-4 5.3-9.5 5.3'
|
||||
+ '-9.5-1.5-9.5-5.3S27 30 32.5 30z"/>';
|
||||
|
||||
/** Die Zahl in Dogen — ohne Wort, ohne Zeichen.
|
||||
*
|
||||
* GERECHNET WIRD IN CENT, FORMATIERT ERST HIER. Kommazahlen sind
|
||||
* bei Geld die Quelle stiller Fehler; der einzige Ort, an dem ein
|
||||
* Komma auftauchen darf, ist der Bildschirm. */
|
||||
function alsGeld(cent, waehrung) {
|
||||
* ==== GERECHNET WIRD IN TAUSENDSTELN, FORMATIERT ERST HIER
|
||||
*
|
||||
* Diese Datei kennt den Kurs NICHT und soll ihn nicht kennen. Was
|
||||
* hereinkommt, sind Tausendstel Dogen; der Euro dahinter bleibt
|
||||
* auf dem Server. So kann hier gar nicht versehentlich Geld
|
||||
* erscheinen — Filipe: „es soll auch nie geld da stehen."
|
||||
*
|
||||
* HÖCHSTENS ZWEI NACHKOMMASTELLEN. Drei wären beim heutigen Kurs
|
||||
* exakt, aber „0,155 Dogen" liest niemand in sechs Sekunden. Der
|
||||
* PUNKTESTAND wird trotzdem aus den genauen Tausendsteln gerechnet
|
||||
* und nicht aus diesen gerundeten Zahlen — sonst liefe die Summe
|
||||
* mit jeder Spende ein Stück von den Posten weg. */
|
||||
function alsDogen(mille) {
|
||||
const m = Math.round(Number(mille) || 0);
|
||||
try {
|
||||
return new Intl.NumberFormat('de-DE', {
|
||||
style: 'currency', currency: waehrung || 'EUR',
|
||||
minimumFractionDigits: cent % 100 === 0 ? 0 : 2,
|
||||
}).format(cent / 100);
|
||||
return new Intl.NumberFormat('de-DE', { maximumFractionDigits: 2 }).format(m / 1000);
|
||||
} catch {
|
||||
return (cent / 100).toFixed(2).replace('.', ',') + ' ' + (waehrung || 'EUR');
|
||||
return String(m / 1000).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';
|
||||
}
|
||||
|
||||
/** Zeichen + Zahl + Wort als ein Stück.
|
||||
*
|
||||
* AN EINER STELLE GEBAUT. Die Zahl steht auf der Karte, in zwei
|
||||
* Listen im Pult, an den Spendenknöpfen und beim eigenen Stand.
|
||||
* Fünfmal zusammengesetzt hieße: Beim nächsten Mal sieht eine
|
||||
* davon anders aus, und gemerkt wird es im Livestream. */
|
||||
function dogenStueck(mille, quelle, klasse) {
|
||||
const k = el('span', 'dogen' + (klasse ? ' ' + klasse : ''));
|
||||
if (quelle) {
|
||||
const b = document.createElement('img');
|
||||
b.className = 'dogen__zeichen';
|
||||
b.src = quelle;
|
||||
b.alt = '';
|
||||
/* Lädt das hochgeladene Zeichen nicht, tritt die Zeichnung
|
||||
wieder ein. Ein fehlendes Bild neben einer Zahl sieht aus
|
||||
wie ein Fehler in der Zahl. */
|
||||
b.addEventListener('error', () => { b.replaceWith(gezeichnet()); });
|
||||
k.append(b);
|
||||
} else {
|
||||
k.append(gezeichnet());
|
||||
}
|
||||
k.append(el('span', 'dogen__zahl', alsDogen(mille)));
|
||||
k.append(el('span', 'dogen__wort', dogenWort(mille)));
|
||||
return k;
|
||||
}
|
||||
|
||||
function gezeichnet() {
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
svg.setAttribute('viewBox', '0 0 64 64');
|
||||
svg.setAttribute('aria-hidden', 'true');
|
||||
svg.setAttribute('class', 'dogen__zeichen');
|
||||
svg.setAttribute('fill', 'currentColor');
|
||||
svg.setAttribute('stroke', 'currentColor');
|
||||
svg.innerHTML = ZEICHEN;
|
||||
return svg;
|
||||
}
|
||||
|
||||
const schlange = [];
|
||||
let laeuft = false;
|
||||
|
||||
@@ -148,8 +216,9 @@
|
||||
|
||||
const text = el('div', 'spendenkarte__text');
|
||||
text.append(el('span', 'spendenkarte__wer', karte.name || 'Jemand'));
|
||||
text.append(el('strong', 'spendenkarte__betrag',
|
||||
alsGeld(karte.betrag_cent, karte.waehrung)));
|
||||
const betrag = el('strong', 'spendenkarte__betrag');
|
||||
betrag.append(dogenStueck(karte.dogen_mille, karte.zeichen));
|
||||
text.append(betrag);
|
||||
if (karte.stufe?.name) {
|
||||
text.append(el('span', 'spendenkarte__stufe', karte.stufe.name));
|
||||
}
|
||||
@@ -172,5 +241,8 @@
|
||||
naechste(kasten);
|
||||
}
|
||||
|
||||
window.Spendenkarte = { zeigen, alsGeld, VORLAGEN: Object.keys(VORLAGEN) };
|
||||
window.Spendenkarte = {
|
||||
zeigen, alsDogen, dogenWort, dogenStueck,
|
||||
VORLAGEN: Object.keys(VORLAGEN),
|
||||
};
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user