main.js

/* ============================================================
   StarCodeLabs — 별밤 인터랙션
   ============================================================ */
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

/* ---------- 1. Starfield (별 + 별똥별) ---------- */
const canvas = document.getElementById('starfield');
const ctx = canvas.getContext('2d');
let stars = [];
let shootingStars = [];
let W = 0;
let H = 0;

function resizeCanvas() {
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  W = window.innerWidth;
  H = window.innerHeight;
  canvas.width = W * dpr;
  canvas.height = H * dpr;
  canvas.style.width = `${W}px`;
  canvas.style.height = `${H}px`;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

  const count = Math.min(220, Math.floor((W * H) / 6500));
  stars = Array.from({ length: count }, () => ({
    x: Math.random() * W,
    y: Math.random() * H,
    r: Math.random() * 1.4 + 0.3,
    baseAlpha: Math.random() * 0.55 + 0.15,
    phase: Math.random() * Math.PI * 2,
    twinkleSpeed: Math.random() * 0.0016 + 0.0004,
    drift: Math.random() * 0.045 + 0.008,
    star: Math.random() < 0.08, // 8%는 별빛 블루 별
  }));
}

function spawnShootingStar(fromKonami = false) {
  const angle = Math.PI * (0.72 + Math.random() * 0.12); // 좌하향 대각선
  const speed = 7 + Math.random() * 5;
  shootingStars.push({
    x: Math.random() * W * 0.9 + W * 0.1,
    y: Math.random() * H * 0.35,
    vx: Math.cos(angle) * speed,
    vy: -Math.sin(angle) * speed,
    life: 1,
    decay: 0.012 + Math.random() * 0.01,
    star: fromKonami || Math.random() < 0.3,
  });
}

let nextShootAt = performance.now() + 2500;

function drawFrame(t) {
  ctx.clearRect(0, 0, W, H);

  for (const s of stars) {
    const alpha = s.baseAlpha * (0.55 + 0.45 * Math.sin(t * s.twinkleSpeed + s.phase));
    ctx.beginPath();
    ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
    ctx.fillStyle = s.star
      ? `rgba(110, 155, 255, ${alpha})`
      : `rgba(230, 238, 255, ${alpha})`;
    ctx.fill();

    s.y += s.drift;
    if (s.y > H + 2) { s.y = -2; s.x = Math.random() * W; }
  }

  if (t > nextShootAt) {
    spawnShootingStar();
    nextShootAt = t + 3500 + Math.random() * 4500;
  }

  shootingStars = shootingStars.filter((m) => m.life > 0);
  for (const m of shootingStars) {
    const tail = 14;
    const grad = ctx.createLinearGradient(m.x, m.y, m.x - m.vx * tail, m.y - m.vy * tail);
    const head = m.star ? '110, 155, 255' : '255, 255, 255';
    grad.addColorStop(0, `rgba(${head}, ${m.life})`);
    grad.addColorStop(1, `rgba(${head}, 0)`);
    ctx.strokeStyle = grad;
    ctx.lineWidth = 1.6;
    ctx.beginPath();
    ctx.moveTo(m.x, m.y);
    ctx.lineTo(m.x - m.vx * tail, m.y - m.vy * tail);
    ctx.stroke();

    m.x += m.vx;
    m.y += m.vy;
    m.life -= m.decay;
  }

  requestAnimationFrame(drawFrame);
}

function drawStatic() {
  ctx.clearRect(0, 0, W, H);
  for (const s of stars) {
    ctx.beginPath();
    ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
    ctx.fillStyle = s.star
      ? `rgba(110, 155, 255, ${s.baseAlpha})`
      : `rgba(230, 238, 255, ${s.baseAlpha})`;
    ctx.fill();
  }
}

resizeCanvas();
window.addEventListener('resize', () => {
  resizeCanvas();
  if (reduceMotion) drawStatic();
});
if (reduceMotion) {
  drawStatic();
} else {
  requestAnimationFrame(drawFrame);
}

/* ---------- 2. Core Values 타이핑 루프 ---------- */
// [흐린 부분, 강조(블루) 부분, 밝은 부분]
const CODE_LINES = [
  ['if (', '실행 > 계획', ') ship();'],
  ['if (', '기록 > 기억', ') write();'],
  ['if (', '공유 > 소유', ') growTogether();'],
];

