script.js

function triangleArrow(deg, color) {
  return `
    <div class="dir-arrow-wrap"
         style="--deg:${deg}deg; --arrow-color:${color};">
      <div class="dir-arrow"></div>
    </div>
  `;
}

let _countdownInterval = null;

function startCountdown(startSeconds, color) {
  if (_countdownInterval) {
    clearInterval(_countdownInterval);
    _countdownInterval = null;
  }

  let remaining = startSeconds;

  function fmt(s) {
    const m = Math.floor(s / 60);
    const sec = s % 60;
    return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
  }

  function tick() {
    const el = document.getElementById('countdown-display');
    if (!el) { clearInterval(_countdownInterval); return; }
    el.textContent = fmt(remaining);
    el.style.color = remaining <= 10 ? '#ff3b3b' : color;
    if (remaining <= 0) { clearInterval(_countdownInterval); }
    remaining--;
  }

  tick();
  _countdownInterval = setInterval(tick, 1000);
}
const scenarios = [
  {
    id: 'idle',
    label: 'Standby',
    color: '#2aff88',
    shadow: 'rgba(42,255,136,.2)',
    ringColor: 'rgba(42,255,136,.25)',
    ringGlow: '0 0 24px rgba(42,255,136,.15)',
    orb1: 'rgba(30,180,90,.18)',
    orb2: 'rgba(20,140,70,.14)',
    orb3: 'rgba(42,255,136,.1)',
    renderScreen: () => `
      <div class="idle-pip"></div>
      <div class="idle-time" id="ci">--:--</div>
      <div class="idle-label">All clear</div>
    `,
  },
  {
    id: 'heavy-rain',
    label: 'Heavy Rain',
    color: '#4da6ff',
    shadow: 'rgba(77,166,255,.28)',
    ringColor: 'rgba(77,166,255,.45)',
    ringGlow: '0 0 30px rgba(77,166,255,.28)',
    orb1: 'rgba(30,100,240,.22)',
    orb2: 'rgba(20,70,200,.16)',
    orb3: 'rgba(77,166,255,.14)',
    arrowDeg: 45,          // northeast
    arrowColor: '#4da6ff',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('heavy-rain.png')"></div>
          <div class="screen-label">Heavy Rain 5 miles away</div>
        </div>
      `;
    },
  },
  {
    id: 'fire',
    label: 'Wildfire',
    color: '#ff6b2b',
    shadow: 'rgba(255,107,43,.28)',
    ringColor: 'rgba(255,107,43,.5)',
    ringGlow: '0 0 32px rgba(255,107,43,.28)',
    orb1: 'rgba(240,80,20,.24)',
    orb2: 'rgba(190,55,15,.18)',
    orb3: 'rgba(255,107,43,.14)',
    arrowDeg: 270,         // west
    arrowColor: '#ff6b2b',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('fire.png')"></div>
          <div class="screen-label">Fire 2 miles away</div>
        </div>
      `;
    },
  },
  {
    id: 'blizzard',
    label: 'Blizzard',
    color: '#a5c9f8',
    shadow: 'rgba(122,211,223,.24)',
    ringColor: 'rgba(101,220,227,.45)',
    ringGlow: '0 0 30px rgba(101,220,227,.45)',
    orb1: 'rgba(60,188,220,.22)',
    orb2: 'rgba(35,129,180,.16)',
    orb3: 'rgba(125,220,247,.12)',
    arrowDeg: 0,           // north
    arrowColor: '#a5c9f8',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('blizzard.png')"></div>
          <div class="screen-label">Blizzard 10 miles away</div>
        </div>
      `;
    },
  },
  {
    id: 'quake',
    label: 'Earthquake',
    color: '#fbbf24',
    shadow: 'rgba(251,191,36,.22)',
    ringColor: 'rgba(251,191,36,.45)',
    ringGlow: '0 0 28px rgba(251,191,36,.22)',
    orb1: 'rgba(220,150,20,.2)',
    orb2: 'rgba(175,115,15,.15)',
    orb3: 'rgba(251,191,36,.12)',
    arrowDeg: 135,         // southeast
    arrowColor: '#fbbf24',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('earthquake.png')"></div>
          <div class="screen-label">Earthquake approaching nearby</div>
        </div>
      `;
    },
  },
  {
    id: 'volcano',
    label: 'Volcano',
    color: '#ff3b3b',
    shadow: 'rgba(255,59,59,.3)',
    ringColor: 'rgba(255,59,59,.6)',
    ringGlow: '0 0 36px rgba(255,59,59,.32)',
    orb1: 'rgba(240,30,30,.26)',
    orb2: 'rgba(200,18,18,.18)',
    orb3: 'rgba(255,59,59,.16)',
    shake: true,
    arrowDeg: 90,          // east
    arrowColor: '#ff3b3b',
    countdownSeconds: 300,
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('volcano.png')"></div>
          <div class="screen-label">Volcano alert</div>
          <div class="countdown-block">
            <span class="countdown-label">impact in</span>
            <span class="countdown-display" id="countdown-display" style="color:#f63535">--:--</span>
          </div>
        </div>
      `;
    },
  },
  {
    id: 'landslide',
    label: 'Landslide',
    color: '#17960b',
    shadow: 'rgba(66,244,56,.3)',
    ringColor: 'rgba(95,255,59,.6)',
    ringGlow: '0 0 36px rgba(108,255,59,.32)',
    orb1: 'rgba(30,240,40,.26)',
    orb2: 'rgba(18,200,73,.18)',
    orb3: 'rgba(72,253,60,.16)',
    shake: true,
    arrowDeg: 225,         // southwest
    arrowColor: '#4cff55',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('landslide.png')"></div>
          <div class="screen-label">Landslide 6 miles away</div>
        </div>
      `;
    },
  },
  {
    id: 'flood',
    label: 'Flood',
    color: '#3badff',
    shadow: 'rgba(59,216,255,.3)',
    ringColor: 'rgba(56,181,248,.6)',
    ringGlow: '0 0 36px rgba(58,198,249,.32)',
    orb1: 'rgba(30,201,240,.26)',
    orb2: 'rgba(18,197,200,.18)',
    orb3: 'rgba(59,216,247,.16)',
    shake: true,
    arrowDeg: 180,         // south
    arrowColor: '#3badff',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('flood.png')"></div>
          <div class="screen-label">Heavy flood 7 miles away</div>
        </div>
      `;
    },
  },
  {
    id: 'avalanche',
    label: 'Avalanche',
    color: '#0d6e9b',
    shadow: 'rgba(56,144,244,.3)',
    ringColor: 'rgba(59,150,255,.6)',
    ringGlow: '0 0 36px rgba(59,150,255,.32)',
    orb1: 'rgba(30,152,240,.26)',
    orb2: 'rgba(18,118,200,.18)',
    orb3: 'rgba(59,216,247,.16)',
    shake: true,
    arrowDeg: 315,         // northwest
    arrowColor: '#3b96ff',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('avalanche.png')"></div>
          <div class="screen-label">Avalanche 4 miles away</div>
        </div>
      `;
    },
  },
  {
    id: 'cyclone',
    label: 'Cyclone',
    color: '#999ea5',
    shadow: 'rgba(155,166,169,.3)',
    ringColor: 'rgba(174,182,186,.6)',
    ringGlow: '0 0 36px rgba(182,185,187,.32)',
    orb1: 'rgba(201,190,190,.26)',
    orb2: 'rgba(177,177,177,.18)',
    orb3: 'rgba(170,161,161,.16)',
    shake: true,
    arrowDeg: 60,
    arrowColor: '#b0b8bf',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('cyclone.png')"></div>
          <div class="screen-label">Cyclone 3 miles away</div>
        </div>
      `;
    },
  },
  {
    id: 'tsunami',
    label: 'Tsunami',
    color: '#3be8ff',
    shadow: 'rgba(59,255,242,.3)',
    ringColor: 'rgba(56,245,241,.6)',
    ringGlow: '0 0 36px rgba(59,232,255,.32)',
    orb1: 'rgba(30,240,219,.26)',
    orb2: 'rgba(16,197,188,.18)',
    orb3: 'rgba(59,255,235,.16)',
    shake: true,
    arrowDeg: 180,
    arrowColor: '#3be8ff',
    countdownSeconds: 480,
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('tsunami.png')"></div>
          <div class="screen-label">Tsunami incoming</div>
          <div class="countdown-block">
            <span class="countdown-label">impact in</span>
            <span class="countdown-display" id="countdown-display" style="color:#3be8ff">--:--</span>
          </div>
        </div>
      `;
    },
  },
  {
    id: 'sinkhole',
    label: 'Sinkhole',
    color: '#8e5107',
    shadow: 'rgba(223,109,33,.3)',
    ringColor: 'rgba(184,112,17,.6)',
    ringGlow: '0 0 36px rgba(198,119,23,.32)',
    orb1: 'rgba(199,133,2,.26)',
    orb2: 'rgba(200,136,18,.18)',
    orb3: 'rgba(229,135,40,.16)',
    shake: true,
    arrowDeg: 90,
    arrowColor: '#d47a2a',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('sinkhole.png')"></div>
          <div class="screen-label">Sinkhole 3 miles away</div>
        </div>
      `;
    },
  },
  {
    id: 'hurricane',
    label: 'Hurricane',
    color: '#76d1f8',
    shadow: 'rgba(135,196,252,.3)',
    ringColor: 'rgba(113,233,252,.6)',
    ringGlow: '0 0 36px rgba(116,223,250,.32)',
    orb1: 'rgba(146,225,245,.26)',
    orb2: 'rgba(145,228,250,.18)',
    orb3: 'rgba(155,235,252,.16)',
    shake: true,
    arrowDeg: 225,
    arrowColor: '#76d1f8',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('hurricane.png')"></div>
          <div class="screen-label">Hurricane 5 miles away</div>
        </div>
      `;
    },
  },
  {
    id: 'dust-storm',
    label: 'Dust Storm',
    color: '#ff9500',
    shadow: 'rgba(255,149,0,.3)',
    ringColor: 'rgba(255,149,0,.6)',
    ringGlow: '0 0 36px rgba(255,149,0,.32)',
    orb1: 'rgba(246,196,97,.26)',
    orb2: 'rgba(233,242,113,.18)',
    orb3: 'rgba(232,251,126,.16)',
    shake: true,
    arrowDeg: 270,         // west
    arrowColor: '#ff9500',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('dust_storm.png')"></div>
          <div class="screen-label">Dust Storm 2 miles away</div>
        </div>
      `;
    },
  },
  {
    id: 'missile',
    label: 'Missile',
    color: '#f63535',
    shadow: 'rgba(247,39,39,.3)',
    ringColor: 'rgba(255,59,59,.6)',
    ringGlow: '0 0 36px rgba(246,89,89,.32)',
    orb1: 'rgba(246,76,76,.26)',
    orb2: 'rgba(252,92,92,.18)',
    orb3: 'rgba(253,93,93,.16)',
    shake: true,
    arrowDeg: 0,
    arrowColor: '#f63535',
    countdownSeconds: 120,
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('missile.png')"></div>
          <div class="screen-label">Missile incoming</div>
          <div class="countdown-block">
            <span class="countdown-label">impact in</span>
            <span class="countdown-display" id="countdown-display" style="color:#f63535">--:--</span>
          </div>
        </div>
      `;
    },
  },
  {
    id: 'hazardous-material',
    label: 'Hazardous Material',
    color: '#f8ff3b',
    shadow: 'rgba(192,247,51,.3)',
    ringColor: 'rgba(239,255,59,.6)',
    ringGlow: '0 0 36px rgba(238,248,54,.32)',
    orb1: 'rgba(212,240,30,.26)',
    orb2: 'rgba(197,200,18,.18)',
    orb3: 'rgba(255,232,59,.16)',
    shake: true,
    arrowDeg: 90,          // east
    arrowColor: '#f8ff3b',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('hazard.png')"></div>
          <div class="screen-label">Hazardous Material 5 miles away</div>
        </div>
      `;
    },
  },
  {
    id: 'lockdown',
    label: 'Lockdown',
    color: '#ad9707',
    shadow: 'rgba(182,200,17,.3)',
    ringColor: 'rgba(191,182,14,.6)',
    ringGlow: '0 0 36px rgba(181,195,22,.32)',
    orb1: 'rgba(181,175,12,.26)',
    orb2: 'rgba(200,185,18,.18)',
    orb3: 'rgba(180,166,12,.16)',
    shake: true,
    arrowDeg: 315,         // northwest
    arrowColor: '#d4b80a',
    renderScreen() {
      return `
        <div class="screen-layer">
          ${triangleArrow(this.arrowDeg, this.arrowColor)}
          <div class="screen-bg" style="background-image:url('lockdown.png')"></div>
          <div class="screen-label">Assailant last spotted 3 miles away</div>
        </div>
      `;
    },
  },
];

function updateClock() {
  const now  = new Date();
  const h    = String(now.getHours()).padStart(2, '0');
  const m    = String(now.getMinutes()).padStart(2, '0');
  const time = `${h}:${m}`;

  const statusTime = document.getElementById('scr-t');
  const idleTime   = document.getElementById('ci');

  if (statusTime) statusTime.textContent = time;
  if (idleTime)   idleTime.textContent   = time;
}

updateClock();
setInterval(updateClock, 15000);


function activate(scenario) {
  // clear any running countdown immediately
  if (_countdownInterval) {
    clearInterval(_countdownInterval);
    _countdownInterval = null;
  }

  const screenEl = document.getElementById('scr');
  screenEl.style.opacity = '0';
  setTimeout(() => {
    screenEl.innerHTML     = scenario.renderScreen();
    screenEl.style.opacity = '1';
    updateClock();

    if (scenario.countdownSeconds) {
      requestAnimationFrame(() => {
        startCountdown(scenario.countdownSeconds, scenario.arrowColor);
      });
    }
  }, 200);

  const ring = document.getElementById('alert-ring');
  if (scenario.id === 'idle') {
    ring.style.borderColor = 'transparent';
    ring.style.boxShadow   = 'none';
  } else {
    ring.style.borderColor = scenario.ringColor;
    ring.style.boxShadow   = scenario.ringGlow;
  }

  document.getElementById('orb1').style.background = scenario.orb1;
  document.getElementById('orb2').style.background = scenario.orb2;
  document.getElementById('orb3').style.background = scenario.orb3;

  const watchScene = document.getElementById('watch-scene');
  if (scenario.shake) {
    watchScene.style.animation = 'shakeIt .5s ease, floatWatch 6s .5s ease-in-out infinite';
    setTimeout(() => {
      watchScene.style.animation = 'floatWatch 6s ease-in-out infinite';
    }, 500);
  }

  document.querySelectorAll('.pill').forEach(pill => {
    pill.classList.toggle('active', pill.dataset.id === scenario.id);
  });
}

const pillsContainer = document.getElementById('pills');

scenarios.forEach(scenario => {
  const btn        = document.createElement('button');
  btn.className    = 'pill';
  btn.dataset.id   = scenario.id;
  btn.style.setProperty('--c',      scenario.color);
  btn.style.setProperty('--shadow', scenario.shadow);
  btn.innerHTML    = `<span class="pill-gem"></span>${scenario.label}`;
  btn.addEventListener('click', () => activate(scenario));
  pillsContainer.appendChild(btn);
});


activate(scenarios[0]);