feat: add rank change indicators to leaderboard (#95)

* feat: add rank change indicators to leaderboard

* fix: address reviewer feedback on rank change indicators

* style: format files with prettier

* Use GitHub history for rank comparisons

* Add DATA_REPO_TOKEN to sync-leaderboard workflow

* style: auto-format code with Prettier (/format)

---------

Co-authored-by: Jagdish Prajapati <jagadishdrp@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 3 people

.github/workflows/sync-leaderboard.yml

@@ -55,6 +55,7 @@ jobs:
 
             # 2. Run sync
             export DATA_DIR=db-repo
+            export DATA_REPO_TOKEN=${{ secrets.DATA_REPO_TOKEN }}
             node scripts/sync-leaderboard.js
 
             # 3. Stage changes (everything except users.json)

frontend/leaderboard.html

@@ -11,6 +11,25 @@
       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);
+      }
+    </style>
     <link rel="icon" type="image/png" href="assets/logo.png" />
     <script src="js/navbar.js"></script>
   </head>
@@ -357,6 +376,16 @@ <h1 class="page-title">Leaderboard</h1>
           `;
         renderLeaderboard(filteredData);
       }
+      function getRankChangeTag(rankChange) {
+        if (!rankChange) return "";
+        if (rankChange === "NEW")
+          return `<span class="rank-change rank-neutral">[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:
@@ -416,7 +445,7 @@ <h1 class="page-title">Leaderboard</h1>
           row.className = "leaderboard-row";
           row.innerHTML = `
                     <div class="rank">${rank}</div>
-                    <div class="name-cell">${tag}${user.name}</div>
+                    <div class="name-cell">${tag}${user.name}${getRankChangeTag(user.rankChange)}</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">
                         <path d="M14 3H21V10M21 3L10 14M21 14V21H3V3H10"
@@ -485,7 +514,7 @@ <h1 class="page-title">Leaderboard</h1>
                     </div>
 
                     
-                    <div class="mobile-name">${tag}${user.name}</div>
+                    <div class="mobile-name">${tag}${user.name}${getRankChangeTag(user.rankChange)}</div>
                     <div class="mobile-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">
                         <path d="M14 3H21V10M21 3L10 14M21 14V21H3V3H10"

scripts/sync-leaderboard.js

@@ -29,6 +29,72 @@ function getFileName(daysAgo) {
   return `${year}-${month}-${date}-${day}.json`;
 }
 
+async function getYesterdaySnapshot(filePath) {
+  const owner = "codepvg";
+  const repo = "leetcode-ranking-data";
+  const d = new Date();
+  d.setDate(d.getDate() - 1);
+  const targetDate = d.toISOString().split("T")[0];
+  const until = `${targetDate}T23:59:59Z`;
+  const commitsUrl = `https://api.github.com/repos/${owner}/${repo}/commits?path=${filePath}&until=${until}&per_page=1`;
+
+  const headers = { "User-Agent": "CodePVG-App" };
+  if (process.env.DATA_REPO_TOKEN) {
+    headers["Authorization"] = `token ${process.env.DATA_REPO_TOKEN}`;
+  }
+
+  try {
+    const commitResponse = await axios.get(commitsUrl, { headers });
+    const commits = commitResponse.data;
+
+    if (!commits || commits.length === 0) {
+      console.warn(
+        `No commits found for ${filePath} on or before ${targetDate}.`,
+      );
+      return null;
+    }
+
+    const yesterdaySHA = commits[0].sha;
+    console.log(
+      `📌 Using Commit for ${filePath}: "${commits[0].commit.message}" (SHA: ${yesterdaySHA})`,
+    );
+
+    const rawFileUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${yesterdaySHA}/${filePath}`;
+    const fileResponse = await axios.get(rawFileUrl);
+    return fileResponse.data;
+  } catch (error) {
+    console.error(
+      `Error fetching historical data for ${filePath}:`,
+      error.message,
+    );
+    return null;
+  }
+}
+
+async function computeRankChanges(currentSorted, filename) {
+  let previousRanks = {};
+  const previousData = await getYesterdaySnapshot(filename);
+
+  if (previousData && Array.isArray(previousData)) {
+    previousData.forEach((user, idx) => {
+      previousRanks[user.id] = idx + 1;
+    });
+  }
+
+  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");
   console.log(`Using data directory: ${DATA_DIR}`);
@@ -87,6 +153,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");
+  await computeRankChanges(overallData, "overall.json");
   try {
     fs.writeFileSync(
       overallFilepath,
@@ -144,6 +211,7 @@ function getFileName(daysAgo) {
 
   console.log("Writing sorted daily data to daily.json...");
   const dailyFilepath = path.join(DATA_DIR, "daily.json");
+  await computeRankChanges(dailyData, "daily.json");
   try {
     fs.writeFileSync(dailyFilepath, JSON.stringify(dailyData, null, 2), "utf8");
     console.log("Daily data saved successfully");
@@ -199,6 +267,7 @@ function getFileName(daysAgo) {
 
   console.log("Writing sorted weekly data to weekly.json...");
   const weeklyFilepath = path.join(DATA_DIR, "weekly.json");
+  await computeRankChanges(weeklyData, "weekly.json");
   try {
     fs.writeFileSync(
       weeklyFilepath,
@@ -258,6 +327,7 @@ function getFileName(daysAgo) {
 
   console.log("Writing sorted monthly data to monthly.json...");
   const monthlyFilepath = path.join(DATA_DIR, "monthly.json");
+  await computeRankChanges(monthlyData, "monthly.json");
   try {
     fs.writeFileSync(
       monthlyFilepath,