Filipe: "ich raste aus im ernst, was verstehst du nicht darunter wenn
ich sage das alle kacheln eine andere farbe haben sollen ich seh
immer wieder sehr viele die einfach komplett die gleiche farbe haben."
ER HATTE RECHT, UND MEINE PRUEFUNG WAR TROTZDEM GRUEN.
Der Grund war ein Messfehler, und zwar meiner: pruef-kachelfarben las
`--ton` aus start.css -- die ROHFARBE. Die lag zwischen allen 31
Kacheln weit auseinander (0,0978 in OKLab). Nur steht sie so nie auf
dem Bildschirm.
GEMESSEN an echten Bildpunkten (neu: tools/kachel-echtfarbe.mjs):
Rohfarben: 0,0978 auseinander
Auf dem Bildschirm: 0,0141
Es kamen an: 14,4 Prozent
Fuer ein Auge gleich: ACHT Paare
Drei Stellen haben die Farbe geschluckt, alle in .kachel:
1. Eine Wolke mit 16 Prozent -- in immer DEMSELBEN Blau, auf jeder
Kachel. Der staerkste Gleichmacher der ganzen Wand. Sie traegt
jetzt den Ton der Kachel.
2. Die Vignette legte bis zu 55 Prozent Dunkelblau darueber.
3. Der Grund trug den Ton zu 24 Prozent und ging ab 58 Prozent in
fast reines Schwarz. Zwei Drittel jeder Kachel waren damit
dieselbe Farbe, egal welcher Ton darueber stand.
Danach: 51,1 Prozent kamen an, NULL ununterscheidbare Paare.
UND DANN HAETTE ICH EINEN FEHLER GEGEN EINEN ANDEREN GETAUSCHT.
Gemessen an jedem einzelnen Kacheltext: VORHER war 1 von 31 unter
4,5:1, DANACH 27 von 31. Also genau das, was Filipe schon zweimal
gemeldet hat ("man bekommt fast nichts gelesen"). Kein Messwert hat
es angezeigt -- pruef-buehne nimmt Stichproben und traf die
Kacheltexte nicht.
Behoben mit einem Lesesaum: ein dunkler Verlauf VON UNTEN, der genau
den Streifen abdunkelt, auf dem gelesen wird, und die oberen zwei
Drittel in Ruhe laesst. Dasselbe Mittel, mit dem jede Bildunterschrift
auf einem Foto lesbar gemacht wird.
Texte unter 4,5:1: 1 -> 27 -> 0
Farbe kommt an: 14,4 % -> 51,1 % -> 36,5 %
VERTRAULICH MELDEN IST JETZT KNALLROT.
Filipe: "nicht die kachel draussen soll rot sein sondern die kachel
vertraulich melden nur die soll knall rot sein!!!" Ich hatte screen5
und screen6 vertauscht. Ringtausch ohne neue Farbe:
Vertraulich melden 28 -> 38 (#ff1a1a, knallrot)
Draussen 38 -> 39 (die Farbe, die Regeln & Hilfe hatte)
Regeln & Hilfe 39 -> 28 (das frei gewordene Gruen)
NEU, UND DER EIGENTLICHE LERNEFFEKT:
server/helfer-kachel-echtfarbe.mjs misst beides in EINER Messung --
Farbunterschied UND Lesbarkeit. Wer sie trennt, verbessert das eine
und verliert das andere; genau das ist heute passiert. Benutzt von
der Pruefung und vom Werkzeug, damit es nur eine Fassung gibt.
pruef-kachelfarben 18/0 (war 13), davon fuenf am echten Bildschirm:
- kein Paar sieht auf dem Bildschirm gleich aus (0,0357)
- mindestens ein Drittel der Rohfarbe kommt an (36,5 %)
- jeder Kacheltext erreicht 4,5:1 (schlechtester: 4,80:1)
Mit drittem Ausgang: kein Browser heisst "konnte nicht nachsehen",
nicht "in Ordnung".
Co-Authored-By: Claude Opus 5 <[email protected]>
309 lines
14 KiB
JavaScript
309 lines
14 KiB
JavaScript
/* =====================================================================
|
|
pruef-kachelfarben.mjs — Keine zwei Kacheln sehen gleich aus
|
|
---------------------------------------------------------------------
|
|
Filipe, 22.09.2026: „es sind viele kacheln die noch ähnliche farbe
|
|
haben, alle die sich ähnlich sind bitte immer verändern bis auf eins
|
|
… alle kacheln sollen eine andere farbe haben." Und: „diese zwei
|
|
kacheln sollen egal wie dan auch so bleiben wie hier erwartet."
|
|
|
|
WARUM DAS EINE PRÜFUNG BRAUCHT UND NICHT NUR EINEN LAUF
|
|
Die Farben einmal auseinanderzuziehen war eine Rechnung. Sie in
|
|
einem halben Jahr noch auseinander zu haben, ist die schwierigere
|
|
Aufgabe: Wer morgen eine Kachel anlegt, greift sich eine Tonnummer
|
|
— und merkt nicht, dass sie neben einer anderen liegt. Auf dem
|
|
Bildschirm sieht das nicht nach einem Fehler aus, sondern nach zwei
|
|
Kacheln, die man verwechselt.
|
|
|
|
Und die zwei festgelegten Töne kann ein späterer Farblauf jederzeit
|
|
überschreiben. Eine Festlegung, die nur in einem Kommentar steht,
|
|
ist eine Bitte; eine, die rot wird, ist eine Regel.
|
|
|
|
VIER FRAGEN
|
|
1. GETRENNT — kein Paar benutzter Töne liegt näher beieinander als
|
|
die Schwelle.
|
|
2. EINDEUTIG — keine Ansicht (Rolle x Haus) zeigt zwei Kacheln mit
|
|
derselben Farbe.
|
|
3. FESTGELEGT — Ton 28 trägt „Vertraulich melden", Ton 38 ist das
|
|
knallige Rot von „Draußen".
|
|
4. LESBAR UND NICHT BLASS — 4,5:1 gegen den Grund, Buntheit über
|
|
der gemessenen Schwelle.
|
|
|
|
Welche Töne benutzt werden, wird ABGELEITET (`bereicheFuer` /
|
|
`zusatzBereicheFuer` über alle Rollen und beide Häuser), nicht
|
|
aufgezählt. Eine zweite Liste wäre die, die veraltet.
|
|
===================================================================== */
|
|
|
|
import { readFileSync } from "node:fs";
|
|
import { fileURLToPath } from "node:url";
|
|
import { dirname, join } from "node:path";
|
|
|
|
const HIER = dirname(fileURLToPath(import.meta.url));
|
|
const CSS = join(HIER, "..", "workspace", "assets", "css", "start.css");
|
|
const GRUND = "#0a121e";
|
|
|
|
/* DIE SCHWELLE IST GEMESSEN, NICHT GERATEN.
|
|
Vor dem Lauf vom 22.09.2026 lag das engste Paar der benutzten Töne
|
|
bei 0,0741 („Was ansteht" neben dem neuen Rot von „Draußen") —
|
|
das war der Zustand, den Filipe als „ähnlich" gemeldet hat.
|
|
Danach: 0,1028. 0,090 liegt dazwischen: Der heutige Stand hat
|
|
Luft, ein Rückfall auf „sieht gleich aus" schlägt an. */
|
|
const MINDEST_ABSTAND = 0.090;
|
|
|
|
/* Der Median der Buntheit aller Töne lag bei 0,168, die fünf
|
|
blassesten zwischen 0,064 und 0,088. Geprüft werden nur die
|
|
BENUTZTEN — unter den unbenutzten stehen noch blasse, die niemand
|
|
sieht und die beim nächsten Gebrauch ohnehin neu gerechnet werden. */
|
|
const MINDEST_BUNTHEIT = 0.12;
|
|
|
|
/* Was festgelegt ist — mit dem Grund, aus dem es festgelegt wurde. */
|
|
const FESTGELEGT = [
|
|
/* BERICHTIGT AM 22.09.2026. Ich hatte screen5 und screen6 vertauscht
|
|
und das Rot auf "Draussen" gelegt. Filipe: "nicht die kachel
|
|
draussen soll rot sein sondern die kachel vertraulich melden nur
|
|
die soll knall rot sein!!!" */
|
|
{ ton: 38, kachel: "Vertraulich melden", hex: "#ff1a1a",
|
|
warum: "knalliges Rot -- wer den vertraulichen Weg sucht, soll ihn finden, ohne zu lesen" },
|
|
{ ton: 39, kachel: "Draußen",
|
|
warum: "die Farbe, die Regeln & Hilfe hatte -- ausdruecklicher Wunsch (screen5)" },
|
|
];
|
|
|
|
let ok = 0, fehl = 0;
|
|
const pruef = (name, bedingung, zusatz = "") => {
|
|
if (bedingung) { ok++; console.log(` OK ${name}`); }
|
|
else { fehl++; console.log(` FEHL ${name}${zusatz ? " — " + zusatz : ""}`); }
|
|
};
|
|
|
|
/* ---- Farbrechnung (OKLab, wie in den Farbwerkzeugen) --------------- */
|
|
const linear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
|
|
const srgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
|
|
function oklab(hex) {
|
|
const [r, g, b] = srgb(hex).map(linear);
|
|
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 [
|
|
0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
|
|
1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
|
|
0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
|
|
];
|
|
}
|
|
const lum = (hex) => {
|
|
const [r, g, b] = srgb(hex).map(linear);
|
|
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
|
};
|
|
const kontrast = (hex) => (lum(hex) + 0.05) / (lum(GRUND) + 0.05);
|
|
const buntheit = (hex) => { const [, a, b] = oklab(hex); return Math.hypot(a, b); };
|
|
const abstand = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
|
|
|
|
console.log("\n===== KACHELFARBEN =====\n");
|
|
|
|
/* ---- start.css lesen: vollständig oder gar nicht ------------------- */
|
|
const css = readFileSync(CSS, "utf8");
|
|
const roh = new Set([...css.matchAll(/\[data-ton="(\d+)"\]/g)].map((m) => Number(m[1])));
|
|
const farben = new Map();
|
|
for (const zeile of css.split("\n")) {
|
|
const m = zeile.match(/\[data-ton="(\d+)"\]\s*\{\s*--ton:\s*(#[0-9a-fA-F]{6})/);
|
|
if (m) farben.set(Number(m[1]), m[2].toLowerCase());
|
|
}
|
|
/* DER DRITTE AUSGANG. Liest die Prüfung nicht alle Töne, misst sie
|
|
gegen einen Stand, den es nicht gibt — und wäre womöglich grün. */
|
|
if (roh.size !== farben.size) {
|
|
console.error(`KONNTE NICHT NACHSEHEN: ${roh.size} Toene stehen in start.css, `
|
|
+ `gelesen wurden ${farben.size}.`);
|
|
console.error(" Vermutlich hat sich die Schreibweise der Zeile geaendert.");
|
|
process.exit(2);
|
|
}
|
|
console.log(` (${farben.size} Toene in start.css gelesen)`);
|
|
|
|
/* ---- Welche Töne ein Mensch wirklich sieht (abgeleitet) ------------ */
|
|
const w = await import("./workspace.js");
|
|
const rollen = ["admin", "hand", "linke", "modi", "gast",
|
|
"manager", "scout", "creator", "spicy"];
|
|
const benutzt = new Map(); /* ton -> Set(Namen) */
|
|
const ansichten = [];
|
|
for (const r of rollen) {
|
|
for (const haus of ["crew", "agentur"]) {
|
|
const p = { id: 1, rolle: r, name: "X" };
|
|
let k = [];
|
|
try {
|
|
k = [...(w.bereicheFuer(p, haus) || []), ...(w.zusatzBereicheFuer(p, haus) || [])];
|
|
} catch { continue; }
|
|
const hier = new Map();
|
|
for (const kachel of k) {
|
|
if (!kachel || kachel.ton == null) continue;
|
|
if (!benutzt.has(kachel.ton)) benutzt.set(kachel.ton, new Set());
|
|
benutzt.get(kachel.ton).add(kachel.name);
|
|
if (!hier.has(kachel.ton)) hier.set(kachel.ton, []);
|
|
hier.get(kachel.ton).push(kachel.name);
|
|
}
|
|
if (hier.size) ansichten.push({ rolle: r, haus, toene: hier });
|
|
}
|
|
}
|
|
|
|
/* DIE ZAHL GEHÖRT IN DIE BEDINGUNG. Fände diese Prüfung null benutzte
|
|
Töne, wäre alles Folgende trivial grün — und bliebe es für immer. */
|
|
pruef(`es gibt benutzte Kachelfarben (${benutzt.size} Toene, ${ansichten.length} Ansichten)`,
|
|
benutzt.size >= 20 && ansichten.length >= 5,
|
|
`nur ${benutzt.size} Toene in ${ansichten.length} Ansichten gefunden`);
|
|
|
|
/* ---- 1. Getrennt ---------------------------------------------------- */
|
|
console.log("\n=== Kein Paar sieht gleich aus ===");
|
|
{
|
|
const liste = [...benutzt.keys()]
|
|
.filter((n) => farben.has(n))
|
|
.map((n) => ({ n, hex: farben.get(n), lab: oklab(farben.get(n)) }));
|
|
pruef(`jeder benutzte Ton ist in start.css definiert (${liste.length}/${benutzt.size})`,
|
|
liste.length === benutzt.size,
|
|
"eine Kachel zeigt auf eine Tonnummer, die es nicht gibt");
|
|
|
|
let eng = { d: Infinity, a: null, b: null };
|
|
for (let i = 0; i < liste.length; i++) {
|
|
for (let j = i + 1; j < liste.length; j++) {
|
|
const d = abstand(liste[i].lab, liste[j].lab);
|
|
if (d < eng.d) eng = { d, a: liste[i], b: liste[j] };
|
|
}
|
|
}
|
|
const namen = (t) => [...(benutzt.get(t.n) || [])].join("/");
|
|
pruef(`das engste Paar liegt ueber ${MINDEST_ABSTAND} (${eng.d.toFixed(4)}: `
|
|
+ `${namen(eng.a)} <-> ${namen(eng.b)})`,
|
|
eng.d >= MINDEST_ABSTAND,
|
|
`${eng.d.toFixed(4)} zwischen Ton ${eng.a?.n} und ${eng.b?.n}`);
|
|
}
|
|
|
|
/* ---- 2. Eindeutig je Ansicht --------------------------------------- */
|
|
console.log("\n=== Keine Ansicht zeigt zwei gleiche ===");
|
|
{
|
|
const treffer = [];
|
|
for (const a of ansichten) {
|
|
for (const [ton, namen] of a.toene) {
|
|
if (namen.length > 1) treffer.push(`${a.rolle}/${a.haus}: Ton ${ton} = ${namen.join(" + ")}`);
|
|
}
|
|
}
|
|
pruef(`keine Ansicht zeigt zwei Kacheln mit derselben Farbe (${ansichten.length} geprueft)`,
|
|
treffer.length === 0, treffer.join(" | "));
|
|
}
|
|
|
|
/* ---- 3. Festgelegt -------------------------------------------------- */
|
|
console.log("\n=== Was festgelegt ist, bleibt ===");
|
|
for (const f of FESTGELEGT) {
|
|
const traeger = [...(benutzt.get(f.ton) || [])];
|
|
pruef(`Ton ${f.ton} traegt "${f.kachel}" (${f.warum})`,
|
|
traeger.includes(f.kachel),
|
|
`Ton ${f.ton} traegt stattdessen: ${traeger.join(", ") || "nichts"}`);
|
|
if (f.hex) {
|
|
pruef(` und hat die Farbe ${f.hex} (jetzt ${farben.get(f.ton)})`,
|
|
farben.get(f.ton) === f.hex,
|
|
`${farben.get(f.ton)} statt ${f.hex}`);
|
|
}
|
|
}
|
|
|
|
/* ---- 4. Lesbar und nicht blass -------------------------------------- */
|
|
console.log("\n=== Lesbar und kraeftig ===");
|
|
{
|
|
const dunkel = [], blass = [];
|
|
for (const n of benutzt.keys()) {
|
|
const hex = farben.get(n);
|
|
if (!hex) continue;
|
|
if (kontrast(hex) < 4.5) dunkel.push(`Ton ${n} ${hex} (${kontrast(hex).toFixed(2)}:1)`);
|
|
if (buntheit(hex) < MINDEST_BUNTHEIT) blass.push(`Ton ${n} ${hex} (${buntheit(hex).toFixed(3)})`);
|
|
}
|
|
pruef(`alle ${benutzt.size} benutzten Toene erreichen 4,5:1 gegen den Grund`,
|
|
dunkel.length === 0, dunkel.join(", "));
|
|
pruef(`keiner ist blasser als ${MINDEST_BUNTHEIT}`,
|
|
blass.length === 0, blass.join(", "));
|
|
}
|
|
|
|
/* ---- Gegenprobe: kann diese Pruefung ueberhaupt rot werden? --------- */
|
|
console.log("\n=== Gegenprobe ===");
|
|
{
|
|
/* Zwei erfundene Toene, die fast gleich sind. Fände die Rechnung sie
|
|
nicht, waere jede gruene Meldung oben wertlos. */
|
|
const a = oklab("#3366cc"), b = oklab("#3467cd");
|
|
pruef(`zwei fast gleiche Farben werden als zu nah erkannt `
|
|
+ `(${abstand(a, b).toFixed(4)} < ${MINDEST_ABSTAND})`,
|
|
abstand(a, b) < MINDEST_ABSTAND);
|
|
const weit = oklab("#ff1a1a"), weit2 = oklab("#11aadb");
|
|
pruef(`zwei deutlich verschiedene nicht (${abstand(weit, weit2).toFixed(4)})`,
|
|
abstand(weit, weit2) >= MINDEST_ABSTAND);
|
|
pruef("ein zu dunkler Ton wuerde auffallen (#101820)", kontrast("#101820") < 4.5);
|
|
pruef("ein blasser Ton wuerde auffallen (#ffe5ae)", buntheit("#ffe5ae") < MINDEST_BUNTHEIT);
|
|
}
|
|
|
|
/* =====================================================================
|
|
5. WAS AUF DEM BILDSCHIRM ANKOMMT -- der Teil, der gefehlt hat
|
|
=====================================================================
|
|
Alles bisher misst `--ton`: die ROHFARBE aus start.css. Und genau
|
|
damit war diese Pruefung gruen, waehrend Filipe am 22.09.2026 sagte:
|
|
"ich seh immer wieder sehr viele die einfach komplett die gleiche
|
|
farbe haben."
|
|
|
|
Er hatte recht. Die Kachel zeichnet ihren Ton nicht als Flaeche,
|
|
sondern als Verlauf unter einem Sternenfeld, einer Vignette und
|
|
(bis heute) einer fest blauen Wolke. Gemessen an echten
|
|
Bildpunkten: Von 0,0978 Abstand kamen 0,0141 an -- 14,4 Prozent.
|
|
ACHT Paare waren fuer ein Auge nicht mehr zu unterscheiden.
|
|
|
|
Eine Pruefung, die die Rohfarbe misst, beantwortet die Frage
|
|
"sehen die Kacheln verschieden aus" NICHT. Sie beantwortet
|
|
"stehen verschiedene Zahlen in der Datei". Das ist derselbe Fehler
|
|
wie am 01.09.2026 beim `every()` auf einem leeren Feld: Sie lief,
|
|
sie war gruen, und sie war wertlos.
|
|
|
|
Deshalb hier der Browser. Er kostet zwei Minuten -- und er ist der
|
|
einzige, der die Frage beantworten kann.
|
|
===================================================================== */
|
|
if (process.env.OHNE_BROWSER !== "ja") {
|
|
console.log("\n=== Und was davon auf dem Bildschirm ankommt ===");
|
|
const { pruefeEchteFarben } = await import("./helfer-kachel-echtfarbe.mjs");
|
|
const e = await pruefeEchteFarben();
|
|
|
|
if (!e.moeglich) {
|
|
/* DER DRITTE AUSGANG. Kein Browser, kein openssl, kein Port --
|
|
das ist "konnte nicht nachsehen", nicht "in Ordnung". */
|
|
console.log(` KONNTE NICHT NACHSEHEN: ${e.grund}`);
|
|
console.log(" (mit OHNE_BROWSER=ja laeuft die Pruefung bewusst ohne diesen Teil)");
|
|
fehl++;
|
|
} else {
|
|
pruef(`${e.anzahl} Kacheln am echten Bildschirm gemessen`, e.anzahl >= 20,
|
|
`nur ${e.anzahl} gefunden`);
|
|
|
|
/* DIE ZAHL GEHOERT IN DIE BEDINGUNG -- sonst waere dieser ganze
|
|
Abschnitt bei null Kacheln trivial gruen. */
|
|
pruef("kein Paar sieht auf dem Bildschirm gleich aus "
|
|
+ `(engstes: ${e.engstes.d.toFixed(4)}, ${e.engstes.a} <-> ${e.engstes.b})`,
|
|
e.anzahl >= 20 && e.ununterscheidbar === 0,
|
|
`${e.ununterscheidbar} von ${e.paare} Paaren unter 0,02`);
|
|
|
|
/* WIE VIEL VON DER ROHFARBE UEBERHAUPT ANKOMMT. Faellt das wieder
|
|
unter ein Drittel, ist die Gestaltung der Kachel der Grund --
|
|
und dann nuetzt die schoenste Rohfarbe nichts. */
|
|
pruef(`mindestens ein Drittel der Rohfarbe kommt an (${e.anteil.toFixed(1)} %)`,
|
|
e.anteil >= 33,
|
|
`nur ${e.anteil.toFixed(1)} % -- die Kachelgestaltung schluckt die Farbe`);
|
|
|
|
/* UND DER TEXT MUSS DARAUF LESBAR BLEIBEN.
|
|
================================================================
|
|
Diese zwei Zeilen sind die wichtigsten des ganzen Abschnitts.
|
|
Am 22.09.2026 wurde die Farbe kraeftiger gemacht -- richtig, und
|
|
gemessen. Dabei fielen 27 von 31 Kacheltexten unter 4,5:1;
|
|
vorher war es EINER. Kein Messwert hat das gemeldet, weil keine
|
|
Pruefung danach gefragt hat: `pruef-buehne` nimmt Stichproben
|
|
und traf die Kacheltexte nicht.
|
|
|
|
Farbe und Lesbarkeit gehoeren in DIESELBE Messung. Wer sie
|
|
trennt, verbessert das eine und verliert das andere -- und
|
|
merkt es erst, wenn jemand sagt, er koenne nichts mehr lesen. */
|
|
pruef(`${e.textGemessen} Kacheltexte auf Lesbarkeit gemessen`,
|
|
e.textGemessen >= 20, `nur ${e.textGemessen}`);
|
|
pruef("jeder Kacheltext erreicht 4,5:1 auf seiner Kachel"
|
|
+ (e.textSchlechteste
|
|
? ` (schlechtester: ${e.textSchlechteste.name} ${e.textSchlechteste.kontrast.toFixed(2)}:1)`
|
|
: ""),
|
|
e.textGemessen >= 20 && e.textZuWenig === 0,
|
|
`${e.textZuWenig} zu dunkel: ${e.textNamen.join(", ")}`);
|
|
}
|
|
}
|
|
|
|
console.log(`\n ${ok} bestanden, ${fehl} fehlgeschlagen\n`);
|
|
process.exit(fehl ? 1 : 0);
|