KPSC-Archive/app.js at main · KMUCS-KPSC/KPSC-Archive · 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
import { loadContests } from "./data.js?v=20260418-4";

const contestList = document.querySelector("#contest-list");
const contestCount = document.querySelector("#contest-count");
let contests = [];

function renderContestSummary() {
  contestCount.textContent = String(contests.length);
}

function renderContests() {
  if (!contests.length) {
    contestList.innerHTML = `
      <p class="problem-list-empty">표시할 대회가 아직 없습니다.</p>
    `;
    return;
  }

  contestList.innerHTML = contests
    .map(
      (contest) => `
        <a class="contest-row" href="./contest.html?slug=${encodeURIComponent(
          contest.slug
        )}">
          <div class="contest-row__body">
            <h3 class="contest-row__title">${contest.name}</h3>
            <div class="contest-row__meta-group">
              <div class="contest-row__meta-box">
                <span class="contest-row__meta-label">대회 일시</span>
                <span class="contest-row__meta-value">${contest.displayDateTime}</span>
              </div>
              <div class="contest-row__meta-box">
                <span class="contest-row__meta-label">참가자 수(온사이트/온라인)</span>
                <span class="contest-row__meta-value">${contest.onsiteParticipants}명 / ${contest.onlineParticipants}명</span>
              </div>
              <div class="contest-row__meta-box">
                <span class="contest-row__meta-label">진행 장소</span>
                <span class="contest-row__meta-value">${contest.venue}</span>
              </div>
              <div class="contest-row__meta-box">
                <span class="contest-row__meta-label">진행 시간</span>
                <span class="contest-row__meta-value">${contest.duration}</span>
              </div>
            </div>
          </div>
          <span class="contest-row__arrow" aria-hidden="true">-&gt;</span>
        </a>
      `
    )
    .join("");
}

async function init() {
  try {
    contests = await loadContests();
    renderContestSummary();
    renderContests();
  } catch (error) {
    contestList.innerHTML = `
      <p class="problem-list-empty">대회 정보를 불러오지 못했습니다.</p>
    `;
    console.error(error);
  }
}

init();