121 lines
4.2 KiB
JavaScript
121 lines
4.2 KiB
JavaScript
// Minimal CoBiE analog clock logic wrapped in its own scope to
|
|
// avoid clashes with variables from other scripts on the page.
|
|
(function () {
|
|
const COBIE_EPOCH = 0;
|
|
const COBIE_UNITS = {
|
|
second: 1,
|
|
xenocycle: 0x10,
|
|
quantic: 0x100,
|
|
chronon: 0x1000,
|
|
eonstrip: 0x10000,
|
|
};
|
|
|
|
function floorDiv(a, b) {
|
|
return Math.trunc(a / b);
|
|
}
|
|
|
|
function getTAIOffsetAt(date) {
|
|
const taiEpoch = new Date('1958-01-01T00:00:00Z');
|
|
if (date < taiEpoch) return 0;
|
|
const leapSeconds = [
|
|
{ date: '1972-01-01T00:00:00Z', offset: 10 },
|
|
{ date: '1972-07-01T00:00:00Z', offset: 11 },
|
|
{ date: '1973-01-01T00:00:00Z', offset: 12 },
|
|
{ date: '1974-01-01T00:00:00Z', offset: 13 },
|
|
{ date: '1975-01-01T00:00:00Z', offset: 14 },
|
|
{ date: '1976-01-01T00:00:00Z', offset: 15 },
|
|
{ date: '1977-01-01T00:00:00Z', offset: 16 },
|
|
{ date: '1978-01-01T00:00:00Z', offset: 17 },
|
|
{ date: '1979-01-01T00:00:00Z', offset: 18 },
|
|
{ date: '1980-01-01T00:00:00Z', offset: 19 },
|
|
{ date: '1981-07-01T00:00:00Z', offset: 20 },
|
|
{ date: '1982-07-01T00:00:00Z', offset: 21 },
|
|
{ date: '1983-07-01T00:00:00Z', offset: 22 },
|
|
{ date: '1985-07-01T00:00:00Z', offset: 23 },
|
|
{ date: '1988-01-01T00:00:00Z', offset: 24 },
|
|
{ date: '1990-01-01T00:00:00Z', offset: 25 },
|
|
{ date: '1991-01-01T00:00:00Z', offset: 26 },
|
|
{ date: '1992-07-01T00:00:00Z', offset: 27 },
|
|
{ date: '1993-07-01T00:00:00Z', offset: 28 },
|
|
{ date: '1994-07-01T00:00:00Z', offset: 29 },
|
|
{ date: '1996-01-01T00:00:00Z', offset: 30 },
|
|
{ date: '1997-07-01T00:00:00Z', offset: 31 },
|
|
{ date: '1999-01-01T00:00:00Z', offset: 32 },
|
|
{ date: '2006-01-01T00:00:00Z', offset: 33 },
|
|
{ date: '2009-01-01T00:00:00Z', offset: 34 },
|
|
{ date: '2012-07-01T00:00:00Z', offset: 35 },
|
|
{ date: '2015-07-01T00:00:00Z', offset: 36 },
|
|
{ date: '2017-01-01T00:00:00Z', offset: 37 },
|
|
];
|
|
for (let i = 0; i < leapSeconds.length; i++) {
|
|
const d = new Date(leapSeconds[i].date);
|
|
if (date < d) return i === 0 ? 10 : leapSeconds[i - 1].offset;
|
|
}
|
|
return 37;
|
|
}
|
|
|
|
function toCobiets(date) {
|
|
const utcSec = floorDiv(date.getTime(), 1000);
|
|
const taiSec = utcSec + getTAIOffsetAt(date);
|
|
return taiSec - COBIE_EPOCH;
|
|
}
|
|
|
|
function placeMarkers() {
|
|
const clock = document.getElementById('clock');
|
|
let markers = clock.querySelectorAll('.marker');
|
|
|
|
// Create markers if they don't exist yet
|
|
if (markers.length === 0) {
|
|
for (let i = 0; i < 16; i++) {
|
|
const m = document.createElement('div');
|
|
m.className = 'marker';
|
|
m.textContent = i.toString(16).toUpperCase();
|
|
clock.appendChild(m);
|
|
}
|
|
markers = clock.querySelectorAll('.marker');
|
|
}
|
|
|
|
// Position markers based on the current clock size
|
|
const radius = clock.offsetWidth / 2 - 20;
|
|
markers.forEach((m, i) => {
|
|
const angle = (i / 16) * 2 * Math.PI;
|
|
const x = radius * Math.sin(angle);
|
|
const y = -radius * Math.cos(angle);
|
|
m.style.left = `${clock.offsetWidth / 2 + x}px`;
|
|
m.style.top = `${clock.offsetHeight / 2 + y}px`;
|
|
});
|
|
}
|
|
|
|
function updateClock() {
|
|
const now = new Date();
|
|
const cob = toCobiets(now);
|
|
const xf = cob / COBIE_UNITS.quantic;
|
|
const qf = cob / COBIE_UNITS.chronon;
|
|
const cf = cob / COBIE_UNITS.eonstrip;
|
|
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)`;
|
|
}
|
|
|
|
function initClock() {
|
|
placeMarkers();
|
|
updateClock();
|
|
setInterval(updateClock, 1000);
|
|
const clk = document.getElementById('clock');
|
|
if (clk) {
|
|
clk.addEventListener('click', () => {
|
|
document.body.classList.toggle('fullscreen-clock');
|
|
// Re-position markers after toggling fullscreen
|
|
requestAnimationFrame(placeMarkers);
|
|
});
|
|
}
|
|
window.addEventListener('resize', placeMarkers);
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initClock);
|
|
} else {
|
|
initClock();
|
|
}
|
|
})();
|