109 lines
2.8 KiB
JavaScript
109 lines
2.8 KiB
JavaScript
const leaderboardFile = "leaderboard.json";
|
|
|
|
// 🔹 Buka popup leaderboard
|
|
function openLeaderboard() {
|
|
document.getElementById("leaderboardPopup").style.display = "flex";
|
|
loadLeaderboard();
|
|
}
|
|
|
|
// 🔹 Tutup popup leaderboard
|
|
function closeLeaderboard() {
|
|
document.getElementById("leaderboardPopup").style.display = "none";
|
|
}
|
|
|
|
|
|
// 🔹 Muat leaderboard dari JSON
|
|
async function loadLeaderboard() {
|
|
const difficulty = localStorage.getItem("difficulty") || "easy";
|
|
|
|
try {
|
|
const res = await fetch(leaderboardFile + "?v=" + Date.now());
|
|
const data = await res.json();
|
|
|
|
// Ambil list sesuai difficulty
|
|
let list = data[difficulty] || [];
|
|
|
|
// Urutkan score dari paling tinggi
|
|
list.sort((a, b) => b.score - a.score);
|
|
|
|
const tbody = document.getElementById("leaderboard-body");
|
|
tbody.innerHTML = "";
|
|
|
|
newOrder.length = 0;
|
|
list.forEach((p, i) => {
|
|
newOrder.push(p.name);
|
|
|
|
let movementClass = "";
|
|
if (previousOrder.length > 0) {
|
|
const oldIndex = previousOrder.indexOf(p.name);
|
|
if (oldIndex !== -1) {
|
|
if (oldIndex > i) movementClass = "rank-up";
|
|
if (oldIndex < i) movementClass = "rank-down";
|
|
}
|
|
}
|
|
|
|
tbody.innerHTML += `
|
|
<tr class="${movementClass}">
|
|
<td class="rank">#${i + 1}</td>
|
|
<td>${p.name}</td>
|
|
<td>${p.score}</td>
|
|
</tr>`;
|
|
});
|
|
|
|
highlightTab(difficulty);
|
|
|
|
// Simpan posisi lama → jadi perbandingan load berikutnya
|
|
localStorage.setItem("prev_ranking", JSON.stringify(newOrder));
|
|
|
|
} catch (error) {
|
|
document.getElementById("leaderboard-body").innerHTML =
|
|
`<tr><td colspan="3">⚠ Gagal memuat leaderboard</td></tr>`;
|
|
}
|
|
}
|
|
|
|
|
|
// 🔹 Menyimpan skor ke leaderboard.json
|
|
async function saveScore(name, score, difficulty) {
|
|
const res = await fetch(leaderboardFile);
|
|
let data = await res.json();
|
|
let board = data[difficulty];
|
|
|
|
const player = board.find(e => e.name.toLowerCase() === name.toLowerCase());
|
|
|
|
if (player) {
|
|
if (score > player.score) player.score = score;
|
|
} else {
|
|
board.push({ name, score });
|
|
}
|
|
|
|
await fetch(leaderboardFile, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data, null, 2),
|
|
});
|
|
}
|
|
|
|
|
|
const difficulty = localStorage.getItem("difficulty") || "easy";
|
|
localStorage.setItem("playerName", username);
|
|
|
|
let previousOrder = JSON.parse(localStorage.getItem("prev_ranking") || "[]");
|
|
let newOrder = [];
|
|
|
|
function highlightTab(diff) {
|
|
document.querySelectorAll(".difficulty-tabs button").forEach(btn => btn.classList.remove("active"));
|
|
document.getElementById("tab-" + diff).classList.add("active");
|
|
}
|
|
|
|
function changeDifficulty(diff) {
|
|
localStorage.setItem("difficulty", diff);
|
|
previousOrder = JSON.parse(localStorage.getItem("prev_ranking")) || [];
|
|
loadLeaderboard();
|
|
highlightTab(diff);
|
|
}
|
|
|
|
|
|
|
|
|
|
|