dogfather-universe/server/bild-kampagne.mjs

/* Bild und Mass des Kastens „Kampagne aus einer Einladung" (07.10.2026)

   Etappe 4 des Bauplans. Die Zahlen sind gruen (pruef-kampagne, 94
   Pruefungen) -- das sagt, dass der Weg stimmt, aber nicht, wie es
   AUSSIEHT und ob man es mit dem Daumen treffen kann.

   GEMESSEN WIRD AUF 412 UND 1280 PIXEL. Das sind nicht zwei beliebige
   Breiten: An genau diesen beiden ist die Kopfleiste dieses Hauses am
   06.09.2026 zweimal an einem Tag gebrochen -- 412 px ist die
   haeufigste Android-Breite, 1280 px die schmalste, auf der die Seite
   als „Rechner" gilt. Wer nur bei 1400 nachsieht, sieht beides nicht.

   UND AUGENSCHONUNG WIRD GEMESSEN, NICHT ANGENOMMEN: Kontrast des
   Hinweistextes, und dass bei `prefers-reduced-motion` keine Bewegung
   laeuft.

   Aufrufen mit:  node server/bild-kampagne.mjs
*/
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { notbremse } from "./helfer-notbremse.mjs";
notbremse(240_000, "bild-kampagne");

const ordner = mkdtempSync(join(tmpdir(), "ws-kmpbild-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
const { portMussFreiSein } = await import("./helfer-port.mjs");
const PORT = await portMussFreiSein(4338, "das Bildwerkzeug Kampagne");
process.env.PORT = String(PORT);
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, 1200));
/* WARUM HIER 127.0.0.1 STEHT UND NICHT DIE AGENTURWAND
   (gemessen und wieder zurueckgebaut, 07.10.2026).

   Versucht wurde beides. Der Host-Kopf laesst sich in Chromium
   nicht ueberschreiben (gemessen: /api/ich meldete weiter
   `darf: false`, der Wirt blieb "127.0.0.1"), und laesst man den
   Namen wirklich aufloesen, kommt die Anmeldemaske der echten Wand
   -- mit einer Tuer davor, die dieses Werkzeug nicht aufmachen
   soll. Gemessen werden soll die KACHEL, nicht der Zugang.

   Deshalb bleibt es bei der Pruefadresse. Dort vergibt
   `sitzungLesen` bewusst KEIN Haus (24.09.2026), und `/api/ich`
   fragt genau deshalb `haus !== "crew"` statt `=== "agentur"`:
   Der Kasten ist hier sichtbar und damit messbar.

   Dass er auf der CREW-Adresse verschwindet, misst
   pruef-kampagne mit echten Host-Koepfen -- das geht ohne
   Browser und ist dort besser aufgehoben. */const BASIS = `http://127.0.0.1:${PORT}`;

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 j = new Date().toISOString();
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, j);
  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
}
anlegen("Filipe", "admin", "CODE-DOGI-0001");
anlegen("Luna", "creator", "CODE-CREA-0001");
d.close();

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


const anmelden = async (seite, rolle, code) => {
  await seite.goto(BASIS + "/workspace/", { waitUntil: "networkidle" });
  await seite.click(`.rolle[data-rolle="${rolle}"]`);
  await seite.fill("#code", code);
  /* DEN KNOPF DIREKT AUSLOESEN, nicht ueber die Maus.

     page.click wartet darauf, dass das Element "visible, enabled and
     stable" ist -- und auf der echten Agenturwand lief es dort in die
     30-Sekunden-Frist. Die Anmeldeseite bewegt sich dauerhaft (die
     Buehne atmet), also wird "stable" nie erreicht. Auf 127.0.0.1 war
     das nie aufgefallen, weil dort eine andere Szene laeuft.

     Gemessen wird hier die KACHEL, nicht die Anmeldemaske -- der
     direkte Klick ist deshalb kein Umgehen einer Pruefung, sondern
     der Weg zum eigentlichen Messgegenstand. */
  await seite.$eval("button[type=submit]", (b) => b.click());
  await seite.waitForURL("**/start.html", { timeout: 25000 });
};

/** Der Kontrast zweier Farben nach WCAG. Gerechnet, nicht geschaetzt. */
const leuchte = ([r, g, b]) => {
  const f = (c) => { const x = c / 255; return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4; };
  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
};
const kontrast = (a, b) => {
  const [x, y] = [leuchte(a), leuchte(b)].sort((p, q) => q - p);
  return (x + 0.05) / (y + 0.05);
};
const farbe = (s) => {
  const m = /rgba?\(([^)]+)\)/.exec(s || "");
  if (!m) return null;
  const t = m[1].split(",").map((x) => parseFloat(x));
  return [t[0], t[1], t[2]];
};

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

