dogfather-universe/server/pruef-breiten.mjs

/* JEDE BILDSCHIRMBREITE — nicht nur Handy und Rechner.

   Auftrag vom 04.09.2026 (vollstaendiger Audit), Abschnitt 4:
   "Smartphone klein, Smartphone gross, Tablet, Laptop, Desktop, grosser
   Desktop, sehr breite Bildschirme."

   WAS BISHER FEHLTE. Der Grosscheck geht ueber alle Seiten und Rollen --
   aber bei genau ZWEI Breiten: 1280 und 390. Dazwischen liegt der
   gesamte Tablet-Bereich, und darunter das kleinste Handy, das es noch
   zu kaufen gibt.

   Das ist kein theoretisches Loch: Umbruchpunkte in diesem Haus liegen
   bei 700, 760, 900 und 1100 px. Ein Layout kann bei 390 und bei 1280
   tadellos sein und bei 768 auseinanderfallen -- genau dort, wo keiner
   der beiden Messpunkte liegt. Ein Fehler in einem Umbruchpunkt zeigt
   sich immer nur in dem Fenster, das ihn trifft.

   GEMESSEN WIRD, WAS MAN SIEHT:
     1. Steht etwas seitlich ueber? (Waagerechtes Scrollen ist auf dem
        Handy der schlimmste Layoutfehler.)
     2. Ist Text abgeschnitten?
     3. Ueberdeckt etwas Bedienbares etwas anderes Bedienbares?
     4. Sind Beruehrziele auf kleinen Schirmen gross genug?

   DIE ANZAHL GEHOERT IN DIE BEDINGUNG: Eine Seite, die nichts enthaelt,
   waere sonst die sauberste von allen.

   GEGENPROBE am Ende: ein absichtlich zu breites Element muss bei jeder
   Breite auffallen. */

import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { heuteLokal } from "./helfer-zeit.mjs";

const ordner = mkdtempSync(join(tmpdir(), "ws-breit-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
/* Der Port muss frei sein -- sonst wird gegen einen fremden Server
   gemessen. Begruendung in helfer-port.mjs. */
const { portMussFreiSein } = await import("./helfer-port.mjs");
await portMussFreiSein(4277, "die Breitenpruefung");

process.env.PORT = "4277";
process.env.SITE_ACCESS_SECRET = "lokaler-test";
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, 900));
const BASIS = "http://127.0.0.1:4277";

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

/* ---- Bestand ------------------------------------------------------------ */
const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
await fetch(BASIS + "/workspace/api/anmelden", {
  method: "POST", headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});
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();
/* ORTSZEIT, nicht UTC -- Begruendung in helfer-zeit.mjs. Mit
   `jetzt.slice(0, 10)` lag dieser Wert zwischen Mitternacht und
   zwei Uhr einen Tag daneben. */
const heute = heuteLokal();
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, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
    .run(name, rolle, hash, salt, 32768, jetzt);
  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
}
const idDogi = anlegen("Filipe Fernandes Ribeiro", "admin", "CODE-DOGI-0001");
const idPat = anlegen("Patrick von Hohenstein", "scout", "CODE-SCOU-0001");
const idLuna = anlegen("SpongBobSchwammKopf", "creator", "CODE-CREA-0001");
d.prepare("INSERT INTO betreuung (creator_id, betreuer_id, seit) VALUES (?,?,?)").run(idLuna, idPat, jetzt);

/* Lange Inhalte ohne Umbruchgelegenheit -- kurze wuerden jeden
   Ueberlauf verstecken. */
const LANG = "Ein absichtlich sehr langer Titel ohne Leerzeichenumbrueche "
  + "damit ein Ueberlauf auffaellt statt sich zu verstecken";
for (const [titel, st] of [[LANG, "offen"], ["Kurz", "arbeit"],
  [LANG + " zwei", "review"], ["Fertig", "erledigt"]]) {
  d.prepare(`INSERT INTO aufgaben (titel, beschreibung, status, prioritaet, frist,
    creator_id, verantwortlich_id, erstellt, erstellt_von) VALUES (?,?,?,'hoch',?,?,?,?,?)`)
    .run(titel, "Eine Beschreibung mit etwas mehr Text darin, damit die Karte Hoehe bekommt.",
         st, heute, idLuna, idPat, jetzt, idDogi);
}
d.prepare(`INSERT INTO termine (titel, art, beginn, dauer_min, ort, creator_id, erstellt, erstellt_von)
  VALUES (?,'call',?,30,'https://meet.example.invalid/ein-sehr-langer-raumname-hier',?,?,?)`)
  .run(LANG, heute + "T10:00", idLuna, jetzt, idDogi);
