Refactor scripts into modules

script.js

@@ -20,19 +20,7 @@ const {
   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'
-];
+const { EONSTRIP_NAMES, MEGASEQUENCE_NAMES } = window.Cobie;
 
 let currentOffset = 0;
 let currentTimezone = 'UTC';
@@ -44,34 +32,14 @@ let updateInterval;
 let lastRenderedEonstrip = null;
 let currentDetailCob = null;
 
-// ── Utility color helpers ────────────────────────────────────────────────
-function parseColor(hex) {
-    if (!hex) return [255, 255, 255];
-    let c = hex.replace('#', '');
-    if (c.length === 3) c = c.split('').map(x => x + x).join('');
-    const num = parseInt(c, 16);
-    return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
-}
-
-const toHex = v => v.toString(16).padStart(2, '0');
-
-const hexToRgba = (hex, a = 1) => {
-    const [r, g, b] = parseColor(hex);
-    return `rgba(${r},${g},${b},${a})`;
-};
-
-const getContrastColor = hex => {
-    const [r, g, b] = parseColor(hex);
-    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-    return yiq >= 128 ? '#000' : '#fff';
-};
-
-const lightenColor = (hex, p) => {
-    const [r, g, b] = parseColor(hex).map(v =>
-        Math.min(255, Math.round(v + (255 - v) * p))
-    );
-    return '#' + [r, g, b].map(toHex).join('');
-};
+// ── Utility color helpers (in utils.js) ───────────────────────────────────
+const {
+    parseColor,
+    hexToRgba,
+    getContrastColor,
+    lightenColor,
+    getHumanDiff
+} = window.Utils;
 
 const dateOptions = (long = true) => ({
     timeZone: currentTimezone === 'TAI' ? 'UTC' : currentTimezone,
@@ -130,71 +98,7 @@ function formatSafeDate(rawDate, cobSeconds, intlOptions) {
 
 // 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 };
-}
 
 // ── Event utilities ──────────────────────────────────────────────────────
 const normalizeEvent = ev => {
@@ -866,14 +770,14 @@ function updateDetailCurrentTime() {
 
 function detailPrev() {
     if (currentDetailCob === null) return;
-    animateDetailSwipe(-1, () => {
+    Animate.animateDetailSwipe(-1, () => {
         showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);
     });
 }
 
 function detailNext() {
     if (currentDetailCob === null) return;
-    animateDetailSwipe(1, () => {
+    Animate.animateDetailSwipe(1, () => {
         showEonstripDetail(currentDetailCob + COBIE_UNITS.eonstrip);
     });
 }
@@ -921,65 +825,12 @@ function navigatePeriod(evt, direction) {
         exitDetailView();
     }
 
-    animateSwipe(direction, () => {
+    Animate.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 animateDetailSwipe(direction, onDone) {
-    const tl = document.getElementById('detailTimeline');
-    if (!tl) { onDone(); return; }
-
-    tl.style.transition = 'none';
-    tl.style.transform = 'translateX(0)';
-    void tl.offsetWidth;
-
-    tl.style.transition = 'transform 0.3s ease';
-    tl.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`;
-
-    function afterOut() {
-        tl.removeEventListener('transitionend', afterOut);
-        tl.style.transition = 'none';
-        tl.style.transform = `translateX(${direction > 0 ? '100%' : '-100%'})`;
-        onDone();
-        void tl.offsetWidth;
-        tl.style.transition = 'transform 0.3s ease';
-        tl.style.transform = 'translateX(0)';
-    }
-
-    tl.addEventListener('transitionend', afterOut);
-}
-
 function goToNow() {
     manualMode = false;
     manualCobiets = 0;