async function messen(breite, hoehe, name) {
  const ctx = await browser.newContext({
    viewport: { width: breite, height: hoehe },
    deviceScaleFactor: 2,
    hasTouch: breite < 700, isMobile: breite < 700,
  });
  const seite = await ctx.newPage();
  seite.on("console", (m) => { if (m.type() === "error") fehlerAufSeite.push(m.text()); });
  seite.on("pageerror", (f) => fehlerAufSeite.push(String(f)));
  await anmelden(seite, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1600);

  console.log(`\n=== ${name} (${breite} px) ===`);
  const ichSagt = await seite.evaluate(async () => {
    const a = await fetch("/workspace/api/ich", { credentials: "same-origin" });
    const j = await a.json().catch(() => ({}));
    return { rolle: j.rolle, darf: j.darf_kampagne_einlesen, wirt: location.host };
  });
  console.log("  /api/ich: " + JSON.stringify(ichSagt));
  const mass = await seite.evaluate(() => {
    const k = document.getElementById("kampagneholen");
    if (!k || k.hidden) return { da: false };
    const r = (e) => { const b = e.getBoundingClientRect();
      return { x: Math.round(b.x), y: Math.round(b.y),
        b: Math.round(b.width), h: Math.round(b.height) }; };
    const feld = document.getElementById("kampagne-text");
    const knopf = document.getElementById("kampagne-holen");
    const sagt = document.getElementById("kampagne-sagt");
    const titel = k.querySelector(".kampagneholen__titel");
    const st = getComputedStyle(sagt);
    return {
      da: true,
      kasten: r(k), feld: r(feld), knopf: r(knopf), sagt: r(sagt), titel: r(titel),
      knopfText: knopf.textContent.trim(),
      sagtText: sagt.textContent.trim(),
      textFarbe: st.color,
      kastenFarbe: getComputedStyle(k).backgroundColor,
      seitenFarbe: getComputedStyle(document.body).backgroundColor,
      schrift: st.fontSize,
      /* Ueberdeckt etwas den Knopf? Nicht gerechnet, sondern gefragt:
         Was liegt an seinem Mittelpunkt wirklich obenauf? */
      obenAufKnopf: (() => {
        const b = knopf.getBoundingClientRect();
        const e = document.elementFromPoint(b.x + b.width / 2, b.y + b.height / 2);
        return e ? (e.id || e.className || e.tagName) : null;
      })(),
      ueberlauf: k.scrollWidth > document.documentElement.clientWidth + 1,
    };
  });

  ok(mass.da, "der Kasten ist da");
  if (!mass.da) { await ctx.close(); return; }

  console.log(`  Kasten  x=${mass.kasten.x} b=${mass.kasten.b} h=${mass.kasten.h}`);
  console.log(`  Titel   „${"Kampagne aus einer Einladung anlegen"}"  h=${mass.titel.h}`);
  console.log(`  Feld    x=${mass.feld.x} b=${mass.feld.b} h=${mass.feld.h}`);
  console.log(`  Knopf   x=${mass.knopf.x} b=${mass.knopf.b} h=${mass.knopf.h}  „${mass.knopfText}"`);
  console.log(`  Hinweis x=${mass.sagt.x} b=${mass.sagt.b} h=${mass.sagt.h}`);

  /* 44 PIXEL. Die Zahl aus pruef-handy-teamdogi: Darunter trifft ein
     Daumen nicht verlaesslich. Am 07.10.2026 lagen fuenf Flaechen in
     diesem Haus bei 40 und wurden genau deshalb gezogen. */
  ok(mass.knopf.h >= 44, `der Knopf ist ${mass.knopf.h} px hoch (mindestens 44)`);
  ok(mass.feld.b > 120, `das Textfeld ist ${mass.feld.b} px breit -- kein Schlitz`);
  ok(mass.feld.h >= 72, `und ${mass.feld.h} px hoch, also mehrzeilig`);

  /* NICHTS LIEGT AUF DEM KNOPF. Am 06.09.2026 lag der Sicht-Umschalter
     quer ueber dem Chat-Knopf: Wer auf „Meine Sicht" tippte, landete
     im Chat -- auf zwoelf Seiten. */
  ok(String(mass.obenAufKnopf).includes("kampagne-holen"),
    `am Mittelpunkt des Knopfes liegt der Knopf (${mass.obenAufKnopf})`);

  ok(!mass.ueberlauf, "der Kasten laeuft nicht aus der Seite heraus");

  /* BRICHT ES UM, WENN DER PLATZ NICHT REICHT? Keine feste Schwelle,
     sondern `flex-wrap` -- gemessen daran, ob Knopf und Hinweis bei
     412 px untereinander stehen. */
  const nebeneinander = Math.abs(mass.knopf.y - mass.sagt.y) < 10;
  console.log(`  Knopf und Hinweis ${nebeneinander ? "nebeneinander" : "untereinander"}`);

  /* AUGENSCHONEND, GERECHNET. */
  const vorn = farbe(mass.textFarbe);
  const hinten = farbe(mass.kastenFarbe)?.[0] !== undefined
    && farbe(mass.kastenFarbe) || farbe(mass.seitenFarbe);
  if (vorn && hinten) {
    const k = kontrast(vorn, hinten);
    ok(k >= 4.5, `Kontrast des Hinweises ${k.toFixed(2)}:1 (mindestens 4,5)`);
  } else {
    ok(false, `Farben nicht messbar: ${mass.textFarbe} auf ${mass.kastenFarbe}`);
  }
  ok(parseFloat(mass.schrift) >= 13,
    `Schriftgroesse ${mass.schrift} (mindestens 13 px)`);

  const kasten = await seite.$("#kampagneholen");
  await kasten.screenshot({ path: `server/bild-kampagne-${breite}.png` });

  /* UND WIE ES WAEHREND DES HOLENS AUSSIEHT. */
  await seite.evaluate(() => {
    document.getElementById("kampagne-form").dataset.laeuft = "ja";
    document.getElementById("kampagne-sagt").textContent = "Wird geholt …";
  });
  await seite.waitForTimeout(300);
  await kasten.screenshot({ path: `server/bild-kampagne-${breite}-laeuft.png` });

  await ctx.close();
}