for (const b of ["live", "community", "technik", "schutz", "content"]) {
  d.prepare(`INSERT INTO eintraege (bereich, art, titel, text, status, dringlichkeit,
    datum, creator_id, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,?,?,?,?)`)
    .run(b, b === "content" ? "idee" : "vorbereitung", LANG, "Text dazu.",
         "offen", "hoch", heute, idLuna, jetzt, idPat);
}
d.prepare(`INSERT INTO leads (name, plattform, handle, status, prioritaet, scout_id, erstellt, naechster_followup)
  VALUES (?, 'tiktok','@einsehrlangername','angesprochen','hoch',?,?,?)`)
  .run(LANG, idPat, jetzt, heute);
d.close();

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

/* Die Breiten aus dem Auftrag, dazu die Umbruchpunkte des Hauses.
   320 ist das kleinste Geraet, das noch vorkommt (iPhone SE 1);
   768 ist das klassische Tablet hochkant und liegt genau zwischen den
   beiden bisher gemessenen Punkten. */
const BREITEN = [
  [320, 568, "Handy klein"],
  [390, 844, "Handy"],
  [430, 932, "Handy gross"],
  [768, 1024, "Tablet hoch"],
  [1024, 768, "Tablet quer"],
  [1280, 900, "Laptop"],
  [1440, 900, "Desktop"],
  [1920, 1080, "Desktop gross"],
  [2560, 1440, "sehr breit"],
];

const SEITEN = [
  "start.html", "uebersicht.html", "aufgaben.html", "kalender.html", "calls.html",
  "dateien.html", "content.html", "bereich.html?b=live", "profil.html",
  "startcheck.html", "report.html", "scouting.html", "personen.html",
  "wissen.html", "automation.html", "steckbrief.html",
];

