Merge pull request #58 from ok2/codex/add-interactive-view-for-eonstrip-events

script.js

@@ -651,19 +651,11 @@ function updateCalendar() {
         tooltip.innerHTML = showEonstripDetails(i, cellCob, dateOpts);
         card.appendChild(tooltip);
         grid.appendChild(card);
-        (function(cob) {
+        (function(cob, idx) {
             card.addEventListener('click', () => {
-                currentOffset = 0;
-                manualMode = true;
-                manualCobiets = cob;
-                clearInterval(updateInterval);
-                document.querySelector('.current-time').classList.add('manual');
-                updateCurrentTime();
-                if (window.CobieClock) {
-                    window.CobieClock.showTime(manualCobiets);
-                }
+                showEonstripDetail(idx, cob);
             });
-        })(cellCob + currentTime);
+        })(cellCob, i);
     }
     updateTimeBreakdown(currentCob);
 }
@@ -692,6 +684,68 @@ function showEonstripDetails(index, startCobiets, opts) {
     `;
 }
 
+function showEonstripDetail(index, startCob) {
+    const calendar = document.getElementById('calendarView');
+    const detail   = document.getElementById('eonstripDetailView');
+    const timeline = document.getElementById('detailTimeline');
+    const title    = document.getElementById('detailTitle');
+    calendar.style.display = 'none';
+    detail.style.display   = 'block';
+    timeline.innerHTML = '';
+
+    const bd = breakdownNonNeg(Math.abs(startCob));
+    const sign = startCob < 0 ? '-' : '+';
+    title.textContent = `${sign}${bd.galactic_year.toString(16)}${bd.cosmocycle.toString(16)}${bd.megasequence.toString(16)}${index.toString(16)} – ${EONSTRIP_NAMES[index]}`;
+
+    for (let c = 0; c <= 16; c++) {
+        const block = document.createElement('div');
+        block.className = 'timeline-block';
+        block.style.top = (c / 16 * 100) + '%';
+        if (c < 16) block.textContent = c.toString(16).toUpperCase();
+        timeline.appendChild(block);
+    }
+
+    if (Array.isArray(window.SPECIAL_EVENTS)) {
+        const offsetStart = ((startCob % COBIE_UNITS.cosmocycle) + COBIE_UNITS.cosmocycle) % COBIE_UNITS.cosmocycle;
+        const events = [];
+        window.SPECIAL_EVENTS.forEach(ev => {
+            const evCob = parseCobiets(ev.cobie);
+            if (evCob === null) return;
+            const evOffset = ((evCob % COBIE_UNITS.cosmocycle) + COBIE_UNITS.cosmocycle) % COBIE_UNITS.cosmocycle;
+            if (evOffset >= offsetStart && evOffset < offsetStart + COBIE_UNITS.eonstrip) {
+                const rel = (evOffset - offsetStart) / COBIE_UNITS.eonstrip;
+                const durSec = ev.duration ? ev.duration : 0;
+                const dur = durSec / COBIE_UNITS.eonstrip;
+                events.push({ label: ev.label, start: rel, end: rel + dur });
+            }
+        });
+        events.sort((a,b)=>a.start-b.start);
+        const columns = [];
+        events.forEach(ev=>{
+            let col=0;
+            while(columns[col] && columns[col] > ev.start) col++;
+            columns[col] = ev.end;
+            ev.col = col;
+        });
+        const width = 100 / (columns.length || 1);
+        events.forEach(ev=>{
+            const left = ev.col * width;
+            const elem = document.createElement(ev.end>ev.start ? 'div':'div');
+            if (ev.end>ev.start) {
+                elem.className='event-box';
+                elem.style.height=((ev.end-ev.start)*100)+'%';
+            } else {
+                elem.className='event-line';
+            }
+            elem.style.top=(ev.start*100)+'%';
+            elem.style.left=left+'%';
+            elem.style.width=`calc(${width}% - 2px)`;
+            elem.textContent=ev.label;
+            timeline.appendChild(elem);
+        });
+    }
+}
+
 function getStep(mods) {
     // base step = 1 megasequence
     let step = 1;
@@ -847,6 +901,11 @@ if (matchingOption) {
     currentTimezone = userTimezone;
 }
 
+document.getElementById('backToCalendar').addEventListener('click', () => {
+    document.getElementById('eonstripDetailView').style.display = 'none';
+    document.getElementById('calendarView').style.display = 'block';
+});
+
 updateCurrentTime();
 updateCalendar();
 updateInterval = setInterval(updateCurrentTime, 1000);