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})`);
}

/* ---- SAGT DER KASTEN, WARUM ES NICHT GING? -------------------------

   Am 07.10.2026 stand bei Filipe im Kasten "Ging nicht." -- der
   Ersatztext. Im Protokoll des Servers stand dagegen der genaue
   Grund. Zwischen beiden liegt die ganze Frage, ob jemand weiss, was
   zu tun ist.

   GEMESSEN WIRD HIER DER ECHTE WEG: Auf einer Pruefadresse hat die
   Sitzung kein Haus, die Route lehnt deshalb mit 403 und einem
   ganzen deutschen Satz ab. Genau dieser Satz muss im Kasten
   stehen -- nicht "Ging nicht.".

   Das ist kein Umweg: Jede Fehlermeldung dieser Route geht
   denselben Weg (res.status(...).json({ fehler })). Wer hier
   ankommt, kommt ueberall an. */
{
  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=agentur", { waitUntil: "networkidle" });
  await seite.waitForTimeout(1400);

  await seite.fill("#kampagne-text",
    "Dein Creator Network lädt dich ein: https://www.tiktok.com/t/ZSbqPsFa8/");
  await seite.$eval("#kampagne-holen", (b) => b.click());
  /* Auf eine ANTWORT warten, nicht auf eine feste Zeit: Ein fester
     Wert waere hier dieselbe Rechnung von gestern wie ueberall. */
  await seite.waitForFunction(
    () => document.getElementById("kampagne-sagt").textContent.trim() !== "Wird geholt …",
    { timeout: 25000 }).catch(() => {});

  const gezeigt = await seite.evaluate(() => ({
    text: document.getElementById("kampagne-sagt").textContent.trim(),
    knopfFrei: !document.getElementById("kampagne-holen").disabled,
  }));
  console.log("\n=== Was der Kasten nach einem Fehlschlag sagt ===");
  console.log("  gezeigt: " + JSON.stringify(gezeigt.text));

  ok(gezeigt.text !== "Ging nicht.",
    "der Kasten zeigt NICHT den Ersatztext");
  ok(gezeigt.text.length > 25 && /[.!]$/.test(gezeigt.text),
    `sondern einen ganzen Satz (${gezeigt.text.length} Zeichen)`);
  ok(/Agentur|workspace\.dogfather/i.test(gezeigt.text),
    "der den Grund nennt und sagt, was zu tun ist");
  ok(gezeigt.knopfFrei, "und der Knopf ist wieder frei");

  /* UND DER FALL, DER FILIPE GETROFFEN HAT: HTTP 502.

     Der 403 oben beweist, dass der Weg grundsaetzlich traegt. Die
     Meldung, die bei ihm verschwand, war aber ein 502 -- und ein
     502 kommt in diesem Haus durch einen anderen Flaschenhals
     (Vorbau, Dienst). Deshalb wird er hier EINZELN nachgestellt:
     window.holen gibt eine fertige 502-Antwort zurueck, genau so,
     wie der Server sie schickt. Zeigt der Kasten dann den Satz,
     liegt es nicht am Browsercode.

     Nachgestellt wird die ANTWORT, nicht der Fehler -- damit misst
     diese Zeile genau eine Sache und nicht nebenbei TikTok. */
  await seite.evaluate(() => {
    const echt = window.holen;
    window.holen = async (pfad, o) => {
      if (!String(pfad).includes("/kampagne/einlesen")) return echt(pfad, o);
      return new Response(JSON.stringify({
        fehler: "Die Seite konnte nicht gelesen werden: "
          + "__MODERN_ROUTER_DATA__ fehlt in der Seite. "
          + "Vermutlich hat TikTok die Seite umgebaut.",
      }), { status: 502, headers: { "Content-Type": "application/json" } });
    };
  });
  await seite.fill("#kampagne-text", "https://www.tiktok.com/t/ZSbqPsFa8/");
  await seite.$eval("#kampagne-holen", (b) => b.click());
  await seite.waitForFunction(
    () => document.getElementById("kampagne-sagt").textContent.trim() !== "Wird geholt …",
    { timeout: 20000 }).catch(() => {});
  const beiFuenfNullZwei = (await seite.evaluate(
    () => document.getElementById("kampagne-sagt").textContent.trim()));
  console.log("  bei HTTP 502: " + JSON.stringify(beiFuenfNullZwei));
  ok(beiFuenfNullZwei !== "Ging nicht."
    && /MODERN_ROUTER_DATA/.test(beiFuenfNullZwei),
    "auch ein 502 zeigt den Satz des Servers, nicht den Ersatztext");
  await ctx.close();
}

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