From 9af82122b509dd7de470a448d0aa873df9514612 Mon Sep 17 00:00:00 2001 From: Evelyn Date: Tue, 16 Dec 2025 11:03:32 +0700 Subject: [PATCH] leaderboard.js --- Leaderboard.html | 134 +---------------------------------------- assets/leaderboard.css | 114 +++++++++++++++++++++++++++++++++++ assets/leaderboard.js | 8 +++ assets/mainboard.js | 59 +++++++++--------- gameboard-easy.php | 1 + mainboard.php | 2 + 6 files changed, 156 insertions(+), 162 deletions(-) create mode 100644 assets/leaderboard.css create mode 100644 assets/leaderboard.js diff --git a/Leaderboard.html b/Leaderboard.html index 494faa5..d7b570c 100644 --- a/Leaderboard.html +++ b/Leaderboard.html @@ -3,125 +3,7 @@ Leaderboard - - - + @@ -161,18 +43,6 @@ thead { 0

- - - + diff --git a/assets/leaderboard.css b/assets/leaderboard.css new file mode 100644 index 0000000..0dc0914 --- /dev/null +++ b/assets/leaderboard.css @@ -0,0 +1,114 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + background: linear-gradient(135deg, #c42ddf, #fe8bb4); + color: white; +} + +.topbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; +} + +.back-btn, .logout-btn { + background: white; + padding: 8px 15px; + border-radius: 20px; + border: none; +} + +.profile { + display: flex; + align-items: center; + gap: 8px; +} + +.profile-icon { + background: #d05dec; + width: 35px; + height: 35px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; +} + +.title { + text-align: center; + font-size: 32px; + margin-top: 10px; +} +.subtitle { + text-align: center; + margin-top: -10px; +} + +.filter-container { + margin: 20px; + display: flex; + align-items: center; + gap: 10px; +} + +.filter-btn { + background: rgba(255,255,255,0.3); + border: none; + padding: 8px 20px; + border-radius: 20px; + cursor: pointer; + color: white; + font-weight: bold; +} + +.filter-btn.active { + background: white; + color: #000000; +} +le { + width: 95%; + margin: auto; + border-collapse: collapse; + background: rgba(255,255,255,0.15); + border-radius: 10px; + overflow: hidden; +} + +th, td { + padding: 12px; + text-align: center; +} + +thead { + background: rgba(255,255,255,0.2); +} + +.tag { + padding: 4px 10px; + border-radius: 12px; + font-size: 13px; + color: black; +} +.hard { background: #ff6b6b; } +.medium { background: #ffe86a; } +.easy { background: #7ddf8c; } + +.cards { + display: flex; + justify-content: space-around; + margin: 40px 20px; +} + +.card { + width: 28%; + padding: 20px; + background: rgba(255,255,255,0.25); + text-align: center; + border-radius: 15px; +} + +.card h2 { + color: rgb(255, 0, 0); +} \ No newline at end of file diff --git a/assets/leaderboard.js b/assets/leaderboard.js new file mode 100644 index 0000000..c235d2c --- /dev/null +++ b/assets/leaderboard.js @@ -0,0 +1,8 @@ + const buttons = document.querySelectorAll(".filter-btn"); + buttons.forEach(btn => { + btn.addEventListener("click", function () { + buttons.forEach(b => b.classList.remove("active")); + this.classList.add("active"); + }); + }); + diff --git a/assets/mainboard.js b/assets/mainboard.js index 737ab84..b62162d 100644 --- a/assets/mainboard.js +++ b/assets/mainboard.js @@ -1,37 +1,36 @@ // LOGIKA MUSIK - const musicBtn = document.getElementById('musicBtn'); - const bgMusic = document.getElementById('bgMusic'); - let isMusicPlaying = false; +const musicBtn = document.getElementById('musicBtn'); +const bgMusic = document.getElementById('bgMusic'); +let isMusicPlaying = false; - musicBtn.addEventListener('click', () => { - isMusicPlaying ? bgMusic.pause() : bgMusic.play(); - musicBtn.innerText = isMusicPlaying ? '🔇' : '🔊'; - isMusicPlaying = !isMusicPlaying; - }); +musicBtn.addEventListener('click', () => { + isMusicPlaying ? bgMusic.pause() : bgMusic.play(); + musicBtn.innerText = isMusicPlaying ? '🔇' : '🔊'; + isMusicPlaying = !isMusicPlaying; +}); - // NAVIGATION - function selectStage(stage) { - window.location.href = "gameboard-" + stage + ".html"; - } +// NAVIGATION (Ini yang penting, sudah .php) +function selectStage(stage) { + window.location.href = "gameboard-" + stage + ".php"; +} - document.getElementById("leaderboardBtn").addEventListener("click", () => { - window.location.href = "Leaderboard.html"; - }); +// OVERLAY CREDITS +function openCredits() { + document.getElementById('creditsOverlay').style.display = 'flex'; +} - // OVERLAY CREDITS - function openCredits() { - document.getElementById('creditsOverlay').style.display = 'flex'; - } +function closeCredits() { + document.getElementById('creditsOverlay').style.display = 'none'; +} - function closeCredits() { - document.getElementById('creditsOverlay').style.display = 'none'; - } +// LOGOUT +document.getElementById("logoutBtn").addEventListener("click", () => { + window.location.href = "logout.php"; +}); - // Karena JS eksternal mungkin tidak tahu lokasi logout.php, kita bantu disini - document.getElementById("logoutBtn").addEventListener("click", () => { - window.location.href = "logout.php"; - }); - - document.getElementById("leaderboardBtn").addEventListener("click", () => { - window.location.href = "Leaderboard.html"; // Atau Leaderboard.php jika sudah diubah - }); \ No newline at end of file +// LEADERBOARD (Cukup ditulis satu kali saja) +document.getElementById("leaderboardBtn").addEventListener("click", () => { + // Pastikan file aslinya bernama Leaderboard.html + // Kalau sudah diubah jadi PHP, ganti jadi "Leaderboard.php" + window.location.href = "Leaderboard.html"; +}); \ No newline at end of file diff --git a/gameboard-easy.php b/gameboard-easy.php index e41229c..1bb2251 100644 --- a/gameboard-easy.php +++ b/gameboard-easy.php @@ -7,6 +7,7 @@ exit(); } $user = $_SESSION['user']; ?> + diff --git a/mainboard.php b/mainboard.php index 722a939..4fb4076 100644 --- a/mainboard.php +++ b/mainboard.php @@ -60,10 +60,12 @@ $roleIcon = ($roleRaw === 'admin') ? '👑' : '🎮'; 😊

Easy Mode

+ +