From dbbb21b3d882592527d2a5aa37007881f3fba136 Mon Sep 17 00:00:00 2001 From: Kiyomichi Kosaka Date: Sun, 15 Jun 2025 10:52:21 +0200 Subject: [PATCH] fix analog clock alignment --- clock.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/clock.js b/clock.js index 23afe9d..4818a09 100644 --- a/clock.js +++ b/clock.js @@ -41,14 +41,17 @@ } // Position markers based on the current clock size - const borderOffset = clock.offsetWidth > 300 ? 30 : 20; + // Move markers slightly inward and tweak the center position so + // the ring of ticks lines up perfectly with the border. + const borderOffset = clock.offsetWidth > 300 ? 35 : 25; + const centerAdjust = { x: -1, y: -1 }; const markerRadius = clock.offsetWidth / 2 - borderOffset; markers.forEach((m, i) => { const angle = (i / 16) * 2 * Math.PI; const x = markerRadius * Math.sin(angle); const y = -markerRadius * Math.cos(angle); - m.style.left = `${clock.offsetWidth / 2 + x}px`; - m.style.top = `${clock.offsetHeight / 2 + y}px`; + m.style.left = `${clock.offsetWidth / 2 + x + centerAdjust.x}px`; + m.style.top = `${clock.offsetHeight / 2 + y + centerAdjust.y}px`; }); // Tick lengths based on the marker radius @@ -66,8 +69,8 @@ const x = innerR * Math.sin(angle); const y = -innerR * Math.cos(angle); t.style.height = `${len}px`; - t.style.left = `${clock.offsetWidth / 2 + x - t.offsetWidth / 2}px`; - t.style.top = `${clock.offsetHeight / 2 + y}px`; + t.style.left = `${clock.offsetWidth / 2 + x - t.offsetWidth / 2 + centerAdjust.x}px`; + t.style.top = `${clock.offsetHeight / 2 + y + centerAdjust.y}px`; t.style.transform = `rotate(${angle}rad)`; if (clock.offsetWidth < 200 && !t.classList.contains('big') && !t.classList.contains('mid')) { t.style.display = 'none';