dogfather-universe/server/pruef-bewegung.mjs

/* =====================================================================
   pruef-bewegung.mjs — keine endlose Bewegung auf etwas, das niemand
   sieht.

   ---------------------------------------------------------------------
   WARUM ES DIESE PRÜFUNG GIBT

   Am 30.09.2026 scheiterte `pruef-browser` in WebKit daran, dass der
   Anmeldeknopf nie „ruhig" wurde. Gemessen wanderte sein Kasten pro
   Bild um ein Fünftel Pixel, und zwei Bewegungen liefen dabei. Eine
   davon war:

       .knopf__laden { opacity: 0; animation: dreh .8s linear infinite; }
       .knopf[disabled] .knopf__laden { opacity: 1; }

   Nur die Deckkraft schaltete um. Die Drehung lief ab dem Laden der
   Seite, auf JEDEM Knopf, für immer — nicht zu sehen und trotzdem
   jedes Bild neu gerechnet.

   Dieselbe Suche fand einen zweiten: Auf der öffentlichen Website lief
   an jedem Navigationspunkt eine elf Sekunden lange Aurora, unsichtbar
   bis zum Überfahren.

   Beides fällt niemandem auf, weil nichts abstürzt und nichts falsch
   aussieht. Es kostet nur Rechenzeit und Akku — auf genau den Seiten,
   die am häufigsten offen sind.

   ---------------------------------------------------------------------
   WAS GEPRÜFT WIRD

     1. KEINE ENDLOSE BEWEGUNG IM SELBEN BLOCK wie `opacity: 0`,
        `display: none` oder `visibility: hidden`.

        Die Bewegung gehört dorthin, wo das Ding sichtbar wird — also
        in die Regel mit dem Zustand (`[disabled]`, `:hover`, `.offen`).

     2. JEDE STILVORLAGE mit endloser Bewegung kennt die Hausregel
        `prefers-reduced-motion`. Gemessen am 30.09.: alle 42 tun es.
        Die Zeile hält diesen Stand fest, statt ihn dem Zufall zu
        überlassen.

   ---------------------------------------------------------------------
   DREI AUSGÄNGE

   Findet sie keine Stilvorlagen, ist das „konnte nicht nachsehen"
   (Rückgabe 2) und nicht „alles in Ordnung". Eine Prüfung, die ihre
   Voraussetzung nicht hat, muss das sagen.

   Aufrufen mit:  node server/pruef-bewegung.mjs
   ===================================================================== */

import { readdirSync, readFileSync, existsSync } from "node:fs";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";

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

/* BEIDE HÄUSER UND DIE ÖFFENTLICHE SEITE. Der erste Fund lag im
   Workspace, der zweite auf der Website — eine Prüfung, die nur einen
   der beiden Orte kennt, hätte die Hälfte gefunden. */
const ORTE = [
  join(REPO, "workspace", "assets", "css"),
  join(REPO, "assets", "css"),
];

let ok = 0, fehl = 0;
const pruef = (name, bedingung, zusatz = "") => {
  if (bedingung) { ok++; console.log(`  ok   ${name}`); }
  else { fehl++; console.log(`  FEHL ${name}${zusatz ? "\n         " + zusatz : ""}`); }
};

/* Kommentare weg -- sonst zählt jeder Satz, der das Wort erklärt.
   Genau diese Falle hat am 29.09. eine andere Prüfung dreimal
   getroffen: Sie las ihre eigenen Beispieltexte als Befunde. */
