dogfather-universe/server/pruef-crew-wand-bild.mjs

/* =====================================================================
   Die Zugangswand der Modi-App ANSEHEN, nicht nur zaehlen.

   pruef-crew-adresse.mjs misst, was im HTML steht. Das beantwortet
   nicht, ob die Karte in der gemalten Tafel sitzt, ob Dogi vom Text
   verdeckt wird oder ob auf dem Handy etwas ueber den Rand haengt --
   und genau diese Fehler sieht man nur.

   Zwei Bildschirmfotos, ein Rechner und ein Handy, plus zwei Messungen,
   die man dem Bild nicht ansieht:

     * Die Karte muss INNERHALB der gemalten Tafel liegen. gate.css
       rechnet dafuer die Cover-Geometrie des Bildes nach; sitzt das
       Motiv anders als das alte, laege sie daneben. Toleranz: zwei
       Prozent der Tafelbreite.
     * Kein Element darf ueber den rechten Rand hinausragen -- der
       haeufigste Fehler auf schmalen Geraeten, und er faellt im
       Bildschirmfoto erst auf, wenn man scrollt.

   Aufrufen mit:  node server/pruef-crew-wand-bild.mjs
   Die Bilder landen als server/pruef-crew-wand-*.png.
   ===================================================================== */
import { mkdtempSync } from "node:fs";
import { tmpdir } from "node:os";
import { join, dirname } from "node:path";
import { fileURLToPath } from "node:url";

