dogfather-universe/server/pruef-workspace-seiten.mjs

/* Kurzpruefung: Steht die Kopfleiste auf dem Handy ueber -- und zwar
   auf ALLEN Seiten oder nur auf der neuen? Beantwortet die Frage, ob
   ich einen eigenen Fehler gebaut oder einen alten gefunden habe. */
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";

const ordner = mkdtempSync(join(tmpdir(), "ws-kopf-"));
process.env.WORKSPACE_DB = join(ordner, "pruef.sqlite");
/* DER PORT MUSS MEINER SEIN (nachgeruestet 19.09.2026).
   Ohne diese Zeile startet der eigene Server bei belegtem Port
   STILL nicht -- und alles Folgende misst gegen einen fremden
   Stand. Das ist der dritte Ausgang: belegt ist etwas anderes
   als kaputt. */
const PORT = await eigenerPort(import.meta, "pruef-workspace-seiten");
process.env.PORT = `${PORT}`;
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1";
process.env.SITE_ACCESS_CODE_VANVAN = "VANVAN-TEST-1";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";

const express = (await import("express")).default;
const echteCookie = express.response.cookie;
express.response.cookie = function (n, w, o) {
  return echteCookie.call(this, n, w, { ...(o || {}), secure: false });
};
import { notbremse } from "./helfer-notbremse.mjs";
import { eigenerPort } from "./helfer-port.mjs";
await import("./index.js");
/* DIE NOTBREMSE. Muss NACH index.js stehen: Der Server haengt dort
   zwei Auffangnetze ein, die einen Absturz nur protokollieren --
   richtig fuer den Betrieb, fatal fuer eine Pruefung. Ohne diese
   Zeile bleibt der Prozess nach einem Fehler ewig stehen, weil der
   Server ihn am Leben haelt (siehe helfer-notbremse.mjs). */
notbremse(480_000, "pruef-workspace-seiten");
await new Promise((r) => setTimeout(r, 700));
const BASIS = `http://127.0.0.1:${PORT}`;
setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 150_000).unref?.();

await fetch(BASIS + "/workspace/api/anmelden", {
  method: "POST", headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ rolle: "admin", code: "x" }),
}).catch(() => {});

