Merge pull request #59 from ok2/codex/fix-missing-event-and-prev/next-buttons

events.js

@@ -18,5 +18,6 @@ window.SPECIAL_EVENTS = [
   { start: '3edc.d430', label: 'Hochzeitstag', unit: 'cosmocycle', interval: 1 },
   { start: '330d.d4ae', label: 'Zusammentag',  unit: 'cosmocycle', interval: 1 },
   { start: '11de.0c52', label: 'Anna',         unit: 'cosmocycle', interval: 1 },
-  { start: '467f.ae61', label: 'Iris',         unit: 'cosmocycle', interval: 1 }
+  { start: '467f.ae61', label: 'Iris',         unit: 'cosmocycle', interval: 1 },
+  { start: '6854.7a75', cobie: '6854.7a75', label: 'Sleep', unit: 'second', interval: 86400, duration: 28800 }
 ];

index.html

@@ -66,13 +66,18 @@
         <div class="eonstrip-grid" id="eonstripGrid"></div>
     </div>
 
-    <div id="eonstripDetailView" class="detail-view" style="display:none;">
+        <div id="eonstripDetailView" class="detail-view" style="display:none;">
         <div class="detail-header">
             <button id="backToCalendar" class="back-btn">Back</button>
+            <div class="detail-nav">
+                <button id="detailPrev" class="back-btn">←</button>
+                <button id="detailNow" class="back-btn">Now</button>
+                <button id="detailNext" class="back-btn">→</button>
+            </div>
             <span id="detailTitle"></span>
         </div>
         <div class="detail-timeline" id="detailTimeline"></div>
-    </div>
+        </div>
 
     <div class="time-details">
         <h3 style="text-align: center; margin-bottom: 20px; color: #00ffff;">Time Breakdown</h3>

script.js

@@ -42,6 +42,7 @@ let compareManualMode = false;
 let compareCobiets = 0;
 let updateInterval;
 let lastRenderedEonstrip = null;
+let currentDetailCob = null;
 
 function fmt(d, o) {
     // shift if TAI, then format
@@ -685,6 +686,12 @@ function showEonstripDetails(index, startCobiets, opts) {
 }
 
 function showEonstripDetail(index, startCob) {
+    if (startCob === undefined) {
+        startCob = index;
+        const bdTmp = breakdownNonNeg(Math.abs(startCob));
+        index = bdTmp.eonstrip;
+    }
+    currentDetailCob = startCob;
     const calendar = document.getElementById('calendarView');
     const detail   = document.getElementById('eonstripDetailView');
     const timeline = document.getElementById('detailTimeline');
@@ -709,7 +716,7 @@ function showEonstripDetail(index, startCob) {
         const offsetStart = ((startCob % COBIE_UNITS.cosmocycle) + COBIE_UNITS.cosmocycle) % COBIE_UNITS.cosmocycle;
         const events = [];
         window.SPECIAL_EVENTS.forEach(ev => {
-            const evCob = parseCobiets(ev.cobie);
+            const evCob = parseCobiets(ev.cobie || ev.start);
             if (evCob === null) return;
             const evOffset = ((evCob % COBIE_UNITS.cosmocycle) + COBIE_UNITS.cosmocycle) % COBIE_UNITS.cosmocycle;
             if (evOffset >= offsetStart && evOffset < offsetStart + COBIE_UNITS.eonstrip) {
@@ -746,6 +753,22 @@ function showEonstripDetail(index, startCob) {
     }
 }
 
+function detailPrev() {
+    if (currentDetailCob === null) return;
+    showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);
+}
+
+function detailNext() {
+    if (currentDetailCob === null) return;
+    showEonstripDetail(currentDetailCob + COBIE_UNITS.eonstrip);
+}
+
+function detailNow() {
+    const now = toCobiets(new Date());
+    const start = now - (now % COBIE_UNITS.eonstrip);
+    showEonstripDetail(start);
+}
+
 function getStep(mods) {
     // base step = 1 megasequence
     let step = 1;
@@ -904,7 +927,11 @@ if (matchingOption) {
 document.getElementById('backToCalendar').addEventListener('click', () => {
     document.getElementById('eonstripDetailView').style.display = 'none';
     document.getElementById('calendarView').style.display = 'block';
+    currentDetailCob = null;
 });
+document.getElementById('detailPrev').addEventListener('click', detailPrev);
+document.getElementById('detailNext').addEventListener('click', detailNext);
+document.getElementById('detailNow').addEventListener('click', detailNow);
 
 updateCurrentTime();
 updateCalendar();
@@ -1029,4 +1056,7 @@ if (document.readyState === 'loading') {
 
 window.navigatePeriod = navigatePeriod;
 window.goToNow       = goToNow;
+window.detailPrev    = detailPrev;
+window.detailNext    = detailNext;
+window.detailNow     = detailNow;
 })();

style.css

@@ -382,6 +382,12 @@
   margin-bottom: 10px;
 }
 
+.detail-nav {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
 .back-btn {
   background: linear-gradient(45deg, #00ffff, #0080ff);
   border: none;