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");
process.env.PORT = "4373";
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";

import { notbremse } from "./helfer-notbremse.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 },
    deviceScaleFactor: 1,
  });
  const seite = await ctx.newPage();
  const meldungen = [];
  seite.on("console", (m) => { if (m.type() === "error") meldungen.push(m.text()); });

  const adresse = geraet.alt
    ? "http://127.0.0.1:4373/workspace/index.html"
    : "http://127.0.0.1:4373/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 {
    ok(/Team Dogi/.test(titel), `${geraet.name}: der Reiter heisst "${titel}"`);
    ok(kacheln === 0, `${geraet.name}: keine Rollenkacheln (${kacheln})`);
  }

  /* 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:4373/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:4373/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);