From 2b9c8523d9337bc2d6e4a7cd510bc7fc7fb76f98 Mon Sep 17 00:00:00 2001
From: Kiyomichi Kosaka <ok2@users.noreply.github.com>
Date: Sat, 14 Jun 2025 23:45:16 +0200
Subject: [PATCH] Fix marker positioning for fullscreen analog clock

---
 clock.js | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/clock.js b/clock.js
index 47c2afa..f2f082d 100644
--- a/clock.js
+++ b/clock.js
@@ -62,18 +62,28 @@
 
   function placeMarkers() {
     const clock = document.getElementById('clock');
+    let markers = clock.querySelectorAll('.marker');
+
+    // Create markers if they don't exist yet
+    if (markers.length === 0) {
+      for (let i = 0; i < 16; i++) {
+        const m = document.createElement('div');
+        m.className = 'marker';
+        m.textContent = i.toString(16).toUpperCase();
+        clock.appendChild(m);
+      }
+      markers = clock.querySelectorAll('.marker');
+    }
+
+    // Position markers based on the current clock size
     const radius = clock.offsetWidth / 2 - 20;
-    for (let i = 0; i < 16; i++) {
+    markers.forEach((m, i) => {
       const angle = (i / 16) * 2 * Math.PI;
       const x = radius * Math.sin(angle);
       const y = -radius * Math.cos(angle);
-      const m = document.createElement('div');
-      m.className = 'marker';
-      m.textContent = i.toString(16).toUpperCase();
       m.style.left = `${clock.offsetWidth / 2 + x}px`;
       m.style.top = `${clock.offsetHeight / 2 + y}px`;
-      clock.appendChild(m);
-    }
+    });
   }
 
   function updateClock() {
@@ -95,8 +105,11 @@
     if (clk) {
       clk.addEventListener('click', () => {
         document.body.classList.toggle('fullscreen-clock');
+        // Re-position markers after toggling fullscreen
+        requestAnimationFrame(placeMarkers);
       });
     }
+    window.addEventListener('resize', placeMarkers);
   }
 
   if (document.readyState === 'loading') {