dogfather-universe/server/pruef-lesbarkeit.mjs

/* Misst, ob Text auf den durchscheinenden Flaechen wirklich lesbar ist.

   Wunsch vom 01.09.2026: "diese Kachel soll ganz leicht noch dunkler
   werden, so dass man den Text besser gelesen bekommt -- aber auch nicht
   zu viel, so dass man den Hasen noch sieht." Und: "die von wichtigen
   und neuen PDFs sollen auch staerker sein."

   WARUM GEMESSEN UND NICHT ANGESEHEN.
   Hinter allen Flaechen liegt ein Buehnenbild. Wie lesbar ein Text ist,
   haengt damit nicht an seiner Farbe, sondern an dem, was an genau
   dieser Stelle darunter liegt -- und das wechselt je Seite. Ein Blick
   auf einen Screenshot bei Tageslicht sagt darueber nichts.

   Gemessen wird deshalb an ECHTEN PIXELN: Der Text wird kurz
   ausgeblendet, die Flaeche an der Stelle abfotografiert, wo er stand,
   und daraus mit der WCAG-Formel der Kontrast gerechnet.

   ZWEI GRENZEN, nicht eine. Der Wunsch hat zwei Haelften, und eine
   Pruefung, die nur die eine kennt, wuerde die andere kaputtgehen
   lassen:
     UNTEN   der Text muss lesbar sein (mindestens 4,5:1, WCAG AA)
     OBEN    das Bild muss noch durchkommen (hoechstens 92 % Deckung)
   Nur beides zusammen ist der Wunsch. */

import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";

const ordner = mkdtempSync(join(tmpdir(), "ws-lese-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
process.env.PORT = "4214";
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";

const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
await import("./index.js");
await new Promise((r) => setTimeout(r, 700));
const BASIS = "http://127.0.0.1:4214";
setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 300_000).unref?.();

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

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");
for (let i = 0; i < 60; i++) {
  try {
    const p = new DatabaseSync(process.env.WORKSPACE_DB);
    try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); }
  } catch { await new Promise((r) => setTimeout(r, 250)); }
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
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("Filipe", "admin", hash, salt, 32768, jetzt);

/* Zwei Anleitungen: eine wichtige, eine frische. Beide muessen in der
   Uebersicht oben landen -- genau die aus dem Wunsch.

   OHNE try/catch: Der erste Anlauf schrieb in eine Tabelle "bibliothek",
   die es nicht gibt, fing den Fehler weg und lief mit einer leeren Seite
   weiter. Die Pruefung meldete daraufhin "nicht gefunden" statt "die
   Daten fehlen" -- und haette bei einem echten Fehler genauso ausgesehen.
   Schlaegt das Anlegen fehl, soll der Lauf hier abbrechen. */
d.prepare(`INSERT INTO wissen
  (titel, beschreibung, kategorie, stufe, geraet, name_original, name_datei,
   groesse, wichtig, veroeffentlicht, erstellt_von)
  VALUES (?,?,?,?,?,?,?,?,?,?,?)`)
  .run("Die wichtigste Anleitung", "Muss jeder gelesen haben.", "hilfe",
       "einsteiger", "egal", "wichtig.pdf", "x1.pdf", 1000, 1, jetzt.slice(0, 10), 1);
d.prepare(`INSERT INTO wissen
  (titel, beschreibung, kategorie, stufe, geraet, name_original, name_datei,
   groesse, wichtig, veroeffentlicht, hochgeladen, erstellt_von)
  VALUES (?,?,?,?,?,?,?,?,?,?,?,?)`)
  .run("Gerade dazugekommen", "Frisch eingestellt.", "hilfe",
       "einsteiger", "egal", "neu.pdf", "x2.pdf", 1000, 0, jetzt.slice(0, 10), jetzt, 1);

/* EINE GEWOEHNLICHE ANLEITUNG -- aelter als 48 Stunden, damit sie weder
   "neu" noch "wichtig" ist.

   Ohne sie findet der Vergleich "Wichtiges darf nie duenner sein als
   Gewoehnliches" nichts zum Vergleichen und wird STILL uebersprungen.
   Ein uebersprungener Test beweist nichts -- und ausgerechnet dieser
   Vergleich ist der, der den urspruenglichen Fehler gefunden haette. */
