Liegestuetze: pro Stream mitzaehlen, wie viele gemacht sind

Herunterzaehlen mit -1/-5/-10 zaehlt als gemacht, Setzen bleibt eine
Korrektur und zaehlt nicht. Der Stand "gemacht" beginnt mit jedem neuen
Stream bei 0 (nicht beim Neustart des Hubs mitten im Stream), steht im
Overlay unter der offenen Zahl und laesst sich auf der Uebersicht
korrigieren.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

apps/overlay-web/public/liegestuetze.html

@@ -5,14 +5,16 @@
 <title>abdulive - Liegestütze</title>
 <link rel="stylesheet" href="/theme.css">
 <style>
-/* Offene Liegestütze aus Kanalpunkten.
+/* Liegestütze aus Kanalpunkten: groß die offenen, darunter die in diesem
+ * Stream schon gemachten.
  *
  * Eine Einlösung zählt hoch und zeigt kurz, wer es war. Wenn Abdu auf der
- * Übersichtsseite herunterzählt, blinkt die Zahl grün - ohne Namen, damit
- * eine Korrektur nicht wie eine Einlösung aussieht.
+ * Übersichtsseite herunterzählt, blinkt die Zahl grün und "gemacht" wächst -
+ * ohne Namen, damit das nicht wie eine Einlösung aussieht.
  *
  * In OBS: Browser-Quelle 420x200. Einstellungen in der Adresse:
- *   ?verstecken=1   bei 0 ausblenden statt "erledigt" zeigen
+ *   ?verstecken=1   ausblenden, solange nichts offen und nichts gemacht ist
+ *   ?gemacht=0      die Zeile "gemacht" weglassen
  *   ?titel=...      andere Beschriftung als "Liegestütze" */
 #karte {
   position: absolute;
@@ -48,6 +50,22 @@
 }
 #zahl.erledigt { font-size: 30px; color: var(--gruen); padding: 8px 0 6px; }
 
+#gemacht {
+  display: flex; align-items: center; gap: 6px;
+  margin-top: 7px;
+  font: 600 16px/1 var(--font-zahl);
+  font-variant-numeric: tabular-nums;
+  color: var(--schrift-leise);
+}
+#gemacht b { color: var(--gruen); font-weight: 800; }
+#gemacht svg { width: 15px; height: 15px; color: var(--gruen); }
+#gemacht.aus { display: none; }
+#gemacht.mehr b { animation: gemacht-mehr .9s ease-out; display: inline-block; }
+@keyframes gemacht-mehr {
+  0%   { transform: scale(1.35); }
+  100% { transform: none; }
+}
+
 /* Einlösung: Karte glüht gold, Zahl springt. */
 #karte.mehr { border-color: var(--gold); box-shadow: var(--schatten), 0 0 28px rgba(255, 197, 61, .55); }
 #zahl.springen { animation: springen .6s cubic-bezier(.3, 1.6, .5, 1); }
@@ -67,7 +85,7 @@
 /* "+5 von Name", steigt über der Karte auf. */
 #plus {
   position: absolute;
-  left: 12px; bottom: 112px;
+  left: 12px; bottom: 140px;
   max-width: 396px;
   padding: 8px 14px;
   font: 700 20px/1.1 var(--font);
@@ -101,6 +119,13 @@
     <div class="text">
       <div id="titel" class="kontur">Liegestütze</div>
       <span id="zahl" class="kontur">0</span>
+      <div id="gemacht" class="kontur">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
+             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M5 12.5l4.5 4.5L19 7.5"/>
+        </svg>
+        <span><b>0</b> gemacht</span>
+      </div>
     </div>
   </div>
 
@@ -112,10 +137,14 @@
   var karte = document.getElementById('karte');
   var zahl = document.getElementById('zahl');
   var plus = document.getElementById('plus');
+  var gemacht = document.getElementById('gemacht');
+  var gemachtZahl = gemacht.querySelector('b');
+  if (!Overlay.param('gemacht', true)) gemacht.classList.add('aus');
   var verstecken = Overlay.param('verstecken', false);
   document.getElementById('titel').textContent = Overlay.param('titel', 'Liegestütze');
 
   var angezeigt = null;   // was gerade im Bild steht
+  var gemachtBisher = null;
   var lauf = null;        // laufendes Hochzählen
   var glimmen = null;
 
@@ -127,7 +156,18 @@
       zahl.textContent = Overlay.zahl(n);
       zahl.classList.remove('erledigt');
     }
-    karte.classList.toggle('weg', verstecken && n === 0);
+  }
+
+  function sichtbarkeit() {
+    karte.classList.toggle('weg', verstecken && angezeigt === 0 && !gemachtBisher);
+  }
+
+  function zeigeGemacht(g) {
+    if (typeof g !== 'number') return;
+    var alt = gemachtBisher;
+    gemachtBisher = g;
+    gemachtZahl.textContent = Overlay.zahl(g);
+    if (alt !== null && g > alt) nochmal(gemacht, 'mehr');
   }
 
   function nochmal(el, klasse) {
@@ -176,9 +216,16 @@
     }
   }
 
-  Overlay.on('state', function (ev) { stand(ev.liegestuetze); });
+  Overlay.on('state', function (ev) {
+    if (!ev.liegestuetze) return;
+    stand(ev.liegestuetze.offen);
+    zeigeGemacht(ev.liegestuetze.gemacht);
+    sichtbarkeit();
+  });
   Overlay.on('liegestuetze', function (ev) {
     stand(ev.offen, ev.dazu ? { dazu: ev.dazu, name: ev.name } : null);
+    zeigeGemacht(ev.gemacht);
+    sichtbarkeit();
   });
 })();
 </script>