DogFatherGitandClaude Opus 5
0784ad61ce
GEFUNDEN DURCH EINEN HINWEIS AUS DEM ANDEREN HAUS. Die Crew-Sitzung hat
heute eine Hilfe gebaut, die getippten Text ueber das Neuzeichnen
rettet, und dazugeschrieben: "Falls dir in bereich.js dasselbe begegnet
-- Liste wird neu gebaut, Feld darin entsteht neu." Genau das war hier
der Fall, nur mit einer Ausgabe statt einer Eingabe.
DER FEHLER: `beitragZeigen()` hing den fertigen Discord-Beitrag an das
DOM-Element der Kachel. Direkt danach lief `await laden()` -- die
Kachel muss ja "Link kopieren" statt "Teilen" anzeigen --, und `laden()`
leert die ganze Liste. Der Kasten wurde also im selben Atemzug
angehaengt und weggeraeumt.
GEMESSEN, NICHT VERMUTET: Die neue Pruefung fand ihn schon 600 ms nach
dem Druck nicht mehr. Beim Zusehen faellt das nicht auf -- es geht zu
schnell --, und die Zwischenablage stimmte ja. Es waere also als "steht
sichtbar unter der Kachel" in die Welt gegangen, ohne je gestimmt zu
haben. Ich hatte es genau so gemeldet.
DIE BEHEBUNG: Der Beitrag steht jetzt in `beitraege`, einer Liste je
Eintragsnummer, und `karte()` haengt ihn beim Bauen wieder an. Damit
uebersteht er beliebig viele Neuzeichnungen -- bis ihn jemand
schliesst, und dann wird er auch aus dem Gedaechtnis genommen, sonst
stuende er beim naechsten Mal wieder da.
NICHT DIESELBE SACHE WIE `getippt.js`: Dort wird ein EINGABEFELD an
einen Serverwert gebunden. Hier ist es eine AUSGABE ohne Serverfeld --
der Baustein haette nichts zu binden. Die Erkenntnis dahinter traegt
trotzdem: Was ein Neuzeichnen ueberleben soll, darf nicht im DOM
wohnen.
DIE PRUEFUNG MISST BEIDES, nicht nur eines: dass der Kasten erscheint
UND dass er nach dem Neuzeichnen noch da ist. "Er erscheint" allein
waere gruen gewesen, auch bei einem Kasten, der einen
Sekundenbruchteil spaeter weg ist. Dazu, dass Schliessen wirklich
schliesst. Sie war vor der Behebung rot (5 Fehler) und ist danach
gruen -- die Gegenprobe steckt also im Ablauf selbst.
GEPRUEFT: 190 (Kachel, +8), struktur, css-klassen. Stempel neu gesetzt,
weil bereich.js sich geaendert hat.
PARALLELE ARBEIT: Die Crew-Sitzung hat vorher ausgeliefert (ab204e96)
und ist fertig; die Arbeitskopie war sauber, als ich angefangen habe.
Co-Authored-By: Claude Opus 5 <[email protected]>
116 lines
4.8 KiB
HTML
116 lines
4.8 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Spendentafel</title>
|
|
<!-- ======================================================================
|
|
DIE SPENDENTAFEL FÜR OBS UND TIKTOK STUDIO (28.09.2026)
|
|
|
|
Eine Browser-Quelle, die nichts zeigt als die Spendenkarten — auf
|
|
DURCHSICHTIGEM Grund, damit sie über dem Bild liegen kann.
|
|
|
|
KEINE ANMELDUNG, SONDERN EIN SCHLÜSSEL. OBS speichert die
|
|
Anmeldung einer Browser-Quelle nicht zuverlässig; eine Quelle,
|
|
bei der man sich nach jedem Programmstart neu anmelden muss, ist
|
|
mitten in einer Sendung unbrauchbar. Ohne gültigen Schlüssel
|
|
antwortet der Server mit 404 und diese Seite bleibt leer.
|
|
|
|
SIE ZEIGT NUR, WAS OHNEHIN IM STREAM STEHT: Betrag, Name, Gruß,
|
|
Stufe. Kein Chat, keine Namen von Zusehenden, keine Bedienung.
|
|
|
|
In OBS: Quelle → Browser → diese Adresse, Breite 1920, Höhe 1080,
|
|
„Eigenes CSS" leer lassen (der Grund ist schon
|
|
durchsichtig).
|
|
====================================================================== -->
|
|
<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202610081523" />
|
|
<style>
|
|
/* DURCHSICHTIG BIS AUF DIE KARTEN. OBS legt die Quelle über das
|
|
Bild; jede Fläche, die hier steht, deckt dort etwas zu. */
|
|
html, body {
|
|
margin: 0; padding: 0;
|
|
background: transparent;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
}
|
|
/* Der Kasten für die Karten füllt das Bild.
|
|
|
|
WO SIE STEHEN, ENTSCHEIDET SEIT DEM 08.10.2026 DAS REGIEPULT.
|
|
Die Anordnung kommt aus `spendenkarte.css` über `data-platz`,
|
|
damit Saal und Stream dieselbe Karte an derselben Stelle zeigen
|
|
— hier stand vorher eine zweite, feste Antwort („unten links"),
|
|
und die hätte jede Umstellung im Pult stillschweigend
|
|
überstimmt. `?pos=` in der Adresse bleibt als ausdrückliche
|
|
Ausnahme für eine Szene; das regelt `tafel.js`.
|
|
|
|
Hier bleibt nur, was wirklich zu DIESER Quelle gehört: Sie
|
|
liegt fest im Bild und nimmt keine Klicks an. */
|
|
.obs-tafel {
|
|
position: fixed;
|
|
inset: 0;
|
|
gap: 14px;
|
|
padding: 48px;
|
|
pointer-events: none;
|
|
}
|
|
/* Am Rand braucht sie im Stream mehr Abstand als im Saal: Dort
|
|
grenzt sie an eine Bedienleiste, hier an den Bildrand, und ein
|
|
Rand von 18 Pixeln sieht auf 1080 Zeilen aus wie ein Versehen. */
|
|
.obs-tafel[data-platz="rand"] { padding: 48px; }
|
|
/* Auf der Bühne darf sie größer sein als im Saal: Hier deckt sie
|
|
nichts zu, was man lesen müsste. */
|
|
/* ALLES IN rem. Ein einziger Wert am Wurzelelement (`&g=` in der
|
|
Adresse) nimmt damit Schrift, Bild, Polsterung und Rundung
|
|
gleichmäßig mit. In Pixeln wäre das die Sorte Zahl, die man an
|
|
zwölf Stellen nachziehen muss. */
|
|
.obs-tafel .spendenkarte {
|
|
max-width: 34rem;
|
|
gap: .9rem;
|
|
padding: .85rem 1.3rem .85rem .9rem;
|
|
border-radius: 1.15rem;
|
|
}
|
|
.obs-tafel .spendenkarte__betrag { font-size: 2.1rem; }
|
|
.obs-tafel .spendenkarte__bild { width: 3.6rem; height: 3.6rem; }
|
|
.obs-tafel .spendenkarte__wer { font-size: .95rem; }
|
|
.obs-tafel .spendenkarte__stufe { font-size: .8rem; }
|
|
.obs-tafel .spendenkarte__gruss { font-size: 1rem; }
|
|
|
|
/* ---- Und in der Mitte als Aufsteller (08.10.2026) --------------
|
|
Dieselben Werte eine Stufe größer. Im Stream ist die Karte in
|
|
der Bildmitte das, was in diesem Augenblick zählt — und sie
|
|
steht dort nur ein paar Sekunden.
|
|
|
|
Alles weiterhin in `rem`: Ein einziger Wert am Wurzelelement
|
|
(`&g=` in der Adresse) nimmt damit Schrift, Bild, Polsterung und
|
|
Rundung gleichmäßig mit. */
|
|
.obs-tafel[data-platz="mitte"] .spendenkarte {
|
|
max-width: 26rem;
|
|
padding: 1.6rem 1.8rem 1.7rem;
|
|
border-radius: 1.5rem;
|
|
}
|
|
.obs-tafel[data-platz="mitte"] .spendenkarte__betrag { font-size: 3rem; }
|
|
.obs-tafel[data-platz="mitte"] .spendenkarte__bild { width: 5.6rem; height: 5.6rem; }
|
|
.obs-tafel[data-platz="mitte"] .spendenkarte__wer { font-size: 1.05rem; }
|
|
.obs-tafel[data-platz="mitte"] .spendenkarte__stufe { font-size: .85rem; }
|
|
.obs-tafel[data-platz="mitte"] .spendenkarte__gruss { font-size: 1.1rem; }
|
|
|
|
/* Steht hier gar nichts, ist das der Normalfall — keine Spende,
|
|
keine Karte. Ein Hinweis darauf wäre im Stream zu sehen. */
|
|
.obs-fehler {
|
|
position: fixed; left: 16px; top: 16px;
|
|
padding: 10px 14px;
|
|
border-radius: 10px;
|
|
background: rgba(140, 20, 30, .9);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="obs-tafel spendentafel" id="tafel" aria-live="polite"></div>
|
|
|
|
<script src="assets/js/spendenkarte.js?v=202610081523" defer></script>
|
|
<script src="assets/js/tafel.js?v=202610081523" defer></script>
|
|
</body>
|
|
</html>
|