const typedEl = document.getElementById('typedCode');
if (typedEl) {
  const [dimSpan, accentSpan, textSpan] = typedEl.children;

  const setTyped = (line, count) => {
    const [dim, accent, text] = line;
    dimSpan.textContent = dim.slice(0, count);
    accentSpan.textContent = accent.slice(0, Math.max(0, count - dim.length));
    textSpan.textContent = text.slice(0, Math.max(0, count - dim.length - accent.length));
  };

  if (reduceMotion) {
    setTyped(CODE_LINES[0], Infinity);
  } else {
    let lineIdx = 0;
    let charIdx = 0;
    let deleting = false;

    const typeTick = () => {
      const line = CODE_LINES[lineIdx];
      const total = line.join('').length;

      if (!deleting) {
        charIdx++;
        setTyped(line, charIdx);
        if (charIdx >= total) {
          deleting = true;
          setTimeout(typeTick, 2100);
          return;
        }
        setTimeout(typeTick, 62 + Math.random() * 40);
      } else {
        charIdx--;
        setTyped(line, charIdx);
        if (charIdx <= 0) {
          deleting = false;
          lineIdx = (lineIdx + 1) % CODE_LINES.length;
          setTimeout(typeTick, 420);
          return;
        }
        setTimeout(typeTick, 24);
      }
    };
    setTimeout(typeTick, 900);
  }
}

/* ---------- 3. 스크롤 리빌 ---------- */
const observer = new IntersectionObserver(
  (entries) => {
    for (const e of entries) {
      if (e.isIntersecting) {
        e.target.classList.add('in');
        observer.unobserve(e.target);
      }
    }
  },
  { threshold: 0.12 }
);
document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));

/* ---------- 4. 신호등 UI 데모 ---------- */
const TRAFFIC_STATES = [
  { label: '여유 있음', color: '#22C55E' },
  { label: '얼마 없어요', color: '#F59E0B' },
  { label: '만석', color: '#EF4444' },
  { label: '정보 없음', color: '#9CA3AF' },
];

const trafficBtn = document.getElementById('trafficLight');
if (trafficBtn) {
  const dot = trafficBtn.querySelector('.traffic-dot');
  const text = trafficBtn.querySelector('.traffic-text');
  let stateIdx = 0;

  function renderTraffic() {
    const s = TRAFFIC_STATES[stateIdx];
    trafficBtn.style.background = `${s.color}26`; // 15% 투명도
    trafficBtn.style.color = s.color;
    dot.style.background = s.color;
    text.textContent = s.label;
  }
  renderTraffic();

  trafficBtn.addEventListener('click', () => {
    stateIdx = (stateIdx + 1) % TRAFFIC_STATES.length;
    renderTraffic();
  });
}

/* ---------- 5. 콘솔 이스터에그 ---------- */
console.log(
  '%c⭐ StarCodeLabs',
  'font-size: 22px; font-weight: 900; color: #6E9BFF; text-shadow: 0 0 12px rgba(110,155,255,.6);'
);
console.log(
  '%cif (반짝이는_아이디어) { joinUs(); }  →  https://github.com/StarCodeLabs',
  'font-family: monospace; font-size: 13px; color: #98A2B8;'
);

/* ---------- 6. 코나미 코드 → 별똥별 소나기 ---------- */
const KONAMI = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
let konamiIdx = 0;
window.addEventListener('keydown', (e) => {
  konamiIdx = e.key === KONAMI[konamiIdx] ? konamiIdx + 1 : 0;
  if (konamiIdx === KONAMI.length) {
    konamiIdx = 0;
    if (!reduceMotion) {
      for (let i = 0; i < 16; i++) {
        setTimeout(() => spawnShootingStar(true), i * 130);
      }
    }
    console.log('%c🌠 별똥별 소나기! 소원을 비세요.', 'font-size: 14px; color: #6E9BFF;');
  }
});

/* ---------- 7. 푸터 연도 ---------- */
const yearEl = document.getElementById('year');
if (yearEl) yearEl.textContent = new Date().getFullYear();