-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathleaderboard.html
128 lines (117 loc) · 4.1 KB
/
leaderboard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!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>