+
+
+ {(config) => (
+
+ )}
+
+
+
+
+
+ setSelection((old) => ({ ...old, previous: !old.previous }))
+ }
+ />
+
+ <Show when={isLoggedIn() && !dataQuery.isLoading}>
+ <AsyncContent
+ queries={{
+ data: dataQuery,
+ rank: rankQuery,
+ config: serverConfigurationQuery,
+ }}
+ alwaysShowContent
+ errorClass="rounded bg-sub-alt p-4"
+ >
+ {({ data, rank, config }) => (
+ <UserRank
+ type={getSelection().type === "weekly" ? "xp" : "speed"}
+ data={rank}
+ friendsOnly={getSelection().friendsOnly}
+ total={data?.count}
+ minWpm={
+ data && "minWpm" in data
+ ? (data.minWpm as number)
+ : undefined
+ }
+ memoryDifference={getLbMemoryDifference(
+ getSelection(),
+ rank?.rank,
+ )}
+ isLbOptOut={getSnapshot()?.lbOptOut ?? false}
+ isBanned={getSnapshot()?.banned ?? false}
+ minTimeTyping={config?.leaderboards.minTimeTyping ?? 0}
+ userTimeTyping={getSnapshot()?.typingStats.timeTyping ?? 0}
+ />
+ )}
+ </AsyncContent>
+ </Show>
+
+ <AsyncContent
+ query={dataQuery}
+ loader={
+ <>
+ <div class="h-1 w-full rounded bg-sub-alt"></div>
+ <div class="flex justify-center pt-4 text-4xl">
+ <LoadingCircle />
+ </div>
+ </>
+ }
+ >
+ {(data) => (
+ <Conditional
+ if={data.entries.length === 0}
+ then={
+ <div class="flex flex-col items-center gap-4 pt-8">
+ <div class="text-xl">No entries found</div>
+ </div>
+ }
+ else={
+ <div class="grid gap-2">
+ <div class="grid grid-cols-2 items-center justify-between text-sm sm:text-base">
+ <NextUpdate type={getSelection().type} />
+ <Navigation
+ isLoading={
+ dataQuery.isLoading ||
+ dataQuery.isFetching ||
+ dataQuery.isRefetching
+ }
+ lastPage={Math.ceil((data?.count ?? 0) / pageSize)}
+ userPage={userPage()}
+ currentPage={getPage()}
+ onPageChange={setPage}
+ onScrollToUser={setScrollToUser}
+ />
+ </div>
+ <Table
+ type={getSelection().type === "weekly" ? "xp" : "speed"}
+ entries={data?.entries ?? []}
+ friendsOnly={getSelection().friendsOnly}
+ scrollToUser={scrollToUser}
+ onScrolledToUser={() => setScrollToUser(false)}
+ />
+ <div class="grid grid-cols-1 items-center justify-between text-sm sm:text-base">
+ <Navigation
+ lastPage={Math.ceil((data?.count ?? 0) / pageSize)}
+ currentPage={getPage()}
+ onPageChange={setPage}
+ onScrollToUser={setScrollToUser}
+ />
+ </div>
+ </div>
+ }
+ />
+ )}
+ </AsyncContent>
+ </div>
+ </div>
+ </Show>
+ );
+}
+
+function prefetch(): void {
+ void queryClient.prefetchQuery(
+ getLeaderboardQueryOptions({
+ type: "allTime",
+ mode: "time",
+ mode2: "15",
+ language: "english",
+ friendsOnly: false,
+ page: 0,
+ previous: false,
+ }),
+ );
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/Navigation.tsx b/frontend/src/ts/components/pages/leaderboard/Navigation.tsx
new file mode 100644
index 000000000000..3bcf80cfb313
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Navigation.tsx
@@ -0,0 +1,93 @@
+import { JSXElement, Setter, Show } from "solid-js";
+
+import { ExecReturn, SimpleModal } from "../../../utils/simple-modal";
+import { Button } from "../../common/Button";
+import { LoadingCircle } from "../../common/LoadingCircle";
+
+export function Navigation(props: {
+ lastPage: number;
+ userPage?: number;
+ currentPage: number;
+ onPageChange: Setter<number>;
+ onScrollToUser: Setter<boolean>;
+ isLoading?: boolean;
+}): JSXElement {
+ const goToPageModal = new SimpleModal({
+ id: "lbGoToPage",
+ title: "Go to page",
+ inputs: [
+ {
+ type: "number",
+ placeholder: "Page number",
+ },
+ ],
+ buttonText: "Go",
+ execFn: async (_thisPopup, pageNumber): Promise<ExecReturn> => {
+ const page = parseInt(pageNumber, 10);
+ if (isNaN(page) || page < 1) {
+ return {
+ status: 0,
+ message: "Invalid page number",
+ };
+ }
+
+ props.onPageChange(page - 1);
+
+ return {
+ status: 1,
+ message: "Navigating to page " + page,
+ showNotification: false,
+ };
+ },
+ });
+
+ const buttonClass = () => "px-3 sm:px-4 text-em-base";
+
+ return (
+ <div class="grid grid-flow-col items-center gap-2 justify-self-end">
+ <Show when={props.isLoading}>
+ <LoadingCircle color="sub" class="text-2xl" />
+ </Show>
+ <Button
+ onClick={() => props.onPageChange(0)}
+ fa={{ icon: "fa-crown", fixedWidth: true }}
+ disabled={props.currentPage === 0}
+ class={buttonClass()}
+ />
+ <Show when={props.userPage !== undefined}>
+ <Button
+ onClick={() => {
+ props.onPageChange(props.userPage as number);
+ props.onScrollToUser(true);
+ }}
+ fa={{ icon: "fa-user", fixedWidth: true }}
+ disabled={
+ props.userPage === undefined || props.currentPage === props.userPage
+ }
+ class={buttonClass()}
+ />
+ </Show>
+ <Button
+ onClick={() => {
+ const lastPage = props.lastPage;
+ props.onPageChange((old) => Math.max(0, Math.min(old, lastPage) - 1));
+ }}
+ fa={{ icon: "fa-chevron-left", fixedWidth: true }}
+ disabled={props.currentPage === 0}
+ class={buttonClass()}
+ />
+ <Button
+ onClick={() => goToPageModal.show(undefined, {})}
+ fa={{ icon: "fa-hashtag", fixedWidth: true }}
+ class={buttonClass()}
+ disabled={props.lastPage <= 1}
+ />
+ <Button
+ onClick={() => props.onPageChange((old) => old + 1)}
+ fa={{ icon: "fa-chevron-right", fixedWidth: true }}
+ disabled={props.currentPage + 1 >= props.lastPage}
+ class={buttonClass()}
+ />
+ </div>
+ );
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/NextUpdate.tsx b/frontend/src/ts/components/pages/leaderboard/NextUpdate.tsx
new file mode 100644
index 000000000000..c81bacc754b8
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/NextUpdate.tsx
@@ -0,0 +1,47 @@
+import { UTCDateMini } from "@date-fns/utc";
+import { differenceInSeconds, endOfDay, endOfWeek } from "date-fns";
+import {
+ createEffect,
+ createMemo,
+ createSignal,
+ JSXElement,
+ onCleanup,
+} from "solid-js";
+
+import { LeaderboardType } from "../../../stores/leaderboard-selection";
+import { secondsToString } from "../../../utils/date-and-time";
+
+export function NextUpdate(props: { type: LeaderboardType }): JSXElement {
+ const [tick, setTick] = createSignal(Date.now());
+
+ // Update the tick every second
+ createEffect(() => {
+ const interval = setInterval(() => setTick(Date.now()), 1000);
+ onCleanup(() => clearInterval(interval));
+ });
+
+ const nextUpdate = createMemo(() => {
+ const now = new Date(tick());
+ if (props.type === "daily") {
+ const diff = differenceInSeconds(endOfDay(new UTCDateMini()), now);
+ return "Next reset in: " + secondsToString(diff, true);
+ } else if (props.type === "allTime") {
+ const minutesToNextUpdate = 14 - (now.getMinutes() % 15);
+ const secondsToNextUpdate = 60 - now.getSeconds();
+ const totalSeconds = minutesToNextUpdate * 60 + secondsToNextUpdate;
+ return "Next update in: " + secondsToString(totalSeconds, true);
+ } else if (props.type === "weekly") {
+ const nextWeekTimestamp = endOfWeek(new UTCDateMini(), {
+ weekStartsOn: 1,
+ });
+ const totalSeconds = differenceInSeconds(nextWeekTimestamp, now);
+ return (
+ "Next reset in: " +
+ secondsToString(totalSeconds, true, true, ":", true, true)
+ );
+ }
+ return "";
+ });
+
+ return <div class="text-sub">{nextUpdate()}</div>;
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
new file mode 100644
index 000000000000..9d78b21d81c7
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -0,0 +1,263 @@
+import { ValidModeRule } from "@monkeytype/schemas/configuration";
+import { Language } from "@monkeytype/schemas/languages";
+import { Mode } from "@monkeytype/schemas/shared";
+import { Accessor, For, JSXElement, Show } from "solid-js";
+
+import { isLoggedIn } from "../../../signals/core";
+import { Selection } from "../../../stores/leaderboard-selection";
+import { FaSolidIcon } from "../../../types/font-awesome";
+import { Button } from "../../common/Button";
+
+type GroupItem<T> = { id: T; text: string; icon: FaSolidIcon };
+
+type LanguagesByModeByMode2 = Partial<Record<Mode, Record<string, Language[]>>>;
+
+type ValidLeaderboards = {
+ allTime: LanguagesByModeByMode2;
+ weekly: LanguagesByModeByMode2;
+ daily: LanguagesByModeByMode2;
+};
+
+export type ModeSelect = Pick<Selection, "mode" | "mode2">;
+
+export function Sidebar(props: {
+ selection: Accessor<Selection>;
+ onSelect: (selection: Selection) => void;
+ validModeRules: ValidModeRule[];
+ connectionsEnabled: boolean;
+}): JSXElement {
+ const updateSelection = (patch: Partial<Selection>) => {
+ props.onSelect(
+ normalizeSelection(
+ //@ts-expect-error this is fine
+ { ...props.selection(), ...patch },
+ getValidLeaderboards(props.validModeRules),
+ ),
+ );
+ };
+
+ const selectType = (type: Selection["type"]) => {
+ updateSelection({ type });
+ };
+
+ const selectMode = (value: ModeSelect) => {
+ updateSelection({ mode: value.mode, mode2: value.mode2 });
+ };
+
+ const selectLanguage = (language: Language) => {
+ updateSelection({ language });
+ };
+ const selectFriendsOnly = (friendsOnly: boolean) => {
+ updateSelection({ friendsOnly });
+ };
+
+ return (
+ <>
+ <Group
+ selected={props.selection().type}
+ onSelect={selectType}
+ items={[
+ {
+ id: "allTime",
+ text: "all-time english",
+ icon: "fa-globe-americas",
+ },
+ { id: "weekly", text: "weekly xp", icon: "fa-calendar-day" },
+ { id: "daily", text: "daily", icon: "fa-sun" },
+ ]}
+ />
+ <Show when={isLoggedIn() && props.connectionsEnabled}>
+ <Group
+ selected={props.selection().friendsOnly}
+ onSelect={selectFriendsOnly}
+ items={[
+ { id: false, text: "everyone", icon: "fa-users" },
+ { id: true, text: "friends only", icon: "fa-user-friends" },
+ ]}
+ />
+ </Show>
+
+ <Show when={props.selection().type !== "weekly"}>
+ <Group
+ selected={{
+ mode: props.selection().mode,
+ mode2: props.selection().mode2,
+ }}
+ onSelect={selectMode}
+ items={getModeButtons(
+ getValidLeaderboards(props.validModeRules)[props.selection().type],
+ props.selection().language as Language,
+ )}
+ />
+ </Show>
+ <Show when={props.selection().type === "daily"}>
+ <Group
+ selected={props.selection().language as Language}
+ onSelect={selectLanguage}
+ items={getLanguageButtons(
+ getValidLeaderboards(props.validModeRules).daily,
+ props.selection().mode as Mode,
+ props.selection().mode2 as string,
+ )}
+ />
+ </Show>
+ </>
+ );
+}
+
+function Group<T>(props: {
+ items: GroupItem<T>[];
+ selected: T;
+ onSelect: (selected: T) => void;
+}): JSXElement {
+ const isEqual = (a: unknown, b: unknown): boolean =>
+ typeof a === "object" ? JSON.stringify(a) === JSON.stringify(b) : a === b;
+
+ return (
+ <div class="mb-4 grid gap-4 rounded-xl bg-sub-alt p-4">
+ <For each={props.items}>
+ {(item) => (
+ <Button
+ onClick={() => props.onSelect(item.id)}
+ fa={{ icon: item.icon }}
+ text={item.text}
+ class="justify-start px-[0.75em]"
+ active={isEqual(item.id, props.selected)}
+ />
+ )}
+ </For>
+ </div>
+ );
+}
+
+function normalizeSelection(
+ draft: Selection,
+ valid: ValidLeaderboards,
+): Selection {
+ if (draft.type === "weekly") {
+ return {
+ ...draft,
+ mode: undefined,
+ mode2: undefined,
+ language: undefined,
+ previous: false,
+ };
+ }
+
+ let { mode, mode2, language } = draft;
+ const validModes = valid[draft.type];
+
+ if (valid === undefined) throw new Error("no valid leaderboards");
+
+ if (mode === null || validModes[mode] === undefined) {
+ const firstMode = Object.keys(validModes).sort()[0] as Mode | undefined;
+ if (!firstMode) {
+ throw new Error(`No valid mode for type ${draft.type}`);
+ }
+ mode = firstMode;
+ }
+
+ const validMode2 = validModes[mode] as Record<string, Language[]>;
+
+ if (mode2 === null || validMode2[mode2] === undefined) {
+ const firstMode2 = Object.keys(validMode2).sort(
+ (a, b) => parseInt(a) - parseInt(b),
+ )[0];
+ if (firstMode2 === undefined) {
+ throw new Error(`No valid mode2 for ${draft.type}:${mode}`);
+ }
+ mode2 = firstMode2;
+ }
+
+ const supportedLanguages = validMode2[mode2];
+ if (!supportedLanguages || supportedLanguages.length === 0) {
+ throw new Error(`Invalid leaderboard config for ${mode}:${mode2}`);
+ }
+
+ if (!language || !supportedLanguages.includes(language)) {
+ language = supportedLanguages.sort()[0] as Language;
+ }
+
+ return { ...draft, mode, mode2, language };
+}
+
+function getModeButtons(
+ valid: LanguagesByModeByMode2,
+ language?: Language,
+): GroupItem<ModeSelect>[] {
+ const modes = Object.entries(valid).flatMap(([mode, mode2List]) =>
+ Object.entries(mode2List)
+ .filter(
+ ([_, languages]) =>
+ language === undefined || languages.includes(language),
+ )
+ .flatMap(([mode2]) => ({
+ id: { mode, mode2 },
+ text: `${mode} ${mode2}`,
+ icon: mode === "time" ? "fa-clock" : "fa-align-left",
+ })),
+ );
+
+ return modes as GroupItem<ModeSelect>[];
+}
+
+function getLanguageButtons(
+ valid: LanguagesByModeByMode2,
+ mode: Mode,
+ mode2: string,
+): GroupItem<Language>[] {
+ if (mode === undefined) return [];
+
+ return (valid[mode]?.[mode2] ?? []).map((language) => ({
+ id: language,
+ text: language,
+ icon: "fa-globe",
+ }));
+}
+function getValidLeaderboards(
+ validModeRules: ValidModeRule[],
+): ValidLeaderboards {
+ //a rule can contain multiple values. create a flat list out of them
+ const dailyRules = validModeRules.flatMap((rule) => {
+ const languages = convertRuleOption(rule.language) as Language[];
+ const mode2List = convertRuleOption(rule.mode2);
+
+ return mode2List.map((mode2) => ({
+ mode: rule.mode as Mode,
+ mode2,
+ languages,
+ }));
+ });
+
+ return {
+ allTime: {
+ time: {
+ "15": ["english"],
+ "60": ["english"],
+ },
+ },
+ weekly: {},
+ daily: dailyRules.reduce<
+ Partial<Record<Mode, Record<string /*mode2*/, Language[]>>>
+ >((acc, { mode, mode2, languages }) => {
+ let modes = acc[mode];
+ if (modes === undefined) {
+ modes = {};
+ acc[mode] = modes;
+ }
+
+ let modes2 = modes[mode2];
+ if (modes2 === undefined) {
+ modes2 = [];
+ modes[mode2] = modes2;
+ }
+
+ modes2.push(...languages);
+ return acc;
+ }, {}),
+ };
+}
+
+function convertRuleOption(rule: string): string[] {
+ return rule.startsWith("(") ? rule.slice(1, -1).split("|") : [rule];
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/Table.tsx b/frontend/src/ts/components/pages/leaderboard/Table.tsx
new file mode 100644
index 000000000000..c6835f48b0c7
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Table.tsx
@@ -0,0 +1,480 @@
+import {
+ LeaderboardEntry,
+ XpLeaderboardEntry,
+} from "@monkeytype/schemas/leaderboards";
+import { createColumnHelper } from "@tanstack/solid-table";
+import { format as dateFormat } from "date-fns/format";
+import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
+import { Accessor, createMemo, JSXElement } from "solid-js";
+
+import { isFriend } from "../../../db";
+import { createEffectOn } from "../../../hooks/effects";
+import { bp } from "../../../signals/breakpoints";
+import { getConfig } from "../../../signals/config";
+import { getUserId } from "../../../signals/core";
+import { cn } from "../../../utils/cn";
+import { secondsToString } from "../../../utils/date-and-time";
+import { qs } from "../../../utils/dom";
+import { Formatting } from "../../../utils/format";
+import { abbreviateNumber } from "../../../utils/numbers";
+import { Conditional } from "../../common/Conditional";
+import { Fa } from "../../common/Fa";
+import { User } from "../../common/User";
+import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
+
+type SpeedEntry = LeaderboardEntry;
+type XpEntry = XpLeaderboardEntry;
+export type TableEntry = SpeedEntry | XpEntry;
+
+export function Table(
+ props: {
+ type: "speed" | "xp";
+ entries: TableEntry[];
+ friendsOnly: boolean;
+ hideHeader?: true;
+ } & (
+ | {
+ scrollToUser: Accessor<boolean>;
+ onScrolledToUser: () => void;
+ userOverride?: never;
+ }
+ | {
+ scrollToUser?: never;
+ onScrolledToUser?: never;
+ userOverride: Accessor<JSXElement>;
+ }
+ ),
+): JSXElement {
+ const commonProps = createMemo(() => ({
+ id: "leaderboardTable",
+ hideHeader: props.hideHeader,
+ class: cn(
+ "table-auto [&>tbody>tr>td]:py-3 [&>tbody>tr>td]:whitespace-nowrap [&>thead>tr>th]:align-middle",
+ "[&>tbody>tr>td]:px-3 [&>tbody>tr>td]:text-[0.9em] [&>thead>tr>th]:px-3 [&>thead>tr>th]:text-[0.8em]",
+ "sm:[&>tbody>tr>td]:px-4 sm:[&>tbody>tr>td]:text-[1em] sm:[&>thead>tr>th]:px-4 sm:[&>thead>tr>th]:text-[1em]",
+ "xl:[&>tbody>tr>td]:px-6 xl:[&>thead>tr>th]:px-6",
+ ),
+ rowSelection:
+ props.userOverride !== undefined
+ ? undefined
+ : {
+ getRowId: (row: { uid: string }) => row.uid,
+ activeRow: getUserId,
+ class: "text-main [&>td>div]:text-main [&>td>div>a]:text-main",
+ },
+ }));
+
+ const speedColumns = createMemo(() =>
+ getSpeedColumns({
+ friendsOnly: props.friendsOnly,
+ format: new Formatting(getConfig),
+ userOverride: props.userOverride,
+ addHeader: props.userOverride !== undefined && bp().xl,
+ }),
+ );
+ const xpColumns = createMemo(() =>
+ getXpColumns({
+ friendsOnly: props.friendsOnly,
+ userOverride: props.userOverride,
+ addHeader: props.userOverride !== undefined && bp().xl,
+ }),
+ );
+
+ createEffectOn(
+ () => props.scrollToUser?.(),
+ (enabled) => {
+ if (enabled) {
+ requestAnimationFrame(() => {
+ qs("#leaderboardTable tr[data-state='selected']")?.scrollIntoView({
+ block: "center",
+ });
+ props.onScrolledToUser?.();
+ });
+ }
+ },
+ );
+
+ return (
+ <Conditional
+ if={props.type === "speed"}
+ then={
+ <DataTable
+ {...commonProps()}
+ columns={speedColumns()}
+ data={props.entries as LeaderboardEntry[]}
+ />
+ }
+ else={
+ <DataTable
+ {...commonProps()}
+ columns={xpColumns()}
+ data={props.entries as XpLeaderboardEntry[]}
+ />
+ }
+ />
+ );
+}
+
+function getSpeedColumns({
+ friendsOnly,
+ format,
+ userOverride,
+ addHeader,
+}: {
+ friendsOnly: boolean;
+ format: Formatting;
+ userOverride?: Accessor<JSXElement>;
+ addHeader?: boolean;
+}): DataTableColumnDef<SpeedEntry>[] {
+ const defineColumn = createColumnHelper<SpeedEntry>().accessor;
+ const columns = [
+ defineColumn("friendsRank", {
+ header: () => <Fa icon="fa-user-friends" />,
+ cell: (info) =>
+ info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
+ meta: {
+ align: "center",
+ headerMeta: {
+ "aria-label": "Friends rank",
+ "data-balloon-pos": "down",
+ },
+ },
+ }),
+ defineColumn("rank", {
+ header: () => <Fa icon={friendsOnly ? "fa-users" : "fa-hashtag"} />,
+ cell: (info) =>
+ info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
+ meta: {
+ align: "center",
+ headerMeta: {
+ "aria-label": "Global rank",
+ "data-balloon-pos": "down",
+ },
+ },
+ }),
+ defineColumn("uid", {
+ header: "name",
+ cell: (info) =>
+ userOverride?.() ?? (
+ <User
+ user={info.row.original}
+ isFriend={isFriend(info.row.original.uid)}
+ class="text-[1em]"
+ />
+ ),
+ meta: {
+ cellMeta: () => ({ class: "w-full" }),
+ },
+ }),
+ defineColumn("wpm", {
+ header: format.typingSpeedUnit,
+ cell: (info) =>
+ wrapWithHeader({
+ value: format.typingSpeed(info.getValue(), {
+ showDecimalPlaces: true,
+ }),
+ header: format.typingSpeedUnit,
+ enabled: addHeader,
+ }),
+ meta: {
+ align: "right",
+ breakpoint: "xl",
+ },
+ }),
+ defineColumn("acc", {
+ header: "accuracy",
+ cell: (info) =>
+ wrapWithHeader({
+ value: format.percentage(info.getValue(), {
+ showDecimalPlaces: true,
+ }),
+ header: "accuracy",
+ enabled: addHeader,
+ }),
+ meta: {
+ align: "right",
+ breakpoint: "xl",
+ },
+ }),
+ defineColumn("wpm", {
+ id: "wpmAcc",
+ header: () => (
+ <>
+ <div>{format.typingSpeedUnit}</div>
+ <div class="opacity-50">accuracy</div>
+ </>
+ ),
+ cell: (info) => (
+ <>
+ <div>
+ {format.typingSpeed(info.row.original.wpm, {
+ showDecimalPlaces: true,
+ })}
+ </div>
+ <div class="text-sub">
+ {format.percentage(info.row.original.acc, {
+ showDecimalPlaces: true,
+ })}
+ </div>
+ </>
+ ),
+ meta: {
+ align: "right",
+ maxBreakpoint: "xl",
+ },
+ }),
+ defineColumn("raw", {
+ header: "raw",
+ cell: (info) =>
+ wrapWithHeader({
+ value: format.typingSpeed(info.getValue(), {
+ showDecimalPlaces: true,
+ }),
+ header: "raw",
+ enabled: addHeader,
+ }),
+ meta: {
+ align: "right",
+ breakpoint: "xl",
+ },
+ }),
+ defineColumn("consistency", {
+ header: "consistency",
+ cell: (info) =>
+ wrapWithHeader({
+ value: format.percentage(info.getValue(), {
+ showDecimalPlaces: true,
+ }),
+ header: "consistency",
+ enabled: addHeader,
+ }),
+ meta: {
+ align: "right",
+ breakpoint: "xl",
+ },
+ }),
+ defineColumn("raw", {
+ id: "rawCon",
+ header: () => (
+ <>
+ <div>raw</div>
+ <div class="opacity-50">consistency</div>
+ </>
+ ),
+ cell: (info) => (
+ <>
+ <div>
+ {format.typingSpeed(info.row.original.raw, {
+ showDecimalPlaces: true,
+ })}
+ </div>
+ <div class="text-sub">
+ {" "}
+ {format.percentage(info.row.original.consistency, {
+ showDecimalPlaces: true,
+ })}
+ </div>
+ </>
+ ),
+ meta: {
+ align: "right",
+ maxBreakpoint: "xl",
+ },
+ }),
+ defineColumn("timestamp", {
+ header: "date",
+ cell: (info) =>
+ info.getValue() !== undefined ? (
+ addHeader ? (
+ wrapWithHeader({
+ value: dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+ header: "date",
+ enabled: true,
+ })
+ ) : (
+ <div class="text-xs">
+ <div>{dateFormat(info.getValue(), "dd MMM yyyy")}</div>
+ <div class="text-sub">{dateFormat(info.getValue(), "HH:mm")}</div>
+ </div>
+ )
+ ) : (
+ ""
+ ),
+ meta: {
+ align: "right",
+ },
+ }),
+ ];
+
+ //remove first column if not friendsOnly
+ if (!friendsOnly) {
+ columns.shift();
+ }
+
+ //mark each column non sortable
+ return columns.map((it) => ({ ...it, enableSorting: false }));
+}
+
+function getXpColumns({
+ friendsOnly,
+ userOverride,
+ addHeader,
+}: {
+ friendsOnly: boolean;
+ userOverride?: Accessor<JSXElement>;
+ addHeader?: boolean;
+}): DataTableColumnDef<XpEntry>[] {
+ const defineColumn = createColumnHelper<XpEntry>().accessor;
+ const columns = [
+ defineColumn("friendsRank", {
+ header: () => <Fa icon="fa-user-friends" />,
+ cell: (info) =>
+ info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
+ meta: {
+ align: "center",
+ headerMeta: {
+ "aria-label": "Friends rank",
+ "data-balloon-pos": "down",
+ },
+ },
+ }),
+ defineColumn("rank", {
+ header: () => <Fa icon={friendsOnly ? "fa-users" : "fa-hashtag"} />,
+ cell: (info) =>
+ info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
+ meta: {
+ align: "center",
+ headerMeta: {
+ "aria-label": "Global rank",
+ "data-balloon-pos": "down",
+ },
+ },
+ }),
+ defineColumn("uid", {
+ header: "name",
+ cell: (info) => userOverride?.() ?? <User user={info.row.original} />,
+ meta: {
+ cellMeta: () => ({ class: "w-full" }),
+ },
+ }),
+ defineColumn("totalXp", {
+ header: "xp gained",
+ cell: (info) =>
+ wrapWithHeader({
+ value:
+ info.getValue() < 1000
+ ? info.getValue().toFixed(0)
+ : abbreviateNumber(info.getValue()),
+ header: "xp gained",
+ enabled: addHeader,
+ }),
+ meta: {
+ align: "right",
+ breakpoint: "xl",
+ },
+ }),
+ defineColumn("timeTypedSeconds", {
+ header: "time typed",
+ cell: (info) =>
+ wrapWithHeader({
+ value: secondsToString(Math.round(info.getValue()), true, true, ":"),
+ header: "time typed",
+ enabled: addHeader,
+ }),
+ meta: {
+ align: "right",
+ breakpoint: "xl",
+ },
+ }),
+ defineColumn("totalXp", {
+ id: "xpTimeTyped",
+ header: () => (
+ <>
+ <div>xp gained</div>
+ <div class="whitespace-nowrap opacity-50">time typed</div>
+ </>
+ ),
+ cell: (info) => (
+ <>
+ <div>
+ {info.getValue() < 1000
+ ? info.getValue().toFixed(0)
+ : abbreviateNumber(info.getValue())}
+ </div>
+ <div class="text-sub">
+ {" "}
+ {secondsToString(
+ Math.round(info.row.original.timeTypedSeconds),
+ true,
+ true,
+ ":",
+ )}
+ </div>
+ </>
+ ),
+ meta: {
+ align: "right",
+ maxBreakpoint: "xl",
+ },
+ }),
+
+ defineColumn("lastActivityTimestamp", {
+ header: "date",
+ cell: (info) =>
+ info.getValue() !== undefined ? (
+ addHeader ? (
+ wrapWithHeader({
+ value: dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+ header: "last activity",
+ enabled: true,
+ })
+ ) : (
+ <>
+ <div>{dateFormat(info.getValue(), "dd MMM yyyy")}</div>
+ <div class="text-sub">{dateFormat(info.getValue(), "HH:mm")}</div>
+ </>
+ )
+ ) : (
+ ""
+ ),
+ meta: {
+ align: "right",
+ cellMeta: (info) =>
+ info.value !== undefined
+ ? {
+ "aria-label": formatDistanceToNow(info.value, {
+ addSuffix: true,
+ }),
+ "data-balloon-pos": "left",
+ }
+ : {},
+ },
+ }),
+ ];
+
+ //remove first column if not friendsOnly
+ if (!friendsOnly) {
+ columns.shift();
+ }
+
+ //mark each column as non sortable
+ return columns.map((it) => ({
+ ...it,
+ enableSorting: false,
+ }));
+}
+
+function wrapWithHeader(options: {
+ value: string;
+ header: string;
+ enabled?: boolean;
+}): string | JSXElement {
+ return options.enabled ? (
+ <>
+ <div class="text-xs text-sub">{options.header}</div>
+ <div>{options.value}</div>
+ </>
+ ) : (
+ options.value
+ );
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/Title.tsx b/frontend/src/ts/components/pages/leaderboard/Title.tsx
new file mode 100644
index 000000000000..82dc19a6e70c
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Title.tsx
@@ -0,0 +1,114 @@
+import { UTCDateMini } from "@date-fns/utc/date/mini";
+import {
+ endOfDay,
+ endOfWeek,
+ startOfDay,
+ startOfWeek,
+ subDays,
+ subHours,
+ subMinutes,
+} from "date-fns";
+import { format as dateFormat } from "date-fns/format";
+import { createMemo, JSXElement, Show } from "solid-js";
+
+import { Selection } from "../../../stores/leaderboard-selection";
+import { capitalizeFirstLetter } from "../../../utils/strings";
+import { Button } from "../../common/Button";
+import { H2 } from "../../common/Headers";
+
+export function Title(props: {
+ selection: Selection;
+ onPreviousSelect: () => void;
+}): JSXElement {
+ const title = createMemo(() => {
+ const type =
+ props.selection.type === "allTime"
+ ? "All-time"
+ : props.selection.type === "weekly"
+ ? "Weekly XP"
+ : "Daily";
+
+ const friend = props.selection.friendsOnly ? "Friends " : "";
+
+ const language = capitalizeFirstLetter(props.selection.language ?? "");
+
+ const mode =
+ props.selection.type !== "weekly"
+ ? ` ${capitalizeFirstLetter(props.selection.mode ?? "")} ${props.selection.mode2}`
+ : "";
+ return `${type} ${language} ${mode} ${friend}Leaderboard`;
+ });
+
+ const subTitle = createMemo(() => {
+ const utcDateFormat = "EEEE, do MMMM yyyy";
+ const localDateFormat = "EEEE, do MMMM yyyy HH:mm";
+ const toLocalString = (
+ timestamp: UTCDateMini,
+ endTimestamp: UTCDateMini,
+ ): string =>
+ `local time\n${dateFormat(utcToLocalDate(timestamp), localDateFormat)} -\n${dateFormat(utcToLocalDate(endTimestamp), localDateFormat)}`;
+
+ if (props.selection.type === "daily") {
+ let timestamp = startOfDay(new UTCDateMini());
+ if (props.selection.previous) {
+ timestamp = subHours(timestamp, 24);
+ }
+ const endTimestamp = endOfDay(timestamp);
+ return {
+ dateString: dateFormat(timestamp, utcDateFormat) + " UTC",
+ localString: toLocalString(timestamp, endTimestamp),
+ buttonText: props.selection.previous ? "show today" : "show yesterday",
+ };
+ } else if (props.selection.type === "weekly") {
+ let timestamp = startOfWeek(new UTCDateMini(), { weekStartsOn: 1 });
+ if (props.selection.previous) {
+ timestamp = subDays(timestamp, 7);
+ }
+ const endTimestamp = endOfWeek(timestamp, { weekStartsOn: 1 });
+
+ return {
+ dateString: `${dateFormat(timestamp, utcDateFormat)} - ${dateFormat(endTimestamp, utcDateFormat)} UTC`,
+ localString: toLocalString(timestamp, endTimestamp),
+ buttonText: props.selection.previous
+ ? "show this week"
+ : "show last week",
+ };
+ }
+ return null;
+ });
+
+ return (
+ <div>
+ <H2
+ text={title()}
+ class="p-0 text-2xl text-text md:text-3xl xl:text-4xl"
+ />
+ <Show when={subTitle() !== null}>
+ <div class="flex items-center gap-2">
+ <div
+ class="text-sub"
+ data-balloon-pos="down"
+ data-balloon-break
+ aria-label={subTitle()?.localString}
+ >
+ {subTitle()?.dateString}
+ </div>
+ <div class="h-[1.75em] w-[0.25em] rounded bg-sub-alt"></div>
+ <Button
+ text={subTitle()?.buttonText}
+ type="text"
+ onClick={props.onPreviousSelect}
+ fa={{
+ icon: props.selection.previous ? "fa-forward" : "fa-backward",
+ variant: "solid",
+ }}
+ />
+ </div>
+ </Show>
+ </div>
+ );
+}
+
+function utcToLocalDate(timestamp: UTCDateMini): Date {
+ return subMinutes(timestamp, new Date().getTimezoneOffset());
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
new file mode 100644
index 000000000000..d70b6d7dd305
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
@@ -0,0 +1,121 @@
+import {
+ LeaderboardEntry,
+ XpLeaderboardEntry,
+} from "@monkeytype/schemas/leaderboards";
+import { formatDuration, intervalToDuration } from "date-fns";
+import { createMemo, JSXElement, Match, Show, Switch } from "solid-js";
+
+import { getConfig } from "../../../signals/config";
+import { Formatting } from "../../../utils/format";
+import { Conditional } from "../../common/Conditional";
+import { Fa } from "../../common/Fa";
+import { LoadingCircle } from "../../common/LoadingCircle";
+import { Table, TableEntry } from "./Table";
+
+export function UserRank(props: {
+ type: "speed" | "xp";
+ data?: LeaderboardEntry | XpLeaderboardEntry | null;
+ minWpm?: number;
+ friendsOnly: boolean;
+ total: number | undefined;
+ memoryDifference: number | undefined;
+ isLbOptOut: boolean;
+ isBanned: boolean;
+ minTimeTyping: number;
+ userTimeTyping: number;
+}): JSXElement {
+ const format = createMemo(() => new Formatting(getConfig));
+
+ const userOverride = () => {
+ if (props.data === undefined || props.data === null) {
+ return "";
+ }
+ const rank = props.friendsOnly
+ ? (props.data.friendsRank as number)
+ : props.data.rank;
+ const percentile = (rank / (props.total ?? 1)) * 100;
+
+ let percentileString = `Top ${percentile.toFixed(2)}%`;
+ if (rank === 1) {
+ percentileString = "GOAT";
+ }
+
+ return (
+ <div class="text-[1em]">
+ <div>You ({percentileString})</div>
+ <div class="text-em-xs text-sub sm:text-em-sm">
+ {" "}
+ <Show when={props.memoryDifference !== undefined}>
+ ({" "}
+ <Switch>
+ <Match when={props.memoryDifference === 0}>=</Match>
+ <Match when={(props.memoryDifference as number) > 0}>
+ <>
+ <Fa icon="fa-angle-up" fixedWidth />
+ {Math.abs(props.memoryDifference as number)}
+ </>
+ </Match>
+ <Match when={(props.memoryDifference as number) < 0}>
+ <>
+ <Fa icon="fa-angle-down" fixedWidth />
+ {Math.abs(props.memoryDifference as number)}
+ </>
+ </Match>
+ </Switch>{" "}
+ since you last checked)
+ </Show>
+ </div>
+ </div>
+ );
+ };
+
+ return (
+ <div class="flex h-18 rounded bg-sub-alt">
+ <Show
+ when={props.data !== undefined && props.total !== undefined}
+ fallback={<LoadingCircle class="w-full text-center text-2xl" />}
+ >
+ <Conditional
+ if={props.data !== null}
+ then={
+ <Table
+ type={props.type}
+ entries={[props.data as TableEntry]}
+ friendsOnly={props.friendsOnly}
+ userOverride={userOverride}
+ hideHeader={true}
+ />
+ }
+ else={
+ <div class="w-full p-4 text-center">
+ <Switch fallback="not qualified">
+ <Match when={props.isLbOptOut}>
+ You have opted out of the leaderboards.
+ </Match>
+ <Match when={props.isBanned}>Your account is banned.</Match>
+ <Match when={props.userTimeTyping < props.minTimeTyping}>
+ Your account must have
+ {formatDuration(
+ intervalToDuration({
+ start: 0,
+ end: props.minTimeTyping * 1000,
+ }),
+ )}{" "}
+ typed to be placed on the leaderboard.
+ </Match>
+ <Match when={props.minWpm}>
+ Not qualified (min speed required:{" "}
+ {format().typingSpeed(props.minWpm, {
+ showDecimalPlaces: true,
+ suffix: ` ${format().typingSpeedUnit}`,
+ })}
+ )
+ </Match>
+ </Switch>
+ </div>
+ }
+ />
+ </Show>
+ </div>
+ );
+}
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 2b7dc28532ec..755671e4d16c 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -17,12 +17,13 @@ import {
JSXElement,
Match,
Show,
+ splitProps,
Switch,
} from "solid-js";
import { z } from "zod";
import { useLocalStorage } from "../../../hooks/useLocalStorage";
-import { bp } from "../../../signals/breakpoints";
+import { cn } from "../../../utils/cn";
import { Conditional } from "../../common/Conditional";
import { Fa } from "../../common/Fa";
import {
@@ -41,7 +42,8 @@ const SortingStateSchema = z.array(
}),
);
-export type DataTableColumnDef<TData, TValue> =
+// oxlint-disable-next-line typescript/no-explicit-any
+export type DataTableColumnDef<TData, TValue = any> =
| ColumnDef<TData, TValue>
| AccessorFnColumnDef<TData, TValue>
| AccessorKeyColumnDef<TData, TValue>;
@@ -57,9 +59,11 @@ export type DataTableProps<TData, TValue> = {
class: string;
activeRow: Accessor<string | null>;
};
+ class?: string;
};
-export function DataTable<TData, TValue = unknown>(
+// oxlint-disable-next-line typescript/no-explicit-any
+export function DataTable<TData, TValue = any>(
props: DataTableProps<TData, TValue>,
): JSXElement {
const [sorting, setSorting] = useLocalStorage<SortingState>({
@@ -82,28 +86,6 @@ export function DataTable<TData, TValue = unknown>(
: [],
});
- const columnVisibility = createMemo(() => {
- const current = bp();
- const result = Object.fromEntries(
- props.columns.map((col, index) => {
- col.id =
- col.id ??
- ("accessorKey" in col && col.accessorKey !== null
- ? String(col.accessorKey)
- : `__col_${index}`);
-
- const visible =
- current[col.meta?.breakpoint ?? "xxs"] &&
- (col.meta?.maxBreakpoint === undefined ||
- !current[col.meta?.maxBreakpoint]);
-
- return [col.id, visible];
- }),
- );
-
- return result;
- });
-
const [rowSelection, setRowSelection] = createSignal({});
createEffect(() => {
if (!props.rowSelection || props.rowSelection.activeRow === undefined) {
@@ -135,23 +117,63 @@ export function DataTable<TData, TValue = unknown>(
get sorting() {
return sorting();
},
- get columnVisibility() {
- return columnVisibility();
- },
get rowSelection() {
return rowSelection();
},
},
});
+ //create column visibility classes once, make them accessible via the column.id
+ const columnVisibility = createMemo(() => {
+ return Object.fromEntries(
+ table.getAllColumns().map((it) => {
+ const breakpoint =
+ it.columnDef.meta?.breakpoint === "xxl"
+ ? "2xl"
+ : it.columnDef.meta?.breakpoint;
+ const maxBreakpoint =
+ it.columnDef.meta?.maxBreakpoint === "xxl"
+ ? "2xl"
+ : it.columnDef.meta?.maxBreakpoint;
+
+ // 🚨 Tailwind does not generate CSS for dynamically constructed class names.
+ const classes = {
+ hidden: false,
+ "xxs:table-cell": false,
+ "xs:table-cell": false,
+ "md:table-cell": false,
+ "lg:table-cell": false,
+ "xl:table-cell": false,
+ "2xl:table-cell": false,
+ "xxs:hidden": false,
+ "xs:hidden": false,
+ "md:hidden": false,
+ "lg:hidden": false,
+ "xl:hidden": false,
+ "2xl:hidden": false,
+ };
+ if (breakpoint !== undefined) {
+ classes.hidden = true;
+ //@ts-expect-error shhhh
+ classes[`${breakpoint}:table-cell`] = true;
+ }
+ if (maxBreakpoint !== undefined) {
+ //@ts-expect-error shhhh
+ classes[`${maxBreakpoint}:hidden`] = true;
+ }
+ return [it.id, classes];
+ }),
+ );
+ });
+
return (
<Show when={table.getRowModel().rows?.length} fallback={props.fallback}>
- <Table id={props.id}>
+ <Table id={props.id} class={props.class}>
<Show when={!props.hideHeader}>
<TableHeader>
<For each={table.getHeaderGroups()}>
{(headerGroup) => (
- <TableRow>
+ <TableRow class="odd:bg-bg">
<For each={headerGroup.headers}>
{(header) => (
<Conditional
@@ -166,6 +188,7 @@ export function DataTable<TData, TValue = unknown>(
? "descending"
: "none"
}
+ class={cn(columnVisibility()[header.column.id])}
>
<button
type="button"
@@ -173,18 +196,21 @@ export function DataTable<TData, TValue = unknown>(
onClick={(e) => {
header.column.getToggleSortingHandler()?.(e);
}}
- class="m-0 box-border flex h-full w-full cursor-pointer items-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap text-sub hover:bg-sub-alt"
- classList={{
- "justify-start text-left":
- (header.column.columnDef.meta?.align ??
- "left") === "left",
- "justify-center text-center":
- header.column.columnDef.meta?.align ===
- "center",
- "justify-end text-right":
- header.column.columnDef.meta?.align ===
- "right",
- }}
+ class={cn(
+ "m-0 box-border flex h-full w-full cursor-pointer items-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap text-sub hover:bg-sub-alt",
+ {
+ "justify-start text-left":
+ (header.column.columnDef.meta?.align ??
+ "left") === "left",
+ "justify-center text-center":
+ header.column.columnDef.meta?.align ===
+ "center",
+ "justify-end text-right":
+ header.column.columnDef.meta?.align ===
+ "right",
+ },
+ header.column.columnDef.meta?.headerClass,
+ )}
{...(header.column.columnDef.meta?.headerMeta ??
{})}
>
@@ -221,16 +247,20 @@ export function DataTable<TData, TValue = unknown>(
else={
<TableHead
colSpan={header.colSpan}
- classList={{
- "text-left":
- (header.column.columnDef.meta?.align ??
- "left") === "left",
- "text-center":
- header.column.columnDef.meta?.align ===
- "center",
- "text-right":
- header.column.columnDef.meta?.align === "right",
- }}
+ class={cn(
+ {
+ "text-left":
+ (header.column.columnDef.meta?.align ??
+ "left") === "left",
+ "text-center":
+ header.column.columnDef.meta?.align ===
+ "center",
+ "text-right":
+ header.column.columnDef.meta?.align ===
+ "right",
+ },
+ columnVisibility()[header.column.id],
+ )}
{...(header.column.columnDef.meta?.headerMeta ??
{})}
>
@@ -265,25 +295,32 @@ export function DataTable<TData, TValue = unknown>(
>
<For each={row.getVisibleCells()}>
{(cell) => {
- const cellMeta =
+ const [cellClass, cellMeta] = splitProps(
typeof cell.column.columnDef.meta?.cellMeta === "function"
? cell.column.columnDef.meta.cellMeta({
value: cell.getValue(),
row: cell.row.original,
})
- : (cell.column.columnDef.meta?.cellMeta ?? {});
+ : (cell.column.columnDef.meta?.cellMeta ?? {}),
+ ["class"],
+ );
return (
<TableCell
{...cellMeta}
- classList={{
- "text-left":
- (cell.column.columnDef.meta?.align ?? "left") ===
- "left",
- "text-center":
- cell.column.columnDef.meta?.align === "center",
- "text-right":
- cell.column.columnDef.meta?.align === "right",
- }}
+ class={cn(
+ "",
+ {
+ "text-left":
+ (cell.column.columnDef.meta?.align ?? "left") ===
+ "left",
+ "text-center":
+ cell.column.columnDef.meta?.align === "center",
+ "text-right":
+ cell.column.columnDef.meta?.align === "right",
+ },
+ columnVisibility()[cell.column.id],
+ cellClass.class,
+ )}
>
{flexRender(
cell.column.columnDef.cell,
diff --git a/frontend/src/ts/components/ui/table/Table.tsx b/frontend/src/ts/components/ui/table/Table.tsx
index 517f61be3cd0..6e7d8b8f1038 100644
--- a/frontend/src/ts/components/ui/table/Table.tsx
+++ b/frontend/src/ts/components/ui/table/Table.tsx
@@ -8,10 +8,7 @@ const Table: Component<ComponentProps<"table">> = (props) => {
const [local, others] = splitProps(props, ["class"]);
return (
<table
- class={cn(
- "w-full border-separate border-spacing-0 [&>tbody>tr>td]:p-0 [&>thead>tr>th]:p-2",
- local.class,
- )}
+ class={cn("w-full border-separate border-spacing-0", local.class)}
{...others}
></table>
);
@@ -20,23 +17,14 @@ const Table: Component<ComponentProps<"table">> = (props) => {
const TableHeader: Component<ComponentProps<"thead">> = (props) => {
const [local, others] = splitProps(props, ["class"]);
return (
- <thead
- class={cn("text-xs text-sub [&>tr]:bg-none", local.class)}
- {...others}
- ></thead>
+ <thead class={cn("text-xs text-sub", local.class)} {...others}></thead>
);
};
const TableBody: Component<ComponentProps<"tbody">> = (props) => {
const [local, others] = splitProps(props, ["class"]);
return (
- <tbody
- class={cn(
- "text-sm xl:text-base [&>tr]:odd:bg-sub-alt [&>tr>td]:first:rounded-l [&>tr>td]:last:rounded-r",
- local.class,
- )}
- {...others}
- ></tbody>
+ <tbody class={cn("text-sm xl:text-base", local.class)} {...others}></tbody>
);
};
@@ -47,7 +35,7 @@ const TableFooter: Component<ComponentProps<"tfoot">> = (props) => {
const TableRow: Component<ComponentProps<"tr">> = (props) => {
const [local, others] = splitProps(props, ["class"]);
- return <tr class={cn(local.class)} {...others}></tr>;
+ return <tr class={cn("odd:bg-sub-alt", local.class)} {...others}></tr>;
};
const TableHead: Component<ComponentProps<"th">> = (props) => {
@@ -56,7 +44,7 @@ const TableHead: Component<ComponentProps<"th">> = (props) => {
<th
aria-label={local["aria-label"]}
class={cn(
- "has-button:p-0 appearance-none align-bottom text-xs font-normal",
+ "has-button:p-0 appearance-none p-2 align-bottom text-xs font-normal",
local.class,
)}
{...others}
@@ -66,7 +54,15 @@ const TableHead: Component<ComponentProps<"th">> = (props) => {
const TableCell: Component<ComponentProps<"td">> = (props) => {
const [local, others] = splitProps(props, ["class"]);
- return <td class={cn("appearance-none", local.class)} {...others}></td>;
+ return (
+ <td
+ class={cn(
+ "appearance-none p-0 py-1 first:rounded-l last:rounded-r",
+ local.class,
+ )}
+ {...others}
+ ></td>
+ );
};
const TableCaption: Component<ComponentProps<"caption">> = (props) => {
diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index 99e6b51e487c..1662478d1aec 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -12,7 +12,7 @@ import * as PageLogin from "../pages/login";
import * as PageLoading from "../pages/loading";
import * as Friends from "../pages/friends";
import * as Page404 from "../pages/404";
-import * as PageLeaderboards from "../pages/leaderboards";
+import * as PageLeaderboards from "../pages/leaderboard";
import * as PageAccountSettings from "../pages/account-settings";
import * as PageTransition from "../states/page-transition";
import * as AdController from "../controllers/ad-controller";
diff --git a/frontend/src/ts/event-handlers/leaderboards.ts b/frontend/src/ts/event-handlers/leaderboards.ts
deleted file mode 100644
index 61769069e879..000000000000
--- a/frontend/src/ts/event-handlers/leaderboards.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { showPopup } from "../modals/simple-modals";
-import { qs } from "../utils/dom";
-
-const lb = qs("#pageLeaderboards");
-
-lb?.qsa(".jumpButtons button[data-action='goToPage']").on("click", () => {
- showPopup("lbGoToPage");
-});
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index 10f8dbc13943..5a40de8dd0bf 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -3,7 +3,6 @@ import "./event-handlers/keymap";
import "./event-handlers/test";
import "./event-handlers/settings";
import "./event-handlers/account";
-import "./event-handlers/leaderboards";
import "./event-handlers/login";
import "./event-handlers/nav";
diff --git a/frontend/src/ts/modals/simple-modals-base.ts b/frontend/src/ts/modals/simple-modals-base.ts
index d6004fa3f685..8b370f43b0cd 100644
--- a/frontend/src/ts/modals/simple-modals-base.ts
+++ b/frontend/src/ts/modals/simple-modals-base.ts
@@ -24,8 +24,7 @@ export type PopupKey =
| "resetProgressCustomTextLong"
| "updateCustomTheme"
| "deleteCustomTheme"
- | "devGenerateData"
- | "lbGoToPage";
+ | "devGenerateData";
export const list: Record<PopupKey, SimpleModal | undefined> = {
updateEmail: undefined,
@@ -50,7 +49,6 @@ export const list: Record<PopupKey, SimpleModal | undefined> = {
updateCustomTheme: undefined,
deleteCustomTheme: undefined,
devGenerateData: undefined,
- lbGoToPage: undefined,
};
export function showPopup(
diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts
index 7f31d2e76e5b..7fecaf3a08ee 100644
--- a/frontend/src/ts/modals/simple-modals.ts
+++ b/frontend/src/ts/modals/simple-modals.ts
@@ -41,7 +41,6 @@ import {
UserEmailSchema,
UserNameSchema,
} from "@monkeytype/schemas/users";
-import { goToPage } from "../pages/leaderboards";
import FileStorage from "../utils/file-storage";
import { z } from "zod";
import { remoteValidation } from "../utils/remote-validation";
@@ -1221,32 +1220,3 @@ list.devGenerateData = new SimpleModal({
};
},
});
-
-list.lbGoToPage = new SimpleModal({
- id: "lbGoToPage",
- title: "Go to page",
- inputs: [
- {
- type: "number",
- placeholder: "Page number",
- },
- ],
- buttonText: "Go",
- execFn: async (_thisPopup, pageNumber): Promise<ExecReturn> => {
- const page = parseInt(pageNumber, 10);
- if (isNaN(page) || page < 1) {
- return {
- status: 0,
- message: "Invalid page number",
- };
- }
-
- goToPage(page - 1);
-
- return {
- status: 1,
- message: "Navigating to page " + page,
- showNotification: false,
- };
- },
-});
diff --git a/frontend/src/ts/pages/leaderboard.ts b/frontend/src/ts/pages/leaderboard.ts
new file mode 100644
index 000000000000..a6c93016b303
--- /dev/null
+++ b/frontend/src/ts/pages/leaderboard.ts
@@ -0,0 +1,86 @@
+import {
+ LeaderboardUrlParams,
+ LeaderboardUrlParamsSchema,
+ Selection,
+ setPage,
+ setSelection,
+} from "../stores/leaderboard-selection";
+import { PageWithUrlParams } from "./page";
+import * as Skeleton from "../utils/skeleton";
+import { onDOMReady, qsr } from "../utils/dom";
+import { configurationPromise as serverConfigurationPromise } from "../ape/server-configuration";
+
+export const page = new PageWithUrlParams({
+ id: "leaderboards",
+ element: qsr(".page.pageLeaderboards"),
+ path: "/leaderboards",
+ urlParamsSchema: LeaderboardUrlParamsSchema,
+ loadingOptions: {
+ style: "spinner",
+ loadingMode: () => "sync",
+ loadingPromise: async () => {
+ await serverConfigurationPromise;
+ },
+ },
+
+ afterHide: async (): Promise<void> => {
+ Skeleton.remove("pageLeaderboards");
+ },
+ beforeShow: async (options): Promise<void> => {
+ Skeleton.append("pageLeaderboards", "main");
+ readGetParameters(options.urlParams);
+ },
+});
+
+onDOMReady(async () => {
+ Skeleton.add("pageLeaderboards");
+});
+
+function readGetParameters(params: LeaderboardUrlParams | undefined): void {
+ if (params === undefined || params.type === undefined) return;
+
+ let newSelection: Partial<Selection> = {
+ type: params.type,
+ friendsOnly: params.friendsOnly ?? false,
+ };
+
+ if (params.type === "weekly") {
+ newSelection.previous = params.lastWeek ?? false;
+ } else {
+ newSelection.mode = params.mode ?? "time";
+ newSelection.mode2 = params.mode2 ?? "15";
+ newSelection.language = params.language ?? "english";
+ newSelection.previous =
+ (params.type === "daily" && params.yesterday) ?? false;
+ }
+
+ setSelection({ ...getSelection(), ...newSelection } as Selection);
+
+ if (params.page !== undefined) {
+ setPage(params.page - 1);
+ }
+}
+
+export function updateGetParameters(
+ selection: Selection,
+ pageNumber: number,
+): void {
+ const params: LeaderboardUrlParams = {
+ type: selection.type,
+ mode: selection.mode,
+ mode2: selection.mode2,
+ language: selection.language,
+ page: pageNumber + 1,
+ };
+
+ if (selection.type === "weekly" && selection.previous) {
+ params.lastWeek = true;
+ }
+ if (selection.type === "daily" && selection.previous) {
+ params.yesterday = true;
+ }
+ if (selection.friendsOnly) {
+ params.friendsOnly = true;
+ }
+ page.setUrlParams(params);
+}
diff --git a/frontend/src/ts/pages/leaderboards.ts b/frontend/src/ts/pages/leaderboards.ts
deleted file mode 100644
index fcac61fcb67c..000000000000
--- a/frontend/src/ts/pages/leaderboards.ts
+++ /dev/null
@@ -1,1527 +0,0 @@
-import { PageWithUrlParams } from "./page";
-import * as Skeleton from "../utils/skeleton";
-import Config from "../config";
-import {
- LeaderboardEntry,
- XpLeaderboardEntry,
-} from "@monkeytype/schemas/leaderboards";
-import { capitalizeFirstLetter } from "../utils/strings";
-import Ape from "../ape";
-import * as Notifications from "../elements/notifications";
-import Format from "../utils/format";
-import { getAuthenticatedUser, isAuthenticated } from "../firebase";
-import * as DB from "../db";
-import {
- endOfDay,
- endOfWeek,
- format,
- formatDuration,
- intervalToDuration,
- startOfDay,
- startOfWeek,
- subDays,
- subHours,
- subMinutes,
-} from "date-fns";
-import { differenceInSeconds } from "date-fns/differenceInSeconds";
-import * as DateTime from "../utils/date-and-time";
-import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
-import { getHTMLById as getBadgeHTMLbyId } from "../controllers/badge-controller";
-import { isDevEnvironment } from "../utils/misc";
-import { abbreviateNumber } from "../utils/numbers";
-import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
-import { z } from "zod";
-import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
-import { UTCDateMini } from "@date-fns/utc";
-import * as ConfigEvent from "../observables/config-event";
-import { getActivePage } from "../signals/core";
-import {
- PaginationQuery,
- FriendsOnlyQuery,
-} from "@monkeytype/contracts/leaderboards";
-import { Language, LanguageSchema } from "@monkeytype/schemas/languages";
-import { isSafeNumber } from "@monkeytype/util/numbers";
-import { Mode, Mode2, ModeSchema } from "@monkeytype/schemas/shared";
-import * as ServerConfiguration from "../ape/server-configuration";
-import { getAvatarElement } from "../utils/discord-avatar";
-import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
-
-const LeaderboardTypeSchema = z.enum(["allTime", "weekly", "daily"]);
-type LeaderboardType = z.infer<typeof LeaderboardTypeSchema>;
-const utcDateFormat = "EEEE, do MMMM yyyy";
-const localDateFormat = "EEEE, do MMMM yyyy HH:mm";
-
-type AllTimeState = {
- type: "allTime";
- mode: "time";
- mode2: "15" | "60";
- language: "english";
- data: LeaderboardEntry[] | null;
- count: number;
- userData: LeaderboardEntry | null;
-};
-
-type WeeklyState = {
- type: "weekly";
- lastWeek: boolean;
- data: XpLeaderboardEntry[] | null;
- count: number;
- userData: XpLeaderboardEntry | null;
-};
-
-type DailyState = {
- type: "daily";
- mode: Mode;
- mode2: Mode2<DailyState["mode"]>;
- yesterday: boolean;
- minWpm: number;
- language: Language;
- data: LeaderboardEntry[] | null;
- count: number;
- userData: LeaderboardEntry | null;
-};
-
-type State = {
- type: LeaderboardType;
- loading: boolean;
- updating: boolean;
- page: number;
- pageSize: number;
- friendsOnly: boolean;
- title: string;
- error?: string;
- scrollToUserAfterFill: boolean;
- goToUserPage: boolean;
-} & (AllTimeState | WeeklyState | DailyState);
-
-const state = {
- loading: true,
- updating: false,
- type: "allTime",
- mode: "time",
- mode2: "15",
- data: null,
- userData: null,
- page: 0,
- pageSize: 50,
- friendsOnly: false,
- title: "All-time English Time 15 Leaderboard",
- scrollToUserAfterFill: false,
- goToUserPage: false,
-} as State;
-
-const SelectorSchema = z.object({
- type: LeaderboardTypeSchema,
- mode: ModeSchema.optional(),
- mode2: z.string().optional(),
- language: LanguageSchema.optional(),
- yesterday: z.boolean().optional(),
- lastWeek: z.boolean().optional(),
- friendsOnly: z.boolean().optional(),
-});
-const UrlParameterSchema = SelectorSchema.extend({
- page: z.number(),
- goToUserPage: z.boolean(),
-}).partial();
-type UrlParameter = z.infer<typeof UrlParameterSchema>;
-
-const selectorLS = new LocalStorageWithSchema({
- key: "leaderboardSelector",
- schema: SelectorSchema,
- fallback: { type: "allTime", mode2: "15" },
-});
-
-type LanguagesByModeByMode2 = Partial<
- Record<Mode, Record<string /*mode2*/, Language[]>>
->;
-
-type ValidLeaderboards = {
- allTime: LanguagesByModeByMode2;
- daily: LanguagesByModeByMode2;
-};
-
-const validLeaderboards: ValidLeaderboards = {
- allTime: {
- time: {
- "15": ["english"],
- "60": ["english"],
- },
- },
- daily: {},
-};
-
-function updateTitle(): void {
- const type =
- state.type === "allTime"
- ? "All-time"
- : state.type === "weekly"
- ? "Weekly XP"
- : "Daily";
-
- const friend = state.friendsOnly ? "Friends " : "";
-
- const language =
- state.type !== "weekly" ? capitalizeFirstLetter(state.language) : "";
-
- const mode =
- state.type !== "weekly"
- ? ` ${capitalizeFirstLetter(state.mode)} ${state.mode2}`
- : "";
-
- state.title = `${type} ${language} ${mode} ${friend}Leaderboard`;
- qs(".page.pageLeaderboards .bigtitle >.text")?.setText(state.title);
-
- qs(".page.pageLeaderboards .bigtitle .subtext")?.hide();
- qsa(".page.pageLeaderboards .bigtitle button")?.hide();
- qs(".page.pageLeaderboards .bigtitle .subtext .divider")?.hide();
-
- if (state.type === "daily") {
- qs(".page.pageLeaderboards .bigtitle .subtext")?.show();
- qs(
- ".page.pageLeaderboards .bigtitle button[data-action='toggleYesterday']",
- )?.show();
- qs(".page.pageLeaderboards .bigtitle .subtext .divider")?.show();
-
- if (state.yesterday) {
- qs(
- ".page.pageLeaderboards .bigtitle button[data-action='toggleYesterday']",
- )?.setHtml(`
- <i class="fas fa-forward"></i>
- show today
- `);
- } else {
- qs(
- ".page.pageLeaderboards .bigtitle button[data-action='toggleYesterday']",
- )?.setHtml(`
- <i class="fas fa-backward"></i>
- show yesterday
- `);
- }
-
- let timestamp = startOfDay(new UTCDateMini());
- if (state.yesterday) {
- timestamp = subHours(timestamp, 24);
- }
-
- updateTimeText(
- format(timestamp, utcDateFormat) + " UTC",
- utcToLocalDate(timestamp),
- utcToLocalDate(endOfDay(timestamp)),
- );
- } else if (state.type === "weekly") {
- qs(".page.pageLeaderboards .bigtitle .subtext")?.show();
- qs(
- ".page.pageLeaderboards .bigtitle button[data-action='toggleLastWeek']",
- )?.show();
- qs(".page.pageLeaderboards .bigtitle .subtext .divider")?.show();
-
- if (state.lastWeek) {
- qs(
- ".page.pageLeaderboards .bigtitle button[data-action='toggleLastWeek']",
- )?.setHtml(`
- <i class="fas fa-forward"></i>
- show this week
- `);
- } else {
- qs(
- ".page.pageLeaderboards .bigtitle button[data-action='toggleLastWeek']",
- )?.setHtml(`
- <i class="fas fa-backward"></i>
- show last week
- `);
- }
-
- let timestamp = startOfWeek(new UTCDateMini(), { weekStartsOn: 1 });
- if (state.lastWeek) {
- timestamp = subDays(timestamp, 7);
- }
- const endingTimestamp = endOfWeek(timestamp, { weekStartsOn: 1 });
-
- const dateString = `${format(timestamp, utcDateFormat)} - ${format(
- endingTimestamp,
- utcDateFormat,
- )} UTC`;
- updateTimeText(
- dateString,
- utcToLocalDate(timestamp),
- utcToLocalDate(endingTimestamp),
- );
- }
-}
-
-async function requestData(update = false): Promise<void> {
- if (update) {
- state.updating = true;
- state.error = undefined;
- } else {
- state.loading = true;
- state.error = undefined;
- state.data = null;
- state.userData = null;
- }
- updateContent();
-
- const defineRequests = <TQuery, TRank, TData>(
- data: (args: {
- query: TQuery & PaginationQuery & FriendsOnlyQuery;
- }) => Promise<TData>,
- rank: (args: { query: TQuery }) => Promise<TRank>,
- baseQuery: TQuery,
- ): {
- rank: undefined | (() => Promise<TRank>);
- data: () => Promise<TData>;
- } => ({
- rank: async () =>
- rank({
- query: {
- ...baseQuery,
- friendsOnly: state.friendsOnly || undefined,
- },
- }),
- data: async () =>
- data({
- query: {
- ...baseQuery,
- page: state.page,
- pageSize: state.pageSize,
- friendsOnly: state.friendsOnly || undefined,
- },
- }),
- });
-
- let requests;
- if (state.type === "allTime") {
- requests = defineRequests(Ape.leaderboards.get, Ape.leaderboards.getRank, {
- language: "english",
- mode: "time",
- mode2: state.mode2,
- });
- } else if (state.type === "daily") {
- requests = defineRequests(
- Ape.leaderboards.getDaily,
- Ape.leaderboards.getDailyRank,
- {
- language: state.language,
- mode: state.mode,
- mode2: state.mode2,
- daysBefore: state.yesterday ? 1 : undefined,
- },
- );
- } else if (state.type === "weekly") {
- requests = defineRequests(
- Ape.leaderboards.getWeeklyXp,
- Ape.leaderboards.getWeeklyXpRank,
- {
- weeksBefore: state.lastWeek ? 1 : undefined,
- },
- );
- } else {
- throw new Error("unknown state type");
- }
-
- if (!isAuthenticated() || state.userData !== null) {
- requests.rank = undefined;
- }
-
- if (state.goToUserPage && requests.rank !== undefined) {
- state.goToUserPage = false;
- const rankResponse = await requests.rank();
- if (
- rankResponse !== undefined &&
- rankResponse.status === 200 &&
- rankResponse.body.data !== null
- ) {
- state.userData = rankResponse.body.data;
- state.page = Math.floor((state.userData.rank - 1) / state.pageSize);
- updateGetParameters();
- }
- requests.rank = undefined;
- }
-
- const [dataResponse, rankResponse] = await Promise.all([
- requests.data(),
- requests.rank?.(),
- ]);
-
- if (dataResponse.status === 200) {
- state.data = dataResponse.body.data.entries;
- state.count = dataResponse.body.data.count;
- state.pageSize = dataResponse.body.data.pageSize;
-
- if (state.type === "daily") {
- //@ts-expect-error not sure why this is causing errors when it's clearly defined in the schema
- // oxlint-disable-next-line no-unsafe-assignment
- state.minWpm = dataResponse.body.data.minWpm;
- }
- } else {
- state.data = null;
-
- if (dataResponse.status === 404) {
- state.error = "No leaderboard found";
- } else {
- state.error = "Something went wrong";
- Notifications.add(
- "Failed to get leaderboard: " + dataResponse.body.message,
- -1,
- );
- }
- }
-
- if (state.userData === null && rankResponse !== undefined) {
- if (rankResponse.status === 200) {
- if (rankResponse.body.data !== null) {
- state.userData = rankResponse.body.data;
- }
- } else {
- state.userData = null;
- state.error = "Something went wrong";
- Notifications.add("Failed to get rank: " + rankResponse.body.message, -1);
- }
- }
-
- state.loading = false;
- state.updating = false;
- updateContent();
- if (!update && isAuthenticated()) {
- fillUser();
- }
- return;
-}
-
-function updateJumpButtons(): void {
- const el = qsa(".page.pageLeaderboards .titleAndButtons .jumpButtons");
- el?.qsa("button")?.removeClass("active");
-
- const totalPages = Math.ceil(state.count / state.pageSize);
-
- if (totalPages <= 1) {
- el?.qsa("button")?.disable();
- } else {
- el?.qsa("button")?.enable();
- }
-
- if (state.page === 0) {
- el?.qs("button[data-action='previousPage']")?.disable();
- el?.qs("button[data-action='firstPage']")?.disable();
- } else {
- el?.qs("button[data-action='previousPage']")?.enable();
- el?.qs("button[data-action='firstPage']")?.enable();
- }
-
- if (isAuthenticated()) {
- const userButton = el?.qs("button[data-action='userPage']");
- if (!state.userData) {
- userButton?.disable();
- } else {
- const userPage = Math.floor((state.userData.rank - 1) / state.pageSize);
- if (state.page === userPage) {
- userButton?.disable();
- } else {
- userButton?.enable();
- }
- }
- }
-
- if (state.page >= totalPages - 1) {
- el?.qs("button[data-action='nextPage']")?.disable();
- } else {
- el?.qs("button[data-action='nextPage']")?.enable();
- }
-}
-
-function buildTableRow(entry: LeaderboardEntry, me = false): HTMLElement {
- const formatted = {
- wpm: Format.typingSpeed(entry.wpm, { showDecimalPlaces: true }),
- acc: Format.percentage(entry.acc, { showDecimalPlaces: true }),
- raw: Format.typingSpeed(entry.raw, { showDecimalPlaces: true }),
- con: Format.percentage(entry.consistency, { showDecimalPlaces: true }),
- };
-
- const element = document.createElement("tr");
- if (me) {
- element.classList.add("me");
- }
- element.dataset["uid"] = entry.uid;
- element.innerHTML = `
- <td>${formatRank(entry.friendsRank)}</td>
- <td>${formatRank(entry.rank)}</td>
- <td>
- <div class="avatarNameBadge">
- <div class="avatarPlaceholder"></div>
- <a href="${location.origin}/profile/${
- entry.name
- }" class="entryName" uid=${entry.uid} router-link>${entry.name}</a>
- <div class="flagsAndBadge">
- ${getHtmlByUserFlags({
- ...entry,
- isFriend: DB.isFriend(entry.uid),
- })}
- ${
- isSafeNumber(entry.badgeId) ? getBadgeHTMLbyId(entry.badgeId) : ""
- }
- </div>
- </div>
- </td>
- <td class="stat narrow">
- ${formatted.wpm}
- <div class="sub">${formatted.acc}</div>
- </td>
- </td>
- <td class="stat narrow rawAndConsistency">
- ${formatted.raw}
- <div class="sub">${formatted.con}</div>
- </td>
- <td class="stat wide">${formatted.wpm}</td>
- <td class="stat wide">${formatted.acc}</td>
- <td class="stat wide">${formatted.raw}</td>
- <td class="stat wide">${formatted.con}</td>
- <td class="date">${format(
- entry.timestamp,
- "dd MMM yyyy",
- )}<div class="sub">${format(entry.timestamp, "HH:mm")}</div></td>
-
- `;
- element
- .querySelector(".avatarPlaceholder")
- ?.replaceWith(getAvatarElement(entry));
- return element;
-}
-
-function buildWeeklyTableRow(
- entry: XpLeaderboardEntry,
- me = false,
-): HTMLElement {
- const activeDiff = formatDistanceToNow(entry.lastActivityTimestamp, {
- addSuffix: true,
- });
- const element = document.createElement("tr");
- if (me) {
- element.classList.add("me");
- }
- element.dataset["uid"] = entry.uid;
- element.innerHTML = `
- <td>${formatRank(entry.friendsRank)}</td>
- <td>${formatRank(entry.rank)}</td>
- <td>
- <div class="avatarNameBadge">
- <div class="avatarPlaceholder"></div>
- <a href="${location.origin}/profile/${
- entry.uid
- }?isUid" class="entryName" uid=${entry.uid} router-link>${entry.name}</a>
- <div class="flagsAndBadge">
- ${getHtmlByUserFlags({
- ...entry,
- isFriend: DB.isFriend(entry.uid),
- })}
- ${
- isSafeNumber(entry.badgeId) ? getBadgeHTMLbyId(entry.badgeId) : ""
- }
- </div>
- </div>
- </td>
- <td class="stat wide">${
- entry.totalXp < 1000 ? entry.totalXp : abbreviateNumber(entry.totalXp)
- }</td>
- <td class="stat wide">${DateTime.secondsToString(
- Math.round(entry.timeTypedSeconds),
- true,
- true,
- ":",
- )}</td>
- <td class="stat narrow">
- ${entry.totalXp < 1000 ? entry.totalXp : abbreviateNumber(entry.totalXp)}
- <div class="sub">${DateTime.secondsToString(
- Math.round(entry.timeTypedSeconds),
- true,
- true,
- ":",
- )}</td>
- </td>
- <td class="date" data-balloon-pos="left" aria-label="${activeDiff}">
- ${format(entry.lastActivityTimestamp, "dd MMM yyyy")}
- <div class="sub">
- ${format(entry.lastActivityTimestamp, "HH:mm")}
- </div>
- </td>
- </tr>
- `;
- element
- .querySelector(".avatarPlaceholder")
- ?.replaceWith(getAvatarElement(entry));
- return element;
-}
-
-function fillTable(): void {
- const table = qs(".page.pageLeaderboards table tbody");
- table?.empty();
-
- if (state.friendsOnly) {
- table?.getParent()?.addClass("friendsOnly");
- } else {
- table?.getParent()?.removeClass("friendsOnly");
- }
-
- qsa(".page.pageLeaderboards table thead")?.hide();
- if (state.type === "allTime" || state.type === "daily") {
- qs(".page.pageLeaderboards table thead.allTimeAndDaily")?.show();
- } else if (state.type === "weekly") {
- qs(".page.pageLeaderboards table thead.weekly")?.show();
- }
-
- if (state.data === null || state.data.length === 0) {
- table?.appendHtml(`<tr><td colspan="7" class="empty">No data</td></tr>`);
- qs(".page.pageLeaderboards table")?.show();
- return;
- }
-
- if (state.type === "allTime" || state.type === "daily") {
- for (const entry of state.data) {
- const me = getAuthenticatedUser()?.uid === entry.uid;
- table?.append(buildTableRow(entry, me));
- }
- } else if (state.type === "weekly") {
- for (const entry of state.data) {
- const me = getAuthenticatedUser()?.uid === entry.uid;
- table?.append(buildWeeklyTableRow(entry, me));
- }
- }
-
- qs(".page.pageLeaderboards table")?.show();
-}
-
-function getLbMemoryDifference(): number | null {
- if (state.type !== "allTime") return null;
- if (state.userData === null) return null;
-
- const memory =
- DB.getSnapshot()?.lbMemory?.["time"]?.[state.mode2]?.["english"] ?? 0;
-
- const rank = state.userData.rank;
- const diff = memory - rank;
-
- if (diff !== 0) {
- void DB.updateLbMemory("time", state.mode2, "english", rank, true);
- }
-
- return diff;
-}
-
-function fillUser(): void {
- if (isAuthenticated() && DB.getSnapshot()?.lbOptOut === true) {
- qs(".page.pageLeaderboards .bigUser")?.setHtml(
- '<div class="warning">You have opted out of the leaderboards.</div>',
- );
- return;
- }
-
- if (isAuthenticated() && DB.getSnapshot()?.banned === true) {
- qs(".page.pageLeaderboards .bigUser")?.setHtml(
- '<div class="warning">Your account is banned</div>',
- );
- return;
- }
-
- const minTimeTyping =
- ServerConfiguration.get()?.leaderboards.minTimeTyping ?? 7200;
-
- if (
- isAuthenticated() &&
- !isDevEnvironment() &&
- (DB.getSnapshot()?.typingStats?.timeTyping ?? 0) < minTimeTyping
- ) {
- qs(".page.pageLeaderboards .bigUser")?.setHtml(
- `<div class="warning">Your account must have ${formatDuration(
- intervalToDuration({ start: 0, end: minTimeTyping * 1000 }),
- )} typed to be placed on the leaderboard.</div>`,
- );
- return;
- }
-
- if (isAuthenticated() && state.type === "daily" && state.userData === null) {
- let str = `Not qualified`;
-
- if (!state.yesterday) {
- str += ` (min speed required: ${Format.typingSpeed(state.minWpm, {
- showDecimalPlaces: true,
- suffix: ` ${Config.typingSpeedUnit}`,
- })})`;
- }
-
- qs(".page.pageLeaderboards .bigUser")?.setHtml(
- `<div class="warning">${str}</div>`,
- );
- return;
- }
-
- if (isAuthenticated() && state.userData === null) {
- qs(".page.pageLeaderboards .bigUser")?.setHtml(
- `<div class="warning">Not qualified</div>`,
- );
- return;
- }
-
- if (state.data === null) {
- return;
- }
-
- if (state.type === "allTime" || state.type === "daily") {
- if (!state.userData || !state.count) {
- qs(".page.pageLeaderboards .bigUser")?.hide();
- qs(".page.pageLeaderboards .tableAndUser > .divider")?.show();
- return;
- }
-
- const userData = state.userData;
- const rank = state.friendsOnly
- ? (userData.friendsRank as number)
- : userData.rank;
- const percentile = (rank / state.count) * 100;
-
- let percentileString = `Top ${percentile.toFixed(2)}%`;
- if (rank === 1) {
- percentileString = "GOAT";
- }
-
- const diff = getLbMemoryDifference();
- let diffText;
-
- if (diff === null) {
- diffText = "";
- } else if (diff === 0) {
- diffText = ` ( = since you last checked)`;
- } else if (diff > 0) {
- diffText = ` (<i class="fas fa-fw fa-angle-up"></i>${Math.abs(
- diff,
- )} since you last checked
- )`;
- } else {
- diffText = ` (<i class="fas fa-fw fa-angle-down"></i>${Math.abs(
- diff,
- )} since you last checked
- )`;
- }
-
- const formatted = {
- wpm: Format.typingSpeed(userData.wpm, { showDecimalPlaces: true }),
- acc: Format.percentage(userData.acc, { showDecimalPlaces: true }),
- raw: Format.typingSpeed(userData.raw, { showDecimalPlaces: true }),
- con: Format.percentage(userData.consistency, { showDecimalPlaces: true }),
- };
-
- const html = `
- <div class="rank">${formatRank(rank)}</div>
- <div class="userInfo">
- <div class="top">You (${percentileString})</div>
- <div class="bottom">${diffText}</div>
- </div>
- <div class="stat wide">
- <div class="title">${Config.typingSpeedUnit}</div>
- <div class="value">${formatted.wpm}</div>
- </div>
- <div class="stat wide">
- <div class="title">accuracy</div>
- <div class="value">${formatted.acc}</div>
- </div>
- <div class="stat wide">
- <div class="title">raw</div>
- <div class="value">${formatted.raw}</div>
- </div>
- <div class="stat wide">
- <div class="title">consistency</div>
- <div class="value">${formatted.con}</div>
- </div>
- <div class="stat wide">
- <div class="title">date</div>
- <div class="value">${format(
- userData.timestamp,
- "dd MMM yyyy HH:mm",
- )}</div>
- </div>
-
-
- <div class="stat narrow">
- <div>${formatted.wpm}</div>
- <div class="sub">${formatted.acc}</div>
- </div>
- <div class="stat narrow rawAndConsistency">
- <div>${formatted.raw}</div>
- <div class="sub">${formatted.con}</div>
- </div>
- <div class="stat narrow">
- <div>${format(userData.timestamp, "dd MMM yyyy")}</div>
- <div class="sub">${format(userData.timestamp, "HH:mm")}</div>
- </div>
- `;
-
- qs(".page.pageLeaderboards .bigUser")?.setHtml(html);
- } else if (state.type === "weekly") {
- if (!state.userData || !state.count) {
- qs(".page.pageLeaderboards .bigUser")?.hide();
- return;
- }
-
- const userData = state.userData;
- const rank = state.friendsOnly
- ? (userData.friendsRank as number)
- : userData.rank;
- const percentile = (rank / state.count) * 100;
-
- let percentileString = `Top ${percentile.toFixed(2)}%`;
- if (rank === 1) {
- percentileString = "GOAT";
- }
-
- const diff = getLbMemoryDifference();
- let diffText;
-
- if (diff === null) {
- diffText = "";
- } else if (diff === 0) {
- diffText = ` ( = since you last checked)`;
- } else if (diff > 0) {
- diffText = ` (<i class="fas fa-fw fa-angle-up"></i>${Math.abs(
- diff,
- )} since you last checked
- )`;
- } else {
- diffText = ` (<i class="fas fa-fw fa-angle-down"></i>${Math.abs(
- diff,
- )} since you last checked
- )`;
- }
-
- const formatted = {
- xp:
- userData.totalXp < 1000
- ? userData.totalXp
- : abbreviateNumber(userData.totalXp),
- time: DateTime.secondsToString(
- Math.round(userData.timeTypedSeconds),
- true,
- true,
- ":",
- ),
- };
-
- const html = `
- <div class="rank">${formatRank(rank)}</div>
- <div class="userInfo">
- <div class="top">You (${percentileString})</div>
- <div class="bottom">${diffText}</div>
- </div>
- <div class="stat wide">
- <div class="title">xp gained</div>
- <div class="value">${formatted.xp}</div>
- </div>
- <div class="stat wide">
- <div class="title">time typed</div>
- <div class="value">${formatted.time}</div>
- </div>
- <div class="stat narrow">
- <div>${formatted.xp}</div>
- <div class="sub">${formatted.time}</div>
- </div>
- <div class="stat wide">
- <div class="title">last activity</div>
- <div class="value">${format(
- userData.lastActivityTimestamp,
- "dd MMM yyyy HH:mm",
- )}</div>
- </div>
- <div class="stat narrow">
- <div>${format(userData.lastActivityTimestamp, "dd MMM yyyy")}</div>
- <div class="sub">${format(
- userData.lastActivityTimestamp,
- "HH:mm",
- )}</div>
- </div>
- `;
-
- qs(".page.pageLeaderboards .bigUser")?.setHtml(html);
- }
- qs(".page.pageLeaderboards .bigUser")?.show();
- qs(".page.pageLeaderboards .tableAndUser > .divider")?.hide();
-}
-
-function updateContent(): void {
- qsa(".page.pageLeaderboards .loading").hide();
- qsa(".page.pageLeaderboards .updating").addClass("invisible");
- qs(".page.pageLeaderboards .error")?.hide();
-
- if (state.error !== undefined) {
- qs(".page.pageLeaderboards .error")?.show();
- qs(".page.pageLeaderboards .error p")?.setText(state.error);
- enableButtons();
- return;
- }
-
- if (state.updating) {
- disableButtons();
- qsa(".page.pageLeaderboards .updating").removeClass("invisible");
- return;
- } else if (state.loading) {
- disableButtons();
- qs(".page.pageLeaderboards .bigUser")?.hide();
- qsa(".page.pageLeaderboards .titleAndButtons")?.hide();
- qsa(".page.pageLeaderboards .loading").show();
- qs(".page.pageLeaderboards table")?.hide();
- return;
- } else {
- enableButtons();
- }
-
- if (isAuthenticated()) {
- qsa(".page.pageLeaderboards .needAuth")?.show();
- } else {
- qsa(".page.pageLeaderboards .needAuth")?.hide();
- }
-
- if (state.data === null) {
- Notifications.add("Data is null");
- return;
- }
-
- qsa(".page.pageLeaderboards .titleAndButtons")?.show();
- updateJumpButtons();
- updateTimerVisibility();
- fillTable();
-
- for (const element of document.querySelectorAll(
- ".page.pageLeaderboards .wide.speedUnit, .page.pageLeaderboards .narrow.speedUnit span",
- )) {
- element.innerHTML = Config.typingSpeedUnit;
- }
-
- if (state.scrollToUserAfterFill) {
- document.querySelector(".tableAndUser .me")?.scrollIntoView({
- block: "center",
- });
- state.scrollToUserAfterFill = false;
- }
-}
-
-function updateSideButtons(): void {
- updateTypeButtons();
- updateFriendsButtons();
- updateModeButtons();
- updateLanguageButtons();
-}
-
-function updateTypeButtons(): void {
- const el = qs(".page.pageLeaderboards .buttonGroup.typeButtons");
- el?.qsa("button")?.removeClass("active");
- el?.qs(`button[data-type=${state.type}]`)?.addClass("active");
-}
-
-function updateFriendsButtons(): void {
- const friendsOnlyGroup = qs(
- ".page.pageLeaderboards .buttonGroup.friendsOnlyButtons",
- );
- if (
- isAuthenticated() &&
- (ServerConfiguration.get()?.connections.enabled ?? false)
- ) {
- friendsOnlyGroup?.show();
- } else {
- friendsOnlyGroup?.hide();
- state.friendsOnly = false;
- return;
- }
-
- const everyoneButton = qs(
- ".page.pageLeaderboards .buttonGroup.friendsOnlyButtons .everyone",
- );
- const friendsOnlyButton = qs(
- ".page.pageLeaderboards .buttonGroup.friendsOnlyButtons .friendsOnly",
- );
- if (state.friendsOnly) {
- friendsOnlyButton?.addClass("active");
- everyoneButton?.removeClass("active");
- } else {
- friendsOnlyButton?.removeClass("active");
- everyoneButton?.addClass("active");
- }
-}
-
-function updateModeButtons(): void {
- if (state.type !== "allTime" && state.type !== "daily") {
- qs(".page.pageLeaderboards .buttonGroup.modeButtons")?.hide();
- return;
- }
- qs(".page.pageLeaderboards .buttonGroup.modeButtons")?.show();
-
- const el = qs(".page.pageLeaderboards .buttonGroup.modeButtons");
- el?.qsa("button")?.removeClass("active");
- el?.qs(
- `button[data-mode="${state.mode}"][data-mode2="${state.mode2}"]`,
- )?.addClass("active");
-
- //hide all mode buttons
- qsa(`.page.pageLeaderboards .buttonGroup.modeButtons button`)?.hide();
-
- //show all valid ones
- for (const mode of Object.keys(validLeaderboards[state.type]) as Mode[]) {
- for (const mode2 of Object.keys(
- // oxlint-disable-next-line no-non-null-assertion
- validLeaderboards[state.type][mode]!,
- )) {
- qs(
- `.page.pageLeaderboards .buttonGroup.modeButtons button[data-mode="${mode}"][data-mode2="${mode2}"]`,
- )?.show();
- }
- }
-}
-
-function updateLanguageButtons(): void {
- if (state.type !== "daily") {
- qs(".page.pageLeaderboards .buttonGroup.languageButtons")?.hide();
- return;
- }
- qs(".page.pageLeaderboards .buttonGroup.languageButtons")?.show();
-
- const el = qs(".page.pageLeaderboards .buttonGroup.languageButtons");
- el?.qsa("button")?.removeClass("active");
- el?.qs(`button[data-language=${state.language}]`)?.addClass("active");
-
- //hide all languages
- qsa(`.page.pageLeaderboards .buttonGroup.languageButtons button`)?.hide();
-
- //show all valid ones
- for (const lang of validLeaderboards[state.type][state.mode]?.[state.mode2] ??
- []) {
- qs(
- `.page.pageLeaderboards .buttonGroup.languageButtons button[data-language="${lang}"]`,
- )?.show();
- }
-}
-
-let updateTimer: number | undefined;
-
-function updateTimerElement(): void {
- if (state.type === "daily") {
- const diff = differenceInSeconds(new Date(), endOfDay(new UTCDateMini()));
-
- qs(".page.pageLeaderboards .titleAndButtons .timer")?.setText(
- "Next reset in: " + DateTime.secondsToString(diff, true),
- );
- } else if (state.type === "allTime") {
- const date = new Date();
- const minutesToNextUpdate = 14 - (date.getMinutes() % 15);
- const secondsToNextUpdate = 60 - date.getSeconds();
- const totalSeconds = minutesToNextUpdate * 60 + secondsToNextUpdate;
- qs(".page.pageLeaderboards .titleAndButtons .timer")?.setText(
- "Next update in: " + DateTime.secondsToString(totalSeconds, true),
- );
- } else if (state.type === "weekly") {
- const nextWeekTimestamp = endOfWeek(new UTCDateMini(), { weekStartsOn: 1 });
- const totalSeconds = differenceInSeconds(new Date(), nextWeekTimestamp);
- qs(".page.pageLeaderboards .titleAndButtons .timer")?.setText(
- "Next reset in: " +
- DateTime.secondsToString(totalSeconds, true, true, ":", true, true),
- );
- }
-}
-
-function updateTimerVisibility(): void {
- let visible = true;
-
- if (
- (state.type === "daily" && state.yesterday) ||
- (state.type === "weekly" && state.lastWeek)
- ) {
- visible = false;
- }
-
- if (visible) {
- qs(".page.pageLeaderboards .titleAndButtons .timer")?.removeClass(
- "invisible",
- );
- } else {
- qs(".page.pageLeaderboards .titleAndButtons .timer")?.addClass("invisible");
- }
-}
-
-function startTimer(): void {
- updateTimerElement();
- updateTimer = setInterval(() => {
- updateTimerElement();
- }, 1000) as unknown as number;
-}
-
-function stopTimer(): void {
- clearInterval(updateTimer);
- updateTimer = undefined;
- qs(".page.pageLeaderboards .titleAndButtons .timer")?.setText("-");
-}
-
-function convertRuleOption(rule: string): string[] {
- if (rule.startsWith("(")) {
- return rule.slice(1, -1).split("|");
- }
- return [rule];
-}
-
-async function updateValidDailyLeaderboards(): Promise<void> {
- const dailyRulesConfig =
- ServerConfiguration.get()?.dailyLeaderboards.validModeRules;
-
- if (dailyRulesConfig === undefined) {
- throw new Error(
- "cannot load server configuration for dailyLeaderboards.validModeRules",
- );
- }
-
- //a rule can contain multiple values. create a flat list out of them
- const dailyRules = dailyRulesConfig.flatMap((rule) => {
- const languages = convertRuleOption(rule.language) as Language[];
- const mode2List = convertRuleOption(rule.mode2);
-
- return mode2List.map((mode2) => ({
- mode: rule.mode as Mode,
- mode2,
- languages,
- }));
- });
-
- validLeaderboards.daily = dailyRules.reduce<
- Partial<Record<Mode, Record<string /*mode2*/, Language[]>>>
- >((acc, { mode, mode2, languages }) => {
- let modes = acc[mode];
- if (modes === undefined) {
- modes = {};
- acc[mode] = modes;
- }
-
- let modes2 = modes[mode2];
- if (modes2 === undefined) {
- modes2 = [];
- modes[mode2] = modes2;
- }
-
- modes2.push(...languages);
- return acc;
- }, {});
-}
-
-function checkIfLeaderboardIsValid(): void {
- if (state.type === "weekly") return;
-
- const validLeaderboard = validLeaderboards[state.type];
-
- let validModes2 = validLeaderboard[state.mode];
- if (validModes2 === undefined) {
- const firstMode = Object.keys(validLeaderboard).sort()[0] as Mode;
- if (firstMode === undefined) {
- throw new Error(`no valid leaderboard config for type ${state.type}`);
- }
- state.mode = firstMode;
- // oxlint-disable-next-line no-non-null-assertion
- validModes2 = validLeaderboard[state.mode]!;
- }
-
- let supportedLanguages = validModes2[state.mode2];
- if (supportedLanguages === undefined) {
- const firstMode2 = Object.keys(validModes2).sort(
- (a, b) => parseInt(a) - parseInt(b),
- )[0];
- if (firstMode2 === undefined) {
- throw new Error(
- `no valid leaderboard config for type ${state.type} and mode ${state.mode}`,
- );
- }
- state.mode2 = firstMode2;
- supportedLanguages = validModes2[state.mode2];
- }
-
- if (supportedLanguages === undefined || supportedLanguages.length < 1) {
- throw new Error(
- `Daily leaderboard config not valid for mode:${state.mode} mode2:${state.mode2}`,
- );
- }
-
- if (!supportedLanguages.includes(state.language)) {
- state.language = supportedLanguages.sort()[0] as Language;
- }
-}
-
-async function appendModeAndLanguageButtons(): Promise<void> {
- const modes = Array.from(
- new Set(
- Object.values(validLeaderboards).flatMap(
- (rule) => Object.keys(rule) as Mode[],
- ),
- ),
- ).sort();
-
- const mode2Buttons = modes.flatMap((mode) => {
- const modes2 = Array.from(
- new Set(
- Object.values(validLeaderboards).flatMap((rule) =>
- Object.keys(rule[mode] ?? {}),
- ),
- ),
- ).sort((a, b) => parseInt(a) - parseInt(b));
-
- const icon = mode === "time" ? "fas fa-clock" : "fas fa-align-left";
-
- return modes2.map(
- (mode2) => `<button data-mode="${mode}" data-mode2="${mode2}">
- <i class="${icon}"></i>
- ${mode} ${mode2}
- </button>`,
- );
- });
- qs(".modeButtons")?.setHtml(
- `<div class="divider"></div>` + mode2Buttons.join("\n"),
- );
-
- const availableLanguages = Array.from(
- new Set(
- Object.values(validLeaderboards)
- .flatMap((rule) => Object.values(rule))
- .flatMap((mode) => Object.values(mode))
- .flatMap((it) => it),
- ),
- ).sort();
-
- const languageButtons = availableLanguages.map(
- (lang) =>
- `<button data-language="${lang}">
- <i class="fas fa-globe"></i>
- ${lang}
- </button>`,
- );
- qs(".languageButtons")?.setHtml(
- `<div class="divider"></div>` + languageButtons.join("\n"),
- );
-}
-
-function disableButtons(): void {
- qsa(".page.pageLeaderboards button")?.disable();
-}
-
-function enableButtons(): void {
- qsa(".page.pageLeaderboards button")?.enable();
-}
-
-export function goToPage(pageId: number): void {
- if (pageId < 0 || pageId === state.page) return;
- handleJumpButton("goToPage", pageId);
-}
-
-type Action =
- | "firstPage"
- | "previousPage"
- | "nextPage"
- | "goToPage"
- | "userPage";
-function handleJumpButton(action: Action, page?: number): void {
- if (action === "firstPage") {
- state.page = 0;
- } else if (action === "previousPage" && state.page > 0) {
- const totalPages = Math.ceil(state.count / state.pageSize);
- if (state.page > totalPages) {
- state.page = totalPages - 1;
- } else {
- state.page -= 1;
- }
- } else if (action === "nextPage") {
- state.page += 1;
- } else if (action === "goToPage" && page !== undefined) {
- state.page = page;
- } else if (action === "userPage") {
- if (isAuthenticated()) {
- const rank = state.userData?.rank;
- if (isSafeNumber(rank)) {
- // - 1 to make sure position 50 with page size 50 is on the first page (page 0)
- const page = Math.floor((rank - 1) / state.pageSize);
-
- if (state.page === page) {
- return;
- }
-
- state.page = page;
- state.scrollToUserAfterFill = true;
- }
- }
- } else {
- return;
- }
- updateGetParameters();
- void requestData(true);
- updateContent();
-}
-
-function handleYesterdayLastWeekButton(action: string): void {
- if (state.type === "daily" && action === "toggleYesterday") {
- state.yesterday = !state.yesterday;
- } else if (state.type === "weekly" && action === "toggleLastWeek") {
- state.lastWeek = !state.lastWeek;
- }
-
- updateGetParameters();
- void requestData();
- updateContent();
- updateTitle();
-}
-
-function updateGetParameters(): void {
- if (state.goToUserPage) {
- //parameters are updated in the requestData method
- return;
- }
-
- const params: UrlParameter = {};
-
- params.type = state.type;
- if (state.type === "allTime") {
- params.mode2 = state.mode2;
- } else if (state.type === "daily") {
- params.mode = state.mode;
- params.language = state.language;
- params.mode2 = state.mode2;
- if (state.yesterday) {
- params.yesterday = true;
- }
- } else if (state.type === "weekly") {
- if (state.lastWeek) {
- params.lastWeek = true;
- }
- }
-
- params.page = state.page + 1;
-
- if (state.friendsOnly) {
- params.friendsOnly = true;
- }
- page.setUrlParams(params);
-
- selectorLS.set(state);
-}
-
-function readGetParameters(params?: UrlParameter): void {
- if (params === undefined) {
- Object.assign(state, selectorLS.get());
- return;
- }
-
- if (params.type !== undefined) {
- state.type = params.type;
- }
-
- state.friendsOnly = params.friendsOnly ?? false;
-
- if (state.type === "allTime") {
- if (params.mode2 !== undefined) {
- state.mode2 = params.mode2 as AllTimeState["mode2"];
- }
- } else if (state.type === "daily") {
- if (params.language !== undefined) {
- state.language = params.language;
- }
- if (params.mode2 !== undefined) {
- state.mode2 = params.mode2;
- }
- if (params.mode !== undefined) {
- state.mode = params.mode;
- }
- if (params.yesterday !== undefined) {
- state.yesterday = params.yesterday;
- }
- } else if (state.type === "weekly") {
- if (params.lastWeek !== undefined) {
- state.lastWeek = params.lastWeek;
- }
- }
-
- if (params.page !== undefined) {
- state.page = params.page - 1;
-
- if (state.page < 0) {
- state.page = 0;
- }
- }
- if (params.goToUserPage === true) {
- state.goToUserPage = true;
- }
-}
-
-function utcToLocalDate(timestamp: UTCDateMini): Date {
- return subMinutes(timestamp, new Date().getTimezoneOffset());
-}
-
-function updateTimeText(
- dateString: string,
- localStart: Date,
- localEnd: Date,
-): void {
- const localDateString =
- "local time \n" +
- format(localStart, localDateFormat) +
- " - \n" +
- format(localEnd, localDateFormat);
-
- const text = qs(".page.pageLeaderboards .bigtitle .subtext > .text");
- text?.setText(`${dateString}`);
- text?.setAttribute("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();
-}
-
-qsa(".page.pageLeaderboards .jumpButtons button")?.on("click", function () {
- const action = this.getAttribute("data-action") as Action;
- if (action !== "goToPage") {
- handleJumpButton(action);
- }
-});
-
-qsa(".page.pageLeaderboards .bigtitle button")?.on("click", function () {
- const action = this.getAttribute("data-action") as string;
- handleYesterdayLastWeekButton(action);
-});
-
-qs(".page.pageLeaderboards .buttonGroup.typeButtons")?.onChild(
- "click",
- "button",
- function () {
- const type = this.getAttribute("data-type") as
- | "allTime"
- | "weekly"
- | "daily";
- if (state.type === type) return;
- state.type = type;
- if (state.type === "daily") {
- state.language = "english";
- state.yesterday = false;
- }
- if (state.type === "weekly") {
- state.lastWeek = false;
- }
- checkIfLeaderboardIsValid();
- state.data = null;
- state.page = 0;
- void requestData();
- updateTitle();
- updateSideButtons();
- updateContent();
- updateGetParameters();
- },
-);
-
-qs(".page.pageLeaderboards .buttonGroup.modeButtons")?.onChild(
- "click",
- "button",
- function () {
- const mode = this.getAttribute("data-mode") as Mode;
- const mode2 = this.getAttribute("data-mode2");
-
- if (
- mode !== undefined &&
- mode2 !== undefined &&
- mode2 !== null &&
- (state.type === "allTime" || state.type === "daily")
- ) {
- if (state.mode === mode && state.mode2 === mode2) return;
- state.mode = mode;
- state.mode2 = mode2;
- state.page = 0;
- } else {
- return;
- }
- checkIfLeaderboardIsValid();
- state.data = null;
- void requestData();
- updateSideButtons();
- updateTitle();
- updateContent();
- updateGetParameters();
- },
-);
-
-qs(".page.pageLeaderboards .buttonGroup.languageButtons")?.onChild(
- "click",
- "button",
- function () {
- const language = this.getAttribute("data-language") as Language;
-
- if (language !== undefined && state.type === "daily") {
- if (state.language === language) return;
- state.language = language;
- state.page = 0;
- } else {
- return;
- }
- checkIfLeaderboardIsValid();
- state.data = null;
- void requestData();
- updateSideButtons();
- updateTitle();
- updateContent();
- updateGetParameters();
- },
-);
-
-qs(".page.pageLeaderboards .buttonGroup.friendsOnlyButtons")?.onChild(
- "click",
- "button",
- () => {
- state.friendsOnly = !state.friendsOnly;
- state.page = 0;
- void requestData();
- updateTitle();
- updateSideButtons();
- updateContent();
- updateGetParameters();
- },
-);
-
-export const page = new PageWithUrlParams({
- id: "leaderboards",
- element: qsr(".page.pageLeaderboards"),
- path: "/leaderboards",
- urlParamsSchema: UrlParameterSchema,
- loadingOptions: {
- style: "spinner",
- loadingMode: () => "sync",
- loadingPromise: async () => {
- await ServerConfiguration.configurationPromise;
- },
- },
-
- afterHide: async (): Promise<void> => {
- Skeleton.remove("pageLeaderboards");
- stopTimer();
- },
- beforeShow: async (options): Promise<void> => {
- Skeleton.append("pageLeaderboards", "main");
- await updateValidDailyLeaderboards();
- await appendModeAndLanguageButtons();
- readGetParameters(options.urlParams);
- checkIfLeaderboardIsValid();
- startTimer();
- updateTitle();
- updateContent();
- updateSideButtons();
- updateGetParameters();
- void requestData(false);
- },
- afterShow: async (): Promise<void> => {
- // updateSideButtons();
- },
-});
-
-onDOMReady(async () => {
- Skeleton.save("pageLeaderboards");
-});
-
-ConfigEvent.subscribe(({ key }) => {
- if (getActivePage() === "leaderboards" && key === "typingSpeedUnit") {
- updateContent();
- fillUser();
- }
-});
diff --git a/frontend/src/ts/pages/page.ts b/frontend/src/ts/pages/page.ts
index 77eceecf9cef..4f51b635d104 100644
--- a/frontend/src/ts/pages/page.ts
+++ b/frontend/src/ts/pages/page.ts
@@ -115,7 +115,7 @@ type OptionsWithUrlParams<T, U extends UrlParamsSchema> = Options<T> & {
urlParams?: z.infer<U>;
};
-type UrlParamsSchema = z.ZodObject<Record<string, z.ZodTypeAny>>;
+export type UrlParamsSchema = z.ZodObject<Record<string, z.ZodTypeAny>>;
type PagePropertiesWithUrlParams<T, U extends UrlParamsSchema> = Omit<
PageProperties<T>,
"beforeShow"
diff --git a/frontend/src/ts/queries/leaderboards.ts b/frontend/src/ts/queries/leaderboards.ts
new file mode 100644
index 000000000000..4bfbdce5301a
--- /dev/null
+++ b/frontend/src/ts/queries/leaderboards.ts
@@ -0,0 +1,179 @@
+import {
+ GetLeaderboardQuery,
+ GetLeaderboardRankQuery,
+} from "@monkeytype/contracts/leaderboards";
+import { QueryKey, queryOptions } from "@tanstack/solid-query";
+import Ape from "../ape";
+import {
+ LeaderboardType,
+ pageSize,
+ Selection,
+ setPage,
+} from "../stores/leaderboard-selection";
+
+const queryKeys = {
+ root: (options: Selection & { userSpecific?: true }) => [
+ //don't use baseKey, we require the key to have the options at the same position for user and non user specific
+ options.userSpecific === true || options.friendsOnly
+ ? "user"
+ : "leaderboard",
+ "leaderboard",
+ options.type,
+ {
+ mode: options.mode,
+ mode2: options.mode2,
+ language: options.language,
+ friendsOnly: options.friendsOnly,
+ previous: options.previous,
+ },
+ ],
+ data: (options: Selection & { page: number }) => [
+ ...queryKeys.root(options),
+ { page: options.page },
+ ],
+ rank: (options: Selection) =>
+ queryKeys.root({ ...options, userSpecific: true }), //rank is always user specific
+};
+
+export const getLeaderboardQueryOptions = (
+ options: Selection & {
+ page: number;
+ }, // oxlint-disable-next-line typescript/explicit-function-return-type
+) =>
+ queryOptions({
+ queryKey: queryKeys.data(options),
+ queryFn: async (ctx) => {
+ const page = ctx.queryKey[4] as { page: number } | undefined;
+ if (page === undefined) throw new Error("page missing in query");
+
+ const selection = getSelectionFromQueryKey(ctx.queryKey);
+
+ const baseQuery = {
+ friendsOnly: selection.friendsOnly ? true : undefined,
+ pageSize,
+ page: page.page,
+ };
+
+ let request;
+
+ if (selection.type === "weekly") {
+ request = Ape.leaderboards.getWeeklyXp({
+ query: {
+ ...baseQuery,
+ weeksBefore: selection.previous ? 1 : undefined,
+ },
+ });
+ } else {
+ const modeQuery: GetLeaderboardQuery = {
+ ...baseQuery,
+ mode: selection.mode,
+ mode2: selection.mode2,
+ language: selection.language,
+ };
+
+ if (selection.type === "allTime") {
+ request = Ape.leaderboards.get({ query: modeQuery });
+ } else {
+ request = Ape.leaderboards.getDaily({
+ query: {
+ ...modeQuery,
+ daysBefore: selection.previous ? 1 : undefined,
+ },
+ });
+ }
+ }
+
+ const response = await request;
+ if (response.status !== 200) {
+ throw new Error(
+ `Failed to get ${selection.type} leaderboard data: ` +
+ response.body.message,
+ );
+ }
+
+ if (response.body.data.entries.length === 0 && page.page !== 0) {
+ setPage(Math.floor(response.body.data.count / pageSize));
+ }
+ return response.body.data;
+ },
+ //5 minutes for alltime, one minute for others
+ staleTime: options.type === "allTime" ? 1000 * 60 * 5 : 1000 * 60,
+ });
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getRankQueryOptions = (options: Selection) =>
+ queryOptions({
+ queryKey: queryKeys.rank(options),
+ queryFn: async (ctx) => {
+ let request;
+ const selection = getSelectionFromQueryKey(ctx.queryKey);
+ if (selection.type === "weekly") {
+ request = Ape.leaderboards.getWeeklyXpRank({
+ query: {
+ friendsOnly: selection.friendsOnly ? true : undefined,
+ weeksBefore: selection.previous ? 1 : undefined,
+ },
+ });
+ } else {
+ const baseQuery: GetLeaderboardRankQuery = {
+ mode: selection.mode,
+ mode2: selection.mode2,
+ language: selection.language,
+ friendsOnly: selection.friendsOnly ? true : undefined,
+ };
+ if (selection.type === "allTime") {
+ request = Ape.leaderboards.getRank({ query: baseQuery });
+ } else {
+ request = Ape.leaderboards.getDailyRank({
+ query: {
+ ...baseQuery,
+ daysBefore: selection.previous ? 1 : undefined,
+ },
+ });
+ }
+ }
+
+ const response = await request;
+ if (response.status !== 200) {
+ throw new Error(
+ `Failed to get ${selection.type} leaderboard rank: ` +
+ response.body.message,
+ );
+ }
+ return response.body.data;
+ },
+ //5 minutes for alltime, one minute for others
+ staleTime: options.type === "allTime" ? 1000 * 60 * 5 : 1000 * 60,
+ });
+
+function getSelectionFromQueryKey(queryKey: QueryKey): Selection {
+ if (queryKey.length < 3) throw new Error("invalid query key");
+
+ const type = queryKey[2] as LeaderboardType | undefined;
+ const mode = queryKey[3] as
+ | Required<Omit<Selection, "type"> & { previous: boolean }>
+ | undefined;
+
+ if (type === undefined) throw new Error("type missing in query");
+ if (mode === undefined) throw new Error("mode missing in query");
+
+ if (type === "weekly") {
+ return {
+ type: "weekly",
+ friendsOnly: mode.friendsOnly,
+ previous: mode.previous,
+ };
+ } else {
+ if (mode.language === undefined) {
+ throw new Error("language missing in query");
+ }
+ return {
+ type,
+ mode: mode.mode,
+ mode2: mode.mode2,
+ language: mode.language,
+ friendsOnly: mode.friendsOnly,
+ previous: mode.previous,
+ };
+ }
+}
diff --git a/frontend/src/ts/stores/leaderboard-selection.ts b/frontend/src/ts/stores/leaderboard-selection.ts
new file mode 100644
index 000000000000..5ae3f33fc2e7
--- /dev/null
+++ b/frontend/src/ts/stores/leaderboard-selection.ts
@@ -0,0 +1,95 @@
+import { LanguageSchema } from "@monkeytype/schemas/languages";
+import { ModeSchema } from "@monkeytype/schemas/shared";
+import { Accessor, createSignal, Setter } from "solid-js";
+import { z } from "zod";
+import { useLocalStorage } from "../hooks/useLocalStorage";
+
+import { get as getServerConfiguration } from "../ape/server-configuration";
+
+export const pageSize = 50;
+
+export type LeaderboardType = Selection["type"];
+const XpSelection = z.object({
+ type: z.literal("weekly"),
+ friendsOnly: z.boolean(),
+ previous: z.boolean(),
+ language: z.never().optional(),
+ mode: z.never().optional(),
+ mode2: z.never().optional(),
+});
+const SpeedSelection = z.object({
+ type: z.enum(["daily", "allTime"]),
+ friendsOnly: z.boolean(),
+ previous: z.boolean(),
+ mode: ModeSchema,
+ mode2: z.string(),
+ language: LanguageSchema,
+});
+
+export const SelectionSchema = SpeedSelection.or(XpSelection);
+export type Selection = z.infer<typeof SelectionSchema>;
+
+export const LeaderboardUrlParamsSchema = z
+ .object({
+ type: z.enum(["allTime", "daily", "weekly"]),
+ mode: ModeSchema.optional(),
+ mode2: z.string().optional(),
+ language: LanguageSchema.optional(),
+ yesterday: z.boolean().optional(),
+ lastWeek: z.boolean().optional(),
+ friendsOnly: z.boolean().optional(),
+ page: z.number().optional(),
+ goToUserPage: z.boolean().optional(),
+ })
+ .partial();
+export type LeaderboardUrlParams = z.infer<typeof LeaderboardUrlParamsSchema>;
+
+const [getSelectionLs, setSelection] = lsSelection();
+export const [getPage, setPage] = createSignal(0);
+
+export const getSelection = () => {
+ if (
+ getServerConfiguration()?.connections.enabled === false &&
+ getSelectionLs().friendsOnly
+ ) {
+ setSelection((old) => ({ ...old, friendsOnly: false }));
+ }
+ return getSelectionLs();
+};
+
+export { setSelection };
+
+function lsSelection(): [Accessor<Selection>, Setter<Selection>] {
+ return useLocalStorage<Selection>({
+ key: "leaderboardSelector",
+ schema: SelectionSchema,
+ fallback: {
+ type: "allTime",
+ mode: "time",
+ mode2: "15",
+ language: "english",
+ friendsOnly: false,
+ previous: false,
+ },
+ migrate: (value) => {
+ if (value === null || typeof value !== "object") {
+ return {} as Selection;
+ }
+ const result = value as Selection;
+ if ("lastWeek" in result) {
+ delete result["lastWeek"];
+ result.previous = true;
+ } else if ("yesterday" in result) {
+ delete result["yesterday"];
+ result.previous = true;
+ }
+
+ if (result.type === "weekly") {
+ delete result.mode;
+ delete result.mode2;
+ delete result.language;
+ }
+ return result;
+ },
+ });
+}
diff --git a/frontend/src/ts/types/tanstack-table.d.ts b/frontend/src/ts/types/tanstack-table.d.ts
index b0719fca4858..aaf154a3a0ed 100644
--- a/frontend/src/ts/types/tanstack-table.d.ts
+++ b/frontend/src/ts/types/tanstack-table.d.ts
@@ -39,5 +39,8 @@ declare module "@tanstack/solid-table" {
* Can be used to define mouse-overs with `aria-label` and `data-balloon-pos`
*/
headerMeta?: JSX.HTMLAttributes;
+
+ /** extra classes for the header */
+ headerClass?: string;
}
}