impr(profile/account page): show leaderboard rank percentage (fehmer)

backend/src/api/controllers/user.ts

@@ -928,18 +928,29 @@ async function getAllTimeLbs(uid: string): Promise<SharedTypes.AllTimeLbs> {
     uid
   );
 
-  const allTime15EnglishRank =
-    allTime15English === false ? null : allTime15English.rank;
-  const allTime60EnglishRank =
-    allTime60English === false ? null : allTime60English.rank;
+  const english15 =
+    allTime15English === false
+      ? undefined
+      : ({
+          rank: allTime15English.rank,
+          count: allTime15English.count,
+        } as SharedTypes.RankAndCount);
+
+  const english60 =
+    allTime60English === false
+      ? undefined
+      : ({
+          rank: allTime60English.rank,
+          count: allTime60English.count,
+        } as SharedTypes.RankAndCount);
 
   return {
     time: {
       "15": {
-        english: allTime15EnglishRank,
+        english: english15,
       },
       "60": {
-        english: allTime60EnglishRank,
+        english: english60,
       },
     },
   };

frontend/src/html/pages/account.html

@@ -109,10 +109,12 @@
         <div class="group t15">
           <div class="testType">15 seconds</div>
           <div class="pos">-</div>
+          <div class="topPercentage">-</div>
         </div>
         <div class="group t60">
           <div class="testType">60 seconds</div>
           <div class="pos">-</div>
+          <div class="topPercentage">-</div>
         </div>
       </div>
       <div class="pbsTime">

frontend/src/html/pages/profile.html

@@ -93,10 +93,12 @@
         <div class="group t15">
           <div class="testType">15 seconds</div>
           <div class="pos">-</div>
+          <div class="topPercentage">-</div>
         </div>
         <div class="group t60">
           <div class="testType">60 seconds</div>
           <div class="pos">-</div>
+          <div class="topPercentage">-</div>
         </div>
       </div>
       <div class="pbsWords">

frontend/src/styles/profile.scss

@@ -151,15 +151,24 @@
     }
     .group {
       display: grid;
-      gap: 1rem;
+      column-gap: 1rem;
       grid-template-columns: auto 1fr;
+      grid-template-areas: "testType pos" "topPercentage pos";
       align-items: center;
       .testType {
+        grid-area: testType;
         color: var(--sub-color);
       }
       .pos {
+        grid-area: pos;
         font-size: 2rem;
       }
+      .topPercentage {
+        color: var(--sub-color);
+        grid-area: topPercentage;
+        font-size: 0.75rem;
+        text-align: right;
+      }
       &.t15 {
         grid-area: t15;
       }

frontend/src/ts/constants/default-snapshot.ts

@@ -35,5 +35,10 @@ export const defaultSnap: MonkeyTypes.Snapshot = {
   streak: 0,
   maxStreak: 0,
   streakHourOffset: undefined,
-  allTimeLbs: { time: { 15: { english: 0 }, 60: { english: 0 } } },
+  allTimeLbs: {
+    time: {
+      15: { english: { count: 0, rank: 0 } },
+      60: { english: { count: 0, rank: 0 } },
+    },
+  },
 };

frontend/src/ts/elements/profile.ts

@@ -323,13 +323,24 @@ export async function update(
     if (t15 === null && t60 === null) {
       profileElement.find(".leaderboardsPositions").addClass("hidden");
     } else {
-      profileElement
-        .find(".leaderboardsPositions .group.t15 .pos")
-        .text(Format.rank(t15));
+      if (t15 !== null) {
+        profileElement
+          .find(".leaderboardsPositions .group.t15 .pos")
+          .text(Format.rank(t15?.rank));
+        profileElement
+          .find(".leaderboardsPositions .group.t15 .topPercentage")
+          .text(formatTopPercentage(t15));
+      }
 
-      profileElement
-        .find(".leaderboardsPositions .group.t60 .pos")
-        .text(Format.rank(t60));
+      if (t60 !== null) {
+        profileElement
+          .find(".leaderboardsPositions .group.t60 .pos")
+          .text(Format.rank(t60?.rank));
+
+        profileElement
+          .find(".leaderboardsPositions .group.t60 .topPercentage")
+          .text(formatTopPercentage(t60));
+      }
     }
   }
 
@@ -418,3 +429,9 @@ const throttledEvent = throttle(1000, () => {
 $(window).on("resize", () => {
   throttledEvent();
 });
+
+function formatTopPercentage(lbRank: SharedTypes.RankAndCount): string {
+  if (lbRank.rank === undefined) return "-";
+  if (lbRank.rank === 1) return "GOAT";
+  return "Top " + Format.percentage((lbRank.rank / lbRank.count) * 100);
+}

frontend/src/ts/pages/profile.ts

@@ -84,10 +84,12 @@ function reset(): void {
         <div class="group t15">
           <div class="testType">15 seconds</div>
           <div class="pos">-</div>
+          <div class="topPercentage">-</div>
         </div>
         <div class="group t60">
           <div class="testType">60 seconds</div>
           <div class="pos">-</div>
+          <div class="topPercentage">-</div>
         </div>
       </div>
       <div class="pbsWords">

shared-types/types.d.ts

@@ -605,6 +605,11 @@ declare namespace SharedTypes {
   };
 
   type AllTimeLbs = {
-    time: Record<string, Record<string, number | null>>;
+    time: Record<string, Record<string, RankAndCount | undefined>>;
+  };
+
+  type RankAndCount = {
+    rank?: number;
+    count: number;
   };
 }