await messen(1280, 900, "Am Rechner, schmalste Rechnerbreite");
await messen(412, 915, "Auf dem Handy, haeufigste Android-Breite");

/* ---- Keine Bewegung, wenn jemand keine will -------------------------- */
{
  const ctx = await browser.newContext({
    viewport: { width: 412, height: 915 }, deviceScaleFactor: 2,
    hasTouch: true, isMobile: true, reducedMotion: "reduce",
  });
  const seite = await ctx.newPage();
  await anmelden(seite, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1200);
  const ruht = await seite.evaluate(() => {
    const f = document.getElementById("kampagne-form");
    f.dataset.laeuft = "ja";
    const s = getComputedStyle(document.getElementById("kampagne-sagt"));
    return { animation: s.animationName, dauer: s.animationDuration };
  });
  console.log("\n=== Wer keine Bewegung will ===");
  ok(ruht.animation === "none" || ruht.dauer === "0s",
    `keine Bewegung bei prefers-reduced-motion (${ruht.animation}, ${ruht.dauer})`);
}

/* ---- Und ein Creator sieht den Kasten gar nicht --------------------- */
{
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const seite = await ctx.newPage();
  await anmelden(seite, "creator", "CODE-CREA-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1400);
  const sicht = await seite.evaluate(() => {
    const k = document.getElementById("kampagneholen");
    return { da: !!k, versteckt: k ? k.hidden : null,
      sichtbar: k ? k.getBoundingClientRect().height > 0 : null };
  });
  console.log("\n=== Ein Creator ===");
  ok(sicht.versteckt === true && sicht.sichtbar === false,
    `der Kasten bleibt zu (hidden=${sicht.versteckt}, Hoehe>0=${sicht.sichtbar})`);
  await ctx.close();
}

/* ---- Und auf einem anderen Brett steht er nicht --------------------- */
{
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const seite = await ctx.newPage();
  await anmelden(seite, "admin", "CODE-DOGI-0001");
  await seite.goto(BASIS + "/workspace/bereich.html?b=technik", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1400);
  const sicht = await seite.evaluate(() => {
    const k = document.getElementById("kampagneholen");
    return k ? k.hidden : null;
  });
  console.log("\n=== Auf dem Brett Technik ===");
  ok(sicht === true, `dort bleibt der Kasten zu (hidden=${sicht})`);
  await ctx.close();
}

console.log("\n=== Browser-Meldungen ===");
ok(fehlerAufSeite.length === 0,
  fehlerAufSeite.length ? fehlerAufSeite.slice(0, 4).join(" | ") : "keine Fehler");

console.log(`\n${geprueft} Messungen, ${fehler} Fehler`);
console.log("Bilder: server/bild-kampagne-1280.png, -412.png und je -laeuft.png");
await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* Rest */ }
process.exit(fehler ? 1 : 0);