Der Supportverlauf: eine Zeitachse, eine Farbe je Runde
Filipe: „ich will diese komplette seite vom support viel
uebersichtlicher, profissioneller, jede runde soll auch immer eine
spezielle farbe haben und anders aufgestellt aufgeteilt sein damit
man einen viel besseren und krasseren ueberblick hat."
WAS VORHER DASTAND -- an einem Bild mit zwei Runden nachgesehen,
bevor eine Zeile angefasst wurde: vier Textzeilen untereinander,
alle in derselben Farbe. „RUNDE 1", Antwort, „Ging noch nicht · …",
„RUNDE 2". Bei fuenf Runden muss man die Runden ZAEHLEN, statt sie
zu sehen -- und wer spricht, stand nur als kleiner Name daneben.
VIER TEILE SIND NEU
1. EINE LEISTE OBEN. Ein Punkt je Runde, in ihrer Farbe, mit ihrer
Nummer -- und der Rand sagt, wie sie ausgegangen ist. Damit ist
„wie oft ging es schon hin und her?" eine Frage des Hinsehens.
Erst ab zwei Runden: bei einer waere sie ein Punkt neben nichts.
2. EINE ZEITACHSE statt einer Liste. Jede Runde haengt mit einem
Punkt an einer Linie in IHRER Farbe. Die Linie ist ein Rand an
der Runde selbst, nicht am Behaelter -- so traegt jede ihr
eigenes Stueck Achse.
3. ZWEI SPRECHRICHTUNGEN je Runde, als getrennte Kaesten:
„GEANTWORTET" in der Rundenfarbe, darunter „GING NOCH NICHT"
(Bernstein) oder „GEHT WIEDER" (gruen) oder „WARTET AUF
ANTWORT". Vorher standen beide Saetze als Absaetze untereinander
und sahen gleich aus; man musste lesen, um zu wissen, von wem
sie sind. Jetzt sagt es die Form.
4. DIE LETZTEN ZWEI OFFEN, aeltere hinter „3 fruehere Runden
zeigen". Die Leiste sagt ohnehin, wie viele es gab; im Wortlaut
braucht es nicht alle. Zwei und nicht eine: Die letzte sagt, wo
es steht, die vorletzte, woran es davor lag.
DIE FARBE WIRD GERECHNET, NICHT GEPFLEGT
`rundenTon(nr)` gibt 200 + ((nr-1) mod 4) * 32 Grad. Eine Liste mit
fuenf Farben waere die naheliegende Loesung und die falsche: Runde
sechs bekaeme keine. Diese Sorte Liste hat im Haus schon dreimal
etwas gekostet.
DER BEREICH IST ENG UND ABSICHTLICH: 200 bis 296 Grad, Blau ueber
Indigo nach Violett -- die Palette der Seite (babyblau mit lila) und
der Bereich, in dem KEINE Farbe nach „gut" oder „schlecht" aussieht.
Gruen und Bernstein sind fuer den AUSGANG reserviert; waere eine
Rundenfarbe rot, stuenden zwei Aussagen in einer Farbe.
AUGENSCHONEND: 52 % Saettigung, 64 % Helligkeit -- fuer alle Toene
gleich, und nur im CSS. Sonst waere Runde drei blasser als Runde
eins, und augenschonend ist das Gegenteil von zufaellig. Kein Neon,
kein Gluehen. Die Farbe ordnet Zeilen zu; sie schreit nicht.
UND DIE FARBE ALLEIN TRAEGT NICHTS: Die Nummer steht daneben, der
Ausgang in Worten. Fuer Vorleseprogramme gibt es statt elf Punkten
einen Satz.
EIN FUND UNTERWEGS: DIE MESSUNG MASS SEIT ZWEI TAGEN NICHTS
`mess-support-runde.mjs` schickte die Rueckmeldung noch als JSON.
Am 02.10. ist die Route auf den Kopf-Weg umgestellt worden
(`x-geht`, `x-text`); seither antwortete sie mit 400. Gemerkt hat es
niemand, weil diese Datei Bilder macht und keine Rueckgabewerte
prueft: Auf dem Bild stand danach EINE Runde statt vier, und das
sieht aus wie ein Ergebnis. Aufgefallen ist es erst, als die Bilder
vier Rundenfarben zeigen sollten.
Eine Messung, die nach einem Umbau stillschweigend etwas anderes
misst, ist schlimmer als keine -- man glaubt ihr. Sie meldet den
Fehlschlag jetzt mit Code und Text.
GEPRUEFT -- pruef-support-bilder 39 -> 52 ok
die Leiste zeigt jede Runde (5 Punkte) · mit ihrer Nummer
die ersten vier Runden haben vier verschiedene Farben (4)
und die fuenfte faengt die Reihe wieder von vorn an
Gegenprobe: sie sind nicht alle gleich (4 Farben)
auch die Rundennummern tragen ihre Farbe (2 von 2)
offen stehen die letzten zwei Runden (2)
und die aelteren sind einen Griff entfernt
jede Runde zeigt beide Seiten
aufgeklappt stehen alle da (5) · und wieder zu
auf 390 px ragt nichts heraus (0 px)
bei einer einzigen Runde gibt es keine Leiste (0)
Die Gegenprobe „sie sind nicht alle gleich" ist die wichtigste:
Waere `--ton` nicht angekommen, waeren alle Punkte grau -- und „vier
Punkte" waere gruen gewesen, ohne dass eine Farbe zu sehen ist.
Gemessen wird die ANGEZEIGTE Farbe, nicht die Zahl im Attribut.
Dazu gruen: pruef-support 104 · pruef-css-klassen · pruef-zeichen 7 ·
pruef-fingermass 5.
Eine Schriftgroesse musste nachgebessert werden: .7rem sind 11,2 px,
und unter 11,5 px faengt im Haus die Grenze an, ab der man
zusammenkneift.
NUR DAS AGENTURHAUS: Die Supportseite liegt unter `/workspace`.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+191
-24
@@ -45,6 +45,13 @@
|
||||
dasselbe Muster wie die 380 px vom 06.09. */
|
||||
let gewaehlteBilder = [];
|
||||
let bilderMax = 3;
|
||||
/* Welche Meldungen ihren GANZEN Verlauf zeigen. Ein Set und keine
|
||||
einzelne Nummer: Es koennen mehrere Karten gleichzeitig offen
|
||||
sein, und wer zwei vergleicht, will nicht, dass sich die erste
|
||||
schliesst, sobald er die zweite aufmacht.
|
||||
Nur Anzeige, deshalb hier und nicht am Server -- beim naechsten
|
||||
Laden ist wieder zu, und das ist richtig so. */
|
||||
const verlaufGanz = new Set();
|
||||
|
||||
/* Anzeige-Wörter, keine Regel. Der Server schickt den Schlüssel; was
|
||||
daraus auf dem Bildschirm wird, ist eine Frage der Sprache. */
|
||||
@@ -315,6 +322,42 @@
|
||||
EINE MELDUNG ALS KARTE
|
||||
=================================================================== */
|
||||
|
||||
/** Welchen Farbton hat Runde n?
|
||||
*
|
||||
* ==== GERECHNET, NICHT GEPFLEGT (03.10.2026) ====================
|
||||
*
|
||||
* Filipe: „jede runde soll auch immer eine spezielle farbe haben."
|
||||
*
|
||||
* Eine Liste mit fuenf Farben waere die naheliegende Loesung und
|
||||
* die falsche: Runde sechs bekaeme keine. Im Haus hat genau diese
|
||||
* Sorte Liste schon dreimal etwas gekostet (die 380-px-Schwelle,
|
||||
* die abgeschriebenen Spalten, der Kachelsatz). Eine Formel kann
|
||||
* nicht veralten.
|
||||
*
|
||||
* DER BEREICH IST ABSICHTLICH ENG: 200 bis 296 Grad, also Blau
|
||||
* ueber Indigo nach Violett. Das ist die Palette der Seite
|
||||
* (babyblau mit lila, Filipes Wunsch vom 25.09.) -- und es ist der
|
||||
* Bereich, in dem KEINE Farbe nach „gut" oder „schlecht" aussieht.
|
||||
* Gruen und Bernstein sind fuer den AUSGANG reserviert („Geht
|
||||
* wieder" / „Ging noch nicht"); waere eine Rundenfarbe rot,
|
||||
* stuenden zwei Aussagen in einer Farbe.
|
||||
*
|
||||
* VIER TOENE, DANN VON VORN. Mehr als vier Schritte in diesem
|
||||
* engen Bereich waeren nicht mehr auseinanderzuhalten -- und die
|
||||
* Nummer steht ohnehin daneben. Farbe allein traegt hier keine
|
||||
* Aussage; sie hilft dem Auge, Zeilen zuzuordnen.
|
||||
*
|
||||
* SAETTIGUNG UND HELLIGKEIT STEHEN IM CSS und sind fuer alle
|
||||
* Toene gleich. Nur so ist der Kontrast bei jeder Runde derselbe
|
||||
* -- sonst waere Runde drei blasser als Runde eins, und
|
||||
* augenschonend ist das Gegenteil von zufaellig. */
|
||||
function rundenTon(nr) {
|
||||
const n = Number(nr);
|
||||
const i = (Number.isFinite(n) && n > 0 ? n - 1 : 0) % 4;
|
||||
return 200 + i * 32;
|
||||
}
|
||||
|
||||
|
||||
/** Die Bilder einer Meldung oder einer Antwortrunde anzeigen.
|
||||
*
|
||||
* ==== EINE FUNKTION FÜR BEIDE STELLEN (02.10.2026) ==============
|
||||
@@ -401,40 +444,164 @@
|
||||
als der alte Satz. */
|
||||
const verlauf = Array.isArray(m.verlauf) ? m.verlauf : [];
|
||||
if (verlauf.length) {
|
||||
/* ==== DER VERLAUF ALS ZEITACHSE (03.10.2026) ================
|
||||
|
||||
Filipe: „ich will diese komplette seite vom support viel
|
||||
uebersichtlicher, profissioneller, jede runde soll auch immer
|
||||
eine spezielle farbe haben und anders aufgestellt aufgeteilt
|
||||
sein damit man einen viel besseren und krasseren ueberblick
|
||||
hat."
|
||||
|
||||
WAS VORHER DASTAND (gemessen an einem Bild mit zwei Runden):
|
||||
vier Textzeilen untereinander, alle in derselben Farbe --
|
||||
„RUNDE 1", Antwort, „Ging noch nicht · …", „RUNDE 2". Bei
|
||||
fuenf Runden ist das eine Wand, in der man die Runden zaehlen
|
||||
muss, statt sie zu sehen.
|
||||
|
||||
DREI DINGE SIND NEU:
|
||||
|
||||
1. EINE LEISTE OBEN, die alle Runden auf einen Blick zeigt --
|
||||
ein Punkt je Runde, in ihrer Farbe, mit ihrem Ausgang.
|
||||
Damit ist „wie oft ging es schon hin und her?" eine Frage
|
||||
des Hinsehens.
|
||||
|
||||
2. EINE ZEITACHSE statt einer Liste: links eine Linie, je
|
||||
Runde ein Punkt darauf. Man sieht die Abfolge, nicht nur
|
||||
die Reihenfolge.
|
||||
|
||||
3. ZWEI SPRECHRICHTUNGEN je Runde, deutlich getrennt: was
|
||||
die Leitung getan hat, und was der Melder daraufhin
|
||||
gesagt hat. Vorher stand beides als Absatz untereinander
|
||||
und sah gleich aus.
|
||||
|
||||
DIE FARBE WIRD GERECHNET, NICHT GEPFLEGT. Eine Liste mit
|
||||
fuenf Farben waere die Stelle, an der Runde sechs keine mehr
|
||||
bekommt -- und im Haus hat genau diese Sorte Liste schon
|
||||
dreimal etwas gekostet. Der Farbton ergibt sich aus der
|
||||
Rundennummer (siehe `rundenTon`). */
|
||||
const liste = el('div', 's-verlauf');
|
||||
for (const r of verlauf) {
|
||||
|
||||
/* DIE LEISTE -- nur ab zwei Runden. Bei einer waere sie ein
|
||||
Punkt neben einem Punkt und sagte nichts. */
|
||||
if (verlauf.length > 1) {
|
||||
const leiste = el('div', 's-rundenleiste');
|
||||
leiste.setAttribute('aria-hidden', 'true');
|
||||
for (const r of verlauf) {
|
||||
const p = el('span', 's-rundenleiste__punkt', String(r.nr));
|
||||
p.style.setProperty('--ton', String(rundenTon(r.nr)));
|
||||
if (r.urteil) p.dataset.urteil = r.urteil;
|
||||
leiste.append(p);
|
||||
}
|
||||
liste.append(leiste);
|
||||
/* FUER VORLESEPROGRAMME EIN SATZ statt elf Punkte. Die Leiste
|
||||
ist ein Bild; was sie sagt, steht hier in Worten. */
|
||||
const offen = verlauf.filter((r) => !r.urteil).length;
|
||||
liste.append(el('p', 's-nurlesen',
|
||||
`${verlauf.length} Runden`
|
||||
+ (offen ? `, die letzte wartet noch auf eine Antwort` : '')));
|
||||
}
|
||||
|
||||
/* ==== DIE LETZTEN ZWEI OFFEN (03.10.2026) ==================
|
||||
|
||||
Filipe: „damit man einen viel besseren und krasseren
|
||||
ueberblick hat."
|
||||
|
||||
Die Leiste oben sagt, WIE VIELE Runden es gab. Darunter
|
||||
braucht es nicht alle im Wortlaut: Bei sechs Runden sind das
|
||||
zwoelf Kaesten, und die Karte ist wieder die Wand, die sie
|
||||
vorher war.
|
||||
|
||||
ZWEI, NICHT EINE: Die letzte Runde ist das, was gerade
|
||||
gilt -- die vorletzte sagt, woran es davor lag. Erst beide
|
||||
zusammen erklaeren, warum es noch laeuft.
|
||||
|
||||
UND NICHT NULL: Wer die Karte oeffnet, will lesen, wo es
|
||||
steht, nicht erst klicken. Dieselbe Ueberlegung wie bei den
|
||||
Bewerbungsantworten heute Nacht -- und dort hat sie eine
|
||||
Messung bestanden: 922 px auf einem 844-px-Bildschirm waren
|
||||
zu viel, drei offene Zeilen sind es nicht. */
|
||||
const GANZ = verlaufGanz.has(m.id);
|
||||
const RUNDEN_OFFEN = 2;
|
||||
const frueher = Math.max(0, verlauf.length - RUNDEN_OFFEN);
|
||||
if (frueher && !GANZ) {
|
||||
const mehr = el('button', 's-verlauf__mehr');
|
||||
mehr.type = 'button';
|
||||
mehr.setAttribute('aria-expanded', 'false');
|
||||
mehr.append(el('span', null, frueher === 1
|
||||
? 'Eine frühere Runde zeigen'
|
||||
: `${frueher} frühere Runden zeigen`));
|
||||
mehr.append(el('span', 's-verlauf__pfeil', '▾'));
|
||||
mehr.addEventListener('click', () => {
|
||||
verlaufGanz.add(m.id);
|
||||
listeZeichnen();
|
||||
});
|
||||
liste.append(mehr);
|
||||
}
|
||||
|
||||
const sichtbar = (frueher && !GANZ) ? verlauf.slice(frueher) : verlauf;
|
||||
for (const r of sichtbar) {
|
||||
const runde = el('div', 's-runde');
|
||||
runde.style.setProperty('--ton', String(rundenTon(r.nr)));
|
||||
if (r.urteil) runde.dataset.urteil = r.urteil;
|
||||
|
||||
const kopfR = el('div', 's-runde__kopf');
|
||||
kopfR.append(el('span', 's-runde__nr', 'Runde ' + r.nr));
|
||||
if (r.von) kopfR.append(el('span', 's-runde__von', r.von));
|
||||
runde.append(kopfR);
|
||||
runde.append(el('p', 's-runde__antwort', r.antwort));
|
||||
if (r.urteil) {
|
||||
const u = el('p', 's-runde__urteil');
|
||||
u.dataset.urteil = r.urteil;
|
||||
u.append(el('span', 's-runde__urteil-wort',
|
||||
r.urteil === 'geht' ? 'Geht wieder' : 'Ging noch nicht'));
|
||||
if (r.urteil_text) u.append(document.createTextNode(' · ' + r.urteil_text));
|
||||
runde.append(u);
|
||||
if (r.am) {
|
||||
const wann = el('span', 's-runde__zeit', herZeit(r.am));
|
||||
wann.title = genau(r.am);
|
||||
kopfR.append(wann);
|
||||
}
|
||||
/* ==== DAS BILD ZUR ANTWORT (02.10.2026) ==================
|
||||
runde.append(kopfR);
|
||||
|
||||
Es steht BEI DER RUNDE, zu der es gehört, nicht oben bei
|
||||
der Meldung. Nach drei Runden ist sonst nicht mehr zu
|
||||
sehen, welches Bild zu welchem Versuch gehörte -- und
|
||||
genau diese Frage löst einen wiederkehrenden Fehler.
|
||||
/* (1) WAS DIE LEITUNG GETAN HAT. */
|
||||
const vonOben = el('div', 's-schritt');
|
||||
vonOben.dataset.wer = 'leitung';
|
||||
vonOben.append(el('span', 's-schritt__schild', 'Geantwortet'));
|
||||
vonOben.append(el('p', 's-schritt__text', r.antwort));
|
||||
runde.append(vonOben);
|
||||
|
||||
ANKLICKBAR UND IN EIGENEM FENSTER: dieselbe Behandlung wie
|
||||
die Bilder der Meldung weiter oben. Ein Bildschirmfoto in
|
||||
Briefmarkengröße beantwortet keine Frage.
|
||||
|
||||
SEIT DEM 02.10. DIESELBE FUNKTION wie oben, und bis zu
|
||||
drei Bilder. Hier stand ein eigener, fast gleicher Block —
|
||||
zwei Stellen, an denen dasselbe passiert, sind eine zu
|
||||
viel. */
|
||||
bilderAnhaengen(runde, r.bilder, 'Bildschirmfoto zur Antwort in Runde ' + r.nr);
|
||||
/* (2) WAS DER MELDER DARAUFHIN GESAGT HAT -- und die Bilder
|
||||
dazu gehoeren in DIESEN Kasten, nicht unter die Runde:
|
||||
Sie sind sein Beleg, nicht ihrer. */
|
||||
if (r.urteil) {
|
||||
const vonUnten = el('div', 's-schritt');
|
||||
vonUnten.dataset.wer = 'melder';
|
||||
vonUnten.dataset.urteil = r.urteil;
|
||||
vonUnten.append(el('span', 's-schritt__schild',
|
||||
r.urteil === 'geht' ? 'Geht wieder' : 'Ging noch nicht'));
|
||||
if (r.urteil_text) vonUnten.append(el('p', 's-schritt__text', r.urteil_text));
|
||||
bilderAnhaengen(vonUnten, r.bilder,
|
||||
'Bildschirmfoto zur Antwort in Runde ' + r.nr);
|
||||
runde.append(vonUnten);
|
||||
} else {
|
||||
/* NOCH KEINE ANTWORT -- und das wird gesagt, statt die
|
||||
Zeile weglassen. Eine Runde ohne Rueckmeldung sieht sonst
|
||||
aus wie eine, bei der etwas fehlt. */
|
||||
const warte = el('div', 's-schritt');
|
||||
warte.dataset.wer = 'warte';
|
||||
warte.append(el('span', 's-schritt__schild', 'Wartet auf Antwort'));
|
||||
runde.append(warte);
|
||||
bilderAnhaengen(runde, r.bilder,
|
||||
'Bildschirmfoto zur Antwort in Runde ' + r.nr);
|
||||
}
|
||||
liste.append(runde);
|
||||
}
|
||||
/* UND WIEDER ZU. Ein Knopf, der nur aufklappt, ist ein
|
||||
Einwegschalter -- und das faellt erst auf, wenn jemand
|
||||
zurueck will. */
|
||||
if (frueher && GANZ) {
|
||||
const weniger = el('button', 's-verlauf__mehr');
|
||||
weniger.type = 'button';
|
||||
weniger.setAttribute('aria-expanded', 'true');
|
||||
weniger.append(el('span', null, 'Nur die letzten zwei Runden'));
|
||||
weniger.append(el('span', 's-verlauf__pfeil', '▴'));
|
||||
weniger.addEventListener('click', () => {
|
||||
verlaufGanz.delete(m.id);
|
||||
listeZeichnen();
|
||||
});
|
||||
liste.append(weniger);
|
||||
}
|
||||
k.append(liste);
|
||||
} else if (m.antwort) {
|
||||
const ant = el('div', 's-antwort');
|
||||
|
||||
Reference in New Issue
Block a user