my-switch-database/script/nsw-detail.js

import NSW_DB from '../db/nsw.db.js';

document.addEventListener('DOMContentLoaded', () => {
  // URL에서 게임 번호 가져오기
  const urlParams = new URLSearchParams(window.location.search);
  const gameNo = parseInt(urlParams.get('no'));

  // 게임 데이터 찾기
  const game = NSW_DB.find(g => g.no === gameNo);
  if (!game) {
    alert('게임을 찾을 수 없습니다.');
    window.location.href = 'index.html';
    return;
  }

  // 언어 설정
  const language = localStorage.getItem('language') || 'ko';
  const texts = {
    ko: {
      infoTitle: '게임 정보',
      purchaseTitle: '구매 정보',
      requiredCapacity: '필요한 용량',
      playMode: '플레이 모드',
      playUser: '플레이 인원',
      localPlayUser: '로컬 통신',
      onlinePlayUser: '인터넷 통신',
      compatibleController: '대응 컨트롤러',
      onlineDataSave: '세이브 데이터 보관',
      maker: '메이커',
      language: '지원 언어',
      cero: '심의 등급',
      iarc: '심의 등급',
      releaseDate: '출시일',
      purchaseDate: '구매일',
      store: '구매처',
      price: '구매 가격',
      orderNumber: '주문번호',
      extension: '추가 콘텐츠',
      none: '없음',
      supported: '대응',
      notSupported: '비대응',
    },
    ja: {
      infoTitle: 'Infomation',
      purchaseTitle: '購入情報',
      requiredCapacity: '必要な容量',
      playMode: 'プレイモード',
      playUser: 'プレイ人数',
      localPlayUser: 'ローカル通信',
      onlinePlayUser: 'インターネット通信',
      compatibleController: '対応コントローラー',
      onlineDataSave: 'セーブデータお預かり',
      maker: 'メーカー',
      language: '対応言語',
      cero: 'CERO',
      iarc: 'IARC',
      releaseDate: '配信日',
      purchaseDate: '購入日',
      store: '購入先',
      price: '購入価格',
      orderNumber: '注文番号',
      extension: '追加コンテンツ',
      none: 'なし',
      supported: '対応',
      notSupported: '非対応',
    },
  };

  const currentTexts = texts[language];

  // 기본 정보 설정
  document.getElementById('gameImage').src = window.innerWidth < 640 ? game.thumbnail : game.image;
  document.getElementById('gameTitle').textContent =
    language === 'ko' ? game.koTitle || game.title : game.title;
  document.getElementById('gameTags').textContent = game.tags;
  document.getElementById('infoTitle').textContent = currentTexts.infoTitle;
  document.getElementById('purchaseTitle').textContent = currentTexts.purchaseTitle;
  document.getElementById('purchaseGameTitle').textContent =
    language === 'ko' ? game.koTitle || game.title : game.title;

  // 게임 상태 설정
  const statusClass = {
    package: 'bg-green-100 text-green-800',
    download: 'bg-yellow-100 text-yellow-800',
    expansion: 'bg-blue-100 text-blue-800',
  }[game.status];
  document.getElementById(
    'gameStatus',
  ).className = `inline-flex rounded-full px-2 text-xs font-semibold leading-5 ${statusClass}`;
  document.getElementById('gameStatus').textContent = game.status;

  // 국가 설정
  const countryClass =
    game.country === 'JPN'
      ? 'text-red-600 hover:text-red-900'
      : 'text-indigo-600 hover:text-indigo-900';
  document.getElementById('gameCountry').className = `text-center ${countryClass}`;
  document.getElementById('gameCountry').textContent =
    language === 'ko'
      ? game.country === 'JPN'
        ? '일본판'
        : '한국판'
      : game.country === 'JPN'
      ? '日本版'
      : '韓国版';

  // 게임 정보 설정
  const gameInfo = document.getElementById('gameInfo');
  const infoItems = [
    { key: 'requiredCapacity', label: currentTexts.requiredCapacity },
    { key: 'playMode', label: currentTexts.playMode },
    { key: 'playUser', label: currentTexts.playUser },
    { key: 'compatibleController', label: currentTexts.compatibleController },
    { key: 'onlineDataSave', label: currentTexts.onlineDataSave },
    { key: 'maker', label: currentTexts.maker },
    { key: 'language', label: currentTexts.language },
    { key: 'cero', label: currentTexts.cero },
    { key: 'iarc', label: currentTexts.iarc },
    { key: 'releaseDate', label: currentTexts.releaseDate },
  ];

  infoItems.forEach(item => {
    if (game[item.key]) {
      const div = document.createElement('div');
      div.className = 'border-t border-gray-200 pt-4';
      div.innerHTML = `
        <dt class="font-medium text-gray-900">${item.label}</dt>
        <dd class="mt-2 text-sm text-gray-500">${game[item.key]}</dd>
      `;
      gameInfo.appendChild(div);
    }
  });

  // 구매 정보 설정
  const purchaseInfo = document.getElementById('purchaseInfo');
  if (game.purchaseInformation) {
    const purchaseItems = [
      { key: 'date', label: currentTexts.purchaseDate },
      { key: 'store', label: currentTexts.store },
      { key: 'price', label: currentTexts.price },
      { key: 'orderNumber', label: currentTexts.orderNumber },
    ];

    const dl = document.createElement('dl');
    dl.className = 'grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2';

    purchaseItems.forEach(item => {
      if (game.purchaseInformation[item.key]) {
        const div = document.createElement('div');
        div.className = 'sm:col-span-1';
        div.innerHTML = `
          <dt class="text-sm font-medium text-gray-500">${item.label}</dt>
          <dd class="mt-1 text-sm text-gray-900">${game.purchaseInformation[item.key]}</dd>
        `;
        dl.appendChild(div);
      }
    });

    if (game.extension) {
      const div = document.createElement('div');
      div.className = 'sm:col-span-2';
      div.innerHTML = `
        <dt class="text-sm font-medium text-gray-500">${currentTexts.extension}</dt>
        <dd class="mt-1 text-sm text-gray-900">
          ${game.extension.map(ext => `<div>${ext}</div>`).join('')}
        </dd>
      `;
      dl.appendChild(div);
    }

    purchaseInfo.appendChild(dl);
  }
});