diff --git a/backend/src/api/controllers/user.ts b/backend/src/api/controllers/user.ts index 747bb61db704..0acec976b8d6 100644 --- a/backend/src/api/controllers/user.ts +++ b/backend/src/api/controllers/user.ts @@ -928,18 +928,29 @@ async function getAllTimeLbs(uid: string): Promise { 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, }, }, }; diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html index 4c572812f442..15748c490d82 100644 --- a/frontend/src/html/pages/account.html +++ b/frontend/src/html/pages/account.html @@ -109,10 +109,12 @@
15 seconds
-
+
-
60 seconds
-
+
-
diff --git a/frontend/src/html/pages/profile.html b/frontend/src/html/pages/profile.html index e5de1f1cd1b4..1dfb277461b2 100644 --- a/frontend/src/html/pages/profile.html +++ b/frontend/src/html/pages/profile.html @@ -93,10 +93,12 @@
15 seconds
-
+
-
60 seconds
-
+
-
diff --git a/frontend/src/styles/profile.scss b/frontend/src/styles/profile.scss index 3b6abab661fa..b6e83e645dad 100644 --- a/frontend/src/styles/profile.scss +++ b/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; } diff --git a/frontend/src/ts/constants/default-snapshot.ts b/frontend/src/ts/constants/default-snapshot.ts index cbcea8b1bb33..28737c9c1f19 100644 --- a/frontend/src/ts/constants/default-snapshot.ts +++ b/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 } }, + }, + }, }; diff --git a/frontend/src/ts/elements/profile.ts b/frontend/src/ts/elements/profile.ts index 59253dba721f..24ea7961a3e1 100644 --- a/frontend/src/ts/elements/profile.ts +++ b/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); +} diff --git a/frontend/src/ts/pages/profile.ts b/frontend/src/ts/pages/profile.ts index 487906bb768a..960c0ec0702b 100644 --- a/frontend/src/ts/pages/profile.ts +++ b/frontend/src/ts/pages/profile.ts @@ -84,10 +84,12 @@ function reset(): void {
15 seconds
-
+
-
60 seconds
-
+
-
diff --git a/shared-types/types.d.ts b/shared-types/types.d.ts index 0482f7b0c2b5..1bba1533d1f7 100644 --- a/shared-types/types.d.ts +++ b/shared-types/types.d.ts @@ -605,6 +605,11 @@ declare namespace SharedTypes { }; type AllTimeLbs = { - time: Record>; + time: Record>; + }; + + type RankAndCount = { + rank?: number; + count: number; }; }