Profilbild gebaendigt, Steckbrief von der Creator-Akte getrennt
ZWEI FEHLER, DIE FILIPE GESEHEN HAT.
1. DAS PROFILBILD LAG UEBER DER HALBEN SEITE. Als Patrick sein Bild
hochlud, zog sich ein roter Balken quer ueber die Startseite.
Ursache: Die CSS-Regel .wer__bild hat GEFEHLT. Das Element wurde in
kopf.js erzeugt, die Regel dazu nie geschrieben -- und ein <img> ohne
Groessenangabe nimmt seine natuerliche Groesse an, bei einem Handyfoto
also mehrere tausend Pixel. Dazu fehlte overflow: hidden am Traeger.
WARUM KEINE PRUEFUNG DAS GEFUNDEN HAT: Sie lud ein 1x1-Pixel-PNG hoch.
Klein, schnell, von Hand gebaut -- und voellig unfaehig, irgendetwas
zu ueberdecken. Die Pruefung war gruen, der Fehler war da, und gesehen
hat ihn der Nutzer. Sie arbeitet jetzt mit einem 1200x1200-Bild, also
in der Groesse, die wirklich hochgeladen wird, und misst danach: Bleibt
das Bild in seinem 28-px-Feld, ragt es irgendwo heraus, laeuft die
Seite ueber. Gegenprobe gemacht -- ohne die Regel meldet sie
1200x1200 in 28x28 und 918 px Ueberlauf.
2. ZWEI PERSONEN AUF EINEM BILDSCHIRM. Auf der Profilseite stand oben
"Profil: SpongBobSchwammKopf" und mittendrin "MEIN PROFIL: Dogfather".
Niemand konnte sagen, welche Angabe zu wem gehoert.
Es sind auch wirklich zwei verschiedene Dinge:
MEIN STECKBRIEF gehoert MIR -- Bild, ein Satz ueber mich, meine
Kanaele. Fuehre ich selbst.
CREATOR-PROFILE die BETREUUNGSAKTE eines anderen Menschen --
Ziele, 90-Tage-Plan, interne Notizen. Fuehren die
Betreuer.
Scouts, Manager und DogFather haben jetzt zwei getrennte Kacheln und
eine eigene Seite (steckbrief.html, serverseitig geschuetzt). Ein
Creator behaelt beides zusammen -- er hat nur eine Seite und sieht
dort ausschliesslich sich selbst. Die Logik liegt in einer eigenen
Datei statt hinten an profil.js: Sie gehoert der angemeldeten Person,
nicht der Akte.
ACHTZEHN KACHELN, ACHTZEHN FARBEN. Die neue Kachel haette sich ihren
Farbton mit den Creator-Profilen geteilt -- zwei Nachbarn in derselben
Farbe. Statt eine Farbe dazuzuerfinden, wurde tools/kachel-farben.mjs
fuer 18 Winkel neu gerechnet, samt der neuen Nachbarschaft im Raster.
Der kleinste Abstand zweier Nachbarn liegt weiterhin bei 100 Grad.
Gefunden hat das die Startseitenpruefung ("17 Farben auf 18 Kacheln").
Die Trennung wird jetzt fuer JEDE Rolle geprueft: welche Kacheln sie
sieht, dass auf der Akte kein fremder Steckbrief steht, und dass die
eigene Seite die richtige Person zeigt. Eine alte Pruefung, die das
Gegenteil verlangte, wurde ersetzt statt stehen gelassen.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+106
-15
@@ -161,11 +161,36 @@ console.log("\n=== Sichtbarkeit");
|
||||
/* ---------- Das Bild ------------------------------------------------------ */
|
||||
console.log("\n=== Profilbild");
|
||||
|
||||
/* Ein winziges, echtes PNG (1x1). Von Hand gebaut, damit die Pruefung
|
||||
keine Datei von aussen braucht. */
|
||||
const echtesPng = Buffer.from(
|
||||
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
|
||||
"base64");
|
||||
/* Ein GROSSES echtes PNG (1200x1200).
|
||||
|
||||
Der erste Anlauf nahm ein 1x1-Pixel-Bild -- klein, schnell, von Hand
|
||||
gebaut. Es hat aber den schlimmsten Fehler durchgelassen, den es beim
|
||||
Profilbild gibt: Die Regel .wer__bild in der Kopfleiste fehlte
|
||||
komplett, ein <img> ohne Groessenangabe nimmt seine natuerliche
|
||||
Groesse an, und das Bild lag ueber der halben Startseite. Ein
|
||||
1x1-Bild kann nichts ueberdecken -- die Pruefung war gruen, der
|
||||
Fehler war da, und gesehen hat ihn Filipe.
|
||||
|
||||
Deshalb jetzt ein Bild in der Groesse, die wirklich hochgeladen wird.
|
||||
Erzeugt statt eingecheckt: keine Binaerdatei im Repo, und die Groesse
|
||||
steht sichtbar hier. */
|
||||
const echtesPng = await (async () => {
|
||||
const { chromium: c } = await import(
|
||||
"file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
|
||||
const b = await c.launch();
|
||||
const s2 = await b.newPage();
|
||||
await s2.setContent("<html><body></body></html>");
|
||||
const daten = await s2.evaluate(() => {
|
||||
const c2 = document.createElement("canvas");
|
||||
c2.width = 1200; c2.height = 1200;
|
||||
const g = c2.getContext("2d");
|
||||
g.fillStyle = "#c0392b"; g.fillRect(0, 0, 1200, 1200);
|
||||
g.fillStyle = "#ffffff"; g.fillRect(200, 200, 800, 800);
|
||||
return c2.toDataURL("image/png");
|
||||
});
|
||||
await b.close();
|
||||
return Buffer.from(daten.split(",")[1], "base64");
|
||||
})();
|
||||
|
||||
const bildHoch = (keks, puffer) => hole("/workspace/api/steckbrief/bild", keks, {
|
||||
method: "POST", headers: { "Content-Type": "application/octet-stream" }, body: puffer });
|
||||
@@ -283,6 +308,28 @@ const browser = await chromium.launch();
|
||||
ok(r.hatBild, "das hochgeladene Bild wird angezeigt");
|
||||
ok(/50%/.test(r.bildRund), `und ist rund (${r.bildRund})`);
|
||||
ok(r.obenBild, "es steht auch oben rechts in der Kopfleiste");
|
||||
/* UND ES BLEIBT DORT. Das eigentliche Ergebnis des Fehlers vom
|
||||
01.09.2026: Ein 1200 px grosses Bild in einem 28 px grossen Feld
|
||||
muss 28 px gross sein -- nicht 1200. Gemessen wird das echte
|
||||
Rechteck, nicht die Absicht. */
|
||||
const bildMass = await seite.evaluate(() => {
|
||||
const b = document.querySelector(".wer__bild");
|
||||
if (!b) return null;
|
||||
const r = b.getBoundingClientRect();
|
||||
const eltern = b.parentElement.getBoundingClientRect();
|
||||
return { b: Math.round(r.width), h: Math.round(r.height),
|
||||
eb: Math.round(eltern.width), eh: Math.round(eltern.height),
|
||||
ueber: Math.round(Math.max(r.right - eltern.right, r.bottom - eltern.bottom)) };
|
||||
});
|
||||
ok(bildMass && bildMass.b <= bildMass.eb + 1 && bildMass.h <= bildMass.eh + 1,
|
||||
`das Bild bleibt in seinem Feld (${bildMass?.b}x${bildMass?.h} in `
|
||||
+ `${bildMass?.eb}x${bildMass?.eh})`);
|
||||
ok(bildMass && bildMass.ueber <= 1,
|
||||
`und ragt nirgends heraus (${bildMass?.ueber}px)`);
|
||||
/* Auch die ganze Seite darf davon nichts merken. */
|
||||
const seitenUeber = await seite.evaluate(() =>
|
||||
document.documentElement.scrollWidth - document.documentElement.clientWidth);
|
||||
ok(seitenUeber <= 0, `die Seite laeuft dadurch nicht ueber (${seitenUeber}px)`);
|
||||
ok(r.ueber504 <= 0, `nichts steht über (${r.ueber504}px)`);
|
||||
ok(konsole.length === 0, `keine Fehler in der Konsole${konsole.length ? " -> " + konsole.join(" | ") : ""}`);
|
||||
|
||||
@@ -304,27 +351,71 @@ const browser = await chromium.launch();
|
||||
await kontext.close();
|
||||
}
|
||||
|
||||
/* Ein Scout hat denselben Steckbrief -- er ist nicht nur fuer Creator. */
|
||||
{
|
||||
/* ---------------------------------------------------------------------
|
||||
ZWEI SEITEN, ZWEI DINGE (Fund vom 01.09.2026)
|
||||
|
||||
Auf profil.html steht die Betreuungsakte eines ANDEREN Menschen. Der
|
||||
eigene Steckbrief mittendrin ergab zwei Personen auf einem Bildschirm:
|
||||
oben "Profil: SpongBobSchwammKopf", darunter "MEIN PROFIL: Dogfather".
|
||||
Niemand konnte sagen, welche Angabe zu wem gehoert.
|
||||
|
||||
Deshalb: Scouts, Manager und DogFather haben den Steckbrief auf einer
|
||||
EIGENEN Seite. Auf der Akte darf er bei ihnen nicht mehr auftauchen.
|
||||
Ein Creator behaelt beides zusammen -- er hat nur eine Seite und sieht
|
||||
dort ausschliesslich sich selbst.
|
||||
--------------------------------------------------------------------- */
|
||||
console.log("\n=== Steckbrief und Creator-Akte sind getrennt");
|
||||
for (const [rolle, code, name, erwartetAufAkte] of [
|
||||
["admin", "CODE-DOGI-0001", "Filipe", false],
|
||||
["scout", "CODE-SCOU-0001", "Patrick", false],
|
||||
["creator", "CODE-ANNA-0001", "Tili", true],
|
||||
]) {
|
||||
const kontext = await browser.newContext({ viewport: { width: 1280, height: 900 } });
|
||||
const seite = await kontext.newPage();
|
||||
await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
|
||||
await seite.click('.rolle[data-rolle="scout"]');
|
||||
await seite.fill("#code", "CODE-SCOU-0001");
|
||||
await seite.click(`.rolle[data-rolle="${rolle}"]`);
|
||||
await seite.fill("#code", code);
|
||||
await seite.click("button[type=submit]");
|
||||
await seite.waitForURL("**/start.html", { timeout: 15000 });
|
||||
await seite.waitForTimeout(700);
|
||||
|
||||
/* 1. Die Kacheln auf der Startseite. */
|
||||
const kacheln = await seite.evaluate(() =>
|
||||
[...document.querySelectorAll(".kachel__name")].map((k) => k.textContent));
|
||||
if (erwartetAufAkte) {
|
||||
ok(!kacheln.includes("Mein Steckbrief") && kacheln.includes("Mein Profil"),
|
||||
`${name} (${rolle}): eine Kachel "Mein Profil" (${kacheln.filter((k) => /Profil|Steckbrief/.test(k)).join(", ")})`);
|
||||
} else {
|
||||
ok(kacheln.includes("Mein Steckbrief") && kacheln.includes("Creator-Profile"),
|
||||
`${name} (${rolle}): getrennte Kacheln (${kacheln.filter((k) => /Profil|Steckbrief/.test(k)).join(", ")})`);
|
||||
}
|
||||
|
||||
/* 2. Auf der Akte -- steht dort der eigene Steckbrief? */
|
||||
await seite.goto(BASIS + "/workspace/profil.html", { waitUntil: "networkidle" });
|
||||
await seite.waitForTimeout(800);
|
||||
const r = await seite.evaluate(() => ({
|
||||
sichtbar: !document.getElementById("steckbrief")?.hidden,
|
||||
await seite.waitForTimeout(900);
|
||||
const aufAkte = await seite.evaluate(() =>
|
||||
document.getElementById("steckbrief")?.hidden === false);
|
||||
ok(aufAkte === erwartetAufAkte,
|
||||
` und auf der Akte ${erwartetAufAkte ? "steht" : "steht KEIN"} eigener Steckbrief (${aufAkte})`);
|
||||
|
||||
/* 3. Die eigene Seite zeigt ihn -- fuer jede Rolle. */
|
||||
await seite.goto(BASIS + "/workspace/steckbrief.html", { waitUntil: "networkidle" });
|
||||
await seite.waitForTimeout(900);
|
||||
const eigen = await seite.evaluate(() => ({
|
||||
da: document.getElementById("steckbrief")?.hidden === false,
|
||||
name: document.getElementById("sb-name")?.textContent,
|
||||
rolle: document.getElementById("sb-rolle")?.textContent,
|
||||
}));
|
||||
ok(r.sichtbar && r.name === "Patrick" && r.rolle === "Scout",
|
||||
`auch ein Scout hat sein Profil (${r.name} / ${r.rolle})`);
|
||||
ok(eigen.da && eigen.name === name,
|
||||
` die eigene Seite zeigt ${name} (${eigen.name})`);
|
||||
await kontext.close();
|
||||
}
|
||||
|
||||
/* Der alte Block an dieser Stelle prüfte, ob ein Scout seinen Steckbrief
|
||||
auf profil.html sieht. Seit der Trennung sieht er ihn dort ausdruecklich
|
||||
NICHT mehr -- die Pruefung darueber deckt beide Seiten je Rolle ab und
|
||||
ersetzt ihn vollstaendig. Eine Pruefung stehen zu lassen, die das
|
||||
Gegenteil des gewollten Verhaltens verlangt, waere schlimmer als keine. */
|
||||
|
||||
await browser.close();
|
||||
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
|
||||
console.log(fehler ? `\n${fehler} Prüfung(en) fehlgeschlagen.` : "\nAlles in Ordnung.");
|
||||
|
||||
Reference in New Issue
Block a user