mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-20 07:16:17 +08:00
impr(profile/account page): show leaderboard rank percentage (fehmer) (#5212)
This commit is contained in:
parent
0baabb150c
commit
a306ab4f32
|
@ -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,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 } },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
7
shared-types/types.d.ts
vendored
7
shared-types/types.d.ts
vendored
|
@ -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;
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue