Skip to content

Commit 7b68dbf

Browse files
Score Breakdown Popup on Hover for Each User (#40)
* Score Breakdown Popup on Hover for Each User * fixed visibility of score tooltip for smaller device and improve UX * resolve CSS formatting issues after merge conflict * Made changes to make the tooltip disappear as soon as the cursor leaves the score text * Add score caret indicator * Run prettier for leaderboard.html Updated HTML leaderboard to remove down caret icon. * change score tooltip indicator to > --------- Co-authored-by: Jagdish Prajapati <jagadishdrp@gmail.com>
1 parent a1890a8 commit 7b68dbf

2 files changed

Lines changed: 167 additions & 4 deletions

File tree

frontend/leaderboard.html

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -378,7 +378,13 @@ <h1 class="page-title">Leaderboard</h1>
378378
const rank = user.originalRank || index + 1;
379379
const tag = getRankTag(rank);
380380
const leetcodeUrl = `https://leetcode.com/u/${user.id}`;
381+
const easyPoints = 1;
382+
const mediumPoints = 3;
383+
const hardPoints = 5;
381384

385+
const easyScore = user.data.easySolved * easyPoints;
386+
const mediumScore = user.data.mediumSolved * mediumPoints;
387+
const hardScore = user.data.hardSolved * hardPoints;
382388
const row = document.createElement("div");
383389
row.className = "leaderboard-row";
384390
row.innerHTML = `
@@ -388,7 +394,25 @@ <h1 class="page-title">Leaderboard</h1>
388394
<div class="easy">${user.data.easySolved}</div>
389395
<div class="medium">${user.data.mediumSolved}</div>
390396
<div class="hard">${user.data.hardSolved}</div>
391-
<div class="score">${user.score}</div>
397+
<div class="mobile-score tooltip-score">
398+
<span>${user.score}</span>
399+
<span class="score-caret"></span>
400+
<div class="score-tooltip">
401+
<div>
402+
Easy: ${user.data.easySolved} × ${easyPoints} = ${easyScore}
403+
</div>
404+
<div>
405+
Medium: ${user.data.mediumSolved} × ${mediumPoints} = ${mediumScore}
406+
</div>
407+
<div>
408+
Hard: ${user.data.hardSolved} × ${hardPoints} = ${hardScore}
409+
</div>
410+
<hr>
411+
<div>
412+
<strong>Total: ${user.score}</strong>
413+
</div>
414+
</div>
415+
</div>
392416
`;
393417
body.appendChild(row);
394418

@@ -397,8 +421,28 @@ <h1 class="page-title">Leaderboard</h1>
397421
card.innerHTML = `
398422
<div class="mobile-card-header">
399423
<div class="mobile-rank">#${rank}</div>
400-
<div class="mobile-score">${user.score}</div>
424+
<div class="mobile-score tooltip-score">
425+
<span> ${user.score}</span>
426+
<span class="score-caret"></span>
427+
<div class="score-tooltip">
428+
<div>
429+
Easy: ${user.data.easySolved} × ${easyPoints} = ${easyScore}
430+
</div>
431+
<div>
432+
Medium: ${user.data.mediumSolved} × ${mediumPoints} = ${mediumScore}
433+
</div>
434+
<div>
435+
Hard: ${user.data.hardSolved} × ${hardPoints} = ${hardScore}
436+
</div>
437+
<hr>
438+
<div>
439+
<strong>Total: ${user.score}</strong>
440+
</div>
441+
</div>
442+
</div>
401443
</div>
444+
445+
402446
<div class="mobile-name">${tag}${user.name}</div>
403447
<div class="mobile-username"><a href="https://leetcode.com/u/${user.id}" target="_blank" class="user-link">${user.id}</a></div>
404448
<div class="mobile-stats">

0 commit comments

Comments
 (0)