UHrzeit und Starttick

data/index.html

@@ -24,6 +24,7 @@
     </div>
 
     <img src="/pictures/erlebniss.png" class="logo" alt="NinjaCross Logo" />
+    <div id="live-clock" class="live-clock">--:--:--</div>
     <a href="/leaderboard.html" class="leaderboard-btn">🏆</a>
     <a href="/settings" class="settings-btn">⚙️</a>
 
@@ -167,6 +168,23 @@
               document.getElementById(indicatorId).classList.remove("active");
             }
           }
+          // Start-/Stopp-Event → Status kann jetzt wechseln (ready↔running).
+          // Bei Stop-Events den Display-Wert lokal einfrieren, damit der
+          // Timer nicht bis zum nächsten Sync weiterzählt und dann sichtbar
+          // zurückspringt. Anschließend sofort syncen, damit der Scheduler
+          // zwischen schneller (50 ms) und langsamer (500 ms) Taktung wechselt.
+          if (data.active === true) {
+            const now = Date.now();
+            if (data.button === "stop1" && status1 === "running") {
+              timer1 += (now - lastSync) / 1000;
+              status1 = "stopped";
+            } else if (data.button === "stop2" && status2 === "running") {
+              timer2 += (now - lastSync) / 1000;
+              status2 = "stopped";
+            }
+            kickDisplayScheduler();
+            syncFromBackend();
+          }
         }
 
         try {
@@ -468,13 +486,28 @@
         }
       }
 
+      function formatEndTime(epochSeconds) {
+        if (!epochSeconds || epochSeconds < 1577836800) return ""; // < 2020 = kein NTP-Sync
+        const d = new Date(epochSeconds * 1000);
+        const hh = String(d.getHours()).padStart(2, "0");
+        const mm = String(d.getMinutes()).padStart(2, "0");
+        const ss = String(d.getSeconds()).padStart(2, "0");
+        return `${hh}:${mm}:${ss}`;
+      }
+
       function createEntryElement(entry) {
         const div = document.createElement("div");
         div.className = "leaderboard-entry";
 
         const nameSpan = document.createElement("span");
         nameSpan.className = "name";
-        nameSpan.textContent = entry.name || "Unbekannt";
+        let label = entry.name || "Unbekannt";
+        // Bei "Lauf N"-Einträgen die Endzeit in Klammern anhängen
+        if (/^Lauf\s+\d+$/.test(label)) {
+          const endTime = formatEndTime(entry.endEpoch);
+          if (endTime) label += ` (${endTime})`;
+        }
+        nameSpan.textContent = label;
 
         const timeSpan = document.createElement("span");
         timeSpan.className = "time";
@@ -800,7 +833,7 @@
             learningMode = data.learningMode;
             learningButton = data.learningButton || "";
             lastSync = Date.now();
-            updateDisplay();
+            kickDisplayScheduler();
           })
           .catch((error) =>
             console.error("Fehler beim Laden deiner Daten:", error)
@@ -849,8 +882,24 @@
       // Sync with backend every 1 second
       setInterval(syncFromBackend, 1000);
 
-      // Smooth update every 50ms
-      setInterval(updateDisplay, 50);
+      // Adaptive Update-Rate: 50 ms wenn mindestens eine Bahn läuft,
+      // sonst 500 ms. Über kickDisplayScheduler() kann der Zyklus sofort
+      // neu gestartet werden (WebSocket-Start-Event, frische Sync-Daten),
+      // damit beim Übergang Stand→Lauf nichts springt.
+      let displayTimer = null;
+      function scheduleDisplayUpdate() {
+        updateDisplay();
+        const anyRunning = status1 === "running" || status2 === "running";
+        displayTimer = setTimeout(scheduleDisplayUpdate, anyRunning ? 50 : 500);
+      }
+      function kickDisplayScheduler() {
+        if (displayTimer !== null) {
+          clearTimeout(displayTimer);
+          displayTimer = null;
+        }
+        scheduleDisplayUpdate();
+      }
+      scheduleDisplayUpdate();
 
       // Heartbeat timeout check (every second)
       setInterval(() => {
@@ -882,6 +931,18 @@
 
       // Leaderboard alle 5 Sekunden aktualisieren
       setInterval(loadLeaderboard, 5000);
+
+      // Live-Uhr im Header (HH:mm:ss, Browser-Lokalzeit)
+      function updateLiveClock() {
+        const now = new Date();
+        const hh = String(now.getHours()).padStart(2, "0");
+        const mm = String(now.getMinutes()).padStart(2, "0");
+        const ss = String(now.getSeconds()).padStart(2, "0");
+        const el = document.getElementById("live-clock");
+        if (el) el.textContent = `${hh}:${mm}:${ss}`;
+      }
+      updateLiveClock();
+      setInterval(updateLiveClock, 1000);
     </script>
   </body>
 </html>