const ordner = mkdtempSync(join(tmpdir(), "ws-crewbild-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
/* 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-crew-wand-bild");
process.env.PORT = `${PORT}`;
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";

/* `rollenImHaus` kommt aus derselben Datei, aus der der Server die
   Zugangswand baut -- damit kann diese Pruefung nicht veralten,
   wenn jemand eine Rolle dazunimmt. */
import { rollenImHaus } from "./crew-adresse.js";
import { notbremse } from "./helfer-notbremse.mjs";
import { eigenerPort } from "./helfer-port.mjs";
await import("./index.js");
notbremse(180_000, "pruef-crew-wand-bild");
await new Promise((r) => setTimeout(r, 700));

/* Die Bilder landen als pruef-*.png neben den anderen Pruefdateien.

   NICHT in einem eigenen Ordner: .gitignore kennt `server/pruef-*.png`
   seit dem 22.08.2026, mit ausfuehrlicher Begruendung -- ein eigener
   Ordner braeuchte eine zweite Regel fuer dieselbe Sache, und die
   vergisst beim naechsten Mal jemand. Dann liegen Bildschirmfotos im
   Repo und tauchen bei jedem Commit als Aenderung auf. */
const HIER = dirname(fileURLToPath(import.meta.url));

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

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

/* Die vier Zahlen aus gate.css -- die Tafel im Bild. */
const TAFEL = { x: 0.5545, y: 0.1315, b: 0.3865, h: 0.6385 };
const BILD = { b: 1647, h: 955 };

/* Die alte Wand laeuft in denselben Messungen mit.

   Ohne sie schriebe ich eine Regel fest, von der ich nicht weiss, ob
   die vorhandene Seite sie ueberhaupt einhaelt -- und beim ersten
   Fehlschlag waere unklar, ob die neue Seite schlecht ist oder die
   Regel zu streng. Mit ihr ist die Antwort sofort da. */
for (const geraet of [
  { name: "rechner", breite: 1440, hoehe: 900 },
  { name: "handy", breite: 412, hoehe: 915 },
  { name: "alt-rechner", breite: 1440, hoehe: 900, alt: true },
  { name: "alt-handy", breite: 412, hoehe: 915, alt: true },
]) {
  const ctx = await browser.newContext({
    viewport: { width: geraet.breite, height: geraet.hoehe }, hasTouch: geraet.breite <= 860,
    deviceScaleFactor: 1,
  });
  const seite = await ctx.newPage();
  /* Der App-Name kommt aus dem Manifest der Crew-Adresse. Eine zweite
   Fassung hier waere die, die beim naechsten Umbenennen vergessen
   wird. */
const { readFileSync } = await import("node:fs");
const APPNAME = JSON.parse(
  readFileSync(new URL("../workspace/crew.webmanifest", import.meta.url), "utf8")).name;

const meldungen = [];
  seite.on("console", (m) => { if (m.type() === "error") meldungen.push(m.text()); });

  const adresse = geraet.alt
    ? `http://127.0.0.1:${PORT}/workspace/index.html`
    : `http://127.0.0.1:${PORT}/workspace/crew-index.html`;
  await seite.goto(adresse, { waitUntil: "networkidle" });
  await seite.waitForTimeout(400);

  const datei = join(HIER, `pruef-crew-wand-${geraet.name}.png`);
  if (!geraet.alt) await seite.screenshot({ path: datei });
  console.log(`\n--- ${geraet.name} (${geraet.breite}x${geraet.hoehe}) -> ${datei}`);

  /* Kein Skriptfehler. Ohne diese Zeile faellt ein kaputtes gate.js
     erst auf, wenn jemand den Knopf drueckt. */
  ok(meldungen.length === 0,
    `${geraet.name}: keine Fehler im Skript` + (meldungen.length ? ` -- ${meldungen[0]}` : ""));

  /* Ist ueberhaupt die richtige Seite da? */
  const titel = await seite.title();
  const kacheln = await seite.locator(".rolle").count();
  if (geraet.alt) {
    ok(kacheln === 5, `${geraet.name}: die alte Wand hat ihre fuenf Kacheln (${kacheln})`);
  } else {
    /* DER REITER TRAEGT DEN APP-NAMEN -- abgeleitet, nicht abgeschrieben.
       Hier stand `/Team Dogi/`, aus der Zeit, als die App so hiess. Sie
       heisst seit dem Treff-Umzug "DogFather Universe", und die Pruefung
       war seitdem rot, ohne dass etwas kaputt war. Ein fester Name in
       einer Pruefung ist eine Zeitbombe mit Datum: Er stimmt, bis
       jemand umbenennt, und dann kostet er Vertrauen in den ganzen
       Satz. Gemessen wird deshalb gegen das Manifest -- benennt jemand
       die App um, folgt der Reiter, und beides bleibt gruen. Weichen
       sie auseinander, sieht der Mensch im Reiter einen anderen Namen
       als auf seinem Startbildschirm, und das ist der Fehler, den es
       zu finden gilt. */
    ok(titel.includes(APPNAME),
      `${geraet.name}: der Reiter traegt den App-Namen "${APPNAME}" (steht da: "${titel}")`);

    /* WELCHE ROLLEN AUF DIE WAND GEHOEREN.
       Hier stand `=== 3`, seit Filipe am 10.09.2026 sagte: "3 rollen.
       dogfather. rechte hand und modis." Am 19.09. ist der Treff in
       Team Dogi eingezogen, und die Community kam als vierte dazu --
       die Zahl war ab da falsch, die Wand richtig.

       Eine Zahl sagt beim Scheitern nur "3 erwartet, 4 gefunden" und
       verschweigt, WELCHE. Deshalb wird die MENGE verglichen: Fehlt
       eine Rolle, steht ihr Name in der Meldung, und wer sie entfernt
       hat, sieht sofort, ob das Absicht war. */
    const rollen = (await seite.locator(".rolle").evaluateAll(
      (ns) => ns.map((n) => n.dataset.rolle || ""))).sort();
    /* ==== DRITTER ANLAUF, UND DIESMAL OHNE ABSCHRIFT (25.09.2026) ===

       Hier stand `=== 3` (10.09.), dann die Liste
       ["admin","gast","hand","modi"] (19.09.) -- und beide sind aus
       demselben Grund veraltet: Am 21.09. kam die LINKE HAND dazu. Die
       Wand zeigte sie richtig an, die Pruefung kannte sie nicht, und
       sie war seither rot, ohne dass etwas kaputt war.

       Der Kommentar direkt darueber warnt seit dem 19.09. wortwoertlich
       vor festen Namen in Pruefungen („eine Zeitbombe mit Datum") --
       und die Zeile darunter war selbst eine. Ein Kommentar, der vor
       einem Fehler warnt, verhindert ihn nicht.

       JETZT WIRD ABGELEITET: `rollenImHaus("crew")` ist dieselbe
       Quelle, aus der der Server die Wand baut. Wer morgen eine Rolle
       dazunimmt oder verschiebt, verschiebt diese Pruefung mit. Und
       weicht die Wand doch einmal ab, steht in der Meldung, WELCHE
       Rolle fehlt oder zu viel ist -- eine Zahl sagt nur „vier
       erwartet, fuenf gefunden" und verschweigt das Entscheidende. */
    const SOLL = [...rollenImHaus("crew")].sort();
    const fehlt = SOLL.filter((r) => !rollen.includes(r));
    const zuviel = rollen.filter((r) => !SOLL.includes(r));
    ok(fehlt.length === 0 && zuviel.length === 0,
      `${geraet.name}: alle ${SOLL.length} Rollen des Hauses stehen da `
      + `(${rollen.join(", ") || "keine"})`
      + (fehlt.length ? ` -- ES FEHLT: ${fehlt.join(", ")}` : "")
      + (zuviel.length ? ` -- ZU VIEL: ${zuviel.join(", ")}` : ""));
    /* Jede muss auch bedienbar sein. Eine Kachel, die im HTML steht,
       aber 0 px hoch ist, zaehlt oben mit und laesst sich trotzdem
       nicht antippen -- genau die Sorte Fehler, die eine Zaehlung
       allein nicht findet. */
    const zuKlein = await seite.evaluate(() =>
      [...document.querySelectorAll(".rolle")]
        .filter((e) => e.getBoundingClientRect().height < 40).length);
    ok(zuKlein === 0, `${geraet.name}: alle drei sind gross genug zum Antippen`);
  }

  /* Die Karte muss sichtbar und bedienbar sein. */
  const karte = await seite.locator("#tafel").boundingBox();
  const feld = await seite.locator("#code").boundingBox();
  const knopf = await seite.locator("#knopf").boundingBox();
  ok(!!karte && karte.width > 200, `${geraet.name}: die Karte steht (${Math.round(karte?.width || 0)} px breit)`);
  ok(!!feld && feld.height >= 40, `${geraet.name}: das Codefeld ist gross genug zum Tippen`);
  ok(!!knopf && knopf.height >= 40, `${geraet.name}: der Anmeldeknopf ist gross genug`);

  /* HAENGT ETWAS HERAUS? Die Frage muss genauer gestellt werden.

     Erster Entwurf ging ueber ALLE Elemente und meldete zwei Treffer:
     `buehne__bild` und `tafel-anker`. Beide sind ABSICHTLICH breiter
     als das Fenster -- so arbeitet `object-fit: cover`, und der Anker
     ist bloss eine Schablone ohne Klicks. Die Pruefung war rot, die
     Seite in Ordnung.

     Gemeint sind zwei Dinge, und beide lassen sich sauber messen:
       1. Laesst sich die Seite seitlich schieben? Das ist der Fehler,
          den man als Nutzer merkt.
       2. Liegt etwas BEDIENBARES ausserhalb? Das ist der Fehler, den
          man nicht merkt -- man kommt nur nicht daran. */
  const ueberstand = await seite.evaluate(() => {
    const w = document.documentElement;
    const schiebt = w.scrollWidth - w.clientWidth;
    let schlimmster = 0, wer = "";
    for (const e of document.querySelectorAll(
      "a, button, input, textarea, select, label, h1, .unterzeile, .marke")) {
      const r = e.getBoundingClientRect();
      if (r.width === 0 && r.height === 0) continue;
      const ueber = Math.max(r.right - w.clientWidth, -r.left);
      if (ueber > schlimmster) { schlimmster = ueber; wer = e.className || e.tagName; }
    }
    return { schiebt: Math.round(schiebt), schlimmster: Math.round(schlimmster),
             wer: String(wer).slice(0, 40) };
  });
  ok(ueberstand.schiebt <= 1,
    `${geraet.name}: die Seite laesst sich nicht seitlich schieben`
    + (ueberstand.schiebt > 1 ? ` -- ${ueberstand.schiebt} px zu breit` : ""));
  ok(ueberstand.schlimmster <= 2,
    `${geraet.name}: alles Bedienbare liegt im Fenster`
    + (ueberstand.schlimmster > 2 ? ` -- ${ueberstand.wer} um ${ueberstand.schlimmster} px` : ""));

  /* IST DIE SCHRIFT AUF DEM ANMELDEKNOPF LESBAR?

     Der Knopf traegt einen VERLAUF. Man kann seine Lesbarkeit deshalb
     nicht aus einer einzelnen Farbe im Stylesheet ableiten -- die
     hellste Stelle entscheidet, und die steht dort nirgends als Zahl.
     Also wird das fertige Bild ausgemessen.

     Die Schrift ist weiss; weisse Bildpunkte sind damit die Schrift und
     werden ausgenommen. Vom Rest zaehlt das obere Zehntel: die hellste
     Stelle des Verlaufs, auf der noch Schrift liegen kann.

     4,5 zu 1 ist die Grenze aus WCAG AA fuer normale Schrift. Der Knopf
     ist zwar fett, aber mit rund 16 px unter den 18,66 px, ab denen
     3 zu 1 genuegen wuerde -- also gilt die strengere Zahl. */
  const knopfBild = await seite.locator("#knopf").screenshot();
  const kontrast = await seite.evaluate(async (b64) => {
    const i = new Image(); i.src = "data:image/png;base64," + b64; await i.decode();
    const c = document.createElement("canvas");
    c.width = i.width; c.height = i.height;
    const g = c.getContext("2d");
    g.drawImage(i, 0, 0);
    const d = g.getImageData(0, 0, c.width, c.height).data;
    const linear = (v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
    const hell = [];
    for (let k = 0; k < d.length; k += 4) {
      const L = 0.2126 * linear(d[k]) + 0.7152 * linear(d[k + 1]) + 0.0722 * linear(d[k + 2]);
      if (L > 0.6) continue;                 // das ist die Schrift selbst
      hell.push(L);
    }
    if (!hell.length) return null;
    hell.sort((x, y) => x - y);
    const oben = hell[Math.floor(hell.length * 0.9)];
    return { hellste: oben, verhaeltnis: 1.05 / (oben + 0.05), punkte: hell.length };
  }, knopfBild.toString("base64"));

  ok(kontrast && kontrast.punkte > 500 && kontrast.verhaeltnis >= 4.5,
    `${geraet.name}: weisse Schrift auf dem Knopf haelt `
    + `${kontrast ? kontrast.verhaeltnis.toFixed(2) : "?"} zu 1 (mindestens 4,5)`);

  /* NUR AM RECHNER: Sitzt die Karte in der gemalten Tafel?
     Auf dem Handy liegt sie bewusst frei vor dem Bild -- dort gaebe es
     nichts zu vergleichen, und eine Pruefung, die dort etwas behauptet,
     behauptete es ohne Grundlage. */
  if (geraet.breite >= 1100 && geraet.breite / geraet.hoehe > 1.4) {
    const soll = await seite.evaluate(([t, bild]) => {
      /* Dieselbe Cover-Rechnung wie im CSS. */
      const vw = document.documentElement.clientWidth;
      const vh = window.innerHeight;
      const b = Math.max(vw, vh * bild.b / bild.h) * 1.03;
      const h = Math.max(vh, vw * bild.h / bild.b) * 1.03;
      const links = (vw - b) / 2, oben = (vh - h) / 2;
      return {
        x: links + b * t.x, y: oben + h * t.y,
        b: b * t.b, h: h * t.h,
      };
    }, [TAFEL, BILD]);

    const abx = Math.abs(karte.x - soll.x);
    const aby = Math.abs(karte.y - soll.y);
    const grenze = soll.b * 0.02;
    ok(abx <= grenze && aby <= grenze,
      `${geraet.name}: die Karte sitzt in der gemalten Tafel `
      + `(${Math.round(abx)} px seitlich, ${Math.round(aby)} px hoch, erlaubt ${Math.round(grenze)})`);
  }

  await ctx.close();
}

/* =====================================================================
   NACH DER ANMELDUNG: heisst die Seite auch im Reiter anders?

   In jeder der 30 Seiten steht fest <title>... · Spicy & Dogi</title>
   und daneben das Zeichen des Workspace. Fuer einen Modi ist beides
   falsch -- und beides sieht man als Erstes: im Browserreiter und, wenn
   die Seite als App laeuft, im Fensterrahmen.

   kopf.js zieht das aus `ich.marke` nach. Das laeuft erst IM BROWSER,
   laesst sich also nur hier messen und nicht in pruef-crew-adresse.mjs,
   die rohes HTTP spricht.

   DIE GEGENPROBE STEHT DANEBEN: Dieselben zwei Werte werden fuer einen
   Manager gelesen. Bei ihm MUESSEN sie unveraendert bleiben -- sonst
   haette ich die Kopfleiste fuer alle umgebaut, und das waere niemandem
   aufgefallen, weil es ja "auch geht".
   ===================================================================== */
console.log("");
console.log("--- Nach der Anmeldung ---");

const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes, createHmac } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
const schluessel = randomBytes(32).toString("hex");
d.prepare("INSERT INTO einstellungen (schluessel, wert, geaendert, von)"
  + " VALUES (?,?,?,NULL) ON CONFLICT(schluessel) DO NOTHING")
  .run("code_kennung_schluessel", schluessel, jetzt);

function anlegen(name, rolle, code) {
  const salt = randomBytes(16).toString("hex");
  const hash = scryptSync(code, 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, code_kennung, aktiv, erstellt)"
    + " VALUES (?,?,?,?,?,?,1,?)")
    .run(name, rolle, hash, salt, 32768,
      createHmac("sha256", schluessel).update(code).digest("hex"), jetzt);
}
anlegen("Marina", "modi", "CODE-MODI-0001");
anlegen("Schulle", "manager", "CODE-MAN-0001");

const STEMPEL = new RegExp("\\?v=\\d+");

for (const wer of [
  { name: "Modi", rolle: "creator", code: "CODE-MODI-0001", eigen: true },
  { name: "Manager", rolle: "manager", code: "CODE-MAN-0001", eigen: false },
]) {
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 860 } });
  const antwort = await ctx.request.post(`http://127.0.0.1:${PORT}/workspace/api/anmelden`, {
    data: { rolle: wer.rolle, code: wer.code },
  });
  ok(antwort.ok(), wer.name + ": die Anmeldung geht durch");

  const seite = await ctx.newPage();
  await seite.goto(`http://127.0.0.1:${PORT}/workspace/aufgaben.html`, { waitUntil: "networkidle" });
  await seite.waitForTimeout(500);

  const titel = await seite.title();
  const zeichen = await seite.evaluate(() =>
    [...document.querySelectorAll('link[rel="icon"], link[rel="apple-touch-icon"]')]
      .map((l) => l.getAttribute("href") || ""));

  if (wer.eigen) {
    ok(/Team Dogi/.test(titel) && !/Spicy/.test(titel),
      wer.name + ': der Reiter heisst "' + titel + '"');
    ok(zeichen.length > 0 && zeichen.every((h) => h.includes("/crew-")),
      wer.name + ": alle " + zeichen.length + " Zeichen sind die eigenen");
    ok(zeichen.every((h) => STEMPEL.test(h)),
      wer.name + ": der Versionsstempel bleibt am Zeichen haengen");
  } else {
    ok(/Spicy/.test(titel) && !/Team Dogi/.test(titel),
      wer.name + ': der Reiter ist unveraendert ("' + titel + '")');
    ok(zeichen.length > 0 && zeichen.every((h) => h.includes("/workspace-")),
      wer.name + ": sein Zeichen ist unveraendert (Gegenprobe)");
  }
  await ctx.close();
}
d.close();

await browser.close();
console.log(`\n${fehler === 0 ? "BESTANDEN" : "FEHLGESCHLAGEN"} -- ${geprueft} geprueft, ${fehler} Fehler`);
process.exit(fehler === 0 ? 0 : 1);