feat: fetch and dynamically render local leaderboard ranks in profile page

frontend/js/user/ranks.js

@@ -0,0 +1,56 @@
+async function loadLeaderboardRanks(username) {
+  const periods = ["overall", "monthly", "weekly", "daily"];
+
+  try {
+    const res = await fetch(`/api/user/${username}`);
+    if (!res.ok) throw new Error("API response error");
+
+    const data = await res.json();
+    const ranks = data.leaderboardRanks;
+    if (!ranks) return;
+
+    periods.forEach((period) => {
+      const rankEl = document.getElementById(`${period}-rank`);
+      const itemContainer = document.getElementById(`${period}-item`);
+
+      const rankData = ranks[period];
+
+      // Clean fallback if rank is not present, is '--', or has a 0 rank score
+      if (
+        !rankData ||
+        rankData.rank === "--" ||
+        rankData.rank === 0 ||
+        rankData.rank === null
+      ) {
+        if (rankEl) rankEl.textContent = "--";
+        if (itemContainer) itemContainer.classList.add("placeholder-rank");
+        return;
+      }
+
+      if (itemContainer) {
+        itemContainer.classList.remove("placeholder-rank");
+      }
+
+      if (rankEl) {
+        rankEl.textContent = Number(rankData.rank);
+      }
+    });
+  } catch (err) {
+    console.error("Error loading leaderboard ranks:", err);
+    periods.forEach((period) => {
+      const el = document.getElementById(`${period}-rank`);
+      if (el) el.textContent = "--";
+    });
+  }
+}
+
+// Automatically fire on load
+document.addEventListener("DOMContentLoaded", () => {
+  const pathSegments = window.location.pathname.split("/");
+  const username =
+    pathSegments[pathSegments.length - 1] ||
+    pathSegments[pathSegments.length - 2];
+  if (username) {
+    loadLeaderboardRanks(username);
+  }
+});

frontend/user.html

@@ -490,21 +490,21 @@ <h1 id="username-display" class="page-title">[USER_PROFILE]</h1>
                 >--</span
               >
             </div>
-            <div class="rank-item placeholder-rank">
+            <div class="rank-item" id="overall-item">
               <span class="rank-label">OVERALL:</span>
-              <span class="rank-value">--</span>
+              <span id="overall-rank" class="rank-value">--</span>
             </div>
-            <div class="rank-item placeholder-rank">
+            <div class="rank-item" id="monthly-item">
               <span class="rank-label">MONTHLY:</span>
-              <span class="rank-value">--</span>
+              <span id="monthly-rank" class="rank-value">--</span>
             </div>
-            <div class="rank-item placeholder-rank">
+            <div class="rank-item" id="weekly-item">
               <span class="rank-label">WEEKLY:</span>
-              <span class="rank-value">--</span>
+              <span id="weekly-rank" class="rank-value">--</span>
             </div>
-            <div class="rank-item placeholder-rank">
+            <div class="rank-item" id="daily-item">
               <span class="rank-label">DAILY:</span>
-              <span class="rank-value">--</span>
+              <span id="daily-rank" class="rank-value">--</span>
             </div>
           </div>
         </div>
@@ -595,6 +595,7 @@ <h1 id="username-display" class="page-title">[USER_PROFILE]</h1>
     <script nonce="__NONCE__" src="/js/user/historical-graphs.js"></script>
     <script src="/js/user/badges.js"></script>
     <script src="/js/user/contest.js"></script>
+    <script src="/js/user/ranks.js"></script>
     <script src="/js/footer.js"></script>
     <script src="/js/matrix.js"></script>
     <script src="/js/terminal_ui.js"></script>