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:
2026-09-22 12:57:56 +02:00
co-authored by Claude Opus 5
parent e12392a289
commit 80dee4d0c8
50 changed files with 1869 additions and 639 deletions
+121 -7
View File
@@ -247,17 +247,18 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
el2 && el2 !== e && !el2.contains(e) && !e.contains(el2)
&& el2.children.length === 0 && el2.textContent.trim().length > 0;
let schlecht = null, anzahl = 0, ohneStelle = 0;
let schlecht = null, anzahl = 0, ohneStelle = 0, uebersprungen = 0;
const alle = [...document.querySelectorAll("p, h1, h2, h3, span, a, li")]
.filter((e) => e.children.length === 0 && e.textContent.trim().length > 2);
for (const e of alle) {
const r = e.getBoundingClientRect();
if (r.width < 8 || r.height < 8) continue;
if (r.top < 0 || r.bottom > window.innerHeight) continue;
if (r.width < 8 || r.height < 8) { uebersprungen++; continue; }
if (r.top < 0 || r.bottom > window.innerHeight) { uebersprungen++; continue; }
const mitte = r.top + r.height / 2;
const st0 = getComputedStyle(e);
const kandidaten = [];
let gemessenBei = null, gemessenAuf = null;
/* ZUERST IN DER EIGENEN POLSTERUNG.
@@ -286,9 +287,81 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
for (const [kx, ky] of kandidaten) {
if (kx < 0 || ky < 0 || kx >= window.innerWidth || ky >= window.innerHeight) continue;
if (istFremderText(document.elementFromPoint(kx, ky), e)) continue;
/* UND KEIN FREMDER UNTERGRUND (22.09.2026).
============================================================
Diese Pruefung meldete tagelang 3,28:1 fuer den Markentext
in der Kopfleiste. Drei Vermutungen nacheinander gemessen
und alle drei widerlegt: nicht die Glut der Leiste, nicht
der Schein hinter der Schrift, nicht die Schriftfarbe.
Die Antwort kam erst, als die Pruefung sagen konnte, WO
sie misst: bei 125,34 -- auf `button.wahl2__knopf`. Bei
390 px liegt der Sicht-Umschalter direkt neben dem
Schriftzug, und der Abtastpunkt 4 px rechts daneben trifft
SEINEN Hintergrund. Der Text liegt dort nicht drauf.
Dieselbe Lehre wie schon einmal oben, nur andersherum:
Damals mass sie daneben statt innen, hier misst sie
daneben und trifft einen Nachbarn. Ein Element mit
eigenem, deckendem Hintergrund, das KEIN Vorfahre des
Textes ist, taugt nicht als sein Untergrund.
Die Regel ist schmal: Nur deckende Hintergruende zaehlen
als fremd. Ein durchsichtiger Nachbar laesst denselben
Grund durch wie der Text selbst -- dort darf weiter
gemessen werden. */
const dort = document.elementFromPoint(kx, ky);
if (dort && dort !== e && !e.contains(dort) && !dort.contains(e)) {
/* WESSEN FLAECHE IST DAS? Der Knopf selbst ist oft
durchsichtig -- seine Flaeche traegt der Behaelter
darueber. Deshalb die Elternkette hoch bis zum ersten
deckenden Hintergrund und fragen, ob DER auch ueber dem
Text liegt. Tut er das nicht, ist es eine fremde
Flaeche, und der Text liegt dort nicht drauf. */
const flaecheVon = (n) => {
for (let q = n; q && q !== document.documentElement; q = q.parentElement) {
const st2 = getComputedStyle(q);
const g2 = st2.backgroundColor || "";
const teile = g2.match(/[\d.]+/g);
const deckend = teile && (teile.length < 4 || Number(teile[3]) >= 0.5)
&& !/rgba\(0, 0, 0, 0\)/.test(g2);
const bild = st2.backgroundImage && st2.backgroundImage !== "none"
&& (st2.webkitBackgroundClip || st2.backgroundClip || "")
.split(",")[0].trim() !== "text";
if (deckend || bild) return q;
}
return null;
};
const meine = flaecheVon(e);
const fremde = flaecheVon(dort);
if (fremde && fremde !== meine) continue;
/* AUCH EINE HALBDURCHSICHTIGE EIGENE FLAECHE ZAEHLT.
Der Knopf, der den Fehlalarm ausloeste, liegt in
DERSELBEN Kopfleiste wie der Text -- die deckende
Flaeche ist also dieselbe. Er traegt aber darueber noch
eine eigene, halbdurchsichtige, und genau die hebt den
gemessenen Punkt an. Ein Text liegt darauf nicht drauf,
er liegt DANEBEN. */
{
let fremdeFlaeche = false;
for (let q = dort; q && q !== meine && !q.contains(e); q = q.parentElement) {
const st3 = getComputedStyle(q);
const t3 = (st3.backgroundColor || "").match(/[\d.]+/g);
const hatFarbe = t3 && (t3.length < 4 || Number(t3[3]) > 0.02);
const hatBild = st3.backgroundImage && st3.backgroundImage !== "none";
if (hatFarbe || hatBild) { fremdeFlaeche = true; break; }
}
if (fremdeFlaeche) continue;
}
}
const bx = Math.round(kx * skala), by = Math.round(ky * skala);
if (bx < 0 || bx >= c.width || by < 0 || by >= c.height) continue;
p = g.getImageData(bx, by, 1, 1).data;
gemessenBei = Math.round(kx) + "," + Math.round(ky);
const hier = document.elementFromPoint(kx, ky);
gemessenAuf = hier ? hier.tagName.toLowerCase()
+ (typeof hier.className === "string" && hier.className
? "." + hier.className.trim().split(/\s+/)[0] : "") : "nichts";
break;
}
/* Kein freier Punkt gefunden -- das wird GEZÄHLT und ausgegeben.
@@ -328,10 +401,26 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
const v = kontrast(farbe, [p[0], p[1], p[2]]);
anzahl++;
if (!schlecht || v / grenze < schlecht.v / schlecht.grenze) {
schlecht = { v, grenze, text: e.textContent.trim().slice(0, 26), grund: [p[0], p[1], p[2]] };
/* WO ES STEHT, NICHT NUR WAS DASTEHT (22.09.2026).
Diese Pruefung meldete tagelang 3,28:1 bei "Spicy & Dogi"
-- und die Suche danach kostete eine halbe Stunde, weil
derselbe Text an mehreren Stellen vorkommt. Eine Pruefung,
die einen Fehler findet, ihn aber nicht auffindbar macht,
kostet mehr Zeit als sie spart. */
const wo = e.tagName.toLowerCase()
+ (typeof e.className === "string" && e.className
? "." + e.className.trim().split(/\s+/).join(".") : "");
schlecht = { v, grenze, text: e.textContent.trim().slice(0, 26),
grund: [p[0], p[1], p[2]], wo,
eltern: (() => { const k=[]; for (let q=e.parentElement; q && k.length<4; q=q.parentElement)
k.push(q.tagName.toLowerCase()+(typeof q.className==="string"&&q.className?"."+q.className.trim().split(/\s+/)[0]:"")); return k.join(" < "); })(),
lage: Math.round(r.left)+","+Math.round(r.top)+" "+Math.round(r.width)+"x"+Math.round(r.height),
gemessenBei, gemessenAuf,
groesse: Math.round(gr * 10) / 10, fett: st.fontWeight,
verlauf: clipText };
}
}
return { ...schlecht, anzahl, ohneStelle, gesamt: alle.length };
return { ...schlecht, anzahl, ohneStelle, uebersprungen, gesamt: alle.length };
}, [bild.toString("base64"), DUNKELSTER_QUELLE]);
/* ---- GEGENPROBE ZUR VERLAUFSSCHRIFT ----------------------------
@@ -372,10 +461,35 @@ for (const [breite, hoehe, wie] of [[1440, 950, "Computer"], [390, 780, "Handy"]
`${s}: Gegenprobe -- dunkler Verlauf wird als dunkel erkannt `
+ `(${gegen.dunkel.dunkelster?.join(",")}), also faellt so etwas auf`);
ok(schlimmster.v >= schlimmster.grenze,
/* DIE ZAHL GEHOERT IN DIE BEDINGUNG (22.09.2026).
Sie stand bisher nur im Meldetext. Am 22.09. wurde die Abtastung
nachsichtiger gemacht (fremde Flaechen zaehlen nicht mehr als
Untergrund) -- richtig, aber eine Lockerung kann zu weit gehen.
Wuerde sie irgendwann JEDEN Punkt verwerfen, waere diese Zeile
fuer immer gruen, ohne je wieder etwas anzusehen.
ERSTER ANLAUF WAR `anzahl >= 5` -- und die Pruefung wurde auf
uebersicht.html sofort rot, weil die Seite schlicht nur vier
Texte hat. Eine feste Schwelle ist eine Rechnung von gestern;
sie war hier keine fuenf Minuten alt.
Richtig ist die ABLEITUNG: Jeder gefundene Text muss in genau
einem der drei Toepfe landen -- gemessen, ohne freien Untergrund,
oder vorher aussortiert (zu klein / ausserhalb des Bildes). Geht
die Rechnung nicht auf, ist unterwegs etwas verschwunden, und
zwar still. Diese Bedingung braucht keine Zahl und veraltet nicht.
Wie VIELE davon gemessen werden duerfen, deckelt die Zeile
darunter ("hoechstens zwei Texte ohne freien Untergrund"). */
ok(schlimmster.anzahl + schlimmster.ohneStelle + schlimmster.uebersprungen
=== schlimmster.gesamt
&& schlimmster.v >= schlimmster.grenze,
`${s}: schlechtester Kontrast ${schlimmster.v.toFixed(2)}:1 (nötig ${schlimmster.grenze}:1) `
+ `bei "${schlimmster.text}" auf rgb(${schlimmster.grund.join(",")}) · `
+ `${schlimmster.anzahl} Stellen gemessen`);
+ `${schlimmster.anzahl} gemessen + ${schlimmster.ohneStelle} ohne Grund `
+ `+ ${schlimmster.uebersprungen} aussortiert = ${schlimmster.gesamt}`
+ (schlimmster.wo ? ` -- ${schlimmster.wo}, ${schlimmster.groesse}px/${schlimmster.fett}`
+ (schlimmster.verlauf ? ", Verlauf im Text" : "")
+ ` [${schlimmster.lage}] in ${schlimmster.eltern}`
+ ` -- gemessen bei ${schlimmster.gemessenBei} auf ${schlimmster.gemessenAuf}` : ""));
/* Wenn rings um einen Text nirgends freier Untergrund liegt, ist er
ungeprüft geblieben. Das darf vorkommen (dicht gesetzte Zeilen),
aber nicht unbemerkt und nicht bei vielen -- sonst meldet die
+144 -18
View File
@@ -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");
+66
View File
@@ -170,6 +170,72 @@ console.log("\n=== Kein Paar sieht gleich aus ===");
`${eng.d.toFixed(4)} zwischen Ton ${eng.a?.n} und ${eng.b?.n}`);
}
/* ---- 1b. Die Willkommenskachel traegt WIRKLICH alle Farben ---------- */
/* Filipe: „die kachel soll alle farben haben die wir benutzt haben."
---------------------------------------------------------------------
`tools/kachel-regenbogen.mjs` schreibt den Streifenblock aus den
benutzten Toenen. Einmal gelaufen ist er aber ab da eine ABSCHRIFT --
und Abschriften altern. Kommt morgen eine Kachel dazu, hat „alle
Farben" eben doch nicht alle, und niemand sieht es: 30 Streifen sehen
aus wie 31.
Deshalb wird hier nicht geprueft, ob der Block existiert, sondern ob
er noch zu den heute benutzten Toenen passt -- in BEIDE Richtungen.
Fehlt eine Farbe, ist die Kachel unvollstaendig; steht eine zu viel
darin, zeigt sie eine Farbe, die es auf der Wand nicht mehr gibt.
Die Pruefung sagt auch, was zu tun ist. Eine Pruefung, die einen
Fehler findet, ihn aber nicht behebbar macht, kostet mehr Zeit als
sie spart:
node tools/kachel-regenbogen.mjs --schreiben
-------------------------------------------------------------------- */
console.log("\n=== Die Willkommenskachel hat alle Farben ===");
{
const ANF = "/* ---- ANFANG GERECHNET: kachel-regenbogen.mjs ---- */";
const ENDE = "/* ---- ENDE GERECHNET ---- */";
const a = css.indexOf(ANF);
const e = css.indexOf(ENDE);
if (a < 0 || e < 0) {
pruef("KONNTE NICHT NACHSEHEN: der gerechnete Block steht nicht in"
+ " start.css", false,
"erwartet zwischen den Marken ANFANG/ENDE GERECHNET");
} else {
const block = css.slice(a, e);
/* Gezaehlt werden die Farben im STREIFENVERLAUF, nicht im ganzen
Block -- Lesesaum und Vignette bringen eigene Werte mit, die
nichts mit den Kacheltoenen zu tun haben. */
const imBlock = new Set(
[...block.matchAll(/color-mix\(in srgb, (#[0-9a-fA-F]{6}) /g)]
.map((m) => m[1].toLowerCase()));
const sollen = new Set([...benutzt.keys()]
.filter((n) => farben.has(n))
.map((n) => farben.get(n).toLowerCase()));
const fehlen = [...sollen].filter((f) => !imBlock.has(f));
const zuviel = [...imBlock].filter((f) => !sollen.has(f));
pruef(`die Kachel zeigt ${imBlock.size} Farben, benutzt werden ${sollen.size}`,
imBlock.size >= 20 && imBlock.size === sollen.size,
`${imBlock.size} statt ${sollen.size}`);
pruef("keine benutzte Farbe fehlt in der Kachel",
fehlen.length === 0,
`es fehlen ${fehlen.length}: ${fehlen.join(", ")}`
+ " — node tools/kachel-regenbogen.mjs --schreiben");
pruef("und keine Farbe steht darin, die niemand mehr benutzt",
zuviel.length === 0,
`${zuviel.length} zu viel: ${zuviel.join(", ")}`
+ " — node tools/kachel-regenbogen.mjs --schreiben");
/* GEGENPROBE. Eine Mengenpruefung, die nur bestaetigen kann,
bestaetigt nichts: Waere der Streifenverlauf leer, waeren alle
drei Zeilen oben trivial gruen. */
const gefaelscht = new Set([...imBlock].filter((f) => f !== [...imBlock][0]));
pruef("Gegenprobe — fehlt eine Farbe, faellt es auf",
[...sollen].filter((f) => !gefaelscht.has(f)).length > 0,
"die Mengenpruefung merkt eine fehlende Farbe nicht");
}
}
/* ---- 2. Eindeutig je Ansicht --------------------------------------- */
console.log("\n=== Keine Ansicht zeigt zwei gleiche ===");
{
+114 -17
View File
@@ -188,8 +188,8 @@ function bildWegFuer(personId) {
Kachel gehoert einem selbst, GESEHEN wird sie von allen anderen --
deshalb ist sie kein Platz fuer etwas, das man nicht abschalten kann.
Die zwoelf Toene hier sind alle gleich dunkel und gleich gesaettigt.
Sie unterscheiden sich im Farbton und in sonst nichts. Damit ist der
Die zwoelf Toene hier liegen alle auf DERSELBEN LEUCHTDICHTE. Sie
unterscheiden sich im Farbton und in sonst nichts. Damit ist der
Kontrast zur Schrift bei jedem gleich -- er muss nicht bei jedem
einzeln geprueft werden, und niemand kann sich unlesbar machen.
Augenschonend ist hier keine Geschmacksfrage: Ein Chat ist die
@@ -197,21 +197,55 @@ function bildWegFuer(personId) {
KEINE der zwoelf ist hell. Das ist Absicht und nicht Sparsamkeit --
die Schrift ist hell, und eine helle Kachel waere fuer die Person,
die sie waehlt, hübsch und fuer alle anderen unlesbar.
die sie waehlt, huebsch und fuer alle anderen unlesbar.
---------------------------------------------------------------------
DIESE LISTE IST GERECHNET, NICHT GEWAEHLT (22.09.2026)
Filipe: „ich will dass die farben viel klarer und stärker sind ...
die kachel von den texten von den leuten im chat soll auch klarer
und stärker sein bitte."
Bis heute lagen alle zwoelf bei einer Buntheit zwischen 0,002 und
0,048 -- auf dem Bildschirm zwoelf Grautoene mit einem Hauch Farbe.
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.
Geaendert wurde deshalb ZUERST die Schrift der Blase (--blase-text /
--blase-leise in chat.css, beide heller als die der Seite) und DANN
die Flaeche. Andersherum waere es der Fehler vom selben Vormittag
gewesen, als 27 von 31 Startkacheln unlesbar wurden.
NICHT VON HAND AENDERN. Die Werte kommen aus
`tools/chat-kacheln-rechnen.mjs`; es liest die beiden Schriftfarben
aus dem CSS und rechnet daraus die hellste Flaeche aus, die beide
noch tragen (7:1 fuer den Nachrichtentext, 4,8:1 fuer die
Fusszeile). Wer hier eine Farbe eintippt, umgeht genau die Rechnung,
die die Lesbarkeit garantiert. Richtig ist:
node tools/chat-kacheln-rechnen.mjs --schreiben
node server/pruef-chatkachel.mjs
DIE SCHLUESSEL LINKS STEHEN IN DER DATENBANK. Wer einen umbenennt,
setzt die Wahl der betroffenen Person still auf „Standard" zurueck.
Vor diesem Umbau nachgesehen: gewaehlt waren `veilchen`, `ziegel`
und `moos` -- alle drei stehen weiter unten und haben ihren
Farbbereich behalten.
===================================================================== */
export const CHAT_KACHELN = [
{ wert: "grund", name: "Standard", farbe: "#131a25" },
{ wert: "tinte", name: "Tinte", farbe: "#141c2e" },
{ wert: "veilchen", name: "Veilchen", farbe: "#1d1730" },
{ wert: "pflaume", name: "Pflaume", farbe: "#251729" },
{ wert: "wein", name: "Wein", farbe: "#2a1620" },
{ wert: "ziegel", name: "Ziegel", farbe: "#2a1a17" },
{ wert: "bernstein", name: "Bernstein", farbe: "#271f14" },
{ wert: "moos", name: "Moos", farbe: "#16251b" },
{ wert: "tanne", name: "Tanne", farbe: "#132622" },
{ wert: "lagune", name: "Lagune", farbe: "#122429" },
{ wert: "stahl", name: "Stahl", farbe: "#1b2128" },
{ wert: "schiefer", name: "Schiefer", farbe: "#20201f" },
{ wert: "grund", name: "Neutral", farbe: "#4f545c" },
{ wert: "tinte", name: "Tinte", farbe: "#0150af" },
{ wert: "veilchen", name: "Veilchen", farbe: "#6a01e5" },
{ wert: "pflaume", name: "Pflaume", farbe: "#9301a2" },
{ wert: "kirsche", name: "Kirsche", farbe: "#a5015e" },
{ wert: "ziegel", name: "Ziegel", farbe: "#ad0103" },
{ wert: "bernstein", name: "Bernstein", farbe: "#7e4601" },
{ wert: "oliv", name: "Oliv", farbe: "#635201" },
{ wert: "moos", name: "Moos", farbe: "#405c01" },
{ wert: "tanne", name: "Tanne", farbe: "#00603d" },
{ wert: "lagune", name: "Lagune", farbe: "#035e5c" },
{ wert: "ozean", name: "Ozean", farbe: "#045b74" },
];
/** Nur ein Ton aus der Liste kommt durch -- sonst nichts.
@@ -226,7 +260,63 @@ export function kachelPruefen(wert) {
return CHAT_KACHELN.some((k) => k.wert === String(wert)) ? String(wert) : null;
}
/* WER NICHTS EINSTELLT, BEKOMMT TROTZDEM EINE FARBE (22.09.2026)
---------------------------------------------------------------------
Filipe: „die kachel von den texten von den leuten im chat soll auch
klarer und stärker sein ... so dass die leute richtig bekommen es zu
benutzen."
Vorher hiess „nichts eingestellt" GRAU -- und eingestellt hatten es
vier von fuenfzehn. Auf dem Bildschirm war der Chat damit einfarbig,
egal wie gut die zwoelf Toene gerechnet sind. Eine Einstellung, die
man erst finden muss, damit ueberhaupt etwas passiert, benutzt kaum
jemand; das Ergebnis sehen aber alle.
Jetzt bekommt jede Person von sich aus einen der elf bunten Toene.
Dieselbe Person hat immer denselben -- man erkennt sie an der Farbe,
noch bevor man den Namen liest. Wer einen anderen will, waehlt ihn
weiterhin; die eigene Wahl gewinnt immer.
WARUM AUS DER ID UND NICHT AUS DEM NAMEN: Ein Name aendert sich
(Heirat, Schreibweise, Kuerzel), eine ID nie. Eine Farbe, die beim
Umbenennen springt, waere schlimmer als gar keine.
Der neutrale Ton bleibt in der Liste -- er ist jetzt eine WAHL
(„ich will keine Farbe"), keine Voreinstellung. */
/* WARUM NICHT EINFACH `id % 11`.
---------------------------------------------------------------------
Die elf Toene stehen in der Reihenfolge ihres Farbwinkels -- Nachbarn
in der Liste sind auch Nachbarn im Farbkreis. Mit `id % 11` bekommen
zwei Leute, deren Nummern aufeinanderfolgen, deshalb zwei aehnliche
Farben. Gemessen am Bildschirm: Person 13 und 14 sassen im selben
Gespraech, eine magenta, eine rot -- auf dem Bildschirmfoto kaum zu
trennen, und genau das, was die Farbe verhindern soll.
Elf ist eine Primzahl. Damit ist JEDE Schrittweite von 1 bis 10
teilerfremd, laeuft also durch alle elf Toene, bevor sich einer
wiederholt -- keiner geht verloren. Die 4 ist gewaehlt, weil sie den
groessten Sprung ergibt: vier Schritte sind rund 131 Grad im
Farbkreis, fast das Maximum von 180. Aufeinanderfolgende Nummern
landen damit so weit auseinander wie moeglich. */
const SPRUNG = 4;
export function autoKachelFuer(personId) {
const bunte = CHAT_KACHELN.filter((k) => k.wert !== "grund");
if (!bunte.length) return null;
const n = Number(personId);
if (!Number.isFinite(n) || n < 0) return null;
return bunte[(n * SPRUNG) % bunte.length].wert;
}
/** Der Ton, den diese Person TRAEGT -- eigene Wahl, sonst die
* automatische. Fuer die Frage „was hat sie eingestellt?" gibt es
* `gewaehlteKachelFuer`; die beiden zu verwechseln hiesse, dass im
* Waehler ploetzlich ein Ton angehakt waere, den niemand gewaehlt hat. */
function kachelFuer(personId) {
return gewaehlteKachelFuer(personId) || autoKachelFuer(personId);
}
function gewaehlteKachelFuer(personId) {
try {
return kachelPruefen(db().prepare(
"SELECT chat_kachel FROM personen WHERE id = ?").get(personId)?.chat_kachel);
@@ -543,7 +633,12 @@ chatRouter.get("/workspace/api/chat/kacheln", (req, res) => {
try {
res.json({
kacheln: CHAT_KACHELN,
meine: kachelFuer(req.person.id),
/* Die eigene WAHL, nicht der getragene Ton -- sonst stuende im
Waehler ein Haken bei einer Farbe, die niemand gewaehlt hat. */
meine: gewaehlteKachelFuer(req.person.id),
/* Damit der Waehler beim neutralen Eintrag zeigen kann, was
stattdessen getragen wird, wenn man nichts waehlt. */
automatisch: autoKachelFuer(req.person.id),
});
} catch (f) {
console.error("[chat] Kacheln:", f?.message);
@@ -1091,7 +1186,9 @@ chatRouter.get("/workspace/api/chat/raeume/:id/nachrichten", (req, res) => {
auch die von gestern. Die Farbe an jede Zeile zu schreiben
waere eine zweite Wahrheit -- und nach der ersten Aenderung
haette dieselbe Person zwei Farben im selben Gespraech. */
von_kachel: kachelPruefen(n.von_kachel),
/* Eigene Wahl, sonst die automatische -- dieselbe Regel wie
ueberall, damit eine Person in jeder Liste gleich aussieht. */
von_kachel: kachelPruefen(n.von_kachel) || autoKachelFuer(n.person_id),
text: n.weg_am ? null : n.text,
zurueckgenommen: !!n.weg_am,
erstellt: n.erstellt,
+24 -3
View File
@@ -1223,8 +1223,20 @@ const TREFF_BEREICHE = [
der Treff-Chat daneben 29 Nachrichten -- geredet wird im Chat, das
Brett war eine Kachel ohne Inhalt. Sie zeigt jetzt auf die Seite,
die erklaert, was es hier ueberhaupt gibt. */
/* ALLE FARBEN DES HAUSES IN EINER KACHEL (22.09.2026).
Filipe: „die farbe dieser kachel soll alle farben haben die es auf
der ganze seite gibt ... nicht gemischt ... soll komplett farbig
sein und ultra geil aussehen."
`ton: 34` bleibt stehen und ist kein Widerspruch: Er faerbt Rand,
Zeichen und Pfeil und ist der Rueckfall, falls das Stilblatt
einmal nicht laedt. Die Streifen kommen aus einer eigenen Regel,
die `tools/kachel-regenbogen.mjs` rechnet -- aus den benutzten
Toenen, nicht aus einer Liste hier. */
{ ...TREFF_GRUPPE, name: "Willkommen", unter: "Was es hier gibt, kurz erklaert",
zeichen: "community", ton: 34, gross: true, ziel: "willkommen.html", szene: "lounge" },
zeichen: "community", ton: 34, gross: true, regenbogen: true,
ziel: "willkommen.html", szene: "lounge" },
/* DER CHAT (19.09.2026). Filipe: "eine geile mischung von punkt 2
und drei ... nach mitternacht bis morgens 6 uhr keiner schreiben
kann damit auch die privatsphaere beruecksichtig wird ueber nacht
@@ -1261,14 +1273,23 @@ const TREFF_BEREICHE = [
hat nur diese eine. */
{ ...TREFF_GRUPPE, name: "Treff-Chat", unter: "Miteinander reden – nachts schläft er",
zeichen: "chat", ton: 41, ziel: "chat.html?raum=treff", szene: "lounge" },
/* HIGHLIGHTS AN DIE SPITZE (22.09.2026).
Filipe: „da wo anschlagbrett ist soll highlights sein und dan den
rest nochmal weiter fuehren."
Kein Tausch, sondern ein Aufruecken: Highlights nimmt den Platz,
alle anderen wandern eine Stelle weiter. Inhaltlich stimmt das
auch -- was die Leute selbst gemacht haben, steht vor dem, was
ihnen angesagt wird. */
{ ...TREFF_GRUPPE, name: "Highlights", unter: "Eure Clips und Bilder",
zeichen: "live", ton: 29, ziel: "bereich.html?b=highlight", szene: "arena" },
{ ...TREFF_GRUPPE, name: "Anschlagbrett", unter: "Was gerade gilt",
zeichen: "reports", ton: 33, ziel: "bereich.html?b=anschlag", szene: "halle" },
{ ...TREFF_GRUPPE, name: "Was ansteht", unter: "Die n\u00e4chsten Streams und Events",
zeichen: "kalender", ton: 31, ziel: "bereich.html?b=ansteht", szene: "skyline" },
{ ...TREFF_GRUPPE, name: "Wunschliste", unter: "Was ihr euch w\u00fcnscht \u2013 und wer mitwill",
zeichen: "content", ton: 30, ziel: "bereich.html?b=wunsch", szene: "portal" },
{ ...TREFF_GRUPPE, name: "Highlights", unter: "Eure Clips und Bilder",
zeichen: "live", ton: 29, ziel: "bereich.html?b=highlight", szene: "arena" },
/* HIESS BIS ZUM 21.09.2026 "Unsere Seiten" (Ziel und Datei bleiben
gleich, nur der Name auf der Kachel aendert sich).