dogfather-universe/server/pruef-namen.mjs

/* =====================================================================
   NAMEN, DIE ZWEIMAL VERGEBEN SIND (17.09.2026)

   Filipe, zu einem Bildschirmfoto der Kopfleiste: „was soll das jetzt,
   wieso sieht das in gewissen seiten so scheisse aus?!"

   Der Teilen-Knopf stand dort doppelt so hoch wie seine Nachbarn, mit
   dem Zeichen ueber dem Wort statt daneben. Die Ursache war kein
   Gestaltungsfehler, sondern ein Name: `.teilen` gab es ZWEIMAL --
   einmal in gate.css als Knopf der Kopfleiste (`inline-flex`,
   waagerecht), einmal in bereich.css als Layout der Teilen-Seite
   (`flex column`, 22 px Abstand, 44 rem breit). Auf den drei Seiten,
   die beide Dateien laden, gewann die spaeter geladene -- und der Knopf
   bekam das Layout einer ganzen Seite.

   DERSELBE NAME KOSTETE AUSSERDEM DEN KNOPF: kopf.js baut ihn nur ein,
   wenn es `getElementById('teilen')` NICHT findet -- ein Schutz gegen
   doppelten Einbau. Auf teilen.html steht `<section id="teilen">` aber
   schon im HTML. Dort fehlte der Knopf damit vollstaendig, und niemand
   konnte das an einer Farbe oder einem Abstand sehen.

   ES IST DER ZWEITE NAMENSKONFLIKT AN EINEM TAG. Der erste (`.t-schritt`
   fuer zwei verschiedene Dinge auf der Talente-Seite) fiel nur auf,
   weil ich im Browser Elemente gezaehlt habe -- 13 gefunden, 12
   erwartet. Beide waren gruen in jeder bestehenden Prueflinie. Deshalb
   diese Datei: Ein Kommentar, der vor einem Fehler warnt, verhindert
   ihn nicht; eine Pruefung schon.

   SIE BRAUCHT KEINEN SERVER und laeuft in unter einer Sekunde.

   Aufrufen mit:  node server/pruef-namen.mjs
   ===================================================================== */
import { readFileSync, readdirSync } from "node:fs";
import { join, dirname } from "node:path";
import { fileURLToPath } from "node:url";

const HIER = dirname(fileURLToPath(import.meta.url));
const WS = join(HIER, "..", "workspace");

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

const seiten = readdirSync(WS).filter((f) => f.endsWith(".html"));
const lies = (p) => readFileSync(p, "utf8");

/* Welche Dateien eine Seite laedt -- aus ihr selbst, nicht aus einer
   gepflegten Liste. Eine Liste, die niemand pflegt, kann nicht
   veralten. */
const cssVon = (t) => [...t.matchAll(/assets\/css\/([\w-]+\.css)/g)].map((m) => m[1]);
const jsVon = (t) => [...t.matchAll(/assets\/js\/([\w-]+\.js)/g)].map((m) => m[1]);

/* =======================================================================
   1. EIN SKRIPT VERGIBT EINE ID, DIE IM HTML SCHON STEHT
   ======================================================================= */
melde("=== 1. Doppelte Kennungen ===");