const messen = () => {
  const sichtbar = (e) => {
    const r = e.getBoundingClientRect();
    if (r.width <= 0 || r.height <= 0) return false;
    const st = getComputedStyle(e);
    return st.visibility !== "hidden" && st.display !== "none" && Number(st.opacity) > 0.05;
  };
  const name = (e) => `${e.tagName}${e.id ? "#" + e.id : ""}`
    + `${e.className && typeof e.className === "string" ? "." + e.className.split(" ")[0] : ""}`;

  const alle = [...document.querySelectorAll("body *")].filter(sichtbar);
  const breite = document.documentElement.clientWidth;

  /* 1. Ueberstand nach rechts. */
  const ueber = Math.max(0, Math.round(document.documentElement.scrollWidth - breite));
  const schuld = alle.filter((e) => {
    const r = e.getBoundingClientRect();
    return r.right > breite + 2 && r.width <= breite * 1.5;
  }).slice(0, 3).map((e) => `${name(e)} bis ${Math.round(e.getBoundingClientRect().right)}px`);

  /* 2. Abgeschnittener Text. Ein Kasten von einem Pixel schneidet
        nichts ab, er versteckt -- der zaehlt nicht. */
  const beschnitten = alle.filter((e) => {
    if (e.children.length > 0) return false;
    const st = getComputedStyle(e);
    if (st.overflow === "visible" && st.overflowX === "visible") return false;
    if (st.textOverflow === "ellipsis") return false;       // gewollt gekuerzt
    if (e.clientWidth < 4 || e.clientHeight < 4) return false;
    if (st.clipPath && st.clipPath !== "none") return false;
    return e.scrollWidth > e.clientWidth + 2 && (e.textContent || "").trim().length > 3;
  }).slice(0, 3).map((e) => `${name(e)} "${(e.textContent || "").trim().slice(0, 20)}"`);

  /* 3. Bedienbares, das WIRKLICH nicht zu erreichen ist.

     Der erste Entwurf fragte nur "liegt etwas darueber?" und meldete
     damit lauter Dinge, die genau so gewollt sind:

       * `.speicher-leiste` auf profil.html ist `position: sticky;
         bottom: 0` -- eine Leiste, die beim Scrollen unten stehen
         bleibt. Dass sie ueber dem Formular liegt, IST ihre Aufgabe.
         Sie wanderte bei acht von neun Breiten in die Fehlerliste.
       * Ein dekoratives SVG mit `pointer-events: none` liegt zwar
         optisch ueber einem Feld, faengt aber keinen einzigen Klick ab.

     Eine Warnung, die bei jedem Lauf kommt, ist keine Warnung mehr --
     sie wird weggeklickt, und mit ihr die echte. Deshalb gilt ein
     Element erst dann als verdeckt, wenn das, was darueber liegt,
     Klicks auch WIRKLICH abfaengt und nicht mitscrollt:
       - kein pointer-events: none
       - nicht sticky/fixed (das ist eine Leiste, kein Hindernis)
     Und geprueft wird der ganze Kasten, nicht nur der Mittelpunkt:
     Wer an einer Ecke noch hinkommt, kommt hin. */
  const bedienbar = alle.filter((e) =>
    ["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(e.tagName) && !e.disabled);
  const verdeckt = [];
  const laesstDurch = (e) => {
    for (let z = e; z && z !== document.body; z = z.parentElement) {
      const st = getComputedStyle(z);
      if (st.pointerEvents === "none") return true;
      if (st.position === "sticky" || st.position === "fixed") return true;
    }
    return false;
  };
  for (const e of bedienbar.slice(0, 60)) {
    const r = e.getBoundingClientRect();
    if (r.bottom < 0 || r.top > window.innerHeight) continue;   // ausserhalb des Fensters
    /* Fuenf Punkte statt einem: Mitte und die vier Viertelpunkte. */
    const punkte = [[0.5, 0.5], [0.25, 0.3], [0.75, 0.3], [0.25, 0.7], [0.75, 0.7]];
    let erreichbar = false;
    let hindernis = null;
    for (const [fx, fy] of punkte) {
      const x = Math.round(r.left + r.width * fx);
      const y = Math.round(r.top + r.height * fy);
      if (x < 0 || y < 0 || x > breite || y > window.innerHeight) continue;
      const oben = document.elementFromPoint(x, y);
      if (!oben || oben === e || e.contains(oben) || oben.contains(e)) { erreichbar = true; break; }
      if (laesstDurch(oben)) { erreichbar = true; break; }
      hindernis = hindernis || name(oben);
    }
    if (!erreichbar && hindernis) {
      verdeckt.push(`${name(e)} unter ${hindernis}`);
      if (verdeckt.length >= 3) break;
    }
  }

  /* 4. Beruehrziele (WCAG 2.5.8: 24x24, Verweise im Fliesstext ausgenommen). */
  const klein = bedienbar.filter((e) => {
    const r = e.getBoundingClientRect();
    if (r.width >= 24 && r.height >= 24) return false;
    const st = getComputedStyle(e);
    if (e.tagName === "A" && st.display.startsWith("inline")) {
      const eltern = (e.parentElement?.textContent || "").trim().length;
      const selbst = (e.textContent || "").trim().length;
      if (eltern > selbst + 12) return false;
    }
    return true;
  }).slice(0, 3).map((e) => {
    const r = e.getBoundingClientRect();
    return `${name(e)} ${Math.round(r.width)}x${Math.round(r.height)}`;
  });

  return {
    elemente: alle.length, bedienbar: bedienbar.length,
    inhalt: (document.body.innerText || "").trim().length,
    ueber, schuld, beschnitten, verdeckt, klein,
  };
};

let seitenGesamt = 0, elementeGesamt = 0;
const probleme = [];

for (const [breite, hoehe, wie] of BREITEN) {
  const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe } });
  const seite = await kontext.newPage();
  const konsole = [];
  seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text().slice(0, 70)); });
  seite.on("pageerror", (e) => konsole.push("pageerror: " + e.message.slice(0, 70)));

  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: 20000 });

  let schlecht = 0;
  const details = [];
  for (const datei of SEITEN) {
    konsole.length = 0;
    await seite.goto(BASIS + "/workspace/" + datei, { waitUntil: "networkidle" });
    await seite.waitForTimeout(320);
    const r = await seite.evaluate(messen);
    seitenGesamt++;
    elementeGesamt += r.elemente;

    const m = [];
    if (r.inhalt < 40) m.push(`fast kein Inhalt (${r.inhalt})`);
    if (r.ueber > 0) m.push(`${r.ueber}px Ueberstand [${r.schuld.join(" | ")}]`);
    if (r.beschnitten.length) m.push(`abgeschnitten: ${r.beschnitten.join(" | ")}`);
    if (r.verdeckt.length) m.push(`verdeckt: ${r.verdeckt.join(" | ")}`);
    if (breite < 700 && r.klein.length) m.push(`Beruehrziel: ${r.klein.join(" | ")}`);
    if (konsole.length) m.push(`Konsole: ${konsole.slice(0, 2).join(" | ")}`);
    if (m.length) { schlecht++; details.push(`      ${datei.padEnd(22)} ${m.join("; ")}`); }
  }
  const gut = schlecht === 0;
  if (!gut) { fehler++; probleme.push(`${wie} (${breite}px)`); }
  console.log(`  ${gut ? "ok  " : "FEHL"} ${wie.padEnd(14)} ${String(breite).padStart(4)}px  `
    + `${SEITEN.length} Seiten` + (gut ? "" : `  — ${schlecht} beanstandet`));
  for (const z of details.slice(0, 6)) console.log(z);
  await kontext.close();
}