const alt = new Date(Date.now() - 30 * 86400_000).toISOString();
d.prepare(`INSERT INTO wissen
  (titel, beschreibung, kategorie, stufe, geraet, name_original, name_datei,
   groesse, wichtig, veroeffentlicht, hochgeladen, erstellt_von)
  VALUES (?,?,?,?,?,?,?,?,?,?,?,?)`)
  .run("Steht schon laenger da", "Ganz gewoehnlich.", "hilfe",
       "einsteiger", "egal", "alt.pdf", "x3.pdf", 1000, 0, alt.slice(0, 10), alt, 1);
d.close();

const { chromium } = await import(
  "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await chromium.launch();
const kontext = await browser.newContext({ viewport: { width: 1280, height: 1100 } });
const seite = await kontext.newPage();
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 });

/* Die WCAG-Formel. Steht hier und nicht in der Seite -- eine Pruefung,
   die ihre Messlatte aus dem Geprueften bezieht, misst nichts. */
function leuchtkraft(r, g, b) {
  const f = (w) => {
    const v = w / 255;
    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  };
  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
}
const kontrast = (a, b) => {
  const l1 = leuchtkraft(...a);
  const l2 = leuchtkraft(...b);
  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
};

/* Pixel lesen OHNE zusaetzliche Bibliothek: Der Screenshot wird als
   Bild in die Seite gegeben und in ein Canvas gezeichnet -- dort laesst
   sich jeder Punkt auslesen. Derselbe Weg wie in pruef-buehne.mjs; eine
   zweite Methode fuer dieselbe Messung waere der sichere Weg zu zwei
   verschiedenen Wahrheiten. */
async function pixelMittel(bild, breite, hoehe) {
  return seite.evaluate(async ({ b64, breite, hoehe }) => {
    const bild = new Image();
    await new Promise((r) => { bild.onload = r; bild.src = "data:image/png;base64," + b64; });
    const c = document.createElement("canvas");
    c.width = bild.width; c.height = bild.height;
    const g = c.getContext("2d", { willReadFrequently: true });
    g.drawImage(bild, 0, 0);
    const daten = g.getImageData(0, 0, c.width, c.height).data;
    let r = 0, gr = 0, bl = 0, n = 0;
    for (let i = 0; i < daten.length; i += 4) { r += daten[i]; gr += daten[i + 1]; bl += daten[i + 2]; n++; }
    return n ? [Math.round(r / n), Math.round(gr / n), Math.round(bl / n), n] : null;
  }, { b64: bild.toString("base64"), breite, hoehe });
}

/** Misst an der Stelle, an der ein Text steht:
 *  - die Farbe des Textes (aus dem Stil)
 *  - die tatsaechliche Farbe DAHINTER (der Text wird kurz unsichtbar
 *    gemacht und die Flaeche fotografiert)
 *
 *  Ein Mittelwert ueber die ganze Flaeche, nicht ein einzelner Punkt:
 *  Hinter einer durchscheinenden Flaeche liegt ein Bild, und ein
 *  einzelner Punkt kann zufaellig hell oder dunkel sein.
 *
 *  Unsichtbar gemacht wird der Text, NICHT entfernt: Ein entferntes
 *  Element aendert das Layout, und dann wird an der falschen Stelle
 *  gemessen. */
