Kampagnen-Kachel aus einem TikTok-Link -- Etappe 2 bis 4
Der Auftrag ist damit fertig: Im Agentur-Bereich gibt es ein Feld, in das die ganze Einladungsnachricht eingefuegt wird -- und daraus entsteht eine Agentur-Event-Kachel mit Titel, Zeitraum, Banner, Aufgaben zum Abhaken, Regeln, Ligen und Preisen. Gemessen 38 ms vom Einfuegen bis zur Kachel. ETAPPE 2 -- DER WEG NACH DRAUSSEN (helfer-tiktok.mjs) linkAusText holt die Adresse aus dem Fliesstext, damit niemand sie heraussuchen muss. folgeUmleitung geht Sprung fuer Sprung (redirect "manual", hoechstens fuenf) und schickt JEDE Zwischenadresse durch istTikTok -- bisher folgte holeMitFrist den Umleitungen selbst, und istTikTok hatte nur die EINGABE gesehen. Das ist die einzige Stelle im Haus, an der unser Server eine fremdbestimmte Adresse abruft. holeSeite zieht die Grenze von 3 MB BEIM LESEN, nicht hinterher: Wer arrayBuffer() abwartet und dann die Laenge ansieht, hat die 50 MB schon im Speicher. Frist 12 s statt 8 -- gemessen 750 ms allein beim Ursprungsserver, dazu 1,1 MB Uebertragung. bildAdresseErlaubt kam beim Bauen dazu, nicht aus dem Bauplan: Die Banneradresse steht in der Seite, die TikTok ausliefert, ist also FREMDBESTIMMT. Ohne Schranke wuerde unser Server abrufen, was dort steht -- auch http://127.0.0.1:4100/ oder 169.254.169.254. Elf Faelle durchgemessen. ETAPPE 3 -- DIE ROUTE (workspace-kampagne.js, 5 Spalten, 1 Index) Rechte aus istLeitung, nicht neu erfunden. Bremse 20 je Stunde, VOR dem ersten Abruf nach draussen -- eine Bremse hinter dem Abruf bremst den fremden Server nicht. Dublettenpruefung zweimal: im Code (faengt den Normalfall) und als eindeutiger Index (faengt den Wettlauf zweier gleichzeitiger Aufrufe). 'kampagne_schon_da' zaehlt bei der Bremse MIT (gefunden von der Pruefung): Zuerst zaehlten nur Erfolg und Fehlschlag -- wer denselben Link wieder und wieder einfuegt, bekommt jedes Mal "schon da" und loeste jedes Mal einen Abruf aus, ohne gezaehlt zu werden. Gemessen: 21 Versuche, 0 gebremst. Der Regeltext wird SICHTBAR gekuerzt, an einer Abschnittsgrenze. Gipfelstuermer ergibt 7474 Zeichen, das Feld fasst 6000 (TEXT_MAX), und die PUT-Route lehnt mehr ab: Ungekuerzt entstuende eine Kachel, die DogFather OEFFNEN, aber nicht SPEICHERN kann -- er aendert ein Wort und bekommt eine Fehlermeldung ueber etwas, das er nie getippt hat. Verloren geht nichts: kampagne_daten traegt das Gelesene gegliedert. ETAPPE 4 -- DIE OBERFLAECHE Ein Textbereich (die Einladung ist mehrzeilig), der Knopf gibt sich nach 15 s von selbst frei, die Meldung steht neben dem Feld und nennt den Grund im Klartext. Ob jemand darf, sagt der Server ueber darf_kampagne_einlesen in /api/ich -- keine Rollenliste im Browser. Gemessen auf 412 und 1280 px (bild-kampagne.mjs, 20 Messungen): Knopf 44 px, Kontrast 7,68:1, nichts liegt auf dem Knopf, kein Ueberlauf, keine Bewegung bei prefers-reduced-motion. Die Antwortzeile steht auf .9rem statt der hausweiten .76rem -- dort erscheint, was der Server geantwortet hat, und eine Fehlermeldung in 12 px liest niemand zweimal. Die hausweite Klasse bleibt unberuehrt. VIERZEHN SABOTAGEN, VIERZEHN TREFFER Sieben an kampagne-lesen.mjs (Etappe 1) und sieben an Route und Weg: Umleitung ungeprueft folgen, Tag nach Serverzeit, Dublettenpruefung weglassen, dem fremden Server den Bildtyp glauben, Bremse abschalten, Bremse wieder blind fuer Dubletten, jeden einlesen lassen. Jede wurde bemerkt, jede im erwarteten Abschnitt. EINE BLIEB ZUERST BLIND, und das war lehrreich: Nimmt man die Dublettenpruefung aus dem Code, faengt der INDEX es auf -- die Antwort ist dieselbe, die Pruefung blieb gruen. Kein Schaden, aber ein blinder Fleck. Jetzt unterscheidet die Pruefung am Protokolltext, WELCHE der beiden Sicherungen gegriffen hat. VIER VORBESTEHENDE BEFUNDE MIT ERLEDIGT willkommen.html hatte kein theme-color, kein Manifest, kein apple-touch-icon. Drei Zeilen sind billiger und haltbarer als eine Ausnahme in der Pruefung. workspace-anleitung.js bildete den Tag "ab wann geht mehr" aus UTC. Wer zwischen 00:00 und 02:00 beitritt, bekam einen Termin, der einen Tag zu frueh war. workspace.js hat dafuer jetzt tagLokalVon(zeitpunkt, versatz) -- und tagLokal ist nur noch ein Aufruf davon. Es gibt also WENIGER Rechenwege als vorher, nicht mehr. pruef-anleitung.mjs legte Testdaten auf den UTC-Tag und waere zwischen 00:00 und 02:00 rot gewesen, ohne dass etwas kaputt ist. mess-anleitung-crew.mjs rechnete seinen zweiten Port als PORT + 1. Das sieht aus wie eine Ableitung und ist keine: portNummer ueberspringt gesperrte Nummern, und dann gehoert PORT + 1 der naechsten DATEI. pruef-struktur ist damit zum ersten Mal vollstaendig gruen. GEPRUEFT (alle gruen, keine Zahl gesunken) pruef-kampagne 96 (neu) · pruef-kampagne-lesen 108 · pruef-video 74 · pruef-eventkarte 94 · pruef-agentur 62 · pruef-anleitung 196 · pruef-portnummern 41 (war 40 mit einem Fehler) · pruef-struktur, pruef-zeichen 8, pruef-ports 10, pruef-buehnen-fest 13, pruef-css-klassen 39, pruef-haus-trennung 107, pruef-lesbarkeit, pruef-tippziele, pruef-deutsche-texte 12, pruef-formulare, pruef-fingermass 5, pruef-workspace-seiten, pruef-tempo-workspace Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,264 @@
|
||||
/* 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));
|
||||
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);
|
||||
await seite.click("button[type=submit]");
|
||||
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 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);
|
||||
Reference in New Issue
Block a user