script.js

/** Quarterly Theory Phases */
const PHASES = [
  { id: 'X', name: 'CONTINUATION', color: 'var(--color-contin)' },
  { id: 'A', name: 'ACCUMULATION', color: 'var(--color-accum)' },
  { id: 'M', name: 'MANIPULATION', color: 'var(--color-manip)' },
  { id: 'D', name: 'DISTRIBUTION', color: 'var(--color-distr)' }
]

/**
 * Quarterly Theory calculation logic.
 * @description Handles time fractals and true open logic.
 */
class QuarterlyLogic {
  /**
   * Converts date to NY time.
   * @param date - Source date
   * @returns NY Date object
   */
  getNYTime(date) {
    return new Date(date.toLocaleString('en-US', { timeZone: 'America/New_York' }))
  }

  /**
   * Calculates Yearly cycle data.
   * @param now - Current time
   * @returns Yearly cycle status
   */
  getYearlyData(now) {
    const nyTime = this.getNYTime(now)
    const year = nyTime.getFullYear()
    const startOfYear = new Date(year, 0, 1)
    const endOfYear = new Date(year + 1, 0, 1)
    const totalDuration = endOfYear - startOfYear
    const progress = nyTime - startOfYear
    const qSize = totalDuration / 4
    const currentQIndex = Math.floor(progress / qSize)
    const qProgress = (progress % qSize) / qSize
    const phase = PHASES[((currentQIndex % 4) + 4) % 4]
    return {
      title: 'YEARLY CYCLE (EST)',
      phase: phase,
      progress: qProgress,
      timeLeft: qSize - (progress % qSize),
      subtext: `Q${(currentQIndex % 4) + 1} of 4`
    }
  }

  /**
   * Calculates Monthly cycle data.
   * @param now - Current time
   * @returns Monthly cycle status
   */
  getMonthlyData(now) {
    const nyTime = this.getNYTime(now)
    const year = nyTime.getFullYear()
    const month = nyTime.getMonth()
    const startOfMonth = new Date(year, month, 1)
    const endOfMonth = new Date(year, month + 1, 1)
    const total = endOfMonth - startOfMonth
    const elapsed = nyTime - startOfMonth
    const phaseDuration = total / 4
    const idx = Math.floor(elapsed / phaseDuration)
    const pct = (elapsed % phaseDuration) / phaseDuration
    return {
      title: 'MONTHLY CYCLE (EST)',
      phase: PHASES[idx % 4] || PHASES[3],
      progress: pct,
      timeLeft: phaseDuration - (elapsed % phaseDuration),
      subtext: `Week ${idx + 1}`
    }
  }

  /**
   * Calculates Weekly cycle data.
   * @param now - Current time
   * @returns Weekly cycle status
   */
  getWeeklyData(now) {
    const nyTime = this.getNYTime(now)
    const day = nyTime.getDay()
    if (day === 0 || day === 6 || day === 5) {
      return {
        title: 'WEEKLY CYCLE (EST)',
        phase: { id: 'WAIT', name: 'OFF-CYCLE', color: '#555' },
        progress: 0,
        timeLeft: 0,
        subtext: 'Fri/Sat/Sun Ignored'
      }
    }
    const phaseIdx = day - 1
    const startOfDay = new Date(nyTime.getFullYear(), nyTime.getMonth(), nyTime.getDate())
    const elapsed = nyTime - startOfDay
    const msInDay = 86400000
    return {
      title: 'WEEKLY CYCLE (EST)',
      phase: PHASES[phaseIdx],
      progress: elapsed / msInDay,
      timeLeft: msInDay - elapsed,
      subtext: [
        'Sunday',
        'Monday (X)',
        'Tuesday (A)',
        'Wednesday (M)',
        'Thursday (D)',
        'Friday',
        'Saturday'
      ][day]
    }
  }

  /**
   * Calculates Daily cycle data.
   * @param now - Current time
   * @returns Daily cycle status
   */
  getDailyData(now) {
    const nyTime = this.getNYTime(now)
    const hours = nyTime.getHours()
    const minutes = nyTime.getMinutes()
    const totalHours = hours + minutes / 60
    let shiftedHours = totalHours - 18
    if (shiftedHours < 0) {
      shiftedHours += 24
    }
    const quarterIndex = Math.floor(shiftedHours / 6)
    const phaseIdx = quarterIndex
    let subtext = ''
    let startH = (18 + quarterIndex * 6) % 24
    let endH = (18 + (quarterIndex + 1) * 6) % 24
    if (phaseIdx === 0) {
      subtext = `ASIAN (${startH}:00-${endH}:00 EST)`
    } else if (phaseIdx === 1) {
      subtext = `LONDON (${startH}:00-${endH}:00 EST)`
    } else if (phaseIdx === 2) {
      subtext = `NY AM (${startH}:00-${endH}:00 EST)`
    } else {
      subtext = `NY PM (${startH}:00-${endH}:00 EST)`
    }
    const elapsedInQuarter = shiftedHours % 6
    const pct = elapsedInQuarter / 6
    return {
      title: 'DAILY CYCLE (6h EST)',
      phase: PHASES[phaseIdx],
      progress: pct,
      timeLeft: (6 - elapsedInQuarter) * 3600 * 1000,
      subtext: subtext
    }
  }

