dogfather-universe/server/pruef-chatkachel.mjs

/* =====================================================================
   pruef-chatkachel.mjs — Bild hinter dem Chat, Kachel für jeden Account

   Filipe, 20.09.2026: „ich will auch ein krasses hintergrundbild für
   den treff chat. und die texte sollen immer in einer kachel sein. und
   jeder account soll seine kachel personalisieren können."

   ---------------------------------------------------------------------
   DIE EINE FRAGE, AN DER SO ETWAS SCHEITERT: LESBARKEIT

   Ein Bild hinter einem Chat geht nur, WENN der Text auf einer
   deckenden Kachel steht. Sonst liegt Schrift auf einem Foto — an der
   dunklen Stelle lesbar, an der hellen nicht, und beim Scrollen
   wechselt es. Deshalb wird hier nicht geprüft, ob ein Bild da ist,
   sondern ob die Kachel DECKT: gemessen am Alphawert, nicht geschätzt.

   Und alle zwölf Töne müssen gleich gut tragen. Ein freier Farbwähler
   hätte genau hier sein Problem: Mit ihm kann sich jemand unlesbar
   machen, und sehen müssen es die anderen.

   AUFRUF:  node server/pruef-chatkachel.mjs
   ===================================================================== */

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");
process.env.PORT = String(PORT);
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";
const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
await import("./index.js");
notbremse(250_000, "pruef-chatkachel");
await new Promise((r) => setTimeout(r, 900));
const BASIS = `http://127.0.0.1:${PORT}`;

process.on("uncaughtException", (f) => { console.error("ABSTURZ:", f); process.exit(7); });
process.on("unhandledRejection", (f) => { console.error("ABSTURZ (Versprechen):", f); process.exit(7); });

