leaderboard done, connecting with the games
This commit is contained in:
parent
71f7fd7730
commit
3a3575f79f
@ -1,48 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="id">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Leaderboard</title>
|
|
||||||
<link rel="stylesheet" href="assets/leaderboard.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="topbar">
|
|
||||||
<button class="back-btn" onclick="window.location.href='mainboard.html'">← Kembali</button>
|
|
||||||
<button class="logout-btn">Logout</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1 class="title">🏆 Leaderboard</h1>
|
|
||||||
<p class="subtitle"> Top skor dari semua pemain</p>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="filter-container">
|
|
||||||
<span>Filter:</span>
|
|
||||||
<button class="filter-btn active">Semua</button>
|
|
||||||
<button class="filter-btn easy">Easy</button>
|
|
||||||
<button class="filter-btn medium">Medium</button>
|
|
||||||
<button class="filter-btn hard">Hard</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cards">
|
|
||||||
<div class="card">
|
|
||||||
🎮
|
|
||||||
<p><div class="count"><span>Total Game Dimainkan</span></p>
|
|
||||||
<span id="game-count">0</span></div></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
👑
|
|
||||||
<p><div class="count"><span>Top Player</span></p>
|
|
||||||
<span id="player-rank">0</span></div></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
⭐
|
|
||||||
<p><div class="count"><span>Skor Tertinggi</span></p>
|
|
||||||
<span id="baseScoreEnd">0</span></div></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="assets/leaderboard.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
151
Leaderboard.php
Normal file
151
Leaderboard.php
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
include 'config.php';
|
||||||
|
|
||||||
|
// 1. Logika Filter
|
||||||
|
$filter = isset($_GET['filter']) ? $_GET['filter'] : 'Semua';
|
||||||
|
$whereClause = "";
|
||||||
|
|
||||||
|
if ($filter !== 'Semua') {
|
||||||
|
$safeFilter = $conn->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;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="id">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Leaderboard Premium</title>
|
||||||
|
<link rel="stylesheet" href="assets/leaderboard.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="topbar">
|
||||||
|
<button class="back-btn" onclick="window.location.href='mainboard.php'">← Kembali</button>
|
||||||
|
<div class="profile-display">
|
||||||
|
<span class="profile-name"><?php echo htmlspecialchars($currentName); ?></span>
|
||||||
|
<a href="logout.php" class="logout-btn">Logout</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="title">🏆 Leaderboard</h1>
|
||||||
|
<p class="subtitle">Top skor dari semua pemain</p>
|
||||||
|
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card">
|
||||||
|
<div class="icon-stat">🎮</div>
|
||||||
|
<div class="count-label">Total Game</div>
|
||||||
|
<div class="count-val"><?php echo $totalGames; ?></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="icon-stat">👑</div>
|
||||||
|
<div class="count-label">Top Player</div>
|
||||||
|
<div class="count-val"><?php echo htmlspecialchars($topPlayer); ?></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="icon-stat">⭐</div>
|
||||||
|
<div class="count-label">Skor Tertinggi</div>
|
||||||
|
<div class="count-val"><?php echo $highScore; ?></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="leaderboard-wrapper">
|
||||||
|
|
||||||
|
<div class="filter-container">
|
||||||
|
<span>Filter:</span>
|
||||||
|
<a href="?filter=Semua" class="filter-btn <?php echo ($filter == 'Semua') ? 'active' : ''; ?>">Semua</a>
|
||||||
|
<a href="?filter=Easy" class="filter-btn <?php echo ($filter == 'Easy') ? 'active' : ''; ?>">Easy</a>
|
||||||
|
<a href="?filter=Medium" class="filter-btn <?php echo ($filter == 'Medium') ? 'active' : ''; ?>">Medium</a>
|
||||||
|
<a href="?filter=Hard" class="filter-btn <?php echo ($filter == 'Hard') ? 'active' : ''; ?>">Hard</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-header">
|
||||||
|
<div class="col-rank">Rank</div>
|
||||||
|
<div class="col-player">Pemain</div>
|
||||||
|
<div class="col-stage">Mode</div>
|
||||||
|
<div class="col-score">Skor</div>
|
||||||
|
<div class="col-date">Tanggal</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ranking-list">
|
||||||
|
<?php
|
||||||
|
if ($result->num_rows > 0):
|
||||||
|
$rank = 1;
|
||||||
|
while($row = $result->fetch_assoc()):
|
||||||
|
// Logika Icon Juara
|
||||||
|
$rankDisplay = $rank;
|
||||||
|
if($rank == 1) $rankDisplay = '<i class="fas fa-crown text-gold"></i>';
|
||||||
|
elseif($rank == 2) $rankDisplay = '<i class="fas fa-medal text-silver"></i>';
|
||||||
|
elseif($rank == 3) $rankDisplay = '<i class="fas fa-medal text-bronze"></i>';
|
||||||
|
|
||||||
|
$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']));
|
||||||
|
?>
|
||||||
|
<div class="rank-card <?php echo $isMe ? 'highlight-me' : ''; ?>">
|
||||||
|
<div class="col-rank rank-num"><?php echo $rankDisplay; ?></div>
|
||||||
|
|
||||||
|
<div class="col-player flex-align">
|
||||||
|
<div class="avatar-circle"><?php echo $initial; ?></div>
|
||||||
|
<div class="player-info">
|
||||||
|
<span class="p-name"><?php echo htmlspecialchars($rowUsername); ?></span>
|
||||||
|
<?php if($isMe): ?><span class="badge-me">Anda</span><?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-stage">
|
||||||
|
<span class="tag <?php echo strtolower($row['difficulty']); ?>">
|
||||||
|
<?php echo $row['difficulty']; ?>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-score"><?php echo $row['score']; ?></div>
|
||||||
|
<div class="col-date"><?php echo $dateDisplay; ?></div>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
$rank++;
|
||||||
|
endwhile;
|
||||||
|
else:
|
||||||
|
?>
|
||||||
|
<div style="text-align:center; padding: 20px; color: #555;">Belum ada data skor.</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,114 +1,242 @@
|
|||||||
|
/* --- 1. GLOBAL STYLE --- */
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
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);
|
background: linear-gradient(135deg, #c42ddf, #fe8bb4);
|
||||||
|
min-height: 100vh;
|
||||||
color: white;
|
color: white;
|
||||||
|
padding-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- 2. TOPBAR & PROFILE --- */
|
||||||
.topbar {
|
.topbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 15px;
|
padding: 20px 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-btn, .logout-btn {
|
.back-btn, .logout-btn {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 8px 15px;
|
color: #c42ddf;
|
||||||
|
padding: 10px 20px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
border: none;
|
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;
|
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 {
|
.title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 32px;
|
font-size: 3rem;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
font-weight: 800;
|
||||||
|
text-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: -10px;
|
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 {
|
.filter-container {
|
||||||
margin: 20px;
|
margin-bottom: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-btn {
|
.filter-btn {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
background: rgba(255,255,255,0.3);
|
background: rgba(255,255,255,0.3);
|
||||||
border: none;
|
|
||||||
padding: 8px 20px;
|
padding: 8px 20px;
|
||||||
border-radius: 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;
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-btn.active {
|
.player-info {
|
||||||
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;
|
display: flex;
|
||||||
justify-content: space-around;
|
flex-direction: column;
|
||||||
margin: 40px 20px;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.p-name { font-weight: bold; }
|
||||||
width: 28%;
|
|
||||||
padding: 20px;
|
.badge-me {
|
||||||
background: rgba(255,255,255,0.25);
|
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;
|
text-align: center;
|
||||||
border-radius: 15px;
|
display: inline-block;
|
||||||
|
min-width: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card h2 {
|
.tag.easy { background: #7ddf8c; } /* Hijau */
|
||||||
color: rgb(255, 0, 0);
|
.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; }
|
||||||
@ -30,7 +30,5 @@ document.getElementById("logoutBtn").addEventListener("click", () => {
|
|||||||
|
|
||||||
// LEADERBOARD (Cukup ditulis satu kali saja)
|
// LEADERBOARD (Cukup ditulis satu kali saja)
|
||||||
document.getElementById("leaderboardBtn").addEventListener("click", () => {
|
document.getElementById("leaderboardBtn").addEventListener("click", () => {
|
||||||
// Pastikan file aslinya bernama Leaderboard.html
|
window.location.href = "Leaderboard.php";
|
||||||
// Kalau sudah diubah jadi PHP, ganti jadi "Leaderboard.php"
|
|
||||||
window.location.href = "Leaderboard.html";
|
|
||||||
});
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user