Kampagnen-Kacheln: gegliederte Texte, Geschenke mit Preis, aufklappbar
Filipe, mit einem Bildschirmfoto des Regelblocks: "man soll die titel
in den texten besser erkennen und sehen was zu was passt. ich will
auch dass man sieht welche geschenke bei dem event zaehlen und so.
ich will alle informationen die moeglich sind wenn man den link
hochlaedt. ... auch wenn man teilt soll es einfach perfekt sein. man
soll alle infos sehen die man braucht. die kacheln von den events
soll auch nicht so lang sein, die soll man aufklappen koennen. genau
wie eine trennung fuer heute, letzte woche letzten monat und so."
DER FEHLER LAG NICHT IM TEXT, SONDERN IN SEINER ANZEIGE. Im Feld
stand die ganze Zeit eine Gliederung -- Hinweise mit "* ", eine
Ueberschrift mit Untertitel hinter einem Gedankenstrich, Absaetze
ohne Zeichen, Aufzaehlungen mit "- ". Die Kachel hat daraus mit
punkteAusText() EINE flache Liste gemacht: jede Zeile derselbe
Strich, alle gleich gross.
gliederung() liest die Gliederung, die schon dasteht, statt
den Text umzuschreiben. Die beiden Kampagnen, die
heute in der Datenbank liegen, sehen dadurch
sofort richtig aus -- ohne Umstellung.
Geschenke kommen aus der gelesenen LISTE, nicht aus dem
Text, und stehen OHNE Aufklappen auf der Kachel.
Aufklappen alles Uebrige hinter einem Druck: gemessen 555 px
weniger je Kachel bei Gipfelstuermer.
Gruppen je Spalte laeuft / kommt / vorbei, Vergangenes
nach diese Woche, dieser Monat, aelter.
NEU GELESEN (stand in allen vier gespeicherten Seiten und wurde nie
angesehen): die Rangliste mit ihren Gruppen ("Superstars" bis
"5. Liga", bei Glow Up "Team Glow"/"Team Shine"), die Beschreibung je
Missionsgruppe, der Steckbrief (Kurznummer, Markt, Sprache, Zone),
der zweite Bildbaustein, und Ueberschriften INNERHALB der Klapptexte
-- "WELCHE LIGA BIN ICH?" hat jetzt sechs eingerueckte Unterpunkte
statt zwoelf gleichrangiger Zeilen.
EVENT_TEXT_MAX 6000 -> 20000. Der Regeltext von Gipfelstuermer ist
7679 Zeichen lang; es fielen bisher jedes Mal rund 1600 Zeichen
echter Inhalt weg. Die Zahl steht jetzt an EINER Stelle.
TEILEN: Was die KAMPAGNE sagt, geht hinaus (Aufgaben, Geschenke,
Regeln) -- wer WIR sind, nicht (Name, Rolle, Haus, Kampagnennummer,
Steckbrief). Und keine Hinweiszeile: "Die Preise konnten nicht
gelesen werden -- bitte nachtragen" ist eine Notiz an DogFather und
hat auf einer Seite, die er in Discord postet, nichts zu suchen.
BERICHTIGT, WEIL NACHGEMESSEN:
- Number(null) ist 0 und 0 ist endlich -- "Feuerwerk" bekam an drei
Stellen "0 Coins" angeschrieben, also eine falsche Preisangabe.
- Ein Kommentar im Leser behauptete, der Wertungszeitraum weiche
vom Kampagnenzeitraum ab. Nachgemessen ist er in allen drei
Seiten mit Rangliste auf die Millisekunde gleich; ich hatte zwei
verschiedene Kampagnen verglichen.
- bild-kampagne.mjs verlangte "jede Kachel traegt den Ton ihrer
Seite" und war damit seit dem 07.10. rot, weil an dem Tag bewusst
das Gegenteil entschieden wurde (Zustandston, Seitenkante). Nicht
aufgefallen, weil nach dem Lauf nur die Zahl der MESSUNGEN notiert
wurde, nicht die der FEHLER.
- .kv-seite > .eintrag-karte wird .kv-seite .eintrag-karte: Die
Karten haengen durch die Gruppen eine Ebene tiefer. Das waere der
fuenfte Direktkind-Selektor gewesen, der nach einem Umbau still
ausfaellt -- diesmal vorher gesehen.
GEPRUEFT: 186 (lesen, +58), 148 (Route/Teilen, +25), 158 (Kachel,
+64), 67 (Agentur, +5), 67 Messungen (Bild, +14), dazu struktur,
css-klassen, zeichen, deutsche-texte, tippziele, lesbarkeit und
haus-trennung (107, unveraendert). Sechs Gegenproben: alle sechs
Sabotagen werden bemerkt, alle Dateien byte-gleich wiederhergestellt.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+161
-17
@@ -16,7 +16,13 @@
|
||||
|
||||
Aufrufen mit: node server/bild-kampagne.mjs
|
||||
*/
|
||||
import { mkdtempSync, rmSync } from "node:fs";
|
||||
import { mkdtempSync, rmSync, readFileSync } from "node:fs";
|
||||
import { brotliDecompressSync } from "node:zlib";
|
||||
/* DER ECHTE LESER (07.10.2026) -- damit auf dem Bild eine Kampagne
|
||||
steht, die wirklich so auf tiktok.com stand, und keine nachgebaute.
|
||||
Ohne Netz: Die Seite liegt als Datei in server/pruefdaten und wird
|
||||
von pruef-kampagne-lesen.mjs an ihrer Pruefsumme festgehalten. */
|
||||
import { leseKampagne, regelnText, aufgabenText } from "./kampagne-lesen.mjs";
|
||||
import { tmpdir } from "node:os";
|
||||
import { join } from "node:path";
|
||||
import { notbremse } from "./helfer-notbremse.mjs";
|
||||
@@ -90,24 +96,50 @@ const tagHin = (v) => {
|
||||
const z = (n) => String(n).padStart(2, "0");
|
||||
return `${x.getFullYear()}-${z(x.getMonth() + 1)}-${z(x.getDate())}`;
|
||||
};
|
||||
function event(titel, text, von, bis, auf, reg, kampagneId) {
|
||||
function event(titel, text, von, bis, auf, reg, kampagneId, daten) {
|
||||
d.prepare(`INSERT INTO eintraege
|
||||
(bereich, art, titel, text, datum, event_ende, event_aufgaben, event_regeln,
|
||||
dringlichkeit, status, nur_leitung, erstellt, erstellt_von, haus, kampagne_id)
|
||||
VALUES ('agentur','kampagne',?,?,?,?,?,?,?,'offen',0,?,?,NULL,?)`)
|
||||
dringlichkeit, status, nur_leitung, erstellt, erstellt_von, haus, kampagne_id,
|
||||
kampagne_daten)
|
||||
VALUES ('agentur','kampagne',?,?,?,?,?,?,?,'offen',0,?,?,NULL,?,?)`)
|
||||
.run(titel, text, von, bis, auf, reg,
|
||||
bis < tagHin(7) ? "hoch" : "mittel", j, idDogi, kampagneId);
|
||||
bis < tagHin(7) ? "hoch" : "mittel", j, idDogi, kampagneId,
|
||||
daten === undefined || daten === null ? null : JSON.stringify(daten));
|
||||
}
|
||||
|
||||
/* ==== EINE ECHTE KAMPAGNE, NICHT EINE NACHGEBAUTE (07.10.2026) ==
|
||||
|
||||
Die uebrigen Kacheln hier sind von Hand getippt, und das ist fuer
|
||||
ihren Zweck richtig: kurze, berechenbare Daten fuer Abstaende und
|
||||
Toene. Fuer die Gliederung taugt das nicht. „KAMPAGNENZEITPLAN"
|
||||
mit zwei Zeilen zeigt weder Geschenke mit Coinpreis noch
|
||||
Unterabschnitte noch einen Steckbrief -- also waere auf dem Bild
|
||||
nichts von dem zu sehen, worum es Filipe ging.
|
||||
|
||||
Deshalb geht EINE Kachel durch den echten Leser: dieselbe
|
||||
gespeicherte Seite, die pruef-kampagne-lesen.mjs an ihrer
|
||||
Pruefsumme festhaelt. Was auf dem Bild steht, hat damit wirklich
|
||||
auf tiktok.com gestanden.
|
||||
|
||||
KEIN NETZ: Die Seite liegt als Datei in server/pruefdaten. */
|
||||
const echteSeite = brotliDecompressSync(
|
||||
readFileSync(new URL("./pruefdaten/kampagne-gipfelstuermer.html.br", import.meta.url)))
|
||||
.toString("utf8");
|
||||
const echt = leseKampagne(echteSeite);
|
||||
event("LIVE Glow Up", "Eine vierwöchige Wachstums-Challenge für deine LIVEs.",
|
||||
tagHin(-2), tagHin(4),
|
||||
tagHin(-9), tagHin(-1),
|
||||
"Deine täglichen LIVE Missionen\nDeine wöchentliche Missionen",
|
||||
"KAMPAGNENZEITPLAN\n· Woche 1: 5. - 11.10.\n· Woche 2: 12. - 18.10.",
|
||||
"7690927903777262344");
|
||||
event("Gipfelstürmer", "Bereit für Alpen-Vibes in deinem LIVE?",
|
||||
tagHin(-9), tagHin(-1),
|
||||
"1 Diamant = 1 Punkt\nDreifache Punkte für Kampagnengeschenke",
|
||||
"BELOHNUNGEN\nSuperstars: Top 1 = 60.000 Diamanten",
|
||||
"7691493175936699143");
|
||||
/* LAEUFT (frueher: vorbei). So steht sie in der offenen Gruppe und
|
||||
ist auf dem Bild zu sehen. „LIVE Glow Up" uebernimmt dafuer den
|
||||
Zustand „vorbei" -- die drei Zustaende bleiben also vertreten,
|
||||
und die Tonmessung weiter unten misst weiterhin drei
|
||||
verschiedene. */
|
||||
event("Gipfelstürmer", echt.kuer.einleitung || "Bereit für Alpen-Vibes in deinem LIVE?",
|
||||
tagHin(-3), tagHin(10),
|
||||
aufgabenText(echt.kuer), regelnText(echt.kuer, echt.hinweise),
|
||||
"7691493175936699143", echt.auszug);
|
||||
event("Spicy Media Teamabend", "Unser eigener Abend — Rückblick und Planung.",
|
||||
tagHin(3), tagHin(3),
|
||||
"Pünktlich um 20 Uhr da sein\nEinen Punkt für die Runde mitbringen",
|
||||
@@ -400,10 +432,24 @@ for (const [breite, name] of [[1400, 'Am Rechner'], [412, 'Auf dem Handy']]) {
|
||||
zahl: s.querySelector(".kv-seite__zahl")?.textContent?.trim(),
|
||||
...r(s),
|
||||
ton: getComputedStyle(s).getPropertyValue("--kv-ton").trim(),
|
||||
karten: [...s.querySelectorAll(".eintrag-karte")].map((k) => ({
|
||||
titel: k.querySelector(".eintrag-karte__titel, h3, h2")?.textContent?.trim()?.slice(0, 28),
|
||||
ton: getComputedStyle(k).getPropertyValue("--ton").trim(),
|
||||
})),
|
||||
karten: [...s.querySelectorAll(".eintrag-karte")].map((k) => {
|
||||
const st = getComputedStyle(k);
|
||||
return {
|
||||
titel: k.querySelector(".eintrag-karte__titel, h3, h2")?.textContent?.trim()?.slice(0, 28),
|
||||
ton: st.getPropertyValue("--ton").trim(),
|
||||
/* ZWEI TOENE, ZWEI KANAELE (siehe die Begruendung bei der
|
||||
Pruefung unten): `--ton` sagt den ZUSTAND, `--kv-ton`
|
||||
die SEITE. Gemessen werden beide, sonst kann die
|
||||
Pruefung sie nicht auseinanderhalten. */
|
||||
kvTon: st.getPropertyValue("--kv-ton").trim(),
|
||||
stand: k.dataset.event || null,
|
||||
/* Und ob der Seitenton wirklich GEZEICHNET wird. Ein
|
||||
Merkmal, das gesetzt ist, aber nichts malt, ist keine
|
||||
Auskunft -- derselbe Fehler wie beim Farbpunkt am
|
||||
07.10.2026, der 10 statt 22 px breit war. */
|
||||
bild: st.backgroundImage.slice(0, 200),
|
||||
};
|
||||
}),
|
||||
}));
|
||||
const kopfA = t.querySelector('.kv-seite[data-seite="tiktok"] .kv-seite__titel');
|
||||
const zahlA = t.querySelector('.kv-seite[data-seite="tiktok"] .kv-seite__zahl');
|
||||
@@ -429,8 +475,63 @@ for (const [breite, name] of [[1400, 'Am Rechner'], [412, 'Auf dem Handy']]) {
|
||||
"links TikTok, rechts die Agentur");
|
||||
ok(mass.seiten[0].ton !== mass.seiten[1].ton,
|
||||
`jede Seite hat ihren eigenen Ton (${mass.seiten[0].ton} / ${mass.seiten[1].ton})`);
|
||||
ok(mass.seiten.every((s) => s.karten.every((k) => k.ton === s.ton)),
|
||||
"und jede Kachel traegt den Ton ihrer Seite");
|
||||
/* ==== ZWEI TOENE, ZWEI KANAELE (berichtigt 07.10.2026) =======
|
||||
|
||||
HIER STAND `k.ton === s.ton` -- „jede Kachel traegt den Ton
|
||||
ihrer Seite". Diese Zeile war ROT, und zwar schon vor dem
|
||||
heutigen Umbau: Am 07.10.2026 wurde bewusst entschieden, dass
|
||||
die Kachel den Ton ihres ZUSTANDS traegt (laeuft gruen, kommt
|
||||
blau, vorbei stumpf) und die SEITE eine eigene Kante links
|
||||
bekommt. Die Pruefung hier wurde dabei nicht mitgezogen und
|
||||
widersprach seitdem dem eigenen Entwurf.
|
||||
|
||||
SIE IST NIEMANDEM AUFGEFALLEN, weil nach dem Lauf nur die
|
||||
Zahl der Messungen notiert wurde („53 Messungen") und nicht
|
||||
die Zahl der Fehler. Genau davor warnt CLAUDE.md seit dem
|
||||
28.08.2026 -- und diesmal hat es nicht die Zahl der Pruefungen
|
||||
getroffen, sondern die der Fehler. Beides gehoert verglichen.
|
||||
|
||||
WARUM DER ZUSTAND GEWINNT: Ob etwas LAEUFT oder VORBEI ist,
|
||||
entscheidet, ob man heute etwas tut. Woher es kommt, steht
|
||||
ohnehin zweimal da -- in der Spaltenueberschrift und auf dem
|
||||
Herkunftsschild der Kachel.
|
||||
|
||||
GEPRUEFT WIRD JETZT BEIDES, getrennt: der Zustandston am
|
||||
`data-event` der Kachel, der Seitenton daran, dass er bis zur
|
||||
Kachel durchkommt UND dort wirklich gezeichnet wird. */
|
||||
const ZUSTAND_TON = {
|
||||
laeuft: "#cace02", kommt: "#5b8fd4", vorbei: "#6b7686",
|
||||
};
|
||||
const alleKarten = mass.seiten.flatMap((s) =>
|
||||
s.karten.map((k) => ({ ...k, seitenTon: s.ton })));
|
||||
ok(alleKarten.length >= 2,
|
||||
`${alleKarten.length} Kacheln in den Spalten (sonst misst das Folgende nichts)`);
|
||||
const falscheToene = alleKarten.filter((k) =>
|
||||
ZUSTAND_TON[k.stand] && k.ton.toLowerCase() !== ZUSTAND_TON[k.stand]);
|
||||
ok(falscheToene.length === 0,
|
||||
`jede Kachel traegt den Ton ihres ZUSTANDS `
|
||||
+ `(${alleKarten.map((k) => `${k.stand}=${k.ton}`).join(", ")})`);
|
||||
/* GEGENPROBE: Die Toene sind nicht alle gleich -- sonst waere
|
||||
„jeder Zustand hat einen eigenen" bei einer einzigen Farbe
|
||||
auch gruen. */
|
||||
ok(new Set(alleKarten.map((k) => k.ton)).size >= 2,
|
||||
`und verschiedene Zustaende verschiedene Toene `
|
||||
+ `(${[...new Set(alleKarten.map((k) => k.ton))].join(" / ")})`);
|
||||
|
||||
/* DER SEITENTON KOMMT BIS ZUR KACHEL ... */
|
||||
ok(alleKarten.every((k) => k.kvTon === k.seitenTon),
|
||||
`der Seitenton erbt bis in jede Kachel `
|
||||
+ `(${alleKarten.map((k) => k.kvTon).join(", ")})`);
|
||||
/* ... UND WIRD DORT GEZEICHNET. `--kv-ton` gesetzt zu haben,
|
||||
heisst noch nicht, dass man etwas sieht: Der Verlauf fuer die
|
||||
Kante links steht in `background-image`, und wenn die Regel
|
||||
dafuer ausfaellt (etwa weil ein Direktkind-Selektor nach einem
|
||||
Umbau nicht mehr greift), ist das Merkmal da und die Kante
|
||||
weg. Geprueft wird deshalb der GEZEICHNETE Verlauf. */
|
||||
const mitKante = alleKarten.filter((k) => /gradient/.test(k.bild || ""));
|
||||
ok(mitKante.length === alleKarten.length,
|
||||
`und jede Kachel zeichnet ihre Kante wirklich `
|
||||
+ `(${mitKante.length} von ${alleKarten.length})`);
|
||||
if (breite >= 820) {
|
||||
ok(mass.nebeneinander, "sie stehen nebeneinander");
|
||||
ok(Math.abs(mass.seiten[0].b - mass.seiten[1].b) <= 2,
|
||||
@@ -502,6 +603,49 @@ for (const [breite, name] of [[1400, 'Am Rechner'], [412, 'Auf dem Handy']]) {
|
||||
|
||||
const t2 = await seite.$(".kv-trennung");
|
||||
await t2.screenshot({ path: `server/bild-kampagne-trennung-${breite}.png` });
|
||||
|
||||
/* ---- UND EINMAL AUFGEKLAPPT (07.10.2026) ---------------------------
|
||||
|
||||
Das Bild oben zeigt, dass die Kachel KURZ ist. Es zeigt nicht, was
|
||||
dahinter steht -- und genau darum ging es Filipe zuerst: „man soll
|
||||
die titel in den texten besser erkennen und sehen was zu was
|
||||
passt." Also ein zweites Bild mit offenem Kasten.
|
||||
|
||||
NUR DIE EINE KACHEL, nicht das ganze Brett: Mit 13 Abschnitten
|
||||
waere das Bild sonst mehrere tausend Pixel hoch und niemand sieht
|
||||
etwas. */
|
||||
const gipfel = await seite.evaluateHandle(() => {
|
||||
const k = [...document.querySelectorAll('.eintrag-karte[data-eventkarte="ja"]')]
|
||||
.find((x) => x.textContent.includes("Gipfelstürmer"));
|
||||
k?.querySelector(".ev-mehr__knopf")?.click();
|
||||
return k;
|
||||
});
|
||||
await seite.waitForTimeout(400);
|
||||
const offen = await seite.evaluate(() => {
|
||||
const k = [...document.querySelectorAll('.eintrag-karte[data-eventkarte="ja"]')]
|
||||
.find((x) => x.textContent.includes("Gipfelstürmer"));
|
||||
return {
|
||||
auf: k?.querySelector(".ev-mehr__inhalt")?.hidden === false,
|
||||
titel: [...(k?.querySelectorAll(".ev-abschnitt__titel") || [])]
|
||||
.map((h) => h.textContent.trim()).slice(0, 5),
|
||||
stufen: [...(k?.querySelectorAll(".ev-abschnitt") || [])]
|
||||
.map((a) => a.dataset.stufe),
|
||||
};
|
||||
});
|
||||
ok(offen.auf === true, `der Infokasten laesst sich aufklappen (${offen.auf})`);
|
||||
/* DIE ZAHL GEHOERT IN DIE BEDINGUNG, nicht nur in den Meldetext:
|
||||
Ein Bild von einem leeren Kasten waere sonst genauso gruen. */
|
||||
ok(offen.titel.length >= 3,
|
||||
`und zeigt die Ueberschriften der Kampagne: ${JSON.stringify(offen.titel)}`);
|
||||
ok(offen.stufen.includes("2") && offen.stufen.includes("3"),
|
||||
`auf zwei Stufen, nicht alle gleichrangig `
|
||||
+ `(${offen.stufen.filter((s) => s === "2").length}x Stufe 2, `
|
||||
+ `${offen.stufen.filter((s) => s === "3").length}x Stufe 3)`);
|
||||
if (gipfel) {
|
||||
await gipfel.asElement()?.screenshot({
|
||||
path: `server/bild-kampagne-infos-${breite}.png`,
|
||||
});
|
||||
}
|
||||
await ctx.close();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user