Achievements

This commit is contained in:
2026-10-21 13:19:43 -04:00
parent f9afa8ccbe
commit a9f578571c
6 changed files with 260 additions and 3 deletions
+37
View File
@@ -289,6 +289,42 @@ function tick() {
requestAnimationFrame(tick);
}
function renderAchievements(achievements) {
const list = $("my-achievements");
const signature = JSON.stringify(achievements);
if (list.dataset.achievements === signature) return;
list.dataset.achievements = signature;
$("my-achievement-count").textContent = `${achievements.filter((a) => a.unlocked).length} / ${achievements.length} unlocked`;
list.replaceChildren(...achievements.map((achievement) => {
const item = el("li", undefined, `achievement-card${achievement.unlocked ? " is-unlocked" : ""}`);
const icon = el("span", achievement.unlocked ? "\u2713" : "\u25c7", "achievement-icon");
icon.setAttribute("aria-hidden", "true");
const content = el("div", undefined, "achievement-content");
const heading = el("div", undefined, "achievement-title");
heading.append(el("h4", achievement.name), el("span", achievement.unlocked ? "Unlocked" : "Locked", "achievement-state"));
content.append(heading, el("p", achievement.description));
let progressText = "One well-timed press unlocks this badge.";
if (achievement.id === "full_spectrum") {
progressText = `${achievement.progress} / ${achievement.target} zones visited`;
} else if (achievement.id === "keeping_us_alive") {
progressText = `Longest quiet stretch before your press: ${formatPrecise(achievement.progress)} / ${formatPrecise(achievement.target)} needed`;
}
if (achievement.unlocked) {
progressText = `Unlocked ${new Date(achievement.unlocked_at).toLocaleString()}`;
}
content.append(el("small", progressText));
if (["full_spectrum", "keeping_us_alive"].includes(achievement.id) && !achievement.unlocked) {
const progress = el("progress");
progress.max = achievement.target;
progress.value = achievement.progress;
progress.setAttribute("aria-label", `${achievement.name} progress`);
content.append(progress);
}
item.append(icon, content);
return item;
}));
}
async function loadMe() {
if (!token) return;
try {
@@ -296,6 +332,7 @@ async function loadMe() {
$("my-name").textContent = me.name;
$("my-points").textContent = me.total_points.toLocaleString();
$("my-presses").textContent = me.press_count;
renderAchievements(me.achievements);
const closest = me.personal_bests.closest_call;
const best = me.personal_bests.highest_scoring_press;
$("my-closest-call").textContent = closest ? formatPrecise(closest.remaining_ms) : "--";