Fix analog clock script scope
This commit is contained in:
Kiyomichi Kosaka
parent
37548683f7
commit
02efd00293
161
clock.js
161
clock.js
@ -1,90 +1,101 @@
|
|||||||
// Minimal CoBiE analog clock logic
|
// Minimal CoBiE analog clock logic wrapped in its own scope to
|
||||||
const COBIE_EPOCH = 0;
|
// avoid clashes with variables from other scripts on the page.
|
||||||
const COBIE_UNITS = {
|
(function () {
|
||||||
|
const COBIE_EPOCH = 0;
|
||||||
|
const COBIE_UNITS = {
|
||||||
second: 1,
|
second: 1,
|
||||||
xenocycle: 0x10,
|
xenocycle: 0x10,
|
||||||
quantic: 0x100,
|
quantic: 0x100,
|
||||||
chronon: 0x1000,
|
chronon: 0x1000,
|
||||||
eonstrip: 0x10000
|
eonstrip: 0x10000,
|
||||||
};
|
};
|
||||||
function floorDiv(a,b){ return Math.trunc(a/b); }
|
|
||||||
function getTAIOffsetAt(date){
|
function floorDiv(a, b) {
|
||||||
|
return Math.trunc(a / b);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTAIOffsetAt(date) {
|
||||||
const taiEpoch = new Date('1958-01-01T00:00:00Z');
|
const taiEpoch = new Date('1958-01-01T00:00:00Z');
|
||||||
if(date < taiEpoch) return 0;
|
if (date < taiEpoch) return 0;
|
||||||
const leapSeconds=[
|
const leapSeconds = [
|
||||||
{date:'1972-01-01T00:00:00Z',offset:10},
|
{ date: '1972-01-01T00:00:00Z', offset: 10 },
|
||||||
{date:'1972-07-01T00:00:00Z',offset:11},
|
{ date: '1972-07-01T00:00:00Z', offset: 11 },
|
||||||
{date:'1973-01-01T00:00:00Z',offset:12},
|
{ date: '1973-01-01T00:00:00Z', offset: 12 },
|
||||||
{date:'1974-01-01T00:00:00Z',offset:13},
|
{ date: '1974-01-01T00:00:00Z', offset: 13 },
|
||||||
{date:'1975-01-01T00:00:00Z',offset:14},
|
{ date: '1975-01-01T00:00:00Z', offset: 14 },
|
||||||
{date:'1976-01-01T00:00:00Z',offset:15},
|
{ date: '1976-01-01T00:00:00Z', offset: 15 },
|
||||||
{date:'1977-01-01T00:00:00Z',offset:16},
|
{ date: '1977-01-01T00:00:00Z', offset: 16 },
|
||||||
{date:'1978-01-01T00:00:00Z',offset:17},
|
{ date: '1978-01-01T00:00:00Z', offset: 17 },
|
||||||
{date:'1979-01-01T00:00:00Z',offset:18},
|
{ date: '1979-01-01T00:00:00Z', offset: 18 },
|
||||||
{date:'1980-01-01T00:00:00Z',offset:19},
|
{ date: '1980-01-01T00:00:00Z', offset: 19 },
|
||||||
{date:'1981-07-01T00:00:00Z',offset:20},
|
{ date: '1981-07-01T00:00:00Z', offset: 20 },
|
||||||
{date:'1982-07-01T00:00:00Z',offset:21},
|
{ date: '1982-07-01T00:00:00Z', offset: 21 },
|
||||||
{date:'1983-07-01T00:00:00Z',offset:22},
|
{ date: '1983-07-01T00:00:00Z', offset: 22 },
|
||||||
{date:'1985-07-01T00:00:00Z',offset:23},
|
{ date: '1985-07-01T00:00:00Z', offset: 23 },
|
||||||
{date:'1988-01-01T00:00:00Z',offset:24},
|
{ date: '1988-01-01T00:00:00Z', offset: 24 },
|
||||||
{date:'1990-01-01T00:00:00Z',offset:25},
|
{ date: '1990-01-01T00:00:00Z', offset: 25 },
|
||||||
{date:'1991-01-01T00:00:00Z',offset:26},
|
{ date: '1991-01-01T00:00:00Z', offset: 26 },
|
||||||
{date:'1992-07-01T00:00:00Z',offset:27},
|
{ date: '1992-07-01T00:00:00Z', offset: 27 },
|
||||||
{date:'1993-07-01T00:00:00Z',offset:28},
|
{ date: '1993-07-01T00:00:00Z', offset: 28 },
|
||||||
{date:'1994-07-01T00:00:00Z',offset:29},
|
{ date: '1994-07-01T00:00:00Z', offset: 29 },
|
||||||
{date:'1996-01-01T00:00:00Z',offset:30},
|
{ date: '1996-01-01T00:00:00Z', offset: 30 },
|
||||||
{date:'1997-07-01T00:00:00Z',offset:31},
|
{ date: '1997-07-01T00:00:00Z', offset: 31 },
|
||||||
{date:'1999-01-01T00:00:00Z',offset:32},
|
{ date: '1999-01-01T00:00:00Z', offset: 32 },
|
||||||
{date:'2006-01-01T00:00:00Z',offset:33},
|
{ date: '2006-01-01T00:00:00Z', offset: 33 },
|
||||||
{date:'2009-01-01T00:00:00Z',offset:34},
|
{ date: '2009-01-01T00:00:00Z', offset: 34 },
|
||||||
{date:'2012-07-01T00:00:00Z',offset:35},
|
{ date: '2012-07-01T00:00:00Z', offset: 35 },
|
||||||
{date:'2015-07-01T00:00:00Z',offset:36},
|
{ date: '2015-07-01T00:00:00Z', offset: 36 },
|
||||||
{date:'2017-01-01T00:00:00Z',offset:37}
|
{ date: '2017-01-01T00:00:00Z', offset: 37 },
|
||||||
];
|
];
|
||||||
for(let i=0;i<leapSeconds.length;i++){
|
for (let i = 0; i < leapSeconds.length; i++) {
|
||||||
const d=new Date(leapSeconds[i].date);
|
const d = new Date(leapSeconds[i].date);
|
||||||
if(date<d) return i===0?10:leapSeconds[i-1].offset;
|
if (date < d) return i === 0 ? 10 : leapSeconds[i - 1].offset;
|
||||||
}
|
}
|
||||||
return 37;
|
return 37;
|
||||||
}
|
}
|
||||||
function toCobiets(date){
|
|
||||||
const utcSec=floorDiv(date.getTime(),1000);
|
function toCobiets(date) {
|
||||||
const taiSec=utcSec+getTAIOffsetAt(date);
|
const utcSec = floorDiv(date.getTime(), 1000);
|
||||||
return taiSec-COBIE_EPOCH;
|
const taiSec = utcSec + getTAIOffsetAt(date);
|
||||||
}
|
return taiSec - COBIE_EPOCH;
|
||||||
function placeMarkers(){
|
}
|
||||||
const clock=document.getElementById('clock');
|
|
||||||
const radius=clock.offsetWidth/2-20;
|
function placeMarkers() {
|
||||||
for(let i=0;i<16;i++){
|
const clock = document.getElementById('clock');
|
||||||
const angle=i/16*2*Math.PI;
|
const radius = clock.offsetWidth / 2 - 20;
|
||||||
const x=radius*Math.sin(angle);
|
for (let i = 0; i < 16; i++) {
|
||||||
const y=-radius*Math.cos(angle);
|
const angle = (i / 16) * 2 * Math.PI;
|
||||||
const m=document.createElement('div');
|
const x = radius * Math.sin(angle);
|
||||||
m.className='marker';
|
const y = -radius * Math.cos(angle);
|
||||||
m.textContent=i.toString(16).toUpperCase();
|
const m = document.createElement('div');
|
||||||
m.style.left=`${clock.offsetWidth/2+x}px`;
|
m.className = 'marker';
|
||||||
m.style.top=`${clock.offsetHeight/2+y}px`;
|
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);
|
clock.appendChild(m);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function updateClock(){
|
|
||||||
const now=new Date();
|
function updateClock() {
|
||||||
const cob=toCobiets(now);
|
const now = new Date();
|
||||||
const xf=(cob%COBIE_UNITS.quantic)/COBIE_UNITS.quantic;
|
const cob = toCobiets(now);
|
||||||
const qf=(cob%COBIE_UNITS.chronon)/COBIE_UNITS.chronon;
|
const xf = (cob % COBIE_UNITS.quantic) / COBIE_UNITS.quantic;
|
||||||
const cf=(cob%COBIE_UNITS.eonstrip)/COBIE_UNITS.eonstrip;
|
const qf = (cob % COBIE_UNITS.chronon) / COBIE_UNITS.chronon;
|
||||||
document.getElementById('handXeno').style.transform=`rotate(${xf*360}deg)`;
|
const cf = (cob % COBIE_UNITS.eonstrip) / COBIE_UNITS.eonstrip;
|
||||||
document.getElementById('handQuantic').style.transform=`rotate(${qf*360}deg)`;
|
document.getElementById('handXeno').style.transform = `rotate(${xf * 360}deg)`;
|
||||||
document.getElementById('handChronon').style.transform=`rotate(${cf*360}deg)`;
|
document.getElementById('handQuantic').style.transform = `rotate(${qf * 360}deg)`;
|
||||||
}
|
document.getElementById('handChronon').style.transform = `rotate(${cf * 360}deg)`;
|
||||||
window.addEventListener('load',()=>{
|
}
|
||||||
|
|
||||||
|
window.addEventListener('load', () => {
|
||||||
placeMarkers();
|
placeMarkers();
|
||||||
updateClock();
|
updateClock();
|
||||||
setInterval(updateClock,1000);
|
setInterval(updateClock, 1000);
|
||||||
const clk=document.getElementById('clock');
|
const clk = document.getElementById('clock');
|
||||||
if(clk){
|
if (clk) {
|
||||||
clk.addEventListener('click',()=>{
|
clk.addEventListener('click', () => {
|
||||||
document.body.classList.toggle('fullscreen-clock');
|
document.body.classList.toggle('fullscreen-clock');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
})();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user