Chat: das Buehnenbild scheint durch, jeder Account bekommt seine Kachel
Hinter jeder Seite steht ohnehin eine Buehne (neun Szenen, fuer den
Chat die Lounge). Sie lag bisher hinter einer deckenden Flaeche --
vorhanden, geladen, unsichtbar. Sie durchscheinen zu lassen kostet
keine einzige Datei mehr, und auf der Adresse von Team Dogi kommt
damit von selbst deren eigene Fassung.
Das geht aber NUR, wenn der Text auf einer deckenden Kachel steht.
Sonst liegt Schrift auf einem Foto: an der dunklen Stelle lesbar, an
der hellen nicht, und beim Scrollen wechselt es. Filipes zweiter Satz
("die texte sollen immer in einer kachel sein") ist deshalb kein
Zusatzwunsch, sondern die Bedingung fuer den ersten.
Und jeder Account waehlt seinen Ton. Zwoelf Stueck, alle gleich
dunkel und gleich gesaettigt -- sie unterscheiden sich im Farbton und
in sonst nichts. Ein freier Farbwaehler klingt grosszuegiger und ist
die schlechtere Loesung: Mit ihm laesst sich Schwarz auf Schwarz
einstellen oder Neongelb, das allen anderen in die Augen sticht. Die
Kachel gehoert einem selbst, GESEHEN wird sie von allen anderen.
Gemessen: der schlechteste Kontrast liegt bei 13,9:1 (noetig 7).
Drei eigene Fehler beim Bauen, alle von der Pruefung gefunden:
1. Es gibt ZWEI Regeln fuer dieselbe Kachel (Grundform und
Feinschliff). Ich hatte nur die erste umgestellt, die zweite gewann
-- die eigene Kachel waere durchsichtig geblieben.
2. Die Pruefung las backgroundColor und pruefte den Alphawert. Eine
Kachel mit einem VERLAUF hat dort rgba(0,0,0,0); sie meldete
"durchsichtig" bei einer Kachel, die voellig deckt. Jetzt werden
zwei Bildpunkte verglichen, einmal mit und einmal ohne Buehnenbild
-- das misst die Sache selbst, nicht ihren Stellvertreter.
3. Dieselbe Pruefung suchte nur die rgba-Schreibweise. Chrome gibt
das Ergebnis von color-mix als color(srgb r g b / a) zurueck; der
Rueckfall war "Alpha 1", und sie meldete "deckt" bei einer
Flaeche, die durchscheint. Genau das Gegenteil.
pruef-chatkachel.mjs: 27 Pruefungen, mit eingebauter Gegenprobe (auf
der freien Flaeche MUSS sich etwas aendern, sonst misst der Vergleich
nichts). pruef-chat-optik und pruef-erwaehnung unveraendert gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,337 @@
|
||||
/* =====================================================================
|
||||
pruef-chatkachel.mjs — Bild hinter dem Chat, Kachel für jeden Account
|
||||
|
||||
Filipe, 20.09.2026: „ich will auch ein krasses hintergrundbild für
|
||||
den treff chat. und die texte sollen immer in einer kachel sein. und
|
||||
jeder account soll seine kachel personalisieren können."
|
||||
|
||||
---------------------------------------------------------------------
|
||||
DIE EINE FRAGE, AN DER SO ETWAS SCHEITERT: LESBARKEIT
|
||||
|
||||
Ein Bild hinter einem Chat geht nur, WENN der Text auf einer
|
||||
deckenden Kachel steht. Sonst liegt Schrift auf einem Foto — an der
|
||||
dunklen Stelle lesbar, an der hellen nicht, und beim Scrollen
|
||||
wechselt es. Deshalb wird hier nicht geprüft, ob ein Bild da ist,
|
||||
sondern ob die Kachel DECKT: gemessen am Alphawert, nicht geschätzt.
|
||||
|
||||
Und alle zwölf Töne müssen gleich gut tragen. Ein freier Farbwähler
|
||||
hätte genau hier sein Problem: Mit ihm kann sich jemand unlesbar
|
||||
machen, und sehen müssen es die anderen.
|
||||
|
||||
AUFRUF: node server/pruef-chatkachel.mjs
|
||||
===================================================================== */
|
||||
|
||||
import { mkdtempSync, rmSync } from "node:fs";
|
||||
import { tmpdir } from "node:os";
|
||||
import { join } from "node:path";
|
||||
import { portMussFreiSein } from "./helfer-port.mjs";
|
||||
import { notbremse } from "./helfer-notbremse.mjs";
|
||||
|
||||
const PORT = await portMussFreiSein(4442, "pruef-chatkachel");
|
||||
const ordner = mkdtempSync(join(tmpdir(), "ws-kachel-"));
|
||||
process.env.WORKSPACE_DB = join(ordner, "workspace.db");
|
||||
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");
|
||||
notbremse(250_000, "pruef-chatkachel");
|
||||
await new Promise((r) => setTimeout(r, 900));
|
||||
const BASIS = `http://127.0.0.1:${PORT}`;
|
||||
|
||||
process.on("uncaughtException", (f) => { console.error("ABSTURZ:", f); process.exit(7); });
|
||||
process.on("unhandledRejection", (f) => { console.error("ABSTURZ (Versprechen):", f); process.exit(7); });
|
||||
|
||||
let fehler = 0, geprueft = 0;
|
||||
const ok = (b, t) => { geprueft++; console.log((b ? " ok " : " FEHL ") + t); if (!b) fehler++; };
|
||||
|
||||
console.log("\n=== Chat: Bild dahinter, Kachel davor ===\n");
|
||||
|
||||
/* ---- 1. Die Töne, ohne Browser ----------------------------------- */
|
||||
const { CHAT_KACHELN, kachelPruefen } = await import("./workspace-chat.js");
|
||||
ok(CHAT_KACHELN.length >= 8, `es gibt genug Töne zur Auswahl (${CHAT_KACHELN.length})`);
|
||||
|
||||
/* ALLE GLEICH DUNKEL. Nur dann ist der Kontrast zur Schrift bei jedem
|
||||
gleich, und niemand kann sich unlesbar machen. Gerechnet wird die
|
||||
relative Helligkeit nach WCAG — nicht der Augenschein. */
|
||||
const helligkeit = (hex) => {
|
||||
const z = hex.replace("#", "");
|
||||
const teil = [0, 2, 4].map((i) => parseInt(z.slice(i, i + 2), 16) / 255);
|
||||
const lin = teil.map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
|
||||
return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
|
||||
};
|
||||
const kontrast = (a, b) => {
|
||||
const [h, d] = [helligkeit(a), helligkeit(b)].sort((x, y) => y - x);
|
||||
return (h + 0.05) / (d + 0.05);
|
||||
};
|
||||
const SCHRIFT = "#e8f1fa"; /* die Textfarbe des Hauses */
|
||||
|
||||
let schlechtester = 99, schlechtesterName = "";
|
||||
for (const k of CHAT_KACHELN) {
|
||||
const c = kontrast(SCHRIFT, k.farbe);
|
||||
if (c < schlechtester) { schlechtester = c; schlechtesterName = k.name; }
|
||||
}
|
||||
/* 7:1 ist die strengere WCAG-Stufe (AAA für Fließtext). Ein Chat ist
|
||||
die Seite, auf der am längsten gelesen wird — hier die niedrigere
|
||||
Schwelle zu nehmen wäre am falschen Ende gespart. */
|
||||
ok(schlechtester >= 7,
|
||||
`auch der hellste Ton trägt die Schrift noch (${schlechtesterName}: ${schlechtester.toFixed(1)}:1, nötig 7)`);
|
||||
|
||||
const spanne = Math.max(...CHAT_KACHELN.map((k) => helligkeit(k.farbe)))
|
||||
/ Math.max(1e-6, Math.min(...CHAT_KACHELN.map((k) => helligkeit(k.farbe))));
|
||||
ok(spanne < 6,
|
||||
`die Töne liegen nah beieinander (Faktor ${spanne.toFixed(1)}) — keiner sticht heraus`);
|
||||
|
||||
/* KEINE DOPPELTE FARBE. Zwei gleiche Töne wären zwei Namen für
|
||||
dieselbe Kachel — man wählt den zweiten und sieht keinen Unterschied. */
|
||||
const farben = new Set(CHAT_KACHELN.map((k) => k.farbe.toLowerCase()));
|
||||
ok(farben.size === CHAT_KACHELN.length,
|
||||
`kein Ton doppelt (${farben.size} von ${CHAT_KACHELN.length})`);
|
||||
|
||||
/* Die Prüfung am Wert selbst — sie ist der Riegel gegen alles, was
|
||||
nicht aus der Liste kommt. */
|
||||
ok(kachelPruefen("moos") === "moos", "ein bekannter Ton kommt durch");
|
||||
ok(kachelPruefen("rgb(255,0,0)") === null,
|
||||
"Gegenprobe: ein erfundener Wert nicht — sonst stünde CSS aus der Datenbank in der Seite");
|
||||
ok(kachelPruefen(null) === null, "und 'nichts eingestellt' ist ein gültiger Zustand");
|
||||
|
||||
/* ---- 2. Am echten Bildschirm ------------------------------------- */
|
||||
const { DatabaseSync } = await import("node:sqlite");
|
||||
const { scryptSync, randomBytes } = await import("node:crypto");
|
||||
const d = new DatabaseSync(process.env.WORKSPACE_DB);
|
||||
const mach = (name, rolle, code) => {
|
||||
const s = randomBytes(16).toString("hex");
|
||||
const h = scryptSync(code, s, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
|
||||
return d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt)"
|
||||
+ " VALUES (?,?,?,?,?,1,?)").run(name, rolle, h, s, 32768, new Date().toISOString()).lastInsertRowid;
|
||||
};
|
||||
mach("Filipe", "admin", "CODE-DOGI-0001");
|
||||
const idLuna = mach("Luna", "manager", "CODE-LUNA-0002");
|
||||
d.close();
|
||||
|
||||
const anmelden = async (rolle, code) => {
|
||||
const a = await fetch(BASIS + "/workspace/api/anmelden", {
|
||||
method: "POST", headers: { "Content-Type": "application/json", Origin: BASIS },
|
||||
body: JSON.stringify({ rolle, code }),
|
||||
});
|
||||
return (a.headers.getSetCookie?.() || []).map((z) => z.split(";")[0]).join("; ");
|
||||
};
|
||||
const kFilipe = await anmelden("admin", "CODE-DOGI-0001");
|
||||
const kLuna = await anmelden("manager", "CODE-LUNA-0002");
|
||||
ok(!!kFilipe && !!kLuna, "beide angemeldet");
|
||||
|
||||
/* Ein Gespräch und zwei Nachrichten. */
|
||||
const raumA = await fetch(BASIS + "/workspace/api/chat/direkt", {
|
||||
method: "POST", headers: { "Content-Type": "application/json", Cookie: kFilipe, Origin: BASIS },
|
||||
body: JSON.stringify({ mit: idLuna }),
|
||||
});
|
||||
const raum = (await raumA.json()).raum_id;
|
||||
ok(!!raum, `ein Gespräch steht (${raum})`);
|
||||
const schreib = async (keks, text) => fetch(BASIS + `/workspace/api/chat/raeume/${raum}/nachrichten`, {
|
||||
method: "POST", headers: { "Content-Type": "application/json", Cookie: keks, Origin: BASIS },
|
||||
body: JSON.stringify({ text }),
|
||||
});
|
||||
await schreib(kFilipe, "Servus, hier ist Filipe.");
|
||||
await schreib(kLuna, "Und hier Luna.");
|
||||
|
||||
/* Luna stellt eine Farbe ein. */
|
||||
const setzen = await fetch(BASIS + "/workspace/api/chat/kachel", {
|
||||
method: "PUT", headers: { "Content-Type": "application/json", Cookie: kLuna, Origin: BASIS },
|
||||
body: JSON.stringify({ kachel: "moos" }),
|
||||
});
|
||||
ok(setzen.ok, `Luna stellt ihre Kachel ein (${setzen.status})`);
|
||||
|
||||
const boese = await fetch(BASIS + "/workspace/api/chat/kachel", {
|
||||
method: "PUT", headers: { "Content-Type": "application/json", Cookie: kLuna, Origin: BASIS },
|
||||
body: JSON.stringify({ kachel: "url(javascript:0)" }),
|
||||
});
|
||||
ok(boese.status === 400,
|
||||
`Gegenprobe: ein erfundener Wert wird abgelehnt (${boese.status}) — eine Regel, die nur im Formular steht, ist keine Regel`);
|
||||
|
||||
/* FILIPE SIEHT LUNAS FARBE — das ist der Sinn der Sache. */
|
||||
const verlauf = await (await fetch(BASIS + `/workspace/api/chat/raeume/${raum}/nachrichten`,
|
||||
{ headers: { Cookie: kFilipe } })).json();
|
||||
const vonLuna = (verlauf.nachrichten || []).find((n) => n.von === "Luna");
|
||||
ok(vonLuna?.von_kachel === "moos",
|
||||
`Filipe bekommt Lunas Kachel mitgeliefert (${vonLuna?.von_kachel})`);
|
||||
const vonFilipe = (verlauf.nachrichten || []).find((n) => n.von === "Filipe");
|
||||
ok(!vonFilipe?.von_kachel,
|
||||
"und seine eigene bleibt Standard, solange er nichts einstellt");
|
||||
|
||||
const pw = await import("file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
|
||||
const browser = await pw.chromium.launch();
|
||||
try {
|
||||
const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
|
||||
await ctx.addCookies(kFilipe.split("; ").filter(Boolean).map((t) => {
|
||||
const [name, ...rest] = t.split("=");
|
||||
return { name, value: rest.join("="), domain: "127.0.0.1", path: "/" };
|
||||
}));
|
||||
const s = await ctx.newPage();
|
||||
const konsole = [];
|
||||
s.on("console", (m) => { if (m.type() === "error" && !/favicon|ERR_/i.test(m.text())) konsole.push(m.text()); });
|
||||
s.on("pageerror", (e) => konsole.push("Absturz: " + e.message));
|
||||
|
||||
await s.goto(BASIS + "/workspace/chat.html", { waitUntil: "networkidle" });
|
||||
await s.waitForTimeout(1400);
|
||||
await s.click(".chat-raum");
|
||||
await s.waitForTimeout(1200);
|
||||
|
||||
/* ==== DIE EIGENTLICHE MESSUNG: SCHEINT DAS BILD DURCH? ===========
|
||||
|
||||
Der erste Anlauf las `backgroundColor` und pruefte den Alphawert.
|
||||
Das war falsch, und zwar auf eine Art, die fast durchgegangen
|
||||
waere: Eine Kachel mit einem VERLAUF hat `backgroundColor:
|
||||
rgba(0,0,0,0)` -- der Verlauf steht in `background-image`. Die
|
||||
Pruefung meldete „durchsichtig" bei einer Kachel, die voellig
|
||||
deckt, und haette umgekehrt eine halbtransparente Verlaufskachel
|
||||
durchgelassen.
|
||||
|
||||
GEMESSEN WIRD JETZT DIE SACHE SELBST: zweimal dasselbe Bildpunkt-
|
||||
feld, einmal mit und einmal ohne Buehnenbild. Deckt die Kachel,
|
||||
sind beide Aufnahmen an dieser Stelle identisch. Scheint das Bild
|
||||
durch, unterscheiden sie sich.
|
||||
|
||||
DIE GEGENPROBE IST EINGEBAUT und kostet nichts: An der Flaeche
|
||||
ZWISCHEN den Kacheln MUSS sich etwas aendern. Tut sie das nicht,
|
||||
misst der Vergleich gar nichts -- etwa weil das Bild in dieser
|
||||
Umgebung nie geladen wurde. Genau die Sorte stiller Erfolg, vor
|
||||
der die Hausregel zum dritten Ausgang warnt. */
|
||||
const punkte = await s.evaluate(() => {
|
||||
const b = document.querySelector('.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase')
|
||||
|| document.querySelector(".chat-nachricht__blase");
|
||||
const v = document.querySelector(".chat__verlauf");
|
||||
if (!b || !v) return null;
|
||||
const rb = b.getBoundingClientRect(), rv = v.getBoundingClientRect();
|
||||
return {
|
||||
/* Mitten in der Kachel -- nicht am Rand, dort liegen Kante und
|
||||
abgerundete Ecke. */
|
||||
kachel: { x: Math.round(rb.left + rb.width / 2), y: Math.round(rb.top + rb.height / 2) },
|
||||
/* Und ein Fleck im Verlauf, auf dem sicher keine Kachel liegt:
|
||||
ganz rechts aussen, wo die eigenen Nachrichten nicht hinreichen. */
|
||||
frei: { x: Math.round(rv.right - 6), y: Math.round(rv.top + rv.height / 2) },
|
||||
};
|
||||
});
|
||||
ok(!!punkte, "Kachel und freie Fläche gefunden");
|
||||
|
||||
/* Playwright kann einen Ausschnitt aufnehmen -- ein Bildpunkt reicht. */
|
||||
const punktFarbe = async (pkt) => {
|
||||
const bild = await s.screenshot({
|
||||
clip: { x: pkt.x, y: pkt.y, width: 1, height: 1 }, type: "png",
|
||||
});
|
||||
/* Der Farbwert steckt im PNG. Statt es zu entpacken, wird die
|
||||
AUFNAHME selbst verglichen: Zwei Aufnahmen desselben Bildpunkts
|
||||
sind byteweise gleich, wenn die Farbe gleich ist. Das ist genau
|
||||
die Frage, und sie braucht keinen Decoder. */
|
||||
return bild.toString("base64");
|
||||
};
|
||||
|
||||
const mitBild = { kachel: await punktFarbe(punkte.kachel), frei: await punktFarbe(punkte.frei) };
|
||||
await s.addStyleTag({ content: "body.start::before { display: none !important; }" });
|
||||
await s.waitForTimeout(350);
|
||||
const ohneBild = { kachel: await punktFarbe(punkte.kachel), frei: await punktFarbe(punkte.frei) };
|
||||
|
||||
/* ZUERST DIE GEGENPROBE. Ohne sie waere die Hauptmessung wertlos. */
|
||||
ok(mitBild.frei !== ohneBild.frei,
|
||||
"Gegenprobe: auf der freien Fläche ändert sich etwas, wenn das Bild weg ist — es ist also wirklich da");
|
||||
ok(mitBild.kachel === ohneBild.kachel,
|
||||
mitBild.kachel === ohneBild.kachel
|
||||
? "auf der Kachel ändert sich NICHTS — sie deckt, das Bild kommt nicht durch die Schrift"
|
||||
: "das Bühnenbild scheint durch die Kachel — dort läge Schrift auf einem Foto");
|
||||
|
||||
/* Die Fläche darum MUSS durchlassen, sonst gäbe es gar kein Bild zu
|
||||
sehen -- das ist die Hälfte des Wunsches. */
|
||||
const flaeche = await s.evaluate(() => {
|
||||
const c = getComputedStyle(document.querySelector(".chat")).backgroundColor;
|
||||
/* ZWEI SCHREIBWEISEN, NICHT EINE (20.09.2026).
|
||||
|
||||
Der erste Anlauf suchte nur `rgba(...)`. Chrome gibt das
|
||||
Ergebnis von `color-mix()` aber als `color(srgb r g b / a)`
|
||||
zurueck -- die Suche fand nichts, der Rueckfall war „Alpha 1",
|
||||
und die Pruefung meldete „deckt" bei einer Flaeche, die
|
||||
durchscheint. Ein Messfehler, der genau das Gegenteil behauptet. */
|
||||
const alphaVon = (farbe) => {
|
||||
const rgba = farbe.match(/rgba?\(([^)]+)\)/);
|
||||
if (rgba) {
|
||||
const t = rgba[1].split(",").map((x) => parseFloat(x));
|
||||
return t.length > 3 ? t[3] : 1;
|
||||
}
|
||||
const srgb = farbe.match(/color\([^/)]*\/\s*([\d.]+)\s*\)/);
|
||||
if (srgb) return parseFloat(srgb[1]);
|
||||
return farbe === "transparent" ? 0 : 1;
|
||||
};
|
||||
return { alpha: alphaVon(c), roh: c,
|
||||
buehne: getComputedStyle(document.body, "::before").backgroundImage };
|
||||
});
|
||||
ok(flaeche.alpha < 0.98,
|
||||
`die Fläche um die Kacheln lässt durch (Alpha ${flaeche.alpha.toFixed(2)}, ${flaeche.roh})`);
|
||||
ok(/\.webp|\.png|\.jpg/i.test(flaeche.buehne || ""),
|
||||
`und dahinter steht wirklich ein Bild (…${(flaeche.buehne || "").slice(-30)}`);
|
||||
|
||||
const lage = await s.evaluate(() => ({
|
||||
blasen: document.querySelectorAll(".chat-nachricht__blase").length,
|
||||
knopf: !!document.querySelector(".chat__kachelknopf:not([hidden])"),
|
||||
}));
|
||||
ok(lage.blasen >= 2, `die Nachrichten stehen in Kacheln (${lage.blasen})`);
|
||||
|
||||
ok(lage.knopf, "der Knopf für die eigene Kachel steht da");
|
||||
|
||||
/* Und er lässt sich bedienen. */
|
||||
await s.click(".chat__kachelknopf");
|
||||
await s.waitForTimeout(400);
|
||||
const wahl = await s.evaluate(() => {
|
||||
const dlg = document.querySelector("#kachel-wahl[open]");
|
||||
const toene = [...document.querySelectorAll(".chat-kachelwahl__ton")];
|
||||
return {
|
||||
offen: !!dlg,
|
||||
toene: toene.length,
|
||||
mitNamen: toene.filter((t) => (t.getAttribute("aria-label") || "").length > 2).length,
|
||||
hoch: toene.length ? Math.round(toene[0].getBoundingClientRect().height) : 0,
|
||||
};
|
||||
});
|
||||
ok(wahl.offen, "die Auswahl geht auf");
|
||||
ok(wahl.toene === CHAT_KACHELN.length,
|
||||
`mit allen ${CHAT_KACHELN.length} Tönen (${wahl.toene})`);
|
||||
ok(wahl.mitNamen === wahl.toene,
|
||||
`jeder trägt seinen Namen (${wahl.mitNamen}) — wer Farben schlecht unterscheidet, wählt sonst blind`);
|
||||
ok(wahl.hoch >= 44, `und ist am Finger treffbar (${wahl.hoch} px)`);
|
||||
|
||||
/* Eine andere wählen und nachsehen, ob die eigenen Kacheln sofort
|
||||
umspringen -- ohne Neuladen. */
|
||||
/* DIE FARBE STECKT IM VERLAUF, nicht in `backgroundColor`.
|
||||
|
||||
Auch das war erst falsch: Eine Kachel mit `background:
|
||||
linear-gradient(...)` hat `backgroundColor: rgba(0,0,0,0)` -- der
|
||||
Vergleich lieferte zweimal „durchsichtig" und meldete „springt
|
||||
nicht um" bei einer Kachel, die sehr wohl umsprang. Beides wird
|
||||
gelesen und aneinandergehaengt; dann ist es egal, welche der
|
||||
beiden Stellen die Farbe traegt. */
|
||||
const kachelBild = () => s.evaluate(() => {
|
||||
const b = document.querySelector('.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase');
|
||||
const c = getComputedStyle(b);
|
||||
return c.backgroundColor + " | " + c.backgroundImage;
|
||||
});
|
||||
const vorher = await kachelBild();
|
||||
await s.click('.chat-kachelwahl__ton[data-wert="wein"]');
|
||||
await s.waitForTimeout(600);
|
||||
const nachher = await kachelBild();
|
||||
ok(vorher !== nachher,
|
||||
`die eigenen Kacheln springen sofort um (${vorher.slice(0, 46)} → ${nachher.slice(0, 46)})`);
|
||||
|
||||
/* UND ES IST GESPEICHERT, nicht nur gemalt. */
|
||||
const nachSetzen = await (await fetch(BASIS + "/workspace/api/chat/kacheln",
|
||||
{ headers: { Cookie: kFilipe } })).json();
|
||||
ok(nachSetzen.meine === "wein",
|
||||
`und die Wahl ist gespeichert, nicht nur gemalt (${nachSetzen.meine})`);
|
||||
|
||||
ok(konsole.length === 0,
|
||||
konsole.length ? "Fehler im Browser: " + konsole[0].slice(0, 80) : "keine Fehler im Browser");
|
||||
await ctx.close();
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
|
||||
console.log(`\n${fehler ? fehler + " FEHLER" : "Alles in Ordnung"} — ${geprueft} Prüfungen\n`);
|
||||
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
|
||||
process.exit(fehler ? 1 : 0);
|
||||
+123
-1
@@ -174,6 +174,65 @@ function bildWegFuer(personId) {
|
||||
} catch { return null; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
JEDER ACCOUNT SEINE EIGENE KACHEL (20.09.2026)
|
||||
|
||||
Filipe: „jeder account soll seine kachel personalisieren koennen."
|
||||
|
||||
---------------------------------------------------------------------
|
||||
EINE AUSWAHL, KEIN FARBWAEHLER
|
||||
|
||||
Ein freier Farbwaehler klingt grosszuegiger und ist die schlechtere
|
||||
Loesung: Mit ihm laesst sich Schwarz auf Schwarz einstellen, oder
|
||||
Neongelb, das jedem anderen im Gespraech in die Augen sticht. Die
|
||||
Kachel gehoert einem selbst, GESEHEN wird sie von allen anderen --
|
||||
deshalb ist sie kein Platz fuer etwas, das man nicht abschalten kann.
|
||||
|
||||
Die zwoelf Toene hier sind alle gleich dunkel und gleich gesaettigt.
|
||||
Sie unterscheiden sich im Farbton und in sonst nichts. Damit ist der
|
||||
Kontrast zur Schrift bei jedem gleich -- er muss nicht bei jedem
|
||||
einzeln geprueft werden, und niemand kann sich unlesbar machen.
|
||||
Augenschonend ist hier keine Geschmacksfrage: Ein Chat ist die
|
||||
Seite, auf der am laengsten gelesen wird.
|
||||
|
||||
KEINE der zwoelf ist hell. Das ist Absicht und nicht Sparsamkeit --
|
||||
die Schrift ist hell, und eine helle Kachel waere fuer die Person,
|
||||
die sie waehlt, hübsch und fuer alle anderen unlesbar.
|
||||
===================================================================== */
|
||||
export const CHAT_KACHELN = [
|
||||
{ wert: "grund", name: "Standard", farbe: "#131a25" },
|
||||
{ wert: "tinte", name: "Tinte", farbe: "#141c2e" },
|
||||
{ wert: "veilchen", name: "Veilchen", farbe: "#1d1730" },
|
||||
{ wert: "pflaume", name: "Pflaume", farbe: "#251729" },
|
||||
{ wert: "wein", name: "Wein", farbe: "#2a1620" },
|
||||
{ wert: "ziegel", name: "Ziegel", farbe: "#2a1a17" },
|
||||
{ wert: "bernstein", name: "Bernstein", farbe: "#271f14" },
|
||||
{ wert: "moos", name: "Moos", farbe: "#16251b" },
|
||||
{ wert: "tanne", name: "Tanne", farbe: "#132622" },
|
||||
{ wert: "lagune", name: "Lagune", farbe: "#122429" },
|
||||
{ wert: "stahl", name: "Stahl", farbe: "#1b2128" },
|
||||
{ wert: "schiefer", name: "Schiefer", farbe: "#20201f" },
|
||||
];
|
||||
|
||||
/** Nur ein Ton aus der Liste kommt durch -- sonst nichts.
|
||||
*
|
||||
* DIE PRUEFUNG STEHT HIER UND NICHT NUR IM FORMULAR. Was aus der
|
||||
* Datenbank kommt, koennte aus einer aelteren Fassung stammen oder
|
||||
* von einem Aufruf an der Oberflaeche vorbei; ein unbekannter Wert
|
||||
* wanderte sonst als CSS-Farbe in die Seite. `null` heisst
|
||||
* „Standard", und das ist ein gueltiger Zustand. */
|
||||
export function kachelPruefen(wert) {
|
||||
if (!wert) return null;
|
||||
return CHAT_KACHELN.some((k) => k.wert === String(wert)) ? String(wert) : null;
|
||||
}
|
||||
|
||||
function kachelFuer(personId) {
|
||||
try {
|
||||
return kachelPruefen(db().prepare(
|
||||
"SELECT chat_kachel FROM personen WHERE id = ?").get(personId)?.chat_kachel);
|
||||
} catch { return null; }
|
||||
}
|
||||
|
||||
function teilnehmerVon(raumId) {
|
||||
return db().prepare(`
|
||||
SELECT t.person_id AS id, p.name, p.rolle, p.bild, t.leitung, t.gelesen_bis
|
||||
@@ -465,6 +524,54 @@ chatRouter.get("/workspace/api/chat/partner", (req, res) => {
|
||||
});
|
||||
|
||||
/** Meine Gespräche, das jüngste zuerst. */
|
||||
/* =====================================================================
|
||||
DIE EIGENE KACHEL EINSTELLEN (20.09.2026)
|
||||
|
||||
Filipe: „jeder account soll seine kachel personalisieren koennen."
|
||||
|
||||
ZWEI WEGE, WEIL ES ZWEI FRAGEN SIND: „welche gibt es" und „das will
|
||||
ich". Die Liste kommt vom Server, damit im Browser keine zweite
|
||||
Fassung der zwoelf Toene steht -- die waere beim dreizehnten die
|
||||
vergessene.
|
||||
|
||||
NUR FUER SICH SELBST. Es gibt keinen Weg, die Kachel eines anderen
|
||||
zu setzen, und das ist keine Luecke: Die Kachel ist das Einzige auf
|
||||
dieser Seite, das einem selbst gehoert. Ein Recht der Leitung darauf
|
||||
waere ein Recht, jemandem seine Farbe wegzunehmen.
|
||||
===================================================================== */
|
||||
chatRouter.get("/workspace/api/chat/kacheln", (req, res) => {
|
||||
try {
|
||||
res.json({
|
||||
kacheln: CHAT_KACHELN,
|
||||
meine: kachelFuer(req.person.id),
|
||||
});
|
||||
} catch (f) {
|
||||
console.error("[chat] Kacheln:", f?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
chatRouter.put("/workspace/api/chat/kachel", express.json({ limit: "2kb" }),
|
||||
gleicheHerkunft, (req, res) => {
|
||||
try {
|
||||
const roh = req.body?.kachel;
|
||||
/* LEER IST GUELTIG und heisst "Standard". Wer sich umentscheidet,
|
||||
braucht einen Weg zurueck -- eine Einstellung ohne Rueckweg ist
|
||||
eine Falle, keine Einstellung. */
|
||||
const wert = (roh === null || roh === "" || roh === "grund")
|
||||
? null : kachelPruefen(roh);
|
||||
if (roh && roh !== "grund" && wert === null) {
|
||||
return res.status(400).json({ fehler: "unbekannte_kachel" });
|
||||
}
|
||||
db().prepare("UPDATE personen SET chat_kachel = ? WHERE id = ?")
|
||||
.run(wert, req.person.id);
|
||||
res.json({ kachel: wert });
|
||||
} catch (f) {
|
||||
console.error("[chat] Kachel setzen:", f?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
chatRouter.get("/workspace/api/chat/raeume", (req, res) => {
|
||||
try {
|
||||
/* WEGGERÄUMTE GESPRÄCHE STEHEN NICHT IN DER LISTE.
|
||||
@@ -888,7 +995,7 @@ chatRouter.get("/workspace/api/chat/raeume/:id/nachrichten", (req, res) => {
|
||||
const weg = geloeschtBis(raumId, req.person.id);
|
||||
const reihen = db().prepare(`
|
||||
SELECT n.id, n.person_id, n.text, n.erstellt, n.weg_am, p.name AS von, p.rolle,
|
||||
p.bild AS von_bild,
|
||||
p.bild AS von_bild, p.chat_kachel AS von_kachel,
|
||||
n.antwort_auf, n.angeheftet_am,
|
||||
n.anhang_name, n.anhang_art, n.anhang_typ, n.anhang_groesse,
|
||||
n.anhang_breite, n.anhang_hoehe,
|
||||
@@ -974,6 +1081,17 @@ chatRouter.get("/workspace/api/chat/raeume/:id/nachrichten", (req, res) => {
|
||||
reaktionen: reakt.get(n.id) || [],
|
||||
id: n.id, von_id: n.person_id, von: n.von || "Gelöscht", rolle: n.rolle,
|
||||
von_bild: n.von_bild ? `/workspace/api/steckbrief/bild/${n.von_bild}` : null,
|
||||
/* DIE EIGENE KACHELFARBE (20.09.2026).
|
||||
|
||||
Filipe: "jeder account soll seine kachel personalisieren
|
||||
koennen."
|
||||
|
||||
Sie kommt aus `personen`, nicht aus der Nachricht: Wer seine
|
||||
Farbe aendert, aendert sie fuer ALLE seine Nachrichten,
|
||||
auch die von gestern. Die Farbe an jede Zeile zu schreiben
|
||||
waere eine zweite Wahrheit -- und nach der ersten Aenderung
|
||||
haette dieselbe Person zwei Farben im selben Gespraech. */
|
||||
von_kachel: kachelPruefen(n.von_kachel),
|
||||
text: n.weg_am ? null : n.text,
|
||||
zurueckgenommen: !!n.weg_am,
|
||||
erstellt: n.erstellt,
|
||||
@@ -1093,6 +1211,10 @@ chatRouter.post("/workspace/api/chat/raeume/:id/nachrichten", gleicheHerkunft,
|
||||
laedt, ein Gesicht. Derselbe Mensch, zwei Darstellungen, und
|
||||
der Unterschied haengt nur daran, wann man geschaut hat. */
|
||||
von_bild: bildWegFuer(req.person.id),
|
||||
/* Auch hier -- sonst kaeme die frisch gesendete Nachricht ohne
|
||||
Farbe bei den anderen an und faerbte sich erst beim naechsten
|
||||
Laden. Derselbe Fehler wie beim Bild eine Zeile darueber. */
|
||||
von_kachel: kachelFuer(req.person.id),
|
||||
rolle: req.person.rolle, text, erstellt: n, zurueckgenommen: false,
|
||||
antwort: zitat ? {
|
||||
id: antwortAuf, von: zitat.von || "Gelöscht",
|
||||
|
||||
@@ -2491,6 +2491,13 @@ function umstellungen(d) {
|
||||
["personen", "instagram", "TEXT"],
|
||||
["personen", "youtube", "TEXT"],
|
||||
["personen", "twitch", "TEXT"],
|
||||
/* Die eigene Kachelfarbe im Chat (20.09.2026). Ein Schluessel aus
|
||||
CHAT_KACHELN, nicht die Farbe selbst: Sonst stuende in der
|
||||
Datenbank ein CSS-Wert, und eine Aenderung am Farbton hiesse,
|
||||
jede Zeile anzufassen. NULL heisst "Standard" und ist der
|
||||
Normalfall -- ein Pflichtwert waere eine Entscheidung, die
|
||||
niemand treffen wollte. */
|
||||
["personen", "chat_kachel", "TEXT"],
|
||||
|
||||
/* ---- Wiederkehrende Termine (02.09.2026) ----
|
||||
Drei Spalten an `termine`, damit eine Ausprägung weiss, woher sie
|
||||
|
||||
@@ -61,9 +61,33 @@
|
||||
gap: 0;
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius);
|
||||
/* ==== DAS BUEHNENBILD SCHEINT DURCH (20.09.2026) ==================
|
||||
|
||||
Filipe: „ich will auch ein krasses hintergrundbild fuer den treff
|
||||
chat. und die texte sollen immer in einer kachel sein."
|
||||
|
||||
BEIDES ZUSAMMEN, und in dieser Reihenfolge -- sie bedingen
|
||||
einander: Ein Bild hinter dem Chat geht nur, WENN der Text auf
|
||||
einer deckenden Kachel steht. Sonst liegt Schrift auf einem Foto,
|
||||
und das ist an der hellsten Stelle unlesbar. Genau deshalb ist der
|
||||
zweite Satz kein Zusatzwunsch, sondern die Bedingung fuer den
|
||||
ersten.
|
||||
|
||||
WARUM KEIN EIGENES BILD, SONDERN DAS DER SEITE: Hinter jeder Seite
|
||||
steht ohnehin eine Buehne (start.css, neun Szenen, fuer den Chat
|
||||
die Lounge). Sie lag bisher hinter einer deckenden Flaeche --
|
||||
vorhanden, geladen, unsichtbar. Sie durchscheinen zu lassen kostet
|
||||
KEINE einzige Datei mehr, und auf der Adresse von Team Dogi kommt
|
||||
damit von selbst deren eigene Fassung (crew-buehne-lounge), ohne
|
||||
dass hier eine zweite Liste von neun Bildern stuende. Eine solche
|
||||
Liste waere die, die beim zehnten Motiv vergessen wird.
|
||||
|
||||
DER SCHLEIER IST NICHT DEKORATION. Ohne ihn waere die Liste links
|
||||
(Namen, Vorschauzeilen) Text direkt auf dem Foto. Er ist deshalb
|
||||
kraeftig und wird gemessen, nicht geschaetzt. */
|
||||
background:
|
||||
radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .03), transparent 55%),
|
||||
var(--flaeche);
|
||||
color-mix(in srgb, var(--flaeche) 88%, transparent);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -250,6 +274,16 @@
|
||||
overflow-y: auto;
|
||||
padding: 18px 18px 8px;
|
||||
display: flex; flex-direction: column; gap: 3px;
|
||||
/* IM VERLAUF DARF MEHR DURCHKOMMEN als in der Liste links: Hier steht
|
||||
jede Zeile auf einer eigenen, deckenden Kachel -- dazwischen ist
|
||||
Luft, und durch die Luft sieht man den Raum. Links stehen Namen
|
||||
ohne Kachel, dort bleibt es dichter.
|
||||
Ein eigener Schleier statt einer Aenderung am Grund darueber: So
|
||||
hat jede der beiden Spalten ihren Wert, und eine Aenderung an der
|
||||
einen verstellt die andere nicht. */
|
||||
background: linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--grund) 58%, transparent),
|
||||
color-mix(in srgb, var(--grund) 34%, transparent));
|
||||
/* Ein weicher Schleier am oberen Rand: Der Verlauf scrollt unter den
|
||||
Kopf, statt an einer harten Kante abgeschnitten zu wirken. */
|
||||
mask-image: linear-gradient(180deg, transparent, #000 14px);
|
||||
@@ -323,7 +357,19 @@
|
||||
padding: 10px 13px 7px;
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: 14px 14px 14px 4px;
|
||||
background: rgba(255, 255, 255, .045);
|
||||
/* DECKEND, NICHT DURCHSCHEINEND (20.09.2026).
|
||||
|
||||
Hier stand `rgba(255,255,255,.045)` -- praktisch durchsichtig. Das
|
||||
war richtig, solange dahinter eine ruhige Flaeche lag. Seit das
|
||||
Buehnenbild durchscheint, waere es Schrift auf einem Foto: an der
|
||||
dunklen Stelle lesbar, an der hellen nicht, und beim Scrollen
|
||||
wechselt es.
|
||||
|
||||
`--kachel` statt einer festen Farbe: Darueber personalisiert jeder
|
||||
Account seine eigene Kachel (siehe weiter unten). Der Rueckfall
|
||||
ist die Hausfarbe -- wer nichts einstellt, bekommt das, was vorher
|
||||
auch da war, nur deckend. */
|
||||
background: var(--kachel, #131a25);
|
||||
min-width: 0;
|
||||
}
|
||||
.chat-nachricht[data-folge="ja"] .chat-nachricht__blase { border-radius: 14px 14px 14px 8px; }
|
||||
@@ -333,7 +379,10 @@
|
||||
.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase {
|
||||
grid-column: 1;
|
||||
border-radius: 14px 14px 4px 14px;
|
||||
background: color-mix(in srgb, var(--akzent) 16%, transparent);
|
||||
/* Auch die eigene deckt jetzt. `color-mix` auf `transparent` liesse
|
||||
das Foto durch -- gemischt wird deshalb auf die Hausflaeche. */
|
||||
background: var(--kachel,
|
||||
color-mix(in srgb, var(--akzent) 16%, #131a25));
|
||||
border-color: color-mix(in srgb, var(--akzent) 30%, transparent);
|
||||
}
|
||||
.chat-nachricht[data-selbst="ja"][data-folge="ja"] .chat-nachricht__blase {
|
||||
@@ -666,9 +715,25 @@
|
||||
}
|
||||
.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase {
|
||||
border-radius: 16px 16px 5px 16px;
|
||||
/* DIESE REGEL IST DIE ZWEITE FÜR DIESELBE KACHEL (20.09.2026).
|
||||
|
||||
Weiter oben steht schon eine -- und genau daran wäre die eigene
|
||||
Kachel beinahe transparent geblieben: Dort wurde `--kachel`
|
||||
eingebaut, hier gewinnt der Verlauf, und der kannte die Farbe
|
||||
nicht. Gemessen am Bildschirm: rgba(0,0,0,0), also nichts.
|
||||
|
||||
Dass es zwei Stellen gibt, ist gewachsen (Grundform oben,
|
||||
Feinschliff hier). Sie zusammenzulegen wäre ein größerer Umbau an
|
||||
einer Datei, die heute schon viel abbekommen hat -- deshalb
|
||||
stattdessen: BEIDE kennen `--kachel`, und diese Zeile hier sagt
|
||||
es dazu.
|
||||
|
||||
.95 ist zu .99 geworden: Seit das Bühnenbild durchscheint, sind
|
||||
fünf Prozent Foto in der Schriftfläche sichtbar -- und zwar
|
||||
wandernd, weil das Bild fest steht und die Kachel scrollt. */
|
||||
background: linear-gradient(160deg,
|
||||
color-mix(in srgb, var(--akzent) 26%, rgba(17, 24, 37, .95)),
|
||||
color-mix(in srgb, var(--akzent) 12%, rgba(12, 17, 27, .95)));
|
||||
color-mix(in srgb, var(--akzent) 26%, var(--kachel, rgba(17, 24, 37, .99))),
|
||||
color-mix(in srgb, var(--akzent) 12%, var(--kachel, rgba(12, 17, 27, .99))));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .10),
|
||||
0 2px 8px -3px color-mix(in srgb, var(--akzent) 45%, transparent);
|
||||
@@ -2208,3 +2273,80 @@
|
||||
@media (forced-colors: active) {
|
||||
.anruf__stumm { border: 2px solid CanvasText; animation: none; }
|
||||
}
|
||||
|
||||
|
||||
/* =====================================================================
|
||||
MEINE KACHEL (20.09.2026)
|
||||
|
||||
Filipe: „jeder account soll seine kachel personalisieren können."
|
||||
|
||||
Der Knopf ist ein FARBFLECK, kein Wort. Er zeigt, was eingestellt
|
||||
ist — ein Knopf mit der Aufschrift „Kachel" müsste erst geöffnet
|
||||
werden, damit man sieht, was gerade gilt.
|
||||
===================================================================== */
|
||||
.chat__kachelknopf {
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
width: 30px; height: 30px;
|
||||
padding: 3px;
|
||||
border: 1px solid var(--rand-hell);
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.chat__kachelknopf:hover { border-color: var(--akzent); }
|
||||
.chat__kachelknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||||
.chat__kachelknopf-probe {
|
||||
display: block; width: 100%; height: 100%;
|
||||
border-radius: 6px;
|
||||
/* Eine feine Innenkante, damit ein sehr dunkler Ton nicht aussieht
|
||||
wie ein Loch im Knopf. */
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
|
||||
}
|
||||
/* „Neu" steht danach und schiebt sich nicht mehr selbst -- der
|
||||
Farbfleck hat den auto-Rand übernommen. Zwei auto-Ränder
|
||||
nebeneinander teilen sich den Platz und reißen die Knöpfe
|
||||
auseinander; derselbe Fehler stand am 11.09. schon im Verlaufskopf. */
|
||||
.chat__kopf #neu-oeffnen { flex: 0 0 auto; margin-left: 8px; }
|
||||
|
||||
.chat-kachelwahl__gitter {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
|
||||
gap: 8px;
|
||||
margin: 14px 0 4px;
|
||||
}
|
||||
.chat-kachelwahl__ton {
|
||||
position: relative;
|
||||
min-height: 48px; /* am Finger treffbar */
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--text);
|
||||
font: inherit; font-size: .84rem;
|
||||
}
|
||||
.chat-kachelwahl__wort { opacity: .9; }
|
||||
.chat-kachelwahl__ton:hover { border-color: var(--rand-hell); }
|
||||
.chat-kachelwahl__ton:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||||
/* DIE WAHL WIRD MIT EINEM HAKEN ANGEZEIGT, nicht nur mit einem
|
||||
helleren Rahmen: Auf zwölf dunklen Feldern ist ein Rahmen mehr der
|
||||
Unterschied, den man sucht — ein Haken ist der, den man sieht. */
|
||||
.chat-kachelwahl__ton[aria-checked="true"] {
|
||||
border-color: var(--akzent);
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--akzent) 45%, transparent);
|
||||
}
|
||||
.chat-kachelwahl__ton[aria-checked="true"]::after {
|
||||
content: "¹3";
|
||||
position: absolute; top: 3px; right: 6px;
|
||||
font-size: .8rem; font-weight: 700;
|
||||
color: var(--akzent);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.chat-kachelwahl__ton[aria-checked="true"] { border: 3px solid Highlight; }
|
||||
.chat__kachelknopf { border: 1px solid CanvasText; }
|
||||
/* Im Kontrastmodus gibt es keine Farbflächen -- dann sind die zwölf
|
||||
Töne ununterscheidbar, und nur der Name trägt. Er steht ohnehin
|
||||
im aria-label und im title. */
|
||||
}
|
||||
|
||||
@@ -30,6 +30,124 @@
|
||||
'use strict';
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
|
||||
/* =====================================================================
|
||||
MEINE KACHEL (20.09.2026)
|
||||
|
||||
Filipe: „jeder account soll seine kachel personalisieren koennen."
|
||||
|
||||
DIE TABELLE IST LEER UND WIRD GEFUELLT. Sie steht nicht als feste
|
||||
Liste hier: Die zwoelf Toene gehoeren dem Server (CHAT_KACHELN in
|
||||
workspace-chat.js), und eine zweite Fassung im Browser waere beim
|
||||
dreizehnten die vergessene -- dieselbe Krankheit wie bei KANAL_WORT
|
||||
auf dem Highlight-Brett, die heute behoben wurde.
|
||||
|
||||
WOZU SIE HIER GEBRAUCHT WIRD: Die Nachricht bringt einen
|
||||
SCHLUESSEL mit („moos"), keine Farbe. Waere die Farbe selbst in der
|
||||
Nachricht, stuende ein CSS-Wert aus der Datenbank in der Seite --
|
||||
und ein vertippter oder boeswilliger Eintrag koennte faerben, was
|
||||
er will. So kommt nur durch, was in der Tabelle steht. */
|
||||
const KACHEL_FARBE = Object.create(null);
|
||||
let kachelListe = [];
|
||||
let meineKachel = null;
|
||||
|
||||
async function kachelnLaden() {
|
||||
try {
|
||||
const a2 = await fetch('/workspace/api/chat/kacheln', { credentials: 'same-origin' });
|
||||
if (!a2.ok) return;
|
||||
const d = await a2.json();
|
||||
kachelListe = Array.isArray(d.kacheln) ? d.kacheln : [];
|
||||
meineKachel = d.meine || null;
|
||||
for (const k of kachelListe) KACHEL_FARBE[k.wert] = k.farbe;
|
||||
kachelKnopfZeigen();
|
||||
} catch { /* ohne die Liste bleibt alles beim Standard -- kein Grund
|
||||
zu scheitern, der Chat funktioniert weiter */ }
|
||||
}
|
||||
|
||||
function kachelKnopfZeigen() {
|
||||
const knopf = $('kachel-oeffnen');
|
||||
if (!knopf) return;
|
||||
/* OHNE LISTE KEIN KNOPF. Ein Knopf, der eine leere Auswahl oeffnet,
|
||||
ist schlimmer als keiner -- man drueckt ihn und sucht den Fehler
|
||||
bei sich. */
|
||||
knopf.hidden = kachelListe.length === 0;
|
||||
const probe = knopf.querySelector('.chat__kachelknopf-probe');
|
||||
if (probe) {
|
||||
probe.style.background = KACHEL_FARBE[meineKachel] || KACHEL_FARBE.grund || '#131a25';
|
||||
}
|
||||
}
|
||||
|
||||
function kachelwahlBauen() {
|
||||
const gitter = $('kachel-gitter');
|
||||
if (!gitter) return;
|
||||
gitter.textContent = '';
|
||||
for (const k of kachelListe) {
|
||||
const b = el('button', 'chat-kachelwahl__ton');
|
||||
b.type = 'button';
|
||||
b.dataset.wert = k.wert;
|
||||
b.style.background = k.farbe;
|
||||
b.setAttribute('role', 'radio');
|
||||
/* DER NAME GEHOERT DAZU, nicht nur die Farbe. Wer Farben schlecht
|
||||
unterscheidet, waehlt sonst zwoelf Mal dasselbe Kaestchen --
|
||||
und ein Vorleseprogramm saehe zwoelf namenlose Knoepfe. */
|
||||
b.setAttribute('aria-label', k.name);
|
||||
b.title = k.name;
|
||||
b.setAttribute('aria-checked', String((meineKachel || 'grund') === k.wert));
|
||||
/* EINE VORSCHAU MIT ECHTEM TEXT, nicht nur ein Farbfleck: Gewaehlt
|
||||
wird ja nicht die Farbe, sondern wie die eigene Nachricht
|
||||
aussieht. */
|
||||
b.append(el('span', 'chat-kachelwahl__wort', 'Aa'));
|
||||
b.addEventListener('click', () => kachelSetzen(k.wert, b));
|
||||
gitter.append(b);
|
||||
}
|
||||
}
|
||||
|
||||
async function kachelSetzen(wert, knopf) {
|
||||
const vorher = meineKachel;
|
||||
/* SOFORT UMSTELLEN, dann speichern. Wer eine Farbe antippt und eine
|
||||
halbe Sekunde nichts sieht, tippt noch einmal. Geht es schief,
|
||||
wird es zurueckgenommen -- und zwar sichtbar. */
|
||||
meineKachel = (wert === 'grund') ? null : wert;
|
||||
for (const b of knopf.parentElement.querySelectorAll('.chat-kachelwahl__ton')) {
|
||||
b.setAttribute('aria-checked', String(b === knopf));
|
||||
}
|
||||
kachelKnopfZeigen();
|
||||
eigeneKachelnFaerben();
|
||||
try {
|
||||
const a2 = await hole('/workspace/api/chat/kachel', {
|
||||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ kachel: wert }),
|
||||
});
|
||||
if (!a2.ok) throw new Error('abgelehnt');
|
||||
} catch {
|
||||
meineKachel = vorher;
|
||||
kachelKnopfZeigen();
|
||||
eigeneKachelnFaerben();
|
||||
kachelwahlBauen();
|
||||
melde('Die Farbe konnte nicht gespeichert werden.');
|
||||
}
|
||||
}
|
||||
|
||||
/** Die eigenen Nachrichten im offenen Verlauf sofort umfaerben.
|
||||
*
|
||||
* OHNE NEU ZU LADEN: Der Verlauf neu zu holen hiesse, beim Faerben
|
||||
* nach unten zu springen und die Stelle zu verlieren, an der man
|
||||
* gerade liest. Die Farbe steht ohnehin nur an der Kachel. */
|
||||
function eigeneKachelnFaerben() {
|
||||
const farbe = KACHEL_FARBE[meineKachel] || null;
|
||||
for (const z of document.querySelectorAll('.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase')) {
|
||||
if (farbe) z.style.setProperty('--kachel', farbe);
|
||||
else z.style.removeProperty('--kachel');
|
||||
}
|
||||
}
|
||||
|
||||
function kachelwahlBedienen() {
|
||||
const knopf = $('kachel-oeffnen'), dlg = $('kachel-wahl'), zu = $('kachel-zu');
|
||||
if (!knopf || !dlg) return;
|
||||
knopf.addEventListener('click', () => { kachelwahlBauen(); dlg.showModal(); });
|
||||
zu?.addEventListener('click', () => dlg.close());
|
||||
}
|
||||
|
||||
const el = (tag, klasse, text) => {
|
||||
const k = document.createElement(tag);
|
||||
if (klasse) k.className = klasse;
|
||||
@@ -1090,6 +1208,23 @@
|
||||
if (n.angeheftet) zeile.dataset.angeheftet = 'ja';
|
||||
|
||||
const blase = el('div', 'chat-nachricht__blase');
|
||||
/* DIE EIGENE KACHELFARBE (20.09.2026).
|
||||
|
||||
Filipe: „jeder account soll seine kachel personalisieren
|
||||
koennen."
|
||||
|
||||
Der Wert kommt vom Server als SCHLUESSEL, nicht als Farbe --
|
||||
hier wird er in der Tabelle nachgeschlagen, die ebenfalls vom
|
||||
Server kam. Waere die Farbe selbst in der Nachricht, stuende
|
||||
ein CSS-Wert aus der Datenbank in der Seite; ein vertippter
|
||||
oder boeswilliger Eintrag koennte dann faerben, was er will.
|
||||
|
||||
Kein Wert heisst Standard, und dafuer steht gar nichts da --
|
||||
der Rueckfall liegt im Stilblatt (`var(--kachel, …)`). Eine
|
||||
Zeile, die die Standardfarbe noch einmal hinschreibt, waere
|
||||
eine zweite Stelle, an der sie stimmen muss. */
|
||||
const kFarbe = KACHEL_FARBE[n.von_kachel];
|
||||
if (kFarbe) blase.style.setProperty('--kachel', kFarbe);
|
||||
if (!gleicheFolge && !n.selbst && offen.art !== 'direkt') {
|
||||
blase.append(el('p', 'chat-nachricht__von', n.von));
|
||||
}
|
||||
@@ -2811,6 +2946,11 @@
|
||||
window.werZeigen?.(ich);
|
||||
|
||||
await raeumeLaden();
|
||||
/* DIE KACHELN VOR DEM ERSTEN VERLAUF. Kaemen sie danach, stuenden
|
||||
die ersten Nachrichten kurz in Standardfarbe und faerbten sich
|
||||
dann um -- eine Seite, die sich unter den Fingern aendert. */
|
||||
await kachelnLaden();
|
||||
kachelwahlBedienen();
|
||||
stromOeffnen();
|
||||
unterbauBeobachten();
|
||||
unterbauMessen();
|
||||
|
||||
@@ -70,9 +70,39 @@
|
||||
<section class="chat__spalte chat__spalte--liste" aria-labelledby="liste-titel">
|
||||
<div class="chat__kopf">
|
||||
<h1 class="chat__titel" id="liste-titel">Gespräche</h1>
|
||||
<!-- MEINE KACHEL (20.09.2026).
|
||||
Filipe: "jeder account soll seine kachel personalisieren
|
||||
koennen."
|
||||
Der Knopf steht LINKS bei den Gespraechen und nicht rechts
|
||||
im Verlauf: Es ist eine Einstellung ueber MICH, nicht ueber
|
||||
dieses eine Gespraech. Rechts stehen ausserdem schon fuenf
|
||||
Knoepfe, und ein sechster hat dort am Handy keinen Platz
|
||||
mehr -- das war am 19.09. schon einmal der Fehler. -->
|
||||
<button type="button" class="chat__kachelknopf" id="kachel-oeffnen"
|
||||
aria-label="Meine Kachelfarbe wählen"
|
||||
title="Meine Kachelfarbe">
|
||||
<span class="chat__kachelknopf-probe" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Neu</button>
|
||||
</div>
|
||||
|
||||
<!-- Die Auswahl. Als <dialog>, wie die anderen Nachfragen im
|
||||
Haus -- ein eigenes Aufklapp-Menue waere ein zweites Muster
|
||||
fuer dieselbe Sache. -->
|
||||
<dialog class="nachfrage chat-kachelwahl" id="kachel-wahl">
|
||||
<h2 class="nachfrage__titel">Deine Kachel</h2>
|
||||
<p class="nachfrage__text">
|
||||
So sehen deine Nachrichten für alle anderen aus. Alle Töne sind
|
||||
gleich dunkel – damit bleibt die Schrift überall gleich gut
|
||||
lesbar.
|
||||
</p>
|
||||
<div class="chat-kachelwahl__gitter" id="kachel-gitter" role="radiogroup"
|
||||
aria-label="Kachelfarbe"></div>
|
||||
<div class="nachfrage__knoepfe">
|
||||
<button type="button" class="abmelden" id="kachel-zu">Fertig</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- Suchen erst, wenn es etwas zu suchen gibt (chat.js blendet
|
||||
es ab acht Gesprächen ein). Ein Suchfeld über drei Einträgen
|
||||
ist Zierde. -->
|
||||
|
||||
Reference in New Issue
Block a user