Merge pull request #10 from ok2/codex/fix-analog-clock-display-and-functionality
Fix analog clock visibility
This commit is contained in:
Kiyomichi Kosaka
GitHub
commit
22395ddd97
185
clock.js
185
clock.js
@ -1,90 +1,101 @@
|
||||
// Minimal CoBiE analog clock logic
|
||||
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;
|
||||
// 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);
|
||||
}
|
||||
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');
|
||||
const radius=clock.offsetWidth/2-20;
|
||||
for(let i=0;i<16;i++){
|
||||
const angle=i/16*2*Math.PI;
|
||||
const x=radius*Math.sin(angle);
|
||||
const y=-radius*Math.cos(angle);
|
||||
const m=document.createElement('div');
|
||||
m.className='marker';
|
||||
m.textContent=i.toString(16).toUpperCase();
|
||||
m.style.left=`${clock.offsetWidth/2+x}px`;
|
||||
m.style.top=`${clock.offsetHeight/2+y}px`;
|
||||
clock.appendChild(m);
|
||||
|
||||
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 updateClock(){
|
||||
const now=new Date();
|
||||
const cob=toCobiets(now);
|
||||
const xf=(cob%COBIE_UNITS.quantic)/COBIE_UNITS.quantic;
|
||||
const qf=(cob%COBIE_UNITS.chronon)/COBIE_UNITS.chronon;
|
||||
const cf=(cob%COBIE_UNITS.eonstrip)/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)`;
|
||||
}
|
||||
window.addEventListener('load',()=>{
|
||||
placeMarkers();
|
||||
updateClock();
|
||||
setInterval(updateClock,1000);
|
||||
const clk=document.getElementById('clock');
|
||||
if(clk){
|
||||
clk.addEventListener('click',()=>{
|
||||
document.body.classList.toggle('fullscreen-clock');
|
||||
});
|
||||
|
||||
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');
|
||||
const radius = clock.offsetWidth / 2 - 20;
|
||||
for (let i = 0; i < 16; i++) {
|
||||
const angle = (i / 16) * 2 * Math.PI;
|
||||
const x = radius * Math.sin(angle);
|
||||
const y = -radius * Math.cos(angle);
|
||||
const m = document.createElement('div');
|
||||
m.className = 'marker';
|
||||
m.textContent = i.toString(16).toUpperCase();
|
||||
m.style.left = `${clock.offsetWidth / 2 + x}px`;
|
||||
m.style.top = `${clock.offsetHeight / 2 + y}px`;
|
||||
clock.appendChild(m);
|
||||
}
|
||||
}
|
||||
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
const cob = toCobiets(now);
|
||||
const xf = (cob % COBIE_UNITS.quantic) / COBIE_UNITS.quantic;
|
||||
const qf = (cob % COBIE_UNITS.chronon) / COBIE_UNITS.chronon;
|
||||
const cf = (cob % COBIE_UNITS.eonstrip) / 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)`;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
placeMarkers();
|
||||
updateClock();
|
||||
setInterval(updateClock, 1000);
|
||||
const clk = document.getElementById('clock');
|
||||
if (clk) {
|
||||
clk.addEventListener('click', () => {
|
||||
document.body.classList.toggle('fullscreen-clock');
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user