Team-Lage: fuenf Stufen mit eigener Farbe, Karten neu gebaut, 404 wirft nicht mehr hinaus

B7 -- "wenn ich auf diese sachen drücke werd ich auf die startseite
geschickt" und "ich will das es ein zwei kategorien mehr gibt und das
soll geiler aussehen und jede seine eigene farbe, stark erkennbar"

1. DER RAUSWURF. Ein Druck auf einen Stufen-Knopf schickte auf die
   Startseite. Ursache: `hole()` stand ACHTMAL Zeichen fuer Zeichen
   gleich in acht Dateien, und darin warf JEDER 404 hinaus -- auch der
   auf eine blosse Handlung. Jetzt eine gemeinsame `assets/js/holen.js`
   mit der engeren, abgeleiteten Regel: Ein 404 wirft nur, solange die
   Seite noch gar nichts bekommen hat.

2. ZWEI STUFEN MEHR, und keine davon erfunden: "Fortgeschritten" gibt
   es im Entwicklungs-Katalog laengst (ENTWICKLUNG_ERWARTUNG), hier
   fehlte genau diese Mitte; "Vertretung" stand bis heute IN der
   Beschreibung von Senior. Keine Datenbankaenderung noetig -- die
   Spalte ist absichtlich ein TEXT ohne CHECK.

3. DIE FARBEN SIND GERECHNET. Nachgemessen lagen "Probe" und
   "Standard" bei 0,0576 OKLab-Abstand; MINDEST_ABSTAND ist 0,090 --
   die beiden waren nebeneinander dieselbe Farbe, und alle drei lagen
   unter MINDEST_BUNTHEIT. Die neuen fuenf sind ein Faecher aus fuenf
   Farbwinkeln im Abstand von 72 Grad; der Versatz ist der, bei dem der
   kleinste Abstand am groessten wird. Ergebnis: 0,1531 untereinander,
   0,1108 zur Rollenmarke daneben, Kontrast 7,4 bis 8,6.

B8 -- "die sollen viel krasser geiler und übersichtlicher sein ... und
die kacheln sollen viel krass geiler und spezieller aussehen auch der
hintergrund, veränder das komplett"

4. DIE KARTE IST NEU: Kopfband in der Farbe der Stufe bis an die
   Kanten, Zeichen von 44 auf 52 px mit Ring, Zahlenband als eigene
   Flaeche, neuer Hintergrund (Farbschein unter dem Kopfband, feine
   Schraffur, dunklere Platte). 781 px hoch gemessen, danach 746.

5. DIE ROLLE STEHT JETZT DA -- als Marke auf der Karte und als
   Ueberschrift ueber jeder Gruppe. Sortiert war schon vorher nach
   Rolle; man konnte es nur nicht sehen.

DREI FEHLER, DIE DABEI AUFFIELEN

* `auto-fit` liess die einzelne Karte der rechten Hand ueber die ganze
  Bildschirmbreite laufen, sobald gruppiert wurde. `auto-fill` haelt
  die leeren Spalten offen.
* Der Name der Person trug `tperson__namen` statt `tperson__name` --
  ein Buchstabe, und damit die Klasse fuer graues Kleingedrucktes. Auf
  einer Seite ueber Personen war der Name kleiner als die Beschriftung
  darunter. Gefunden hat es die neue Pruefung, die ueberall "?" las.
* `stufeSetzen()` suchte das Stufen-Schild mit
  `[class*="tmerkmal--"]:not(...)` -- einer Aufzaehlung dessen, was es
  NICHT ist. Sobald die Rollenmarke davorstand, traf die Suche sie:
  Ein Druck auf "Standard" haette aus "Modi" das Wort "Standard"
  gemacht. Und die Karte faerbte sich beim Setzen nicht mit um.

DREI PRUEFUNGEN, ALLE MIT GEGENPROBE

* pruef-holen.mjs (NEU, 14): fuehrt die echte Datei aus und misst fuenf
  Wege; dieselben fuenf noch einmal an der ALTEN Fassung, die bei genau
  zwei durchfallen muss. Dazu: laedt jede der acht Seiten holen.js, und
  zwar VOR ihrem Skript.
* pruef-teamlage-karten.mjs (NEU, 22): im Browser. Gruppen, Rollenwort,
  Stufenknoepfe nur bei Modis, der Druck selbst (kein Sprung, ein
  Abruf, Schild und Kartenfarbe ziehen mit), Gegenprobe mit dem zweiten
  Druck, und die neuen Baender auf 390 px.
* pruef-team-stufen.mjs (28 -> 47): die abgeschriebene Liste
  ["probe","standard","senior"] ist raus -- geprueft werden jetzt
  Eigenschaften und die Farbabstaende, gelesen aus team.css. Gegenprobe
  ist der Stand von gestern, der durch dieselbe Messung faellt.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-22 19:46:47 +02:00
