/* ===================================================================== Die Zugangswand der Modi-App ANSEHEN, nicht nur zaehlen. pruef-crew-adresse.mjs misst, was im HTML steht. Das beantwortet nicht, ob die Karte in der gemalten Tafel sitzt, ob Dogi vom Text verdeckt wird oder ob auf dem Handy etwas ueber den Rand haengt -- und genau diese Fehler sieht man nur. Zwei Bildschirmfotos, ein Rechner und ein Handy, plus zwei Messungen, die man dem Bild nicht ansieht: * Die Karte muss INNERHALB der gemalten Tafel liegen. gate.css rechnet dafuer die Cover-Geometrie des Bildes nach; sitzt das Motiv anders als das alte, laege sie daneben. Toleranz: zwei Prozent der Tafelbreite. * Kein Element darf ueber den rechten Rand hinausragen -- der haeufigste Fehler auf schmalen Geraeten, und er faellt im Bildschirmfoto erst auf, wenn man scrollt. Aufrufen mit: node server/pruef-crew-wand-bild.mjs Die Bilder landen als server/pruef-crew-wand-*.png. ===================================================================== */ import { mkdtempSync } from "node:fs"; import { tmpdir } from "node:os"; import { join, dirname } from "node:path"; import { fileURLToPath } from "node:url"; const ordner = mkdtempSync(join(tmpdir(), "ws-crewbild-")); process.env.WORKSPACE_DB = join(ordner, "workspace.db"); /* DER PORT MUSS MEINER SEIN (nachgeruestet 19.09.2026). Ohne diese Zeile startet der eigene Server bei belegtem Port STILL nicht -- und alles Folgende misst gegen einen fremden Stand. Das ist der dritte Ausgang: belegt ist etwas anderes als kaputt. */ const PORT = await eigenerPort(import.meta, "pruef-crew-wand-bild"); process.env.PORT = `${PORT}`; 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"; /* `rollenImHaus` kommt aus derselben Datei, aus der der Server die Zugangswand baut -- damit kann diese Pruefung nicht veralten, wenn jemand eine Rolle dazunimmt. */ import { rollenImHaus } from "./crew-adresse.js"; import { notbremse } from "./helfer-notbremse.mjs"; import { eigenerPort } from "./helfer-port.mjs"; await import("./index.js"); notbremse(180_000, "pruef-crew-wand-bild"); await new Promise((r) => setTimeout(r, 700)); /* Die Bilder landen als pruef-*.png neben den anderen Pruefdateien. NICHT in einem eigenen Ordner: .gitignore kennt `server/pruef-*.png` seit dem 22.08.2026, mit ausfuehrlicher Begruendung -- ein eigener Ordner braeuchte eine zweite Regel fuer dieselbe Sache, und die vergisst beim naechsten Mal jemand. Dann liegen Bildschirmfotos im Repo und tauchen bei jedem Commit als Aenderung auf. */ const HIER = dirname(fileURLToPath(import.meta.url)); let fehler = 0, geprueft = 0; const ok = (b, t) => { geprueft++; console.log((b ? " ok " : " FEHL ") + t); if (!b) fehler++; }; const { chromium } = await import( "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs"); const browser = await chromium.launch(); /* Die vier Zahlen aus gate.css -- die Tafel im Bild. */ const TAFEL = { x: 0.5545, y: 0.1315, b: 0.3865, h: 0.6385 }; const BILD = { b: 1647, h: 955 }; /* Die alte Wand laeuft in denselben Messungen mit. Ohne sie schriebe ich eine Regel fest, von der ich nicht weiss, ob die vorhandene Seite sie ueberhaupt einhaelt -- und beim ersten Fehlschlag waere unklar, ob die neue Seite schlecht ist oder die Regel zu streng. Mit ihr ist die Antwort sofort da. */ for (const geraet of [ { name: "rechner", breite: 1440, hoehe: 900 }, { name: "handy", breite: 412, hoehe: 915 }, { name: "alt-rechner", breite: 1440, hoehe: 900, alt: true }, { name: "alt-handy", breite: 412, hoehe: 915, alt: true }, ]) { const ctx = await browser.newContext({ viewport: { width: geraet.breite, height: geraet.hoehe }, hasTouch: geraet.breite <= 860, deviceScaleFactor: 1, }); const seite = await ctx.newPage(); /* Der App-Name kommt aus dem Manifest der Crew-Adresse. Eine zweite Fassung hier waere die, die beim naechsten Umbenennen vergessen wird. */ const { readFileSync } = await import("node:fs"); const APPNAME = JSON.parse( readFileSync(new URL("../workspace/crew.webmanifest", import.meta.url), "utf8")).name; const meldungen = []; seite.on("console", (m) => { if (m.type() === "error") meldungen.push(m.text()); }); const adresse = geraet.alt ? `http://127.0.0.1:${PORT}/workspace/index.html` : `http://127.0.0.1:${PORT}/workspace/crew-index.html`; await seite.goto(adresse, { waitUntil: "networkidle" }); await seite.waitForTimeout(400); const datei = join(HIER, `pruef-crew-wand-${geraet.name}.png`); if (!geraet.alt) await seite.screenshot({ path: datei }); console.log(`\n--- ${geraet.name} (${geraet.breite}x${geraet.hoehe}) -> ${datei}`); /* Kein Skriptfehler. Ohne diese Zeile faellt ein kaputtes gate.js erst auf, wenn jemand den Knopf drueckt. */ ok(meldungen.length === 0, `${geraet.name}: keine Fehler im Skript` + (meldungen.length ? ` -- ${meldungen[0]}` : "")); /* Ist ueberhaupt die richtige Seite da? */ const titel = await seite.title(); const kacheln = await seite.locator(".rolle").count(); if (geraet.alt) { ok(kacheln === 5, `${geraet.name}: die alte Wand hat ihre fuenf Kacheln (${kacheln})`); } else { /* DER REITER TRAEGT DEN APP-NAMEN -- abgeleitet, nicht abgeschrieben. Hier stand `/Team Dogi/`, aus der Zeit, als die App so hiess. Sie heisst seit dem Treff-Umzug "DogFather Universe", und die Pruefung war seitdem rot, ohne dass etwas kaputt war. Ein fester Name in einer Pruefung ist eine Zeitbombe mit Datum: Er stimmt, bis jemand umbenennt, und dann kostet er Vertrauen in den ganzen Satz. Gemessen wird deshalb gegen das Manifest -- benennt jemand die App um, folgt der Reiter, und beides bleibt gruen. Weichen sie auseinander, sieht der Mensch im Reiter einen anderen Namen als auf seinem Startbildschirm, und das ist der Fehler, den es zu finden gilt. */ ok(titel.includes(APPNAME), `${geraet.name}: der Reiter traegt den App-Namen "${APPNAME}" (steht da: "${titel}")`); /* WELCHE ROLLEN AUF DIE WAND GEHOEREN. Hier stand `=== 3`, seit Filipe am 10.09.2026 sagte: "3 rollen. dogfather. rechte hand und modis." Am 19.09. ist der Treff in Team Dogi eingezogen, und die Community kam als vierte dazu -- die Zahl war ab da falsch, die Wand richtig. Eine Zahl sagt beim Scheitern nur "3 erwartet, 4 gefunden" und verschweigt, WELCHE. Deshalb wird die MENGE verglichen: Fehlt eine Rolle, steht ihr Name in der Meldung, und wer sie entfernt hat, sieht sofort, ob das Absicht war. */ const rollen = (await seite.locator(".rolle").evaluateAll( (ns) => ns.map((n) => n.dataset.rolle || ""))).sort(); /* ==== DRITTER ANLAUF, UND DIESMAL OHNE ABSCHRIFT (25.09.2026) === Hier stand `=== 3` (10.09.), dann die Liste ["admin","gast","hand","modi"] (19.09.) -- und beide sind aus demselben Grund veraltet: Am 21.09. kam die LINKE HAND dazu. Die Wand zeigte sie richtig an, die Pruefung kannte sie nicht, und sie war seither rot, ohne dass etwas kaputt war. Der Kommentar direkt darueber warnt seit dem 19.09. wortwoertlich vor festen Namen in Pruefungen („eine Zeitbombe mit Datum") -- und die Zeile darunter war selbst eine. Ein Kommentar, der vor einem Fehler warnt, verhindert ihn nicht. JETZT WIRD ABGELEITET: `rollenImHaus("crew")` ist dieselbe Quelle, aus der der Server die Wand baut. Wer morgen eine Rolle dazunimmt oder verschiebt, verschiebt diese Pruefung mit. Und weicht die Wand doch einmal ab, steht in der Meldung, WELCHE Rolle fehlt oder zu viel ist -- eine Zahl sagt nur „vier erwartet, fuenf gefunden" und verschweigt das Entscheidende. */ const SOLL = [...rollenImHaus("crew")].sort(); const fehlt = SOLL.filter((r) => !rollen.includes(r)); const zuviel = rollen.filter((r) => !SOLL.includes(r)); ok(fehlt.length === 0 && zuviel.length === 0, `${geraet.name}: alle ${SOLL.length} Rollen des Hauses stehen da ` + `(${rollen.join(", ") || "keine"})` + (fehlt.length ? ` -- ES FEHLT: ${fehlt.join(", ")}` : "") + (zuviel.length ? ` -- ZU VIEL: ${zuviel.join(", ")}` : "")); /* Jede muss auch bedienbar sein. Eine Kachel, die im HTML steht, aber 0 px hoch ist, zaehlt oben mit und laesst sich trotzdem nicht antippen -- genau die Sorte Fehler, die eine Zaehlung allein nicht findet. */ const zuKlein = await seite.evaluate(() => [...document.querySelectorAll(".rolle")] .filter((e) => e.getBoundingClientRect().height < 40).length); ok(zuKlein === 0, `${geraet.name}: alle drei sind gross genug zum Antippen`); } /* Die Karte muss sichtbar und bedienbar sein. */ const karte = await seite.locator("#tafel").boundingBox(); const feld = await seite.locator("#code").boundingBox(); const knopf = await seite.locator("#knopf").boundingBox(); ok(!!karte && karte.width > 200, `${geraet.name}: die Karte steht (${Math.round(karte?.width || 0)} px breit)`); ok(!!feld && feld.height >= 40, `${geraet.name}: das Codefeld ist gross genug zum Tippen`); ok(!!knopf && knopf.height >= 40, `${geraet.name}: der Anmeldeknopf ist gross genug`); /* HAENGT ETWAS HERAUS? Die Frage muss genauer gestellt werden. Erster Entwurf ging ueber ALLE Elemente und meldete zwei Treffer: `buehne__bild` und `tafel-anker`. Beide sind ABSICHTLICH breiter als das Fenster -- so arbeitet `object-fit: cover`, und der Anker ist bloss eine Schablone ohne Klicks. Die Pruefung war rot, die Seite in Ordnung. Gemeint sind zwei Dinge, und beide lassen sich sauber messen: 1. Laesst sich die Seite seitlich schieben? Das ist der Fehler, den man als Nutzer merkt. 2. Liegt etwas BEDIENBARES ausserhalb? Das ist der Fehler, den man nicht merkt -- man kommt nur nicht daran. */ const ueberstand = await seite.evaluate(() => { const w = document.documentElement; const schiebt = w.scrollWidth - w.clientWidth; let schlimmster = 0, wer = ""; for (const e of document.querySelectorAll( "a, button, input, textarea, select, label, h1, .unterzeile, .marke")) { const r = e.getBoundingClientRect(); if (r.width === 0 && r.height === 0) continue; const ueber = Math.max(r.right - w.clientWidth, -r.left); if (ueber > schlimmster) { schlimmster = ueber; wer = e.className || e.tagName; } } return { schiebt: Math.round(schiebt), schlimmster: Math.round(schlimmster), wer: String(wer).slice(0, 40) }; }); ok(ueberstand.schiebt <= 1, `${geraet.name}: die Seite laesst sich nicht seitlich schieben` + (ueberstand.schiebt > 1 ? ` -- ${ueberstand.schiebt} px zu breit` : "")); ok(ueberstand.schlimmster <= 2, `${geraet.name}: alles Bedienbare liegt im Fenster` + (ueberstand.schlimmster > 2 ? ` -- ${ueberstand.wer} um ${ueberstand.schlimmster} px` : "")); /* IST DIE SCHRIFT AUF DEM ANMELDEKNOPF LESBAR? Der Knopf traegt einen VERLAUF. Man kann seine Lesbarkeit deshalb nicht aus einer einzelnen Farbe im Stylesheet ableiten -- die hellste Stelle entscheidet, und die steht dort nirgends als Zahl. Also wird das fertige Bild ausgemessen. Die Schrift ist weiss; weisse Bildpunkte sind damit die Schrift und werden ausgenommen. Vom Rest zaehlt das obere Zehntel: die hellste Stelle des Verlaufs, auf der noch Schrift liegen kann. 4,5 zu 1 ist die Grenze aus WCAG AA fuer normale Schrift. Der Knopf ist zwar fett, aber mit rund 16 px unter den 18,66 px, ab denen 3 zu 1 genuegen wuerde -- also gilt die strengere Zahl. */ const knopfBild = await seite.locator("#knopf").screenshot(); const kontrast = await seite.evaluate(async (b64) => { const i = new Image(); i.src = "data:image/png;base64," + b64; await i.decode(); const c = document.createElement("canvas"); c.width = i.width; c.height = i.height; const g = c.getContext("2d"); g.drawImage(i, 0, 0); const d = g.getImageData(0, 0, c.width, c.height).data; const linear = (v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }; const hell = []; for (let k = 0; k < d.length; k += 4) { const L = 0.2126 * linear(d[k]) + 0.7152 * linear(d[k + 1]) + 0.0722 * linear(d[k + 2]); if (L > 0.6) continue; // das ist die Schrift selbst hell.push(L); } if (!hell.length) return null; hell.sort((x, y) => x - y); const oben = hell[Math.floor(hell.length * 0.9)]; return { hellste: oben, verhaeltnis: 1.05 / (oben + 0.05), punkte: hell.length }; }, knopfBild.toString("base64")); ok(kontrast && kontrast.punkte > 500 && kontrast.verhaeltnis >= 4.5, `${geraet.name}: weisse Schrift auf dem Knopf haelt ` + `${kontrast ? kontrast.verhaeltnis.toFixed(2) : "?"} zu 1 (mindestens 4,5)`); /* NUR AM RECHNER: Sitzt die Karte in der gemalten Tafel? Auf dem Handy liegt sie bewusst frei vor dem Bild -- dort gaebe es nichts zu vergleichen, und eine Pruefung, die dort etwas behauptet, behauptete es ohne Grundlage. */ if (geraet.breite >= 1100 && geraet.breite / geraet.hoehe > 1.4) { const soll = await seite.evaluate(([t, bild]) => { /* Dieselbe Cover-Rechnung wie im CSS. */ const vw = document.documentElement.clientWidth; const vh = window.innerHeight; const b = Math.max(vw, vh * bild.b / bild.h) * 1.03; const h = Math.max(vh, vw * bild.h / bild.b) * 1.03; const links = (vw - b) / 2, oben = (vh - h) / 2; return { x: links + b * t.x, y: oben + h * t.y, b: b * t.b, h: h * t.h, }; }, [TAFEL, BILD]); const abx = Math.abs(karte.x - soll.x); const aby = Math.abs(karte.y - soll.y); const grenze = soll.b * 0.02; ok(abx <= grenze && aby <= grenze, `${geraet.name}: die Karte sitzt in der gemalten Tafel ` + `(${Math.round(abx)} px seitlich, ${Math.round(aby)} px hoch, erlaubt ${Math.round(grenze)})`); } await ctx.close(); } /* ===================================================================== NACH DER ANMELDUNG: heisst die Seite auch im Reiter anders? In jeder der 30 Seiten steht fest ... · Spicy & Dogi und daneben das Zeichen des Workspace. Fuer einen Modi ist beides falsch -- und beides sieht man als Erstes: im Browserreiter und, wenn die Seite als App laeuft, im Fensterrahmen. kopf.js zieht das aus `ich.marke` nach. Das laeuft erst IM BROWSER, laesst sich also nur hier messen und nicht in pruef-crew-adresse.mjs, die rohes HTTP spricht. DIE GEGENPROBE STEHT DANEBEN: Dieselben zwei Werte werden fuer einen Manager gelesen. Bei ihm MUESSEN sie unveraendert bleiben -- sonst haette ich die Kopfleiste fuer alle umgebaut, und das waere niemandem aufgefallen, weil es ja "auch geht". ===================================================================== */ console.log(""); console.log("--- Nach der Anmeldung ---"); const { DatabaseSync } = await import("node:sqlite"); const { scryptSync, randomBytes, createHmac } = await import("node:crypto"); const d = new DatabaseSync(process.env.WORKSPACE_DB); const jetzt = new Date().toISOString(); const schluessel = randomBytes(32).toString("hex"); d.prepare("INSERT INTO einstellungen (schluessel, wert, geaendert, von)" + " VALUES (?,?,?,NULL) ON CONFLICT(schluessel) DO NOTHING") .run("code_kennung_schluessel", schluessel, jetzt); 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, code_kennung, aktiv, erstellt)" + " VALUES (?,?,?,?,?,?,1,?)") .run(name, rolle, hash, salt, 32768, createHmac("sha256", schluessel).update(code).digest("hex"), jetzt); /* GIBT ZURUECK, WAS SIE ANGELEGT HAT (01.10.2026). Vorher standen Rolle und Code zweimal da -- einmal hier und einmal unten in der Anmeldeschleife -- und dass sie zusammenpassen, war Handarbeit. Genau dort ist es auseinandergelaufen: Marina ist ein `modi`, angemeldet wurde sie mit der Kachel `creator`. */ return { name, rolle, code }; } const MARINA = anlegen("Marina", "modi", "CODE-MODI-0001"); const SCHULLE = anlegen("Schulle", "manager", "CODE-MAN-0001"); const STEMPEL = new RegExp("\\?v=\\d+"); /* ==== DIE KACHEL IST BINDEND (30.09.2026) ========================= Hier stand `rolle: "creator"` fuer Marina, die ein `modi` ist. Bis zum 30.09. nahm die Anmeldung jede Kachel an; seit `718b267d` muss sie zur Person passen -- auf Filipes ausdruecklichen Wunsch („mach das. es soll fest sein."). Diese Pruefung war seitdem rot, mit drei Befunden aus derselben Wurzel. Rolle und Code kommen jetzt aus derselben Stelle wie beim Anlegen. Was hier noch steht, ist nur das, was sich daraus NICHT ableiten laesst: wie die Person in der Meldung heissen soll und ob sie ihr eigenes Zeichen bekommt. */ for (const wer of [ { ...MARINA, name: "Modi", eigen: true }, { ...SCHULLE, name: "Manager", eigen: false }, ]) { const ctx = await browser.newContext({ viewport: { width: 1280, height: 860 } }); const antwort = await ctx.request.post(`http://127.0.0.1:${PORT}/workspace/api/anmelden`, { data: { rolle: wer.rolle, code: wer.code }, }); ok(antwort.ok(), wer.name + ": die Anmeldung geht durch"); const seite = await ctx.newPage(); await seite.goto(`http://127.0.0.1:${PORT}/workspace/aufgaben.html`, { waitUntil: "networkidle" }); await seite.waitForTimeout(500); const titel = await seite.title(); const zeichen = await seite.evaluate(() => [...document.querySelectorAll('link[rel="icon"], link[rel="apple-touch-icon"]')] .map((l) => l.getAttribute("href") || "")); if (wer.eigen) { ok(/Team Dogi/.test(titel) && !/Spicy/.test(titel), wer.name + ': der Reiter heisst "' + titel + '"'); ok(zeichen.length > 0 && zeichen.every((h) => h.includes("/crew-")), wer.name + ": alle " + zeichen.length + " Zeichen sind die eigenen"); ok(zeichen.every((h) => STEMPEL.test(h)), wer.name + ": der Versionsstempel bleibt am Zeichen haengen"); } else { ok(/Spicy/.test(titel) && !/Team Dogi/.test(titel), wer.name + ': der Reiter ist unveraendert ("' + titel + '")'); ok(zeichen.length > 0 && zeichen.every((h) => h.includes("/workspace-")), wer.name + ": sein Zeichen ist unveraendert (Gegenprobe)"); } await ctx.close(); } d.close(); await browser.close(); console.log(`\n${fehler === 0 ? "BESTANDEN" : "FEHLGESCHLAGEN"} -- ${geprueft} geprueft, ${fehler} Fehler`); process.exit(fehler === 0 ? 0 : 1);