<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ランキング表示</title>
  <style>
    @font-face {
      font-family: 'ShinGoBold';
      src: url('/fonts/tt_ud_shin_go_pro_bold.ttf') format('truetype');
      font-weight: bold;
      font-style: normal;
    }
    * {
      font-family: 'ShinGoBold', sans-serif;
    }
    table {
      border-collapse: collapse;
      width: 80%;
      margin: auto;
    }
    th, td {
      border: 1px solid #aaa;
      padding: 8px 12px;
      text-align: center;
    }
    th {
      background-color: #eee;
    }
  </style>
</head>
<body>
  <h2 style="text-align:center;">攻撃力順ランキング</h2>
  <table id="ranking-table">
    <thead>
      <tr>
        <th>順位</th>
        <th>名前</th>
        <th>スコア</th>
        <th>攻撃力</th>
        <th>転生回数</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script>
    fetch('ranking.json', { cache: 'no-store' })
      .then(res => res.json())
      .then(data => {
        const tbody = document.querySelector('#ranking-table tbody');

        const sortedEntries = Object.entries(data).sort((a, b) => {
          return b[1].base_damage - a[1].base_damage;
        });

        sortedEntries.forEach(([userId, entry], index) => {
          const displayName = entry.nickname && entry.nickname !== "" ? entry.nickname : userId;

          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${index + 1}</td>
            <td>${displayName}</td>
            <td>${Number(entry.score).toLocaleString()}</td>
            <td>${Number(entry.base_damage).toExponential(4)}</td>
            <td>${entry.rebirth_count}</td>
          `;
          tbody.appendChild(tr);
        });
      })
      .catch(err => {
        console.error('読み込み失敗:', err);
      });
  </script>
</body>
</html>