From 3a3575f79fb818440d348b92491a904c123ab0c4 Mon Sep 17 00:00:00 2001 From: Nathan Date: Thu, 18 Dec 2025 21:43:48 +0700 Subject: [PATCH] leaderboard done, connecting with the games --- Leaderboard.html | 48 -------- Leaderboard.php | 151 ++++++++++++++++++++++++ assets/leaderboard.css | 260 ++++++++++++++++++++++++++++++----------- assets/mainboard.js | 4 +- 4 files changed, 346 insertions(+), 117 deletions(-) delete mode 100644 Leaderboard.html create mode 100644 Leaderboard.php diff --git a/Leaderboard.html b/Leaderboard.html deleted file mode 100644 index d7b570c..0000000 --- a/Leaderboard.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - Leaderboard - - - - -
- - -
- -

🏆 Leaderboard

-

Top skor dari semua pemain

- - -
- Filter: - - - - -
- -
-
- 🎮 -

Total Game Dimainkan

- 0

-
- -
- 👑 -

Top Player

- 0

-
- -
- ⭐ -

Skor Tertinggi

- 0

-
-
- - - diff --git a/Leaderboard.php b/Leaderboard.php new file mode 100644 index 0000000..3f561e1 --- /dev/null +++ b/Leaderboard.php @@ -0,0 +1,151 @@ +real_escape_string($filter); + $whereClause = "WHERE scores.difficulty = '$safeFilter'"; +} + +// 2. Query Database (SUDAH DIPERBAIKI) +// Menggunakan 'played_at' sesuai gambar database kamu +$sql = "SELECT users.username, scores.score, scores.difficulty, scores.played_at + FROM scores + JOIN users ON scores.user_id = users.id + $whereClause + ORDER BY scores.score DESC + LIMIT 50"; + +$result = $conn->query($sql); + +// Cek error jika masih ada (tapi harusnya sudah aman) +if (!$result) { + die("Query Error: " . $conn->error); +} + +// 3. Statistik Atas +$totalGames = $conn->query("SELECT COUNT(*) as total FROM scores")->fetch_assoc()['total']; +$highScore = $conn->query("SELECT MAX(score) as max_score FROM scores")->fetch_assoc()['max_score'] ?? 0; +$topPlayer = $conn->query("SELECT users.username FROM scores JOIN users ON scores.user_id = users.id ORDER BY score DESC LIMIT 1")->fetch_assoc()['username'] ?? '-'; + +// Cek user yang login +$currentUser = $_SESSION['user'] ?? ''; +if (is_array($currentUser)) { + $currentName = $currentUser['username']; +} else { + $currentName = $currentUser; +} +?> + + + + + + + Leaderboard Premium + + + + + +
+ +
+ + Logout +
+
+ +

🏆 Leaderboard

+

Top skor dari semua pemain

