2526-web/Kelompok02-Memory-Card
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

leaderboard done, connecting with the games

Browse Source
This commit is contained in:
Nathan 2025-12-18 21:43:48 +07:00
parent 71f7fd7730
commit 3a3575f79f
4 changed files with 346 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
Leaderboard.html
View File

@ -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
View 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>

258
assets/leaderboard.css
View File

@ -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);
.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; }

4
assets/mainboard.js
View File

@ -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";
});