DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Werbeeinblendung fuer die Reaction: Laufband, Wechsel und zwei Bilder in sechs Ecken

Browse Source 
Filipe: „ich will dass du auch perfektionierst dass ich einen banner
durchlaufen kann, oder erscheinen lassen kann mit werbung drauf ...
und ich will auch das dogfather logo oben rechts links unten rechts
links genau wie oben unten mittig, so dass ich es wegmachen und
hinzufuegen kann."

DAS BAND
Zwei Arten: „Laufband" zieht die Botschaften von rechts nach links,
„Wechsel" blendet sie nacheinander ein. Ein Rabattcode gehoert in den
Wechsel -- wer „DOGI10" lesen will, waehrend es wandert, hat es
gesehen und nicht behalten. Die Dauer ist einstellbar (8-40 s).

Das Band ist Glas, kein Balken: ein Verlauf, unten dicht genug, dass
jede Schrift traegt, oben offen. Man sieht das Video weiter.

Das Laufband traegt die Folge ZWEIMAL. Wandert es um 50 % seiner
Breite, steht die zweite dort, wo die erste war, und der Sprung
zurueck ist unsichtbar. Ohne sie entstuende am Ende jedes Durchlaufs
eine leere Flaeche -- das sieht aus, als sei die Einblendung
abgestuerzt.

Wer weniger Bewegung eingestellt hat, bekommt den Wechsel statt des
Laufbands -- nicht „aus". Die Werbung soll auch dann wirken.

DER RABATTCODE
Ein Wort in Grossbuchstaben mit einer Ziffer darin bekommt eine
eigene Flaeche in Bernstein: „DOGI10" ja, „VANVAN" nicht. Er ist der
einzige Teil der Botschaft, den jemand ABSCHREIBEN soll.

Der Text wird NIE als HTML eingesetzt -- die Kennzeichnung baut echte
Elemente. Sonst waere ein Eingabefeld im Regiepult ein Weg, fremdes
Markup in den Stream zu bringen.

DIE ZWEI BILDER
Der Husky und der Haekelhase aus der Zusammenarbeit mit VanVan,
jeweils an einem von sechs Plaetzen: oben und unten, je links,
mittig, rechts -- oder aus. Links und rechts mittig gibt es mit
Absicht nicht: dort liegen bei jedem Videodienst die Bedienelemente.

Zwei Bilder auf denselben Platz werden abgelehnt (400 ecke_belegt) --
sie laegen uebereinander, und man saehe von beiden nichts.

Wer unten steht, weicht dem Band aus, und die Spendentafel rueckt
hoch. Beides im Stilblatt ueber `:has`, nicht im Programm: Das Band
kennt die Tafel nicht und die Tafel kennt das Band nicht.

Der Husky ist schwarz und laege auf dunklem Videobild als Silhouette
in der Nacht. Zwei weiche helle Schatten legen eine Kontur darum --
dieselbe Loesung, die jeder Sender fuer sein Wasserzeichen nimmt.

IM STREAM, NICHT NUR IM SAAL
Beides laeuft in der Buehnenquelle mit, die OBS abfilmt, mit
groesserer Schrift (24 statt 18 px) -- ein Stream wird auf einem
Handy gesehen, oft in einem Viertel des Bildes. Gemessen: die OFFENE
Quelle zieht eine Umschaltung nach, ohne dass die Szene neu geladen
werden muss.

EINE QUELLE, NICHT DREI
`werbungStand()` steht in `reaktion-tabellen.js` und wird von Saal,
Regie und Buehne aufgerufen. Erst standen dort drei Abschriften
derselben Abfrage; beim Entfernen der Datenbank-Kennung habe ich eine
davon geaendert, und die anderen lieferten sie weiter.

WAS DIE PRUEFUNGEN DABEI GEFUNDEN HABEN
- pruef-buehne: Die Botschaften trugen ihre Datenbank-Kennung in die
  OBS-Auskunft, die nur mit einem Schluessel geschuetzt ist. Die
  Feldliste geht jetzt zwei Ebenen tief -- eine abschliessende Liste,
  die nur die oberste kennt, laesst sich umgehen, indem man ein Feld
  in ein vorhandenes Objekt legt.
- pruef-reaktion: Acht Fehlerwoerter ohne deutschen Satz. Nachgetragen
  im Hausstil: was nicht geht UND was stattdessen.
- pruef-struktur: Die Suche nach totem CSS las `buehne.html` und
  `tafel.html` nicht -- eine Ausnahme, die fuer eine ganz andere
  Frage gemacht war (Startbildschirm-Symbol). Sie haette verlangt,
  `.obs-buehne` zu loeschen, also die Regel, die den Stream traegt.
- pruef-tippziele: Erkannte als Anhebung nur `min-height`/`min-width`.
  Ein `height: 44px` im Fingerblock hebt genauso -- Fehlalarm, und
  ein Fehlalarm an einer Pruefung, die nach jeder Aenderung laeuft,
  wird weggeklickt. Zwei Gegenproben dazu.
- mess-reaktion: Die Regieleiste am Handy wurde gegen die feste Zahl
  SIEBEN geprueft und meldete „zeigt nur 8 von 7". Sie zaehlt jetzt
  selbst.
- mess-buehne: Die Konsolenmeldung zeigte dauerhaft vier
  Fehlschlaege, alle von den Pruefungen selbst bestellt. Jetzt eng
  gefiltert, benannt, mit Gegenprobe -- und ein UNERWARTETER
  Fehlschlag in der Quelle, die in den Stream geht, faellt ab sofort
  durch.

