dogfather-universe/server/pruef-kopf-messen.mjs

/* Misst die einzelnen Teile der Kopfleiste auf dem Handy -- damit eine
   Reparatur an der richtigen Stelle ansetzt und nicht geraten wird.

   SIE PRUEFT SEIT DEM 01.09.2026 AUCH, statt nur zu messen.

   Vorher war sie ein reines Messwerkzeug: Sie druckte Zahlen und endete
   IMMER mit Exitcode 0. Damit stand sie als "pruef-..." im Ordner der
   Pruefungen, lief bei jedem Gesamtlauf mit, meldete "in Ordnung" --
   und konnte gar nicht fehlschlagen. Aufgefallen ist das erst, als der
   Gesamtlauf die ANZAHL der Einzelpruefungen mitzaehlte: Diese Datei
   kam auf null.

   Eine Pruefung, die immer bestaetigt, bestaetigt nichts. Die beiden
   Zahlen, um die es geht, wurden laengst gemessen -- sie werden jetzt
   auch beurteilt:
     UEBERSTAND          muss 0 sein (waagerechtes Scrollen ist auf
                         einem Handy der schlimmste Fehler)
     ABMELDEN ERREICHBAR muss wahr sein -- es ist der einzige Weg wieder
                         heraus; liegt er ausserhalb des Bildes, sitzt
                         man fest.
   Die Messwerte werden weiterhin gedruckt: Sie sagen bei einem
   Fehlschlag sofort, WELCHES Teil zu breit ist. */
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";

