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

Merge pull request #38 from ok2/codex/adjust-tick-markers-alignment-on-analog-clock

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 10:52:34 +02:00 committed by GitHub
commit 2c90b77885
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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';