dogfather-universe/server/bild-stufen.mjs

/* Bild der Stufenleiter und der Talente-Seite (17.09.2026)

   Beides wurde heute gebaut und bisher nur an Zahlen geprueft. Die
   Hausregel dazu ist eindeutig: Ein gruener Haken sagt nicht, wie es
   aussieht. Der Startkatalog hat am selben Tag den Countdown von
   458 px auf 1488 px geschoben, ohne dass eine einzige Pruefung rot
   wurde -- gesehen habe ich es im Bildschirmfoto.

   Aufrufen mit:  node server/bild-stufen.mjs
*/
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";

const ordner = mkdtempSync(join(tmpdir(), "ws-bild-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
const { portMussFreiSein } = await import("./helfer-port.mjs");
/* DIE ANTWORT DES WAECHTERS WIRD BENUTZT (01.10.2026). Hier
   stand die Zahl dreimal, und der Rueckgabewert wurde
   weggeworfen. Gibt das System den Port dauerhaft nicht her,
   weicht `portMussFreiSein` auf Port + 4000 aus und meldet die
   neue Nummer -- dieses Werkzeug lauschte danach trotzdem auf
   der alten und stuerzte mit `listen EACCES` ab. Genau der
   Fall ist am 23.09. auf Port 5040 eingetreten. */
const PORT = await portMussFreiSein(4331, "das Bildwerkzeug");
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));
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("Diene", "modi", "CODE-MODI-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 ctx = await browser.newContext({ viewport: { width: 1400, height: 1000 }, deviceScaleFactor: 2 });
const seite = await ctx.newPage();
const fehlerAufSeite = [];
seite.on("console", (m) => { if (m.type() === "error") fehlerAufSeite.push(m.text()); });
seite.on("pageerror", (f) => fehlerAufSeite.push(String(f)));

await seite.goto(BASIS + "/workspace/", { waitUntil: "networkidle" });
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: 25000 });

/* ---- 1. Die Entwicklungsseite mit der Stufenleiter ------------------- */
await seite.goto(BASIS + "/workspace/entwicklung.html", { waitUntil: "networkidle" });
await seite.waitForTimeout(1800);

/* Eine Person waehlen, damit die Karte mit den Bloecken erscheint. */
const person = await seite.$(".e-person, .p-kachel, [data-person-id]");
if (person) { await person.click(); await seite.waitForTimeout(1500); }

const leiste = await seite.$(".e-stufen");
console.log("\n=== 1. Die Stufenleiter ===");
console.log("  vorhanden:", !!leiste);
if (leiste) {
  const knoepfe = await seite.$$eval(".e-stufen__knopf", (ns) => ns.map((n) => ({
    text: n.textContent.trim().replace(/\s+/g, " "),
    breite: Math.round(n.getBoundingClientRect().width),
    gewaehlt: n.getAttribute("aria-pressed"),
  })));
  for (const k of knoepfe) console.log(`  ${String(k.breite).padStart(4)} px  ${k.gewaehlt === "true" ? "[x]" : "[ ]"} ${k.text}`);

  /* WIE VIELE ZEILEN BRAUCHT DIE LEISTE? Bei sechs Knoepfen in einer
     Leiste, die schon einen "Alle aufklappen"-Knopf enthaelt, ist das
     die Frage. Gezaehlt ueber die verschiedenen Oberkanten -- nicht
     ueber die Hoehe geteilt durch etwas. */
  const zeilen = await seite.$$eval(".e-stufen__knopf",
    (ns) => new Set(ns.map((n) => Math.round(n.getBoundingClientRect().top))).size);
  console.log("  Zeilen:", zeilen);

  await leiste.scrollIntoViewIfNeeded();
  await seite.waitForTimeout(400);
  const kasten = await seite.$(".e-bloecke__leiste");
  await (kasten || leiste).screenshot({ path: "server/bild-stufenleiste.png" });

  /* ---- Und nach einem Klick auf "Fortgeschritten" ------------------- */
  const fort = await seite.$('.e-stufen__knopf[data-erwartung="fort"]');
  if (fort) {
    await fort.click();
    await seite.waitForTimeout(1200);
    const koepfe = await seite.$$eval(".e-block", (ns) => ns.map((n) => ({
      name: n.querySelector(".e-block__name")?.textContent?.trim(),
      stand: n.querySelector(".e-block__stand")?.textContent?.trim(),
    })));
    console.log("\n  Nach Klick auf „Fortgeschritten“:");
    for (const k of koepfe) console.log(`    ${String(k.name).padEnd(28)} ${k.stand}`);
    await seite.screenshot({ path: "server/bild-stufen-gefiltert.png", fullPage: false });
  }
}

/* ---- 2. Die Talente-Seite, leer -------------------------------------- */
await seite.goto(BASIS + "/workspace/talente.html", { waitUntil: "networkidle" });
await seite.waitForTimeout(1800);
console.log("\n=== 2. Die Talente-Seite ===");
const leer = await seite.$(".t-leer");
console.log("  leerer Zustand:", !!leer);
if (leer) {
  const merkmale = await seite.$$eval(".t-leer__merkmal",
    (ns) => ns.map((n) => n.textContent.trim().replace(/\s+/g, " ")));
  console.log("  Merkmalsgruppen:", merkmale.length);
  for (const m of merkmale) console.log("    " + m);
  const knoepfe = await seite.$$eval(".t-leer__knoepfe a",
    (ns) => ns.map((n) => n.textContent.trim()));
  console.log("  Wege:", knoepfe.join(" | "));
  await leer.scrollIntoViewIfNeeded();
  await seite.waitForTimeout(400);
  await leer.screenshot({ path: "server/bild-talente-leer.png" });
}

/* ---- 3. Auf dem Handy ------------------------------------------------ */
const handy = await ctx.newPage();
await handy.goto(BASIS + "/workspace/entwicklung.html", { waitUntil: "networkidle" });
await handy.setViewportSize({ width: 412, height: 915 });
await handy.waitForTimeout(1500);
const p2 = await handy.$(".e-person, .p-kachel, [data-person-id]");
if (p2) { await p2.click(); await handy.waitForTimeout(1500); }
console.log("\n=== 3. Auf 412 px (haeufigste Android-Breite) ===");
const l2 = await handy.$(".e-stufen");
if (l2) {
  const zeilen = await handy.$$eval(".e-stufen__knopf",
    (ns) => new Set(ns.map((n) => Math.round(n.getBoundingClientRect().top))).size);
  const ueber = await handy.$$eval(".e-stufen__knopf",
    (ns) => ns.filter((n) => n.getBoundingClientRect().right > window.innerWidth).length);
  console.log("  Zeilen:", zeilen, " ueber den Rand hinaus:", ueber);
  const kasten2 = await handy.$(".e-bloecke__leiste");
  await (kasten2 || l2).screenshot({ path: "server/bild-stufen-handy.png" });
} else { console.log("  keine Leiste gefunden"); }

console.log("\nFehler auf der Seite:", fehlerAufSeite.length ? fehlerAufSeite.join(" | ") : "keine");
await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* Aufraeumrest */ }
process.exit(0);