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

fix analog clock wrap-around animation

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 00:50:07 +02:00
parent 6371a195ea
commit 7efe528168
1 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
clock.js
View File

@ -37,6 +37,31 @@
});
}
const lastAngles = {
handXeno: 0,
handQuantic: 0,
handChronon: 0,
handEonstrip: 0,
handMegasequence: 0
};
function rotateHand(id, angle) {
const el = document.getElementById(id);
if (!el) return;
const prev = lastAngles[id];
if (angle < prev) {
// Disable transition for wrap-around jumps
el.style.transition = 'none';
el.style.transform = `rotate(${angle}deg)`;
// Force reflow so the style takes effect immediately
void el.offsetWidth;
el.style.transition = '';
} else {
el.style.transform = `rotate(${angle}deg)`;
}
lastAngles[id] = angle;
}
function updateClock() {
const now = new Date();
const cob = toCobiets(now);
@ -46,11 +71,11 @@
const cf = (cob % COBIE_UNITS.eonstrip) / COBIE_UNITS.eonstrip;
const ef = (cob % COBIE_UNITS.megasequence) / COBIE_UNITS.megasequence;
const mf = (cob % COBIE_UNITS.cosmocycle) / COBIE_UNITS.cosmocycle;
document.getElementById('handXeno').style.transform = `rotate(${xf * 360}deg)`;
document.getElementById('handQuantic').style.transform = `rotate(${qf * 360}deg)`;
document.getElementById('handChronon').style.transform = `rotate(${cf * 360}deg)`;
document.getElementById('handEonstrip').style.transform = `rotate(${ef * 360}deg)`;
document.getElementById('handMegasequence').style.transform = `rotate(${mf * 360}deg)`;
rotateHand('handXeno', xf * 360);
rotateHand('handQuantic', qf * 360);
rotateHand('handChronon', cf * 360);
rotateHand('handEonstrip', ef * 360);
rotateHand('handMegasequence', mf * 360);
}
function initClock() {