async function messen(waehler) {
  const stelle = await seite.evaluate((w) => {
    const e = document.querySelector(w);
    if (!e) return null;
    const r = e.getBoundingClientRect();
    if (r.width < 10 || r.height < 6) return null;
    if (r.top < 0 || r.bottom > window.innerHeight) e.scrollIntoView({ block: "center" });
    const r2 = e.getBoundingClientRect();
    /* DIE FARBE ZUERST UND IN EIN EIGENES FELD ABSCHREIBEN.
       getComputedStyle liefert ein LEBENDES Objekt: Wird der Text gleich
       auf "transparent" gesetzt, aendert sich st.color mit -- und die
       Messung vergleicht Schwarz gegen den dunklen Grund. Genau so
       meldete der erste Lauf 1,17:1 fuer Text, der tadellos lesbar ist.
       Ein Messfehler, der schlimmer ist als keine Messung: Er haette
       eine Verschlimmbesserung ausgeloest. */
    const farbe = getComputedStyle(e).color.match(/\d+/g).slice(0, 3).map(Number);
    e.dataset.messen = "ja";
    e.style.color = "transparent";
    return { x: Math.round(r2.x), y: Math.round(r2.y),
             w: Math.round(r2.width), h: Math.round(Math.min(r2.height, 40)),
             farbe };
  }, waehler);
  if (!stelle || stelle.w < 10 || stelle.h < 6) return null;

  const bild = await seite.screenshot({
    clip: { x: stelle.x, y: stelle.y, width: stelle.w, height: stelle.h },
  });
  await seite.evaluate(() => {
    const e = document.querySelector('[data-messen="ja"]');
    if (e) { e.style.color = ""; delete e.dataset.messen; }
  });

  const hinten = await pixelMittel(bild, stelle.w, stelle.h);
  if (!hinten) return null;
  return { ...stelle, hinten, punkte: hinten[3],
           kontrast: kontrast(stelle.farbe, hinten.slice(0, 3)) };
}

/* ================================================================
   1. Der Erklaerkasten im Scouting -- die Kachel aus dem Bild
   ================================================================ */
console.log("\n=== Der Erklaerkasten (Scouting)");
await seite.goto(BASIS + "/workspace/scouting.html", { waitUntil: "networkidle" });
await seite.waitForTimeout(1400);

const kasten = await seite.evaluate(() => {
  const k = document.querySelector(".leer-hinweis--erklaerung");
  if (!k) return null;
  const st = getComputedStyle(k);
  /* Wie dicht ist die unterste Schicht? Aus ihr kommt die Lesbarkeit --
     und ihre Obergrenze ist der zweite Teil des Wunsches. */
  const m = st.backgroundColor.match(/[\d.]+/g) || [];
  const bilder = st.backgroundImage;
  return { da: true, hintergrund: st.backgroundColor, bilder: bilder.slice(0, 60), teile: m };
});
ok(!!kasten, "der Erklaerkasten ist da");

for (const [waehler, name, mindestens] of [
  [".erklaerung__satz", "der Einstiegssatz", 4.5],
  [".erklaerung__warum", "der Wozu-Absatz", 4.5],
  [".erklaerung__was", "die Beschreibung einer Stufe", 4.5],
  [".erklaerung__fuss", "der Schlussabsatz", 4.5],
]) {
  const m = await messen(waehler);
  if (!m) { ok(false, `${name}: nicht gefunden`); continue; }
  ok(m.kontrast >= mindestens,
     `${name}: ${m.kontrast.toFixed(2)}:1 (mindestens ${mindestens}:1)`);
}

/* DIE ZWEITE GRENZE -- "so dass man den Hasen noch sieht".
   Ohne sie waere die Pruefung mit einer schwarzen Flaeche am
   zufriedensten, und genau das wollte niemand. */
const deckung = await seite.evaluate(() => {
  const k = document.querySelector(".leer-hinweis--erklaerung");
  const m = getComputedStyle(k).backgroundColor.match(/[\d.]+/g);
  return m && m.length === 4 ? Number(m[3]) : 1;
});
ok(deckung <= 0.92,
   `die Flaeche laesst das Bild noch durch (${Math.round(deckung * 100)} % Deckung, hoechstens 92 %)`);
ok(deckung >= 0.8,
   `  und ist dicht genug, damit Text ruhig steht (${Math.round(deckung * 100)} %, mindestens 80 %)`);

await seite.screenshot({ path: "pruef-lesbarkeit-scouting.png", fullPage: false });

/* ================================================================
   2. Wichtige und neue Anleitungen
   ================================================================ */
console.log("\n=== Wichtige und neue Anleitungen");
await seite.goto(BASIS + "/workspace/wissen.html", { waitUntil: "networkidle" });
await seite.waitForTimeout(1600);

/* Die gewoehnliche Anleitung steht NICHT im Block "Neu & Wichtig" oben,
   sondern in ihrer Kategorie -- und die wird erst geladen, wenn man sie
   aufmacht. Der erste Anlauf suchte sie auf der Startansicht und fand
   nichts; die Pruefung meldete daraufhin "es gab keine zum Vergleichen",
   und das war richtig gemeldet, aber am falschen Ort gesucht.
   ?k=hilfe oeffnet die Kategorie -- dort stehen alle drei nebeneinander. */
