ugreen-homepage/script.js

// Focus dot animation
const dot = document.querySelector('.dot-point');

  function updateDotState() {
    const isActive =
      document.visibilityState === 'visible' &&
      document.hasFocus();

    dot.classList.toggle('is-active', isActive);
  }

  document.addEventListener('visibilitychange', updateDotState);
  window.addEventListener('focus', updateDotState);
  window.addEventListener('blur', updateDotState);

  // 최초 실행
  updateDotState();

// ping
async function checkStatus() {
  const cards = document.querySelectorAll(".card");
  const results = [];

  for (const card of cards) {
    const url = card.getAttribute("data-url");
    const dot = card.querySelector(".card__decor.card__decor--tr");

    // 결과 저장을 위한 약속(Promise) 생성
    const checkTask = new Promise((resolve) => {
      const img = new Image();
      // 5초 타임아웃 설정
      const timeoutId = setTimeout(() => {
        img.src = ""; 
        resolve({ dot, status: "offline" });
      }, 5000);

      img.onload = () => {
        clearTimeout(timeoutId);
        resolve({ dot, status: "online" });
      };

      img.onerror = () => {
        clearTimeout(timeoutId);
        resolve({ dot, status: "offline" }); // 502 에러 시 이쪽으로 빠집니다.
      };

      // 캐시 방지를 위해 타임스탬프를 붙여서 파비콘 호출
      img.src = `${url}/favicon.ico?t=${new Date().getTime()}`;
    });

    results.push(checkTask);
    await new Promise((resolve) => setTimeout(resolve, 100)); // 0.1초 간격 요청
  }

  // 모든 결과가 모이면 한꺼번에 반영
  const finalStatuses = await Promise.all(results);
  
  requestAnimationFrame(() => {
    finalStatuses.forEach(({ dot, status }) => {
      dot.classList.remove("status-online", "status-offline");
      dot.classList.add(status === "online" ? "status-online" : "status-offline");
    });
  });
}

checkStatus();
setInterval(checkStatus, 300000);

// 🔴 테스트 ON
// const TEST_ONLY_SECOND_CARD = true;
// 🟢 테스트 OFF
const TEST_ONLY_SECOND_CARD = false;

// bolt animation
function startBoltAction() {
  let allBolts = [];

  if (TEST_ONLY_SECOND_CARD) {
    const secondCard = document.querySelectorAll(".card")[1];
    if (!secondCard) return;

    allBolts = secondCard.querySelectorAll(".card__decor");
  } else {
    allBolts = document.querySelectorAll(".card__decor");
  }

  if (allBolts.length === 0) return;

  const availableBolts = Array.from(allBolts).filter(
    (bolt) => !bolt.classList.contains("is-acting")
  );

  if (availableBolts.length > 0) {
    const randomBolt =
      availableBolts[Math.floor(Math.random() * availableBolts.length)];

    const baseRot =
      randomBolt.style.getPropertyValue("--r") || "0deg";

    randomBolt.style.setProperty("--r", baseRot);

    randomBolt.classList.add("is-acting");

    // setTimeout 대신 이벤트 리스너 사용
    randomBolt.addEventListener('animationend', () => {
      randomBolt.classList.remove("is-acting");
    }, { once: true }); // 메모리 관리를 위해 한 번만 실행 후 제거
  }

  const nextInterval = Math.random() * 4000 + 3000;
  setTimeout(startBoltAction, nextInterval);
}

window.addEventListener("load", () => {
  setTimeout(startBoltAction, 2000);
});

window.addEventListener('DOMContentLoaded', () => {
  // 1. 상태 체크는 1초 뒤에 여유롭게 시작
  setTimeout(checkStatus, 1000);

  // 2. 나사 랜덤 각도 설정 (DOM이 준비된 직후 실행)
  document.querySelectorAll('.card').forEach((card) => {
    card.querySelectorAll('.card__decor').forEach((decor) => {
      const angle = Math.floor(Math.random() * 180) - 30;
      decor.style.setProperty('--r', `${angle}deg`);
    });
  });
});

// 1. 사용할 테마 리스트
const themes = ['semi-nova', 'nova', 'semi-solaris', 'solaris'];
const STORAGE_KEY = 'selected-theme';

// 2. 초기 로드 시 테마 적용 (기본값: semi-nova)
const savedTheme = localStorage.getItem(STORAGE_KEY) || themes[0];
document.body.classList.add(savedTheme);

window.addEventListener('keydown', (e) => {
  // OS별 수정 키 판별 (Mac: Command, Win: Control)
  const isMac = navigator.platform.toUpperCase().includes('MAC');
  const isModifierPressed = isMac ? e.metaKey : e.ctrlKey;

  // 방향키 좌/우 확인
  const isLeft = e.code === 'ArrowLeft';
  const isRight = e.code === 'ArrowRight';

  if (
    isModifierPressed && 
    (isLeft || isRight) &&
    // 입력창 안에서 커서 이동을 방해하지 않도록 체크
    !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) &&
    !document.activeElement?.isContentEditable // 에디터 영역 대응
  ) {
    e.preventDefault();

    // 현재 인덱스 찾기
    let currentIndex = themes.findIndex(t => document.body.classList.contains(t));
    if (currentIndex === -1) currentIndex = 0;

    // 3. 좌/우 방향에 따른 인덱스 순환
    if (isRight) {
      // 오른쪽 화살표: 다음 테마
      currentIndex = (currentIndex + 1) % themes.length;
    } else if (isLeft) {
      // 왼쪽 화살표: 이전 테마
      currentIndex = (currentIndex - 1 + themes.length) % themes.length;
    }

    const nextTheme = themes[currentIndex];

    // 4. 클래스 교체 및 저장
    themes.forEach(t => document.body.classList.remove(t));
    document.body.classList.add(nextTheme);
    localStorage.setItem(STORAGE_KEY, nextTheme);

    console.log(`Current Theme: ${nextTheme}`);
  }
});

const logo = document.querySelector('header h1');

let startX = 0;
let isDragging = false;
const SWIPE_THRESHOLD = 40;

function getCurrentThemeIndex() {
  return themes.findIndex(t => document.body.classList.contains(t));
}

function applyTheme(index) {
  themes.forEach(t => document.body.classList.remove(t));
  document.body.classList.add(themes[index]);
  localStorage.setItem(STORAGE_KEY, themes[index]);

  const dot = document.querySelector('.dot-point');
  if (dot) {
    dot.classList.remove('blink-alert');
    // 리플로우 유발 코드 제거 (void dot.offsetWidth;)
    // 대신 브라우저의 다음 렌더링 사이클을 이용
    requestAnimationFrame(() => {
      dot.classList.add('blink-alert');
    });
  }
}

logo.addEventListener('pointerdown', (e) => {
  startX = e.clientX;
  isDragging = true;
  logo.classList.add('is-sliding');
});

logo.addEventListener('pointerup', (e) => {
  if (!isDragging) return;

  const deltaX = e.clientX - startX;

  if (Math.abs(deltaX) > SWIPE_THRESHOLD) {
    let index = getCurrentThemeIndex();
    if (index === -1) index = 0;

    if (deltaX > 0) {
      index = (index + 1) % themes.length;
    } else {
      index = (index - 1 + themes.length) % themes.length;
    }

    applyTheme(index);
  }

  reset();
});

logo.addEventListener('pointerleave', reset);
logo.addEventListener('pointercancel', reset);

function reset() {
  isDragging = false;
  logo.classList.remove('is-sliding');
}