// CoBiE Time System Implementation // Using Unix TAI epoch (January 1, 1970, 00:00:00 TAI) // Note: TAI differs from UTC by leap seconds (37 seconds as of 2025) (function() { if (!window.Cobie) { console.error('cobie.js not loaded'); return; } const { COBIE_EPOCH, COBIE_UNITS, floorDiv, parseCobiets, getTAIOffsetAt, toCobiets, fromCobiets, formatCobieTimestamp, breakdownNonNeg } = window.Cobie; const EONSTRIP_NAMES = [ 'Solprime', 'Lunex', 'Terros', 'Aquarion', 'Ventaso', 'Ignisar', 'Crystalos', 'Floraen', 'Faunor', 'Nebulus', 'Astraeus', 'Umbranox', 'Electros', 'Chronar', 'Radiantae', 'Etherion' ]; const MEGASEQUENCE_NAMES = [ 'Azurean Tide', 'Sable Gleam', 'Verdanth Starfall', 'Crimson Dusk', 'Cobalt Frost', 'Amber Blaze', 'Viridian Bloom', 'Argent Veil', 'Helian Rise', 'Nocturne Shade', 'Celestine Aura', 'Pyralis Light', 'Zephyrine Whisper', 'Lustran Bounty', 'Umbral Echo', 'Mythran Epoch' ]; let currentOffset = 0; let currentTimezone = 'UTC'; let manualMode = false; let manualCobiets = 0; let compareManualMode = false; let compareCobiets = 0; let updateInterval; let lastRenderedEonstrip = null; let currentDetailCob = null; function formatSafeDate(rawDate, cobSeconds, intlOptions) { if (rawDate instanceof Date && !isNaN(rawDate.getTime())) { // Date is valid: optionally shift for TAI vs UTC, then format: const shifted = currentTimezone === 'TAI' ? new Date(rawDate.getTime() + getTAIOffsetAt(rawDate) * 1000) : rawDate; return shifted.toLocaleString('en-US', intlOptions); } else { // Invalid Date: compute an approximate calendar year // Seconds in a tropical year ≈ 365.2425 days const secondsPerYear = 3600 * 24 * 365.2425; const yearsSince1970 = cobSeconds / secondsPerYear; const approxYear = Math.round(1970 + yearsSince1970); return `≈ Year ${approxYear.toLocaleString('en-US')}`; } } // parseCobiets, floorDiv and other CoBiE helpers are provided by cobie.js function getHumanDiff(d1, d2) { // make sure start ≤ end let start = d1 < d2 ? d1 : d2; let end = d1 < d2 ? d2 : d1; // 1) year/month/day difference let years = end.getUTCFullYear() - start.getUTCFullYear(); let months = end.getUTCMonth() - start.getUTCMonth(); let days = end.getUTCDate() - start.getUTCDate(); // if day roll-under, borrow from month if (days < 0) { months--; // days in the month *before* `end`’s month: let prevMonthDays = new Date(Date.UTC( end.getUTCFullYear(), end.getUTCMonth(), 0 )).getUTCDate(); days += prevMonthDays; } // if month roll-under, borrow from year if (months < 0) { years--; months += 12; } // 2) now handle hours/min/sec by “aligning” a Date at start+Y/M/D let aligned = new Date(Date.UTC( start.getUTCFullYear() + years, start.getUTCMonth() + months, start.getUTCDate() + days, start.getUTCHours(), start.getUTCMinutes(), start.getUTCSeconds() )); let diffMs = end.getTime() - aligned.getTime(); // if we overshot (negative), borrow one day if (diffMs < 0) { // borrow 24 h diffMs += 24 * 3600e3; if (days > 0) { days--; } else { // days was zero, so borrow a month months--; if (months < 0) { years--; months += 12; } // set days to length of the previous month of `end` days = new Date(Date.UTC( end.getUTCFullYear(), end.getUTCMonth(), 0 )).getUTCDate(); } } // 3) extract h/m/s let hours = Math.floor(diffMs / 3600e3); diffMs -= hours * 3600e3; let minutes = Math.floor(diffMs / 60e3); diffMs -= minutes * 60e3; let seconds = Math.floor(diffMs / 1e3); return { years, months, days, hours, minutes, seconds }; } // getTAIOffsetAt, toCobiets, fromCobiets, breakdownNonNeg and // formatCobieTimestamp come from cobie.js function updateCurrentTime() { let cobiets, baseDate; if (manualMode) { cobiets = manualCobiets; baseDate = fromCobiets(cobiets); } else { baseDate = new Date(); cobiets = toCobiets(baseDate); } const cobieElem = document.getElementById('cobieTime'); if (cobieElem) cobieElem.textContent = formatCobieTimestamp(cobiets); const options = { timeZone: currentTimezone === 'TAI' ? 'UTC' : currentTimezone, weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }; const taiOffset = getTAIOffsetAt(baseDate); let displayDate = baseDate; if (currentTimezone === 'TAI') { displayDate = new Date(baseDate.getTime() + taiOffset * 1000); } document.getElementById('regularTime').textContent = currentTimezone + ': ' + displayDate.toLocaleString('en-US', options); options.timeZone = 'UTC'; const taiDate = new Date(baseDate.getTime() + taiOffset * 1000); document.getElementById('taiTime').textContent = 'TAI UTC: ' + taiDate.toLocaleString('en-US', options) + ' (UTC + ' + taiOffset + 's)'; const bd = breakdownNonNeg(Math.abs(cobiets)); const currentStrip = bd.eonstrip; if (currentStrip !== lastRenderedEonstrip) { updateCalendar(); lastRenderedEonstrip = currentStrip; } else { updateTimeBreakdown(cobiets); } } function updateTimeBreakdown(cobiets) { // 1) Break down absolute CoBiE seconds into each unit const breakdown = breakdownNonNeg(Math.abs(cobiets)); // 2) Compute the “start” CoBiE‐seconds for each unit (in ascending order) const eocStart = breakdown.epoch_of_cosmos * COBIE_UNITS.epoch_of_cosmos; const cerStart = eocStart + breakdown.celestial_era * COBIE_UNITS.celestial_era; const ueoStart = cerStart + breakdown.universal_eon * COBIE_UNITS.universal_eon; const gyrStart = ueoStart + breakdown.galactic_year * COBIE_UNITS.galactic_year; const ccyStart = gyrStart + breakdown.cosmocycle * COBIE_UNITS.cosmocycle; const mqsStart = ccyStart + breakdown.megasequence * COBIE_UNITS.megasequence; const eosStart = mqsStart + breakdown.eonstrip * COBIE_UNITS.eonstrip; // 3) Compute each “end” by adding (unitSize − 1) const eocEnd = eocStart + COBIE_UNITS.epoch_of_cosmos - 1; const cerEnd = cerStart + COBIE_UNITS.celestial_era - 1; const ueoEnd = ueoStart + COBIE_UNITS.universal_eon - 1; const gyrEnd = gyrStart + COBIE_UNITS.galactic_year - 1; const ccyEnd = ccyStart + COBIE_UNITS.cosmocycle - 1; const mqsEnd = mqsStart + COBIE_UNITS.megasequence - 1; const eosEnd = eosStart + COBIE_UNITS.eonstrip - 1; // 4) Intl formatting options const dateOptions = { timeZone: currentTimezone === 'TAI' ? 'UTC' : currentTimezone, weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }; // // ── Build the “core” units (always visible): Galactic Year → Second ────────────── // const coreHtml = `
Galactic Year 0x${breakdown.galactic_year.toString(16).toUpperCase()} (${breakdown.galactic_year})
${(() => { const rawStart = fromCobiets(gyrStart); const rawEnd = fromCobiets(gyrEnd); return ` Started: ${formatSafeDate(rawStart, gyrStart, dateOptions)}
Ends: ${formatSafeDate(rawEnd, gyrEnd, dateOptions)} `; })()}
Cosmocycle 0x${breakdown.cosmocycle.toString(16).toUpperCase()} (${breakdown.cosmocycle})
${(() => { const rawStart = fromCobiets(ccyStart); const rawEnd = fromCobiets(ccyEnd); return ` Started: ${formatSafeDate(rawStart, ccyStart, dateOptions)}
Ends: ${formatSafeDate(rawEnd, ccyEnd, dateOptions)} `; })()}
Megasequence 0x${breakdown.megasequence.toString(16).toUpperCase()} (${breakdown.megasequence}) – ${MEGASEQUENCE_NAMES[breakdown.megasequence] || 'Unknown'}
${(() => { const rawStart = fromCobiets(mqsStart); const rawEnd = fromCobiets(mqsEnd); return ` Started: ${formatSafeDate(rawStart, mqsStart, dateOptions)}
Ends: ${formatSafeDate(rawEnd, mqsEnd, dateOptions)} `; })()}
Eonstrip 0x${breakdown.eonstrip.toString(16).toUpperCase()} (${breakdown.eonstrip}) – ${EONSTRIP_NAMES[breakdown.eonstrip]}
${(() => { const rawStart = fromCobiets(eosStart); const rawEnd = fromCobiets(eosEnd); return ` Started: ${formatSafeDate(rawStart, eosStart, dateOptions)}
Ends: ${formatSafeDate(rawEnd, eosEnd, dateOptions)} `; })()}
Chronon 0x${breakdown.chronon.toString(16).toUpperCase()} (${breakdown.chronon})
Quantic 0x${breakdown.quantic.toString(16).toUpperCase()} (${breakdown.quantic})
Xenocycle 0x${breakdown.xenocycle.toString(16).toUpperCase()} (${breakdown.xenocycle})
Second 0x${breakdown.second.toString(16).toUpperCase()} (${breakdown.second})
`; document.getElementById('coreBreakdown').innerHTML = coreHtml; // // ── Build the “extended” units (hidden by default) in order: Astralmillennia → Universal Eon ─── // const extendedHtml = `
Astralmillennia 0x${breakdown.astralmillennia.toString(16).toUpperCase()} (${breakdown.astralmillennia})
${(() => { const startAmt = breakdown.astralmillennia * COBIE_UNITS.astralmillennia; const endAmt = startAmt + (COBIE_UNITS.astralmillennia - 1); const rawStart = fromCobiets(startAmt); const rawEnd = fromCobiets(endAmt); return ` Started: ${formatSafeDate(rawStart, startAmt, dateOptions)}
Ends: ${formatSafeDate(rawEnd, endAmt, dateOptions)} `; })()}
Infinitum 0x${breakdown.infinitum.toString(16).toUpperCase()} (${breakdown.infinitum})
${(() => { const startAmt = breakdown.infinitum * COBIE_UNITS.infinitum; const endAmt = startAmt + (COBIE_UNITS.infinitum - 1); const rawStart = fromCobiets(startAmt); const rawEnd = fromCobiets(endAmt); return ` Started: ${formatSafeDate(rawStart, startAmt, dateOptions)}
Ends: ${formatSafeDate(rawEnd, endAmt, dateOptions)} `; })()}
Eternum 0x${breakdown.eternum.toString(16).toUpperCase()} (${breakdown.eternum})
${(() => { const startAmt = breakdown.eternum * COBIE_UNITS.eternum; const endAmt = startAmt + (COBIE_UNITS.eternum - 1); const rawStart = fromCobiets(startAmt); const rawEnd = fromCobiets(endAmt); return ` Started: ${formatSafeDate(rawStart, startAmt, dateOptions)}
Ends: ${formatSafeDate(rawEnd, endAmt, dateOptions)} `; })()}
Metaepoch 0x${breakdown.metaepoch.toString(16).toUpperCase()} (${breakdown.metaepoch})
${(() => { const startAmt = breakdown.metaepoch * COBIE_UNITS.metaepoch; const endAmt = startAmt + (COBIE_UNITS.metaepoch - 1); const rawStart = fromCobiets(startAmt); const rawEnd = fromCobiets(endAmt); return ` Started: ${formatSafeDate(rawStart, startAmt, dateOptions)}
Ends: ${formatSafeDate(rawEnd, endAmt, dateOptions)} `; })()}
Cosmic Aeon 0x${breakdown.cosmic_aeon.toString(16).toUpperCase()} (${breakdown.cosmic_aeon})
${(() => { const startAmt = breakdown.cosmic_aeon * COBIE_UNITS.cosmic_aeon; const endAmt = startAmt + (COBIE_UNITS.cosmic_aeon - 1); const rawStart = fromCobiets(startAmt); const rawEnd = fromCobiets(endAmt); return ` Started: ${formatSafeDate(rawStart, startAmt, dateOptions)}
Ends: ${formatSafeDate(rawEnd, endAmt, dateOptions)} `; })()}
Epoch of Cosmos 0x${breakdown.epoch_of_cosmos.toString(16).toUpperCase()} (${breakdown.epoch_of_cosmos})
${(() => { const rawStart = fromCobiets(eocStart); const rawEnd = fromCobiets(eocEnd); return ` Started: ${formatSafeDate(rawStart, eocStart, dateOptions)}
Ends: ${formatSafeDate(rawEnd, eocEnd, dateOptions)} `; })()}
Celestial Era 0x${breakdown.celestial_era.toString(16).toUpperCase()} (${breakdown.celestial_era})
${(() => { const rawStart = fromCobiets(cerStart); const rawEnd = fromCobiets(cerEnd); return ` Started: ${formatSafeDate(rawStart, cerStart, dateOptions)}
Ends: ${formatSafeDate(rawEnd, cerEnd, dateOptions)} `; })()}
Universal Eon 0x${breakdown.universal_eon.toString(16).toUpperCase()} (${breakdown.universal_eon})
${(() => { const rawStart = fromCobiets(ueoStart); const rawEnd = fromCobiets(ueoEnd); return ` Started: ${formatSafeDate(rawStart, ueoStart, dateOptions)}
Ends: ${formatSafeDate(rawEnd, ueoEnd, dateOptions)} `; })()}
`; document.getElementById('extendedBreakdown').innerHTML = extendedHtml; // // ── If “manual mode” is active, append the Compare/Difference rows beneath whichever section is visible ── // if (manualMode) { const baseCob = compareManualMode ? compareCobiets : toCobiets(new Date()); const baseDate = fromCobiets(baseCob); const manualDate = fromCobiets(manualCobiets); const human = getHumanDiff(baseDate, manualDate); const diffCob = manualCobiets - baseCob; const diffHtml = `
Compare ${formatCobieTimestamp(baseCob)}
Difference (CoBiE) ${formatCobieTimestamp(diffCob)}
Difference ${human.years}y ${human.months}m ${human.days}d ${human.hours}h ${human.minutes}m ${human.seconds}s
`; const extDiv = document.getElementById('extendedBreakdown'); const coreDiv = document.getElementById('coreBreakdown'); if (extDiv.style.display === 'block') { extDiv.insertAdjacentHTML('beforeend', diffHtml); } else { coreDiv.insertAdjacentHTML('beforeend', diffHtml); } // Re‐attach the “edit‐on‐click” listener for the Compare field document.getElementById('diffField').addEventListener('click', enterDiffEdit); } } function enterDiffEdit() { const span = document.getElementById('diffField'); const val = span.textContent; const input = document.createElement('input'); input.id = 'diffInput'; input.value = val; input.style.background = 'transparent'; input.style.border = 'none'; input.style.color = 'inherit'; input.style.width = '12ch'; span.replaceWith(input); input.focus(); input.setSelectionRange(1, val.length); input.addEventListener('keydown', e => { if (e.key === 'Enter') commitDiff(); }); input.addEventListener('blur', commitDiff); } function commitDiff() { const input = document.getElementById('diffInput'); const parsed = parseCobiets(input.value); const span = document.createElement('span'); span.id = 'diffField'; span.className = 'unit-value'; if (parsed !== null) { compareManualMode = true; compareCobiets = parsed; span.textContent = formatCobieTimestamp(parsed); } else { span.textContent = input.defaultValue; } input.replaceWith(span); span.addEventListener('click', enterDiffEdit); // refresh breakdown display with new comparison updateCurrentTime(); } function updateCalendar() { let currentCob, baseCob, currentBd, currentTime; if (manualMode) { currentCob = manualCobiets; currentBd = breakdownNonNeg(Math.abs(manualCobiets)); currentTime = currentCob % COBIE_UNITS.eonstrip; const curEonstrip = currentCob % COBIE_UNITS.megasequence; const msStartCob = currentCob - curEonstrip + (currentOffset * COBIE_UNITS.megasequence); baseCob = msStartCob; } else { const now = new Date(); currentCob = toCobiets(now); currentBd = breakdownNonNeg(Math.abs(currentCob)); currentTime = currentCob % COBIE_UNITS.eonstrip; const curEonstrip = currentCob % COBIE_UNITS.megasequence; const msStartCob = currentCob - curEonstrip + (currentOffset * COBIE_UNITS.megasequence); baseCob = msStartCob; } const baseBd = breakdownNonNeg(Math.abs(baseCob)); const sign = baseCob < 0 ? '-' : '+'; // Header const msName = MEGASEQUENCE_NAMES[ baseBd.megasequence ] || 'Unknown'; document.getElementById('calendarHeader').textContent = `${sign} ${baseBd.megasequence.toString(16)}: ${msName}`; document.getElementById('currentPeriod').textContent = `${sign}${baseBd.galactic_year.toString(16)}${baseBd.cosmocycle.toString(16)}${baseBd.megasequence.toString(16)}`; // Grid const grid = document.getElementById('eonstripGrid'); grid.innerHTML = ''; // reuse the same dateOpts you use elsewhere: const dateOpts = { timeZone: currentTimezone==='TAI' ? 'UTC' : currentTimezone, year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }; for (let i = 0; i < 16; i++) { const cellCob = baseCob + i * COBIE_UNITS.eonstrip; const cellBd = breakdownNonNeg(Math.abs(cellCob)); const startDate = fromCobiets(cellCob); const card = document.createElement('div'); card.className = 'eonstrip-card'; if (currentOffset === 0 && i === currentBd.eonstrip) card.classList.add('current'); card.innerHTML = `
${EONSTRIP_NAMES[i]}
${sign}${cellBd.galactic_year.toString(16)}${cellBd.cosmocycle.toString(16)}${cellBd.megasequence.toString(16)}${i.toString(16)}
${startDate.toLocaleDateString('en-US', dateOpts)}
`; if (Array.isArray(window.SPECIAL_EVENTS)) { const cellStart = cellCob; const cellEnd = cellCob + COBIE_UNITS.eonstrip; window.SPECIAL_EVENTS.forEach(ev => { if (ev.showMega === false) return; const startCob = parseCobiets(ev.start || ev.cobie); if (startCob === null) return; const endCob = ev.end ? parseCobiets(ev.end) : Number.POSITIVE_INFINITY; const unitVal = COBIE_UNITS[ev.unit] || COBIE_UNITS.cosmocycle; const interval = (ev.interval || 1) * unitVal; let duration = 0; if (typeof ev.duration === 'string') { const d = parseCobiets(ev.duration); if (d !== null) duration = d; } else if (typeof ev.duration === 'number') { duration = ev.duration; } if (cellStart > endCob) return; let n = Math.floor((cellStart - startCob) / interval); if (n < 0) n = 0; let occ = startCob + n * interval; if (occ + duration <= cellStart) { occ += interval; } if (occ < cellEnd && occ + duration > cellStart && occ <= endCob) { const tag = document.createElement('div'); tag.className = 'event-tag'; tag.textContent = ev.label; card.appendChild(tag); } }); } const tooltip = document.createElement('div'); tooltip.className = 'tooltip'; tooltip.innerHTML = showEonstripDetails(i, cellCob, dateOpts); card.appendChild(tooltip); grid.appendChild(card); (function(cob, idx) { card.addEventListener('click', () => { showEonstripDetail(idx, cob); }); })(cellCob, i); } updateTimeBreakdown(currentCob); } function showEonstripDetails(index, startCobiets, opts) { const startDate = fromCobiets(startCobiets); const endDate = fromCobiets(startCobiets + COBIE_UNITS.eonstrip - 1); const options = opts || { timeZone: currentTimezone === 'TAI' ? 'UTC' : currentTimezone, weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }; return ` ${EONSTRIP_NAMES[index]} (0x${index.toString(16).toUpperCase()})
Start: ${startDate.toLocaleString('en-US', options)}
End: ${endDate.toLocaleString('en-US', options)}
Duration: ${COBIE_UNITS.eonstrip} sec (~${(COBIE_UNITS.eonstrip/3600).toFixed(2)} h) `; } 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'); 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); } let markerCob = manualMode ? manualCobiets : toCobiets(new Date()); const rel = (markerCob - startCob) / COBIE_UNITS.eonstrip; if (rel >= 0 && rel <= 1) { const line = document.createElement('div'); line.className = 'current-time-line'; line.style.top = (rel * 100) + '%'; line.textContent = formatCobieTimestamp(markerCob); timeline.appendChild(line); } if (Array.isArray(window.SPECIAL_EVENTS)) { const events = []; const start = startCob; const end = startCob + COBIE_UNITS.eonstrip; window.SPECIAL_EVENTS.forEach(ev => { if (ev.showDetail === false) return; const startCobEv = parseCobiets(ev.start || ev.cobie); if (startCobEv === null) return; const endCobEv = ev.end ? parseCobiets(ev.end) : Number.POSITIVE_INFINITY; const unitVal = COBIE_UNITS[ev.unit] || COBIE_UNITS.cosmocycle; const interval = (ev.interval || 1) * unitVal; let duration = 0; if (typeof ev.duration === 'string') { const d = parseCobiets(ev.duration); if (d !== null) duration = d; } else if (typeof ev.duration === 'number') { duration = ev.duration; } if (start > endCobEv) return; let n = Math.floor((start - startCobEv) / interval); if (n < 0) n = 0; let occ = startCobEv + n * interval; if (occ + duration <= start) occ += interval; while (occ < end && occ <= endCobEv) { const relStart = (occ - start) / COBIE_UNITS.eonstrip; const relEnd = (occ + duration - start) / COBIE_UNITS.eonstrip; events.push({ label: ev.label, start: relStart, end: relEnd }); occ += interval; } }); 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 displayStart = Math.max(0, ev.start); const displayEnd = Math.min(1, ev.end); const elem = document.createElement('div'); if (ev.end > ev.start) { elem.className = 'event-box'; const h = (displayEnd - displayStart) * 100; if (h < 2) { elem.classList.add('small-event'); elem.style.height = '4px'; } else { elem.style.height = (h > 0 ? h : 0) + '%'; } } else { elem.className = 'event-line'; } elem.style.top = (displayStart * 100) + '%'; elem.style.left = left + '%'; elem.style.width = `calc(${width}% - 2px)`; if (elem.classList.contains('small-event') || elem.className === 'event-line') { const label = document.createElement('span'); label.className = 'event-label'; label.textContent = ev.label; elem.appendChild(label); } else { elem.textContent = ev.label; } timeline.appendChild(elem); }); } } 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 exitDetailView() { document.getElementById('eonstripDetailView').style.display = 'none'; document.getElementById('calendarView').style.display = 'block'; currentDetailCob = null; } function getStep(mods) { // base step = 1 megasequence let step = 1; if (mods.altKey && mods.shiftKey && mods.ctrlKey) { // Epoch of Cosmos = 16⁵ MS step = 16 ** 5; } else if (mods.altKey && mods.ctrlKey) { // Celestial Era = 16⁴ MS step = 16 ** 4; } else if (mods.altKey && mods.shiftKey) { // Universal Eon = 16³ MS step = 16 ** 3; } else if (mods.altKey) { // Galactic Year = 16² MS step = 16 ** 2; } else if (mods.shiftKey) { // Cosmocycle = 16¹ MS step = 16 ** 1; } return step; } function navigatePeriod(evt, direction) { const step = getStep(evt); if (currentDetailCob !== null) { exitDetailView(); } animateSwipe(direction, () => { currentOffset += direction * step; updateCalendar(); }); } function animateSwipe(direction, onDone) { const grid = document.getElementById('eonstripGrid'); if (!grid) { onDone(); return; } // Ensure a clean starting state when the grid was previously hidden grid.style.transition = 'none'; grid.style.transform = 'translateX(0)'; void grid.offsetWidth; // force reflow // slide out grid.style.transition = 'transform 0.3s ease'; grid.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`; function afterOut() { grid.removeEventListener('transitionend', afterOut); // prepare new position off-screen on the other side grid.style.transition = 'none'; grid.style.transform = `translateX(${direction > 0 ? '100%' : '-100%'})`; onDone(); // force reflow to apply position instantly void grid.offsetWidth; // slide in with transition grid.style.transition = 'transform 0.3s ease'; grid.style.transform = 'translateX(0)'; } grid.addEventListener('transitionend', afterOut); } function goToNow() { manualMode = false; manualCobiets = 0; compareManualMode = false; currentOffset = 0; if (currentDetailCob !== null) { exitDetailView(); } updateCurrentTime(); updateCalendar(); clearInterval(updateInterval); updateInterval = setInterval(updateCurrentTime, 1000); document.querySelector('.current-time').classList.remove('manual'); if (window.CobieClock) { window.CobieClock.start(); } } function enterEdit() { const span = document.getElementById('cobieTime'); const val = span.textContent; const input = document.createElement('input'); input.id = 'cobieInput'; input.value = val; input.className = 'cobie-time'; input.style.background = 'transparent'; input.style.border = 'none'; input.style.color = 'inherit'; input.style.textAlign = 'center'; input.style.width = '100%'; input.style.boxSizing = 'border-box'; // keep the input visually centered like the original span input.style.display = 'block'; input.style.margin = '10px 0'; span.replaceWith(input); input.focus(); input.setSelectionRange(1, val.length); input.addEventListener('keydown', e => { if (e.key === 'Enter') commitInput(); }); input.addEventListener('blur', commitInput); } function commitInput() { const input = document.getElementById('cobieInput'); const str = input.value; const parsed = parseCobiets(str); // remember what the old numeric value was // if we weren't already in manualMode, // this will be "now" const oldCob = manualMode ? manualCobiets : toCobiets(new Date()); // build the new span const span = document.createElement('div'); span.id = 'cobieTime'; span.className = 'cobie-time'; if (parsed === null) { // invalid: restore the old numeric value span.textContent = formatCobieTimestamp(oldCob); // keep manualMode exactly as it was manualCobiets = oldCob; // manualMode = true; } else { // valid: switch into manual mode at the new value manualMode = true; manualCobiets = parsed; clearInterval(updateInterval); span.textContent = formatCobieTimestamp(parsed); updateCurrentTime(); updateCalendar(); document.querySelector('.current-time').classList.add('manual'); if (window.CobieClock) { window.CobieClock.showTime(manualCobiets); } } // swap elements input.replaceWith(span); span.addEventListener('click', enterEdit); } function init() { // Timezone change handler document.getElementById('timezone').addEventListener('change', (e) => { currentTimezone = e.target.value; updateCurrentTime(); updateCalendar(); }); // Set default timezone based on user's locale const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; const timezoneSelect = document.getElementById('timezone'); const options = Array.from(timezoneSelect.options); const matchingOption = options.find(opt => opt.value === userTimezone); if (matchingOption) { timezoneSelect.value = userTimezone; currentTimezone = userTimezone; } document.getElementById('backToCalendar').addEventListener('click', exitDetailView); document.getElementById('detailPrev').addEventListener('click', detailPrev); document.getElementById('detailNext').addEventListener('click', detailNext); document.getElementById('detailNow').addEventListener('click', detailNow); updateCurrentTime(); updateCalendar(); updateInterval = setInterval(updateCurrentTime, 1000); document.getElementById('cobieTime').addEventListener('click', enterEdit); document.getElementById('toggleExtended').addEventListener('click', () => { const extDiv = document.getElementById('extendedBreakdown'); const arrow = document.querySelector('#toggleExtended .arrow-icon'); const text = document.querySelector('#toggleExtended .btn-text'); if (extDiv.style.display === 'block') { // hide it extDiv.style.display = 'none'; arrow.style.transform = 'rotate(0deg)'; text.textContent = 'Show Cosmic Units'; } else { // show it extDiv.style.display = 'block'; arrow.style.transform = 'rotate(180deg)'; text.textContent = 'Hide Cosmic Units'; } // Because “manual mode” might have appended diff rows, we need to rerun updateTimeBreakdown // to ensure diff rows end up in the correct section updateTimeBreakdown(manualMode ? manualCobiets : toCobiets(new Date())); }); // ── Swipe & Wheel Navigation ──────────────────────────────────────────────── let swipeStartX = null; let swipeStartY = null; let swipeMods = { altKey: false, shiftKey: false, ctrlKey: false }; let isSwiping = false; let swipeGrid = null; function swipeStart(e) { const touch = e.touches ? e.touches[0] : e; swipeStartX = touch.clientX; swipeStartY = touch.clientY; swipeMods = { altKey: e.altKey || false, shiftKey: e.shiftKey || false, ctrlKey: e.ctrlKey || false }; swipeGrid = document.getElementById('eonstripGrid'); if (swipeGrid) { swipeGrid.style.transition = 'none'; } isSwiping = true; } function swipeMove(e) { if (!isSwiping || !swipeGrid) return; const touch = e.touches ? e.touches[0] : e; const dx = touch.clientX - swipeStartX; const dy = touch.clientY - swipeStartY; if (Math.abs(dx) > Math.abs(dy)) { swipeGrid.style.transform = `translateX(${dx}px)`; } } function swipeEnd(e) { if (!isSwiping || swipeStartX === null || swipeStartY === null) { return; } const touch = e.changedTouches ? e.changedTouches[0] : e; const dx = touch.clientX - swipeStartX; const dy = touch.clientY - swipeStartY; if (swipeGrid) { const width = swipeGrid.clientWidth; if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) { const direction = dx < 0 ? 1 : -1; // left → next swipeGrid.style.transition = 'transform 0.2s ease'; swipeGrid.style.transform = `translateX(${dx < 0 ? -width : width}px)`; swipeGrid.addEventListener('transitionend', function after() { swipeGrid.removeEventListener('transitionend', after); // prepare opposite side swipeGrid.style.transition = 'none'; swipeGrid.style.transform = `translateX(${dx < 0 ? width : -width}px)`; const step = getStep(swipeMods); currentOffset += direction * step; updateCalendar(); void swipeGrid.offsetWidth; swipeGrid.style.transition = 'transform 0.3s ease'; swipeGrid.style.transform = 'translateX(0)'; }); } else { swipeGrid.style.transition = 'transform 0.2s ease'; swipeGrid.style.transform = 'translateX(0)'; } } swipeStartX = swipeStartY = null; isSwiping = false; } document.addEventListener('touchstart', swipeStart, { passive: true }); document.addEventListener('touchmove', swipeMove, { passive: true }); document.addEventListener('touchend', swipeEnd); document.addEventListener('mousedown', swipeStart); document.addEventListener('mousemove', swipeMove); document.addEventListener('mouseup', swipeEnd); function wheelNavigate(e) { if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 10) { const direction = e.deltaX > 0 ? 1 : -1; navigatePeriod(e, direction); } } document.addEventListener('wheel', wheelNavigate); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } window.navigatePeriod = navigatePeriod; window.goToNow = goToNow; window.detailPrev = detailPrev; window.detailNext = detailNext; window.detailNow = detailNow; })();