let fehler = 0, geprueft = 0;
const ok = (b, t) => { geprueft++; console.log((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };

console.log("\n=== Chat: Bild dahinter, Kachel davor ===\n");

/* ---- 1. Die Töne, ohne Browser ----------------------------------- */
const { CHAT_KACHELN, kachelPruefen, schriftFuer } = await import("./workspace-chat.js");
ok(CHAT_KACHELN.length >= 8, `es gibt genug Töne zur Auswahl (${CHAT_KACHELN.length})`);

/* ALLE GLEICH DUNKEL. Nur dann ist der Kontrast zur Schrift bei jedem
   gleich, und niemand kann sich unlesbar machen. Gerechnet wird die
   relative Helligkeit nach WCAG — nicht der Augenschein. */
const helligkeit = (hex) => {
  const z = hex.replace("#", "");
  const teil = [0, 2, 4].map((i) => parseInt(z.slice(i, i + 2), 16) / 255);
  const lin = teil.map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
  return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
};
const kontrast = (a, b) => {
  const [h, d] = [helligkeit(a), helligkeit(b)].sort((x, y) => y - x);
  return (h + 0.05) / (d + 0.05);
};
/* 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.

   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],
];
/* JEDE KACHEL MIT IHRER EIGENEN SCHRIFT (22.09.2026 abends).
   ---------------------------------------------------------------------
   Hier stand eine feste Schriftfarbe aus chat.css, gegen ALLE Töne
   gemessen. Das galt, solange alle Töne dunkel waren.

   Filipe: „Textfarbe soll mitwechseln, am besten schwarz auf hellen
   Kacheln – und weiß, wenn jemand eine schwarze Kachel wählt."

   Seither entscheidet `schriftFuer()` im Server, welches Paar eine
   Fläche trägt. Die Prüfung fragt jetzt dieselbe Funktion -- nicht,
   weil das bequem ist, sondern weil alles andere eine zweite Wahrheit
   wäre: Eine Prüfung mit eigener Rechnung könnte grün sein, während
   der Chat etwas anderes anzeigt.

   WAS SIE DAMIT NOCH PRÜFT: Dass das Ergebnis von `schriftFuer` die
   Schwellen wirklich schafft. Die Funktion darf im Notfall auch das
   schlechtere Paar zurückgeben (sie MUSS etwas liefern) -- genau dann
   schlägt diese Zeile an, und das ist ihr Zweck. */
/* =====================================================================
   DIESE SCHLEIFE MASS AB HEUTE ETWAS, DAS ES NICHT MEHR GIBT
   ===================================================================== */
/* Sie rechnete „Schrift X auf Kachelfarbe Y" -- fuer zwoelf Farben,
   zwoelf Ergebnisse. Das war genau richtig, solange der Text AUF der
   Kachel stand.

   Seit dem 25.09.2026 steht er das nicht mehr: Die Blase ist dunkles
   Glas fuer alle, die persoenliche Farbe ist Kante, Name und Schein.
   Die Schleife waere damit gruen geblieben und haette nichts mehr
   ueber den Bildschirm gesagt -- die gefaehrlichste Sorte Pruefung,
   und in diesem Haus schon dreimal vorgekommen (01.09.2026).

   SIE PRUEFT JETZT DREI DINGE STATT EINES, und jedes kann scheitern:

     1. Die feste Schrift auf dem festen Grund -- und zwar im
        SCHLIMMSTEN Fall. Die Blase ist durchscheinend (92 %), dahinter
        liegt ein Foto. Gerechnet wird mit Weiss dahinter; heller geht
        es nicht.
     2. JEDE der zwoelf Farben als NAME auf diesem Grund. Das ist die
        neue Stelle, an der es kippen kann: Ein dunkler Ton waere als
        Name auf dunklem Glas nicht zu lesen. Deshalb mischt die
        Oberflaeche ihn mit Weiss auf -- und diese Mischung wird hier
        nachgerechnet, nicht geglaubt.
     3. Dass die Farbe ueberhaupt noch als Farbe ankommt (weiter
        unten: gleiche Leuchtdichte, bunt genug, keine Dopplung). Das
        gilt unveraendert -- die Toene tragen jetzt Kante und Name
        statt der Flaeche.

   ALLE WERTE WERDEN AUS chat.css GELESEN, keiner abgeschrieben:
   `--blasengrund`, `--blase-text`, `--blase-leise`. Wer dort etwas
   aendert, aendert damit diese Pruefung mit. */

/** Zwei Farben mischen, wie `color-mix(in srgb, a p%, b)` es tut. */
const mischen = (a, b, teilA) => {
  const z = (h) => { const s = h.replace("#", "");
    return [0, 2, 4].map((i) => parseInt(s.slice(i, i + 2), 16)); };
  const [ar, ag, ab] = z(a), [br, bg, bb] = z(b);
  const m = (x, y) => Math.round(x * teilA + y * (1 - teilA));
  return "#" + [m(ar, br), m(ag, bg), m(ab, bb)]
    .map((v) => v.toString(16).padStart(2, "0")).join("");
};

/* Auch das Mischverhaeltnis wird GELESEN und nicht abgeschrieben.
   Beim ersten Anlauf stand hier 0.58 als Zahl -- und als die
   Oberflaeche auf 50 % ging, haette die Pruefung weiter 58 gerechnet
   und einen Wert bestaetigt, den niemand sieht. Genau die zweite
   Wahrheit, gegen die diese Datei gebaut ist. */
const anteilAusCss = (() => {
  const m = chatCss.match(/--namen-anteil:\s*([0-9.]+)%\s*;/);
  return m ? Number(m[1]) / 100 : null;
})();
if (anteilAusCss === null) {
  console.error("ABBRUCH: --namen-anteil steht nicht in chat.css. "
    + "Ohne ihn kann diese Pruefung die Namensfarbe nicht nachrechnen.");
  process.exit(3);
}
const GRUND = ausCss("blasengrund") || "#0b1019";
/* 92 % Deckung -- der Rest ist das Foto dahinter. Weiss ist der
   schlimmste Fall, den es dort geben kann. */
const GRUND_SCHLIMM = mischen(GRUND, "#ffffff", 0.92);

for (const [feld, wo, noetig] of [["text", ".chat-nachricht__text", 7],
  ["leise", ".chat-nachricht__fuss", 4.5]]) {
  const schrift = ausCss("blase-" + (feld === "text" ? "text" : "leise"));
  const c1 = schrift ? kontrast(schrift, GRUND) : 0;
  const c2 = schrift ? kontrast(schrift, GRUND_SCHLIMM) : 0;
  ok(!!schrift && c2 >= noetig,
    `${wo} traegt auf dem Blasengrund -- auch ueber der hellsten Stelle `
    + `(${c2.toFixed(2)}:1 im schlimmsten Fall, ${c1.toFixed(2)}:1 im besten, `
    + `noetig ${noetig})`);

  let schlecht = Infinity, wer = "", gemessen = 0;
  for (const k of CHAT_KACHELN) {
    const paar = schriftFuer(k.farbe);
    if (!paar || !paar[feld]) continue;
    gemessen++;
    const c = kontrast(paar[feld], 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. */
  /* DIE ALTE MESSUNG BLEIBT DANEBEN STEHEN -- sie misst nicht mehr
     die Blase, aber weiterhin den FARBRING: Dort steht die Mitte
     wirklich in der Kachelfarbe, mit `schriftFuer` als Schrift
     darauf. Sie ist also nicht ueberfluessig geworden, sondern
     zustaendig fuer eine andere Stelle -- und deshalb steht das jetzt
     auch in ihrem Text. */
  ok(gemessen === CHAT_KACHELN.length && gemessen >= 8 && schlecht >= noetig,
    `die Ringmitte trägt auf allen ${gemessen} Tönen `
    + `(schlechtester ${wer}: ${schlecht.toFixed(2)}:1, nötig ${noetig})`);
}

/* ==== UND DER NAME? (25.09.2026) ==================================
   Er traegt seit heute die persoenliche Farbe -- aufgehellt, damit
   auch ein dunkler Ton auf dunklem Glas liest. Die Mischung steht in
   chat.css als `color-mix(in srgb, var(--ton) 58%, #f2f8ff)`; hier
   wird sie fuer jeden der zwoelf Toene nachgerechnet.

   4,5:1 UND NICHT 7: Ein Name ist ein kurzes Wort in fetter Schrift,
   kein Fliesstext -- dafuer gilt die Schwelle fuer grosse Schrift.
   Er steht ausserdem nie allein: Dieselbe Farbe sitzt daneben als
   Kante. */
{
  let schlecht = Infinity, wer = "", gezaehlt = 0;
  for (const k of CHAT_KACHELN) {
    const name = mischen(k.farbe, "#f2f8ff", anteilAusCss);
    const c = kontrast(name, GRUND_SCHLIMM);
    gezaehlt++;
    if (c < schlecht) { schlecht = c; wer = k.name; }
  }
  ok(gezaehlt === CHAT_KACHELN.length && gezaehlt >= 8 && schlecht >= 4.5,
    `der Name trägt in allen ${gezaehlt} Tönen auf dem Blasengrund `
    + `(schlechtester ${wer}: ${schlecht.toFixed(2)}:1, nötig 4.5)`);

  /* GEGENPROBE: Ohne das Aufhellen MUSS mindestens ein Ton
     durchfallen -- sonst waere die Mischung Zierde und die Zeile
     darueber ein Haken ohne Gegenstand. */
  const rohSchlecht = Math.min(...CHAT_KACHELN.map(
    (k) => kontrast(k.farbe, GRUND_SCHLIMM)));
  ok(rohSchlecht < 4.5,
    `und ohne das Aufhellen fiele mindestens einer durch `
    + `(${rohSchlecht.toFixed(2)}:1) — die Mischung ist keine Zierde`);
}

/* UND DIE SCHRIFT WECHSELT WIRKLICH. Ohne diese Zeile wäre nicht
   bewiesen, dass `schriftFuer` mehr tut, als immer dasselbe Paar
   zurückzugeben -- dann wäre die Schleife oben nur die alte Prüfung
   mit mehr Umweg. */
{
  const hell = CHAT_KACHELN.filter((k) => helligkeit(k.farbe) > 0.3);
  const dunkel = CHAT_KACHELN.filter((k) => helligkeit(k.farbe) <= 0.3);
  const hellDunkleSchrift = hell.every((k) => helligkeit(schriftFuer(k.farbe).text) < 0.2);
  const dunkelHelleSchrift = dunkel.every((k) => helligkeit(schriftFuer(k.farbe).text) > 0.6);
  ok(hell.length >= 1 && dunkel.length >= 1 && hellDunkleSchrift && dunkelHelleSchrift,
    `${hell.length} helle Kacheln tragen dunkle Schrift, ${dunkel.length} dunkle tragen helle`);
}

/* 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. */
/* SIE GILT FÜR DIE GERECHNETEN -- und nur für die (22.09.2026 abends).

   Der Zweck dieser Zeile ist: „Niemand kann sich durch seine Wahl
   schlechter lesbar machen als die anderen." Solange alle Töne
   dieselbe feste Schrift trugen, war gleiche Leuchtdichte der einzige
   Weg dorthin.

   Seit die Schrift mitwechselt, gibt es einen zweiten -- und die
   Prüfung darüber löst das Versprechen direkt ein: JEDE Kachel
   erreicht mit IHRER Schrift 7:1 und 4,5:1. Das ist die Aussage, um
   die es ging; die gleiche Leuchtdichte war nur ihr Mittel.

   Für die elf gerechneten Töne bleibt das Mittel trotzdem stehen:
   Sie kommen aus tools/chat-kacheln-rechnen.mjs, und ein Faktor über
   1,1 hieße dort weiterhin, dass jemand eine Farbe von Hand
   eingetragen und damit die Rechnung umgangen hat. Ausgenommen sind
   die, die nachweislich eine andere Schrift tragen. */
const gerechnet = CHAT_KACHELN.filter(
  (k) => helligkeit(schriftFuer(k.farbe).text) > 0.6);
const spanne = Math.max(...gerechnet.map((k) => helligkeit(k.farbe)))
  / Math.max(1e-6, Math.min(...gerechnet.map((k) => helligkeit(k.farbe))));
ok(gerechnet.length >= 8 && spanne < 1.1,
  `die ${gerechnet.length} gerechneten 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. */
const farben = new Set(CHAT_KACHELN.map((k) => k.farbe.toLowerCase()));
ok(farben.size === CHAT_KACHELN.length,
  `kein Ton doppelt (${farben.size} von ${CHAT_KACHELN.length})`);

/* Die Prüfung am Wert selbst — sie ist der Riegel gegen alles, was
   nicht aus der Liste kommt. */
ok(kachelPruefen("moos") === "moos", "ein bekannter Ton kommt durch");
ok(kachelPruefen("rgb(255,0,0)") === null,
  "Gegenprobe: ein erfundener Wert nicht — sonst stünde CSS aus der Datenbank in der Seite");
ok(kachelPruefen(null) === null, "und 'nichts eingestellt' ist ein gültiger Zustand");

/* ---- 2. Am echten Bildschirm ------------------------------------- */
const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const mach = (name, rolle, code) => {
  const s = randomBytes(16).toString("hex");
  const h = scryptSync(code, s, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
  return d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt)"
    + " VALUES (?,?,?,?,?,1,?)").run(name, rolle, h, s, 32768, new Date().toISOString()).lastInsertRowid;
};
mach("Filipe", "admin", "CODE-DOGI-0001");
const idLuna = mach("Luna", "manager", "CODE-LUNA-0002");
d.close();

const anmelden = async (rolle, code) => {
  const a = await fetch(BASIS + "/workspace/api/anmelden", {
    method: "POST", headers: { "Content-Type": "application/json", Origin: BASIS },
    body: JSON.stringify({ rolle, code }),
  });
  return (a.headers.getSetCookie?.() || []).map((z) => z.split(";")[0]).join("; ");
};
const kFilipe = await anmelden("admin", "CODE-DOGI-0001");
const kLuna = await anmelden("manager", "CODE-LUNA-0002");
ok(!!kFilipe && !!kLuna, "beide angemeldet");

/* Ein Gespräch und zwei Nachrichten. */
const raumA = await fetch(BASIS + "/workspace/api/chat/direkt", {
  method: "POST", headers: { "Content-Type": "application/json", Cookie: kFilipe, Origin: BASIS },
  body: JSON.stringify({ mit: idLuna }),
});
const raum = (await raumA.json()).raum_id;
ok(!!raum, `ein Gespräch steht (${raum})`);
const schreib = async (keks, text) => fetch(BASIS + `/workspace/api/chat/raeume/${raum}/nachrichten`, {
  method: "POST", headers: { "Content-Type": "application/json", Cookie: keks, Origin: BASIS },
  body: JSON.stringify({ text }),
});
await schreib(kFilipe, "Servus, hier ist Filipe.");
await schreib(kLuna, "Und hier Luna.");

/* Luna stellt eine Farbe ein. */
const setzen = await fetch(BASIS + "/workspace/api/chat/kachel", {
  method: "PUT", headers: { "Content-Type": "application/json", Cookie: kLuna, Origin: BASIS },
  body: JSON.stringify({ kachel: "moos" }),
});
ok(setzen.ok, `Luna stellt ihre Kachel ein (${setzen.status})`);

const boese = await fetch(BASIS + "/workspace/api/chat/kachel", {
  method: "PUT", headers: { "Content-Type": "application/json", Cookie: kLuna, Origin: BASIS },
  body: JSON.stringify({ kachel: "url(javascript:0)" }),
});
ok(boese.status === 400,
  `Gegenprobe: ein erfundener Wert wird abgelehnt (${boese.status}) — eine Regel, die nur im Formular steht, ist keine Regel`);

/* FILIPE SIEHT LUNAS FARBE — das ist der Sinn der Sache. */
const verlauf = await (await fetch(BASIS + `/workspace/api/chat/raeume/${raum}/nachrichten`,
  { headers: { Cookie: kFilipe } })).json();
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");
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();
try {
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  await ctx.addCookies(kFilipe.split("; ").filter(Boolean).map((t) => {
    const [name, ...rest] = t.split("=");
    return { name, value: rest.join("="), domain: "127.0.0.1", path: "/" };
  }));
  const s = await ctx.newPage();
  const konsole = [];
  s.on("console", (m) => { if (m.type() === "error" && !/favicon|ERR_/i.test(m.text())) konsole.push(m.text()); });
  s.on("pageerror", (e) => konsole.push("Absturz: " + e.message));

  await s.goto(BASIS + "/workspace/chat.html", { waitUntil: "networkidle" });
  await s.waitForTimeout(1400);
  await s.click(".chat-raum");
  await s.waitForTimeout(1200);

  /* ==== DIE EIGENTLICHE MESSUNG: SCHEINT DAS BILD DURCH? ===========

     Der erste Anlauf las `backgroundColor` und pruefte den Alphawert.
     Das war falsch, und zwar auf eine Art, die fast durchgegangen
     waere: Eine Kachel mit einem VERLAUF hat `backgroundColor:
     rgba(0,0,0,0)` -- der Verlauf steht in `background-image`. Die
     Pruefung meldete „durchsichtig" bei einer Kachel, die voellig
     deckt, und haette umgekehrt eine halbtransparente Verlaufskachel
     durchgelassen.

     GEMESSEN WIRD JETZT DIE SACHE SELBST: zweimal dasselbe Bildpunkt-
     feld, einmal mit und einmal ohne Buehnenbild. Deckt die Kachel,
     sind beide Aufnahmen an dieser Stelle identisch. Scheint das Bild
     durch, unterscheiden sie sich.

     DIE GEGENPROBE IST EINGEBAUT und kostet nichts: An der Flaeche
     ZWISCHEN den Kacheln MUSS sich etwas aendern. Tut sie das nicht,
     misst der Vergleich gar nichts -- etwa weil das Bild in dieser
     Umgebung nie geladen wurde. Genau die Sorte stiller Erfolg, vor
     der die Hausregel zum dritten Ausgang warnt. */
  const punkte = await s.evaluate(() => {
    const b = document.querySelector('.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase')
      || document.querySelector(".chat-nachricht__blase");
    const v = document.querySelector(".chat__verlauf");
    if (!b || !v) return null;
    const rb = b.getBoundingClientRect(), rv = v.getBoundingClientRect();
    return {
      /* Mitten in der Kachel -- nicht am Rand, dort liegen Kante und
         abgerundete Ecke. */
      kachel: { x: Math.round(rb.left + rb.width / 2), y: Math.round(rb.top + rb.height / 2) },
      /* Und ein Fleck im Verlauf, auf dem sicher keine Kachel liegt:
         ganz rechts aussen, wo die eigenen Nachrichten nicht hinreichen. */
      frei: { x: Math.round(rv.right - 6), y: Math.round(rv.top + rv.height / 2) },
    };
  });
  ok(!!punkte, "Kachel und freie Fläche gefunden");

  /* Playwright kann einen Ausschnitt aufnehmen -- ein Bildpunkt reicht. */
  const punktFarbe = async (pkt) => {
    const bild = await s.screenshot({
      clip: { x: pkt.x, y: pkt.y, width: 1, height: 1 }, type: "png",
    });
    /* Der Farbwert steckt im PNG. Statt es zu entpacken, wird die
       AUFNAHME selbst verglichen: Zwei Aufnahmen desselben Bildpunkts
       sind byteweise gleich, wenn die Farbe gleich ist. Das ist genau
       die Frage, und sie braucht keinen Decoder. */
    return bild.toString("base64");
  };

  const mitBild = { kachel: await punktFarbe(punkte.kachel), frei: await punktFarbe(punkte.frei) };
  await s.addStyleTag({ content: "body.start::before { display: none !important; }" });
  await s.waitForTimeout(350);
  const ohneBild = { kachel: await punktFarbe(punkte.kachel), frei: await punktFarbe(punkte.frei) };

  /* ZUERST DIE GEGENPROBE. Ohne sie waere die Hauptmessung wertlos. */
  ok(mitBild.frei !== ohneBild.frei,
    "Gegenprobe: auf der freien Fläche ändert sich etwas, wenn das Bild weg ist — es ist also wirklich da");
  ok(mitBild.kachel === ohneBild.kachel,
    mitBild.kachel === ohneBild.kachel
      ? "auf der Kachel ändert sich NICHTS — sie deckt, das Bild kommt nicht durch die Schrift"
      : "das Bühnenbild scheint durch die Kachel — dort läge Schrift auf einem Foto");

  /* Die Fläche darum MUSS durchlassen, sonst gäbe es gar kein Bild zu
     sehen -- das ist die Hälfte des Wunsches. */
  const flaeche = await s.evaluate(() => {
    const c = getComputedStyle(document.querySelector(".chat")).backgroundColor;
    /* ZWEI SCHREIBWEISEN, NICHT EINE (20.09.2026).

       Der erste Anlauf suchte nur `rgba(...)`. Chrome gibt das
       Ergebnis von `color-mix()` aber als `color(srgb r g b / a)`
       zurueck -- die Suche fand nichts, der Rueckfall war „Alpha 1",
       und die Pruefung meldete „deckt" bei einer Flaeche, die
       durchscheint. Ein Messfehler, der genau das Gegenteil behauptet. */
    const alphaVon = (farbe) => {
      const rgba = farbe.match(/rgba?\(([^)]+)\)/);
      if (rgba) {
        const t = rgba[1].split(",").map((x) => parseFloat(x));
        return t.length > 3 ? t[3] : 1;
      }
      const srgb = farbe.match(/color\([^/)]*\/\s*([\d.]+)\s*\)/);
      if (srgb) return parseFloat(srgb[1]);
      return farbe === "transparent" ? 0 : 1;
    };
    return { alpha: alphaVon(c), roh: c,
      buehne: getComputedStyle(document.body, "::before").backgroundImage };
  });
  ok(flaeche.alpha < 0.98,
    `die Fläche um die Kacheln lässt durch (Alpha ${flaeche.alpha.toFixed(2)}, ${flaeche.roh})`);
  ok(/\.webp|\.png|\.jpg/i.test(flaeche.buehne || ""),
    `und dahinter steht wirklich ein Bild (…${(flaeche.buehne || "").slice(-30)}`);

  const lage = await s.evaluate(() => ({
    blasen: document.querySelectorAll(".chat-nachricht__blase").length,
    knopf: !!document.querySelector(".chat__kachelknopf:not([hidden])"),
  }));
  ok(lage.blasen >= 2, `die Nachrichten stehen in Kacheln (${lage.blasen})`);

  ok(lage.knopf, "der Knopf für die eigene Kachel steht da");

  /* Und er lässt sich bedienen. */
  await s.click(".chat__kachelknopf");
  await s.waitForTimeout(400);
  const wahl = await s.evaluate(() => {
    const dlg = document.querySelector("#kachel-wahl[open]");
    const toene = [...document.querySelectorAll(".chat-kachelwahl__ton")];
    const ring = document.getElementById("kachelrad-ring");
    return {
      offen: !!dlg,
      toene: toene.length,
      /* Der Farbkreis ist ein Schieberegler, kein Satz von Knoepfen.
         Was auf ihm liegt, waehlt man durch Drehen. */
      ring: !!ring,
      ringBedienbar: ring ? ring.getAttribute("role") === "slider" : false,
      ringSagtFarbe: ring ? (ring.getAttribute("aria-valuetext") || "") : "",
      mitNamen: toene.filter((t) => (t.getAttribute("aria-label") || "").length > 2).length,
      hoch: toene.length ? Math.round(toene[0].getBoundingClientRect().height) : 0,
    };
  });
  ok(wahl.offen, "die Auswahl geht auf");
  /* ==== NICHT MEHR "ALLE ALS KNOEPFE" (berichtigt 23.09.2026) ======

     Hier stand `wahl.toene === CHAT_KACHELN.length` -- dreizehn Toene,
     dreizehn Knoepfe. Das stimmte, bis die Kachelfarbe ein FARBKREIS
     wurde (Commit 7a674963). Seither liegen die meisten Toene auf dem
     Ring und werden durch Drehen gewaehlt; nur die, die weit genug
     davon entfernt sind, bleiben als Knopf daneben stehen.

     Die Pruefung meldete danach dauerhaft "mit allen 13 Toenen (2)".
     Nichts war kaputt -- sie stellte eine Frage, die es nicht mehr
     gibt. Und eine Warnung, die immer kommt, liest irgendwann niemand
     mehr; dann faellt die echte daneben auch nicht mehr auf.

     GEFRAGT WIRD JETZT, WAS ZAEHLT: Kommt man an die Farben heran?
     Ueber den Kreis (der sagt, welche Farbe gerade eingestellt ist)
     oder ueber die Knoepfe daneben. Wie sie sich auf beides verteilen,
     ist Gestaltung und darf sich aendern, ohne dass hier etwas rot
     wird. */
  ok(wahl.ring, "der Farbkreis ist da -- auf ihm liegen die meisten Toene");
  ok(wahl.ringBedienbar,
    "und er ist als Schieberegler bedienbar (role=slider), nicht nur gemalt");
  ok(wahl.ringSagtFarbe.trim().length > 3,
    `er sagt auch, welche Farbe eingestellt ist ("${wahl.ringSagtFarbe}")`);
  ok(wahl.toene >= 1,
    `daneben stehen ${wahl.toene} Toene als Knopf -- die, die nicht auf dem Kreis liegen`);
  ok(wahl.mitNamen === wahl.toene,
    `jeder trägt seinen Namen (${wahl.mitNamen}) — wer Farben schlecht unterscheidet, wählt sonst blind`);
  ok(wahl.hoch >= 44, `und ist am Finger treffbar (${wahl.hoch} px)`);

  /* Eine andere wählen und nachsehen, ob die eigenen Kacheln sofort
     umspringen -- ohne Neuladen. */
  /* DIE FARBE STECKT IM VERLAUF, nicht in `backgroundColor`.

     Auch das war erst falsch: Eine Kachel mit `background:
     linear-gradient(...)` hat `backgroundColor: rgba(0,0,0,0)` -- der
     Vergleich lieferte zweimal „durchsichtig" und meldete „springt
     nicht um" bei einer Kachel, die sehr wohl umsprang. Beides wird
     gelesen und aneinandergehaengt; dann ist es egal, welche der
     beiden Stellen die Farbe traegt. */
  const kachelBild = () => s.evaluate(() => {
    const b = document.querySelector('.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase');
    const c = getComputedStyle(b);
    return c.backgroundColor + " | " + c.backgroundImage;
  });
  const vorher = await kachelBild();
  /* 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,
    `die eigenen Kacheln springen sofort um (${vorher.slice(0, 46)} → ${nachher.slice(0, 46)})`);

  /* UND ES IST GESPEICHERT, nicht nur gemalt. */
  const nachSetzen = await (await fetch(BASIS + "/workspace/api/chat/kacheln",
    { headers: { Cookie: kFilipe } })).json();
  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");
  await ctx.close();
} finally {
  await browser.close();
}

console.log(`\n${fehler ? fehler + " FEHLER" : "Alles in Ordnung"} — ${geprueft} Prüfungen\n`);
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
process.exit(fehler ? 1 : 0);