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:
2026-09-28 20:03:38 +02:00
co-authored by Claude Opus 5
parent 96bdd79a91
commit 99e62eebbe
55 changed files with 2043 additions and 776 deletions
+264 -12
View File
@@ -465,6 +465,36 @@
display: block;
background: #0b0a12;
}
/* ==== EIN GETEILTER BILDSCHIRM WIRD NICHT ZUGESCHNITTEN ============
Filipe: „waere es nicht einfach eine bildschirm uebertragung zu
installieren?"
`cover` ist fuer ein Gesicht richtig: Es fuellt den Rahmen, und
was an den Seiten fehlt, fehlt niemandem. Bei einem Bildschirm
faellt genau das weg, worum es geht -- 16:9 in einem 4:3-Fenster
verliert links und rechts je ein Achtel, und dort steht die
Werkzeugleiste.
`contain` UND EIN SCHWARZER GRUND. Die schwarzen Streifen sind
kein Schoenheitsfehler, sondern die einzige Art, ein Bild ganz zu
zeigen, dessen Form man nicht kennt.
UND DAS SEITENVERHAELTNIS GEHT AUF 16:9. Ein Bildschirm ist fast
nie 4:3; das Fenster passt sich an, statt den Rahmen mit Schwarz
zu fuellen. */
.kamera[data-bildschirm="ja"] { aspect-ratio: 16 / 9; }
.kamera[data-bildschirm="ja"] video {
object-fit: contain;
background: #000;
}
/* Ein Schild, damit niemand ein stehendes Bild fuer eine
eingefrorene Kamera haelt. */
.kamera[data-bildschirm="ja"] .kamera__name::before {
content: "Bildschirm · ";
color: var(--schrift-leise);
}
.kamera__name {
position: absolute; left: 8px; bottom: 8px;
padding: 3px 9px 4px;
@@ -972,6 +1002,42 @@
background: linear-gradient(180deg, #7de2a8, #47c97f);
box-shadow: 0 10px 22px -14px #47c97f;
}
/* ==== DER PREIS AM KAUFKNOPF ======================================
Filipe: „die leute sollen nur sehen was dogen kosten. sonst wissen
die ja nicht wie viel es kosten wird."
Klein und ruhig UNTER der Dogenzahl. Die Dogen sind die Waehrung
des Hauses, der Preis ist die Auskunft dazu -- andersherum waere
es ein Geldknopf mit Dogen als Beiwerk. Die Farbe ist dieselbe wie
der Knopftext, nur schwaecher: Ein zweiter Farbton auf einem Knopf
von 44 Pixeln ist einer zu viel. */
.geben__preis {
display: block;
margin-top: 1px;
font-size: .72rem; font-weight: 700;
font-variant-numeric: tabular-nums;
opacity: .62;
}
/* ==== UND DIE UMRECHNUNG FUER DIE LEITUNG =========================
Filipe: „damit ich auch immer weiss was es ist. aber nur ich."
Sie steht ueberall, wo er eine Dogenzahl EINTRAEGT oder PRUEFT --
an der Stufenleiter, beim Eintragen, in den Listen. Immer leise:
Sie ist die Nebenauskunft, nicht die Zahl, um die es geht.
Es gibt sie nur, wenn der Server den Kurs mitgeschickt hat -- und
den bekommt nur die Leitung. Ein Zuschauer sieht diese Klasse nie,
weil die Zeichenkette leer bleibt und `if (preis)` sie gar nicht
erst anlegt. */
.preis {
font-size: .72rem; font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--schrift-leise);
letter-spacing: 0; text-transform: none;
}
.preis--unter { display: block; margin-top: 1px; }
.geben__frei {
justify-self: start;
min-height: 34px; display: inline-flex; align-items: center;
@@ -1484,6 +1550,114 @@
und was dort passiert, passiert nur bei einem selbst, waehrend
alle anderen weiterlaufen.
--------------------------------------------------------------------- */
/* =====================================================================
DER REGIEPLATZ (28.09.2026)
Filipe: „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 läuft. Das liest man, man tippt es nicht.
RECHTS Was eingetragen wird. Das tippt man VOR der Sendung.
UNTEN Der Transport. Den fasst man WÄHREND der Sendung an --
und er liegt deshalb immer an derselben Stelle, über
die ganze Breite.
Vorher stand alles in einem Stapel untereinander, und wer im Live
an den Play-Knopf wollte, musste an den Eingabefeldern
vorbeiscrollen. Scrollen ist mitten in einer Sendung ein Griff
daneben.
`minmax(0, 1fr)` UND NICHT `1fr`: Ein langer Videotitel würde die
Spalte sonst aufziehen, statt abgeschnitten zu werden -- und dann
läuft die rechte Seite aus dem Pult. Dieselbe Falle wie bei den
Saalzeilen am selben Tag.
===================================================================== */
.regieplatz {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"links rechts"
"leiste leiste";
gap: 16px 20px;
align-items: start;
}
.regieplatz__seite { grid-area: links; display: grid; gap: 10px; align-content: start; }
.regieplatz__seite--rechts {
grid-area: rechts;
/* Eine ruhige Linie statt eines Kastens. Zwei Kästen nebeneinander
wären zwei Rahmen mehr auf einer Fläche, die ohnehin voll ist. */
border-left: 1px solid var(--rand);
padding-left: 20px;
}
.regieplatz__ueber {
margin: 0;
/* .72rem und nicht .68: 11,52 px ist die Untergrenze des Hauses,
10,88 waere darunter. Die Zahl ist nicht Geschmack -- sie steht
in `pruef-css-klassen`, und genau dort ist diese Zeile
aufgefallen. */
font-size: .72rem; font-weight: 800;
letter-spacing: .14em; text-transform: uppercase;
color: var(--schrift-leise);
}
/* ---- Die Transportleiste --------------------------------------------
Aufgebaut wie jeder Videospieler, den man kennt: Schiene über die
ganze Breite, darunter eine Reihe mit dem Transport in der MITTE.
Eine Anordnung, die man schon kennt, muss man nicht lernen.
Sie ist die einzige Fläche im Pult mit eigenem Grund -- weil sie
die einzige ist, die im Live gebraucht wird. */
.transport {
grid-area: leiste;
display: grid; gap: 10px;
padding: 12px 14px 13px;
border-radius: 15px;
border: 1px solid var(--rand-hell);
/* ==== SIE KLEBT UNTEN ==========================================
GEMESSEN, NICHT VERMUTET: Beim ersten Bau lag die Leiste bei
y=986 in einem 900 Pixel hohen Fenster -- unter dem Falz. Wer im
Live an den Play-Knopf wollte, haette also scrollen muessen, und
genau davon sollte der Umbau wegfuehren. Die Rechnung ging auf
(links, rechts, Leiste darunter), und das Ergebnis war trotzdem
falsch.
`sticky` loest beides auf einmal: Sie steht unten -- wie Filipe
es wollte -- und bleibt dabei immer sichtbar. Sie ist die
LETZTE Zeile des Rasters, also verdeckt sie nichts: Unter ihr
kommt nichts mehr.
Der Grund muss dafuer DICHT sein. Eine halbdurchsichtige Leiste,
durch die Text scrollt, ist genau die Art Flaeche, auf der man
sich im Live verliest. */
position: sticky;
bottom: 0;
z-index: 3;
background:
linear-gradient(180deg, rgba(23, 20, 34, .95), rgba(15, 13, 24, .98));
backdrop-filter: blur(12px) saturate(1.1);
-webkit-backdrop-filter: blur(12px) saturate(1.1);
box-shadow: 0 -14px 26px -22px #000, inset 0 1px 0 rgba(255, 255, 255, .06);
}
.transport__schiene { display: flex; align-items: center; gap: 12px; }
.transport__schiene .spur__schiene { flex: 1 1 auto; min-width: 0; }
.transport__reihe {
display: grid;
/* Drei gleich breite Teile -- nur so steht der Transport wirklich
in der Mitte und nicht dort, wo die Nachbarn gerade Platz
lassen. */
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
}
.transport__teil { display: flex; align-items: center; gap: 8px; min-width: 0; }
.transport__teil--mitte { justify-content: center; gap: 10px; }
.transport__teil--rechts { justify-content: flex-end; }
.spur {
display: grid; gap: 11px;
padding: 13px 14px 14px;
@@ -1521,7 +1695,6 @@
font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
font-size: .82rem;
}
.spur__band { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.spur__knopf {
appearance: none; cursor: pointer;
min-height: 40px; min-width: 44px; padding: 0 12px;
@@ -1533,11 +1706,18 @@
font-variant-numeric: tabular-nums;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
/* DER PLAY-KNOPF IST DER GROESSTE KNOPF DES HAUSES -- und das ist
kein Geschmack: Er ist der einzige, den man mitten in einer
Sendung blind treffen muss. Rund, damit er sich schon in der
Form von allen anderen unterscheidet. */
.spur__knopf--gross {
min-width: 52px;
background: rgba(255, 255, 255, .1);
min-width: 58px; min-height: 58px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
border-color: var(--rand-hell);
}
.spur__knopf--gross svg { width: 18px; height: 18px; fill: currentColor; }
.spur__knopf--gross:hover { background: rgba(255, 255, 255, .17); }
.spur__knopf--gross svg { width: 22px; height: 22px; fill: currentColor; }
.spur__knopf--weiter {
border-color: rgba(154, 183, 255, .34);
background: rgba(154, 183, 255, .12);
@@ -1551,7 +1731,11 @@
border-color: rgba(224, 161, 58, .36);
background: rgba(224, 161, 58, .13);
color: #f0cf9a;
max-width: 24rem;
/* Er steht seit dem 28.09. in der linken Spalte und nicht mehr in
einer eigenen Reihe: Dort ist die Breite der Spalte die Grenze,
nicht eine Zahl, die man beim naechsten Umbau vergisst. */
max-width: 100%;
justify-content: flex-start;
overflow: hidden;
}
.spur__knopf--tausch span {
@@ -1562,13 +1746,11 @@
/* ---- Geschwindigkeit ----
Eine Reihe kleiner Schalter, kein Schieberegler: Es gibt sechs
erlaubte Werte, und ein Regler, der zwischen ihnen einrastet, wäre
eine Bedienung, die etwas vortäuscht, das sie nicht kann. */
.spur__mehr {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 9px;
padding-top: 9px;
border-top: 1px solid var(--rand);
}
eine Bedienung, die etwas vortäuscht, das sie nicht kann.
Sie steht LINKS in der Transportleiste und nicht neben dem
Play-Knopf: Sie wird selten angefasst, und im Live fasst man in
die Mitte. */
.tempo { display: flex; gap: 4px; flex-wrap: wrap; }
.tempo__knopf {
appearance: none; cursor: pointer;
@@ -1998,6 +2180,17 @@
Element gedeckt ist, und hat den Eckwähler zu Recht gemeldet,
solange dort nur eine feste Höhe stand. Eine feste Höhe sagt
„genau so groß"; die Regel will wissen „mindestens so groß". */
/* Der Teilen-Knopf in der Senderleiste: gedrueckt heisst hier
„teilt gerade" und nicht „ist aus" -- deshalb leuchtet er, statt
durchgestrichen zu sein. */
#s-teilen[aria-pressed="true"] {
border-color: rgba(125, 226, 168, .5);
background: rgba(125, 226, 168, .16);
color: #9ff0c2;
}
#s-teilen svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.sender-knopf[disabled] { opacity: .4; cursor: default; }
@media (pointer: coarse) {
.kamgroesse__knopf { min-height: 44px; }
.kamecke__knopf { min-height: 44px; min-width: 52px; height: 44px; width: 52px; }
@@ -2063,6 +2256,39 @@
font-size: .72rem; font-weight: 700;
color: var(--schrift-leise); letter-spacing: .04em;
}
/* ==== DER HAUPTKNOPF EINER ZEILE ===================================
`knopf-still--haupt` stand schon an „Übernehmen" bei den Stufen --
und war NIRGENDS gestaltet. Eine Klasse, die kein Stilblatt kennt,
ist stille Absicht ohne Wirkung: Sie sieht im Quelltext aus, 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.
Dieselben Werte wie „Nächstes" in der Transportleiste: Ein Haus,
in dem die wichtige Handlung zweimal verschieden aussieht, hat
keine wichtige Handlung. */
.knopf-still--haupt {
border-color: rgba(154, 183, 255, .34);
background: rgba(154, 183, 255, .12);
color: #cfe0ff;
}
/* Ein Knopf, der gebraucht wird, aber nicht gesucht: leise Farbe,
und im Live grau. Rot waere er erst, wenn er etwas zerstoeren
koennte -- er leert nur den Schreibtisch. */
.knopf-still--leise {
border-color: var(--rand);
background: none;
color: var(--schrift-leise);
}
.knopf-still--leise:hover:not([disabled]) {
color: var(--an-hell);
border-color: rgba(216, 64, 74, .35);
background: rgba(216, 64, 74, .1);
}
.knopf-still--leise[disabled] { opacity: .4; cursor: default; }
.pult__zeile--ende { margin-top: 4px; align-items: center; }
.pult__feld select {
min-height: 44px; padding: 0 10px;
border-radius: 11px;
@@ -2089,6 +2315,32 @@
Grund, warum jemand hier ist.
===================================================================== */
@media (max-width: 860px) {
/* ==== AM HANDY WIRD AUS LINKS UND RECHTS EIN STAPEL ==========
Zwei Spalten auf 390 px waeren zwei Spalten mit je 180 px -- da
passt kein Videotitel hinein und kein Datumsfeld. Die
Transportleiste bleibt, wo sie ist: ganz unten, ueber die
ganze Breite. Sie ist das, was man im Live anfasst, und das
aendert sich mit der Bildschirmbreite nicht. */
.regieplatz {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "links" "rechts" "leiste";
gap: 14px;
}
.regieplatz__seite--rechts {
border-left: 0;
border-top: 1px solid var(--rand);
padding-left: 0;
padding-top: 14px;
}
/* Die drei gleich breiten Teile der Leiste gehen auf; uebrig
bleibt: Transport in der Mitte, alles andere darunter. */
.transport__reihe {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
gap: 12px;
}
.transport__teil--rechts { justify-content: center; }
.kino {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;