DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chat: das Buehnenbild scheint durch, jeder Account bekommt seine Kachel

Browse Source 
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:
DogFatherGit
2026-09-20 19:58:50 +02:00
co-authored by Claude Opus 5
parent 9c96612321
commit 9d086eccaf
6 changed files with 784 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/chat.css
+147 -5
View File
@@ -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. */
}
workspace/assets/js/chat.js
+140
View File
@@ -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();
workspace/chat.html
+30
View File
@@ -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. -->