const ohneKommentar = (t) => t.replace(/\/\*[\s\S]*?\*\//g, "");

/** Alle Regelblöcke einer Stilvorlage: Selektor + Körper.
 *
 *  Verschachtelte Blöcke (`@media`) fallen dabei auseinander — das ist
 *  hier richtig: Gefragt ist, was IN einem Regelblock zusammensteht,
 *  nicht wo er liegt. */
const REGEL = /([^{}]+)\{([^{}]*)\}/g;

const UNSICHTBAR = [
  [/opacity:\s*0\s*(?:;|$)/m, "opacity: 0"],
  [/display:\s*none/, "display: none"],
  [/visibility:\s*hidden/, "visibility: hidden"],
];
const ENDLOS = /\binfinite\b/;

function dateien() {
  const liste = [];
  for (const ort of ORTE) {
    if (!existsSync(ort)) continue;
    for (const f of readdirSync(ort)) {
      if (f.endsWith(".css")) liste.push(join(ort, f));
    }
  }
  return liste;
}

/** Findet in einem Stilblatt-Text die Blöcke, die beides haben. */
export function blindeBewegung(text) {
  const treffer = [];
  const t = ohneKommentar(text);
  let m;
  REGEL.lastIndex = 0;
  while ((m = REGEL.exec(t)) !== null) {
    const sel = m[1].trim().replace(/\s+/g, " ");
    const koerper = m[2];
    if (!ENDLOS.test(koerper)) continue;
    for (const [muster, wort] of UNSICHTBAR) {
      if (muster.test(koerper)) { treffer.push({ sel, wort }); break; }
    }
  }
  return treffer;
}

console.log("\n=== Endlose Bewegung auf etwas Unsichtbarem ===");

const alle = dateien();
if (alle.length < 10) {
  /* DER DRITTE AUSGANG. Keine Stilvorlagen heißt „konnte nicht
     nachsehen" — nicht „alles in Ordnung". */
  console.log(`  KONNTE NICHT NACHSEHEN: nur ${alle.length} Stilvorlagen gefunden.`);
  process.exit(2);
}
console.log(`  ${alle.length} Stilvorlagen in beiden Häusern und auf der Website.`);

const funde = [];
let mitEndlos = 0;
const ohneRuhe = [];
for (const p of alle) {
  const text = readFileSync(p, "utf8");
  const t = ohneKommentar(text);
  if (ENDLOS.test(t)) {
    mitEndlos++;
    if (!/prefers-reduced-motion/.test(t)) ohneRuhe.push(p.split(/[\\/]/).pop());
  }
  for (const f of blindeBewegung(text)) {
    funde.push(`${p.split(/[\\/]/).pop()}: ${f.sel.slice(0, 54)} (${f.wort})`);
  }
}

/* DIE ZAHL GEHÖRT IN DIE BEDINGUNG. Fände die Prüfung gar keine
   endlose Bewegung, wäre „keine blinde" trivial wahr — und bliebe es,
   wenn jemand die Suche kaputt macht. */
pruef(`${mitEndlos} Stilvorlagen haben überhaupt eine endlose Bewegung`,
  mitEndlos >= 5, `nur ${mitEndlos} — sucht die Prüfung noch richtig?`);

pruef("keine endlose Bewegung auf etwas Unsichtbarem",
  funde.length === 0, funde.slice(0, 8).join("\n         "));

pruef("jede davon kennt die Bewegungsarmut-Regel",
  ohneRuhe.length === 0,
  `ohne prefers-reduced-motion: ${ohneRuhe.join(", ")}`);

/* ---------------------------------------------------------------------
   DIE GEGENPROBEN — jede muss anschlagen
   ---------------------------------------------------------------------
   Eine Prüfung, die immer bestätigt, bestätigt nichts. Die Proben
   stehen hier als Text und nicht als Datei: Sie sollen genau die
   Fälle abbilden, um die es geht, und nicht versehentlich mitgelesen
   werden.
   ------------------------------------------------------------------- */
console.log("\n  --- Gegenproben (jede MUSS anschlagen) ---");

const probeSchlecht = ".kreisel { opacity: 0; animation: dreh .8s linear infinite; }";
pruef("Gegenprobe: unsichtbar + endlos wird gefunden",
  blindeBewegung(probeSchlecht).length === 1);

const probeGut = ".kreisel { opacity: 1; animation: dreh .8s linear infinite; }";
pruef("Gegenprobe: sichtbar + endlos ist in Ordnung",
  blindeBewegung(probeGut).length === 0);

const probeStill = ".kreisel { opacity: 0; }";
pruef("Gegenprobe: unsichtbar ohne Bewegung ist in Ordnung",
  blindeBewegung(probeStill).length === 0);

const probeGetrennt = ".kreisel { opacity: 0; }\n"
  + ".knopf[disabled] .kreisel { opacity: 1; animation: dreh .8s linear infinite; }";
pruef("Gegenprobe: richtig getrennt gebaut wird NICHT gemeldet",
  blindeBewegung(probeGetrennt).length === 0,
  "genau so gehört es: die Bewegung in der Regel, die es sichtbar macht");

const probeVerborgen = ".menue { display: none; animation: schweben 3s infinite; }";
pruef("Gegenprobe: auch `display: none` zählt",
  blindeBewegung(probeVerborgen).length === 1);

const probeKommentar = "/* .kreisel { opacity: 0; animation: x 1s infinite; } */\n"
  + ".echt { color: red; }";
pruef("Gegenprobe: ein Beispiel IM KOMMENTAR zählt nicht",
  blindeBewegung(probeKommentar).length === 0,
  "sonst liest die Prüfung ihre eigenen Erklärungen als Befunde");

console.log(`\n${ok + fehl} Pruefungen, ${fehl} Fehler`);
console.log(fehl === 0 ? "ALLES IN ORDNUNG" : "NICHT IN ORDNUNG");
process.exit(fehl === 0 ? 0 : 1);