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

Fix analog clock visibility

clock.js

@@ -1,13 +1,19 @@
-// Minimal CoBiE analog clock logic
+// 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
+    eonstrip: 0x10000,
   };
-function floorDiv(a,b){ return Math.trunc(a/b); }
+
+  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;
@@ -39,7 +45,7 @@ function getTAIOffsetAt(date){
       { 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}
+      { date: '2017-01-01T00:00:00Z', offset: 37 },
     ];
     for (let i = 0; i < leapSeconds.length; i++) {
       const d = new Date(leapSeconds[i].date);
@@ -47,16 +53,18 @@ function getTAIOffsetAt(date){
     }
     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 angle = (i / 16) * 2 * Math.PI;
       const x = radius * Math.sin(angle);
       const y = -radius * Math.cos(angle);
       const m = document.createElement('div');
@@ -67,6 +75,7 @@ function placeMarkers(){
       clock.appendChild(m);
     }
   }
+
   function updateClock() {
     const now = new Date();
     const cob = toCobiets(now);
@@ -77,6 +86,7 @@ function updateClock(){
     document.getElementById('handQuantic').style.transform = `rotate(${qf * 360}deg)`;
     document.getElementById('handChronon').style.transform = `rotate(${cf * 360}deg)`;
   }
+
   window.addEventListener('load', () => {
     placeMarkers();
     updateClock();
@@ -88,3 +98,4 @@ window.addEventListener('load',()=>{
       });
     }
   });
+})();