Das Rudel meint den ganzen Raum -- und die Kachelfarbe wird ein Ring
Zwei Auftraege vom 23.09.2026.
SCREEN 1: "da steht links immer noch der treff anstatt das rudel"
Und er hatte recht, auf eine Art, die niemand sehen konnte:
TREFF_NAME stand schon seit der Umbenennung auf "Das Rudel". Nur
setzt treffRaumId() den Namen ausschliesslich BEIM ANLEGEN -- der
Raum existierte laengst, also blieb die Zeile in der Datenbank auf
"Der Treff" stehen. Im Code das eine, auf dem Bildschirm das andere.
Dieselbe Falle stand direkt nebenan schon beschrieben ("drei Stellen,
von denen die dritte vergessen wird") -- die Vorsorge galt aber nur
fuer die Teilnehmer, nicht fuer den Namen. Eine halbe Selbstheilung
heilt die andere Haelfte nicht. Jetzt gleicht treffAngleichen() auch
den Namen ab; eine kuenftige Umbenennung ist wieder eine Zeile.
(IS NOT statt !=: Bei NULL ergaebe != in SQLite NULL, und die Zeile
bliebe unveraendert liegen.)
"und wenn wir da im chat @rudel machen will ich dass jeder in dem
chat markiert wird. nicht nur team ... und sehr wichtig ich rede nur
von dem chat wo die ganze community auch drin ist."
Bis heute erreichte der Ruf ueberall nur Team Dogi. Die Begruendung
stand im Code und war nicht falsch -- im Rudel-Raum sitzt die
Community. Genau das will Filipe jetzt, und zwar nur dort:
im Rudel-Raum -> alle, die drin sind
ueberall sonst -> Team Dogi, unveraendert
Was die alte Sorge entschaerft: RUFEN darf weiterhin nur Team Dogi --
kein Zuschauer kann alle wecken. Und die Nachtruhe gilt dort ohnehin.
darf_rudel folgt derselben Frage. Sonst entstuende ein stiller
Widerspruch: Ein Modi mit neun Zuschauern und ohne zweites
Teammitglied traefe mit @rudel neun Leute -- der Vorschlag beim
Tippen waere aber ausgeblendet. Die Funktion gaebe es, und niemand
faende sie.
Das Schild sagt jetzt die Wahrheit: "alle in diesem Chat" statt
"alle im Team". Stuende dort weiter das alte, waere es im Rudel-Raum
gelogen -- und zwar nach unten, also in die Richtung, in der man
leichtfertig drueckt.
Gegenprobe in pruef-erwaehnung: In der Testgruppe sitzen DogFather
und zwei Scouts; ein @rudel dort ruft NIEMANDEN. Waere die Regel
versehentlich im ganzen Haus aktiv, waeren die Scouts markiert.
"sonst nichts anfassen" ist damit gemessen, nicht versprochen.
SCREEN 2: "so eine art diagramm, wo man mit einem kreis herum gehen
kann und die farbe ganz genau selber auswaehlen kann"
Der Haken daran ist nicht die Optik. Die zwoelf Kacheln waren
GERECHNET, damit niemand sich unlesbar machen kann -- alle auf
derselben Leuchtdichte. Ein Farbkreis, der einfach den Farbton dreht,
wirft das weg: Ein gesaettigtes Gelb ist um ein Vielfaches heller als
ein gesaettigtes Blau, und helle Schrift ist darauf nicht mehr zu
lesen.
Der Ring ist deshalb KEINE neue Rechnung, sondern dieselbe in 360
Schritten statt in zwoelf. tools/chat-kacheln-rechnen.mjs --kreis
schreibt server/chat-kreis.js; buntest() und die Kontrastpruefung
darin gelten unveraendert. Ergebnis: ein Ring gleicher Helligkeit --
kein blendendes Gelb, kein abgesoffenes Blau. Das sieht ruhiger aus
als der uebliche Farbkreis, und genau das ist der Punkt.
Der Browser rechnet nichts. Er bekommt die 360 fertigen Farben und
legt sie in dieselbe Tabelle wie die Kacheln -- ab da ist "ton-214"
ein Schluessel wie "veilchen", und jede Stelle, die eine Farbe
nachschlaegt, funktioniert unveraendert.
Welche Kacheln neben dem Ring bleiben, wird ABGELEITET statt
aufgezaehlt: Grau hat keinen Farbton, Babyblau ist die eine helle mit
eigener Schrift. Nachgemessen liegen die elf bunten zwischen 0,0 und
2,4 von ihrer Ringfarbe entfernt, Grau bei 75,4 und Babyblau bei
192,9 -- zwischen 2,4 und 75 ist so viel Luft, dass die Schwelle
nicht knapp ist.
Gespeichert wird erst beim Loslassen. Wer einmal um den Ring fuehrt,
erzeugte sonst dreihundert Anfragen.
Gemessen (pruef-chat-neu, jetzt 32 Pruefungen, als Modi auf crew. mit
dem Finger): 265 px gross, aus 361 Farben gemalt, touch-action none
(sonst schiebt das Handy die Seite weg statt zu drehen), Drehen auf
drei Uhr ergibt genau Winkel 90, die Mitte zeigt exakt #675102,
vorgelesen als "Goldbraun, 90 Grad", in der Datenbank steht ton-90,
Pfeiltaste dreht ein Grad weiter. Und das eigentliche Versprechen:
alle 360 Toene tragen die Schrift der Blase, knappster Faktor 1,000.
Dabei zwei eigene Fehler, beide aufgeschrieben: Der erste Anlauf
wartete 30 Sekunden auf den Farbknopf -- am Handy weicht die Spalte
mit den Gespraechen zur Seite, sobald ein Chat offen ist. "Ist im
HTML" und "ist erreichbar" sind zwei Aussagen. Und die Schriftfarben
wurden an der falschen Klasse gemessen, was einen roten Haken an
einer heilen Stelle ergab.
Ausserdem: Das native confirm() beim Herausnehmen eines GIFs ist
weg -- meine eigene Abkuerzung vom Morgen. Gemeldet hat es
pruef-nachfrage, allerdings erst, nachdem der verlorene Backslash in
derselben Datei repariert war.
Zahlen: pruef-erwaehnung 122 (vorher 119), pruef-chat-neu 32
(vorher 19), pruef-nachfrage 46 bestanden.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+191
-1
@@ -232,7 +232,7 @@ console.log("\n=== 3. Der Ruf ans Rudel ===");
|
||||
});
|
||||
ok(!!liste, "ein @ oeffnet die Liste");
|
||||
ok(liste?.erster === "rudel", `der Ruf steht oben (${liste?.erster})`);
|
||||
ok(/alle im Team/i.test(liste?.zusatz || ""), `mit der Erklaerung daneben (${liste?.zusatz})`);
|
||||
ok(/alle in diesem Chat/i.test(liste?.zusatz || ""), `mit der Erklaerung daneben (${liste?.zusatz})`);
|
||||
ok((liste?.hoch || 0) >= 44 && liste?.imBild,
|
||||
`am Daumen treffbar und im Bild (${liste?.hoch} px)`);
|
||||
await frida.seite.keyboard.press("Enter");
|
||||
@@ -264,6 +264,196 @@ console.log("\n=== 3. Der Ruf ans Rudel ===");
|
||||
`gerufen wurden ${gemeint.length} -- die andere Modi und DogFather, nicht sie selbst`);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
4. DER FARBRING (23.09.2026)
|
||||
|
||||
Filipe: "anstatt sowas um die farben auszusuchen, kannst du nicht
|
||||
so eine art diagramm machen wo man mit einem kreis herum gehen kann
|
||||
und sie die farbe ganz genau selber auswaehlen kann?"
|
||||
|
||||
WAS HIER WIRKLICH AUF DEM SPIEL STEHT, ist nicht die Optik. Die
|
||||
zwoelf Kacheln waren gerechnet, damit niemand sich unlesbar machen
|
||||
kann -- alle auf derselben Leuchtdichte. Ein Ring mit freier Wahl
|
||||
ist genau die Gelegenheit, dieses Versprechen zu verlieren, und
|
||||
zwar unbemerkt: Die Farbe sieht huebsch aus, und erst die anderen
|
||||
koennen den Text nicht mehr lesen.
|
||||
|
||||
Deshalb misst diese Probe zuerst den KONTRAST und dann die
|
||||
Bedienung.
|
||||
===================================================================== */
|
||||
{
|
||||
console.log("");
|
||||
console.log("=== 4. Der Farbring ===");
|
||||
|
||||
const { KREIS } = await import("./chat-kreis.js");
|
||||
|
||||
/* ---- 4a. Das Versprechen, an allen 360 Toenen ------------------ */
|
||||
const schriftFarben = await frida.seite.evaluate(() => {
|
||||
/* AM ECHTEN ELEMENT MESSEN, nicht an einem selbstgebauten.
|
||||
Erster Anlauf legte ein <div class="chat-nachricht__blase"> an
|
||||
und las dort -- und bekam zweimal nichts zurueck. Die beiden
|
||||
Werte stehen naemlich eine Ebene hoeher, auf .chat-nachricht,
|
||||
und werden von dort vererbt. Ergebnis war ein roter Haken an
|
||||
einer Stelle, an der nichts kaputt war: die Messung war falsch,
|
||||
nicht das Programm.
|
||||
|
||||
Erst die Blase im Verlauf; gibt es keine, ein Ersatzstueck mit
|
||||
der RICHTIGEN Klasse. */
|
||||
const echt = document.querySelector(".chat-nachricht");
|
||||
const ziel = echt || document.body.appendChild(
|
||||
Object.assign(document.createElement("div"), { className: "chat-nachricht" }));
|
||||
const s2 = getComputedStyle(ziel);
|
||||
const raus = { text: s2.getPropertyValue("--blase-text").trim(),
|
||||
leise: s2.getPropertyValue("--blase-leise").trim(),
|
||||
woher: echt ? "aus dem Verlauf" : "aus einem Ersatzstueck" };
|
||||
if (!echt) ziel.remove();
|
||||
return raus;
|
||||
});
|
||||
|
||||
const zuZahl = (f) => {
|
||||
const t = /^#?([0-9a-f]{6})$/i.exec(String(f).trim());
|
||||
if (t) return [0, 2, 4].map((i) => parseInt(t[1].slice(i, i + 2), 16));
|
||||
const r = /rgba?\(([^)]+)\)/i.exec(String(f));
|
||||
return r ? r[1].split(",").slice(0, 3).map((x) => Math.round(parseFloat(x))) : null;
|
||||
};
|
||||
const linear = (v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
|
||||
const leucht = (rgb) => 0.2126 * linear(rgb[0] / 255) + 0.7152 * linear(rgb[1] / 255)
|
||||
+ 0.0722 * linear(rgb[2] / 255);
|
||||
const kontrast = (a, b) => {
|
||||
const x = leucht(a), y = leucht(b);
|
||||
return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
|
||||
};
|
||||
|
||||
const textRgb = zuZahl(schriftFarben.text);
|
||||
const leiseRgb = zuZahl(schriftFarben.leise);
|
||||
ok(!!textRgb && !!leiseRgb,
|
||||
`die Schriftfarben der Blase sind lesbar, ${schriftFarben.woher}`
|
||||
+ ` (${schriftFarben.text || "nichts"} / ${schriftFarben.leise || "nichts"})`);
|
||||
|
||||
if (textRgb && leiseRgb) {
|
||||
let schlimmster = Infinity, schlimmsterWinkel = -1, gemessen = 0;
|
||||
for (let w = 0; w < KREIS.length; w++) {
|
||||
const f = zuZahl(KREIS[w]);
|
||||
if (!f) continue;
|
||||
gemessen++;
|
||||
for (const [s3, noetig] of [[textRgb, 7], [leiseRgb, 4.8]]) {
|
||||
const v = kontrast(f, s3) / noetig;
|
||||
if (v < schlimmster) { schlimmster = v; schlimmsterWinkel = w; }
|
||||
}
|
||||
}
|
||||
/* DIE ANZAHL STEHT IN DER BEDINGUNG. Waere die Tabelle leer,
|
||||
bliebe schlimmster auf Infinity und die Zeile waere gruen,
|
||||
ohne eine einzige Farbe angesehen zu haben. */
|
||||
ok(gemessen === 360 && schlimmster >= 1,
|
||||
`alle ${gemessen} Toene des Rings tragen die Schrift der Blase`
|
||||
+ ` (knappster: Winkel ${schlimmsterWinkel}, Faktor ${schlimmster.toFixed(3)})`);
|
||||
}
|
||||
|
||||
/* ---- 4b. Steht der Ring da, und ist er zu treffen? ------------- */
|
||||
/* ERST ZURUECK ZUR LISTE -- und das ist keine Umstaendlichkeit,
|
||||
sondern der Weg, den ein Mensch am Handy geht. Der Farbknopf
|
||||
steht in der Spalte mit den Gespraechen, und die weicht auf
|
||||
einem schmalen Bildschirm zur Seite, sobald ein Gespraech offen
|
||||
ist. Der erste Anlauf dieser Probe hat genau hier 30 Sekunden
|
||||
lang auf einen Knopf gewartet, den es zwar gab, den aber niemand
|
||||
sehen konnte -- ein gutes Beispiel dafuer, dass "ist im HTML"
|
||||
und "ist erreichbar" zwei verschiedene Aussagen sind. */
|
||||
const zurueck = frida.seite.locator("#zur-liste");
|
||||
if (await zurueck.isVisible().catch(() => false)) {
|
||||
await zurueck.click();
|
||||
await frida.seite.waitForTimeout(600);
|
||||
}
|
||||
const knopfDa = await frida.seite.locator("#kachel-oeffnen").isVisible().catch(() => false);
|
||||
ok(knopfDa, "der Farbknopf ist am Handy erreichbar (ueber die Gespraechsliste)");
|
||||
if (!knopfDa) throw new Error("ohne den Knopf ist der Rest nicht messbar");
|
||||
await frida.seite.click("#kachel-oeffnen");
|
||||
await frida.seite.waitForTimeout(600);
|
||||
|
||||
const rad = await frida.seite.evaluate(() => {
|
||||
const r = document.getElementById("kachelrad-ring");
|
||||
if (!r) return null;
|
||||
const k = r.getBoundingClientRect();
|
||||
const g = getComputedStyle(r);
|
||||
return {
|
||||
breit: Math.round(k.width), hoch: Math.round(k.height),
|
||||
links: Math.round(k.left), oben: Math.round(k.top),
|
||||
imBild: k.left >= -1 && k.right <= innerWidth + 1
|
||||
&& k.top >= -1 && k.bottom <= innerHeight + 1,
|
||||
farben: (g.backgroundImage.match(/rgb\(/g) || []).length,
|
||||
fassen: g.touchAction,
|
||||
rolle: r.getAttribute("role"),
|
||||
};
|
||||
});
|
||||
ok(!!rad, "der Ring ist da");
|
||||
/* 180 px sind nicht geraten: Ein Ring, den man mit dem Daumen im
|
||||
Kreis fuehren soll, braucht sichtbar mehr als die 44 px einer
|
||||
Schaltflaeche -- sonst rutscht man beim Drehen heraus. */
|
||||
ok((rad?.breit || 0) >= 180 && rad?.imBild,
|
||||
`er passt auf den Bildschirm und ist gross genug (${rad?.breit}x${rad?.hoch} px)`);
|
||||
/* Der Verlauf muss aus VIELEN Farben bestehen. Waere die Liste
|
||||
nicht angekommen, stuende dort ein einzelner Ton -- und der Ring
|
||||
saehe aus wie eine Scheibe. */
|
||||
ok((rad?.farben || 0) >= 300, `er ist aus ${rad?.farben} Farben gemalt`);
|
||||
/* OHNE DAS SCHIEBT DAS HANDY DIE SEITE WEG, statt den Ring zu
|
||||
drehen. Genau diese Zeile ist es, die auf einem Beruehrgeraet
|
||||
ueber brauchbar und unbrauchbar entscheidet. */
|
||||
ok(rad?.fassen === "none", `Wischen dreht den Ring, statt zu scrollen (${rad?.fassen})`);
|
||||
ok(rad?.rolle === "slider", `und eine Sprachausgabe versteht ihn (${rad?.rolle})`);
|
||||
|
||||
/* ---- 4c. Drehen -- und kommt die richtige Farbe heraus? -------- */
|
||||
if (rad) {
|
||||
/* Winkel 90 heisst DREI UHR: der Verlauf beginnt oben und laeuft
|
||||
im Uhrzeigersinn. Waere die Rechnung im Browser um 90 Grad
|
||||
verdreht (der uebliche atan2-Fehler), kaeme hier eine andere
|
||||
Farbe heraus als die, die unter dem Finger liegt. */
|
||||
const mx = rad.links + rad.breit / 2;
|
||||
const my = rad.oben + rad.hoch / 2;
|
||||
const r80 = (rad.breit / 2) * 0.8;
|
||||
await frida.seite.mouse.move(mx, my - r80);
|
||||
await frida.seite.mouse.down();
|
||||
await frida.seite.mouse.move(mx + r80, my, { steps: 12 });
|
||||
await frida.seite.mouse.up();
|
||||
await frida.seite.waitForTimeout(900);
|
||||
|
||||
const stand = await frida.seite.evaluate(() => {
|
||||
const r = document.getElementById("kachelrad-ring");
|
||||
const m = document.getElementById("kachelrad-mitte");
|
||||
return { winkel: Number(r?.getAttribute("aria-valuenow")),
|
||||
wort: r?.getAttribute("aria-valuetext") || "",
|
||||
mitte: m ? getComputedStyle(m).backgroundColor : "" };
|
||||
});
|
||||
ok(Math.abs((stand.winkel || 0) - 90) <= 2,
|
||||
`nach dem Drehen auf drei Uhr steht der Ring bei ${stand.winkel} Grad (erwartet 90)`);
|
||||
|
||||
const erwartet = zuZahl(KREIS[stand.winkel] || "");
|
||||
const gezeigt = zuZahl(stand.mitte);
|
||||
ok(!!erwartet && !!gezeigt
|
||||
&& Math.abs(erwartet[0] - gezeigt[0]) <= 1
|
||||
&& Math.abs(erwartet[1] - gezeigt[1]) <= 1
|
||||
&& Math.abs(erwartet[2] - gezeigt[2]) <= 1,
|
||||
`die Mitte zeigt genau die Farbe dieses Winkels (${stand.mitte} gegen ${KREIS[stand.winkel]})`);
|
||||
ok(/\d+ Grad/.test(stand.wort) && stand.wort.length > 8,
|
||||
`und sie wird vorgelesen als "${stand.wort}"`);
|
||||
|
||||
/* ---- 4d. Wird es gespeichert? ------------------------------- */
|
||||
const db3 = new DatabaseSync(process.env.WORKSPACE_DB, { readOnly: true });
|
||||
const gespeichert = db3.prepare("SELECT chat_kachel FROM personen WHERE id = ?")
|
||||
.get(idA)?.chat_kachel;
|
||||
db3.close();
|
||||
ok(gespeichert === "ton-" + stand.winkel,
|
||||
`und in der Datenbank steht die Wahl (${gespeichert})`);
|
||||
|
||||
/* ---- 4e. Und mit der Tastatur? ------------------------------ */
|
||||
await frida.seite.focus("#kachelrad-ring");
|
||||
await frida.seite.keyboard.press("ArrowRight");
|
||||
await frida.seite.waitForTimeout(200);
|
||||
const nachher = await frida.seite.evaluate(() =>
|
||||
Number(document.getElementById("kachelrad-ring")?.getAttribute("aria-valuenow")));
|
||||
ok(nachher === (stand.winkel + 1) % 360,
|
||||
`eine Pfeiltaste dreht um genau ein Grad weiter (${stand.winkel} -> ${nachher})`);
|
||||
}
|
||||
}
|
||||
|
||||
const alleMeldungen = [...frida.meckern, ...nele.meckern];
|
||||
console.log("");
|
||||
ok(alleMeldungen.length === 0,
|
||||
|
||||
Reference in New Issue
Block a user