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

Merge pull request #10 from ok2/codex/fix-analog-clock-display-and-functionality

Browse Source 
Fix analog clock visibility
This commit is contained in:
Kiyomichi Kosaka 2025-06-14 23:19:39 +02:00 committed by GitHub
commit 22395ddd97
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 98 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
clock.js
View File

@ -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 () {
second: 1, const COBIE_EPOCH = 0;
xenocycle: 0x10, const COBIE_UNITS = {
quantic: 0x100, second: 1,
chronon: 0x1000, xenocycle: 0x10,
eonstrip: 0x10000 quantic: 0x100,
}; chronon: 0x1000,
function floorDiv(a,b){ return Math.trunc(a/b); } eonstrip: 0x10000,
function getTAIOffsetAt(date){ };
const taiEpoch = new Date('1958-01-01T00:00:00Z');
if(date < taiEpoch) return 0; function floorDiv(a, b) {
const leapSeconds=[ return Math.trunc(a / b);
{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 getTAIOffsetAt(date) {
function toCobiets(date){ const taiEpoch = new Date('1958-01-01T00:00:00Z');
const utcSec=floorDiv(date.getTime(),1000); if (date < taiEpoch) return 0;
const taiSec=utcSec+getTAIOffsetAt(date); const leapSeconds = [
return taiSec-COBIE_EPOCH; { date: '1972-01-01T00:00:00Z', offset: 10 },
} { date: '1972-07-01T00:00:00Z', offset: 11 },
function placeMarkers(){ { date: '1973-01-01T00:00:00Z', offset: 12 },
const clock=document.getElementById('clock'); { date: '1974-01-01T00:00:00Z', offset: 13 },
const radius=clock.offsetWidth/2-20; { date: '1975-01-01T00:00:00Z', offset: 14 },
for(let i=0;i<16;i++){ { date: '1976-01-01T00:00:00Z', offset: 15 },
const angle=i/16*2*Math.PI; { date: '1977-01-01T00:00:00Z', offset: 16 },
const x=radius*Math.sin(angle); { date: '1978-01-01T00:00:00Z', offset: 17 },
const y=-radius*Math.cos(angle); { date: '1979-01-01T00:00:00Z', offset: 18 },
const m=document.createElement('div'); { date: '1980-01-01T00:00:00Z', offset: 19 },
m.className='marker'; { date: '1981-07-01T00:00:00Z', offset: 20 },
m.textContent=i.toString(16).toUpperCase(); { date: '1982-07-01T00:00:00Z', offset: 21 },
m.style.left=`${clock.offsetWidth/2+x}px`; { date: '1983-07-01T00:00:00Z', offset: 22 },
m.style.top=`${clock.offsetHeight/2+y}px`; { date: '1985-07-01T00:00:00Z', offset: 23 },
clock.appendChild(m); { 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(){ function toCobiets(date) {
const now=new Date(); const utcSec = floorDiv(date.getTime(), 1000);
const cob=toCobiets(now); const taiSec = utcSec + getTAIOffsetAt(date);
const xf=(cob%COBIE_UNITS.quantic)/COBIE_UNITS.quantic; return taiSec - COBIE_EPOCH;
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 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');
});
}
});
})();