leaderboard.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ML-Scope Leaderboard</title>
    <link rel="icon" type="image/x-icon" href="aida-logo.jpeg" />
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav>
      <div class="container">
        <a href="index.html">
          <img src="aida-logo.jpeg" alt="Logo" class="logo" />
        </a>
        <div class="nav-links">
          <a href="index.html">Problems</a>
          <a href="solutions.html">Solutions</a>
          <a href="leaderboard.html">Leaderboard</a>
          <a href="resources.html">Resources</a>
        </div>
      </div>
    </nav>
    <div class="container">
      <h1>Leaderboard</h1>
      <!-- <center><h2>Could be you...</h2></center> -->
      <div id="podium" class="podium"></div>
      <div id="leaderboard" class="leaderboard"></div>
    </div>

    <script>
      const leaderboardData = [
        { name: "Vincent Lavelle", score: 91 },
        { name: "Grace Zeng", score: 84 },
        { name: "Joshua Sutanto", score: 83 },
        { name: "Arjun Vangala", score: null },
        { name: "Joey Li", score: null },
        { name: "Yash Hathi", score: null },
        { name: "Victoria Nguyen", score: null },
        { name: "Amey Gupta", score: null },
        { name: "Raizel Midha", score: null },
        { name: "Somanshi Grover", score: null },
      ];

      function createPodiumItem(rank, name, score, medal, height) {
        return `
          <div class="podium-item" style="height: ${height}px;">
            <div class="medal">${medal}</div>
            <div class="podium-rank">${rank}</div>
            <div class="podium-name">${name}</div>
            <div class="podium-points">${score} pts</div>
          </div>
        `;
      }

      function createLeaderboardItem(rank, name, score) {
        // Only show score for podium finishers (ranks 1-3)
        return `
          <div class="leaderboard-item">
            <span class="leaderboard-rank">${rank}</span>
            <span class="leaderboard-name">${name}</span>
            ${
              rank <= 3
                ? `<span class="leaderboard-points">${score} pts</span>`
                : ""
            }
          </div>
        `;
      }

      function updateLeaderboard() {
        const podium = document.getElementById("podium");
        const leaderboard = document.getElementById("leaderboard");

        // Sort by score, handling null scores
        leaderboardData.sort((a, b) => {
          if (a.score === null) return 1;
          if (b.score === null) return -1;
          return b.score - a.score;
        });

        const medals = ["🥇", "🥈", "🥉"];
        let podiumHTML = "";

        // Find min and max scores for the podium (top 3)
        const podiumScores = leaderboardData
          .slice(0, 3)
          .map((item) => item.score);
        const maxScore = Math.max(...podiumScores);
        const minScore = Math.min(...podiumScores);

        const maxHeight = 300;
        const minHeight = 200;

        for (let i = 0; i < 3 && i < leaderboardData.length; i++) {
          const rank = ["1st", "2nd", "3rd"][i];
          const score = leaderboardData[i].score;
          // Calculate relative height
          const height =
            minHeight +
            ((score - minScore) / (maxScore - minScore)) *
              (maxHeight - minHeight);
          podiumHTML += createPodiumItem(
            rank,
            leaderboardData[i].name,
            score,
            medals[i],
            height
          );
        }
        podium.innerHTML = podiumHTML;

        let leaderboardHTML = "";
        for (let i = 3; i < leaderboardData.length; i++) {
          // Only pass score for display if this person is in top 3
          leaderboardHTML += createLeaderboardItem(
            i + 1,
            leaderboardData[i].name,
            null // No score displayed for non-podium finishers
          );
        }
        leaderboard.innerHTML = leaderboardHTML;
      }

      window.onload = updateLeaderboard;
    </script>
  </body>
</html>