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>

Author: NandiniJeedimalla-07

frontend/leaderboard.html

@@ -378,7 +378,13 @@ <h1 class="page-title">Leaderboard</h1>
           const rank = user.originalRank || index + 1;
           const tag = getRankTag(rank);
           const leetcodeUrl = `https://leetcode.com/u/${user.id}`;
+          const easyPoints = 1;
+          const mediumPoints = 3;
+          const hardPoints = 5;
 
+          const easyScore = user.data.easySolved * easyPoints;
+          const mediumScore = user.data.mediumSolved * mediumPoints;
+          const hardScore = user.data.hardSolved * hardPoints;
           const row = document.createElement("div");
           row.className = "leaderboard-row";
           row.innerHTML = `
@@ -388,7 +394,25 @@ <h1 class="page-title">Leaderboard</h1>
                     <div class="easy">${user.data.easySolved}</div>
                     <div class="medium">${user.data.mediumSolved}</div>
                     <div class="hard">${user.data.hardSolved}</div>
-                    <div class="score">${user.score}</div>
+                    <div class="mobile-score tooltip-score">
+                            <span>${user.score}</span>
+                             <span class="score-caret"></span>
+                        <div class="score-tooltip">
+                            <div>
+                                Easy: ${user.data.easySolved} × ${easyPoints} = ${easyScore}
+                            </div>
+                            <div>
+                                Medium: ${user.data.mediumSolved} × ${mediumPoints} = ${mediumScore}
+                            </div>
+                            <div>
+                                Hard: ${user.data.hardSolved} × ${hardPoints} = ${hardScore}
+                            </div>
+                            <hr>
+                            <div>
+                                <strong>Total: ${user.score}</strong>
+                            </div>
+                        </div>
+                    </div>
                 `;
           body.appendChild(row);
 
@@ -397,8 +421,28 @@ <h1 class="page-title">Leaderboard</h1>
           card.innerHTML = `
                     <div class="mobile-card-header">
                         <div class="mobile-rank">#${rank}</div>
-                        <div class="mobile-score">${user.score}</div>
+                        <div class="mobile-score tooltip-score">
+                           <span> ${user.score}</span>
+                               <span class="score-caret"></span>
+                            <div class="score-tooltip">
+                                <div>
+                                    Easy: ${user.data.easySolved} × ${easyPoints} = ${easyScore}
+                                </div>
+                                <div>
+                                    Medium: ${user.data.mediumSolved} × ${mediumPoints} = ${mediumScore}
+                                </div>
+                                <div>
+                                    Hard: ${user.data.hardSolved} × ${hardPoints} = ${hardScore}
+                                </div>
+                                <hr>
+                                <div>
+                                    <strong>Total: ${user.score}</strong>
+                                </div>
+                            </div>
+                        </div>
                     </div>
+
+                    
                     <div class="mobile-name">${tag}${user.name}</div>
                     <div class="mobile-username"><a href="https://leetcode.com/u/${user.id}" target="_blank" class="user-link">${user.id}</a></div>
                     <div class="mobile-stats">