Chat-Overlay: echte Twitch-Abzeichen statt farbiger Punkte

Der Hub loest die Abzeichen aus dem IRC-Tag ueber Helix (global und
Kanal) zu Bildern auf und schickt sie mit jeder Chatzeile mit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/overlay-web/public/chat.html

@@ -53,18 +53,15 @@
   background: rgba(0, 0, 0, .35);
 }
 
-/* Abzeichen statt Bilder: Twitchs Abzeichen-URLs haengen am Kanal und muessten
- * ueber Helix aufgeloest werden. Ein farbiger Punkt sagt dasselbe. */
+/* Twitchs eigene Abzeichen. Die Bilder loest der Hub ueber Helix auf und
+ * schickt sie mit jeder Zeile mit (#twitch/badges.ts). */
 .abzeichen {
-  display: inline-block;
-  width: .5em; height: .5em;
-  border-radius: 50%;
-  margin-right: .4em;
-  vertical-align: .08em;
+  height: 1.05em;
+  width: auto;
+  margin-right: .3em;
+  vertical-align: -.17em;
 }
-.abzeichen.mod { background: var(--gruen); }
-.abzeichen.abo { background: var(--lila); }
-.abzeichen.host { background: var(--rot); }
+.abzeichen:last-of-type { margin-right: .45em; }
 
 /* Wer zum ersten Mal schreibt, wird hervorgehoben - das ist der Moment, in
  * dem eine Begruessung am meisten bringt. Ohne den Balken an der linken Kante
@@ -152,9 +149,13 @@
     el.dataset.user = ev.userId;
 
     var abzeichen = '';
-    if (ev.broadcaster) abzeichen += '<span class="abzeichen host"></span>';
-    else if (ev.mod) abzeichen += '<span class="abzeichen mod"></span>';
-    if (ev.sub) abzeichen += '<span class="abzeichen abo"></span>';
+    var bilder = ev.badges || [];
+    for (var i = 0; i < bilder.length; i++) {
+      // Nur Twitchs eigene Bildadressen: was hier steht, laedt OBS.
+      if (!/^https:\/\/static-cdn\.jtvnw\.net\//.test(bilder[i].url)) continue;
+      abzeichen += '<img class="abzeichen" src="' + Overlay.esc(bilder[i].url) +
+        '" alt="' + Overlay.esc(bilder[i].title) + '">';
+    }
 
     el.innerHTML =
       abzeichen +