From fe73f9679ac6422537a6e6a3950b36a855e8f5f0 Mon Sep 17 00:00:00 2001
From: Oliver Obenland <oliver.obenland@breuninger.de>
Date: Sat, 24 May 2025 00:24:48 +0200
Subject: [PATCH 1/2] Replace favicon with an animated semicircle of the
 remaing portion of the timer

---
 src/main/resources/templates/room.html | 35 ++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/main/resources/templates/room.html b/src/main/resources/templates/room.html
index 2dd504f..de95ef1 100644
--- a/src/main/resources/templates/room.html
+++ b/src/main/resources/templates/room.html
@@ -210,6 +210,7 @@ <h5>Integration with the mob tool</h5>
 
 </main>
 
+<canvas id="favicon-canvas" width="64" height="64" hidden></canvas>
 <footer th:replace="~{fragments/footer}"></footer>
 
 <div th:replace="~{fragments/github-corner}"></div>
@@ -390,10 +391,44 @@ <h5>Integration with the mob tool</h5>
       }
     }
 
+    let faviconLink = document.querySelector("link[rel='icon']");
+    let faviconUri = faviconLink.getAttribute('href');
+    let faviconCanvas = document.getElementById('favicon-canvas');
+    let faviconCanvasContext = faviconCanvas.getContext('2d');
+    let faviconSize = Math.min(faviconCanvas.width, faviconCanvas.height);
+    function renderTimerFavicon() {
+      if (!faviconCanvasContext || !timerDurationInMilliseconds || !faviconLink) {
+        return;
+      }
+
+      let elapsedMillisecondsSinceRequested = Date.now() - requestedTimestamp;
+      if (elapsedMillisecondsSinceRequested < timerDurationInMilliseconds) {
+        let elapsedTimerFraction = Math.max(0.05, elapsedMillisecondsSinceRequested / timerDurationInMilliseconds);
+        let startAngle = -Math.PI / 2;
+
+        faviconCanvasContext.clearRect(0, 0, faviconSize, faviconSize);
+        faviconCanvasContext.fillStyle = requestType === 'BREAKTIMER' ? 'red' : 'green';
+        faviconCanvasContext.beginPath();
+        faviconCanvasContext.moveTo(faviconSize / 2, faviconSize / 2);
+        faviconCanvasContext.arc(faviconSize / 2,
+                                 faviconSize / 2,
+                                 faviconSize / 2,
+                                 startAngle,
+                                 startAngle + (2 * Math.PI * elapsedTimerFraction));
+        faviconCanvasContext.lineTo(faviconSize / 2, faviconSize / 2);
+        faviconCanvasContext.fill();
+
+        faviconLink.href = faviconCanvas.toDataURL('image/png');
+      } else {
+        faviconLink.href = faviconUri;
+      }
+    }
+
     // loop
     function timer() {
       setTimeout(function () {
         renderTimer();
+        renderTimerFavicon();
         timer();
       }, 50);
     }

From d544077587348db00387632838edc283ae99f38f Mon Sep 17 00:00:00 2001
From: Oliver Obenland <oliver.obenland@breuninger.de>
Date: Sat, 24 May 2025 00:34:18 +0200
Subject: [PATCH 2/2] Replace favicon with an animated semicircle of the
 remaing portion of the timer

---
 src/main/resources/templates/room.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/resources/templates/room.html b/src/main/resources/templates/room.html
index de95ef1..80e0539 100644
--- a/src/main/resources/templates/room.html
+++ b/src/main/resources/templates/room.html
@@ -397,7 +397,7 @@ <h5>Integration with the mob tool</h5>
     let faviconCanvasContext = faviconCanvas.getContext('2d');
     let faviconSize = Math.min(faviconCanvas.width, faviconCanvas.height);
     function renderTimerFavicon() {
-      if (!faviconCanvasContext || !timerDurationInMilliseconds || !faviconLink) {
+      if (!faviconCanvasContext || !requestedTimestamp || !timerDurationInMilliseconds || !faviconLink) {
         return;
       }