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

Merge pull request #24 from ok2/codex/disable-animation-during-state-reset

Browse Source 
Fix analog clock wrap-around animation
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 00:51:04 +02:00 committed by GitHub
commit 3a3bfc8ebb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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() { function updateClock() {
const now = new Date(); const now = new Date();
const cob = toCobiets(now); const cob = toCobiets(now);
@ -46,11 +71,11 @@
const cf = (cob % COBIE_UNITS.eonstrip) / COBIE_UNITS.eonstrip; const cf = (cob % COBIE_UNITS.eonstrip) / COBIE_UNITS.eonstrip;
const ef = (cob % COBIE_UNITS.megasequence) / COBIE_UNITS.megasequence; const ef = (cob % COBIE_UNITS.megasequence) / COBIE_UNITS.megasequence;
const mf = (cob % COBIE_UNITS.cosmocycle) / COBIE_UNITS.cosmocycle; const mf = (cob % COBIE_UNITS.cosmocycle) / COBIE_UNITS.cosmocycle;
document.getElementById('handXeno').style.transform = `rotate(${xf * 360}deg)`; rotateHand('handXeno', xf * 360);
document.getElementById('handQuantic').style.transform = `rotate(${qf * 360}deg)`; rotateHand('handQuantic', qf * 360);
document.getElementById('handChronon').style.transform = `rotate(${cf * 360}deg)`; rotateHand('handChronon', cf * 360);
document.getElementById('handEonstrip').style.transform = `rotate(${ef * 360}deg)`; rotateHand('handEonstrip', ef * 360);
document.getElementById('handMegasequence').style.transform = `rotate(${mf * 360}deg)`; rotateHand('handMegasequence', mf * 360);
} }
function initClock() { function initClock() {