DogFatherGitandClaude Opus 5
0d3a4b78cd
Filipe hat die beiden breiten Sichtpruefungen freigegeben. pruef-handy
meldete vier Fehlschlaege, pruef-lesbarkeit war gruen.
BEIDE BEFUNDE WAREN NICHT VON MEINER AENDERUNG -- gemessen, nicht
vermutet: crew-index.html laedt weder kopf.js noch erklaerung.js, und
mein Commit hat dort nur die Versionsnummer angefasst. Die betroffene
Regel steht seit dem 27.08.2026 so da.
1. ZU KLEINE SCHRIFT AUF DER ZUGANGSWAND VON TEAM DOGI
`.marke` stand auf schmalen Bildschirmen auf .68rem = 10,88 px und
damit unter der Hausuntergrenze von 11,5 px -- betroffen waren die
Woerter "DogFather" und "Team Dogi". Das ist die erste Seite, die ein
neuer Modi ueberhaupt sieht, und sie wird mit dem Daumen bedient.
Jetzt .72rem = 11,52 px, dieselbe Hebung wie seinerzeit in heim.css.
Die Grundlinie in pruef-css-klassen wird MITGEZOGEN (43 -> 42):
Sonst duerfte der Fortschritt lautlos wieder verlorengehen, und eine
Grundlinie, die nur nach oben nachgibt, ist keine.
2. DIE BERUEHRZIEL-REGEL ZITIERTE WCAG 2.5.8, ABER NICHT IHRE AUSNAHME
Gemeldet wurden die zwei Verweise im Fliesstext der Treff-Regeln
("Der Treff", "Regeln & Hilfe", je 20 px hoch). 2.5.8 nimmt genau das
aber ausdruecklich aus: "Inline: The target is in a sentence or its
size is otherwise constrained by the line-height of non-target text."
Sie auf 24 px zu bringen hiesse, die Zeilenhoehe eines Absatzes zu
sprengen -- also einen Text kaputtzumachen, um eine Regel zu
erfuellen, die diesen Text gar nicht meint. Die Ausnahme ist eng
gefasst: nur <a>, nur wirklich inline, und nur wenn im selben Absatz
auch Text steht, der nicht zum Link gehoert. Ein allein stehender
Link bleibt ein Beruehrziel.
UND DIESE DATEI HATTE BIS HEUTE GAR KEINE GEGENPROBE. Sie konnte
also nie zeigen, dass sie ein zu kleines Ziel ueberhaupt bemerkt --
erst recht nicht, seit die Regel eine Ausnahme hat. Jetzt in beide
Richtungen: ein allein stehendes 20x20-Ziel MUSS auffallen, ein
gleich grosser Verweis im Satz darf es NICHT.
PRUEFUNGEN: pruef-handy 136 -> 138 (vier Fehlschlaege behoben, zwei
Gegenproben dazu), keine einzige weniger. pruef-lesbarkeit gruen
(12 s). pruef-css-klassen, pruef-erklaerung und pruef-neue-seiten nach
der gate.css-Aenderung noch einmal gelaufen, alle gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
676 lines
32 KiB
JavaScript
676 lines
32 KiB
JavaScript
/* STEHT DAS CSS AUCH AUF DER SEITE, DIE ES BENUTZT?
|
||
|
||
ENTSTANDEN AUS EINEM ECHTEN FEHLER (05.09.2026).
|
||
|
||
Die Teilnehmerwahl im Kalender benutzte `.wahl__knopf` und
|
||
`.wahl__rolle`. Beide sind sauber definiert -- in dateien.css. Und
|
||
kalender.html bindet dateien.css nicht ein.
|
||
|
||
Ohne `display:inline-flex` und `gap` stehen zwei <span> eben direkt
|
||
nebeneinander. Auf Filipes Bildschirm stand deshalb:
|
||
|
||
DogfatherDogFather VanVanDogFather CigdemManager
|
||
|
||
Vierzig Prüfungen zur Teilnehmerwahl waren grün. Sie prüften, dass
|
||
die richtigen Personen ankommen, dass Fremde weggefiltert werden,
|
||
dass die Sichtbarkeit stimmt -- alles richtig, und alles am Problem
|
||
vorbei. KEINE hat gefragt, ob das Ergebnis auch aussieht wie
|
||
gedacht. Das ist die dritte Sorte Fehler aus der Projektnotiz: nicht
|
||
der übersprungene Test, nicht der grüne, der das Falsche prüft,
|
||
sondern die Frage, die niemand gestellt hat.
|
||
|
||
WAS HIER GEMESSEN WIRD
|
||
|
||
Für jede Workspace-Seite:
|
||
1. Welche Stylesheets bindet sie ein? (rekursiv über @import)
|
||
2. Welche Klassen vergibt sie -- im HTML *und* in ihrem eigenen
|
||
JavaScript (className, classList.add, setAttribute('class')).
|
||
3. Ist jede davon in einem der eingebundenen Stylesheets definiert?
|
||
|
||
WAS BEWUSST NICHT GEMESSEN WIRD
|
||
|
||
Klassen, die es nur zum Anfassen gibt (`js-`), reine Datenanker und
|
||
Klassen aus gemeinsamen Bausteinen, die jede Seite lädt. Und die
|
||
Gegenrichtung ("CSS ohne Benutzer") gehört nicht hierher: Ungenutztes
|
||
CSS ist Ballast, kein Fehler.
|
||
|
||
DRITTER AUSGANG: Findet die Prüfung keine Seiten oder keine Klassen,
|
||
ist das kein "bestanden" -- dann hat sie nichts gemessen und sagt es.
|
||
|
||
GEGENPROBE am Ende: Eine erfundene Klasse muss auffallen, und eine
|
||
echte darf es nicht. */
|
||
|
||
import { readFileSync, readdirSync, existsSync } from "node:fs";
|
||
import { join, dirname, resolve } from "node:path";
|
||
import { fileURLToPath } from "node:url";
|
||
|
||
const HIER = dirname(fileURLToPath(import.meta.url));
|
||
const WURZEL = resolve(HIER, "..");
|
||
const WS = join(WURZEL, "workspace");
|
||
|
||
let fehler = 0;
|
||
const ok = (b, t) => { console.log((b ? " ok " : " FEHL ") + t); if (!b) fehler++; };
|
||
|
||
/* ---------- Welche Stylesheets bindet eine Seite ein? -------------------- */
|
||
|
||
/** Liest ein Stylesheet und folgt seinen @import-Zeilen. */
|
||
function cssMitImporten(pfad, gesehen = new Set()) {
|
||
const echt = resolve(pfad);
|
||
if (gesehen.has(echt) || !existsSync(echt)) return "";
|
||
gesehen.add(echt);
|
||
const text = readFileSync(echt, "utf8");
|
||
let alles = text;
|
||
for (const m of text.matchAll(/@import\s+(?:url\()?["']([^"')]+)["']\)?/g)) {
|
||
alles += "\n" + cssMitImporten(join(dirname(echt), m[1].split("?")[0]), gesehen);
|
||
}
|
||
return alles;
|
||
}
|
||
|
||
/** Alle Klassennamen, die ein CSS-Text definiert. */
|
||
function definierteKlassen(css) {
|
||
const raus = new Set();
|
||
/* Erst Kommentare weg: In diesem Haus stehen lange Erklärungen im
|
||
CSS, und dort kommen Klassennamen als Fließtext vor ("wie
|
||
.wahl__knopf in dateien.css"). Die zählen nicht als Definition --
|
||
sonst würde ausgerechnet der Kommentar, der den Fehler beschreibt,
|
||
ihn verdecken. */
|
||
const ohne = css.replace(/\/\*[\s\S]*?\*\//g, " ");
|
||
for (const m of ohne.matchAll(/\.(-?[A-Za-z_][\w-]*)/g)) raus.add(m[1]);
|
||
return raus;
|
||
}
|
||
|
||
/* ---------- Welche Klassen vergibt eine Seite? --------------------------- */
|
||
|
||
/** Klassen aus dem HTML. */
|
||
function klassenAusHtml(html) {
|
||
const raus = new Set();
|
||
const ohneKommentar = html.replace(/<!--[\s\S]*?-->/g, " ");
|
||
for (const m of ohneKommentar.matchAll(/\bclass\s*=\s*["']([^"']+)["']/g)) {
|
||
for (const k of m[1].split(/\s+/)) if (k) raus.add(k);
|
||
}
|
||
return raus;
|
||
}
|
||
|
||
/** Klassen aus JavaScript. Nur die Formen, die dieses Haus benutzt --
|
||
* ein vollständiger Parser wäre hier Aufwand ohne Ertrag. */
|
||
function klassenAusJs(js) {
|
||
const raus = new Set();
|
||
const ohne = js.replace(/\/\*[\s\S]*?\*\//g, " ");
|
||
const muster = [
|
||
/\.className\s*=\s*['"]([^'"]+)['"]/g,
|
||
/setAttribute\(\s*['"]class['"]\s*,\s*['"]([^'"]+)['"]/g,
|
||
/class\s*=\s*\\?["']([^"'\\]+)/g, // in Template-Literalen
|
||
];
|
||
for (const m of muster) {
|
||
for (const t of ohne.matchAll(m)) {
|
||
for (const stueck of t[1].split(/['",\s]+/)) {
|
||
const k = stueck.trim();
|
||
/* Nur echte Klassennamen -- keine Variablen, keine Ausdrücke. */
|
||
if (k && /^-?[A-Za-z_][\w-]*$/.test(k)) raus.add(k);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* classList.add() BRAUCHT eine eigene Behandlung.
|
||
Der erste Entwurf nahm den ganzen Klammerinhalt und zerlegte ihn
|
||
an Anführungszeichen und Kommas. Bei
|
||
|
||
classList.add(i === 0 ? 'marke__haupt' : 'marke__leise')
|
||
|
||
fiel dabei `i` als angebliche Klasse heraus -- und die Prüfung
|
||
meldete auf sechzehn Seiten eine fehlende Klasse `.i`, die es nie
|
||
gab. Eine Warnung, die falsch ist, ist schlimmer als keine: Sie
|
||
kostet Zeit und wird beim nächsten Mal überlesen.
|
||
Deshalb werden hier NUR die Zeichenketten gelesen, nie der
|
||
Ausdruck drumherum. */
|
||
for (const t of ohne.matchAll(/classList\.(?:add|remove|toggle)\(([^)]*)\)/g)) {
|
||
for (const s of t[1].matchAll(/['"]([^'"]+)['"]/g)) {
|
||
for (const k of s[1].trim().split(/\s+/)) {
|
||
if (k && /^-?[A-Za-z_][\w-]*$/.test(k)) raus.add(k);
|
||
}
|
||
}
|
||
}
|
||
return raus;
|
||
}
|
||
|
||
/** Welche eigenen Skripte bindet die Seite ein? */
|
||
function skripteVon(html) {
|
||
const raus = [];
|
||
for (const m of html.matchAll(/<script[^>]+src\s*=\s*["']([^"']+)["']/g)) {
|
||
const p = m[1].split("?")[0];
|
||
if (/^https?:/.test(p)) continue; // fremde Skripte nicht
|
||
raus.push(join(WS, p.replace(/^\//, "").replace(/^workspace\//, "")));
|
||
}
|
||
return raus;
|
||
}
|
||
|
||
function stylesheetsVon(html) {
|
||
const raus = [];
|
||
for (const m of html.matchAll(/<link[^>]+rel\s*=\s*["']stylesheet["'][^>]*>/g)) {
|
||
const h = /href\s*=\s*["']([^"']+)["']/.exec(m[0]);
|
||
if (!h || /^https?:/.test(h[1])) continue;
|
||
raus.push(join(WS, h[1].split("?")[0].replace(/^\//, "").replace(/^workspace\//, "")));
|
||
}
|
||
return raus;
|
||
}
|
||
|
||
/* Klassen, die absichtlich kein CSS haben. Jede Ausnahme braucht einen
|
||
Grund -- eine Liste ohne Begründung wächst, bis sie alles enthält. */
|
||
const OHNE_CSS = new Set([
|
||
"leise", // Grundstil, steht in gate.css als Elementregel
|
||
]);
|
||
const OHNE_CSS_PRAEFIX = ["js-", "u-"]; // reine Anfasser, nie gestaltet
|
||
|
||
/* =======================================================================
|
||
Die Messung
|
||
======================================================================= */
|
||
console.log("\n=== Ist jede benutzte Klasse auf ihrer Seite auch definiert? ===");
|
||
|
||
const seiten = readdirSync(WS).filter((n) => n.endsWith(".html"));
|
||
/* DIE ANZAHL GEHOERT IN DIE BEDINGUNG, nicht nur in den Meldetext.
|
||
Findet die Prüfung keine Seiten, hat sie nichts gemessen -- und
|
||
"0 von 0 Klassen fehlen" wäre grün und wertlos. */
|
||
ok(seiten.length >= 10, `${seiten.length} Workspace-Seiten gefunden`);
|
||
|
||
/* ALLES CSS DES HAUSES -- für die entscheidende Unterscheidung.
|
||
|
||
Eine Klasse ohne CSS ist zweierlei, und nur eines davon ist ein
|
||
Fehler:
|
||
|
||
(a) NIRGENDS gestaltet. Ein reiner Struktur-Anker wie
|
||
`.k-wdh__ende`, der nur ein <div> benennt. Kein Fehler --
|
||
sonst müsste man jedem Container Deko andichten.
|
||
|
||
(b) Gestaltet, aber in einer Datei, die DIESE SEITE NICHT LÄDT.
|
||
Das ist der Fehler von heute: Jemand hat es gestaltet, es
|
||
sieht im Editor richtig aus, und auf der Seite kommt nichts
|
||
an. Niemandem fällt es auf, weil das CSS ja existiert.
|
||
|
||
Nur (b) schlägt an. */
|
||
const ALLE_CSS = definierteKlassen(
|
||
readdirSync(join(WS, "assets/css")).filter((n) => n.endsWith(".css"))
|
||
.map((n) => readFileSync(join(WS, "assets/css", n), "utf8")).join("\n"));
|
||
|
||
let geprueft = 0;
|
||
const luecken = []; // (b) -- gestaltet, aber nicht hier
|
||
const ungestaltet = []; // (a) -- nur zur Ansicht
|
||
|
||
for (const seite of seiten) {
|
||
const html = readFileSync(join(WS, seite), "utf8");
|
||
|
||
const css = stylesheetsVon(html).map((p) => cssMitImporten(p)).join("\n");
|
||
const definiert = definierteKlassen(css);
|
||
|
||
const benutzt = klassenAusHtml(html);
|
||
for (const skript of skripteVon(html)) {
|
||
if (!existsSync(skript)) continue;
|
||
for (const k of klassenAusJs(readFileSync(skript, "utf8"))) benutzt.add(k);
|
||
}
|
||
|
||
for (const k of benutzt) {
|
||
if (OHNE_CSS.has(k)) continue;
|
||
if (OHNE_CSS_PRAEFIX.some((p) => k.startsWith(p))) continue;
|
||
geprueft++;
|
||
if (definiert.has(k)) continue;
|
||
if (ALLE_CSS.has(k)) luecken.push(`${seite}: .${k}`);
|
||
else ungestaltet.push(`${seite}: .${k}`);
|
||
}
|
||
}
|
||
|
||
/* Auch hier die Anzahl in die Bedingung: Wären alle Muster kaputt und
|
||
fänden nichts, stünde sonst "0 Lücken" da -- grün, ohne je eine
|
||
Klasse angesehen zu haben. */
|
||
ok(geprueft > 200, `${geprueft} Klassenverwendungen geprüft`);
|
||
|
||
/* NACH KLASSE GRUPPIERT, nicht nach Seite. Eine fehlende Klasse auf
|
||
sechzehn Seiten ist EIN Fehler, nicht sechzehn -- und wer sechzehn
|
||
fast gleiche Zeilen liest, überliest die siebzehnte, die etwas
|
||
anderes sagt. */
|
||
const nachKlasse = new Map();
|
||
for (const eintrag of luecken) {
|
||
const [seite, klasse] = eintrag.split(": .");
|
||
if (!nachKlasse.has(klasse)) nachKlasse.set(klasse, []);
|
||
nachKlasse.get(klasse).push(seite);
|
||
}
|
||
const bericht = [...nachKlasse.entries()]
|
||
.sort((a, b) => b[1].length - a[1].length)
|
||
.map(([k, s]) => `.${k} — fehlt auf ${s.length} Seite${s.length === 1 ? "" : "n"}`
|
||
+ ` (${s.slice(0, 3).join(", ")}${s.length > 3 ? " …" : ""})`);
|
||
|
||
ok(luecken.length === 0 && geprueft > 200,
|
||
luecken.length
|
||
? `${nachKlasse.size} Klasse${nachKlasse.size === 1 ? "" : "n"} sind gestaltet, aber nicht auf ihrer Seite:`
|
||
+ `\n ${bericht.join("\n ")}`
|
||
: `jede gestaltete Klasse kommt auch auf ihrer Seite an`);
|
||
|
||
/* Kein Fehler, nur zur Kenntnis: Klassen, die es nirgends gibt. Meist
|
||
Struktur-Anker; gelegentlich aber ein Tippfehler, der hier auffällt,
|
||
bevor jemand sich wundert, warum nichts passiert. */
|
||
const nurAnker = new Set(ungestaltet.map((e) => e.split(": .")[1]));
|
||
console.log(` -- ${nurAnker.size} Klassen sind nirgends gestaltet `
|
||
+ `(Struktur-Anker, kein Fehler): ${[...nurAnker].slice(0, 8).join(", ")}`
|
||
+ (nurAnker.size > 8 ? " …" : ""));
|
||
|
||
/* =======================================================================
|
||
Schriftgrößen: nichts unter 11,5 Pixeln
|
||
=======================================================================
|
||
|
||
ZUM ZWEITEN MAL AM SELBEN TAG (06.09.2026). Erst hatten die
|
||
Art-Plaketten des Tagesblicks 10,56 px, dann -- nach der Korrektur --
|
||
die neue "JETZT"-Marke 10,88. Beide Male gemeldet von pruef-handy
|
||
und pruef-grosscheck, beide Male erst nach einem Browserlauf von
|
||
mehreren Minuten.
|
||
|
||
Die Regel steht seit dem 01.09.2026 im Haus: Unter 11,5 px liest auf
|
||
einem Handy niemand mehr, und was dort niemand liest, ist auf dem
|
||
Rechner nur Zierde. Sie wurde bisher nur AM BILD geprüft. Hier wird
|
||
sie an der Quelle geprüft -- in Sekunden statt in Minuten, und
|
||
bevor überhaupt jemand einen Browser startet.
|
||
|
||
WARUM BEIDE PRÜFUNGEN BLEIBEN: Diese hier findet den Wert im
|
||
Stylesheet. Sie kann nicht wissen, ob eine Regel am Ende überhaupt
|
||
greift oder von einer späteren überschrieben wird -- das sieht nur
|
||
der Browser. Die eine ist schnell und ungenau, die andere langsam
|
||
und genau. Zusammen fangen sie beides ab.
|
||
|
||
GERECHNET WIRD MIT 16 px Grundgröße: 0,72 rem = 11,52 px ist gerade
|
||
noch erlaubt, 0,71 rem = 11,36 px nicht mehr. */
|
||
console.log("\n=== Ist irgendeine Schrift zu klein? ===");
|
||
{
|
||
const GRENZE_PX = 11.5;
|
||
const GRUND_PX = 16;
|
||
|
||
let gemessen = 0;
|
||
const zuKlein = [];
|
||
|
||
for (const datei of readdirSync(join(WS, "assets/css")).filter((n) => n.endsWith(".css"))) {
|
||
const text = readFileSync(join(WS, "assets/css", datei), "utf8")
|
||
.replace(/\/\*[\s\S]*?\*\//g, " "); // Kommentare weg
|
||
|
||
for (const treffer of text.matchAll(/font-size:\s*([\d.]+)(rem|em|px)/g)) {
|
||
const wert = Number(treffer[1]);
|
||
const einheit = treffer[2];
|
||
/* `em` hängt von der Umgebung ab und lässt sich hier nicht
|
||
ausrechnen -- solche Stellen werden nicht gezählt, statt sie zu
|
||
raten. Sie sind selten und die Browserprüfung sieht sie. */
|
||
if (einheit === "em") continue;
|
||
const px = einheit === "px" ? wert : wert * GRUND_PX;
|
||
gemessen++;
|
||
if (px < GRENZE_PX) {
|
||
const zeile = text.slice(0, treffer.index).split("\n").length;
|
||
zuKlein.push(`${datei}:${zeile} → ${treffer[1]}${einheit} = ${px.toFixed(2)} px`);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* DIE ANZAHL GEHÖRT IN DIE BEDINGUNG: Fände das Muster gar nichts,
|
||
stünde sonst "0 zu kleine" da -- grün, ohne je eine Größe
|
||
angesehen zu haben. */
|
||
ok(gemessen > 150, `${gemessen} Schriftgrößen im Stylesheet geprüft`);
|
||
|
||
/* EINE GRUNDLINIE, KEIN WUNSCHWERT -- dasselbe Vorgehen wie beim
|
||
Layout-Sprung in pruef-tempo-workspace.
|
||
|
||
Im Bestand stehen 43 solche Stellen. Sie alle zu ändern wäre ein
|
||
Eingriff ins Aussehen von dreizehn Stylesheets, kein Fehlerfix --
|
||
und die Browserprüfung (pruef-handy) beanstandet davon nur die,
|
||
die auf einem Handy WIRKLICH sichtbar sind. Viele greifen dort
|
||
gar nicht oder werden überschrieben.
|
||
|
||
Eine Prüfung, die vom ersten Tag an rot ist, wird weggeklickt --
|
||
und mit ihr die echte Warnung. Sie hält deshalb den heutigen Stand
|
||
fest und schlägt an, sobald es MEHR werden. Genau das hätte heute
|
||
zweimal gegriffen: erst bei den Art-Plaketten (10,56 px), dann bei
|
||
der Jetzt-Marke (10,88) -- beide Male hätte es Minuten statt eines
|
||
Browserlaufs gekostet.
|
||
|
||
Wird der Bestand irgendwann aufgeräumt, gehört die Zahl gesenkt.
|
||
Sie steht hier als Zahl und nicht als Liste, damit niemand eine
|
||
neue Stelle in eine Ausnahmeliste einträgt und sie damit
|
||
stillschweigend erlaubt. */
|
||
/* 43 -> 42 am 14.09.2026: Die Marke auf schmalen Bildschirmen stand
|
||
auf .68rem = 10,88 px (gate.css, Zugangswand von Team Dogi) und ist
|
||
jetzt .72rem. Die Grundlinie wird MITGEZOGEN -- sonst duerfte der
|
||
Fortschritt lautlos wieder verlorengehen, und eine Grundlinie, die
|
||
nur nach oben nachgibt, ist keine. */
|
||
const GRUNDLINIE = 42;
|
||
ok(zuKlein.length <= GRUNDLINIE && gemessen > 150,
|
||
zuKlein.length > GRUNDLINIE
|
||
? `${zuKlein.length} Stellen unter ${GRENZE_PX} px — das sind `
|
||
+ `${zuKlein.length - GRUNDLINIE} MEHR als die Grundlinie ${GRUNDLINIE}. `
|
||
+ `Neu hinzugekommen ist vermutlich eine davon:\n `
|
||
+ zuKlein.slice(-6).join("\n ")
|
||
: `${zuKlein.length} Stellen unter ${GRENZE_PX} px `
|
||
+ `(Grundlinie ${GRUNDLINIE}, nicht mehr geworden)`);
|
||
|
||
if (zuKlein.length && zuKlein.length <= GRUNDLINIE) {
|
||
console.log(` -- davon im Bestand: ${zuKlein.slice(0, 3).join(" · ")} …`
|
||
+ ` — sichtbar sind sie laut pruef-handy nicht, sonst stünden sie dort`);
|
||
}
|
||
|
||
/* GEGENPROBE: Erkennt die Rechnung beide Einheiten -- und lässt sie
|
||
einen erlaubten Wert in Ruhe? Ohne das wäre "0 Treffer" wertlos. */
|
||
const probe = ".a { font-size: .68rem; } .b { font-size: 10px; } .c { font-size: .95rem; }";
|
||
const gefunden = [...probe.matchAll(/font-size:\s*([\d.]+)(rem|em|px)/g)]
|
||
.map(([, w, e]) => (e === "px" ? Number(w) : Number(w) * GRUND_PX))
|
||
.filter((px) => px < GRENZE_PX);
|
||
ok(gefunden.length === 2,
|
||
`Gegenprobe: von drei Größen werden die zwei zu kleinen erkannt `
|
||
+ `(${gefunden.map((p) => p.toFixed(2)).join(", ")} px), die dritte nicht`);
|
||
}
|
||
|
||
/* =======================================================================
|
||
GEGENPROBE — die Messung muss beides können
|
||
======================================================================= */
|
||
console.log("\n=== Gegenprobe ===");
|
||
{
|
||
/* 1. Der echte Fehler von heute, nachgestellt: eine Seite, die eine
|
||
Klasse benutzt, deren CSS in einem nicht eingebundenen
|
||
Stylesheet steht. */
|
||
const definiert = definierteKlassen(".k-dabei__knopf { color: red; }");
|
||
ok(definiert.has("k-dabei__knopf"), "eine definierte Klasse wird erkannt");
|
||
ok(!definiert.has("gibt-es-nicht"), "eine erfundene Klasse wird NICHT erkannt");
|
||
|
||
/* 2. Klassen aus JavaScript werden wirklich mitgelesen -- sonst wäre
|
||
genau der heutige Fall unsichtbar geblieben, denn die Wahl wird
|
||
komplett aus JS gebaut und steht in keinem HTML. */
|
||
const ausJs = klassenAusJs("b.className = 'k-dabei__knopf';\nx.classList.add('offen');");
|
||
ok(ausJs.has("k-dabei__knopf") && ausJs.has("offen"),
|
||
"Klassen aus className und classList.add werden gefunden");
|
||
|
||
/* 3. Ein Klassenname, der nur im KOMMENTAR steht, gilt nicht als
|
||
definiert. Sonst hätte ausgerechnet die Erklärung dieses Fehlers
|
||
ihn zugedeckt. */
|
||
const nurKommentar = definierteKlassen("/* wie .wahl__knopf in dateien.css */\n.echt { color: red; }");
|
||
ok(!nurKommentar.has("wahl__knopf") && nurKommentar.has("echt"),
|
||
"ein Klassenname aus einem Kommentar zählt nicht als Definition");
|
||
|
||
/* 4. Und der Beweis am echten Bestand: Die Wahl im Kalender muss
|
||
JETZT gedeckt sein -- vor der Reparatur wäre genau das rot. */
|
||
const kal = readFileSync(join(WS, "kalender.html"), "utf8");
|
||
const kalCss = definierteKlassen(stylesheetsVon(kal).map((p) => cssMitImporten(p)).join("\n"));
|
||
const noetig = ["k-dabei", "k-dabei__knopf", "k-dabei__zeichen", "k-dabei__name",
|
||
"k-dabei__titel", "k-dabei__liste", "k-dabei__gruppe", "k-dabei__haken", "k-dabei__punkt"];
|
||
const fehlend = noetig.filter((k) => !kalCss.has(k));
|
||
ok(fehlend.length === 0 && noetig.length === 9,
|
||
fehlend.length ? `im Kalender fehlt CSS für: ${fehlend.join(", ")}`
|
||
: `alle ${noetig.length} Klassen der Teilnehmerwahl sind in kalender.css definiert`);
|
||
|
||
/* 5. Und die alten Klassen sind wirklich weg -- nicht nur die neuen
|
||
da. Ein halber Umbau hinterlässt beides. */
|
||
const kalJs = readFileSync(join(WS, "assets/js/kalender.js"), "utf8");
|
||
ok(!/wahl__knopf|wahl__rolle|wahl__name/.test(kalJs.replace(/\/\*[\s\S]*?\*\//g, " ")),
|
||
"die alten .wahl__*-Klassen stehen nicht mehr im Kalender-Skript");
|
||
|
||
/* 6. DIE WICHTIGSTE GEGENPROBE: Unterscheidet die Prüfung die beiden
|
||
Fälle wirklich? Der ganze Wert hängt daran -- ohne sie könnte
|
||
die Bedingung "ALLE_CSS.has(k)" verdreht sein, und die Prüfung
|
||
wäre grün, während sie den echten Fehler durchwinkt.
|
||
|
||
Nachgestellt wird der Fall von heute an einem Miniaturbeispiel:
|
||
Zwei Klassen, beide ohne CSS auf ihrer Seite -- eine davon
|
||
woanders gestaltet, die andere nirgends. */
|
||
const seitenCss = definierteKlassen(".nur-hier { color: red; }");
|
||
const hausCss = definierteKlassen(".nur-hier { color: red; } .woanders { color: blue; }");
|
||
|
||
const fallB = !seitenCss.has("woanders") && hausCss.has("woanders");
|
||
ok(fallB, fallB
|
||
? "gestaltet, aber nicht auf dieser Seite → wird als Fehler erkannt"
|
||
: "MISSLUNGEN — der eigentliche Fehlerfall würde durchgehen");
|
||
|
||
const fallA = !seitenCss.has("blosser-anker") && !hausCss.has("blosser-anker");
|
||
ok(fallA, fallA
|
||
? "nirgends gestaltet → gilt als Struktur-Anker, kein Fehler"
|
||
: "MISSLUNGEN — Struktur-Anker würden fälschlich anschlagen");
|
||
|
||
/* 7. Und der Fehlalarm, den es schon gab, darf nicht zurückkommen:
|
||
`classList.add(i === 0 ? 'a' : 'b')` hatte `i` als Klasse
|
||
gemeldet -- auf sechzehn Seiten. */
|
||
const ausAusdruck = klassenAusJs("x.classList.add(i === 0 ? 'marke__haupt' : 'marke__leise');");
|
||
ok(!ausAusdruck.has("i") && ausAusdruck.has("marke__haupt") && ausAusdruck.has("marke__leise"),
|
||
"aus classList.add(bedingung ? 'a' : 'b') werden beide Klassen gelesen, aber nicht die Variable");
|
||
}
|
||
|
||
/* =======================================================================
|
||
WER kopf.js LAEDT, MUSS AUCH wahl.js LADEN
|
||
|
||
Gefunden am 07.09.2026 beim Durchsehen der Seiten, die bis dahin nur
|
||
GEPRUEFT und nie ANGESEHEN worden waren -- chat.html und
|
||
uebersicht.html luden kopf.js ohne wahl.js.
|
||
|
||
Der Umschalter "Meine Sicht" ist auf allen anderen Seiten ein selbst
|
||
gebautes Bedienelement (`.wahl2`), hinter dem ein unsichtbares
|
||
Systemfeld fuer Vorleseprogramme liegt. Ohne wahl.js faellt kopf.js
|
||
auf dieses Systemfeld zurueck: 92 x 19 Pixel, grauer Kasten, weisse
|
||
Schrift, Systemschriftgroesse -- gemessen, nicht geschaetzt. Auf den
|
||
anderen Seiten misst dasselbe Feld 2 x 2 Pixel bei Deckkraft null,
|
||
weil es dort nur noch der Zugaenglichkeit dient.
|
||
|
||
KAPUTT WAR NICHTS. Der Umschalter funktionierte auf beiden Seiten --
|
||
er sah nur aus wie aus einem anderen Programm. Genau diese Sorte
|
||
Fehler findet keine Pruefung, die auf Fehlermeldungen achtet, und
|
||
auch keine, die Klassennamen zaehlt: Die Klasse `.sicht__feld` ist
|
||
NIRGENDS gestaltet und gilt deshalb zu Recht als Struktur-Anker.
|
||
|
||
Deshalb hier eine Pruefung auf die ABHAENGIGKEIT statt auf die Optik:
|
||
Wer das eine laedt, muss das andere laden -- und zwar vorher. */
|
||
console.log("\n=== Wer kopf.js laedt, laedt auch wahl.js");
|
||
{
|
||
const seitenMitKopf = [];
|
||
for (const seite of readdirSync(WS).filter((f) => f.endsWith(".html"))) {
|
||
const html = readFileSync(join(WS, seite), "utf8");
|
||
const skripte = [...html.matchAll(/<script[^>]+src="assets\/js\/([a-z0-9-]+)\.js/g)]
|
||
.map((m) => m[1]);
|
||
if (!skripte.includes("kopf")) continue;
|
||
seitenMitKopf.push({ seite, skripte });
|
||
}
|
||
ok(seitenMitKopf.length >= 10,
|
||
`${seitenMitKopf.length} Seiten laden kopf.js`);
|
||
|
||
const ohneWahl = seitenMitKopf.filter((s) => !s.skripte.includes("wahl")).map((s) => s.seite);
|
||
ok(ohneWahl.length === 0, ohneWahl.length
|
||
? `ohne wahl.js: ${ohneWahl.join(", ")}`
|
||
: "alle davon laden auch wahl.js");
|
||
|
||
/* UND ZWAR VORHER. kopf.js fragt beim Aufbau nach dem fertigen
|
||
Bedienelement; kommt wahl.js danach, ist es zu spaet. */
|
||
const zuSpaet = seitenMitKopf
|
||
.filter((s) => s.skripte.indexOf("wahl") > s.skripte.indexOf("kopf"))
|
||
.map((s) => s.seite);
|
||
ok(zuSpaet.length === 0, zuSpaet.length
|
||
? `wahl.js steht zu spaet auf: ${zuSpaet.join(", ")}`
|
||
: "und immer VOR kopf.js");
|
||
}
|
||
|
||
/* =======================================================================
|
||
KEIN SKRIPT BAUT SICH SEINE EIGENE ROLLENLISTE
|
||
|
||
Am 07.09.2026 hat Filipe gemeldet, dass „Creator-Profile" bei Spicy
|
||
Media abbricht. Die Ursache war nicht diese Seite: In NEUN Skripten
|
||
stand `const LEITUNG = new Set(['admin', 'manager'])`, und in keinem
|
||
davon `spicy`. profil.js nahm deshalb den Creator-Zweig und lud das
|
||
eigene Profil -- ein Spicy-Zugang ist kein Creator, also 404.
|
||
|
||
Acht der neun sind nicht kaputtgegangen. Sie haben sich still falsch
|
||
verhalten, und das ist der Grund für diese Prüfung: Die Liste steht
|
||
jetzt EINMAL in bereiche.js, und wer sich wieder eine eigene baut,
|
||
bekommt hier einen Fehler statt in vier Wochen eine Fehlermeldung
|
||
bei einer Rolle, an die niemand gedacht hat.
|
||
======================================================================= */
|
||
console.log("\n=== Rollenlisten: eine Quelle, nicht neun");
|
||
{
|
||
const jsOrdner = join(WS, "assets/js");
|
||
const dateien = readdirSync(jsOrdner).filter((n) => n.endsWith(".js"));
|
||
ok(dateien.length >= 15, `${dateien.length} Workspace-Skripte durchgesehen`);
|
||
|
||
/* Gesucht wird eine Rollenliste, die 'admin' enthält und in einer
|
||
Zuweisung steht -- also `new Set([...])` oder `= [...]`. Der
|
||
Kommentar in bereiche.js, der den alten Fehler ZITIERT, darf nicht
|
||
mitzählen: Sonst verdeckt ausgerechnet die Erklärung den Befund. */
|
||
const eigenbau = [];
|
||
for (const n of dateien) {
|
||
const roh = readFileSync(join(jsOrdner, n), "utf8");
|
||
const text = roh.replace(/\/\*[\s\S]*?\*\//g, " ").replace(/\/\/[^\n]*/g, " ");
|
||
for (const m of text.matchAll(/(?:new Set\(\s*)?\[\s*((?:'[a-z]+'\s*,\s*)*'[a-z]+')\s*\]/g)) {
|
||
const rollen = m[1].split(",").map((x) => x.trim().replace(/'/g, ""));
|
||
if (!rollen.includes("admin") || rollen.length < 2) continue;
|
||
/* bereiche.js DARF: dort steht die eine Quelle. Und die Listen an
|
||
den Kacheln selbst sind etwas anderes -- sie sagen, wer eine
|
||
KACHEL sieht, nicht wer zur Leitung gehört. Erkennbar daran,
|
||
dass sie hinter `rollen:` stehen. */
|
||
if (n === "bereiche.js") continue;
|
||
const davor = text.slice(Math.max(0, m.index - 40), m.index);
|
||
if (/rollen\s*:\s*$/.test(davor)) continue;
|
||
eigenbau.push(`${n}: [${rollen.join(", ")}]`);
|
||
}
|
||
}
|
||
/* UND DIESELBE SUCHE FUER ROLLEN-OBJEKTE (07.09.2026).
|
||
|
||
Die Liste oben findet Felder und Mengen. Die Namen der Rollen
|
||
stehen aber als OBJEKT da (`{ admin: 'DogFather', ... }`), und
|
||
genau in dieser Form ist der Fehler ein zweites Mal aufgetreten:
|
||
fuenf Skripte, keines mit 'spicy'. Im Chat stand ueber Cigdems
|
||
Namen woertlich "UNDEFINED".
|
||
|
||
Ein Muster, das nur eine Schreibweise kennt, findet auch nur eine.
|
||
Deshalb hier die zweite. */
|
||
for (const n of dateien) {
|
||
if (n === "bereiche.js" || n === "gate.js") continue; // Quelle bzw. Anmeldeseite
|
||
const roh = readFileSync(join(jsOrdner, n), "utf8");
|
||
const text = roh.replace(/\/\*[\s\S]*?\*\//g, " ").replace(/\/\/[^\n]*/g, " ");
|
||
for (const m of text.matchAll(/\{[^{}]*\badmin\s*:\s*['"][^'"]+['"][^{}]*\}/g)) {
|
||
if (!/\bspicy\s*:/.test(m[0])) eigenbau.push(`${n}: ${m[0].slice(0, 44)}…`);
|
||
}
|
||
}
|
||
|
||
ok(eigenbau.length === 0, eigenbau.length
|
||
? `eigene Rollenliste gefunden: ${eigenbau.slice(0, 4).join(" · ")}`
|
||
: "kein Skript baut sich eine eigene Rollenliste oder ein eigenes Rollen-Objekt");
|
||
|
||
/* GEGENPROBE fuer die Objektform -- sie muss so eines auch finden. */
|
||
const objProbe = "const X = { admin: 'DogFather', manager: 'Manager' };";
|
||
ok([...objProbe.matchAll(/\{[^{}]*\badmin\s*:\s*['"][^'"]+['"][^{}]*\}/g)]
|
||
.some((m) => !/\bspicy\s*:/.test(m[0])),
|
||
"und ein Rollen-Objekt ohne 'spicy' wird auch wirklich gefunden");
|
||
|
||
/* GEGENPROBE: Der Sucher muss so eine Liste auch WIRKLICH finden --
|
||
sonst wäre die Zeile darüber grün, weil das Muster nie greift. */
|
||
const probe = " const LEITUNG = new Set(['admin', 'manager']);";
|
||
const trifft = [...probe.matchAll(/(?:new Set\(\s*)?\[\s*((?:'[a-z]+'\s*,\s*)*'[a-z]+')\s*\]/g)]
|
||
.some((m) => m[1].includes("admin"));
|
||
ok(trifft, "und der Sucher erkennt so eine Liste auch wirklich");
|
||
|
||
/* Und die eine Quelle muss die Rolle enthalten, um die es ging. */
|
||
const quelle = readFileSync(join(jsOrdner, "bereiche.js"), "utf8");
|
||
ok(/LEITUNG\s*=\s*new Set\(\[[^\]]*'spicy'[^\]]*'admin'[^\]]*'manager'[^\]]*\]\)/.test(quelle),
|
||
"bereiche.js führt Spicy Media, DogFather und Manager als Leitung");
|
||
}
|
||
|
||
/* =======================================================================
|
||
DIE SIEBEN KOPIEN DER MODULLISTE MÜSSEN GLEICH SEIN
|
||
|
||
module.css beschreibt die Form aller Module -- Silhouette,
|
||
Kantenlicht, Raster, Handy, Kontrastmodus. Dieselbe Klassenliste
|
||
steht dafür siebenmal in der Datei (im Kontrastmodus dreimal); CSS
|
||
kennt keine Variable für Selektoren.
|
||
|
||
Das ist die verwundbare Stelle: Wer eine Karte hinzufügt und nur
|
||
sechs der sieben Stellen pflegt, bekommt eine Karte MIT Schräge und
|
||
OHNE Kantenlicht -- und niemandem fällt es auf, weil nichts kaputt
|
||
geht. Genau diese Sorte stiller Abweichung fängt hier eine Prüfung
|
||
ab, statt sich auf Sorgfalt zu verlassen.
|
||
======================================================================= */
|
||
console.log("\n=== module.css: die Modulliste steht siebenmal — und überall gleich");
|
||
{
|
||
const pfad = join(WURZEL, "workspace/assets/css/module.css");
|
||
const text = readFileSync(pfad, "utf8");
|
||
|
||
/* Jede Kopie ist mit `/* MODULLISTE */` markiert; gelesen wird die
|
||
Klammer des `:is(...)` direkt danach. */
|
||
const listen = [];
|
||
const marke = /\/\* MODULLISTE \*\/\s*:is\(([^)]*)\)/g;
|
||
for (let t; (t = marke.exec(text)) !== null; ) {
|
||
listen.push(t[1].split(",").map((s) => s.trim()).filter(Boolean));
|
||
}
|
||
|
||
/* Die Anzahl gehört in die BEDINGUNG, nicht nur in den Meldetext:
|
||
Fände die Prüfung keine einzige Liste, wäre "alle gleich" sonst
|
||
trivial erfüllt -- grün, ohne etwas angesehen zu haben. */
|
||
ok(listen.length === 7, `sieben markierte Kopien gefunden (${listen.length})`);
|
||
|
||
const erste = listen[0] || [];
|
||
ok(erste.length >= 30, `die Liste umfasst ${erste.length} Klassen`);
|
||
|
||
const abweichung = listen.findIndex(
|
||
(l) => l.length !== erste.length || l.some((k, i) => k !== erste[i]));
|
||
ok(abweichung === -1, abweichung === -1
|
||
? "alle sieben Kopien sind Zeichen für Zeichen gleich"
|
||
: `Kopie ${abweichung + 1} weicht ab (${listen[abweichung].length} statt ${erste.length} Klassen)`);
|
||
|
||
/* GEGENPROBE: Der Vergleich muss auch NEIN sagen können. Ohne sie
|
||
bewiese die Zeile darüber nur, dass irgendetwas verglichen wurde. */
|
||
const geprobt = [erste, erste.slice(0, -1)];
|
||
const findetEs = geprobt.findIndex(
|
||
(l) => l.length !== erste.length || l.some((k, i) => k !== erste[i]));
|
||
ok(findetEs === 1, "eine künstlich verkürzte Kopie wird erkannt");
|
||
|
||
/* Und die Datei muss auf jeder Seite ZULETZT stehen -- sonst
|
||
überschreiben die Seitendateien die Form wieder, so wie es bis zum
|
||
07.09.2026 auf vier Seiten der Fall war.
|
||
|
||
SEIT DEM 10.09.2026 STEHT EINE DAHINTER: haus.css.
|
||
|
||
Sie entscheidet, ob die Seite das Haus der Agentur oder das von
|
||
Team Dogi traegt -- auf der Modi-Adresse biegt der Server genau
|
||
diesen Dateinamen um. Sie enthaelt ausschliesslich Variablen
|
||
(`:root`), und bei Variablen entscheidet allein die Reihenfolge:
|
||
Steht sie VOR module.css, gewinnt das Agenturhaus, und zwar
|
||
lautlos -- die Seite sieht dann einfach normal aus.
|
||
|
||
Geprueft wird deshalb ab jetzt das PAAR, nicht eine einzelne
|
||
Datei: module.css an vorletzter, haus.css an letzter Stelle.
|
||
Nur "haus.css ist zuletzt" zu pruefen waere zu wenig -- dann
|
||
koennte module.css irgendwo davor stehen und die Seitendateien
|
||
wieder ueberschreiben, also genau der Fehler von damals. */
|
||
let zuletzt = 0, gesamt = 0;
|
||
const schief = [];
|
||
for (const seite of readdirSync(join(WURZEL, "workspace")).filter((f) => f.endsWith(".html"))) {
|
||
if (seite === "index.html" || seite === "crew-index.html") continue; // Waende laden module.css nicht
|
||
const html = readFileSync(join(WURZEL, "workspace", seite), "utf8");
|
||
const bl = [...html.matchAll(/<link[^>]+rel="stylesheet"[^>]*>/g)].map((m) => m[0]);
|
||
if (!bl.some((z) => z.includes("css/module.css"))) continue;
|
||
gesamt++;
|
||
if (bl.length >= 2
|
||
&& bl[bl.length - 1].includes("css/haus.css")
|
||
&& bl[bl.length - 2].includes("css/module.css")) zuletzt++;
|
||
else schief.push(seite);
|
||
}
|
||
ok(gesamt >= 15 && zuletzt === gesamt,
|
||
`module.css und dahinter haus.css auf allen ${gesamt} Seiten (${zuletzt})`
|
||
+ (schief.length ? ` -- schief: ${schief.join(", ")}` : ""));
|
||
|
||
/* GEGENPROBE: Erkennt die Reihenfolge-Pruefung eine falsche
|
||
Reihenfolge ueberhaupt? Zwei erfundene Listen, eine richtig, eine
|
||
vertauscht. Ohne sie waere die Zeile darueber gruen, sobald der
|
||
Selektor nichts mehr findet. */
|
||
const probeGut = ['<link href="css/module.css">', '<link href="css/haus.css">'];
|
||
const probeSchlecht = ['<link href="css/haus.css">', '<link href="css/module.css">'];
|
||
const richtig = (l) => l.length >= 2 && l[l.length - 1].includes("css/haus.css")
|
||
&& l[l.length - 2].includes("css/module.css");
|
||
ok(richtig(probeGut) && !richtig(probeSchlecht),
|
||
"und eine vertauschte Reihenfolge wird als falsch erkannt");
|
||
|
||
/* DIE ZWEITE WAND LAEDT IHR HAUS DIREKT.
|
||
crew-index.html steht nur auf der Modi-Adresse und darf
|
||
crew-haus.css beim Namen nennen -- sie MUSS es sogar: Eine
|
||
Zugangswand, die sich erst nach dem Umbiegen faerbt, waere die
|
||
eine Seite, auf der man das Umfaerben sieht. */
|
||
const wand = readFileSync(join(WURZEL, "workspace", "crew-index.html"), "utf8");
|
||
const wandBl = [...wand.matchAll(/<link[^>]+rel="stylesheet"[^>]*>/g)].map((m) => m[0]);
|
||
ok(wandBl.length >= 2 && wandBl[wandBl.length - 1].includes("css/crew-haus.css"),
|
||
`die zweite Wand laedt ihr Haus zuletzt (${wandBl.length} Stilvorlagen)`);
|
||
}
|
||
|
||
console.log(`\n${fehler === 0 ? "ALLES IN ORDNUNG" : `${fehler} FEHLER`}`);
|
||
process.exit(fehler ? 1 : 0);
|