console.log(`\n=== Umfang ===`);
ok(seitenGesamt === BREITEN.length * SEITEN.length,
  `${seitenGesamt} Seitenaufrufe (${SEITEN.length} Seiten x ${BREITEN.length} Breiten)`);
ok(elementeGesamt > 20000, `${elementeGesamt} Elemente vermessen`);

/* =======================================================================
   GEGENPROBE
   ======================================================================= */
console.log(`\n=== Gegenprobe (muss anschlagen) ===`);
{
  for (const testBreite of [320, 768, 1920]) {
    const kontext = await browser.newContext({ viewport: { width: testBreite, height: 900 } });
    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: 20000 });
    await seite.waitForTimeout(600);

    const vorher = await seite.evaluate(messen);
    ok(vorher.ueber === 0, `${testBreite}px: die Startseite steht nicht ueber (${vorher.ueber}px)`);

    const nachher = await seite.evaluate(() => {
      const k = document.createElement("div");
      k.style.cssText = "width:3000px;height:30px;background:#333";
      k.textContent = "absichtlich zu breit";
      document.body.append(k);
      const t = document.createElement("div");
      t.style.cssText = "width:40px;overflow:hidden;white-space:nowrap";
      t.textContent = "Dieses Wort passt hier nicht hinein";
      document.body.append(t);
      return true;
    });
    await seite.waitForTimeout(220);
    const r = await seite.evaluate(messen);
    ok(nachher && r.ueber > 0, `${testBreite}px: zu breites Element wird gefunden (${r.ueber}px Ueberstand)`);
    ok(r.beschnitten.length > 0, `${testBreite}px: abgeschnittener Text wird gefunden`);

    /* Der Verdeckt-Test wurde entschaerft (sticky-Leisten und
       pointer-events:none zaehlen nicht mehr). Ohne diesen Beweis
       wuesste niemand, ob er danach ueberhaupt noch etwas findet --
       "0 verdeckte Elemente" waere sonst genauso gut ein stiller
       Ausfall. Ein echtes Hindernis MUSS auffallen. */
    await seite.evaluate(() => {
      const ziel = document.querySelector("button, a[href]");
      if (!ziel) return;
      const r2 = ziel.getBoundingClientRect();
      const deckel = document.createElement("div");
      deckel.style.cssText = `position:absolute; left:${r2.left + window.scrollX}px;`
        + `top:${r2.top + window.scrollY}px; width:${Math.max(r2.width, 30)}px;`
        + `height:${Math.max(r2.height, 30)}px; background:#900; z-index:99999;`
        + "pointer-events:auto;";
      deckel.id = "deckel-test";
      document.body.append(deckel);
    });
    await seite.waitForTimeout(220);
    const v = await seite.evaluate(messen);
    ok(v.verdeckt.length > 0,
      `${testBreite}px: ein echtes Hindernis wird gefunden (${v.verdeckt.join(" | ") || "nichts"})`);
    await kontext.close();
  }
}

await browser.close();
console.log(`\n${fehler === 0 ? "ALLES IN ORDNUNG" : `${fehler} FEHLER`}`
  + (probleme.length ? ` — ${probleme.join(", ")}` : ""));
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
process.exit(fehler ? 1 : 0);