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

refactor clock layout using unified radius

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 11:28:02 +02:00
parent 3a765e01a8
commit 31b326b090
2 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
clock.js
View File

@ -40,38 +40,39 @@
ticks = clock.querySelectorAll('.tick'); ticks = clock.querySelectorAll('.tick');
} }
// Position markers based on the current clock size // Unified radius based on the actual clock size
// Move markers slightly inward and tweak the center position so const rect = clock.getBoundingClientRect();
// the ring of ticks lines up perfectly with the border. const baseRadius = rect.width / 2;
const borderOffset = clock.offsetWidth > 300 ? 45 : 26;
const centerAdjust = { x: -3, y: -2 }; // Tick lengths relative to the clock radius
const markerRadius = clock.offsetWidth / 2 - borderOffset; const lenBig = baseRadius * 0.12;
const lenMid = baseRadius * 0.08;
const lenSmall = baseRadius * 0.05;
const outerR = baseRadius - 2; // just inside the border
// Distance from center for the marker digits so they sit just inside big ticks
const markerSize = markers[0] ? markers[0].offsetWidth : 0;
const markerRadius = outerR - lenBig - markerSize / 2;
markers.forEach((m, i) => { markers.forEach((m, i) => {
const angle = (i / 16) * 2 * Math.PI; const angle = (i / 16) * 2 * Math.PI;
const x = markerRadius * Math.sin(angle); m.style.left = '50%';
const y = -markerRadius * Math.cos(angle); m.style.top = '50%';
m.style.left = `${clock.offsetWidth / 2 + x + centerAdjust.x}px`; m.style.transform =
m.style.top = `${clock.offsetHeight / 2 + y + centerAdjust.y}px`; `translate(-50%, -50%) rotate(${angle}rad) translate(0, -${markerRadius}px) rotate(${-angle}rad)`;
}); });
// Tick lengths based on the marker radius
const lenBig = markerRadius * 0.12;
const lenMid = markerRadius * 0.08;
const lenSmall = markerRadius * 0.05;
ticks.forEach((t, i) => { ticks.forEach((t, i) => {
let len = lenSmall; let len = lenSmall;
if (t.classList.contains('big')) len = lenBig; if (t.classList.contains('big')) len = lenBig;
else if (t.classList.contains('mid')) len = lenMid; else if (t.classList.contains('mid')) len = lenMid;
const outerR = clock.offsetWidth / 2 - 2;
const innerR = outerR - len; const innerR = outerR - len;
const angle = (i / 256) * 2 * Math.PI; const angle = (i / 256) * 2 * Math.PI;
const x = innerR * Math.sin(angle);
const y = -innerR * Math.cos(angle);
t.style.height = `${len}px`; t.style.height = `${len}px`;
t.style.left = `${clock.offsetWidth / 2 + x - t.offsetWidth / 2 + centerAdjust.x}px`; t.style.left = '50%';
t.style.top = `${clock.offsetHeight / 2 + y + centerAdjust.y}px`; t.style.top = '50%';
t.style.transform = `rotate(${angle}rad)`; t.style.transform = `translate(-50%, 0) rotate(${angle}rad) translate(0, -${innerR}px)`;
if (clock.offsetWidth < 200 && !t.classList.contains('big') && !t.classList.contains('mid')) { if (clock.offsetWidth < 200 && !t.classList.contains('big') && !t.classList.contains('mid')) {
t.style.display = 'none'; t.style.display = 'none';
} else { } else {

2
style.css
View File

@ -445,7 +445,7 @@ body.fullscreen-clock .clock-label {
border-radius: 0; border-radius: 0;
text-shadow: 0 0 6px rgba(0, 255, 255, 0.9), 0 0 12px rgba(0, 255, 255, 0.7); text-shadow: 0 0 6px rgba(0, 255, 255, 0.9), 0 0 12px rgba(0, 255, 255, 0.7);
box-shadow: none; box-shadow: none;
transform: translate(-50%, -50%); transform-origin: center;
z-index: 1; z-index: 1;
} }