Achievements
This commit is contained in:
@@ -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) : "--";
|
||||
|
||||
Reference in New Issue
Block a user