Reaction: Rollen sichtbar, Moderation im Live-Chat

Filipes Wunsch: „die modis, linke hand und rechte hand soll im chat extra aussehen und auch sachen wie stummschaltungen, sperrungen, meldunge und alles mögliche im chat machen können falls sich jemand nicht benimmt." WER SPRICHT Jeder Beitrag aus dem Team trägt jetzt ein Abzeichen: „Dogi", „Team" (beide Hände) und „Modi". Ein WORT und nicht nur eine Farbe — rund acht Prozent der Männer unterscheiden Rot und Grün schlecht, und hier hängt an der Unterscheidung etwas. Gedeckte Töne auf schwacher Fläche, 11,52 px (die Hausgrenze ist 11,5), weil daneben ein Video läuft. Die Wörter sagen den RANG nicht: Filipe steht nie über seinem Team. Eine Prüfung schlägt an, wenn dort „Chef", „Boss" oder „Leitung" stünde. WAS DIE MODERATION KANN Am Namen öffnet sich ein Menü mit vier Wegen: Beitrag wegnehmen, 10 Minuten stumm, aus der Sendung — und der Verweis in den Treff, wo längere Maßnahmen hingehören (mit Begründungspflicht und Frist in Tagen). Die Reaction baut kein zweites Sperrsystem daneben: Wer im Treff eine Pause hat, schreibt hier auch nicht. Neu ist nur, was der Treff nicht hat — MINUTEN. Höchstens eine Stunde; wer länger etwas braucht, nimmt den Treff. Nicht gegen das Team: Wer einen Modi stummschalten könnte, hätte einen Weg, die Moderation selbst auszuschalten, mitten in der Sendung. MELDEN DARF JEDER Die Moderation sieht nicht alles, wer mitliest schon. Zweimal melden zählt einmal (sonst füllt einer allein die Liste). Bei der Moderation erscheint im Kopf der Schiene „1 Meldung" — nur wenn etwas offen ist; eine Zahl, die immer dasteht und meistens null ist, wird nach drei Tagen nicht mehr gelesen. VIER FEHLER, DIE DABEI AUFGEFALLEN SIND 1. `oeffentlich()` nahm `meldungen` und `massnahmen` NICHT aus dem Rundruf. Der Rundruf wird aus dem Stand dessen gebaut, der gerade etwas getan hat — bei einer Moderationshandlung wären der gemeldete Text, der Name des Gemeldeten und der Name des MELDERS an jeden im Saal gegangen. Wer meldet, muss sich darauf verlassen können, dass das niemand sieht. 2. `meldung.js` hatte zwei Schlüssel doppelt: `geschlossen` und `nur_leitung`. Der spätere gewinnt stillschweigend — in der Hilfe stand dadurch „Der Saal ist zu". Ein Wort, ein Satz; eine Prüfung hält das jetzt fest. 3. Wer stummgeschaltet war, bekam bei OFFENEM Chat „Der Chat ist gerade zu" — der Aufrufer reimte sich den Grund aus der Chat-Stufe zusammen. Jetzt gibt `schreibGrund()` den echten Grund zurück. 4. Wer rausgenommen wurde, merkte nichts: Das Video lief weiter, nur die Anwesenheitsmeldung schlug still fehl. Jetzt hält alles an und es steht ein Satz da, der sagt, dass es nur für heute gilt. UND EINER, DEN NUR DAS BILDSCHIRMFOTO GEFUNDEN HAT Das Menü lag messbar komplett im Fenster (x=1099..1315 von 1440, y=652..840 von 900) und war trotzdem abgeschnitten: Die Chatliste rollt, und ein rollender Vorfahre beschneidet sein Kind. „Im Fenster" und „sichtbar" sind zwei verschiedene Fragen, und ich hatte die falsche gemessen. Das Menü hängt jetzt fest am Fenster und klappt nach oben oder links, wo kein Platz ist. Die Messung fasst seitdem mit `elementFromPoint` an jeden Knopf an, statt Rechtecke zu vergleichen. GEPRUEFT pruef-reaktion: 216 Prüfungen (vorher 156), 0 Fehler — zwei neue Abschnitte. mess-reaktion misst die Moderation jetzt im echten Browser: Abzeichen, Überlauf der Schiene, Menü, Stummschaltung beim Betroffenen, Meldung bis zur Moderation, Rauswurf. Dazu grün: pruef-meldungen, pruef-struktur, pruef-css-klassen, pruef-tippziele, pruef-deutsche-texte, pruef-hilfe. Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-28 09:32:10 +02:00
parent cb8e59bb08
commit a02cf5c026
52 changed files with 2071 additions and 691 deletions
@@ -428,6 +428,208 @@
 .beitrag[data-host="ja"] .beitrag__wer { color: var(--an-hell); }
 .beitrag[data-team="ja"] .beitrag__wer { color: #9ab7ff; }

+/* ==== WER SPRICHT ==================================================
+
+   Filipe: „die modis, linke hand und rechte hand soll im chat extra
+   aussehen."
+
+   EIN WORT UND NICHT NUR EINE FARBE. Rund acht Prozent der Männer
+   unterscheiden Rot und Grün schlecht -- und genau hier hängt an der
+   Unterscheidung etwas: Ist das jemand vom Team oder irgendwer? Eine
+   Auskunft, die nur in der Farbe steckt, ist für sie keine.
+
+   KLEIN, ABER NICHT ZU KLEIN. 11,5 px ist die Untergrenze des
+   Hauses; .72rem sind 11,52 px. Darunter wird aus einer Auskunft
+   eine Andeutung.
+
+   UND NICHT GRELL. Der Chat steht neben einem laufenden Video.
+   Alles, was hier selbst leuchtet, zieht den Blick vom Bild weg --
+   deshalb gedeckte Töne auf einer sehr schwachen Fläche, kein
+   Vollton. */
+.beitrag__rolle {
+  font-size: .72rem;
+  font-weight: 800;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  padding: 1px 7px 2px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  line-height: 1.5;
+}
+.beitrag__rolle[data-rolle="dogi"] {
+  color: var(--an-hell);
+  background: rgba(216, 64, 74, .16);
+  border-color: rgba(216, 64, 74, .34);
+}
+.beitrag__rolle[data-rolle="team"] {
+  color: #9ab7ff;
+  background: rgba(122, 156, 235, .14);
+  border-color: rgba(122, 156, 235, .30);
+}
+.beitrag__rolle[data-rolle="modi"] {
+  color: #86cdb2;
+  background: rgba(96, 175, 145, .14);
+  border-color: rgba(96, 175, 145, .30);
+}
+
+/* ---- Der Name als Angriffspunkt der Moderation -------------------
+   Er sieht aus wie der Name daneben und verrät sich nur beim
+   Darüberfahren. Ein Knopf, der wie ein Knopf aussieht, stünde in
+   jeder Zeile des Chats und würde ihn unruhig machen -- und die
+   Moderation weiß ohnehin, dass sie ihn hat. */
+.beitrag__name {
+  appearance: none;
+  border: 0; background: none; padding: 0;
+  font: inherit; color: inherit;
+  letter-spacing: inherit;
+  cursor: pointer;
+  border-bottom: 1px dotted rgba(170, 180, 210, .34);
+}
+.beitrag__name:hover,
+.beitrag__name:focus-visible { color: var(--schrift); border-bottom-color: currentColor; }
+
+.beitrag__melden {
+  margin-left: auto;
+  appearance: none; border: 0; background: none;
+  color: rgba(169, 163, 189, .55);
+  cursor: pointer; padding: 2px 4px; border-radius: 6px;
+  font-size: .72rem;
+}
+.beitrag__melden:hover { color: var(--gleich); background: rgba(224, 161, 58, .12); }
+.beitrag__melden:disabled { color: var(--gleich); cursor: default; opacity: .8; }
+/* Stehen „weg" und „melden" zusammen, schiebt nur das erste. */
+.beitrag__weg ~ .beitrag__melden { margin-left: 0; }
+
+/* ---- Das Menü am Namen -------------------------------------------
+   Es liegt ÜBER dem Chat und schiebt ihn nicht auseinander. Ein
+   Menü, das die Liste aufklappt, verschiebt alle Beiträge darunter --
+   und im Live liest man gerade weiter. */
+/* Lage und Groesse setzt das Skript -- siehe `menueHinstellen()`.
+   Hier steht nur, WIE es aussieht, nicht WO es liegt. */
+.modmenue {
+  position: fixed;
+  z-index: 400;
+  overflow-y: auto;
+  min-width: 13.5rem;
+  max-width: min(20rem, 78vw);
+  display: grid;
+  padding: 5px;
+  border-radius: 12px;
+  background: #100e18;
+  border: 1px solid var(--rand-hell);
+  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
+}
+.modmenue--liste {
+  min-width: 17rem;
+  gap: 4px;
+}
+.modmenue__knopf {
+  appearance: none; border: 0; background: none;
+  display: block; width: 100%;
+  text-align: left;
+  /* 44 px hoch. Das ist keine Formsache: Hier wird jemand stumm
+     geschaltet, und ein Fehlgriff trifft den Falschen. */
+  min-height: 44px;
+  padding: 10px 12px;
+  border-radius: 9px;
+  font: inherit; font-size: .84rem; font-weight: 600;
+  color: var(--schrift);
+  cursor: pointer;
+  text-decoration: none;
+}
+.modmenue__knopf:hover,
+.modmenue__knopf:focus-visible { background: rgba(255, 255, 255, .07); }
+.modmenue__knopf--weg { color: var(--schrift-leise); font-weight: 500; }
+
+.modmeldung {
+  display: grid; gap: 3px;
+  padding: 9px 10px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, .035);
+  border: 1px solid var(--rand);
+}
+.modmeldung__wer {
+  font-size: .72rem; font-weight: 800;
+  letter-spacing: .02em; color: var(--schrift-leise);
+}
+.modmeldung__text {
+  font-size: .84rem; line-height: 1.4; color: var(--schrift);
+  overflow-wrap: anywhere;
+}
+.modmeldung__schon { font-size: .72rem; color: var(--zu); }
+.modmeldung__knoepfe { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
+.modmeldung__knoepfe .modmenue__knopf {
+  width: auto; flex: 1 1 auto; text-align: center;
+  font-size: .78rem; padding: 10px 9px;
+}
+
+/* ---- Die Zahl im Kopf der Schiene --------------------------------
+   Sie steht nur da, wenn etwas offen ist. In Gold und nicht in Rot:
+   Rot gehört in diesem Haus dem Senden, und eine zweite rote Fläche
+   daneben würde beides entwerten. */
+.schiene__meldungen {
+  appearance: none;
+  font-size: .72rem; font-weight: 800;
+  letter-spacing: .04em;
+  padding: 4px 10px 5px;
+  min-height: 28px;
+  border-radius: 999px;
+  background: rgba(224, 161, 58, .16);
+  border: 1px solid rgba(224, 161, 58, .38);
+  color: var(--gleich);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.schiene__meldungen:hover { background: rgba(224, 161, 58, .26); }
+.schiene__meldungen[hidden] { display: none; }
+
+/* ==== WER MIT DEM FINGER MODERIERT =================================
+
+   Nicht die Bildschirmbreite fragt hier, sondern womit jemand tippt:
+   Ein Tablet ist 1024 px breit und wird trotzdem mit dem Finger
+   bedient.
+
+   DIE ZWEI ZEICHEN AM BEITRAG WERDEN NICHT GROESSER, SIE BEKOMMEN
+   EINE FLAECHE. Ein 44 px hoher Knopf in jeder Chatzeile würde die
+   Schiene aufblähen und den Chat unlesbar machen; eine unsichtbare
+   Fläche darum herum kostet nichts und trifft genauso.
+   Nachgerechnet: 20 px hoch plus zweimal 12 px sind 44. */
+@media (pointer: coarse) {
+  .schiene__meldungen { min-height: 44px; }
+  .beitrag__weg, .beitrag__melden { position: relative; }
+  .beitrag__weg::after, .beitrag__melden::after {
+    content: ''; position: absolute; inset: -12px;
+  }
+  /* Der Name ist der Angriffspunkt der Moderation -- und in einer
+     Chatzeile das kleinste Ziel überhaupt. */
+  .beitrag__name { position: relative; }
+  .beitrag__name::after { content: ''; position: absolute; inset: -12px -6px; }
+}
+
+/* ---- Aus der Sendung ---------------------------------------------
+   Eine ganze Fläche und kein Hinweisstreifen. Wer rausgenommen ist,
+   soll nicht daneben weiter zusehen -- und soll auch nicht raten, ob
+   gerade die Technik hakt. */
+.raus {
+  position: fixed; inset: 0; z-index: 900;
+  display: grid; align-content: center; justify-items: center;
+  gap: 10px;
+  padding: 28px 24px;
+  text-align: center;
+  background: #050408;
+}
+.raus__titel {
+  margin: 0;
+  font-size: 1.24rem; font-weight: 800;
+  color: var(--schrift);
+}
+.raus__text {
+  margin: 0; max-width: 34rem;
+  font-size: .95rem; line-height: 1.6;
+  color: var(--schrift-leise);
+}
+
 .schiene__form {
  display: flex; gap: 8px;
  padding: 12px 14px;