Highlights nach vorn, kraeftige Chatfarben, alle Farben in einer Kachel
screen1 -- HIGHLIGHTS AUF ANSCHLAGBRETTS PLATZ
Kein Tausch, sondern ein Aufruecken: Highlights nimmt die Stelle,
alle anderen wandern eine weiter. Inhaltlich stimmt das auch --
was die Leute selbst gemacht haben, steht vor dem, was ihnen
angesagt wird.
screen2 -- DIE CHATFARBEN SIND GERECHNET, NICHT GEGRIFFEN
Gemessen, was drinstand: Buntheit 0,002 bis 0,048, im Mittel 0,028
-- auf dem Bildschirm zwoelf Grautoene. Das lag nicht an fehlendem
Mut, sondern an der Fusszeile der Blase: Sie stand auf der leisen
Hausschrift, und gegen die darf die Flaeche kaum Farbe haben.
Deshalb ZUERST die Schrift (--blase-text/--blase-leise, eigene
Farben der Blase), DANN die Flaeche. Andersherum waere es der
Fehler vom selben Vormittag gewesen, als 27 von 31 Startkacheln
unlesbar wurden.
tools/chat-kacheln-rechnen.mjs liest beide Schriftfarben aus dem
CSS und rechnet daraus die hellste Flaeche, die sie noch tragen.
Ergebnis: Buntheit 0,072 bis 0,268, alle zwoelf auf DERSELBEN
Leuchtdichte -- also exakt demselben Kontrast (7,02 bis 7,13:1).
Zwei Anlaeufe waren falsch und stehen im Werkzeug begruendet:
- hoechste Buntheit nehmen, dann Kontrast pruefen. Musste
scheitern: gesaettigtes Gelb ist bei gleicher empfundener
Helligkeit viel heller als Blau.
- gleiche OKLab-Helligkeit statt gleicher Leuchtdichte. Das
Versprechen der zwoelf lautet "ueberall gleich gut lesbar",
und Lesbarkeit haengt an der Leuchtdichte, nicht am Eindruck.
WER NICHTS EINSTELLT, BEKOMMT TROTZDEM EINE FARBE. Gemessen an der
Live-Datenbank hatten vier von fuenfzehn eine gewaehlt -- der Chat
war fuer alle anderen einfarbig. Jetzt vergibt der Server einen der
elf bunten Toene aus der Personennummer, stabil. Schrittweite 4:
elf ist prim, also laufen alle Toene durch, und vier Schritte sind
131 Grad im Farbkreis -- aufeinanderfolgende Nummern landen so weit
auseinander wie moeglich. Mit id % 11 sassen zwei Nachbarn im
selben Gespraech magenta und rot nebeneinander.
Niemand verliert seine Wahl: veilchen, ziegel und moos sind die
drei gewaehlten und behalten ihren Farbbereich.
Dazu: Blasen mit 22px runden Kanten (nur die Ecke zur Person bleibt
spitz -- sie sagt, wer spricht), Lichtsaum oben innen, weicher
Schatten. Der Name hell und fett mit Rollenpunkt davor; er stand
auf leisem Grau mit 85 Prozent Deckung und war der schwaechste Text
der Seite, ausgerechnet der, der sagt, wer spricht.
ZWEI REGELBLOECKE FUER DIESELBE BLASE ZUSAMMENGELEGT. Der untere
gewann und hat an einem Tag zweimal Schaden angerichtet: Er stellte
die runden Kanten auf 16px zurueck (die Aenderung waere wirkungslos
ausgeliefert worden), und er mischte 26 Prozent Akzentfarbe in die
eigene Blase -- die hatte damit eine Farbe, die in CHAT_KACHELN
nicht vorkommt und die die Kontrastpruefung nie angesehen hat.
screen3 -- ALLE FARBEN DES HAUSES IN EINER KACHEL
tools/kachel-regenbogen.mjs leitet die 31 benutzten Toene ab
(bereicheFuer/zusatzBereicheFuer ueber alle Rollen und beide
Haeuser) und schreibt daraus einen Streifenverlauf mit harten
Kanten -- "nicht gemischt" war die eigentliche Ansage. Ein Verlauf
ergaebe Zwischentoene, die es im Haus nicht gibt.
Gegen einen deckenden Grund gemischt, nicht gegen --flaeche: Die
ist halbdurchsichtig, und durch 31 schmale Baender schien das
Buehnenbild -- sie verloren genau das, wofuer sie da sind.
Der Lesesaum ist staerker als auf den anderen Kacheln, und zwar
gemessen: Mit deren Werten kam der Text auf 4,45:1, fuenf
Hundertstel unter der Grenze. Gefunden hat das pruef-kachelfarben,
nicht der Blick -- 4,45 gegen 4,50 sieht man nicht.
pruef-buehne -- DIE ZAHL GEHOERT IN DIE BEDINGUNG
Die Abtastung wurde nachsichtiger (fremde Flaechen zaehlen nicht
mehr als Untergrund eines Textes). Das war richtig und hat einen
Fehlalarm beseitigt, der seit Tagen kam. Eine Lockerung kann aber
zu weit gehen, deshalb muss jetzt jeder gefundene Text in genau
einem von drei Toepfen landen: gemessen, ohne freien Untergrund,
oder aussortiert. Geht die Rechnung nicht auf, ist unterwegs etwas
still verschwunden.
Erster Anlauf war "mindestens 5 Stellen" -- und wurde auf
uebersicht.html sofort rot, weil die Seite nur vier Texte hat.
Eine feste Schwelle ist eine Rechnung von gestern; diese war keine
fuenf Minuten alt.
Gemessen: pruef-kachelfarben 22/0 (war 18, neu: die Willkommenskachel
traegt wirklich alle benutzten Farben, in beide Richtungen geprueft),
pruef-buehne 192/0, pruef-chatkachel 32/0, pruef-chat-optik 45/0,
pruef-chat 48/0, pruef-erwaehnung 69/0, pruef-start-ansicht 153/0,
pruef-treff 80/0, pruef-willkommen 67/0, pruef-treffchat 110/0,
pruef-css-klassen 30/0.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
+144
-18
@@ -21,12 +21,15 @@
|
||||
AUFRUF: node server/pruef-chatkachel.mjs
|
||||
===================================================================== */
|
||||
|
||||
import { mkdtempSync, rmSync } from "node:fs";
|
||||
import { mkdtempSync, rmSync, readFileSync } from "node:fs";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { dirname } from "node:path";
|
||||
import { tmpdir } from "node:os";
|
||||
import { join } from "node:path";
|
||||
import { eigenerPort } from "./helfer-port.mjs";
|
||||
import { notbremse } from "./helfer-notbremse.mjs";
|
||||
|
||||
const HIER = dirname(fileURLToPath(import.meta.url));
|
||||
const PORT = await eigenerPort(import.meta, "pruef-chatkachel");
|
||||
const ordner = mkdtempSync(join(tmpdir(), "ws-kachel-"));
|
||||
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
|
||||
@@ -66,23 +69,98 @@ const kontrast = (a, b) => {
|
||||
const [h, d] = [helligkeit(a), helligkeit(b)].sort((x, y) => y - x);
|
||||
return (h + 0.05) / (d + 0.05);
|
||||
};
|
||||
const SCHRIFT = "#e8f1fa"; /* die Textfarbe des Hauses */
|
||||
/* GEGEN WELCHE SCHRIFT? DIE, DIE WIRKLICH AUF DER BLASE STEHT.
|
||||
---------------------------------------------------------------------
|
||||
Hier stand `const SCHRIFT = "#e8f1fa"` — die Textfarbe des Hauses,
|
||||
abgeschrieben. Am 22.09.2026 bekam die Blase ihre EIGENE Schrift
|
||||
(--blase-text / --blase-leise, beide heller), damit die zwölf Töne
|
||||
überhaupt Farbe tragen können. Von da an maß diese Prüfung eine
|
||||
Farbe, die auf einer Blase gar nicht mehr vorkommt.
|
||||
|
||||
let schlechtester = 99, schlechtesterName = "";
|
||||
for (const k of CHAT_KACHELN) {
|
||||
const c = kontrast(SCHRIFT, k.farbe);
|
||||
if (c < schlechtester) { schlechtester = c; schlechtesterName = k.name; }
|
||||
Das ist genau der Fehler, der an den Startkacheln Wochen gekostet
|
||||
hat: eine Prüfung, die grün oder rot ist, ohne das anzusehen, was
|
||||
auf dem Bildschirm steht. Eine abgeschriebene Farbe ist eine
|
||||
Bestandsliste, und Bestandslisten altern.
|
||||
|
||||
Gelesen wird jetzt aus chat.css — derselben Stelle, aus der auch
|
||||
`tools/chat-kacheln-rechnen.mjs` liest. Eine Quelle, zwei Leser.
|
||||
Findet sie sich dort nicht, ist das der DRITTE AUSGANG: Die Prüfung
|
||||
kann nichts messen und sagt es, statt eine Ersatzfarbe zu erfinden
|
||||
und weiter grün zu leuchten. */
|
||||
const chatCss = readFileSync(
|
||||
join(HIER, "..", "workspace", "assets", "css", "chat.css"), "utf8");
|
||||
function ausCss(name) {
|
||||
const m = chatCss.match(new RegExp("--" + name + ":\\s*(#[0-9a-fA-F]{3,6})\\s*;"));
|
||||
return m ? m[1] : null;
|
||||
}
|
||||
/* Die Zahlen rechts sind dieselben wie im Rechenwerkzeug — 7:1 (AAA)
|
||||
für den Fließtext, weil der Chat die Seite ist, auf der am längsten
|
||||
gelesen wird, und 4,5:1 für die vier Handgriffe der Fußzeile. */
|
||||
const BLASEN_SCHRIFT = [
|
||||
["blase-text", ".chat-nachricht__text", 7],
|
||||
["blase-leise", ".chat-nachricht__fuss", 4.5],
|
||||
];
|
||||
for (const [name, wo, noetig] of BLASEN_SCHRIFT) {
|
||||
const farbe = ausCss(name);
|
||||
if (!farbe) {
|
||||
ok(false, `KONNTE NICHT NACHSEHEN: --${name} steht nicht in chat.css`
|
||||
+ " — ohne sie lässt sich der Kontrast der Kacheln nicht prüfen");
|
||||
continue;
|
||||
}
|
||||
let schlecht = Infinity, wer = "";
|
||||
for (const k of CHAT_KACHELN) {
|
||||
const c = kontrast(farbe, k.farbe);
|
||||
if (c < schlecht) { schlecht = c; wer = k.name; }
|
||||
}
|
||||
/* Die ANZAHL gehört in die Bedingung. Wäre CHAT_KACHELN je leer,
|
||||
bliebe `schlecht` auf Infinity und die Zeile wäre grün, ohne einen
|
||||
einzigen Ton angesehen zu haben. */
|
||||
ok(CHAT_KACHELN.length >= 8 && schlecht >= noetig,
|
||||
`${wo} trägt auf allen ${CHAT_KACHELN.length} Tönen `
|
||||
+ `(schlechtester ${wer}: ${schlecht.toFixed(2)}:1, nötig ${noetig})`);
|
||||
}
|
||||
/* 7:1 ist die strengere WCAG-Stufe (AAA für Fließtext). Ein Chat ist
|
||||
die Seite, auf der am längsten gelesen wird — hier die niedrigere
|
||||
Schwelle zu nehmen wäre am falschen Ende gespart. */
|
||||
ok(schlechtester >= 7,
|
||||
`auch der hellste Ton trägt die Schrift noch (${schlechtesterName}: ${schlechtester.toFixed(1)}:1, nötig 7)`);
|
||||
|
||||
/* GEGENPROBE: Eine Prüfung, die nur bestätigen kann, bestätigt nichts.
|
||||
Ein absichtlich zu heller Ton MUSS durchfallen — sonst wäre das
|
||||
Grün oben nur die Abwesenheit einer Messung. */
|
||||
{
|
||||
const hell = ausCss("blase-text") || "#f3f7fc";
|
||||
ok(kontrast(hell, "#8fa2bd") < 7,
|
||||
"Gegenprobe — ein zu heller Ton fiele durch "
|
||||
+ `(${kontrast(hell, "#8fa2bd").toFixed(2)}:1 gegen nötige 7)`);
|
||||
}
|
||||
|
||||
/* ALLE AUF DERSELBEN LEUCHTDICHTE — und das ist jetzt eine harte
|
||||
Aussage, keine Nachsicht mehr. Hier stand Faktor 6; das war die
|
||||
Toleranz für zwölf von Hand gewählte Grautöne. Seit sie gerechnet
|
||||
werden, liegen sie auf einem Wert, und der Rest ist Rundung auf
|
||||
ganze Bildpunkte. Ein Faktor über 1,1 hieße: jemand hat eine Farbe
|
||||
von Hand eingetragen und damit die Rechnung umgangen. */
|
||||
const spanne = Math.max(...CHAT_KACHELN.map((k) => helligkeit(k.farbe)))
|
||||
/ Math.max(1e-6, Math.min(...CHAT_KACHELN.map((k) => helligkeit(k.farbe))));
|
||||
ok(spanne < 6,
|
||||
`die Töne liegen nah beieinander (Faktor ${spanne.toFixed(1)}) — keiner sticht heraus`);
|
||||
ok(spanne < 1.1,
|
||||
`alle Töne liegen auf derselben Leuchtdichte (Faktor ${spanne.toFixed(3)}) `
|
||||
+ "— keiner ist heller oder dunkler als die anderen");
|
||||
|
||||
/* UND SIE MÜSSEN BUNT SEIN. Gemessen an dem, was vor dem 22.09.2026
|
||||
drinstand: Buntheit 0,002 bis 0,048, im Mittel 0,028 — zwölf
|
||||
Grautöne. Ohne diese Zeile könnte die Liste unbemerkt dorthin
|
||||
zurückfallen, und alle Kontrastprüfungen oben blieben grün. */
|
||||
const buntheit = (hexf) => {
|
||||
const z = hexf.replace("#", "");
|
||||
const [r, g, b] = [0, 2, 4].map((i) => parseInt(z.slice(i, i + 2), 16) / 255)
|
||||
.map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
|
||||
const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
|
||||
const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
|
||||
const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
|
||||
return Math.hypot(1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
|
||||
0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s);
|
||||
};
|
||||
/* „grund" ist der bewusst neutrale Standard und zählt hier nicht mit. */
|
||||
const bunt = CHAT_KACHELN.filter((k) => k.wert !== "grund").map((k) => buntheit(k.farbe));
|
||||
ok(bunt.length >= 8 && Math.min(...bunt) >= 0.06,
|
||||
`alle ${bunt.length} Farbtöne sind wirklich bunt `
|
||||
+ `(blassester ${Math.min(...bunt).toFixed(3)}, vor dem Umbau lag der bunteste bei 0,048)`);
|
||||
|
||||
/* KEINE DOPPELTE FARBE. Zwei gleiche Töne wären zwei Namen für
|
||||
dieselbe Kachel — man wählt den zweiten und sieht keinen Unterschied. */
|
||||
@@ -156,9 +234,42 @@ const verlauf = await (await fetch(BASIS + `/workspace/api/chat/raeume/${raum}/n
|
||||
const vonLuna = (verlauf.nachrichten || []).find((n) => n.von === "Luna");
|
||||
ok(vonLuna?.von_kachel === "moos",
|
||||
`Filipe bekommt Lunas Kachel mitgeliefert (${vonLuna?.von_kachel})`);
|
||||
/* UND WER NICHTS EINGESTELLT HAT, TRÄGT TROTZDEM EINE FARBE.
|
||||
---------------------------------------------------------------------
|
||||
Hier stand bis zum 22.09.2026 das Gegenteil: `ok(!vonFilipe
|
||||
?.von_kachel, "und seine eigene bleibt Standard …")`. Das war
|
||||
richtig, solange „nichts eingestellt" Grau hieß.
|
||||
|
||||
Gemessen an der Live-Datenbank hatten vier von fünfzehn Personen
|
||||
eine Farbe gewählt — der Chat war also für alle anderen einfarbig,
|
||||
egal wie gut die zwölf Töne gerechnet sind. Seitdem bekommt jede
|
||||
Person von sich aus einen der elf bunten Töne, stabil aus ihrer ID.
|
||||
|
||||
Geprüft wird jetzt beides, und das Zweite ist das Wichtigere:
|
||||
dass die Farbe SICH NICHT ÄNDERT. Eine Person, die heute grün und
|
||||
morgen rot ist, ist schlechter als eine ohne Farbe — man merkt sich
|
||||
die falsche. */
|
||||
const vonFilipe = (verlauf.nachrichten || []).find((n) => n.von === "Filipe");
|
||||
ok(!vonFilipe?.von_kachel,
|
||||
"und seine eigene bleibt Standard, solange er nichts einstellt");
|
||||
const bunteToene = CHAT_KACHELN.filter((k) => k.wert !== "grund").map((k) => k.wert);
|
||||
ok(bunteToene.length >= 8 && bunteToene.includes(vonFilipe?.von_kachel),
|
||||
`und wer nichts eingestellt hat, trägt trotzdem eine Farbe `
|
||||
+ `(${vonFilipe?.von_kachel})`);
|
||||
|
||||
/* Zweimal fragen muss dasselbe ergeben. */
|
||||
const nochmal = await (await fetch(BASIS + `/workspace/api/chat/raeume/${raum}/nachrichten`,
|
||||
{ headers: { Cookie: kFilipe } })).json();
|
||||
const vonFilipe2 = (nochmal.nachrichten || []).find((n) => n.von === "Filipe");
|
||||
ok(!!vonFilipe?.von_kachel && vonFilipe2?.von_kachel === vonFilipe?.von_kachel,
|
||||
`und es ist beim zweiten Abruf dieselbe (${vonFilipe2?.von_kachel})`);
|
||||
|
||||
/* Der Wähler darf sie NICHT als gewählt anhaken — sonst sähe es aus,
|
||||
als hätte man selbst etwas eingestellt, und der neutrale Ton wäre
|
||||
unerreichbar geworden. */
|
||||
const meins = await (await fetch(BASIS + "/workspace/api/chat/kacheln",
|
||||
{ headers: { Cookie: kFilipe } })).json();
|
||||
ok(meins.meine == null && bunteToene.includes(meins.automatisch),
|
||||
`im Wähler steht trotzdem nichts angehakt (meine=${meins.meine}), `
|
||||
+ `und die automatische wird genannt (${meins.automatisch})`);
|
||||
|
||||
const pw = await import("file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
|
||||
const browser = await pw.chromium.launch();
|
||||
@@ -313,7 +424,21 @@ try {
|
||||
return c.backgroundColor + " | " + c.backgroundImage;
|
||||
});
|
||||
const vorher = await kachelBild();
|
||||
await s.click('.chat-kachelwahl__ton[data-wert="wein"]');
|
||||
/* WELCHEN TON ANKLICKEN? EINEN AUS DER LISTE, NICHT EINEN GEMERKTEN.
|
||||
Hier stand `data-wert="wein"` fest im Text. Am 22.09.2026 wurden
|
||||
die zwoelf Toene neu gerechnet, `wein` fiel weg -- und die Pruefung
|
||||
wartete 30 Sekunden auf einen Knopf, den es nicht mehr gibt, und
|
||||
brach ab. Der Fehler lag nicht im Chat, sondern in dieser Zeile.
|
||||
|
||||
Genommen wird jetzt der erste Ton, der NICHT die Voreinstellung
|
||||
ist. Damit ist garantiert, dass sich etwas aendert -- und die
|
||||
Zeile ueberlebt jede kuenftige Umbenennung. */
|
||||
const probeTon = CHAT_KACHELN.find((k) => k.wert !== "grund");
|
||||
if (!probeTon) {
|
||||
ok(false, "KONNTE NICHT NACHSEHEN: es gibt keinen Ton ausser dem Standard");
|
||||
throw new Error("keine Toene zum Pruefen");
|
||||
}
|
||||
await s.click(`.chat-kachelwahl__ton[data-wert="${probeTon.wert}"]`);
|
||||
await s.waitForTimeout(600);
|
||||
const nachher = await kachelBild();
|
||||
ok(vorher !== nachher,
|
||||
@@ -322,8 +447,9 @@ try {
|
||||
/* UND ES IST GESPEICHERT, nicht nur gemalt. */
|
||||
const nachSetzen = await (await fetch(BASIS + "/workspace/api/chat/kacheln",
|
||||
{ headers: { Cookie: kFilipe } })).json();
|
||||
ok(nachSetzen.meine === "wein",
|
||||
`und die Wahl ist gespeichert, nicht nur gemalt (${nachSetzen.meine})`);
|
||||
ok(nachSetzen.meine === probeTon.wert,
|
||||
`und die Wahl ist gespeichert, nicht nur gemalt `
|
||||
+ `(${nachSetzen.meine}, erwartet ${probeTon.wert})`);
|
||||
|
||||
ok(konsole.length === 0,
|
||||
konsole.length ? "Fehler im Browser: " + konsole[0].slice(0, 80) : "keine Fehler im Browser");
|
||||
|
||||
Reference in New Issue
Block a user