  /**
   * Calculates 90-minute cycle data.
   * @param now - Current time
   * @returns 90min cycle status
   */
  get90MinData(now) {
    const nyTime = this.getNYTime(now)
    const hours = nyTime.getHours()
    const minutes = nyTime.getMinutes()
    const seconds = nyTime.getSeconds()
    const totalMinutesOfDay = hours * 60 + minutes + seconds / 60
    let shiftedMinutes = totalMinutesOfDay - 1080
    if (shiftedMinutes < 0) {
      shiftedMinutes += 1440
    }
    const posIn6h = shiftedMinutes % 360
    const phaseIdx = Math.floor(posIn6h / 90)
    const elapsedInPhase = posIn6h % 90
    return {
      title: 'INTRADAY (90m EST)',
      phase: PHASES[phaseIdx],
      progress: elapsedInPhase / 90,
      timeLeft: (90 - elapsedInPhase) * 60 * 1000,
      subtext: `Q${phaseIdx + 1} of 4`
    }
  }
}

/** Global Logic Instance */
const engine = new QuarterlyLogic()
/** Dashboard Grid Element */
const grid = document.getElementById('dashboard-grid')
/** Global Clock Element */
const clockEl = document.getElementById('global-clock')

/**
 * Formats milliseconds to string.
 * @param ms - Duration in ms
 * @returns Formatted time string
 */
function formatDuration(ms) {
  if (ms < 0) {
    ms = 0
  }
  const seconds = Math.floor((ms / 1000) % 60)
  const minutes = Math.floor((ms / (1000 * 60)) % 60)
  const hours = Math.floor(ms / (1000 * 60 * 60))
  if (hours > 0) {
    return `${hours}h ${minutes}m`
  }
  return `${minutes}m ${seconds}s`
}

/**
 * Creates a cycle card.
 * @param id - Card identifier
 * @returns Created div element
 */
function createCard(id) {
  const div = document.createElement('div')
  div.className = 'cycle-card'
  div.id = `card-${id}`
  div.innerHTML = `
      <div class="phase-strip"></div>
      <div class="cycle-header">
          <div class="cycle-title">--</div>
          <div class="cycle-status">--</div>
      </div>
      <div class="current-phase-display">
          <div class="big-phase-letter">--</div>
          <div class="phase-name">--</div>
          <div class="info-pill">--</div>
      </div>
      <div class="progress-container">
          <div class="progress-labels">
              <span>PROGRESS</span>
              <span class="pct-text">0%</span>
          </div>
          <div class="progress-track">
              <div class="progress-bar"></div>
          </div>
          <div class="time-remaining">-- left</div>
      </div>
  `
  return div
}
const cards = ['yearly', 'monthly', 'weekly', 'daily', '90min']
cards.forEach(c => grid.appendChild(createCard(c)))

/**
 * Updates card with data.
 * @param id - Card ID
 * @param data - Cycle data object
 */
function updateCard(id, data) {
  const el = document.getElementById(`card-${id}`)
  el.className = `cycle-card phase-${data.phase.id}`
  el.querySelector('.cycle-title').textContent = data.title
  el.querySelector('.cycle-status').textContent = 'ACTIVE'
  el.querySelector('.big-phase-letter').textContent = data.phase.id
  el.querySelector('.phase-name').textContent = data.phase.name
  el.querySelector('.info-pill').textContent = data.subtext
  const pct = Math.floor(data.progress * 100)
  el.querySelector('.pct-text').textContent = `${pct}%`
  const bar = el.querySelector('.progress-bar')
  bar.style.width = `${pct}%`
  bar.style.color = data.phase.color
  el.querySelector('.phase-strip').style.background = `
      linear-gradient(90deg,
          var(--color-contin) 0%,
          var(--color-contin) 25%,
          var(--color-accum) 25%,
          var(--color-accum) 50%,
          var(--color-manip) 50%,
          var(--color-manip) 75%,
          var(--color-distr) 75%,
          var(--color-distr) 100%
      )`
  el.querySelector('.time-remaining').textContent = `${formatDuration(data.timeLeft)} remaining`
}

/**
 * Main update loop.
 * @description Updates clock and cards.
 */
function tick() {
  const now = new Date()
  const timeStr = now.toLocaleTimeString('en-US', {
    timeZone: 'America/New_York',
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
  clockEl.textContent = `${timeStr} EST`
  const yearly = engine.getYearlyData(now)
  const monthly = engine.getMonthlyData(now)
  const weekly = engine.getWeeklyData(now)
  const daily = engine.getDailyData(now)
  const min90 = engine.get90MinData(now)
  updateCard('yearly', yearly)
  updateCard('monthly', monthly)
  updateCard('weekly', weekly)
  updateCard('daily', daily)
  updateCard('90min', min90)
  requestAnimationFrame(tick)
}
tick()