[pull] master from monkeytypegame:master

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/security-policy.html

@@ -137,7 +137,8 @@ <h1 id="Vulnerability_Disclosure">How to Disclose a Vulnerability</h1>
             <a href="mailto:contact@monkeytype.com" rel="noopener">email</a>
             .
           </span>
-          For non-security related platform bugs, follow the bug submission
+          &nbsp;For non-security related platform bugs, follow the bug
+          submission
           <span style="display: inline-flex">
             <a
               href="https://github.com/monkeytypegame/monkeytype#bug-report-or-feature-request"
@@ -146,8 +147,8 @@ <h1 id="Vulnerability_Disclosure">How to Disclose a Vulnerability</h1>
             </a>
             .
           </span>
-          Include as much detail as possible to ensure reproducibility. At a
-          minimum, vulnerability disclosures should include:
+          &nbsp;Include as much detail as possible to ensure reproducibility. At
+          a minimum, vulnerability disclosures should include:
         </p>
         <ul>
           <li>Vulnerability Description</li>

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/controllers/route-controller.ts

@@ -47,8 +47,8 @@ type Route = {
 
 const route404: Route = {
   path: "404",
-  load: async () => {
-    await PageController.change("404");
+  load: async (_params, options) => {
+    await PageController.change("404", options);
   },
 };
 
@@ -224,7 +224,12 @@ async function router(options = {} as NavigateOptions): Promise<void> {
   };
 
   if (match === undefined) {
-    await route404.load({}, {});
+    await route404.load(
+      {},
+      {
+        force: true,
+      }
+    );
     return;
   }
 

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") {