(() => { const mode = document.querySelector('#leaderboard-mode'); const playKind = document.querySelector('#leaderboard-play-kind'); const grade = document.querySelector('#leaderboard-grade'); const gradeWrap = document.querySelector('#leaderboard-grade-wrap'); const rows = document.querySelector('#leaderboard-rows'); const formatTime = seconds => { const safe = Number.isFinite(Number(seconds)) ? Number(seconds) : 0; return String(Math.floor(safe / 60)).padStart(2, '0') + ':' + String(safe % 60).padStart(2, '0'); }; async function load() { gradeWrap.hidden = mode.value !== 'kanji'; const params = new URLSearchParams({ mode: mode.value, playKind: playKind.value }); if (mode.value === 'kanji') params.set('grade', grade.value); rows.innerHTML = 'Loading leaderboard...'; try { const response = await fetch('/api/leaderboard?' + params.toString()); const result = await response.json(); const entries = Array.isArray(result.entries) ? result.entries : []; if (!entries.length) { rows.innerHTML = 'No published results yet.'; return; } rows.replaceChildren(...entries.map((entry, index) => { const tr = document.createElement('tr'); [String(index + 1), entry.display_name, String(entry.score), entry.solved + '/' + entry.total, formatTime(entry.time_seconds)].forEach(value => { const td = document.createElement('td'); td.textContent = value; tr.appendChild(td); }); return tr; })); } catch { rows.innerHTML = 'Unable to load leaderboard.'; } } [mode, playKind, grade].forEach(element => element.addEventListener('change', load)); load(); })();

Leaderboard