diff --git a/frontend/src/html/pages/leaderboards.html b/frontend/src/html/pages/leaderboards.html
index 2103331b74ed..5e2344733592 100644
--- a/frontend/src/html/pages/leaderboards.html
+++ b/frontend/src/html/pages/leaderboards.html
@@ -51,7 +51,7 @@
# |
name |
-
+ |
wpm
accuracy
|
@@ -59,7 +59,7 @@
raw
consistency
- wpm |
+ wpm |
accuracy |
raw |
consistency |
diff --git a/frontend/src/ts/pages/leaderboards.ts b/frontend/src/ts/pages/leaderboards.ts
index 425d74494a6a..1ab6366df8f8 100644
--- a/frontend/src/ts/pages/leaderboards.ts
+++ b/frontend/src/ts/pages/leaderboards.ts
@@ -1,5 +1,6 @@
import Page from "./page";
import * as Skeleton from "../utils/skeleton";
+import Config from "../config";
import {
LeaderboardEntry,
XpLeaderboardEntry,
@@ -39,6 +40,8 @@ import {
serialize as serializeUrlSearchParams,
} from "zod-urlsearchparams";
import { UTCDateMini } from "@date-fns/utc";
+import * as ConfigEvent from "../observables/config-event";
+import * as ActivePage from "../states/active-page";
// import * as ServerConfiguration from "../ape/server-configuration";
const LeaderboardTypeSchema = z.enum(["allTime", "weekly", "daily"]);
@@ -699,7 +702,10 @@ function fillUser(): void {
let str = `Not qualified`;
if (!state.yesterday) {
- str += ` (min speed required: ${state.minWpm} wpm)`;
+ str += ` (min speed required: ${Format.typingSpeed(state.minWpm, {
+ showDecimalPlaces: true,
+ suffix: ` ${Config.typingSpeedUnit}`,
+ })})`;
}
$(".page.pageLeaderboards .bigUser").html(
@@ -772,7 +778,7 @@ function fillUser(): void {
${diffText}
-
wpm
+
${Config.typingSpeedUnit}
${formatted.wpm}
@@ -943,6 +949,12 @@ function updateContent(): void {
updateTimerVisibility();
fillTable();
+ for (const element of document.querySelectorAll(
+ ".page.pageLeaderboards .speedUnit"
+ )) {
+ element.innerHTML = Config.typingSpeedUnit;
+ }
+
if (state.scrollToUserAfterFill) {
const windowHeight = $(window).height() ?? 0;
const offset = $(`.tableAndUser .me`).offset()?.top ?? 0;
@@ -1338,10 +1350,17 @@ export const page = new Page({
},
afterShow: async (): Promise => {
updateSecondaryButtons();
- state.discordAvatarUrls = new Map();
},
});
$(async () => {
Skeleton.save("pageLeaderboards");
});
+
+ConfigEvent.subscribe((eventKey) => {
+ if (ActivePage.get() === "leaderboards" && eventKey === "typingSpeedUnit") {
+ updateContent();
+ fillUser();
+ fillAvatars();
+ }
+});