co-authored by Claude Opus 5
parent 3b76a9aab5
commit ba0e326585
54 changed files with 2146 additions and 672 deletions
+139 -4
View File
@@ -1,5 +1,5 @@
/* =====================================================================
DIE MITGLIEDER-KACHEL UND DIE DREI STUFEN (Blueprint Kapitel 4/4.1)
DIE MITGLIEDER-KACHEL UND DIE STUFEN (Blueprint Kapitel 4/4.1)
Vier Fragen, und die dritte ist die, an der es schiefgeht:
@@ -180,12 +180,147 @@ ok(marina?.stufe === "probe" && kim?.stufe === "probe",
`ohne Eintrag ist die Stufe "Probe" (${marina?.stufe} / ${kim?.stufe})`);
/* Die Liste der Stufen kommt VOM SERVER -- eine zweite im Browser
waere die Stelle, an der beim naechsten Mal eine fehlt. */
waere die Stelle, an der beim naechsten Mal eine fehlt.
KEINE ABGESCHRIEBENE LISTE MEHR (22.09.2026). Hier stand
`=== JSON.stringify(["probe","standard","senior"])`. Als die vierte
und fuenfte Stufe dazukamen, wurde die Pruefung rot, ohne dass
irgendetwas kaputt war -- sie hat die Zahl von gestern verteidigt.
Dieselbe Krankheit wie eine abgeschriebene Spaltenliste.
Geprueft werden jetzt die EIGENSCHAFTEN, die wirklich gelten
muessen, egal wie viele es sind. */
const stufen = (lage.stufen || []).map((s) => s.wert);
ok(JSON.stringify(stufen) === JSON.stringify(["probe", "standard", "senior"]),
`die drei Stufen kommen mit, in ihrer Reihenfolge (${stufen.join(", ")})`);
ok(stufen.length >= 3,
`mindestens drei Stufen kommen mit (${stufen.length}: ${stufen.join(", ")})`);
ok(new Set(stufen).size === stufen.length, "keine Stufe doppelt");
/* "probe" MUSS die erste sein: Der Server bildet NULL auf die erste ab
(stufeVon), und die Oberflaeche waehlt STUFEN[0] vor. Stuende dort
etwas anderes, waere jeder neue Mensch still auf dieser anderen
Stufe -- ohne dass es irgendwo auffaellt. */
ok(stufen[0] === "probe",
`die erste ist "probe" (${stufen[0]}) -- darauf faellt ein leeres Feld zurueck`);
ok((lage.stufen || []).every((s) => s.name && s.name !== s.wert),
"und jede hat einen lesbaren Namen");
ok(new Set((lage.stufen || []).map((s) => s.name)).size === stufen.length,
"kein Name doppelt -- zwei gleich beschriftete Knoepfe waeren ein Ratespiel");
/* =====================================================================
DIE FARBEN -- NACHGERECHNET, NICHT GEGLAUBT (22.09.2026)
Filipe: „und ich will das es ein zwei kategorien mehr gibt und das
soll geiler aussehen und jede seine eigene farbe, stark erkennbar."
„Stark erkennbar" ist keine Geschmacksfrage, sondern ein Abstand.
Das Haus hat dafuer laengst Schwellen (tools/kachelton-regeln.mjs);
die Stufenfarben waren nur nie daran gemessen worden. Nachgerechnet
lagen "Probe" und "Standard" bei 0,0576 -- weit unter den 0,090, die
ueberall sonst gelten. Es war also kein Geschmacksurteil, sondern
ein messbarer Mangel, und er stand seit dem 10.09. da.
DREI ORTE, EINE FARBE: Die Stufe faerbt das Schild
(.tmerkmal--<wert>), die ganze Karte ([data-stufe="<wert>"]) und den
Knopf zum Setzen (--st am [data-stufe="<wert>"]). Stimmen die drei
nicht ueberein, fuehrt ein oranger Knopf zu einer gruenen Karte.
===================================================================== */
console.log("");
console.log("--- Die Farben der Stufen ---");
const { readFileSync: leseDatei } = await import("node:fs");
const { dirname: ordnerVon, join: pfadJoin } = await import("node:path");
const { fileURLToPath: alsPfad } = await import("node:url");
const HIER_ST = ordnerVon(alsPfad(import.meta.url));
const teamCss = leseDatei(
pfadJoin(HIER_ST, "..", "workspace", "assets", "css", "team.css"), "utf8");
const { oklab } = await import("./helfer-kachel-echtfarbe.mjs");
const regeln = await import("../tools/kachelton-regeln.mjs");
const hexZuRgb = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
const linearAnteil = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
const leuchtkraft = ([R, G, B]) => {
const [r, g, b] = [R / 255, G / 255, B / 255].map(linearAnteil);
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
};
const kontrastZu = (a, b) => {
const x = leuchtkraft(a), y = leuchtkraft(b);
return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
};
const okAbstand = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
const buntheit = (o) => Math.hypot(o[1], o[2]);
const GRUND_RGB = hexZuRgb(regeln.GRUND);
/* Die Farben werden AUS DER STILVORLAGE GELESEN, nicht hier
aufgezaehlt. Eine Liste, die niemand pflegt, kann nicht veralten. */
const holeFarbe = (muster) => {
const t = teamCss.match(muster);
return t ? t[1].toLowerCase() : null;
};
const farben = new Map();
for (const wert of stufen) {
const schild = holeFarbe(new RegExp(
"\\.tmerkmal--" + wert + "\\s*\\{[^}]*color-mix\\(in srgb,\\s*(#[0-9a-fA-F]{6})"));
const karte = holeFarbe(new RegExp(
"\\.tperson\\[data-stufe=\"" + wert + "\"\\]\\s*\\{\\s*--r:\\s*(#[0-9a-fA-F]{6})"));
const knopf = holeFarbe(new RegExp(
"\\.tstufen__knopf\\[data-stufe=\"" + wert + "\"\\]\\s*\\{\\s*--st:\\s*(#[0-9a-fA-F]{6})"));
ok(Boolean(schild && karte && knopf),
`"${wert}" hat eine Farbe am Schild, an der Karte und am Knopf`
+ ` (${schild || "fehlt"} / ${karte || "fehlt"} / ${knopf || "fehlt"})`);
ok(schild !== null && schild === karte && schild === knopf,
`und es ist ueberall dieselbe (${schild})`);
if (schild) farben.set(wert, schild);
}
ok(farben.size === stufen.length,
`alle ${stufen.length} Stufen haben eine Farbe (${farben.size})`);
/* Die eigentliche Messung. Die ZAHL der geprueften Paare steht in der
Bedingung -- eine leere Schleife darf nicht "in Ordnung" heissen. */
const werte = [...farben.entries()];
let paare = 0, engstes = Infinity, engstesPaar = "";
for (let i = 0; i < werte.length; i++) {
for (let j = i + 1; j < werte.length; j++) {
paare++;
const a = okAbstand(oklab(hexZuRgb(werte[i][1])), oklab(hexZuRgb(werte[j][1])));
if (a < engstes) { engstes = a; engstesPaar = `${werte[i][0]}/${werte[j][0]}`; }
}
}
ok(paare === (werte.length * (werte.length - 1)) / 2 && paare > 0
&& engstes >= regeln.MINDEST_ABSTAND,
`${paare} Paare geprueft, engstes ${engstesPaar} = ${engstes.toFixed(4)}`
+ ` (noetig ${regeln.MINDEST_ABSTAND})`);
let blasseste = Infinity, grellste = 0, schwaechster = Infinity;
for (const [, hex] of werte) {
const rgb = hexZuRgb(hex), o = oklab(rgb);
blasseste = Math.min(blasseste, buntheit(o));
grellste = Math.max(grellste, buntheit(o));
schwaechster = Math.min(schwaechster, kontrastZu(rgb, GRUND_RGB));
}
ok(werte.length > 0 && blasseste >= regeln.MINDEST_BUNTHEIT,
`die blasseste hat Buntheit ${blasseste.toFixed(3)} (noetig ${regeln.MINDEST_BUNTHEIT})`);
ok(werte.length > 0 && grellste <= regeln.HOECHST_BUNTHEIT,
`die bunteste hat ${grellste.toFixed(3)} (hoechstens ${regeln.HOECHST_BUNTHEIT})`);
ok(werte.length > 0 && schwaechster >= regeln.MINDEST_KONTRAST,
`der schwaechste Kontrast gegen den Kartengrund ist ${schwaechster.toFixed(2)}`
+ ` (noetig ${regeln.MINDEST_KONTRAST})`);
/* GEGENPROBE ZUR MESSUNG SELBST. Ohne sie waere nicht bewiesen, dass
diese Rechnung ueberhaupt "nicht in Ordnung" sagen kann -- und der
Stand von gestern ist der beste Beleg dafuer, weil er wirklich so
ausgeliefert war. */
const alteFarben = ["#9fb6c6", "#7fc4e8", "#8fd6a6"];
let altEngstes = Infinity;
for (let i = 0; i < alteFarben.length; i++) {
for (let j = i + 1; j < alteFarben.length; j++) {
altEngstes = Math.min(altEngstes,
okAbstand(oklab(hexZuRgb(alteFarben[i])), oklab(hexZuRgb(alteFarben[j]))));
}
}
ok(altEngstes < regeln.MINDEST_ABSTAND,
`Gegenprobe: der Stand von gestern faellt durch dieselbe Messung`
+ ` (${altEngstes.toFixed(4)} < ${regeln.MINDEST_ABSTAND})`);
/* =====================================================================
2. WER DARF SIE SETZEN