const jsIds = new Map();
for (const f of readdirSync(join(WS, "assets", "js")).filter((x) => x.endsWith(".js"))) {
  const t = lies(join(WS, "assets", "js", f));
  const menge = new Set();
  for (const m of t.matchAll(/\.id\s*=\s*['"]([\w-]+)['"]/g)) menge.add(m[1]);
  for (const m of t.matchAll(/setAttribute\(\s*['"]id['"]\s*,\s*['"]([\w-]+)['"]/g)) menge.add(m[1]);
  jsIds.set(f, menge);
}
ok(jsIds.size > 5, `${jsIds.size} Skripte durchgesehen`);
{
  const alle = [...jsIds.values()].reduce((n, s) => n + s.size, 0);
  ok(alle > 0, `sie vergeben ${alle} Kennungen von Hand -- das ist die Menge, um die es geht`);
}

const idFunde = [];
for (const s of seiten) {
  const t = lies(join(WS, s));
  const imHtml = new Set([...t.matchAll(/\sid="([\w-]+)"/g)].map((m) => m[1]));
  for (const j of jsVon(t)) {
    for (const i of jsIds.get(j) || []) {
      if (imHtml.has(i)) idFunde.push(`${s}: #${i} steht im HTML und wird von ${j} vergeben`);
    }
  }
}
ok(idFunde.length === 0,
  idFunde.length ? `doppelte Kennung: ${idFunde.join(" | ")}`
    : "kein Skript vergibt eine Kennung, die auf seiner Seite schon steht");

/* UND DIE DOPPELTEN IM HTML SELBST -- dieselbe Krankheit, andere
   Quelle. getElementById liefert dann das erste Element, und welches
   das ist, entscheidet die Reihenfolge im Dokument. */
{
  const dop = [];
  for (const s of seiten) {
    const ids = [...lies(join(WS, s)).matchAll(/\sid="([\w-]+)"/g)].map((m) => m[1]);
    const zaehl = {};
    for (const i of ids) zaehl[i] = (zaehl[i] || 0) + 1;
    for (const [i, n] of Object.entries(zaehl)) if (n > 1) dop.push(`${s}: #${i} (${n}x)`);
  }
  ok(dop.length === 0, dop.length ? `doppelt im HTML: ${dop.join(" | ")}`
    : "und keine Seite vergibt dieselbe Kennung zweimal im HTML");
}

/* =======================================================================
   2. EIN WAECHTER, DER AUF FREMDEN INHALT TRIFFT

   kopf.js baut Elemente nur ein, wenn es sie nicht schon findet. Trifft
   so ein Waechter auf eine ID, die eine SEITE vergibt, baut er dort
   nichts -- ohne Fehlermeldung, ohne Spur. Genau so verschwand der
   Teilen-Knopf von teilen.html.
   ======================================================================= */
melde("");
melde("=== 2. Waechter, die auf Seiteninhalt treffen ===");
{
  const waechter = new Map();   // datei -> Set(id)
  for (const f of readdirSync(join(WS, "assets", "js")).filter((x) => x.endsWith(".js"))) {
    const t = lies(join(WS, "assets", "js", f));
    const menge = new Set();
    /* NUR DER POSITIVE WAECHTER. Gemessen an den beiden Faellen in
       kopf.js:

         Zeile 1472  if (gerufen || !document.getElementById('wer')) return;
                     -> "ohne dieses Element gibt es nichts zu tun".
                        Voellig richtig, kein Befund.

         Zeile  203  if (!leiste || document.getElementById('teilen')) return;
                     -> "ist schon da, also nicht nochmal einbauen".
                        DAS ist der gefaehrliche: Trifft er auf fremden
                        Seiteninhalt, baut er stillschweigend nichts.

       Der Unterschied ist genau ein Ausrufezeichen. Ohne diese
       Unterscheidung meldete der Abschnitt 30 Seiten wegen `#wer` --
       und eine Warnung, die immer kommt, ist keine Warnung mehr. */
    for (const m of t.matchAll(
      /[^!]document\.getElementById\(\s*['"]([\w-]+)['"]\s*\)\s*\)\s*return/g)) {
      menge.add(m[1]);
    }
    if (menge.size) waechter.set(f, menge);
  }
  const alle = [...waechter.values()].reduce((n, s) => n + s.size, 0);
  ok(alle > 0, `${alle} solcher Waechter gefunden (in ${waechter.size} Dateien)`);

  const funde = [];
  for (const s of seiten) {
    const t = lies(join(WS, s));
    const imHtml = new Set([...t.matchAll(/\sid="([\w-]+)"/g)].map((m) => m[1]));
    for (const j of jsVon(t)) {
      for (const i of waechter.get(j) || []) {
        if (imHtml.has(i)) {
          funde.push(`${s}: ${j} steigt aus, weil #${i} im HTML steht`);
        }
      }
    }
  }
  ok(funde.length === 0,
    funde.length ? `stiller Aussetzer: ${funde.join(" | ")}`
      : "kein Waechter wird von einer Seiten-Kennung ausgehebelt");
}

/* =======================================================================
   3. DIESELBE KLASSE, ZWEI WIDERSPRECHENDE ANORDNUNGEN

   NICHT jede doppelte Regel ist ein Fehler. Gemessen am 17.09.:

     2872  Klasse wird in zwei geladenen Dateien ueberhaupt erwaehnt
     1887  davon mit einer eigenen Blockdefinition
       12  davon mit widersprechendem `display`
        6  davon ohne `display: none` auf einer Seite

   Die ersten beiden Zahlen sind Rauschen: module.css gewinnt
   absichtlich als letzte Datei, und `start.css -> seitendatei.css` ist
   die gewollte Kaskade (Grundform hier, Verfeinerung dort). Eine
   Warnung, die 1887-mal kommt, ist keine Warnung mehr.

   GEPRUEFT WIRD DER SCHARFE SCHNITT: beide Regeln setzen `display`,
   die Werte widersprechen sich, und keine davon ist `none` (das ist
   das verbreitete Muster "ausgeblendet, ausser auf ihrer Seite").
   Genau dieser Schnitt haette `.teilen` gefunden.
   ======================================================================= */
melde("");
melde("=== 3. Widersprechende Anordnungen ===");

/* Was hier absichtlich so ist -- mit Grund, nicht als Sammelbecken.
   Jede Zeile ist eine Entscheidung, die jemand getroffen hat. */
const GEWOLLT = new Set([
  /* Die Startseite baut die Willkommensreihe zu drei Spalten um;
     start.css hat die einfache Fassung fuer alle anderen. */
  "willkommen__reihe",
  /* Der Bericht nutzt den Kachelnamen als kleine Unterzeile, ohne die
     mehrzeilige Abschneidung der grossen Kacheln. */
  "kachel__name",
  /* Kalender: die Grundform steht in start.css (Tageskacheln auf der
     Startseite), die Vollansicht in kalender.css. */
  "k-anlass", "k-pille",
]);

{
  const bloecke = new Map();
  for (const f of readdirSync(join(WS, "assets", "css")).filter((x) => x.endsWith(".css"))) {
    const t = lies(join(WS, "assets", "css", f)).replace(/\/\*[\s\S]*?\*\//g, "");
    const karte = new Map();
    for (const m of t.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
      const disp = m[2].match(/(?:^|;|\s)display\s*:\s*([\w-]+)/)?.[1];
      if (!disp) continue;
      const richt = m[2].match(/flex-direction\s*:\s*([\w-]+)/)?.[1] || "";
      for (const teil of m[1].split(",")) {
        const sel = teil.trim();
        if (/^\.[a-zA-Z][\w-]*$/.test(sel)) karte.set(sel.slice(1), { disp, richt, datei: f });
      }
    }
    bloecke.set(f, karte);
  }
  ok(bloecke.size > 10, `${bloecke.size} Gestaltungsdateien durchgesehen`);

  /* Die Pruefung als Funktion -- damit die Gegenprobe unten dieselbe
     benutzt und nicht eine nachgebaute zweite Meinung. */
  const suche = (zusatz = null) => {
    const funde = [];
    for (const s of seiten) {
      const t = lies(join(WS, s));
      const dateien = cssVon(t).filter((c) => c !== "module.css");
      const gesehen = new Map();
      for (const c of dateien) {
        const karte = new Map(bloecke.get(c) || []);
        if (zusatz && zusatz.datei === c) karte.set(zusatz.klasse, zusatz.wert);
        for (const [k, w] of karte) {
          const alt = gesehen.get(k);
          if (alt && !GEWOLLT.has(k)
            && alt.disp !== "none" && w.disp !== "none"
            && (alt.disp !== w.disp || alt.richt !== w.richt)) {
            funde.push(`${s}: .${k} ist in ${alt.datei} ${alt.disp} ${alt.richt}`
              + ` und in ${c} ${w.disp} ${w.richt}`);
          }
          gesehen.set(k, w);
        }
      }
    }
    return funde;
  };

  const funde = suche();
  ok(funde.length === 0,
    funde.length ? `zwei Dinge, ein Name: ${funde[0]}${funde.length > 1
      ? ` (und ${funde.length - 1} weitere)` : ""}`
      : "keine Klasse wird auf einer Seite grundsaetzlich anders angeordnet als auf einer anderen");

  /* GEGENPROBE: Eine Pruefung, die immer bestaetigt, bestaetigt nichts.

     ABGELEITET, NICHT GERATEN. Beim ersten Versuch stand hier ein fest
     gewaehlter Klassenname -- und die Gegenprobe fand nichts, weil die
     Klasse in der gewaehlten Datei gar kein `display` setzt. Eine
     Gegenprobe, die selbst danebenliegt, beweist so wenig wie gar
     keine. Jetzt wird eine Klasse genommen, von der GEMESSEN ist, dass
     sie in einer frueher geladenen Datei derselben Seite steht. */
  const probeSeite = seiten.find((s) => cssVon(lies(join(WS, s)))
    .filter((c) => c !== "module.css").length >= 2);
  const probeDateien = cssVon(lies(join(WS, probeSeite)))
    .filter((c) => c !== "module.css");
  const probeKlasse = [...(bloecke.get(probeDateien[0]) || new Map()).entries()]
    .find(([k, w]) => w.disp !== "none" && !GEWOLLT.has(k));
  ok(!!probeKlasse,
    `Gegenprobe vorbereitet: .${probeKlasse?.[0]} aus ${probeDateien[0]} `
    + `(${probeSeite} laedt ${probeDateien.length} Dateien)`);
  const erfunden = suche({
    datei: probeDateien[1], klasse: probeKlasse[0],
    wert: { disp: probeKlasse[1].disp === "grid" ? "flex" : "grid", richt: "",
      datei: probeDateien[1] },
  });
  ok(erfunden.length > funde.length,
    `Gegenprobe: eine erfundene Kollision wird erkannt (${erfunden.length} statt ${funde.length})`);
}

/* =======================================================================
   4. DIE KOPFLEISTE HAT IHREN EIGENEN NAMENSRAUM

   Die Reparatur vom 17.09. war nicht "diesen einen Namen aendern",
   sondern eine Regel: Was kopf.js in die Leiste haengt, traegt `kopf-`
   davor. Eine Seite kann dann heissen, wie sie will -- auch `teilen`,
   `chat` oder `suchen`, und genau diese Woerter sind die, die als
   naechstes eine Seite braucht.

   Ohne diese Pruefung waere die Regel ein Kommentar, und Kommentare
   verhindern nichts (siehe 11.09., der Spaltenverlust neben der
   Warnung davor).
   ======================================================================= */
melde("");
melde("=== 4. Der Namensraum der Kopfleiste ===");
{
  const t = lies(join(WS, "assets", "js", "kopf.js"));
  const vergeben = [...t.matchAll(/\.id\s*=\s*['"]([\w-]+)['"]/g)].map((m) => m[1]);
  ok(vergeben.length > 0, `kopf.js vergibt ${vergeben.length} Kennungen`);
  const ohne = vergeben.filter((i) => !i.startsWith("kopf-"));
  ok(ohne.length === 0,
    ohne.length ? `ohne Namensraum: ${ohne.join(", ")}`
      : `alle tragen "kopf-" davor (${vergeben.join(", ")})`);
}

/* ------------------------------------------------------------------- */
melde("");
melde(`${geprueft} Pruefungen, ${fehler} Fehler`);
melde(fehler ? "NICHT IN ORDNUNG" : "ALLES IN ORDNUNG");
process.exit(fehler ? 1 : 0);