kaizenkodo/CoBiE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix analog clock alignment

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 10:52:21 +02:00
parent b7a074a75d
commit dbbb21b3d8
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
clock.js
View File

@ -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';