feat: add rank change indicators to leaderboard

frontend/leaderboard.html

@@ -11,6 +11,20 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="styles/main.css" />
+    <style>
+  .rank-change {
+    display: inline-block;
+    font-size: 0.65rem;
+    font-family: "Fira Code", monospace;
+    margin-left: 0.4rem;
+    vertical-align: middle;
+    opacity: 0.85;
+  }
+  .rank-up   { color: var(--green); }
+  .rank-down { color: var(--red); }
+  .rank-neutral { color: var(--text-muted); }
+  .rank-new  { color: var(--amber); }
+</style>
     <link rel="icon" type="image/png" href="assets/logo.png" />
     <script src="js/navbar.js"></script>
   </head>
@@ -332,6 +346,16 @@ <h1 class="page-title">Leaderboard</h1>
           `;
         renderLeaderboard(filteredData);
       }
+      function getRankChangeTag(rankChange) {
+  if (!rankChange) return "";
+  if (rankChange === "NEW")
+    return `<span class="rank-change rank-new">[NEW]</span>`;
+  if (rankChange === "=")
+    return `<span class="rank-change rank-neutral">[==]</span>`;
+  if (rankChange.startsWith("+"))
+    return `<span class="rank-change rank-up">[${rankChange}]</span>`;
+  return `<span class="rank-change rank-down">[${rankChange}]</span>`;
+}
       function getRankTag(rank) {
         switch (rank) {
           case 1:
@@ -390,7 +414,7 @@ <h1 class="page-title">Leaderboard</h1>
           const row = document.createElement("div");
           row.className = "leaderboard-row";
           row.innerHTML = `
-                    <div class="rank">${rank}</div>
+                    <div class="rank">${rank}${getRankChangeTag(user.rankChange)}</div>
                     <div class="name-cell">${tag}${user.name}</div>
                     <div class="username"><a href="https://leetcode.com/u/${user.id}" target="_blank" rel="noopener noreferrer" class="user-link">${user.id}
                         <svg class="external-icon" width="12" height="12" viewBox="0 0 24 24">
@@ -430,7 +454,7 @@ <h1 class="page-title">Leaderboard</h1>
           card.className = "mobile-card";
           card.innerHTML = `
                     <div class="mobile-card-header">
-                        <div class="mobile-rank">#${rank}</div>
+                        <div class="mobile-rank">#${rank}${getRankChangeTag(user.rankChange)}</div>
                         <div class="mobile-score tooltip-score">
                            <span> ${user.score}</span>
                                <span class="score-caret"></span>

scripts/sync-leaderboard.js

@@ -28,6 +28,30 @@ function getFileName(daysAgo) {
 
   return `${year}-${month}-${date}-${day}.json`;
 }
+function computeRankChanges(currentSorted, previousSortedFilepath) {
+  let previousRanks = {};
+  try {
+    const raw = fs.readFileSync(previousSortedFilepath, "utf8");
+    const previousSorted = JSON.parse(raw);
+    previousSorted.forEach((user, idx) => {
+      previousRanks[user.id] = idx + 1;
+    });
+  } catch {
+    // File doesn't exist yet (first run) — everyone gets NEW
+  }
+
+  currentSorted.forEach((user, idx) => {
+    const currentRank = idx + 1;
+    if (previousRanks[user.id] === undefined) {
+      user.rankChange = "NEW";
+    } else {
+      const delta = previousRanks[user.id] - currentRank;
+      if (delta > 0) user.rankChange = `+${delta}`;
+      else if (delta < 0) user.rankChange = `${delta}`;
+      else user.rankChange = "=";
+    }
+  });
+}
 
 (async () => {
   const DATA_DIR = process.env.DATA_DIR || path.join(__dirname, "..", "data");
@@ -87,6 +111,7 @@ function getFileName(daysAgo) {
   overallData.sort((a, b) => b.score - a.score);
   console.log("Writing sorted daily data to overall file...");
   const overallFilepath = path.join(DATA_DIR, "overall.json");
+  computeRankChanges(overallData, overallFilepath);
   try {
     fs.writeFileSync(
       overallFilepath,
@@ -144,6 +169,7 @@ function getFileName(daysAgo) {
 
   console.log("Writing sorted daily data to daily.json...");
   const dailyFilepath = path.join(DATA_DIR, "daily.json");
+  computeRankChanges(dailyData, dailyFilepath);
   try {
     fs.writeFileSync(dailyFilepath, JSON.stringify(dailyData, null, 2), "utf8");
     console.log("Daily data saved successfully");
@@ -199,6 +225,7 @@ function getFileName(daysAgo) {
 
   console.log("Writing sorted weekly data to weekly.json...");
   const weeklyFilepath = path.join(DATA_DIR, "weekly.json");
+  computeRankChanges(weeklyData, weeklyFilepath);
   try {
     fs.writeFileSync(
       weeklyFilepath,
@@ -258,6 +285,7 @@ function getFileName(daysAgo) {
 
   console.log("Writing sorted monthly data to monthly.json...");
   const monthlyFilepath = path.join(DATA_DIR, "monthly.json");
+  computeRankChanges(monthlyData, monthlyFilepath);
   try {
     fs.writeFileSync(
       monthlyFilepath,
@@ -291,4 +319,4 @@ function getFileName(daysAgo) {
   } catch (err) {
     console.error(`Failed to write sync file: `, err.message);
   }
-})();
+})();