const ordner = mkdtempSync(join(tmpdir(), "ws-messen-"));
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-kopf-messen");
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 ec = express.response.cookie;
express.response.cookie = function (n, w, o) { return ec.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-kopf-messen");
await new Promise((r) => setTimeout(r, 700));
const BASIS = `http://127.0.0.1:${PORT}`;

let fehler = 0;
let geprueft = 0;
setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 120_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");
/* Bewusst ein langer Name -- kurze Namen wuerden den Fehler verstecken. */
d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
  .run("Filipe Fernandes Ribeiro", "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();

/** Warten, bis die Kopfleiste FERTIG ist -- und zwar auf Stabilitaet,
 *  nicht auf einen Inhalt.
 *
 *  ZWEI FEHLVERSUCHE, beide lehrreich:
 *
 *  `waitForTimeout(300)` mass einen Zwischenstand -- kopf.js haengt
 *  Teile erst nach der Antwort von `/api/ich` ein und hat ein Netz, das
 *  nach 1200 ms nachholt. Die Gegenprobe blieb dadurch gruen, obwohl
 *  der Fehler wieder eingebaut war.
 *
 *  Der zweite Versuch wartete darauf, dass `#wer` Text hat. Das war
 *  SOFORT wahr: Im HTML steht dort `…` als Platzhalter. Eine Bedingung,
 *  die von Anfang an erfuellt ist, wartet auf nichts -- derselbe Fehler
 *  wie ein `every()` auf einem leeren Feld.
 *
 *  Jetzt wird gewartet, bis sich die Zahl der Teile zweimal
 *  hintereinander nicht mehr aendert. Das braucht keine Kenntnis
 *  darueber, WIE VIELE Teile richtig sind -- und bleibt richtig, wenn
 *  morgen ein Knopf dazukommt. */
async function leisteFertig(seite, frist = 9000) {
  /* ERST AB HIER ZAEHLT "STABIL" -- dritter und letzter Fehlversuch.
     Ohne diese Zeile war die Leiste nach 0 ms und nach 500 ms gleich
     gross und galt damit als fertig. "Stabil" hiess dann nur "es ist
     noch nichts passiert": Das Netz in kopf.js greift erst bei
     1200 ms, und teilen.html holt `/api/ich` nicht selbst.
     Die 1500 sind keine geratene Zahl, sondern die 1200 aus kopf.js
     plus Luft. Aendert sich sie dort, gehoert sie hier nachgezogen --
     deshalb steht sie nicht nackt da, sondern mit ihrer Herkunft. */
  await seite.waitForTimeout(1500);
  const bis = Date.now() + frist;
  let vorher = -1;
  while (Date.now() < bis) {
    const n = await seite.evaluate(
      () => document.querySelector(".kopfleiste__rechts")?.children.length ?? -1);
    if (n > 0 && n === vorher) return n;
    vorher = n;
    await seite.waitForTimeout(500);
  }
  return vorher;
}

/* WELCHE SEITEN (17.09.2026).

   Bis heute wurde NUR uebersicht.html gemessen -- und genau deshalb
   blieb der Fehler unsichtbar, ueber den Filipe gestolpert ist: Der
   Teilen-Knopf war doppelt so hoch wie seine Nachbarn, aber nur auf den
   drei Seiten, die bereich.css laden. uebersicht.html gehoert nicht
   dazu.

   Eine Kopfleiste, die auf einer Seite gemessen wird, ist auf einer
   Seite gemessen. Die Leiste steht auf allen. Deshalb jetzt: die
   Kontrollseite von frueher PLUS die zwei, die zusaetzliche
   Gestaltungsdateien laden -- dort entstehen Konflikte, nirgends
   sonst. */
/* DREI KAMEN AM 23.09.2026 DAZU. Auf ihnen wanderte die Kopfleiste
   beim Scrollen aus dem Bild, auf den drei darueber nicht -- der
   Unterschied war ein Farbton, den kopf.js erst nach dem Laden setzt.
   Wer nur die alten drei misst, sieht so etwas nie.

   aufgaben.html und wissen.html tragen einen Ton, chat.html ebenso;
   entwicklung.html steht als Gegenprobe dabei (kein Ton) -- sonst
   hiesse "alle kleben" nur, dass die Regel fuer den einen Fall
   stimmt. */
const SEITEN = ["uebersicht.html", "teilen.html", "bewerben.html",
  "aufgaben.html", "wissen.html", "entwicklung.html"];

/* UND EINE BREITE ANSICHT (17.09.2026).

   Filipes Bildschirmfoto war KEIN Handy -- die Leiste war rund 1366 px
   breit. Unterhalb von 720 px versteckt gate.css das Wort "Teilen" und
   laesst nur das Zeichen stehen; der Knopf bleibt dort klein, auch mit
   einer falschen Anordnung. Eine Pruefung, die nur Handybreiten misst,
   waere also gruen gewesen und blind fuer genau den gemeldeten Fall.

   Die drei schmalen Breiten bleiben: Dort ist der Platz knapp, und
   dort ist die Leiste im September schon einmal zerbrochen. */
for (const breite of [320, 390, 430, 1366]) {
  const kontext = await browser.newContext({ viewport: { width: breite, height: 844 } });
  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 });

 for (const wo of SEITEN) {
  await seite.goto(BASIS + "/workspace/" + wo, { waitUntil: "networkidle" });
  /* WARTEN AUF EINE BEDINGUNG, NICHT AUF EINE ZAHL (17.09.2026).

     Hier stand `waitForTimeout(300)`, und das hat die Pruefung
     wertlos gemacht: kopf.js haengt Teile der Leiste erst ein, wenn
     `/api/ich` beantwortet ist -- und hat ein Netz, das nach 1200 ms
     nachholt, falls die Seite selbst nicht fragt. Nach 300 ms war die
     Leiste also halb leer, und gemessen wurde ein Zwischenstand.

     Bewiesen an der Gegenprobe: Der echte Fehler wurde absichtlich
     wieder eingebaut, und die Pruefung blieb GRUEN -- sie hatte den
     kaputten Knopf schlicht noch nicht gesehen. Eine Pruefung, die zu
     frueh hinsieht, bestaetigt nur, dass noch nichts da war. */
  await leisteFertig(seite);

  /* ---- FAELLT EIN TEIL AUS DER REIHE? ----------------------------------

     Das ist die Messung, die Filipes Beschwerde entspricht. Nicht
     "ist es 38 px hoch" -- eine feste Zahl waere die Rechnung von
     gestern und muesste bei jedem neuen Knopf nachgezogen werden.
     Sondern: Verhaelt sich EIN Teil anders als die anderen?

     Verglichen wird gegen den Mittelwert der Nachbarn. Der waechst
     mit, wenn die Leiste insgesamt groesser wird, und schlaegt an,
     sobald ein einzelnes Element ausbricht -- unabhaengig davon,
     welche Zahl gerade richtig ist. */
  const reihe = await seite.evaluate(() => {
    const teile = [...(document.querySelector(".kopfleiste__rechts")?.children || [])]
      .map((e) => ({
        was: (e.id || String(e.className).split(" ")[0] || e.tagName).slice(0, 24),
        hoehe: Math.round(e.getBoundingClientRect().height),
      }))
      .filter((x) => x.hoehe > 0);
    if (teile.length < 3) return { teile, schnitt: 0, ausreisser: [] };
    const schnitt = teile.reduce((n, x) => n + x.hoehe, 0) / teile.length;
    return {
      teile, schnitt: Math.round(schnitt),
      ausreisser: teile.filter((x) => x.hoehe > schnitt * 1.6),
    };
  });
  /* ---- BLEIBT SIE BEIM SCROLLEN STEHEN? -------------------------------

     Filipe, 23.09.2026: "die leiste soll immer da fest stehen bleiben
     auch wenn man runterscrollt, sonnst muss man immer wieder hoch
     scrollen um zurueck zu koennen oder so."

     Sie stand damals auf der Haelfte der Seiten -- und auf der anderen
     nicht. Im Quelltext war das nicht zu sehen: Beide Seiten laden
     dasselbe CSS, und die Regel, die es kaputt machte, greift erst,
     wenn kopf.js ein "data-ton" an den Body haengt. Der Unterschied
     entsteht also nach dem Laden.

     GEMESSEN WIRD DAS VERHALTEN, NICHT DIE EIGENSCHAFT. "position ist
     sticky" waere die leichtere Frage und die falsche: Eine klebende
     Leiste in einem Kasten, der selbst scrollt, hat auch position
     sticky -- und wandert trotzdem weg. Gefragt wird deshalb, wo die
     Leiste NACH dem Scrollen steht.

     Und nur dort, wo ueberhaupt gescrollt werden KANN: Auf einer
     kurzen Seite bewegt sich nichts, und "sie ist noch oben" waere
     dann kein Beweis, sondern eine Selbstverstaendlichkeit. Das ist
     der dritte Ausgang -- nicht gut, nicht schlecht, sondern nicht
     nachsehbar. */
  const kleben = await seite.evaluate(async () => {
    const k = document.querySelector(".kopfleiste");
    if (!k) return { fehlt: true };
    const hoch = document.documentElement.scrollHeight - window.innerHeight;
    if (hoch < 120) return { zuKurz: true, hoch };
    window.scrollTo(0, Math.min(600, hoch));
    await new Promise((r) => setTimeout(r, 250));
    const y = Math.round(k.getBoundingClientRect().top);
    const gescrollt = Math.round(window.scrollY);
    window.scrollTo(0, 0);
    await new Promise((r) => setTimeout(r, 150));
    return { y, gescrollt, position: getComputedStyle(k).position };
  });
  if (kleben.fehlt) {
    geprueft++; fehler++;
    console.log("  FEHL " + breite + "px " + wo + ": gar keine Kopfleiste");
  } else if (kleben.zuKurz) {
    console.log("  --   " + breite + "px " + wo + ": Seite zu kurz zum Scrollen ("
      + kleben.hoch + "px) -- nicht nachsehbar");
  } else {
    geprueft++;
    /* Zwei Bildpunkte Spielraum: Unterpixel-Rundung beim Zoomen. */
    const bleibt = kleben.y >= -2 && kleben.y <= 2;
    if (!bleibt) fehler++;
    console.log("  " + (bleibt ? "ok  " : "FEHL") + " " + breite + "px " + wo
      + ": nach " + kleben.gescrollt + "px Scrollen steht die Leiste bei y="
      + kleben.y + " (position: " + kleben.position + ")"
      + (bleibt ? "" : " -- sie wandert mit"));
  }

  geprueft++;
  if (reihe.ausreisser.length) {
    fehler++;
    console.log(`  FEHL ${breite}px ${wo}: ${reihe.ausreisser
      .map((x) => `${x.was} ist ${x.hoehe}px`).join(", ")} `
      + `-- die anderen im Schnitt ${reihe.schnitt}px`);
    for (const x of reihe.teile) console.log(`         ${x.was.padEnd(24)} h=${x.hoehe}`);
  } else if (reihe.teile.length < 3) {
    console.log(`  --   ${breite}px ${wo}: nur ${reihe.teile.length} Teile `
      + "-- zu wenig zum Vergleichen");
  } else {
    console.log(`  ok   ${breite}px ${wo}: ${reihe.teile.length} Teile, `
      + `keines faellt aus der Reihe (Schnitt ${reihe.schnitt}px)`);
  }

  /* EIN BILD VON DER BREITEN ANSICHT. Die Zahlen sagen, DASS nichts
     aus der Reihe faellt; ob die Leiste gut AUSSIEHT, sagt nur ein
     Blick. Genau so ist dieser Fehler gemeldet worden -- mit einem
     Bildschirmfoto, nicht mit einer Messung. */
  if (breite === 1366 && wo === "teilen.html") {
    await seite.screenshot({ path: "server/pruef-kopf-leiste.png",
      clip: { x: 0, y: 0, width: 1366, height: 120 } });
  }
 }

  await seite.goto(BASIS + "/workspace/uebersicht.html", { waitUntil: "networkidle" });
  await seite.waitForTimeout(300);
  const r = await seite.evaluate(() => {
    const k = document.querySelector(".kopfleiste");
    const teil = (e) => ({
      was: (e.tagName + "." + String(e.className).split(" ")[0]).slice(0, 34),
      breite: Math.round(e.getBoundingClientRect().width),
      rechts: Math.round(e.getBoundingClientRect().right),
    });
    return {
      fenster: window.innerWidth,
      ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth,
      kinder: [...k.children].map(teil),
      rechtsKinder: [...(k.querySelector(".kopfleiste__rechts")?.children || [])].map(teil),
      abmeldenSichtbar: (() => {
        const a = document.querySelector(".abmelden")?.getBoundingClientRect();
        return a ? a.right <= window.innerWidth : null;
      })(),
    };
  });
  /* Erst beurteilen, dann drucken -- die Messwerte darunter sind die
     Begründung, falls es schiefgeht. */
  geprueft++;
  const gut = r.ueber <= 0 && r.abmeldenSichtbar === true;
  if (!gut) fehler++;
  console.log(`  ${gut ? "ok  " : "FEHL"} ${breite}px: Überstand ${r.ueber}px, `
    + `Abmelden erreichbar: ${r.abmeldenSichtbar}`);
  for (const t of r.kinder) console.log(`   ${t.was.padEnd(34)} b=${String(t.breite).padStart(4)} rechts=${t.rechts}`);
  console.log("   darin:");
  for (const t of r.rechtsKinder) console.log(`     ${t.was.padEnd(32)} b=${String(t.breite).padStart(4)} rechts=${t.rechts}`);
  await kontext.close();
}
await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch {}
/* Die Anzahl gehoert in die BEDINGUNG, nicht nur in den Meldetext:
   Waere die Schleife nie gelaufen, waere "0 Fehler" sonst ein Erfolg. */
console.log(`
${geprueft} Breiten gemessen, ${fehler} beanstandet.`);
if (!geprueft) { console.log("  FEHL keine einzige Breite gemessen"); fehler++; }
console.log(fehler ? "NICHT in Ordnung." : "Alles in Ordnung.");
process.exit(fehler ? 1 : 0);