Telefonieren im Chat -- und die Farben nach Nachbarschaft verteilt
ZWEI SACHEN IN EINEM COMMIT, weil beide aus derselben Nacht stammen. === 1. DIE FARBEN: DER RICHTIGE ABSTAND === Filipe: "es gibt noch mehr die aehnlich aussehen von den farben also leg los alle die sich aehnlich sind von den farben wechseln." Er hatte recht, und mein Denkfehler laesst sich benennen: Ich hatte den kleinsten Abstand ueber ALLE 37 Paare maximiert -- und der liegt bei 37 Farben zwangslaeufig bei 0,10. Das ist die Packungsgrenze, kein Versaeumnis. NUR SIEHT NIEMAND ALLE 37 NEBENEINANDER. Man sieht NACHBARN. Im Browser gemessen, an der tatsaechlichen Lage auf dem Schirm -- 125 Paare, die wirklich nebeneinander stehen, 15 davon unter 0,15: Creator-Profile / Zahlen 0,1019 beide rosa-rot LIVE-Analyse / Technik 0,1030 beide orange Wunschliste / Meldungen 0,1032 beide gelbgruen Wer sieht was / Entwicklung 0,1039 beide cyan Regeln & Hilfe / Mitmachen 0,1047 beide gruen Der Treff / Anschlagbrett 0,1070 beide rosa Die Farben bleiben, ihre ZUTEILUNG aendert sich: Nachbarabstand 0,1047 -> 0,2133 (mehr als verdoppelt) Nachbarn unter 0,15 6 -> 0 Die Nachbarschaft steht in server/kachel-nachbarn.json, gemessen im Browser -- nicht aus der Struktur im Quelltext abgeleitet. Die sagt, was zusammengehoert, nicht was zusammen zu sehen ist. === 2. TELEFONIEREN IM CHAT === Filipe: "kann man machen dass die modis, rechte hand und ich auch telefonieren koennen im chat?" ... "was man selbst in die app reinsetzten kann, nicht meinen pc belastet und trotzdem vielleicht in gruppe, mit video oder einzelnd." DER TON GEHT NICHT UEBER DEN SERVER. Direkt von Browser zu Browser (WebRTC); der Server reicht nur die Verbindungsdaten weiter, ein paar Kilobyte je Anruf. Zu zweit kodiert jedes Geraet einen Strom und dekodiert einen -- die Last eines gewoehnlichen Videoanrufs. KEIN NEUER DIENST. Der Chat hatte bereits alles: `chatEreignis()` fuer den Hinweg (SSE), Push fuers Klingeln, Raeume mit mehreren Teilnehmern. Ein eigener WebSocket daneben waere eine zweite Verbindung fuer dieselbe Frage -- und die zweite wird beim naechsten Umbau vergessen. Gebaut: Ton und Video, einzeln und in Gruppe bis GRUPPE_MAX (4), Klingeln mit Annehmen/Ablehnen, Mikro und Kamera schaltbar, Gespraechsdauer, Auflegen. Der Chat bleibt daneben benutzbar -- man schreibt oft, waehrend man spricht. EIN FUND, DER OHNE PRUEFLAUF LIVE GEGANGEN WAERE: Der Server sperrt Mikrofon und Kamera per Permissions-Policy auf ALLEN Seiten. Der erste Lauf meldete "microphone is not allowed in this document" -- der Anruf haette bei JEDEM versagt, mit einer Meldung, die auf die falsche Faehrte fuehrt (man sucht an den Browsereinstellungen). Die Sperre bleibt ueberall und ist an genau EINER Stelle geoeffnet: der Chat-Seite, und nur fuer sie selbst (`self`, nicht `*`). NOCH NICHT GEBAUT -- und ausdruecklich nicht heimlich: coturn. Ohne Vermittlungsserver klappen Anrufe nur im selben Netz. Die Adressen stehen in den Einstellungen statt im Quelltext; sie lassen sich nachtragen, ohne eine Zeile zu aendern. Ein oeffentlicher STUN-Dienst als Standard kam nicht in Frage: Er saehe bei jedem Anruf die IP-Adressen beider Teilnehmer, und fuer ein Team, das ueber Moderation und Vorfaelle spricht, ist das keine Kleinigkeit. server/pruef-anruf.mjs, 40 Pruefungen. Der wichtigste Abschnitt: Wer nicht in den Raum gehoert, kommt an KEINE Route. Ein Anruf hinterlaesst keine Spur -- wer mithoert, faellt nicht auf. Gegenproben, jede zielgenau: Empfaengerpruefung der Signalisierung weg -> 1 rot Raumpruefung weg -> 5 rot (jede Route offen) Kopfzeilen-Ausnahme weg -> 4 rot Gruen: anruf, chat, chat-optik, chat-kanaele, css-klassen, namen, struktur. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -1512,3 +1512,153 @@
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.chat-pin__auf, .chat-pin__los, .neu__art button { transition: none; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
TELEFONIEREN (18.09.2026)
|
||||
|
||||
Filipe: „kann man machen dass die modis, rechte hand und ich auch
|
||||
telefonieren können im chat?"
|
||||
|
||||
DER KASTEN SCHWEBT UNTEN RECHTS und nimmt dem Gespräch nichts weg.
|
||||
Ein Anruf ersetzt den Chat nicht -- man schreibt oft WÄHREND man
|
||||
spricht („schick mir mal den Link"). Ein Vollbild-Anruf hätte genau
|
||||
das unmöglich gemacht.
|
||||
|
||||
Am Handy geht er über die volle Breite: Dort ist daneben ohnehin
|
||||
kein Platz, und ein halber Kasten wäre nur im Weg.
|
||||
===================================================================== */
|
||||
.anruf {
|
||||
position: fixed;
|
||||
right: 18px; bottom: 18px;
|
||||
z-index: 60;
|
||||
width: min(340px, calc(100vw - 36px));
|
||||
padding: 14px 16px;
|
||||
border: 1px solid color-mix(in srgb, var(--gut, #79d1a2) 40%, var(--rand));
|
||||
border-radius: 14px;
|
||||
/* Undurchsichtig gemischt: Ein Anrufkasten, durch den das
|
||||
Bühnenbild scheint, ist genau dann schlecht lesbar, wenn es
|
||||
schnell gehen muss. */
|
||||
background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
|
||||
box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .9);
|
||||
}
|
||||
|
||||
.anruf__kopf {
|
||||
display: flex; align-items: baseline; gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.anruf__lage {
|
||||
font-size: .86rem; font-weight: 600;
|
||||
color: color-mix(in srgb, var(--gut, #79d1a2) 30%, #ffffff);
|
||||
}
|
||||
.anruf__zeit {
|
||||
margin-inline-start: auto;
|
||||
font-size: .82rem; color: var(--text-still);
|
||||
/* Gleiche Ziffernbreite -- sonst zappelt die Uhr bei jedem Wechsel. */
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.anruf__leute {
|
||||
display: flex; flex-wrap: wrap; gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.anruf__bild {
|
||||
width: 100%; max-width: 150px; aspect-ratio: 4 / 3;
|
||||
border-radius: 10px;
|
||||
background: #05070e;
|
||||
object-fit: cover;
|
||||
}
|
||||
/* Das eigene Bild kleiner -- man schaut die anderen an, nicht sich. */
|
||||
.anruf__bild--ich { max-width: 88px; }
|
||||
.anruf__name { font-size: .8rem; color: var(--text-leise); }
|
||||
|
||||
.anruf__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.anruf__knopf {
|
||||
min-height: 40px;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--rand-hell);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
|
||||
color: var(--text);
|
||||
font: inherit; font-size: .84rem; font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.anruf__knopf:hover { border-color: var(--akzent); }
|
||||
.anruf__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||||
/* Aus heißt aus -- und zwar sichtbar. Ein stummes Mikrofon, das
|
||||
aussieht wie ein offenes, ist der Grund, warum Leute in Konferenzen
|
||||
ins Leere reden. */
|
||||
.anruf__knopf[aria-pressed="false"] {
|
||||
border-style: dashed;
|
||||
color: var(--text-still);
|
||||
}
|
||||
.anruf__knopf--auf {
|
||||
margin-inline-start: auto;
|
||||
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 55%, var(--rand));
|
||||
color: color-mix(in srgb, var(--warn, #ff9aa2) 40%, #ffffff);
|
||||
}
|
||||
.anruf__knopf--auf:hover { border-color: var(--warn, #ff9aa2); }
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
ES KLINGELT
|
||||
|
||||
MITTIG UND ÜBER ALLEM. Ein Anruf, den man übersieht, ist ein
|
||||
verpasster -- das ist der eine Fall, in dem etwas den Bildschirm
|
||||
unterbrechen darf.
|
||||
--------------------------------------------------------------------- */
|
||||
.anruf-klingelt {
|
||||
position: fixed;
|
||||
left: 50%; top: 24px;
|
||||
transform: translateX(-50%);
|
||||
z-index: 70;
|
||||
width: min(380px, calc(100vw - 32px));
|
||||
padding: 16px 18px;
|
||||
border: 1px solid color-mix(in srgb, var(--akzent) 50%, var(--rand));
|
||||
border-radius: 14px;
|
||||
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
||||
box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .95);
|
||||
text-align: center;
|
||||
}
|
||||
.anruf-klingelt__wer {
|
||||
margin: 0 0 12px;
|
||||
font-size: .96rem; font-weight: 700;
|
||||
}
|
||||
.anruf-klingelt__knoepfe { display: flex; gap: 10px; justify-content: center; }
|
||||
.anruf-klingelt__ja, .anruf-klingelt__nein {
|
||||
min-height: 44px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 999px;
|
||||
font: inherit; font-size: .88rem; font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.anruf-klingelt__ja {
|
||||
border: 1px solid color-mix(in srgb, var(--gut, #79d1a2) 60%, transparent);
|
||||
background: color-mix(in srgb, var(--gut, #79d1a2) 18%, var(--tinte));
|
||||
color: #ffffff;
|
||||
}
|
||||
.anruf-klingelt__nein {
|
||||
border: 1px solid var(--rand-hell);
|
||||
background: none;
|
||||
color: var(--text-leise);
|
||||
}
|
||||
.anruf-klingelt__ja:focus-visible,
|
||||
.anruf-klingelt__nein:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||||
|
||||
/* Die zwei Knöpfe im Kopf des Gesprächs. Gebaut wie die Nachbarn
|
||||
daneben, damit die Zeile eine Sprache spricht. */
|
||||
.chat__anruf svg {
|
||||
width: 18px; height: 18px;
|
||||
fill: none; stroke: currentColor; stroke-width: 1.7;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
.chat__anruf:hover { color: color-mix(in srgb, var(--gut, #79d1a2) 40%, #ffffff); }
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.anruf {
|
||||
right: 8px; left: 8px; bottom: 8px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.anruf, .anruf-klingelt { transition: none; }
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user