+ +
+
+
🎮
+
Total Game
+
+
+
+
👑
+
Top Player
+
+
+
+
⭐
+
Skor Tertinggi
+
+
+
+ +
+ +
+ Filter: + Semua + Easy + Medium + Hard +
+ +
+
Rank
+
Pemain
+
Mode
+
Skor
+
Tanggal
+
+ +
+ num_rows > 0): + $rank = 1; + while($row = $result->fetch_assoc()): + // Logika Icon Juara + $rankDisplay = $rank; + if($rank == 1) $rankDisplay = ''; + elseif($rank == 2) $rankDisplay = ''; + elseif($rank == 3) $rankDisplay = ''; + + $rowUsername = $row['username']; + $isMe = ($rowUsername === $currentName); + $initial = strtoupper(substr($rowUsername, 0, 1)); + + // Format Tanggal (Dari played_at) + $dateDisplay = date('d M H:i', strtotime($row['played_at'])); + ?> +
+
+ +
+
+
+ + Anda +
+
+ +
+ + + +
+ +
+
+
+ +
Belum ada data skor.
+ +
+
+ + + \ No newline at end of file diff --git a/assets/leaderboard.css b/assets/leaderboard.css index 0dc0914..1371258 100644 --- a/assets/leaderboard.css +++ b/assets/leaderboard.css @@ -1,114 +1,242 @@ +/* --- 1. GLOBAL STYLE --- */ body { margin: 0; - font-family: Arial, sans-serif; + padding: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + /* Background Gradient Pink-Ungu punya kamu */ background: linear-gradient(135deg, #c42ddf, #fe8bb4); + min-height: 100vh; color: white; + padding-bottom: 50px; } +/* --- 2. TOPBAR & PROFILE --- */ .topbar { display: flex; justify-content: space-between; align-items: center; - padding: 15px; + padding: 20px 40px; } .back-btn, .logout-btn { background: white; - padding: 8px 15px; + color: #c42ddf; + padding: 10px 20px; 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; + cursor: pointer; + text-decoration: none; + transition: transform 0.2s; } +.back-btn:hover, .logout-btn:hover { + transform: scale(1.05); + background: #fff0f5; +} + +.profile-display { + display: flex; + align-items: center; + gap: 15px; +} + +.profile-name { + font-weight: bold; + font-size: 1.1rem; + text-shadow: 0 2px 4px rgba(0,0,0,0.2); +} + +/* --- 3. JUDUL --- */ .title { text-align: center; - font-size: 32px; + font-size: 3rem; margin-top: 10px; + font-weight: 800; + text-shadow: 0 4px 10px rgba(0,0,0,0.2); } + .subtitle { text-align: center; margin-top: -10px; + margin-bottom: 30px; + font-size: 1rem; + opacity: 0.9; +} + +/* --- 4. KARTU STATISTIK (3 KOTAK DI ATAS) --- */ +.cards { + display: flex; + justify-content: center; + gap: 20px; + margin-bottom: 40px; + padding: 0 20px; +} + +.card { + background: rgba(255, 255, 255, 0.25); + backdrop-filter: blur(5px); /* Efek kaca buram */ + padding: 20px; + border-radius: 20px; + width: 250px; + text-align: center; + border: 1px solid rgba(255,255,255,0.4); + box-shadow: 0 4px 15px rgba(0,0,0,0.1); +} + +.icon-stat { font-size: 2rem; margin-bottom: 5px; } +.count-label { font-size: 0.9rem; } +.count-val { font-size: 1.5rem; font-weight: bold; margin-top: 5px; } + +/* --- 5. WRAPPER & FILTER --- */ +.leaderboard-wrapper { + max-width: 900px; + margin: 0 auto; + padding: 0 20px; } .filter-container { - margin: 20px; + margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .filter-btn { + text-decoration: none; + color: white; background: rgba(255,255,255,0.3); - border: none; padding: 8px 20px; border-radius: 20px; - cursor: pointer; + font-size: 0.9rem; + font-weight: bold; + transition: 0.3s; +} + +.filter-btn:hover, .filter-btn.active { + background: white; + color: #c42ddf; /* Warna teks jadi ungu saat aktif */ +} + +/* --- 6. TABEL LIST (INI YANG PENTING DIPERBAIKI) --- */ +/* Grid System: Rank | Player | Mode | Score | Date */ +.table-header, .rank-card { + display: grid; + /* Kolom diatur: Kecil, Lebar, Sedang, Sedang, Sedang */ + grid-template-columns: 0.6fr 2.5fr 1fr 1fr 1.2fr; + align-items: center; + padding: 15px 25px; +} + +.table-header { + background: rgba(0, 0, 0, 0.2); + font-weight: bold; + border-radius: 15px 15px 0 0; + text-transform: uppercase; + font-size: 0.85rem; + letter-spacing: 1px; +} + +.ranking-list { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 10px; +} + +/* Style Baris Pemain */ +.rank-card { + background: white; + color: #333; /* Teks hitam biar jelas */ + border-radius: 15px; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + transition: transform 0.2s; +} + +.rank-card:hover { + transform: scale(1.02); /* Efek zoom dikit pas hover */ +} + +/* Highlight jika itu user yang login */ +.highlight-me { + border: 3px solid #FFD700; /* Border emas */ + background: #fffdf0; +} + +/* --- 7. ISI KOLOM --- */ +.rank-num { + font-weight: bold; + font-size: 1.2rem; + color: #555; + text-align: center; +} + +/* Flexbox untuk Avatar + Nama */ +.flex-align { + display: flex; + align-items: center; + gap: 12px; +} + +.avatar-circle { + width: 35px; + height: 35px; + background: #c42ddf; color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; 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 { +.player-info { display: flex; - justify-content: space-around; - margin: 40px 20px; + flex-direction: column; + align-items: flex-start; } -.card { - width: 28%; - padding: 20px; - background: rgba(255,255,255,0.25); +.p-name { font-weight: bold; } + +.badge-me { + background: #333; + color: white; + font-size: 0.65rem; + padding: 2px 6px; + border-radius: 4px; + margin-top: 2px; +} + +/* Warna Tag Difficulty */ +.tag { + padding: 5px 10px; + border-radius: 8px; + font-size: 0.8rem; + font-weight: bold; + text-transform: capitalize; + color: #333; /* Text hitam biar kontras */ text-align: center; - border-radius: 15px; + display: inline-block; + min-width: 70px; } -.card h2 { - color: rgb(255, 0, 0); -} \ No newline at end of file +.tag.easy { background: #7ddf8c; } /* Hijau */ +.tag.medium { background: #ffe86a; } /* Kuning */ +.tag.hard { background: #ff6b6b; color: white; } /* Merah */ + +.col-score { + font-weight: bold; + font-size: 1.1rem; + color: #333; +} + +.col-date { + font-size: 0.8rem; + color: #888; + text-align: right; +} + +/* Icon Juara Colors */ +.text-gold { color: gold; } +.text-silver { color: silver; } +.text-bronze { color: #cd7f32; } \ No newline at end of file diff --git a/assets/mainboard.js b/assets/mainboard.js index b62162d..b926d08 100644 --- a/assets/mainboard.js +++ b/assets/mainboard.js @@ -30,7 +30,5 @@ document.getElementById("logoutBtn").addEventListener("click", () => { // 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"; + window.location.href = "Leaderboard.php"; }); \ No newline at end of file