const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const salt = randomBytes(16).toString("hex");
const hash = scryptSync("CODE-DOGI-0001", salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
  .run("Test-DogFather", "admin", hash, salt, 32768, new Date().toISOString());
d.close();

const { chromium } = await import(
  "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await chromium.launch();

/* Alle Seiten, die eine angemeldete Person zu sehen bekommt. Geprueft
   wird auf beiden Groessen, weil die geteilten Klassen (.kopf-zeile,
   .inhalt--breit, .leise) am 31.08.2026 von aufgaben.css nach start.css
   gewandert sind -- faellt dabei etwas herunter, sieht man es hier. */
/** Stimmt die Buehne dieser Seite?
 *
 *  HERAUSGELOEST, DAMIT SIE EINE GEGENPROBE BEKOMMEN KANN. Als Zeile
 *  mitten in der Schleife liess sie sich nur pruefen, indem man den
 *  Fehler in der Anwendung wieder einbaut. Als Funktion beantwortet sie
 *  die Frage in einer Zeile -- und die Gegenprobe unten beweist, dass
 *  sie auch NEIN sagen kann.
 *
 *  @param istStart  Die Startseite hat ihre feste Grundszene aus
 *                   `body.start::before` und traegt kein `data-buehne`.
 *  @param gewollt   Was `data-buehne` sagt (oder null).
 *  @param geladen   Welches Motiv das CSS tatsaechlich laedt (oder null).
 */
export function buehneRichtig(istStart, gewollt, geladen) {
  if (istStart) return !!geladen;
  return !!gewollt && geladen === gewollt;
}

/* chat.html UND leistung.html KAMEN AM 09.09.2026 DAZU -- und der Chat
   nicht aus Ordnungsliebe.

   Er fehlte in dieser Liste, und genau auf ihm steckte ein Fehler, den
   diese Pruefung haette finden muessen: `chat.html` hat weder
   `.kopf-zeile` noch `.k-kopf`, und `kopf.js` stieg deshalb aus, BEVOR
   es Ton und Buehne setzte. Die Seite lief seit jeher ohne ihr
   Hintergrundbild, obwohl in bereiche.js `szene: 'lounge'` fuer sie
   steht. Gefunden hat das keine Pruefung, sondern eine Messung der
   Hintergrundhelligkeit aller 18 Seiten -- chat.html meldete als eine
   von dreien "keine Buehne".

   Eine Pruefung, die eine Seite nicht kennt, kann auf ihr nichts
   finden. */
const SEITEN = ["start.html", "uebersicht.html", "aufgaben.html", "kalender.html",
                "personen.html", "profil.html", "steckbrief.html", "wissen.html", "dateien.html",
                "calls.html", "chat.html", "leistung.html", "startcheck.html", "report.html",
                "scouting.html", "automation.html", "content.html", "bereich.html?b=live"];

let fehler = 0;
for (const [breite, hoehe, wie] of [[1440, 1000, "Computer"], [390, 844, "Handy"]]) {
  console.log(`\n=== ${wie} (${breite}px)`);
  const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe }, hasTouch: breite <= 860 });
  const seite = await kontext.newPage();
  const konsole = [];
  seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text()); });
  seite.on("pageerror", (e) => konsole.push("pageerror: " + e.message));

  await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
  await seite.click('.rolle[data-rolle="admin"]');
  await seite.fill("#code", "CODE-DOGI-0001");
  await seite.click("button[type=submit]");
  await seite.waitForURL("**/start.html", { timeout: 15000 });

  for (const s of SEITEN) {
    konsole.length = 0;
    await seite.goto(BASIS + "/workspace/" + s, { waitUntil: "networkidle" });
    await seite.waitForTimeout(300);
    const r = await seite.evaluate(() => ({
      ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth,
      schuld: [...document.querySelectorAll("body *")]
        .filter((e) => e.getBoundingClientRect().right > window.innerWidth + 1)
        .map((e) => (e.tagName + "." + e.className).slice(0, 40)).slice(0, 4),
      /* Die verschobenen Klassen muessen weiterhin greifen. .inhalt--breit
         setzt 1240px -- kommt nur 880px an, ist die Regel verloren.

         WELCHE KLASSEN TRAEGT DAS ELEMENT? (24.09.2026) Eine Seite
         kann zusaetzlich `.inhalt--brett` tragen, und die setzt
         ausdruecklich 1560px: Ein Brett darf breiter sein als Text,
         der Kopfbereich bleibt bei 1240. Die Pruefung verglich starr
         mit 1240 und meldete aufgaben.html deshalb als fehlerhaft --
         seit dem Tag, an dem die Klasse entstand. */
      breit: document.querySelector(".inhalt--breit")
        ? getComputedStyle(document.querySelector(".inhalt--breit")).maxWidth : null,
      brett: !!document.querySelector(".inhalt--breit.inhalt--brett"),
      kopfzeile: document.querySelector(".kopf-zeile")
        ? getComputedStyle(document.querySelector(".kopf-zeile")).display : null,
      abmelden: (() => {
        const a = document.querySelector(".abmelden")?.getBoundingClientRect();
        return a ? a.right <= window.innerWidth && a.left >= 0 : null;
      })(),
      /* Der Schriftzug oben links wird von kopf.js in Rang aufgeteilt.
         Auf den Unterseiten ist der vordere Teil ein VERWEIS zurück zur
         Startseite -- der muss die Aufteilung überleben, sonst ist der
         Rückweg weg. Genau das wäre beim Zerlegen von Textknoten leicht
         zu übersehen. */
      markeHaupt: document.querySelector(".kopfleiste .marke__haupt")?.textContent
        .replace(/ /g, " ") || null,
      markeLeise: document.querySelector(".kopfleiste .marke__leise")?.textContent
        .replace(/ /g, " ") || null,
      markeRaute: document.querySelectorAll(".kopfleiste .marke__raute").length,
      /* Ist der vordere Teil auf einer Unterseite noch ein klickbarer
         Verweis auf die Startseite? */
      rueckweg: document.querySelector(".kopfleiste .marke__haupt")?.tagName === "A"
        ? document.querySelector(".kopfleiste .marke__haupt").getAttribute("href") : null,
      /* Jede Unterseite trägt Zeichen und Farbton ihrer Kachel. Beides
         kommt aus bereiche.js, derselben Liste wie die Kachel -- fehlt
         eins davon, ist die Zuordnung gerissen und die Seite sieht
         wieder aus wie jede andere. */
      ton: document.body.dataset.ton || null,
      /* Jede Seite hat ihre eigene Bühne aus Filipes Bildern. Geprüft
         wird nicht das Merkmal, sondern das TATSÄCHLICH geladene Bild --
         ein data-buehne ohne passende CSS-Regel wäre still wirkungslos
         und niemand würde es merken. */
      buehne: document.body.dataset.buehne || null,
      buehneBild: (getComputedStyle(document.body, "::before").backgroundImage
        .match(/buehne-([a-z]+)-(breit|schmal)/) || [])[1] || null,
      kopfZeichen: document.querySelectorAll(".kopf-zeichen__svg path").length,
      kopfZeichenFarbe: document.querySelector(".kopf-zeichen__svg")
        ? getComputedStyle(document.querySelector(".kopf-zeichen__svg")).stroke : null,
      wasserzeichen: document.querySelectorAll(".kopf-wasserzeichen__svg path").length,
    }));
    const istStart = s === "start.html";
    const markeGut = r.markeHaupt && r.markeLeise && r.markeRaute === 1
      && (istStart || r.rueckweg === "start.html");
    /* Auf der Startseite gibt es keinen Seitenkopf -- dort sind die
       Kacheln selbst der Kopf. Überall sonst ist er Pflicht. */
    /* ZWEI SEITEN HABEN KEINE KOPFZEILE, UND DAS IST ABSICHT.

       Die Startseite ist ihre eigene Uebersicht. Der Chat fuellt den
       Bildschirm mit zwei Spalten (Gespraechsliste und Verlauf) und
       traegt seinen Titel in `.chat__kopf` -- eine zusaetzliche
       Seitenkopfzeile darueber wuerde ihm eine Zeile Hoehe nehmen, die
       er fuer den Verlauf braucht.

       DIE AUSNAHME STEHT HIER MIT NAMEN, statt dass die Seite aus der
       Liste faellt. Genau das war vorher der Fall: chat.html wurde
       nicht geprueft, und deshalb blieb unbemerkt, dass sie auch ihr
       Hintergrundbild verloren hatte. Eine Seite, die man aus der
       Liste nimmt, damit die Liste gruen bleibt, ist eine Seite ohne
       Pruefung.

       WAS FUER DEN CHAT TROTZDEM GILT: Ton und Buehne. Die haengen am
       Bereich, nicht an der Kopfzeile -- sie muessen ankommen. Nur
       Plakette und Wasserzeichen entfallen, weil es den Ort dafuer
       nicht gibt.

       OFFEN FUER FILIPE: Ob der Chat eine Plakette bekommen soll, ist
       eine Gestaltungsfrage, keine Fehlerfrage -- sie braucht seinen
       Blick, nicht meine Entscheidung um zwei Uhr nachts. */
    const ohneKopfzeile = istStart || s === "chat.html";
    const kopfGut = ohneKopfzeile
      ? (istStart || r.ton !== null)
      : (r.ton !== null && r.kopfZeichen > 0 && r.wasserzeichen > 0);
    /* AM 03.09.2026 UMGESTELLT.

       Hier stand: "jede Seite hat ihre EIGENE Bühne" -- geprüft wurde,
       dass das geladene Bild zum data-buehne der Seite passt (Aufgaben
       = Werkstatt, Kalender = Nachtstadt, und so weiter).

       Filipe hat die neun Szenen an diesem Tag durch EIN Bild ersetzt:
       "ersetze überall das hintergrund bild durch dieses bild". Damit
       ist die alte Erwartung nicht mehr falsch bewiesen, sondern
       überholt.

       Was hier geprüft wird, bleibt aber dasselbe WICHTIGE: dass ein
       Hintergrundbild überhaupt ankommt. Ein data-buehne ohne passende
       CSS-Regel wäre still wirkungslos, und niemand würde es merken --
       die Seite sähe nur "etwas dunkler" aus.

       AM 07.09.2026 NOCH EINMAL UMGESTELLT -- und diesmal war die
       Prüfung schlicht liegengeblieben. Filipe hat die Motive
       zurückgeholt (Commit "Sieben Motive statt einem"), hier stand
       aber weiter `=== "dogfather"`. Ergebnis: ALLE 32 Seiten rot, in
       einer Meldung, der man nicht ansieht, welche Bedingung gefallen
       ist -- 32 Fehlalarme, kein einziger Mangel. Wer eine Entscheidung
       ändert, muss die Prüfung mitändern, sonst misst sie eine Welt,
       die es nicht mehr gibt.

       Die neue Bedingung ist SCHÄRFER als beide vorherigen: Das
       geladene Bild muss zu dem Merkmal passen, das die Seite selbst
       trägt. Ein `data-buehne="garage"` ohne passende CSS-Regel fiele
       damit auf -- bei "überall dasselbe Bild" wäre es nie
       aufgefallen, und bei "irgendein Motiv" auch nicht. */
    /* "KEIN data-buehne" IST NUR AUF DER STARTSEITE IN ORDNUNG.

       Hier stand `r.buehne ? r.buehneBild === r.buehne : !!r.buehneBild`
       -- also: fehlt das Merkmal, reicht IRGENDEIN Bild. Gedacht war
       das fuer die Startseite, die ihre feste Grundszene aus
       `body.start::before` bezieht. Geschrieben war es fuer JEDE Seite.

       Damit war der Chat-Fehler unsichtbar: Die Seite verlor ihr
       `data-buehne`, fiel auf die Grundszene zurueck, und die Pruefung
       sagte "ein Motiv ist da, alles gut". Eine Bedingung, die bei
       fehlender Angabe milder wird statt strenger, kann den Verlust
       dieser Angabe nicht melden -- sie belohnt ihn.

       Jetzt ist die Ausnahme an die Startseite GEBUNDEN, nicht an das
       Fehlen des Merkmals. Auf jeder anderen Seite ist "keine Buehne"
       ein Fehler. */
    const buehneGut = buehneRichtig(istStart, r.buehne, r.buehneBild);
    /* JEDE BEDINGUNG EINZELN, MIT NAMEN. Vorher war das ein einziges
       langes UND -- fiel es, stand da nur "FEHL" und eine Zeile, in
       der alles in Ordnung aussah. Man musste die Prüfung aufmachen
       und raten. Die Gründe stehen jetzt in der Meldung. */
    const gruende = [];
    if (!(r.ueber <= 0)) gruende.push(`ragt ${r.ueber}px heraus`);
    if (konsole.length) gruende.push(`Konsole: ${konsole.join(" / ")}`);
    if (r.abmelden === false) gruende.push("Abmelden-Knopf ausserhalb");
    if (!markeGut) gruende.push("Schriftzug/Rückweg");
    if (!kopfGut) gruende.push("Seitenkopf (Ton/Zeichen/Wasserzeichen)");
    if (!buehneGut) {
      gruende.push(r.buehne
        ? `Bühne: ${r.buehneBild} statt ${r.buehne}`
        : `Bühne: die Seite trägt gar kein data-buehne (geladen: ${r.buehneBild || "nichts"})`);
    }
    /* DIE ERWARTETE BREITE HAENGT AN DER KLASSE, nicht an einer Zahl
       im Kopf (24.09.2026).

       `.inhalt--brett` setzt 1560px, und zwar mit Begruendung in
       aufgaben.css: „Ein Brett darf breiter sein; der Kopfbereich
       bleibt lesbar schmal." Wer hier starr 1240 erwartet, meldet
       genau diese Absicht als Fehler -- und tat es seit dem Tag, an
       dem die Klasse entstand. Gegenprobe gemacht: aufgaben.html war
       schon vor jeder Aenderung von heute rot.

       BEIDE ZAHLEN BLEIBEN STEHEN, weil sie etwas aussagen: Kommt
       weder 1240 noch 1560 an, ist die Regel verloren -- genau der
       Fall, fuer den diese Messung gebaut wurde. */
    const sollBreit = r.brett ? "1560px" : "1240px";
    if (!(r.breit === null || r.breit === sollBreit)) {
      gruende.push(`Breite ${r.breit} (erwartet ${sollBreit}`
        + `${r.brett ? ", die Seite traegt .inhalt--brett" : ""})`);
    }
    if (!(r.kopfzeile === null || r.kopfzeile === "flex")) gruende.push(`Kopfzeile ${r.kopfzeile}`);
    const gut = gruende.length === 0;
    if (!gut) fehler++;
    console.log(`  ${gut ? "ok  " : "FEHL"} ${String(s).padEnd(20)}`
      + `über=${String(r.ueber).padStart(3)}px  abmelden=${r.abmelden}`
      + `  marke=${r.markeHaupt ? `"${r.markeHaupt}"◆"${r.markeLeise}"` : "FEHLT"}`
      + `${istStart ? "" : ` zurück=${r.rueckweg || "FEHLT"}`}`
      + `${istStart ? "" : `  ton=${r.ton || "FEHLT"} zeichen=${r.kopfZeichen}/${r.wasserzeichen}`}`
      + `  bühne=${r.buehneBild || "FEHLT"}${r.buehne && r.buehneBild !== r.buehne ? ` (gewollt: ${r.buehne})` : ""}`
      + `  breit=${r.breit}`
      + (konsole.length ? "  KONSOLE: " + konsole.join(" | ") : "")
      + (r.schuld.length ? "  -> " + r.schuld.join(" | ") : "")
      + (gruende.length ? "\n         GRUND: " + gruende.join(" ; ") : ""));
  }
  await kontext.close();
}
/* ---- GEGENPROBE: kann die Buehnenregel auch NEIN sagen? ------------
   Ohne das waere "alles in Ordnung" nur die Aussage, dass die Regel
   nichts gemeldet hat -- nicht, dass sie etwas melden koennte. Genau
   dieser Fall ist am 09.09.2026 eingetreten: Die alte Regel wurde bei
   fehlendem `data-buehne` MILDER statt strenger und hat den Verlust
   der Angabe belohnt statt gemeldet. */
{
  const faelle = [
    [false, "lounge", "lounge", true,  "Seite will lounge und bekommt lounge"],
    [false, "lounge", "garage", false, "Seite will lounge, bekommt garage"],
    [false, null,     "studio", false, "Seite hat gar kein data-buehne (der Chat-Fehler)"],
    [false, null,     null,     false, "weder gewollt noch geladen"],
    [false, "lounge", null,     false, "gewollt, aber nichts geladen"],
    [true,  null,     "studio", true,  "Startseite mit ihrer Grundszene"],
    [true,  null,     null,     false, "Startseite ganz ohne Motiv"],
  ];
  let schief = 0;
  for (const [start, gewollt, geladen, soll, was] of faelle) {
    const ist = buehneRichtig(start, gewollt, geladen);
    if (ist !== soll) { schief++; console.log(`  FEHL Gegenprobe "${was}": ${ist} statt ${soll}`); }
  }
  console.log(schief === 0
    ? `  ok   die Bühnenregel erkennt alle ${faelle.length} Fälle richtig (Gegenprobe)`
    : `  FEHL ${schief} Fälle der Bühnenregel stimmen nicht`);
  if (schief) fehler += schief;
}

await browser.close();
console.log(`\n${fehler === 0 ? "Alles in Ordnung." : fehler + " Seite(n) fehlerhaft."}`);
try { rmSync(ordner, { recursive: true, force: true }); } catch {}
process.exit(fehler === 0 ? 0 : 1);