apeti-run/rank.html at dev · diewland/apeti-run · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Apeti Run</title>
    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
    <link rel="manifest" href="./site.webmanifest">
    <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#b91d47">
    <meta name="msapplication-TileColor" content="#ffc40d">
    <meta name="theme-color" content="#ffc40d">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <style>
      .digit8 { font-family: 'Press Start 2P', sans-serif; }
    </style>
  </head>
  <body style='margin-bottom: 40px;'>
    <h4 class='text-center digit8 pt-3'>ApetiRun Ranking</h4>

    <!-- table -->
    <table class="table mb-0">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">ID</th>
          <th scope="col">Score</th>
          <th class='text-end'>
            <a href='./rank.html?q=month'><span class="bdg-month badge rounded-pill">Monthly</span></a>
            <a href='./rank.html?q=all'><span class="bdg-all badge rounded-pill">All-Time</span></a>
          </th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

    <!-- play now -->
    <div class='fixed-bottom m-1'>
      <a class='btn btn-primary digit8 w-100' href='./index.php'>Play Now</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="api.js?v=2"></script>
    <script>

      // config
      const MEDALS = [ '🥇', '🥈', '🥉' ];
      const ROW_BGS = [ '#FFD700DD', '#C0C0C0DD', '#CD7F32DD' ];
      const Q_MONTHLY = 'month';
      const Q_ALL_TIME = 'all';

      // check monthly or all-time
      const params = new Proxy(new URLSearchParams(window.location.search), {
        get: (searchParams, prop) => searchParams.get(prop),
      });
      let q = params.q || Q_MONTHLY;
      if (q == Q_ALL_TIME) {
        $('.bdg-month').addClass('text-bg-light');
        $('.bdg-all').addClass('text-bg-secondary');
      }
      else { // default: monthly
        $('.bdg-month').addClass('text-bg-secondary');
        $('.bdg-all').addClass('text-bg-light');
      }

      // list top 10
      list_top10(resp => {
        let rows = resp.data || [];
        rows.forEach((r, i) => {
          let no = MEDALS[i] || i+1;
          let bg = ROW_BGS[i] || '#FFF';
          let token_id = r.token_id;
          let replay = `<a href='./${token_id}.html'>#${token_id}</a>`;
          let img = `<a target='_blank' href='https://quixotic.io/asset/0x51E5426eDE4e2d4c2586371372313B5782387222/${token_id}'><img class='img' src='./script/h90/${token_id}.png'></a>`;
          let score = `<span class='digit8'>${r.score}</span>`;
          let ts = r.ts ? moment(r.ts * 1_000).fromNow() : '';
          let html = `
            <tr style='background-color: ${bg};'>
              <td>${no}</td>
              <td>${replay}</td>
              <td>${score}<br><sub>${ts}</sub></td>
              <td>${img}</td>
            </tr>
          `;
          $('tbody').append(html);
        });
      }, q);

    </script>
  </body>
</html>