Leaderboard

Leaderboard.html

@@ -21,6 +21,8 @@
 
       <ul class="leaderboard-list" id="leaderboardList"></ul>
       
+      <div id="userRankContainer"></div>
+      
     </div>
 
     <script src="Leaderboard.js"></script>

Leaderboard.js

@@ -7,12 +7,53 @@ function loadLeaderboard() {
         .then(response => response.json())
         .then(data => {
             if (data.status === "success") {
+                // Render Top 10
                 renderLeaderboard(data.leaderboard);
+                
+                // Render Ranking Saya (User Rank)
+                if (data.user_rank) {
+                    renderUserRank(data.user_rank);
+                }
             }
         })
         .catch(error => console.error("Error loading leaderboard:", error));
 }
 
+// ... fungsi renderLeaderboard tetap sama ...
+
+// TAMBAHKAN FUNGSI INI DI BAWAH
+function renderUserRank(user) {
+    const container = document.getElementById('userRankContainer');
+    if (!container) return;
+
+    // Format angka skor
+    const formattedScore = new Intl.NumberFormat().format(user.score);
+
+    // HTML structure sesuai CSS .your-rank-container
+    const html = `
+        <div class="your-rank-container">
+            <div style="color: #00ff88; margin-bottom: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px;">
+            </div>
+            <div class="your-rank-item">
+                <div class="rank-badge" style="background: #00ff88; color: #000; box-shadow: 0 0 15px #00ff88;">
+                    ${user.rank}
+                </div>
+                <div class="player-info">
+                    <div class="player-name">${escapeHtml(user.username)}</div>
+                </div>
+                <div class="player-score">
+                    <div class="score-value">${formattedScore}</div>
+                    <div class="score-label">Points</div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    container.innerHTML = html;
+}
+
+// ... fungsi escapeHtml tetap sama ...
+
 function renderLeaderboard(players) {
     const listContainer = document.getElementById('leaderboardList');
     if (!listContainer) return; // Safety check

Leaderboard.php

@@ -1,23 +1,58 @@
 <?php
 header('Content-Type: application/json');
 require 'Connection.php';
+session_start(); // Penting untuk tahu siapa yang login
 
+$response = [
+    "status" => "error",
+    "leaderboard" => [],
+    "user_rank" => null
+];
+
+// 1. Ambil Top 10 Global
 $query = "SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 10";
 $result = $conn->query($query);
 
-$leaderboard = [];
-
 if ($result && $result->num_rows > 0) {
     while ($row = $result->fetch_assoc()) {
-        $leaderboard[] = $row;
+        $response['leaderboard'][] = $row;
     }
 }
 
-// Kirim data ke frontend dalam bentuk JSON
+// 2. Ambil Ranking User yang sedang Login (Jika ada session)
-echo json_encode([
+if (isset($_SESSION['user_id'])) {
-    "status" => "success",
+    $my_id = $_SESSION['user_id'];
-    "leaderboard" => $leaderboard
+    
-]);
+    // Ambil score user saat ini
+    $scoreQuery = $conn->prepare("SELECT username, score FROM leaderboard WHERE user_id = ?");
+    $scoreQuery->bind_param("i", $my_id);
+    $scoreQuery->execute();
+    $scoreResult = $scoreQuery->get_result();
+
+    if ($scoreRow = $scoreResult->fetch_assoc()) {
+        $myScore = $scoreRow['score'];
+        $myUsername = $scoreRow['username'];
+
+        // Hitung Ranking (Count berapa orang yang score-nya lebih tinggi)
+        // Logika: Jumlah orang dengan score > score saya, ditambah 1
+        $rankQuery = $conn->prepare("SELECT COUNT(*) as rank_above FROM leaderboard WHERE score > ?");
+        $rankQuery->bind_param("i", $myScore);
+        $rankQuery->execute();
+        $rankResult = $rankQuery->get_result();
+        $rankRow = $rankResult->fetch_assoc();
+        
+        $myRank = $rankRow['rank_above'] + 1;
+
+        $response['user_rank'] = [
+            "username" => $myUsername,
+            "score" => $myScore,
+            "rank" => $myRank
+        ];
+    }
+}
+
+$response['status'] = "success";
+echo json_encode($response);
 
 $conn->close();
 ?>