73 lines
2.1 KiB
JavaScript
73 lines
2.1 KiB
JavaScript
// results.js - results page logic
|
|
|
|
import { getGrade } from "./scoring.js";
|
|
import { getGameState, getPlayerName } from "./storage.js";
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const state = getGameState();
|
|
const name = getPlayerName();
|
|
|
|
document.getElementById("results-player").textContent = name;
|
|
|
|
if (!state) {
|
|
document.getElementById("results-title").textContent = "No game found.";
|
|
document.getElementById("total-score").textContent = "—";
|
|
return;
|
|
}
|
|
|
|
const { scores, totalScore, countries } = state;
|
|
|
|
const avg = totalScore / 3;
|
|
let emoji = "🌍";
|
|
let title = "Not bad!";
|
|
if (avg >= 85) {
|
|
emoji = "🔥";
|
|
title = "Incredible!";
|
|
} else if (avg >= 70) {
|
|
emoji = "🎉";
|
|
title = "Well done!";
|
|
} else if (avg >= 50) {
|
|
emoji = "👏";
|
|
title = "Good effort!";
|
|
} else {
|
|
emoji = "😅";
|
|
title = "Keep practising!";
|
|
}
|
|
|
|
document.getElementById("results-emoji").textContent = emoji;
|
|
document.getElementById("results-title").textContent = title;
|
|
document.getElementById("total-score").textContent = totalScore;
|
|
|
|
const grade = getGrade(avg);
|
|
const gradeEl = document.getElementById("total-grade");
|
|
gradeEl.textContent = `Grade ${grade.label}`;
|
|
|
|
const rowsContainer = document.getElementById("round-rows");
|
|
(scores || []).forEach((score, index) => {
|
|
const row = document.createElement("div");
|
|
row.className = "round-row";
|
|
row.innerHTML = `
|
|
<span class="round-row__label">Round ${index + 1}</span>
|
|
<div class="round-row__bar-wrap">
|
|
<div class="round-row__bar" style="width:0%" data-target="${score}"></div>
|
|
</div>
|
|
<span class="round-row__score">${score}%</span>
|
|
`;
|
|
rowsContainer.appendChild(row);
|
|
});
|
|
|
|
requestAnimationFrame(() => {
|
|
document.querySelectorAll(".round-row__bar").forEach((bar) => {
|
|
bar.style.width = `${bar.dataset.target}%`;
|
|
});
|
|
});
|
|
|
|
const tagsContainer = document.getElementById("countries-row");
|
|
(countries || []).forEach((country) => {
|
|
const tag = document.createElement("span");
|
|
tag.className = "country-tag";
|
|
tag.textContent = country;
|
|
tagsContainer.appendChild(tag);
|
|
});
|
|
});
|