dogfather-universe/server/pruef-formulare.mjs

/* Prueft die Formularzeilen auf allen Seiten.

   Beanstandet am 01.09.2026: "das sieht scheisse aus, so verzogen".
   Gemeint war die Zeile im Kalender -- "Art" schmal, "Beginn" breit,
   "Dauer (Minuten)" zweizeilig umgebrochen, alle Felder auf
   verschiedenen Hoehen.

   Ursache war eine Regel, die nur fuer Kinder mit der Klasse .feld galt.
   Der Kalender benutzt schlichte <div> ohne Klasse; die fielen hindurch,
   bekamen von zwoelf Rasterspalten je EINE und wurden nur so breit, wie
   ihr Inhalt sie zwang.

   Geprueft wird deshalb nicht "sieht gut aus", sondern messbar:
     * alle Eingabefelder einer Zeile gleich hoch
     * ihre Unterkanten auf einer Linie (sonst haengt eines tiefer)
     * kein Feld absurd schmal
     * keine Beschriftung mehrzeilig */
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";

const ordner = mkdtempSync(join(tmpdir(), "ws-form-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
process.env.PORT = "4203";
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:4203";
setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 250_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 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, new Date().toISOString());
/* EIN CREATOR MUSS DA SEIN. Ohne ihn bauen profil.html und
   startcheck.html ihr Formular gar nicht erst auf -- die Pruefung findet
   dort null Felder und meldet "in Ordnung", ohne ein einziges angesehen
   zu haben. Genau deshalb steht die Anzahl in der Bedingung. */
const salt2 = randomBytes(16).toString("hex");
const hash2 = scryptSync("CODE-ANNA-0001", salt2, 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("Tili", "creator", hash2, salt2, 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();

/* Seite, Knopf zum Aufklappen des Formulars. */
const FORMULARE = [
  ["kalender.html", "#neu-oeffnen"],
  ["aufgaben.html", "#neu-oeffnen"],
  ["personen.html", "#neu-oeffnen"],
  ["bereich.html?b=live", "#neu-oeffnen"],
  ["scouting.html", "#neu-oeffnen"],
];

for (const [breite, wie] of [[1280, "Computer"], [390, "Handy"]]) {
  console.log(`\n=== ${wie} (${breite}px)`);
  const kontext = await browser.newContext({ viewport: { width: breite, height: 1000 } });
  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 [s, knopf] of FORMULARE) {
    await seite.goto(BASIS + "/workspace/" + s, { waitUntil: "networkidle" });
    await seite.waitForTimeout(700);
    const da = await seite.locator(knopf).count();
    if (!da) { console.log(`  --   ${s}: kein Formularknopf`); continue; }
    await seite.click(knopf).catch(() => {});
    await seite.waitForTimeout(450);

    const r = await seite.evaluate(() => {
      const raster = document.querySelector(".neu__raster");
      if (!raster) return null;
      const felder = [...raster.children].filter((k) => k.offsetParent !== null);
      const eingaben = felder
        .map((f) => f.querySelector("input, select, textarea"))
        .filter(Boolean)
        .map((e) => e.getBoundingClientRect());
      const schilder = felder
        .map((f) => f.querySelector(".feld-schild"))
        .filter(Boolean);
      /* Mehrzeilige Beschriftung: tatsaechliche Hoehe gegen eine Zeile. */
      const mehrzeilig = schilder.filter((s2) => {
        const zeile = parseFloat(getComputedStyle(s2).lineHeight) || 16;
        return s2.getBoundingClientRect().height > zeile * 1.6;
      }).map((s2) => s2.textContent.trim());
      return {
        anzahl: eingaben.length,
        hoehen: eingaben.map((e) => Math.round(e.height)),
        /* Auf 3 px genau zusammengefasst: Unterkanten liegen durch
           Teilpixel-Rundung selten exakt gleich, obwohl sie auf einer
           Linie sitzen. Ein erster Anlauf meldete deshalb "3 Unterkanten"
           bei drei Feldern derselben Reihe -- ein Messfehler, kein
           Gestaltungsfehler. */
        unterkanten: eingaben.map((e) => Math.round(e.bottom / 3) * 3),
        breiten: eingaben.map((e) => Math.round(e.width)),
        einzeln: felder.map((f) => { const e=f.querySelector("input, select, textarea"); if(!e) return null; const r2=e.getBoundingClientRect(); const fr=f.getBoundingClientRect(); return { id:e.id, tag:e.tagName, top:Math.round(r2.top), bottom:Math.round(r2.bottom), h:Math.round(r2.height), feldTop:Math.round(fr.top), feldH:Math.round(fr.height) }; }).filter(Boolean),
        mehrzeilig,
      };
    });

    if (!r || r.anzahl < 2) { console.log(`  --   ${s}: kein Raster mit mehreren Feldern`); continue; }

    const hoehenGleich = new Set(r.hoehen).size === 1;
    /* Unterkanten auf einer Linie -- auf dem Handy stehen die Felder
       untereinander, dort gilt das natuerlich nicht. */
    const reihen = new Set(r.unterkanten).size;
    const buendig = breite < 700 ? true : reihen <= Math.ceil(r.anzahl / 3);
    const nichtWinzig = Math.min(...r.breiten) >= 90;

    const gut = hoehenGleich && buendig && nichtWinzig && !r.mehrzeilig.length;
    if (!gut) fehler++;
    console.log(`  ${gut ? "ok  " : "FEHL"} ${String(s).padEnd(20)}`
      + `${r.anzahl} Felder  Höhen=${[...new Set(r.hoehen)].join("/")}  `
      + `Breiten=${Math.min(...r.breiten)}–${Math.max(...r.breiten)}`
      + (hoehenGleich ? "" : "  UNGLEICH HOCH")
      + (buendig ? "" : `  NICHT BÜNDIG (Unterkanten ${r.unterkanten.join(",")})`)
      + (nichtWinzig ? "" : "  ZU SCHMAL")
      + (r.mehrzeilig.length ? `  MEHRZEILIG: ${r.mehrzeilig.join(", ")}` : "")
      + (gut ? "" : "  |  " + r.einzeln.map((e) => `${e.id}(${e.tag}) Feld:${e.feldTop}+${e.feldH} Eingabe:${e.top}..${e.bottom}`).join("  ")));
  }
  await kontext.close();
}

/* =====================================================================
   KEIN FELD OHNE GESTALTUNG (01.09.2026)

   Der gemeldete Fehler: Das Feld "Ein Satz ueber dich" stand als grauer
   Kasten in Monospace da, direkt neben gestalteten Feldern. Die Ursache
   war ein Loch im Aufbau -- jede Seite gestaltete ihre Felder mit einem
   EIGENEN Selektor (.gruppe textarea, .neu input, ...), und wer ein Feld
   irgendwo anders hinsetzt, faellt durch alle Netze.

   Ein Loch im Aufbau schliesst man nicht mit Hinsehen: Das naechste neue
   Feld faellt an einer anderen Stelle durch. Diese Pruefung geht deshalb
   ueber JEDES sichtbare Feld auf JEDER Seite und misst, was der Browser
   tatsaechlich zeichnet.

   Die Merkmale sind genau die, die im gemeldeten Fall fehlten:
     RAHMEN     ohne Rand ist ein Feld im dunklen Entwurf nicht zu sehen
     ECKEN      eckig heisst: der Browser hat gezeichnet, nicht wir
     SCHRIFT    <textarea> faellt ohne `font: inherit` auf Monospace
   ===================================================================== */
console.log("\n=== Kein Feld ohne Gestaltung");
{
  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 });

  let gesamt = 0;
  for (const pfad of ["steckbrief.html", "profil.html", "aufgaben.html", "kalender.html",
                      "dateien.html", "bereich.html?b=live", "content.html",
                      "personen.html", "startcheck.html", "report.html"]) {
    await seite.goto(BASIS + "/workspace/" + pfad, { waitUntil: "networkidle" });
    await seite.waitForTimeout(900);
    /* Zugeklappte Formulare aufmachen -- sonst pruefen wir genau die
       Felder nicht, die selten jemand sieht und die deshalb ungestaltet
       bleiben. */
    for (const w of ["#neu-oeffnen", "#neu-auf", "#anlegen-auf"]) {
      try { await seite.click(w, { timeout: 500 }); } catch { /* gibt es hier nicht */ }
    }
    await seite.waitForTimeout(400);

    const r = await seite.evaluate(() => {
      const felder = [...document.querySelectorAll(
        '.inhalt input:not([type=file]):not([type=checkbox]):not([type=radio]), '
        + '.inhalt textarea, .inhalt select')]
        .filter((e) => e.getBoundingClientRect().width > 0);
      const schlecht = [];
      for (const e of felder) {
        const st = getComputedStyle(e);
        /* MANCHE FELDER HOLEN IHREN RAHMEN VOM UMSCHLAG, und das ist
           richtig so: Bei den Kanaelen steht ein festes "@" vor dem Feld,
           beide zusammen liegen in einem gemeinsamen Rahmen. Das Feld
           selbst hat dort absichtlich keinen -- zwei Rahmen ineinander
           saehen aus wie ein Fehler.

           Der erste Anlauf dieser Pruefung meldete genau diese vier als
           kaputt. Sie war damit eine Pruefung, die Richtiges anmahnt --
           und die gewoehnt man sich ab zu lesen. Gemessen wird deshalb
           der RAHMEN, der um das Feld herum tatsaechlich sichtbar ist,
           egal ob er am Feld selbst oder am Umschlag haengt. */
        const umschlag = e.parentElement;
        const us = umschlag ? getComputedStyle(umschlag) : null;
        const rahmenAmUmschlag = !!us && parseFloat(us.borderTopWidth) >= 1
          && parseFloat(us.borderTopLeftRadius) >= 4;
        const grund = [];
        if (!rahmenAmUmschlag) {
          if (parseFloat(st.borderTopWidth) < 1) grund.push("kein Rand");
          if (parseFloat(st.borderTopLeftRadius) < 4) grund.push("eckig");
          if (parseFloat(st.paddingLeft) < 6) grund.push("keine Polsterung");
        }
        /* Die Schrift gilt IMMER -- ein Umschlag kann sie nicht liefern. */
        if (/mono|courier/i.test(st.fontFamily)) grund.push("Monospace");
        if (parseFloat(st.fontSize) < 12) grund.push("Schrift " + st.fontSize);
        if (grund.length) schlecht.push((e.id || e.tagName) + " – " + grund.join(", "));
      }
      return { anzahl: felder.length, schlecht };
    });
    gesamt += r.anzahl;
    /* DIE ANZAHL GEHOERT IN DIE BEDINGUNG, nicht nur in den Meldetext:
       Eine Seite ohne gefundene Felder waere sonst "in Ordnung". */
    const gut = r.anzahl > 0 && r.schlecht.length === 0;
    if (!gut) fehler++;
    console.log(`  ${gut ? "ok  " : "FEHL"} ${pfad.padEnd(22)}${r.anzahl} Felder`
      + (r.schlecht.length ? "  ->  " + r.schlecht.join(" | ")
         : (r.anzahl ? "" : "  KEIN FELD GEFUNDEN – die Pruefung hat nichts geprueft")));
  }
  ok(gesamt >= 40, `insgesamt ${gesamt} Felder gemessen`);

  /* GEGENPROBE: Kann diese Pruefung ueberhaupt anschlagen? Ein Feld wird
     absichtlich auf den Rohzustand des Browsers zurueckgesetzt -- sie MUSS
     es melden. Ohne diesen Nachweis waere sie eine Pruefung, die immer
     bestaetigt, und die bestaetigt nichts. */
  await seite.goto(BASIS + "/workspace/steckbrief.html", { waitUntil: "networkidle" });
  await seite.waitForTimeout(900);
  const gegen = await seite.evaluate(() => {
    const e = document.getElementById("sb-ueber");
    const vorher = getComputedStyle(e);
    const gut = parseFloat(vorher.borderTopLeftRadius) >= 4
      && !/mono|courier/i.test(vorher.fontFamily);
    e.style.all = "revert";
    const st = getComputedStyle(e);
    return {
      vorherGut: gut,
      ecken: parseFloat(st.borderTopLeftRadius),
      schrift: st.fontFamily,
      erkannt: parseFloat(st.borderTopLeftRadius) < 4 || /mono|courier/i.test(st.fontFamily),
    };
  });
  ok(gegen.vorherGut === true,
     "das gemeldete Feld 'Ein Satz ueber dich' ist gestaltet (runde Ecken, keine Monospace)");
  ok(gegen.erkannt === true,
     `Gegenprobe: ein zurueckgesetztes Feld wird erkannt `
     + `(Ecken ${gegen.ecken}px, Schrift ${gegen.schrift})`);

  await seite.goto(BASIS + "/workspace/steckbrief.html", { waitUntil: "networkidle" });
  await seite.waitForTimeout(900);
  await seite.screenshot({ path: "pruef-felder.png", fullPage: false });
  await kontext.close();
}

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