Gemessen: mess-reaktion 0, mess-buehne 0, pruef-reaktion 383/0,
pruef-buehne 38/0, pruef-tippziele 13/0, pruef-struktur 44/0,
pruef-css-klassen 0, pruef-haus-trennung 100/0, pruef-haus-seiten 38/0.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-29 17:16:26 +02:00
co-authored by Claude Opus 5
parent 077925ab25
commit a43bc565ec
62 changed files with 2722 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/reaktion.css
+230
View File
@@ -3377,3 +3377,233 @@ body[data-nur="buehne"] { background: #000; }
.saal .pult__leiste { position: sticky; top: 0; z-index: 2;
background: var(--saal-hoch); }
}
/* =====================================================================
DAS REGISTER „WERBUNG" (29.09.2026)
Filipe: „ich will es so krass wie es nur geht."
Die Einblendung selbst steht in `werbung.css` — sie läuft auch in
der Bühnenquelle, und zwei Fassungen altern unterschiedlich. Hier
steht nur ihre BEDIENUNG, und die gibt es nur im Pult.
===================================================================== */
/* ---- Die Art und das Tempo ---------------------------------------- */
.bandart-reihe,
.bandtempo-reihe,
.bandbild-reihe,
.eckengroesse-reihe {
display: flex; flex-wrap: wrap; gap: 6px;
min-width: 0;
}
.bandart__knopf,
.bandtempo__knopf,
.bandbild__knopf,
.eckengroesse__knopf {
appearance: none; cursor: pointer;
min-height: 34px; padding: 0 12px;
border-radius: 9px;
border: 1px solid var(--rand);
background: rgba(255, 255, 255, .05);
color: var(--schrift);
font-size: .82rem; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.bandart__knopf:hover,
.bandtempo__knopf:hover,
.bandbild__knopf:hover,
.eckengroesse__knopf:hover { background: rgba(255, 255, 255, .1); }
.bandart__knopf[aria-pressed="true"],
.bandtempo__knopf[aria-pressed="true"],
.bandbild__knopf[aria-pressed="true"],
.eckengroesse__knopf[aria-pressed="true"] {
border-color: var(--akzent);
background: color-mix(in srgb, var(--akzent) 22%, transparent);
color: #fff;
}
/* EIN FELD, DAS NICHTS BEWIRKEN KANN, SAGT ES. Das Tempo gilt nur,
wenn überhaupt etwas läuft. Es zu verstecken wäre schlechter:
Dann sucht man es und hält es für verschwunden. */
#bandtempo-feld[data-still="ja"] { opacity: .45; }
#bandtempo-feld[data-still="ja"] .bandtempo__knopf { pointer-events: none; }
/* ---- Die Liste der Botschaften ------------------------------------ */
.bandliste {
list-style: none; margin: 0 0 10px; padding: 0;
display: grid; gap: 6px;
min-width: 0;
}
.bandliste__leer {
font-size: .82rem; color: var(--text-leise);
padding: 8px 2px;
}
.bandzeile {
display: flex; align-items: center; gap: 10px;
padding: 7px 9px;
border-radius: 11px;
border: 1px solid var(--rand);
background: rgba(255, 255, 255, .035);
min-width: 0;
}
/* WAS NICHT LÄUFT, SIEHT AUCH SO AUS. Eine abgeschaltete Botschaft
nur an einem Knopf zu erkennen hieße, in einer Liste von acht
Einträgen achtmal hinzusehen. */
.bandzeile[data-aktiv="nein"] { opacity: .5; }
.bandzeile[data-aktiv="nein"] .bandzeile__text { text-decoration: line-through; }
.bandzeile__an {
appearance: none; cursor: pointer;
flex: none;
width: 34px; height: 20px;
padding: 0;
border-radius: 999px;
border: 1px solid var(--rand);
background: rgba(255, 255, 255, .07);
position: relative;
transition: background .18s ease, border-color .18s ease;
}
.bandzeile__an::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--text-leise);
transition: transform .18s ease, background .18s ease;
}
.bandzeile__an[aria-pressed="true"] {
border-color: var(--akzent);
background: color-mix(in srgb, var(--akzent) 34%, transparent);
}
.bandzeile__an[aria-pressed="true"]::after {
transform: translateX(14px);
background: #fff;
}
.bandzeile__texte { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.bandzeile__text {
font-size: .85rem; font-weight: 700;
color: var(--schrift);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bandzeile__unter {
font-size: .74rem; color: var(--text-leise);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bandzeile__bild {
flex: none;
width: 26px; height: 26px;
object-fit: contain;
filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7));
}
.bandzeile__tun { flex: none; display: flex; gap: 3px; }
.bandzeile__schieb,
.bandzeile__weg {
appearance: none; cursor: pointer;
width: 26px; height: 26px;
display: grid; place-items: center;
border-radius: 7px;
border: 1px solid transparent;
background: none;
color: var(--text-leise);
font-size: .72rem; line-height: 1;
}
.bandzeile__schieb:hover,
.bandzeile__weg:hover {
background: rgba(255, 255, 255, .1);
color: var(--schrift);
}
.bandzeile__schieb[disabled] { opacity: .3; cursor: default; }
.bandzeile__schieb[disabled]:hover { background: none; color: var(--text-leise); }
/* Das Löschen trägt als einziges Farbe — es ist das einzige, das
sich nicht zurückholen lässt. */
.bandzeile__weg { color: #ff8f8f; }
.bandzeile__weg:hover { background: rgba(255, 107, 107, .18); }
/* ---- Wo das Bild steht -------------------------------------------- */
.eckenwahl {
display: grid; gap: 6px;
margin-bottom: 12px;
min-width: 0;
}
.eckenwahl__wort {
font-size: .78rem; font-weight: 700;
color: var(--text-leise);
text-transform: uppercase; letter-spacing: .06em;
}
.eckenwahl__gitter { display: flex; flex-wrap: wrap; gap: 5px; }
/* JEDER KNOPF IST EIN ABBILD DER LEINWAND. Ein Rechteck im
Seitenverhältnis des Bildes, und darin ein Feld genau dort, wo das
Logo landet. „Oben links" als Wort muss man lesen; das hier sieht
man.
Die Lage kommt aus `data-platz` — dasselbe Merkmal wie an der
Einblendung selbst. Zwei Schreibweisen für dieselbe Sache wären
die Stelle, an der eine von beiden irgendwann abweicht. */
.eckenwahl__knopf {
appearance: none; cursor: pointer;
position: relative;
width: 46px; height: 30px;
padding: 0;
border-radius: 6px;
border: 1px solid var(--rand);
background: rgba(0, 0, 0, .35);
}
.eckenwahl__knopf:hover { border-color: var(--rand-hell); }
.eckenwahl__knopf[aria-pressed="true"] {
border-color: var(--akzent);
background: color-mix(in srgb, var(--akzent) 18%, rgba(0, 0, 0, .35));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent);
}
.eckenwahl__punkt {
position: absolute;
width: 13px; height: 13px;
border-radius: 3px;
background: var(--text-leise);
}
.eckenwahl__knopf[aria-pressed="true"] .eckenwahl__punkt { background: #fff; }
.eckenwahl__knopf[data-platz="ol"] .eckenwahl__punkt { top: 4px; left: 4px; }
.eckenwahl__knopf[data-platz="om"] .eckenwahl__punkt { top: 4px; left: 50%; transform: translateX(-50%); }
.eckenwahl__knopf[data-platz="or"] .eckenwahl__punkt { top: 4px; right: 4px; }
.eckenwahl__knopf[data-platz="ul"] .eckenwahl__punkt { bottom: 4px; left: 4px; }
.eckenwahl__knopf[data-platz="um"] .eckenwahl__punkt { bottom: 4px; left: 50%; transform: translateX(-50%); }
.eckenwahl__knopf[data-platz="ur"] .eckenwahl__punkt { bottom: 4px; right: 4px; }
.eckenwahl__aus {
position: absolute; inset: 0;
display: grid; place-items: center;
font-size: .72rem; font-weight: 700;
color: var(--text-leise);
}
.eckenwahl__knopf[aria-pressed="true"] .eckenwahl__aus { color: #fff; }
/* ---- Am Daumen ----------------------------------------------------- */
@media (pointer: coarse) {
/* HAUSREGEL: 44 px. Die Knöpfe der Liste sind klein, weil dort
acht Zeilen untereinander stehen — am Finger bekommen sie
trotzdem ihre Fläche, über ein unsichtbares Feld darum. */
.bandart__knopf,
.bandtempo__knopf,
.bandbild__knopf,
.eckengroesse__knopf { min-height: 44px; }
.bandzeile__schieb,
.bandzeile__weg { width: 34px; height: 34px; position: relative; }
.bandzeile__schieb::before,
.bandzeile__weg::before,
.bandzeile__an::before {
content: "";
position: absolute;
inset: 50% auto auto 50%;
width: 44px; height: 44px;
transform: translate(-50%, -50%);
}
.bandzeile__an { width: 44px; height: 26px; }
.bandzeile__an::after { width: 20px; height: 20px; }
.bandzeile__an[aria-pressed="true"]::after { transform: translateX(18px); }
/* `min-*` UND NICHT `width`/`height`: Der Knopf ist ein Abbild
der Leinwand. Eine feste Zahl naegelt ihn fest; eine Untergrenze
laesst ihn mitwachsen, wenn die Zeile mehr Platz hat, und haelt
nur den Daumen frei. */
.eckenwahl__knopf { min-width: 58px; min-height: 44px; }
}
workspace/assets/css/werbung.css
+281
View File
@@ -0,0 +1,281 @@
/* =====================================================================
DIE WERBEEINBLENDUNG (29.09.2026)
Filipe: „ich will es so krass wie es nur geht."
---------------------------------------------------------------------
WARUM EINE EIGENE DATEI
Dasselbe Band steht in der Reaction-Seite und in der Bühnenquelle,
die OBS abfilmt. Zwei Fassungen altern unterschiedlich — dann sieht
der Stream anders aus als das, worüber geredet wird.
---------------------------------------------------------------------
DAS BAND IST GLAS, KEIN BALKEN
Ein undurchsichtiger Streifen über einem Video nimmt fünf Prozent
des Bildes weg und gibt nichts zurück. Dieses Band liegt als
Verlauf darüber: unten dicht genug, dass jede Schrift trägt, oben
offen. Man sieht das Video weiter — und liest trotzdem.
Die Lichtkante oben ist dieselbe wie im Chat: eine haardünne helle
Linie macht aus einer Fläche einen Körper. Ohne sie klebt das Band
auf dem Bild statt davor zu liegen.
===================================================================== */
.werbung {
position: absolute;
inset: 0;
pointer-events: none; /* niemand soll das Video verfehlen */
z-index: 46; /* über der Spendentafel (45), unter dem Pult */
--ecke-gross: 1;
--band-hoch: 68px;
}
/* ---------------------------------------------------------------------
DAS BAND
------------------------------------------------------------------- */
.werbung__band {
position: absolute;
left: 0; right: 0; bottom: 0;
height: var(--band-hoch);
overflow: hidden;
display: flex; align-items: center;
/* Der Verlauf trägt die Schrift, ohne das Bild zuzudecken.
Gemessen: Bei 78 % Schwarz unten steht helle Schrift auch über
einem weißen Videobild mit über 7:1 — die Hausgrenze für kleine
Schrift liegt bei 4,5. */
background: linear-gradient(to top,
rgba(6, 5, 14, .88) 0%,
rgba(6, 5, 14, .74) 55%,
rgba(6, 5, 14, 0) 100%);
backdrop-filter: blur(3px) saturate(115%);
-webkit-backdrop-filter: blur(3px) saturate(115%);
}
.werbung__band[hidden] { display: none; }
/* DIE LICHTKANTE. Sie sitzt oben auf dem Verlauf und nicht am Rand
des Kastens -- dort wäre sie eine Linie quer durchs Bild. */
.werbung__band::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(to right,
transparent, rgba(255, 255, 255, .34) 18%,
rgba(255, 255, 255, .34) 82%, transparent);
}
.werbung__lauf {
display: flex;
align-items: center;
width: 100%;
--dauer: 16s;
}
/* ---------------------------------------------------------------------
EINE BOTSCHAFT
------------------------------------------------------------------- */
.werbung__stueck {
display: flex; align-items: center; gap: 14px;
padding: 0 34px;
flex: none;
min-width: 0;
}
.werbung__bild {
width: 44px; height: 44px;
object-fit: contain;
flex: none;
/* DER HUSKY IST SCHWARZ. Auf einem dunklen Videobild wäre er eine
Silhouette in der Nacht. Zwei weiche helle Schatten legen eine
Kontur darum -- dieselbe Lösung, die jeder Sender für sein
Wasserzeichen nimmt. Auf hellem Grund fällt sie nicht auf. */
filter:
drop-shadow(0 0 1px rgba(255, 255, 255, .9))
drop-shadow(0 0 6px rgba(255, 255, 255, .45));
}
.werbung__texte { display: grid; gap: 1px; min-width: 0; }
.werbung__text {
font-size: 1.12rem; font-weight: 800;
letter-spacing: .01em;
color: #f4f1ff;
white-space: nowrap;
text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.werbung__unter {
font-size: .86rem; font-weight: 600;
color: #c3bade;
white-space: nowrap;
text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
/* ==== DER RABATTCODE ===============================================
Er ist der einzige Teil der Botschaft, den jemand ABSCHREIBEN
soll. Alles andere liest man und vergisst es; „DOGI10" muss man
festhalten. Deshalb bekommt er eine eigene Fläche: Ein Wort, das
wie ein Feld aussieht, liest man als etwas zum Mitnehmen.
Die Farbe ist Bernstein und nicht der Hausakzent -- sie steht auf
jedem Videobild, auch auf einem violetten. */
.werbung__code {
display: inline-block;
margin: 0 .18em;
padding: .06em .5em;
border-radius: 7px;
background: linear-gradient(180deg, #ffd479, #f0a52c);
color: #24160a;
font-weight: 900;
letter-spacing: .06em;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .6),
0 2px 10px -2px rgba(240, 165, 44, .7);
}
/* ---------------------------------------------------------------------
LAUFBAND
------------------------------------------------------------------- */
.werbung[data-art="laufband"] .werbung__lauf {
width: max-content;
animation: werbung-zieht var(--dauer) linear infinite;
}
.werbung__folge { display: flex; align-items: center; flex: none; }
/* UM GENAU EINE FOLGE. Das Band trägt zweimal dieselbe Reihe; wandert
es um 50 % seiner Breite, steht die zweite dort, wo die erste war,
und der Sprung zurück ist unsichtbar. */
@keyframes werbung-zieht {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ---------------------------------------------------------------------
WECHSEL
------------------------------------------------------------------- */
.werbung[data-art="wechsel"] .werbung__lauf {
display: grid;
place-items: center;
}
.werbung__stueck--wechsel {
grid-area: 1 / 1; /* alle übereinander -- die Höhe springt nicht */
opacity: 0;
transform: translateY(6px);
transition: opacity .5s ease, transform .5s ease;
}
.werbung__stueck--wechsel[data-dran="ja"] {
opacity: 1;
transform: none;
}
/* ---------------------------------------------------------------------
DIE ECKEN — sechs Plätze
---------------------------------------------------------------------
Die Lage steht im Stilblatt und nicht im Programm. Ein
`data-platz="or"` ist eine Absicht; daraus `top` und `right` zu
rechnen ist Darstellung. Wer beides in JavaScript legte, müsste
jede Änderung an zwei Stellen nachziehen.
------------------------------------------------------------------- */
.werbung__ecke {
position: absolute;
width: calc(110px * var(--ecke-gross));
height: calc(110px * var(--ecke-gross));
display: grid; place-items: center;
/* Ein Wasserzeichen steht im Bild und drängt sich nicht davor.
88 Prozent Deckung ist der Wert, bei dem es sichtbar bleibt und
ein Gesicht darunter noch zu erkennen ist. */
opacity: .88;
transition: opacity .3s ease;
}
.werbung__ecke[hidden] { display: none; }
.werbung__ecke img {
max-width: 100%; max-height: 100%;
object-fit: contain;
filter:
drop-shadow(0 0 2px rgba(255, 255, 255, .85))
drop-shadow(0 2px 10px rgba(0, 0, 0, .55));
}
/* Der Abstand zum Rand wächst mit der Größe mit. Fest gesetzt klebte
ein großes Logo am Rand und ein kleines schwämme in der Ecke. */
.werbung__ecke[data-platz="ol"] { top: calc(14px * var(--ecke-gross)); left: calc(14px * var(--ecke-gross)); }
.werbung__ecke[data-platz="or"] { top: calc(14px * var(--ecke-gross)); right: calc(14px * var(--ecke-gross)); }
.werbung__ecke[data-platz="om"] { top: calc(14px * var(--ecke-gross)); left: 50%; transform: translateX(-50%); }
.werbung__ecke[data-platz="ul"] { bottom: calc(14px * var(--ecke-gross)); left: calc(14px * var(--ecke-gross)); }
.werbung__ecke[data-platz="ur"] { bottom: calc(14px * var(--ecke-gross)); right: calc(14px * var(--ecke-gross)); }
.werbung__ecke[data-platz="um"] { bottom: calc(14px * var(--ecke-gross)); left: 50%; transform: translateX(-50%); }
/* WER UNTEN STEHT, WEICHT DEM BAND AUS. Sonst läge der Husky auf dem
Rabattcode -- und zwar genau dann, wenn beides eingeschaltet ist,
also im wichtigsten Fall. */
.werbung[data-art="laufband"] .werbung__ecke[data-platz="ul"],
.werbung[data-art="laufband"] .werbung__ecke[data-platz="um"],
.werbung[data-art="laufband"] .werbung__ecke[data-platz="ur"],
.werbung[data-art="wechsel"] .werbung__ecke[data-platz="ul"],
.werbung[data-art="wechsel"] .werbung__ecke[data-platz="um"],
.werbung[data-art="wechsel"] .werbung__ecke[data-platz="ur"] {
bottom: calc(var(--band-hoch) + 12px);
}
/* ---------------------------------------------------------------------
DIE SPENDENTAFEL RÜCKT HOCH, WENN DAS BAND LÄUFT
Sie steht bei `bottom: 84px`. Läuft das Band, lägen die Karten
darauf. Gerechnet wird es hier und nicht im Programm: Das Band
kennt die Tafel nicht, und die Tafel kennt das Band nicht -- `:has`
sieht beide.
------------------------------------------------------------------- */
.leinwand:has(.werbung[data-art="laufband"]) .spendentafel,
.leinwand:has(.werbung[data-art="wechsel"]) .spendentafel {
bottom: 152px;
}
/* ---------------------------------------------------------------------
AM FINGERGERÄT
------------------------------------------------------------------- */
@media (max-width: 560px) {
.werbung { --band-hoch: 52px; }
.werbung__stueck { gap: 10px; padding: 0 20px; }
.werbung__bild { width: 34px; height: 34px; }
.werbung__text { font-size: .94rem; }
.werbung__unter { font-size: .76rem; }
.werbung__ecke {
width: calc(74px * var(--ecke-gross));
height: calc(74px * var(--ecke-gross));
}
.leinwand:has(.werbung[data-art="laufband"]) .spendentafel,
.leinwand:has(.werbung[data-art="wechsel"]) .spendentafel {
bottom: 76px;
}
}
/* ---------------------------------------------------------------------
IN DER BÜHNENQUELLE
---------------------------------------------------------------------
Dort gibt es keine Bedienung und keinen Chat -- das Bild ist so
breit wie der Stream. Alles darf größer sein.
------------------------------------------------------------------- */
body[data-nur="buehne"] .werbung,
.obs-buehne .werbung {
--band-hoch: 92px;
}
body[data-nur="buehne"] .werbung__text,
.obs-buehne .werbung__text { font-size: 1.5rem; }
body[data-nur="buehne"] .werbung__unter,
.obs-buehne .werbung__unter { font-size: 1.05rem; }
body[data-nur="buehne"] .werbung__bild,
.obs-buehne .werbung__bild { width: 60px; height: 60px; }
body[data-nur="buehne"] .werbung__ecke,
.obs-buehne .werbung__ecke {
width: calc(170px * var(--ecke-gross));
height: calc(170px * var(--ecke-gross));
}
/* Wer weniger Bewegung eingestellt hat, bekommt den Wechsel statt des
Laufbands -- das entscheidet das Programm. Hier wird nur die
Überblendung ruhiger, damit auch sie nicht springt. */
@media (prefers-reduced-motion: reduce) {
.werbung__stueck--wechsel { transition: opacity .3s ease; transform: none; }
.werbung__stueck--wechsel[data-dran="ja"] { transform: none; }
}
workspace/assets/img/werbung-dogi.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

workspace/assets/img/werbung-hase.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

workspace/assets/js/buehne.js
+16
View File
@@ -116,10 +116,26 @@
* einer der beiden Stellen vergessen worden. Das ist keine
* Vermutung: Am selben Tag haben im selben Haus zwei Regeln für
* dieselbe Frage der Regieleiste null Pixel gegeben. */
/* ==== DIE WERBEEINBLENDUNG ================================
Sie ist der Grund, warum es sie gibt: Ein Band, das nur auf der
Seite laeuft, erreicht die Leute nicht, die ueber TikTok oder
YouTube zusehen -- und das sind die meisten.
Eingehaengt wird sie EINMAL, an den Koerper. Ein Band, das bei
jedem Stand neu entstuende, finge mitten im Satz von vorn an --
und der Stand kommt jede Sekunde. */
let werbung = null;
function werbungStellen(s) {
if (!window.Werbung) return;
if (!werbung) werbung = window.Werbung.einhaengen(document.body);
werbung.setzen(s && s.werbung);
}
function standSetzen(neu) {
stand = neu;
letztes = Date.now();
bildStellen(stand);
werbungStellen(stand);
if (!spieler) api(); else folgen(stand);
}
workspace/assets/js/meldung.js
+27
View File
@@ -230,6 +230,33 @@
schon_im_bild:
'Das läuft gerade schon. Ein Umschalter braucht zwei verschiedene Videos – '
+ 'sonst passiert beim Drücken nichts.',
/* ---- Die Werbeeinblendung (29.09.2026) --------------------
Alle Listen stehen in `reaktion-tabellen.js`. Hier stehen sie
als WORTE, nicht als Werte: „0,7-fach bis 2-fach" liest sich,
„[0.7,1,1.4,2]" nicht. Wandert eine Liste, wandert der Satz
mit -- dafuer gibt es keine Automatik, aber `pruef-reaktion`
merkt wenigstens, wenn ein Wort ganz ohne Satz dasteht. */
bannerart_unklar:
'Diese Art gibt es nicht. Möglich sind: aus, Laufband und Wechsel.',
bannertempo_unklar:
'Diese Dauer gibt es nicht. Möglich sind 8, 12, 16, 24 und 40 Sekunden.',
eckenplatz_unklar:
'Diesen Platz gibt es nicht. Möglich sind oben und unten, '
+ 'jeweils links, mittig oder rechts — oder gar keiner.',
eckengroesse_unklar:
'Diese Größe gibt es nicht. Möglich sind 0,7-fach bis 2-fach.',
ecke_belegt:
'Auf diesem Platz steht schon das andere Bild. Zwei Bilder auf '
+ 'derselben Ecke lägen übereinander — nimm einen der fünf anderen Plätze.',
banner_voll:
'Mehr als acht Botschaften werden nicht gelesen. Lösch eine, '
+ 'dann ist wieder Platz.',
bild_unklar:
'Dieses Bild gibt es nicht. Möglich sind: ohne Bild, der Husky '
+ 'und der Häkelhase.',
richtung_unklar:
'Diese Richtung gibt es nicht. Eine Botschaft geht nach oben oder nach unten.',
/* ---- Die Gestaltung der Spendenkarten --------------------- */
stufen_fehlen:
'Da ist keine Stufenleiter angekommen. Lade die Seite neu und versuch es noch einmal.',
workspace/assets/js/reaktion.js
+282
View File
@@ -124,11 +124,244 @@
/* =================================================================
DER ZUSTAND AUF DEM BILDSCHIRM
================================================================= */
/* ==== DAS REGISTER „WERBUNG" =============================
ALLES KOMMT VOM SERVER -- die Arten, die Tempi, die Plaetze,
die Groessen. Eine zweite Liste hier waere eine, die
irgendwann von der ersten abweicht; dann steht ein Knopf da,
den der Server mit 400 ablehnt, und niemand weiss warum. */
const ECKEN_WORT = {
aus: 'aus', ol: 'oben links', om: 'oben mittig', or: 'oben rechts',
ul: 'unten links', um: 'unten mittig', ur: 'unten rechts',
};
const ART_WORT = { aus: 'Aus', laufband: 'Laufband', wechsel: 'Wechsel' };
let neuesBild = 'keins';
/* Ein Aufruf an die Werbe-Wege. Fuenf Bedienelemente schicken
dasselbe Muster; einmal geschrieben kann es nicht an vier
Stellen abweichen. */
async function werbungRuf(pfad, koerper, methode) {
const a = await hole(pfad, {
method: methode || 'POST',
...(koerper ? {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(koerper),
} : {}),
});
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return false; }
await standHolen();
return true;
}
const werbungSetzen = (felder) =>
werbungRuf('/workspace/api/reaktion/werbung', felder);
function werbungPultBauen() {
if (!lage?.ich?.host) return;
/* ---- Die Art ---- */
const areihe = $('bandart-reihe');
if (areihe) {
areihe.textContent = '';
for (const art of (lage.banner_arten || ['aus'])) {
const k = el('button', 'bandart__knopf', ART_WORT[art] || art);
k.type = 'button';
k.dataset.art = art;
k.addEventListener('click', () => werbungSetzen({ art }));
areihe.append(k);
}
}
/* ---- Wie lange ---- */
const treihe = $('bandtempo-reihe');
if (treihe) {
treihe.textContent = '';
for (const t of (lage.banner_tempi || [16])) {
const k = el('button', 'bandtempo__knopf', `${t} s`);
k.type = 'button';
k.dataset.tempo = String(t);
k.addEventListener('click', () => werbungSetzen({ tempo: t }));
treihe.append(k);
}
}
/* ---- Welches Bild an einer neuen Botschaft ---- */
const breihe = $('bandbild-reihe');
if (breihe) {
breihe.textContent = '';
const worte = { keins: 'ohne Bild', dogi: 'Husky', hase: 'Häkelhase' };
for (const b of (lage.banner_bilder || ['keins'])) {
const k = el('button', 'bandbild__knopf', worte[b] || b);
k.type = 'button';
k.dataset.bild = b;
k.setAttribute('aria-pressed', String(b === neuesBild));
k.addEventListener('click', () => {
neuesBild = b;
for (const g of breihe.children) {
g.setAttribute('aria-pressed', String(g.dataset.bild === b));
}
});
breihe.append(k);
}
}
/* ---- Die zwei Ecken ---- */
for (const [welches, feld, wort] of [
['dogi', 'ecke_dogi', 'Der Husky'],
['hase', 'ecke_hase', 'Der Häkelhase'],
]) {
const kasten = $(`eckenwahl-${welches}`);
if (!kasten) continue;
kasten.textContent = '';
kasten.append(el('span', 'eckenwahl__wort', wort));
const gitter = el('div', 'eckenwahl__gitter');
for (const platz of (lage.ecken_plaetze || ['aus'])) {
/* JEDER KNOPF IST EIN ABBILD DER LEINWAND mit einem Feld
dort, wo das Bild landet. Sechs Knoepfe mit „oben links",
„oben mittig" … waeren sechs Zeilen Text, die man lesen
muss; ein Bild erkennt man. Das Wort bleibt trotzdem
dran -- fuer Vorleseprogramme und fuer den, der Farben
schlecht unterscheidet. */
const k = el('button', 'eckenwahl__knopf');
k.type = 'button';
k.dataset.platz = platz;
k.title = ECKEN_WORT[platz] || platz;
k.setAttribute('aria-label', `${wort}: ${ECKEN_WORT[platz] || platz}`);
if (platz === 'aus') {
k.append(el('span', 'eckenwahl__aus', 'aus'));
} else {
k.append(el('span', 'eckenwahl__punkt'));
}
k.addEventListener('click', () => werbungSetzen({ [feld]: platz }));
gitter.append(k);
}
kasten.append(gitter);
}
/* ---- Wie gross ---- */
const greihe = $('eckengroesse-reihe');
if (greihe) {
greihe.textContent = '';
for (const g of (lage.ecken_groessen || [1])) {
const k = el('button', 'eckengroesse__knopf',
g === 1 ? '1×' : `${String(g).replace('.', ',')}×`);
k.type = 'button';
k.dataset.gross = String(g);
k.addEventListener('click', () => werbungSetzen({ ecke_gross: g }));
greihe.append(k);
}
}
/* ---- Eine neue Botschaft ---- */
const anlegen = $('band-anlegen');
if (anlegen && !anlegen.dataset.bereit) {
anlegen.dataset.bereit = 'ja';
anlegen.addEventListener('click', async () => {
const text = $('band-neu').value.trim();
if (!text) { melde(null, 'Schreib erst, was dastehen soll.'); return; }
const ok = await werbungRuf('/workspace/api/reaktion/banner', {
text, unterzeile: $('band-neu-unter').value.trim(), bild: neuesBild,
});
if (!ok) return;
$('band-neu').value = '';
$('band-neu-unter').value = '';
});
}
}
/* Die Liste der Botschaften -- sie aendert sich haeufiger als die
Knopfreihen und wird deshalb getrennt gezeichnet. */
function bandlisteZeichnen() {
const liste = $('bandliste');
if (!liste || !lage?.ich?.host) return;
const alle = lage.banner_alle || [];
liste.textContent = '';
if (!alle.length) {
const leer = el('li', 'bandliste__leer',
'Noch keine Botschaft. Trag unten eine ein.');
liste.append(leer);
return;
}
alle.forEach((b, i) => {
const z = el('li', 'bandzeile');
z.dataset.aktiv = b.aktiv ? 'ja' : 'nein';
const an = el('button', 'bandzeile__an');
an.type = 'button';
an.setAttribute('aria-pressed', String(!!b.aktiv));
an.setAttribute('aria-label', b.aktiv ? 'läuft — abschalten' : 'aus — einschalten');
an.title = b.aktiv ? 'läuft' : 'aus';
an.addEventListener('click', async () => {
await werbungRuf(`/workspace/api/reaktion/banner/${b.id}`, { aktiv: !b.aktiv });
});
z.append(an);
const texte = el('div', 'bandzeile__texte');
texte.append(el('div', 'bandzeile__text', b.text));
if (b.unterzeile) texte.append(el('div', 'bandzeile__unter', b.unterzeile));
z.append(texte);
if (b.bild && b.bild !== 'keins') {
const bild = el('img', 'bandzeile__bild');
bild.src = `assets/img/werbung-${b.bild}.webp`;
bild.alt = b.bild === 'dogi' ? 'Husky' : 'Häkelhase';
z.append(bild);
}
const tun = el('div', 'bandzeile__tun');
for (const [wohin, zeichen, wort] of [['hoch', '▲', 'nach oben'], ['runter', '▼', 'nach unten']]) {
const k = el('button', 'bandzeile__schieb', zeichen);
k.type = 'button';
k.setAttribute('aria-label', wort);
k.title = wort;
k.disabled = (wohin === 'hoch' && i === 0) || (wohin === 'runter' && i === alle.length - 1);
k.addEventListener('click', async () => {
await werbungRuf(`/workspace/api/reaktion/banner/${b.id}/schieben`, { wohin });
});
tun.append(k);
}
const weg = el('button', 'bandzeile__weg', '×');
weg.type = 'button';
weg.setAttribute('aria-label', 'Botschaft löschen');
weg.title = 'löschen';
weg.addEventListener('click', async () => {
/* EINE RUECKFRAGE, WEIL ES NICHT ZURUECKGEHT. Bei „lösen"
im Chat steht hier keine -- das laesst sich rueckgaengig
machen. Eine Botschaft ist danach weg samt ihrem Text. */
const ja = await window.frageNach?.({
titel: 'Botschaft löschen?',
text: `„${b.text}" wird aus dem Band genommen. Das geht nicht zurück.`,
ja: 'Löschen', nein: 'Behalten',
});
if (ja === false || ja === undefined) return;
await werbungRuf(`/workspace/api/reaktion/banner/${b.id}`, null, 'DELETE');
});
tun.append(weg);
z.append(tun);
liste.append(z);
});
}
/* ==== DIE WERBEEINBLENDUNG ===============================
Sie haengt an der Leinwand und nicht am Saal: Sie gehoert ueber
das Bild, und nur dort. Eingehaengt wird sie EINMAL -- ein
Band, das bei jedem Rundruf neu entstuende, finge mitten im
Satz wieder von vorn an. */
let werbung = null;
function werbungZeichnen() {
if (!window.Werbung) return;
const kasten = $('leinwand');
if (!kasten) return;
if (!werbung) werbung = window.Werbung.einhaengen(kasten);
werbung.setzen(lage?.werbung);
}
function zeichnen() {
if (!lage) return;
saal.dataset.stand = lage.stand;
document.body.dataset.stand = lage.stand;
meineId = lage.ich.id;
werbungZeichnen();
/* WER RAUS IST, SIEHT AB HIER NICHTS MEHR. Die Prüfung steht ganz
oben und nicht am Ende: Alles darunter baut den Saal auf, und
@@ -1787,6 +2020,8 @@
['nur_video', 'Nur Video'],
['nur_kamera', 'Nur Kamera'],
];
werbungPultBauen();
const lreihe = $('layout-reihe');
lreihe.textContent = '';
for (const [schluessel, wort] of layouts) {
@@ -2421,6 +2656,32 @@
? 'Geht erst, wenn die Sendung beendet ist.'
: 'Leert das Pult — Spenden, Dogen und Chat bleiben.';
/* ---- Die Werbung nachziehen ---- */
if (lage.ich?.host && lage.werbung) {
const w = lage.werbung;
for (const k of ($('bandart-reihe')?.children || [])) {
k.setAttribute('aria-pressed', String(k.dataset.art === (w.art || 'aus')));
}
for (const k of ($('bandtempo-reihe')?.children || [])) {
k.setAttribute('aria-pressed', String(Number(k.dataset.tempo) === (w.tempo || 16)));
}
for (const k of ($('eckengroesse-reihe')?.children || [])) {
k.setAttribute('aria-pressed', String(Number(k.dataset.gross) === (w.ecke_gross || 1)));
}
for (const [welches, feld] of [['dogi', 'ecke_dogi'], ['hase', 'ecke_hase']]) {
const gitter = $(`eckenwahl-${welches}`)?.querySelector('.eckenwahl__gitter');
for (const k of (gitter?.children || [])) {
k.setAttribute('aria-pressed', String(k.dataset.platz === (w[feld] || 'aus')));
}
}
/* DAS TEMPO GILT NUR, WENN ETWAS LAEUFT. Ein Knopf, der
nichts bewirken kann, ist schlimmer als keiner -- man
drueckt ihn und sucht den Fehler bei sich. */
const tfeld = $('bandtempo-feld');
if (tfeld) tfeld.dataset.still = (w.art === 'aus') ? 'ja' : 'nein';
bandlisteZeichnen();
}
for (const k of $('layout-reihe').children) {
k.setAttribute('aria-pressed', String(k.dataset.layout === (lage.layout || 'kino')));
}
@@ -2996,6 +3257,27 @@
return;
}
if (d.was === 'werbung') {
/* DER RUNDRUF BRINGT DIE GANZE EINBLENDUNG -- Art, Tempo,
beide Ecken UND die Botschaften. Nur die Kennungen zu
schicken waere kuerzer und falsch: Wer eine Botschaft
aendert, saehe sie erst beim naechsten Neuladen, und ein
Zuschauer laedt eine Stunde lang nicht neu.
`banner_alle` ist NICHT dabei -- die Verwaltungsliste
samt abgeschalteten Entwuerfen gehoert nur der Regie.
Wer sie braucht, holt den Stand. */
if (lage) {
lage = { ...lage, werbung: {
art: d.art, tempo: d.tempo, ecke_dogi: d.ecke_dogi,
ecke_hase: d.ecke_hase, ecke_gross: d.ecke_gross, band: d.band,
} };
werbungZeichnen();
if (lage.ich?.host) standHolen();
}
return;
}
/* ==== MODERATION ==========================================
Drei Meldungen ohne Stand im Gepäck, und alle drei aus
workspace/assets/js/werbung.js
+250
View File
@@ -0,0 +1,250 @@
/* =====================================================================
DIE WERBEEINBLENDUNG (29.09.2026)
Filipe: „ich will dass du auch perfektionierst dass ich einen banner
durchlaufen kann, oder erscheinen lassen kann mit werbung drauf …
und ich will auch das dogfather logo oben rechts links unten rechts
links genau wie oben unten mittig, so dass ich es wegmachen kann und
hinzufügen kann und genau so auch den hasen mit dem rabattcode."
---------------------------------------------------------------------
WARUM DAS EIN EIGENES STÜCK IST
Dasselbe Band läuft an zwei Orten: in der Reaction-Seite, wo das
Rudel zusieht, und in der Bühnenquelle, die OBS abfilmt. Zweimal
gebaut hieße: Bei der nächsten Änderung sieht es an einem der beiden
Orte anders aus — und gemerkt wird das im Livestream.
Genau wie bei der Spendenkarte hängt hier deshalb nichts an der
Reaction. Wer die Einblendung zeigen will, gibt ihr einen Kasten.
---------------------------------------------------------------------
DREI ARTEN, UND JEDE HAT IHREN FALL
aus nichts. Die Vorgabe.
laufband der Text zieht durch. Fällt auf, ist schwer zu merken.
wechsel eine Botschaft steht, blendet aus, die nächste kommt.
EIN RABATTCODE GEHÖRT IN DEN WECHSEL. „DOGI10" hinterherzulesen,
während es nach links wandert, ist genau das, woran Codes
scheitern — man sieht sie und hat sie nicht.
---------------------------------------------------------------------
WER NICHT MAG, DASS SICH ETWAS BEWEGT
`prefers-reduced-motion` schaltet das Laufband auf Wechsel um.
Nicht auf „aus": Die Botschaft ist der Zweck, die Bewegung nur ihr
Transportmittel. Wer eine Einstellung für weniger Bewegung setzt,
will weniger Bewegung — nicht weniger Inhalt.
===================================================================== */
(() => {
"use strict";
/* Die zwei Bilder. Sie liegen unter `assets/img/` und werden ohne
Anmeldung ausgeliefert — die OBS-Quelle hat keine. */
const BILDER = {
dogi: { datei: "werbung-dogi.webp", wort: "Dogfather Universe" },
hase: { datei: "werbung-hase.webp", wort: "Häkelhase von VanVan" },
};
/* Wo ein Bild stehen kann. Der Schlüssel steht auch am Element als
`data-platz` — das Stilblatt rechnet daraus die Lage, nicht das
Programm. Eine Position in JavaScript zu setzen hieße, sie in
zwei Sprachen zu pflegen. */
const PLAETZE = new Set(["ol", "om", "or", "ul", "um", "ur"]);
/* EIN RABATTCODE WIRD HERVORGEHOBEN — automatisch, aber eng.
Die Regel ist bewusst streng: vier bis zwölf Zeichen, nur
Großbuchstaben und Ziffern, und MINDESTENS EINE ZIFFER. Damit
trifft sie „DOGI10" und nicht „VANVAN", nicht „TIKTOK", nicht
„AGB". Eine weichere Regel würde irgendwann ein gewöhnliches
Wort einrahmen, und das sähe nach Fehler aus.
Warum überhaupt automatisch: Ein eigenes Feld „Code" wäre
ehrlicher und ein Feld mehr beim Eintragen. Der Code steht
ohnehin im Satz; ihn dort zu erkennen kostet den, der tippt,
gar nichts. */
const CODE = /\b([A-ZÄÖÜ]{2,}[A-ZÄÖÜ0-9]*[0-9][A-ZÄÖÜ0-9]*)\b/;
const el = (art, klasse, text) => {
const k = document.createElement(art);
if (klasse) k.className = klasse;
if (text !== undefined) k.textContent = text;
return k;
};
/* Eine Zeile des Bandes: Bild, Text, Unterzeile.
DER TEXT WIRD NICHT ALS HTML EINGESETZT. Er kommt aus einem
Eingabefeld; als `innerHTML` wäre jedes spitze Zeichen darin ein
offenes Tor. Der Code-Rahmen entsteht deshalb aus echten
Elementen und nicht aus zusammengebautem Text. */
function zeile(b) {
const k = el("div", "werbung__stueck");
if (b.bild && BILDER[b.bild]) {
const bild = el("img", "werbung__bild");
bild.src = `assets/img/${BILDER[b.bild].datei}`;
bild.alt = ""; // die Aussage steht im Text daneben
bild.decoding = "async";
k.append(bild);
}
const texte = el("div", "werbung__texte");
const haupt = el("div", "werbung__text");
const treffer = CODE.exec(b.text || "");
if (treffer) {
haupt.append(document.createTextNode((b.text || "").slice(0, treffer.index)));
haupt.append(el("span", "werbung__code", treffer[1]));
haupt.append(document.createTextNode(
(b.text || "").slice(treffer.index + treffer[1].length)));
} else {
haupt.textContent = b.text || "";
}
texte.append(haupt);
if (b.unterzeile) {
const unter = el("div", "werbung__unter");
const t2 = CODE.exec(b.unterzeile);
if (t2) {
unter.append(document.createTextNode(b.unterzeile.slice(0, t2.index)));
unter.append(el("span", "werbung__code", t2[1]));
unter.append(document.createTextNode(
b.unterzeile.slice(t2.index + t2[1].length)));
} else {
unter.textContent = b.unterzeile;
}
texte.append(unter);
}
k.append(texte);
return k;
}
/* Hängt die Einblendung in einen Kasten und gibt einen Griff
zurück, mit dem man sie versorgt. */
function einhaengen(kasten) {
const wurzel = el("div", "werbung");
/* `aria-hidden`: Für ein Vorleseprogramm ist ein wanderndes Band
eine Zumutung -- es liest bei jedem Durchlauf neu vor. Die
Botschaften sind Werbung und keine Bedienung; wer die Seite
hört, verliert nichts, was er braucht. */
wurzel.setAttribute("aria-hidden", "true");
const band = el("div", "werbung__band");
const lauf = el("div", "werbung__lauf");
band.append(lauf);
wurzel.append(band);
const ecken = {};
for (const welches of ["dogi", "hase"]) {
const e = el("div", `werbung__ecke werbung__ecke--${welches}`);
const bild = el("img");
bild.src = `assets/img/${BILDER[welches].datei}`;
bild.alt = "";
bild.decoding = "async";
e.append(bild);
e.hidden = true;
ecken[welches] = e;
wurzel.append(e);
}
kasten.append(wurzel);
let uhr = null;
let zuletzt = "";
function aufraeumen() {
if (uhr) { clearInterval(uhr); uhr = null; }
}
/* Was gerade zu sehen ist.
*
* NICHTS WIRD NEU GEBAUT, WENN SICH NICHTS GEÄNDERT HAT. Der
* Stand kommt bei jedem Rundruf -- und ein Laufband, das dabei
* jedes Mal von vorn anfinge, spränge mitten im Satz zurück.
* Verglichen wird der ganze Inhalt, nicht nur die Anzahl: Wer
* eine Botschaft ändert, will sie geändert sehen. */
function setzen(w) {
const daten = w || {};
const band_ = Array.isArray(daten.band) ? daten.band : [];
const art = ["laufband", "wechsel"].includes(daten.art) ? daten.art : "aus";
const tempo = Number(daten.tempo) > 0 ? Number(daten.tempo) : 16;
/* Die Ecken -- unabhängig vom Band. Wer nur ein Wasserzeichen
will, soll kein Band einschalten müssen. */
const gross = Number(daten.ecke_gross) > 0 ? Number(daten.ecke_gross) : 1;
wurzel.style.setProperty("--ecke-gross", gross);
for (const [welches, feld] of [["dogi", "ecke_dogi"], ["hase", "ecke_hase"]]) {
const platz = String(daten[feld] || "aus");
const e = ecken[welches];
if (PLAETZE.has(platz)) {
e.dataset.platz = platz;
e.hidden = false;
} else {
e.hidden = true;
delete e.dataset.platz;
}
}
const kennung = JSON.stringify([art, tempo, band_]);
if (kennung === zuletzt) return;
zuletzt = kennung;
aufraeumen();
if (art === "aus" || band_.length === 0) {
band.hidden = true;
lauf.textContent = "";
wurzel.dataset.art = "aus";
return;
}
band.hidden = false;
wurzel.dataset.art = art;
lauf.textContent = "";
/* Weniger Bewegung? Dann wird aus dem Laufband ein Wechsel --
nicht „nichts". Siehe der Absatz oben im Kopf. */
const ruhig = window.matchMedia
&& window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const wirklich = (art === "laufband" && ruhig) ? "wechsel" : art;
wurzel.dataset.art = wirklich;
if (wirklich === "laufband") {
/* ZWEIMAL DIESELBE FOLGE. Das Band wandert um genau die
Breite EINER Folge; die zweite steht dann schon da, wo die
erste war. Ohne sie entstünde am Ende jedes Durchlaufs eine
leere Fläche, und das sieht aus, als sei die Einblendung
abgestürzt. */
for (let runde = 0; runde < 2; runde++) {
const folge = el("div", "werbung__folge");
band_.forEach((b) => folge.append(zeile(b)));
folge.setAttribute("aria-hidden", "true");
lauf.append(folge);
}
lauf.style.setProperty("--dauer", `${tempo}s`);
return;
}
/* Wechsel: alle Botschaften liegen übereinander, eine ist
sichtbar. Übereinander statt nacheinander eingesetzt, damit
die Höhe nicht springt -- die höchste Botschaft bestimmt
sie, und zwar von Anfang an. */
band_.forEach((b, i) => {
const z = zeile(b);
z.classList.add("werbung__stueck--wechsel");
z.dataset.dran = i === 0 ? "ja" : "nein";
lauf.append(z);
});
if (band_.length < 2) return;
let i = 0;
uhr = setInterval(() => {
const alle = lauf.children;
alle[i].dataset.dran = "nein";
i = (i + 1) % alle.length;
alle[i].dataset.dran = "ja";
}, tempo * 1000);
}
return { setzen, wurzel, aufraeumen };
}
window.Werbung = { einhaengen, BILDER, CODE };
})();