await seite.goto(BASIS + "/workspace/wissen.html?k=hilfe", { waitUntil: "networkidle" });
await seite.waitForTimeout(1400);

const karten = await seite.evaluate(() => {
  const wichtig = document.querySelector('.pdf[data-wichtig="ja"]');
  const normal = [...document.querySelectorAll(".pdf")]
    .find((p) => p.dataset.wichtig !== "ja" && !p.querySelector(".marke-neu"));
  const dichte = (e) => {
    if (!e) return null;
    const m = getComputedStyle(e).backgroundColor.match(/[\d.]+/g);
    return m && m.length === 4 ? Number(m[3]) : 1;
  };
  return {
    wichtigDa: !!wichtig,
    wichtig: dichte(wichtig),
    normal: dichte(normal),
    normalDa: !!normal,
  };
});
ok(karten.wichtigDa, "eine als wichtig markierte Anleitung ist da");

/* DER EIGENTLICHE FEHLER, den es zu verhindern gilt: Vorher stand dort
   `background: rgba(232,192,125,.045)` -- das hat die Flaeche nicht
   getoent, sondern ERSETZT. Uebrig blieben viereinhalb Prozent Deckung,
   und ausgerechnet die Anleitung, die jeder lesen soll, war die am
   schwersten lesbare der Seite. Geprueft wird deshalb im VERGLEICH:
   Wichtiges darf nie duenner sein als Gewoehnliches. */
if (karten.wichtigDa) {
  ok(karten.wichtig >= 0.8,
     `die wichtige Anleitung steht auf dichtem Grund (${Math.round(karten.wichtig * 100)} %)`);
  /* KEIN `if` um diesen Vergleich: Findet er keine gewoehnliche Karte,
     ist das ein Fehler der Pruefung und muss auffallen -- nicht ein
     stiller Aussetzer. Genau dieser Vergleich haette den
     urspruenglichen Fehler gefunden. */
  ok(karten.normalDa && karten.wichtig >= karten.normal,
     `  und ist nicht duenner als eine gewoehnliche `
     + (karten.normalDa
        ? `(${Math.round(karten.wichtig * 100)} % gegen ${Math.round(karten.normal * 100)} %)`
        : "– ABER es gab keine gewoehnliche zum Vergleichen"));
}

for (const [waehler, name] of [
  ['.pdf[data-wichtig="ja"] .pdf__titel', "ihr Titel"],
  ['.pdf[data-wichtig="ja"] .pdf__text', "ihre Beschreibung"],
]) {
  const m = await messen(waehler);
  if (!m) { ok(false, `${name}: nicht gefunden`); continue; }
  /* Die Beschreibung ist kleiner und leiser -- 4,5:1 gilt trotzdem,
     sie ist normaler Fliesstext. */
  ok(m.kontrast >= 4.5, `${name}: ${m.kontrast.toFixed(2)}:1`);
}

await seite.screenshot({ path: "pruef-lesbarkeit-wissen.png", fullPage: false });

/* ================================================================
   3. GEGENPROBE -- kann diese Messung ueberhaupt anschlagen?
   Eine Pruefung, die immer bestaetigt, bestaetigt nichts.
   ================================================================ */
console.log("\n=== Gegenprobe");
await seite.evaluate(() => {
  const k = document.querySelector(".pdf__titel");
  if (k) k.style.color = "#141a24";      /* fast so dunkel wie der Grund */
});
const schlecht = await messen(".pdf__titel");
ok(schlecht && schlecht.kontrast < 4.5,
   `absichtlich zu dunkler Text wird erkannt (${schlecht?.kontrast?.toFixed(2)}:1)`);
ok((schlecht?.punkte || 0) > 200,
   `und dabei wirklich Pixel gelesen (${schlecht?.punkte} Punkte gemittelt)`);

await kontext.close();
await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
console.log(fehler ? `\n${fehler} Prüfung(en) fehlgeschlagen.` : "\nAlles in Ordnung.");
process.exit(fehler ? 1 : 0);