2526-web/kelompok06-2048
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Leaderboard

Browse Source
This commit is contained in:
Evelyn Sucitro 2025-12-01 19:09:42 +07:00
parent b07407b579
commit cb758824cd
2 changed files with 162 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
Leaderboard.css
View File

@ -198,7 +198,9 @@ h1::before {
box-shadow: 0 0 15px rgba(0, 234, 255, 0.8); box-shadow: 0 0 15px rgba(0, 234, 255, 0.8);
} }
/* Leaderboard Item */ /* --- LEADERBOARD ITEMS & COLORS (HARMONISASI) --- */
/* Base Item Style */
.leaderboard-item { .leaderboard-item {
display: flex; display: flex;
align-items: center; align-items: center;
@ -206,7 +208,7 @@ h1::before {
padding: 18px 25px; padding: 18px 25px;
border-radius: 14px; border-radius: 14px;
background: rgba(30, 0, 50, 0.5); background: rgba(30, 0, 50, 0.5);
border: 1px solid rgba(0, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
position: relative; position: relative;
} }
@ -217,57 +219,105 @@ h1::before {
box-shadow: 0 0 20px rgba(0, 255, 255, 0.3); box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
} }
/* Rank Styles */ /* === RANK 1: CYAN NEON (Juara) === */
.leaderboard-item.rank-1 { .leaderboard-item.rank-1,
background: linear-gradient(135deg, rgba(0, 234, 255, 0.25), rgba(0, 255, 136, 0.2)); .your-rank-container.rank-1 .your-rank-item {
border: 2px solid rgba(0, 234, 255, 0.6); background: linear-gradient(90deg, rgba(0, 234, 255, 0.25) 0%, rgba(0, 234, 255, 0.05) 100%);
box-shadow: border: 2px solid #00eaff;
0 0 25px rgba(0, 234, 255, 0.4), box-shadow: 0 0 15px rgba(0, 234, 255, 0.3);
inset 0 0 25px rgba(0, 234, 255, 0.15);
}
.leaderboard-item.rank-2 {
background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(204, 0, 255, 0.15));
border: 2px solid rgba(255, 0, 255, 0.5);
box-shadow: 0 0 18px rgba(255, 0, 255, 0.3);
}
.leaderboard-item.rank-3 {
background: linear-gradient(135deg, rgba(138, 43, 226, 0.25), rgba(75, 0, 130, 0.2));
border: 2px solid rgba(138, 43, 226, 0.5);
box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
}
/* Rank Badge */
.rank-badge {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: bold;
flex-shrink: 0;
} }
.rank-1 .rank-badge { .rank-1 .rank-badge {
background: linear-gradient(135deg, #00eaff, #00ff88); background: #00eaff;
color: #0c001a; color: #000;
box-shadow: 0 0 20px rgba(0, 234, 255, 0.8); box-shadow: 0 0 15px #00eaff;
animation: pulseBadge 2s ease-in-out infinite; animation: pulseBadge 2s ease-in-out infinite;
} }
.rank-2 .rank-badge { .rank-1 .player-name {
background: linear-gradient(135deg, #ff00ff, #cc00ff); /* 1. Matikan efek gradient aneh pada teks */
background: none;
-webkit-text-fill-color: initial;
background-clip: border-box;
/* 2. Samakan ukuran font dengan yang lain (sebelumnya 22px jadi 20px) */
font-size: 20px;
/* 3. Warna Putih Solid + Sedikit Glow Cyan biar tetap spesial tapi rapi */
color: #ffffff; color: #ffffff;
box-shadow: 0 0 18px rgba(255, 0, 255, 0.7); text-shadow: 0 0 10px rgba(0, 234, 255, 0.8);
/* Hapus filter drop-shadow berlebih */
filter: none;
}
/* FIX: Warna Score Rank 1 jadi Putih Solid (Anti Silau) */
.rank-1 .score-value {
/* 1. Ukuran disamakan dengan yang lain */
font-size: 22px !important;
/* 2. Warna Teks Putih Solid */
background: none !important;
-webkit-text-fill-color: initial !important;
color: #ffffff !important;
/* 3. GLOWING: Ganti bayangan hitam jadi cahaya Cyan */
text-shadow: 0 0 10px #00eaff, 0 0 20px rgba(0, 234, 255, 0.4) !important;
/* Reset filter */
filter: none !important;
}
/* === RANK 2: MAGENTA NEON (Runner Up) === */
.leaderboard-item.rank-2,
.your-rank-container.rank-2 .your-rank-item {
background: linear-gradient(90deg, rgba(255, 0, 255, 0.25) 0%, rgba(255, 0, 255, 0.05) 100%);
border: 2px solid #ff00ff;
box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}
.rank-2 .rank-badge {
background: #ff00ff;
color: #fff;
box-shadow: 0 0 15px #ff00ff;
}
.rank-2 .score-value {
color: #fff;
text-shadow: 0 0 10px #ff00ff;
}
.rank-2 .player-score {
color: #ff00ff;
}
/* === RANK 3: VIOLET NEON (Third) === */
.leaderboard-item.rank-3,
.your-rank-container.rank-3 .your-rank-item {
background: linear-gradient(90deg, rgba(138, 43, 226, 0.25) 0%, rgba(138, 43, 226, 0.05) 100%);
border: 2px solid #8a2be2;
box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
} }
.rank-3 .rank-badge { .rank-3 .rank-badge {
background: linear-gradient(135deg, #8a2be2, #4b0082); background: #8a2be2;
color: #ffffff; color: #fff;
box-shadow: 0 0 15px rgba(138, 43, 226, 0.6); box-shadow: 0 0 15px #8a2be2;
}
.rank-3 .score-value {
color: #fff;
text-shadow: 0 0 10px #8a2be2;
}
.rank-3 .player-score {
color: #a855f7;
}
/* === RANK OTHER === */
.leaderboard-item.rank-other {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
} }
.rank-other .rank-badge { .rank-other .rank-badge {
@ -276,6 +326,7 @@ h1::before {
border: 1px solid rgba(0, 255, 255, 0.3); border: 1px solid rgba(0, 255, 255, 0.3);
} }
/* Animation */
@keyframes pulseBadge { @keyframes pulseBadge {
0%, 100% { 0%, 100% {
transform: scale(1); transform: scale(1);
@ -287,7 +338,7 @@ h1::before {
} }
} }
/* Player Info */ /* Player Info Common */
.player-info { .player-info {
flex: 1; flex: 1;
display: flex; display: flex;
@ -305,22 +356,11 @@ h1::before {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.rank-1 .player-name { /* Score Common */
background: linear-gradient(90deg, #00eaff, #00ff88);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: none;
filter: drop-shadow(0 0 6px rgba(0, 234, 255, 0.5));
font-size: 22px;
}
/* Score */
.player-score { .player-score {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
color: #00eaff; color: #00eaff;
text-shadow: 0 0 12px rgba(0, 234, 255, 0.7);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
@ -332,25 +372,6 @@ h1::before {
font-size: 22px; font-size: 22px;
} }
.rank-1 .score-value {
font-size: 25px;
background: linear-gradient(90deg, #00eaff, #ff00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 10px rgba(0, 234, 255, 0.8));
}
.rank-2 .player-score {
color: #ff00ff;
text-shadow: 0 0 12px rgba(255, 0, 255, 0.7);
}
.rank-3 .player-score {
color: #a855f7;
text-shadow: 0 0 12px rgba(138, 43, 226, 0.6);
}
.score-label { .score-label {
font-size: 11px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
@ -358,15 +379,26 @@ h1::before {
color: rgba(200, 200, 255, 0.5); color: rgba(200, 200, 255, 0.5);
} }
/* Your Rank Fixed Section */ /* Badge Size Common */
.rank-badge {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: bold;
flex-shrink: 0;
}
/* Your Rank Section Structure */
.your-rank-container { .your-rank-container {
background: rgba(20, 0, 40, 0.9); background: transparent;
border-radius: 14px; border: none;
padding: 15px 25px; box-shadow: none;
border: 2px solid rgba(0, 255, 136, 0.6); padding: 0;
box-shadow: margin-top: 20px;
0 0 25px rgba(0, 255, 136, 0.4),
inset 0 0 20px rgba(0, 255, 136, 0.15);
} }
.your-rank-item { .your-rank-item {
@ -375,15 +407,34 @@ h1::before {
gap: 20px; gap: 20px;
padding: 18px 25px; padding: 18px 25px;
border-radius: 14px; border-radius: 14px;
background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 234, 255, 0.1)); /* Default style if not top 3 */
background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 0, 0, 0.5));
border: 2px solid rgba(0, 255, 136, 0.5); border: 2px solid rgba(0, 255, 136, 0.5);
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
} }
/* Responsive */ /* --- RESPONSIVE FIX (MODE LAPTOP/LAYAR KECIL) --- */
@media screen and (max-width: 1440px) {
/* Mencegah container nabrak tombol back */
.container {
width: 88%;
padding: 30px 50px;
max-height: 90vh;
}
.btn-back {
top: 20px;
left: 20px;
width: 45px;
height: 45px;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
padding: 35px 30px; padding: 35px 30px;
width: 95%;
} }
h1 { h1 {
@ -394,18 +445,6 @@ h1::before {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 10px; gap: 10px;
} }
.btn-back {
width: 45px;
height: 45px;
top: 20px;
left: 20px;
}
.btn-back svg {
width: 20px;
height: 20px;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {

34
Leaderboard.php
View File

@ -1,7 +1,7 @@
<?php <?php
header('Content-Type: application/json'); header('Content-Type: application/json');
require 'Connection.php'; require 'Connection.php';
session_start(); // Penting untuk tahu siapa yang login session_start();
$response = [ $response = [
"status" => "error", "status" => "error",
@ -9,8 +9,12 @@ $response = [
"user_rank" => null "user_rank" => null
]; ];
// 1. Ambil Top 10 Global // ---------------------------------------------------------
$query = "SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 10"; // 1. Ambil Top 10 Global (DIPERBAIKI)
// Ditambahkan "user_id ASC" agar urutannya PASTI (Konsisten)
// Jika skor sama, user dengan ID lebih kecil (daftar duluan) akan di atas
// ---------------------------------------------------------
$query = "SELECT username, score FROM leaderboard ORDER BY score DESC, user_id ASC LIMIT 10";
$result = $conn->query($query); $result = $conn->query($query);
if ($result && $result->num_rows > 0) { if ($result && $result->num_rows > 0) {
@ -19,7 +23,9 @@ if ($result && $result->num_rows > 0) {
} }
} }
// 2. Ambil Ranking User yang sedang Login (Jika ada session) // ---------------------------------------------------------
// 2. Ambil Ranking User Login (DIPERBAIKI)
// ---------------------------------------------------------
if (isset($_SESSION['user_id'])) { if (isset($_SESSION['user_id'])) {
$my_id = $_SESSION['user_id']; $my_id = $_SESSION['user_id'];
@ -33,14 +39,26 @@ if (isset($_SESSION['user_id'])) {
$myScore = $scoreRow['score']; $myScore = $scoreRow['score'];
$myUsername = $scoreRow['username']; $myUsername = $scoreRow['username'];
// Hitung Ranking (Count berapa orang yang score-nya lebih tinggi) // --- LOGIKA BARU ---
// Logika: Jumlah orang dengan score > score saya, ditambah 1 // Hitung ranking dengan Tie-Breaker.
$rankQuery = $conn->prepare("SELECT COUNT(*) as rank_above FROM leaderboard WHERE score > ?"); // Rank = Jumlah orang yang skornya LEBIH BESAR
$rankQuery->bind_param("i", $myScore); // DITAMBAH Jumlah orang yang skornya SAMA tapi ID-nya LEBIH KECIL (dia di atas kita)
$rankQuery = $conn->prepare("
SELECT COUNT(*) as rank_above
FROM leaderboard
WHERE score > ?
OR (score = ? AND user_id < ?)
");
// Kita bind 3 parameter: score, score, id
$rankQuery->bind_param("iii", $myScore, $myScore, $my_id);
$rankQuery->execute(); $rankQuery->execute();
$rankResult = $rankQuery->get_result(); $rankResult = $rankQuery->get_result();
$rankRow = $rankResult->fetch_assoc(); $rankRow = $rankResult->fetch_assoc();
// Rank adalah jumlah orang di atas kita + 1
$myRank = $rankRow['rank_above'] + 1; $myRank = $rankRow['rank_above'] + 1;
$response['user_rank'] = [ $response['user_rank'] = [