From a7f94335e1a0c6cad52cc38c3304c441a4ad5fda Mon Sep 17 00:00:00 2001 From: Hijau-dev Date: Tue, 16 Dec 2025 12:00:30 +0700 Subject: [PATCH] Update --- Main.html | 37 +++++++++++++++-- Script.js | 59 ++++++++++++++++++++++++++- Style.css | 118 ++++++++++++++++++++++++++++++++---------------------- 3 files changed, 162 insertions(+), 52 deletions(-) diff --git a/Main.html b/Main.html index d232a82..795aac7 100644 --- a/Main.html +++ b/Main.html @@ -10,7 +10,6 @@ - - - + + diff --git a/Script.js b/Script.js index 908eebe..277c5b3 100644 --- a/Script.js +++ b/Script.js @@ -1954,4 +1954,61 @@ function returnToMenu() { } console.log('Menu System Loaded'); -console.log('Settings:', gameSettings); \ No newline at end of file +console.log('Settings:', gameSettings); + +// === LEADERBOARD LOGIC === +const leaderboardMenu = document.getElementById('leaderboardMenu'); +const leaderboardBtn = document.getElementById('leaderboardBtn'); +const lbBackBtn = document.getElementById('lbBackBtn'); +const leaderboardList = document.getElementById('leaderboardList'); + +// Buka Menu Leaderboard +leaderboardBtn.addEventListener('click', () => { + playSound(menuClickSound); // Pastikan fungsi playSound ada + mainMenu.style.display = 'none'; + leaderboardMenu.style.display = 'flex'; + fetchLeaderboard(); +}); + +// Tutup Menu Leaderboard +lbBackBtn.addEventListener('click', () => { + playSound(menuClickSound); + leaderboardMenu.style.display = 'none'; + mainMenu.style.display = 'flex'; +}); + +// Fungsi Ambil Data dari PHP +async function fetchLeaderboard() { + leaderboardList.innerHTML = 'Scanning Database...'; + + try { + const response = await fetch('leaderboard.php'); + const result = await response.json(); + + if (result.success && result.data.length > 0) { + leaderboardList.innerHTML = ''; // Hapus loading + + result.data.forEach(player => { + let rowClass = ''; + if (player.rank === 1) rowClass = 'rank-1'; + else if (player.rank === 2) rowClass = 'rank-2'; + else if (player.rank === 3) rowClass = 'rank-3'; + + const row = ` + + #${player.rank} + ${player.username} + LVL ${player.level} + ${player.score.toLocaleString()} + + `; + leaderboardList.innerHTML += row; + }); + } else { + leaderboardList.innerHTML = 'No Records Found'; + } + } catch (error) { + console.error('Leaderboard error:', error); + leaderboardList.innerHTML = 'Connection Error'; + } +} \ No newline at end of file diff --git a/Style.css b/Style.css index 2375fa6..bb2e205 100644 --- a/Style.css +++ b/Style.css @@ -7,7 +7,7 @@ body { margin: 0; padding: 0; - background-color: #000; + background-color: #000; font-family: 'Orbitron', sans-serif; } @@ -16,8 +16,9 @@ html, body { overflow: hidden; } -/* === MAIN MENU & OPTIONS MENU === */ -#mainMenu, #optionsMenu { +/* === MAIN MENU, OPTIONS, & LEADERBOARD MENU === */ +/* Saya menambahkan #leaderboardMenu disini agar posisinya sama */ +#mainMenu, #optionsMenu, #leaderboardMenu { position: absolute; width: 100vw; height: 100vh; @@ -38,7 +39,7 @@ html, body { to { opacity: 1; } } -/* === STARS CONTAINER (hidden by default, no animation) === */ +/* === STARS CONTAINER (hidden by default) === */ .stars-container { display: none; } @@ -262,28 +263,6 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); } -input[type="range"]::-moz-range-thumb { - width: 24px; - height: 24px; - background: linear-gradient(145deg, #00eaff, #00bcd4); - border-radius: 50%; - cursor: pointer; - border: 2px solid #ffffff; - box-shadow: - 0 0 10px rgba(0, 234, 255, 0.8), - 0 2px 4px rgba(0, 0, 0, 0.5); -} - -/* === SLIDER VALUE TEXT === */ -.slider-container span { - color: #ffffff; - font-size: 18px; - font-weight: 700; - min-width: 60px; - text-align: right; - text-shadow: 0 0 8px rgba(0, 234, 255, 0.6); -} - /* === BUTTON GROUP === */ .button-group { display: flex; @@ -353,6 +332,65 @@ input[type="range"]::-moz-range-thumb { inset 0 0 20px rgba(0, 234, 255, 0.3); } +/* === LEADERBOARD STYLES (NEW) === */ +.leaderboard-container { + background: rgba(0, 0, 0, 0.7); + border: 2px solid rgba(0, 234, 255, 0.4); + border-radius: 15px; + padding: 20px; + margin-bottom: 30px; + width: 90%; + max-width: 800px; + max-height: 450px; + overflow-y: auto; + backdrop-filter: blur(10px); + box-shadow: 0 0 30px rgba(0, 234, 255, 0.15); +} + +.leaderboard-table { + width: 100%; + border-collapse: collapse; + color: #fff; + font-family: 'Orbitron', sans-serif; +} + +.leaderboard-table th { + background: rgba(0, 234, 255, 0.1); + color: #00eaff; + font-size: 18px; + padding: 15px; + text-align: center; + border-bottom: 2px solid #00eaff; + letter-spacing: 2px; + text-shadow: 0 0 10px rgba(0, 234, 255, 0.5); + position: sticky; + top: 0; + backdrop-filter: blur(5px); +} + +.leaderboard-table td { + padding: 15px; + text-align: center; + font-size: 16px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + letter-spacing: 1px; +} + +.leaderboard-table tr:hover td { + background: rgba(255, 255, 255, 0.05); + color: #fff; +} + +/* Leaderboard Rank Colors */ +.rank-1 td { color: #ffd700; text-shadow: 0 0 10px #ffd700; font-weight: 900; font-size: 20px; } +.rank-2 td { color: #c0c0c0; text-shadow: 0 0 10px #c0c0c0; font-weight: 700; } +.rank-3 td { color: #cd7f32; text-shadow: 0 0 10px #cd7f32; font-weight: 700; } + +/* Custom Scrollbar for Leaderboard */ +.leaderboard-container::-webkit-scrollbar { width: 8px; } +.leaderboard-container::-webkit-scrollbar-thumb { background: #00eaff; border-radius: 4px; } +.leaderboard-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.5); } + /* === GAME CONTAINER === */ #gameContainer { width: 100vw; @@ -370,26 +408,12 @@ input[type="range"]::-moz-range-thumb { /* === RESPONSIVE === */ @media (max-width: 768px) { - .title-word { - font-size: 60px; - } + .title-word { font-size: 60px; } + .menu-btn { font-size: 20px; padding: 12px 40px; min-width: 280px; } + .options-container { min-width: 90vw; padding: 30px; } + .options-title { font-size: 50px; } + .footer-info p { font-size: 12px; } - .menu-btn { - font-size: 20px; - padding: 12px 40px; - min-width: 280px; - } - - .options-container { - min-width: 90vw; - padding: 30px; - } - - .options-title { - font-size: 50px; - } - - .footer-info p { - font-size: 12px; - } + /* Responsive Leaderboard */ + .leaderboard-table th, .leaderboard-table td { font-size: 14px; padding: 10px; } } \ No newline at end of file