impr(leaderboard): fix icons on friend leaderboards (@fehmer) (monkeytypegame#7086)

Author: fehmer

frontend/src/html/pages/leaderboards.html

@@ -49,8 +49,21 @@
       <table>
         <thead class="allTimeAndDaily">
           <tr>
-            <td><i class="fas fa-users"></i></td>
-            <td>#</td>
+            <td>
+              <span aria-label="Friends rank" data-balloon-pos="down">
+                <i class="fas fa-user-friends"></i>
+              </span>
+            </td>
+            <td>
+              <span
+                class="globalRank"
+                aria-label="Global rank"
+                data-balloon-pos="down"
+              >
+                <span>#</span>
+                <i class="fas fa-users"></i>
+              </span>
+            </td>
             <td>name</td>
             <td class="stat narrow speedUnit">
               <span>wpm</span>

frontend/src/styles/leaderboards.scss

@@ -161,10 +161,26 @@
           padding: var(--padding);
         }
 
+        .globalRank {
+          i {
+            display: none;
+          }
+          span {
+            display: inline;
+          }
+        }
         &.friendsOnly {
           td:first-child {
             display: table-cell;
           }
+          .globalRank {
+            i {
+              display: inline;
+            }
+            span {
+              display: none;
+            }
+          }
         }
         td:first-child {
           display: none;

frontend/src/ts/pages/leaderboards.ts

@@ -444,10 +444,8 @@ function buildTableRow(entry: LeaderboardEntry, me = false): HTMLElement {
   }
   element.dataset["uid"] = entry.uid;
   element.innerHTML = `
-      <td>${entry.friendsRank ?? ""}</td>
-      <td>${
-        entry.rank === 1 ? '<i class="fas fa-fw fa-crown"></i>' : entry.rank
-      }</td>
+      <td>${formatRank(entry.friendsRank)}</td>
+      <td>${formatRank(entry.rank)}</td>
       <td>
         <div class="avatarNameBadge">
           <div class="avatarPlaceholder"></div>
@@ -504,9 +502,7 @@ function buildWeeklyTableRow(
   element.dataset["uid"] = entry.uid;
   element.innerHTML = `
       <td></td>
-      <td>${
-        entry.rank === 1 ? '<i class="fas fa-fw fa-crown"></i>' : entry.rank
-      }</td>
+      <td>${formatRank(entry.rank)}</td>
       <td>
         <div class="avatarNameBadge">
           <div class="avatarPlaceholder"></div>
@@ -718,9 +714,7 @@ function fillUser(): void {
     };
 
     const html = `
-          <div class="rank">${
-            rank === 1 ? '<i class="fas fa-fw fa-crown"></i>' : rank
-          }</div>
+          <div class="rank">${formatRank(rank)}</div>
         <div class="userInfo">
           <div class="top">You (${percentileString})</div>
           <div class="bottom">${diffText}</div>
@@ -811,11 +805,7 @@ function fillUser(): void {
     };
 
     const html = `
-          <div class="rank">${
-            userData.rank === 1
-              ? '<i class="fas fa-fw fa-crown"></i>'
-              : userData.rank
-          }</div>
+          <div class="rank">${formatRank(userData.rank)}</div>
         <div class="userInfo">
           <div class="top">You (${percentileString})</div>
           <div class="bottom">${diffText}</div>
@@ -1390,6 +1380,13 @@ function updateTimeText(
   text.attr("aria-label", localDateString);
 }
 
+function formatRank(rank: number | undefined): string {
+  if (rank === undefined) return "";
+  if (rank === 1) return '<i class="fas fa-fw fa-crown"></i>';
+
+  return rank.toString();
+}
+
 $(".page.pageLeaderboards .jumpButtons button").on("click", function () {
   const action = $(this).data("action") as Action;
   if (action !== "goToPage") {