+
+
+ {(config) => (
+
+ )}
+
+
+
+
+
+ setSelection((old) => ({
+ ...old,
+ previous: !old.previous,
+ }))
+ }
+ />
+
+ <Show when={isLoggedIn()}>
+ <AsyncContent
+ queries={{
+ data: dataQuery,
+ rank: rankQuery,
+ config: serverConfigurationQuery,
+ }}
+ alwaysShowContent
+ >
+ {({ data, rank, config }) => (
+ <UserRank
+ type={selection().type === "weekly" ? "xp" : "wpm"}
+ data={rank}
+ friendsOnly={selection().friendsOnly}
+ total={data?.count}
+ minWpm={
+ data && "minWpm" in data ? (data.minWpm as number) : undefined
+ }
+ memoryDifference={getLbMemoryDifference(
+ selection(),
+ 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} alwaysShowContent>
+ {(data) => (
+ <TableNavigation
+ type={selection().type}
+ lastPage={Math.ceil((data?.count ?? 0) / 50)}
+ currentPage={page()}
+ onPageChange={setPage}
+ userPage={userPage()}
+ onScrollToUser={setScrollToUser}
+ isLoading={
+ dataQuery.isLoading ||
+ dataQuery.isFetching ||
+ dataQuery.isRefetching
+ }
+ >
+ <Table
+ type={selection().type === "weekly" ? "xp" : "wpm"}
+ entries={data?.entries ?? []}
+ friendsOnly={selection().friendsOnly}
+ scrollToUser={scrollToUser}
+ onScrolledToUser={() => setScrollToUser(false)}
+ />
+ </TableNavigation>
+ )}
+ </AsyncContent>
+ </div>
+ </div>
+ );
+
+ function syncLbMemory(): void {
+ if (
+ rankQuery.data !== undefined &&
+ rankQuery.data !== null &&
+ selection !== undefined &&
+ selection().type === "allTime"
+ ) {
+ const diff = getLbMemoryDifference(selection(), rankQuery.data.rank);
+
+ if (diff !== 0) {
+ void updateLbMemory(
+ "time",
+ selection().mode2 as string,
+ "english",
+ rankQuery.data.rank,
+ true,
+ );
+ }
+ }
+ }
+}
+
+function getLbMemoryDifference(
+ selection: Selection,
+ currentRank: number | undefined,
+): number | undefined {
+ if (
+ selection.type !== "allTime" ||
+ selection.mode !== "time" ||
+ selection.language !== "english" ||
+ selection.friendsOnly ||
+ currentRank === undefined
+ ) {
+ return undefined;
+ }
+ const oldRank =
+ getSnapshot()?.lbMemory?.time?.[selection.mode2]?.english ?? 0;
+ const diff = oldRank - currentRank;
+
+ return diff;
+}
+
+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;
+ },
+ });
+}
+
+function updateGetParameters(selection: Selection, page: number): void {
+ const params: LeaderboardUrlParams = {
+ type: selection.type,
+ mode: selection.mode,
+ mode2: selection.mode2,
+ language: selection.language,
+ page: page + 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;
+ }
+ skeletonPage.setUrlParams(params);
+}
+
+export 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({ ...selection(), ...newSelection } as Selection);
+
+ if (params.page !== undefined) {
+ setPage(params.page - 1);
+ }
+}
+
+function prefetch(): void {
+ void queryClient.prefetchQuery(
+ getLeaderboardQueryOptions({
+ type: "allTime",
+ mode: "time",
+ mode2: "15",
+ language: "english",
+ friendsOnly: false,
+ page: 0,
+ previous: false,
+ }),
+ );
+}
+
+export const skeletonPage = 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.save("pageLeaderboards");
+});
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..73c121cd6782
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -0,0 +1,262 @@
+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 { Selection } from "../../../queries/leaderboards";
+import { isLoggedIn } from "../../../signals/core";
+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[];
+}): JSXElement {
+ function updateSelection(patch: Partial<Selection>): void {
+ props.onSelect(
+ normalizeSelection(
+ //@ts-expect-error this is fine
+ { ...props.selection(), ...patch },
+ getValidLeaderboards(props.validModeRules),
+ ),
+ );
+ }
+
+ function selectType(type: Selection["type"]): void {
+ updateSelection({ type });
+ }
+
+ function selectMode(value: ModeSelect): void {
+ updateSelection({ mode: value.mode, mode2: value.mode2 });
+ }
+
+ function selectLanguage(language: Language): void {
+ updateSelection({ language });
+ }
+ function selectFriendsOnly(friendsOnly: boolean): void {
+ 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()}>
+ <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"
+ 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..199914e2df36
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Table.tsx
@@ -0,0 +1,460 @@
+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 { createEffectOn } from "../../../hooks/effects";
+import { bp } from "../../../signals/breakpoints";
+import { getConfig } from "../../../signals/config";
+import { getUserId } from "../../../signals/core";
+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 { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
+
+type WpmEntry = LeaderboardEntry;
+type XpEntry = XpLeaderboardEntry;
+export type TableEntry = WpmEntry | XpEntry;
+
+export function Table(
+ props: {
+ type: "wpm" | "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:
+ "table-auto [&>tbody>tr>td]:whitespace-nowrap [&>tbody>tr>td]:py-2.5 [&>tbody>tr>td]:px-4 [&>thead>tr>th]:px-4 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",
+ },
+ }));
+
+ const wpmColumns = createMemo(() =>
+ getWpmColumns({
+ 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 === "wpm"}
+ then={
+ <DataTable
+ {...commonProps()}
+ columns={wpmColumns()}
+ data={props.entries as LeaderboardEntry[]}
+ />
+ }
+ else={
+ <DataTable
+ {...commonProps()}
+ columns={xpColumns()}
+ data={props.entries as XpLeaderboardEntry[]}
+ />
+ }
+ />
+ );
+}
+
+function getWpmColumns({
+ friendsOnly,
+ format,
+ userOverride,
+ addHeader,
+}: {
+ friendsOnly: boolean;
+ format: Formatting;
+ userOverride?: Accessor<JSXElement>;
+ addHeader?: boolean;
+}): DataTableColumnDef<WpmEntry>[] {
+ const defineColumn = createColumnHelper<WpmEntry>().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("wpm", {
+ header: format.typingSpeedUnit,
+ cell: (info) =>
+ wrapWithHeader(
+ format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+ format.typingSpeedUnit,
+ addHeader,
+ ),
+ meta: {
+ align: "right",
+ breakpoint: "xl",
+ },
+ }),
+ defineColumn("acc", {
+ header: "accuracy",
+ cell: (info) =>
+ wrapWithHeader(
+ format.percentage(info.getValue(), { showDecimalPlaces: true }),
+ "accuracy",
+ addHeader,
+ ),
+ meta: {
+ align: "right",
+ breakpoint: "xl",
+ },
+ }),
+ defineColumn("wpm", {
+ id: "wpmAcc",
+ header: () => (
+ <>
+ <div>{format.typingSpeedUnit}</div>
+ <div class="opacity-50">accucacy</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(
+ format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+ "raw",
+ addHeader,
+ ),
+ meta: {
+ align: "right",
+ breakpoint: "xl",
+ },
+ }),
+ defineColumn("consistency", {
+ header: "consistency",
+ cell: (info) =>
+ wrapWithHeader(
+ format.percentage(info.getValue(), { showDecimalPlaces: true }),
+ "consistency",
+ 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(
+ dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+ "date",
+ true,
+ )
+ ) : (
+ <>
+ <div class="text-xs">
+ {dateFormat(info.getValue(), "dd MMM yyyy")}
+ </div>
+ <div class="text-xs text-sub">
+ {dateFormat(info.getValue(), "HH:mm")}
+ </div>
+ </>
+ )
+ ) : (
+ ""
+ ),
+ meta: {
+ align: "right",
+ },
+ }),
+ ];
+
+ if (!friendsOnly) {
+ columns.shift();
+ }
+
+ 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(
+ info.getValue() < 1000
+ ? info.getValue().toFixed(0)
+ : abbreviateNumber(info.getValue()),
+ "xp gained",
+ addHeader,
+ ),
+ meta: {
+ align: "right",
+ breakpoint: "xl",
+ },
+ }),
+ defineColumn("timeTypedSeconds", {
+ header: "time typed",
+ cell: (info) =>
+ wrapWithHeader(
+ secondsToString(Math.round(info.getValue()), true, true, ":"),
+ "time typed",
+ addHeader,
+ ),
+ meta: {
+ align: "right",
+ breakpoint: "xl",
+ },
+ }),
+ defineColumn("totalXp", {
+ id: "rawCon",
+ header: () => (
+ <>
+ <div>xp gained</div>
+ <div class="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.getValue()), true, true, ":")}
+ </div>
+ </>
+ ),
+ meta: {
+ align: "right",
+ maxBreakpoint: "xl",
+ },
+ }),
+
+ defineColumn("lastActivityTimestamp", {
+ header: "date",
+ cell: (info) =>
+ info.getValue() !== undefined ? (
+ addHeader ? (
+ wrapWithHeader(
+ dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+ "last activity",
+ true,
+ )
+ ) : (
+ <>
+ <div class="text-xs">
+ {dateFormat(info.getValue(), "dd MMM yyyy")}
+ </div>
+ <div class="text-xs 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",
+ }
+ : {},
+ },
+ }),
+ ];
+
+ if (!friendsOnly) {
+ columns.shift();
+ }
+
+ return columns.map((it) => ({
+ ...it,
+ enableSorting: false,
+ }));
+}
+//placeholder
+function User(props: { user: { name: string } }): JSXElement {
+ return <div>{props.user.name}</div>;
+}
+
+function wrapWithHeader(
+ value: string,
+ header: string,
+ enabled?: boolean,
+): string | JSXElement {
+ return enabled ? (
+ <>
+ <div class="text-xs text-sub">{header}</div>
+ <div>{value}</div>
+ </>
+ ) : (
+ value
+ );
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
new file mode 100644
index 000000000000..ec6aec36bf79
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
@@ -0,0 +1,174 @@
+import { UTCDateMini } from "@date-fns/utc/date/mini";
+import { endOfDay, endOfWeek } from "date-fns";
+import { differenceInSeconds } from "date-fns/differenceInSeconds";
+import {
+ JSXElement,
+ ParentProps,
+ Setter,
+ Show,
+ createEffect,
+ createMemo,
+ createSignal,
+ onCleanup,
+} from "solid-js";
+
+import { LeaderboardType } from "../../../queries/leaderboards";
+import { secondsToString } from "../../../utils/date-and-time";
+import { ExecReturn, SimpleModal } from "../../../utils/simple-modal";
+import { Button } from "../../common/Button";
+import { LoadingCircle } from "../../common/LoadingCircle";
+
+export function TableNavigation(
+ props: {
+ type: LeaderboardType;
+ lastPage: number;
+ userPage?: number;
+ currentPage: number;
+ onPageChange: Setter<number>;
+ onScrollToUser: Setter<boolean>;
+ isLoading?: boolean;
+ } & ParentProps,
+): JSXElement {
+ return (
+ <>
+ <div class="grid grid-cols-2 items-center justify-between text-base">
+ <div>
+ <NextUpdate type={props.type} />
+ </div>
+ <Navigation
+ isLoading={props.isLoading}
+ lastPage={props.lastPage}
+ userPage={props.userPage}
+ currentPage={props.currentPage}
+ onPageChange={props.onPageChange}
+ onScrollToUser={props.onScrollToUser}
+ />
+ </div>
+
+ {props.children}
+
+ <div class="grid grid-cols-1 items-center justify-between text-base">
+ <Navigation
+ lastPage={props.lastPage}
+ currentPage={props.currentPage}
+ onPageChange={props.onPageChange}
+ onScrollToUser={props.onScrollToUser}
+ />
+ </div>
+ </>
+ );
+}
+
+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,
+ };
+ },
+ });
+ return (
+ <div class="grid grid-flow-col items-center gap-2 justify-self-end [&>button]:px-4">
+ <Show when={props.isLoading}>
+ <LoadingCircle />
+ </Show>
+ <Button
+ onClick={() => props.onPageChange(0)}
+ fa={{ icon: "fa-crown", fixedWidth: true }}
+ disabled={props.currentPage === 0}
+ />
+ <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
+ }
+ />
+ </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}
+ />
+ <Button
+ onClick={() => goToPageModal.show(undefined, {})}
+ fa={{ icon: "fa-hashtag", fixedWidth: true }}
+ />
+ <Button
+ onClick={() => props.onPageChange((old) => old + 1)}
+ fa={{ icon: "fa-chevron-right", fixedWidth: true }}
+ disabled={props.currentPage + 1 >= props.lastPage}
+ />
+ </div>
+ );
+}
+
+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(now, endOfDay(new UTCDateMini()));
+ 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(now, nextWeekTimestamp);
+ 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/Title.tsx b/frontend/src/ts/components/pages/leaderboard/Title.tsx
new file mode 100644
index 000000000000..6ec12d99151a
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Title.tsx
@@ -0,0 +1,110 @@
+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 "../../../queries/leaderboards";
+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" />
+ <Show when={subTitle() !== null}>
+ <div class="flex items-center gap-2">
+ <div
+ 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..0be6bd6c46b9
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
@@ -0,0 +1,120 @@
+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: "wpm" | "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 = (): JSXElement => {
+ 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>You ({percentileString})</div>
+ <div class="text-xs text-sub">
+ {" "}
+ <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>
+ </>
+ );
+ };
+ return (
+ <div class="flex rounded bg-sub-alt">
+ <Show
+ when={props.data !== undefined && props.total !== undefined}
+ fallback={<LoadingCircle class="w-full p-4 text-center" />}
+ >
+ <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 664ff05aad48..16587c0dc03a 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -8,7 +8,17 @@ import {
getSortedRowModel,
SortingState,
} from "@tanstack/solid-table";
-import { createMemo, For, JSXElement, Match, Show, Switch } from "solid-js";
+import {
+ Accessor,
+ createEffect,
+ createMemo,
+ createSignal,
+ For,
+ JSXElement,
+ Match,
+ Show,
+ Switch,
+} from "solid-js";
import { z } from "zod";
import { useLocalStorage } from "../../../hooks/useLocalStorage";
@@ -32,19 +42,28 @@ const SortingStateSchema = z.array(
}),
);
-export type AnyColumnDef<TData, TValue = unknown> =
+// oxlint-disable-next-line typescript/no-explicit-any
+export type DataTableColumnDef<TData, TValue = any> =
| ColumnDef<TData, TValue>
| AccessorFnColumnDef<TData, TValue>
| AccessorKeyColumnDef<TData, TValue>;
-type DataTableProps<TData, TValue> = {
+export type DataTableProps<TData, TValue> = {
id: string;
- columns: AnyColumnDef<TData, TValue>[];
+ columns: DataTableColumnDef<TData, TValue>[];
data: TData[];
fallback?: JSXElement;
+ hideHeader?: true;
+ rowSelection?: {
+ getRowId: (row: TData) => string;
+ 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>({
@@ -71,19 +90,33 @@ export function DataTable<TData, TValue = unknown>(
const current = bp();
const result = Object.fromEntries(
props.columns.map((col, index) => {
- const id =
+ col.id =
col.id ??
("accessorKey" in col && col.accessorKey !== null
? String(col.accessorKey)
: `__col_${index}`);
- return [id, current[col.meta?.breakpoint ?? "xxs"]];
+ 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) {
+ setRowSelection({});
+ } else {
+ setRowSelection({ [`${props.rowSelection.activeRow()}`]: true });
+ }
+ });
+
const table = createSolidTable<TData>({
get data() {
return props.data;
@@ -94,6 +127,13 @@ export function DataTable<TData, TValue = unknown>(
getCoreRowModel: getCoreRowModel(),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
+ enableRowSelection: () => props.rowSelection !== undefined,
+ getRowId: (row, index) =>
+ props.rowSelection !== undefined
+ ? props.rowSelection.getRowId(row)
+ : index.toString(),
+ onRowSelectionChange: setRowSelection,
+
state: {
get sorting() {
return sorting();
@@ -101,40 +141,101 @@ export function DataTable<TData, TValue = unknown>(
get columnVisibility() {
return columnVisibility();
},
+ get rowSelection() {
+ return rowSelection();
+ },
},
});
return (
<Show when={table.getRowModel().rows?.length} fallback={props.fallback}>
- <Table>
- <TableHeader>
- <For each={table.getHeaderGroups()}>
- {(headerGroup) => (
- <TableRow>
- <For each={headerGroup.headers}>
- {(header) => (
- <Conditional
- if={header.column.getCanSort()}
- then={
- <TableHead
- colSpan={header.colSpan}
- aria-sort={
- header.column.getIsSorted() === "asc"
- ? "ascending"
- : header.column.getIsSorted() === "desc"
- ? "descending"
- : "none"
- }
- >
- <button
- type="button"
- role="button"
- onClick={(e) => {
- header.column.getToggleSortingHandler()?.(e);
+ <Table id={props.id} class={props.class}>
+ <Show when={!props.hideHeader}>
+ <TableHeader>
+ <For each={table.getHeaderGroups()}>
+ {(headerGroup) => (
+ <TableRow>
+ <For each={headerGroup.headers}>
+ {(header) => (
+ <Conditional
+ if={header.column.getCanSort()}
+ then={
+ <TableHead
+ colSpan={header.colSpan}
+ aria-sort={
+ header.column.getIsSorted() === "asc"
+ ? "ascending"
+ : header.column.getIsSorted() === "desc"
+ ? "descending"
+ : "none"
+ }
+ >
+ <button
+ type="button"
+ role="button"
+ onClick={(e) => {
+ header.column.getToggleSortingHandler()?.(e);
+ }}
+ class="m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap text-sub hover:bg-sub-alt"
+ 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",
+ }}
+ {...(header.column.columnDef.meta?.headerMeta ??
+ {})}
+ >
+ <Show when={!header.isPlaceholder}>
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext(),
+ )}
+ </Show>
+
+ <Switch fallback={<i class="fa-fw"></i>}>
+ <Match
+ when={header.column.getIsSorted() === "asc"}
+ >
+ <Fa
+ icon={"fa-sort-up"}
+ fixedWidth
+ aria-hidden="true"
+ />
+ </Match>
+ <Match
+ when={header.column.getIsSorted() === "desc"}
+ >
+ <Fa
+ icon={"fa-sort-down"}
+ fixedWidth
+ aria-hidden="true"
+ />
+ </Match>
+ </Switch>
+ </button>
+ </TableHead>
+ }
+ 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="text-sub hover:bg-sub-alt m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 text-left font-normal whitespace-nowrap"
- {...(header.column.columnDef.meta
- ?.sortableHeaderMeta ?? {})}
+ {...(header.column.columnDef.meta?.headerMeta ??
+ {})}
>
<Show when={!header.isPlaceholder}>
{flexRender(
@@ -142,51 +243,29 @@ export function DataTable<TData, TValue = unknown>(
header.getContext(),
)}
</Show>
-
- <Switch fallback={<i class="fa-fw"></i>}>
- <Match
- when={header.column.getIsSorted() === "asc"}
- >
- <Fa
- icon={"fa-sort-up"}
- fixedWidth
- aria-hidden="true"
- />
- </Match>
- <Match
- when={header.column.getIsSorted() === "desc"}
- >
- <Fa
- icon={"fa-sort-down"}
- fixedWidth
- aria-hidden="true"
- />
- </Match>
- </Switch>
- </button>
- </TableHead>
- }
- else={
- <TableHead colSpan={header.colSpan}>
- <Show when={!header.isPlaceholder}>
- {flexRender(
- header.column.columnDef.header,
- header.getContext(),
- )}
- </Show>
- </TableHead>
- }
- />
- )}
- </For>
- </TableRow>
- )}
- </For>
- </TableHeader>
+ </TableHead>
+ }
+ />
+ )}
+ </For>
+ </TableRow>
+ )}
+ </For>
+ </TableHeader>
+ </Show>
<TableBody>
<For each={table.getRowModel().rows}>
{(row) => (
- <TableRow data-state={row.getIsSelected() && "selected"}>
+ <TableRow
+ {...{
+ "data-state": row.getIsSelected() ? "selected" : undefined,
+ }}
+ class={
+ row.getIsSelected() && props.rowSelection
+ ? props.rowSelection.class
+ : ""
+ }
+ >
<For each={row.getVisibleCells()}>
{(cell) => {
const cellMeta =
@@ -197,7 +276,18 @@ export function DataTable<TData, TValue = unknown>(
})
: (cell.column.columnDef.meta?.cellMeta ?? {});
return (
- <TableCell {...cellMeta}>
+ <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",
+ }}
+ >
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
diff --git a/frontend/src/ts/components/ui/table/Table.tsx b/frontend/src/ts/components/ui/table/Table.tsx
index 1e1f5e762ae4..42a6d0c107c3 100644
--- a/frontend/src/ts/components/ui/table/Table.tsx
+++ b/frontend/src/ts/components/ui/table/Table.tsx
@@ -7,7 +7,10 @@ const Table: Component<ComponentProps<"table">> = (props) => {
const [local, others] = splitProps(props, ["class"]);
return (
<table
- class={cn("w-full border-separate border-spacing-0", local.class)}
+ class={cn(
+ "w-full border-separate border-spacing-0 [&>tbody>tr>td]:p-0 [&>thead>tr>th]:p-2",
+ local.class,
+ )}
{...others}
></table>
);
@@ -17,7 +20,7 @@ const TableHeader: Component<ComponentProps<"thead">> = (props) => {
const [local, others] = splitProps(props, ["class"]);
return (
<thead
- class={cn("text-xs [&>tr]:bg-none", local.class)}
+ class={cn("text-xs text-sub [&>tr]:bg-none", local.class)}
{...others}
></thead>
);
@@ -28,7 +31,7 @@ const TableBody: Component<ComponentProps<"tbody">> = (props) => {
return (
<tbody
class={cn(
- "[&>tr]:odd:bg-sub-alt text-xs md:text-sm lg:text-base",
+ "text-sm xl:text-base [&>tr]:odd:bg-sub-alt [&>tr>td]:first:rounded-l [&>tr>td]:last:rounded-r",
local.class,
)}
{...others}
@@ -43,12 +46,7 @@ const TableFooter: Component<ComponentProps<"tfoot">> = (props) => {
const TableRow: Component<ComponentProps<"tr">> = (props) => {
const [local, others] = splitProps(props, ["class"]);
- return (
- <tr
- class={cn("[&>td]:first:rounded-l [&>td]:last:rounded-r", local.class)}
- {...others}
- ></tr>
- );
+ return <tr class={cn(local.class)} {...others}></tr>;
};
const TableHead: Component<ComponentProps<"th">> = (props) => {
@@ -57,7 +55,7 @@ const TableHead: Component<ComponentProps<"th">> = (props) => {
<th
aria-label={local["aria-label"]}
class={cn(
- "text-sub has-button:p-0 appearance-none p-2 text-left align-bottom text-xs font-normal",
+ "has-button:p-0 appearance-none align-bottom text-xs font-normal",
local.class,
)}
{...others}
@@ -67,7 +65,7 @@ const TableHead: Component<ComponentProps<"th">> = (props) => {
const TableCell: Component<ComponentProps<"td">> = (props) => {
const [local, others] = splitProps(props, ["class"]);
- return <td class={cn("appearance-none p-2", local.class)} {...others}></td>;
+ return <td class={cn("appearance-none", 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 112179c62dd3..22088a969976 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -10,7 +10,7 @@ import * as PageProfile from "../pages/profile";
import * as PageProfileSearch from "../pages/profile-search";
import * as Friends from "../pages/friends";
import * as Page404 from "../pages/404";
-import * as PageLeaderboards from "../pages/leaderboards";
+import * as PageLeaderboards from "../components/pages/leaderboard/LeaderboardPage";
import * as PageAccountSettings from "../pages/account-settings";
import * as PageTransition from "../states/page-transition";
import * as AdController from "../controllers/ad-controller";
@@ -38,7 +38,7 @@ const pages = {
friends: Friends.page,
404: Page404.page,
accountSettings: PageAccountSettings.page,
- leaderboards: PageLeaderboards.page,
+ leaderboards: PageLeaderboards.skeletonPage,
};
function updateOpenGraphUrl(): void {
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/firebase.ts b/frontend/src/ts/firebase.ts
index 85b562673397..c12620e4d5ab 100644
--- a/frontend/src/ts/firebase.ts
+++ b/frontend/src/ts/firebase.ts
@@ -35,6 +35,7 @@ import {
import { tryCatch } from "@monkeytype/util/trycatch";
import { dispatch as dispatchSignUpEvent } from "./observables/google-sign-up-event";
import { addBanner } from "./stores/banners";
+import { setUserId } from "./signals/core";
let app: FirebaseApp | undefined;
let Auth: AuthType | undefined;
@@ -75,6 +76,7 @@ export async function init(callback: ReadyCallback): Promise<void> {
onAuthStateChanged(Auth, async (user) => {
if (!ignoreAuthCallback) {
+ setUserId(user?.uid ?? null);
await callback(true, user);
}
});
@@ -82,6 +84,7 @@ export async function init(callback: ReadyCallback): Promise<void> {
app = undefined;
Auth = undefined;
console.error("Firebase failed to initialize", e);
+ setUserId(null);
await callback(false, null);
if (isDevEnvironment()) {
addBanner({
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index f26d9a3fd3d6..2f33535e1423 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 "./modals/google-sign-up";
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 b9742fda1503..11d4c0cf9946 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";
@@ -1237,32 +1236,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/leaderboards.ts b/frontend/src/ts/pages/leaderboards.ts
deleted file mode 100644
index 182e819c1ad6..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.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 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 44032b6cc3f6..49d6a314183a 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/keys.ts b/frontend/src/ts/queries/keys.ts
new file mode 100644
index 000000000000..84cbbaf79e6f
--- /dev/null
+++ b/frontend/src/ts/queries/keys.ts
@@ -0,0 +1,6 @@
+export function baseKey(
+ key: string,
+ options?: { isUserSpecific?: true },
+): unknown[] {
+ return options?.isUserSpecific ? ["user", key] : [key];
+}
diff --git a/frontend/src/ts/queries/leaderboards.ts b/frontend/src/ts/queries/leaderboards.ts
new file mode 100644
index 000000000000..140209d985f7
--- /dev/null
+++ b/frontend/src/ts/queries/leaderboards.ts
@@ -0,0 +1,208 @@
+import {
+ GetLeaderboardQuery,
+ GetLeaderboardRankQuery,
+} from "@monkeytype/contracts/leaderboards";
+import { LanguageSchema } from "@monkeytype/schemas/languages";
+import { ModeSchema } from "@monkeytype/schemas/shared";
+import { QueryKey, queryOptions } from "@tanstack/solid-query";
+import { z } from "zod";
+import Ape from "../ape";
+
+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 WpmSelection = z.object({
+ type: z.enum(["daily", "allTime"]),
+ friendsOnly: z.boolean(),
+ previous: z.boolean(),
+ mode: ModeSchema,
+ mode2: z.string(),
+ language: LanguageSchema,
+});
+
+export const SelectionSchema = WpmSelection.or(XpSelection);
+export type Selection = z.infer<typeof SelectionSchema>;
+
+const queryKeys = {
+ root: (options: Selection & { userSpecific?: true }) => [
+ 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);
+
+ let request;
+
+ if (selection.type === "weekly") {
+ request = Ape.leaderboards.getWeeklyXp({
+ query: {
+ friendsOnly: selection.friendsOnly ? true : undefined,
+ weeksBefore: selection.previous ? 1 : undefined,
+ pageSize: 50,
+ page: page.page,
+ },
+ });
+ } else {
+ const baseQuery: GetLeaderboardQuery = {
+ mode: selection.mode,
+ mode2: selection.mode2,
+ language: selection.language,
+ friendsOnly: selection.friendsOnly ? true : undefined,
+ pageSize: 50,
+ page: page.page,
+ };
+ if (selection.type === "allTime") {
+ request = Ape.leaderboards.get({ query: baseQuery });
+ } else {
+ request = Ape.leaderboards.getDaily({
+ 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 * 60 : 1000 * 60,
+ placeholderData: (old) => {
+ if (
+ old === undefined ||
+ old["entries"] === undefined ||
+ old["entries"].length === 0 ||
+ old["entries"][0] === undefined
+ ) {
+ return undefined;
+ }
+ const last = old["entries"][0];
+ if (
+ (options.type === "weekly" && !("totalXp" in last)) ||
+ (options.type !== "weekly" && !("wpm" in last))
+ ) {
+ return undefined;
+ }
+
+ return old;
+ },
+ });
+
+// 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 * 60 : 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/queries/server-configuration.ts b/frontend/src/ts/queries/server-configuration.ts
new file mode 100644
index 000000000000..c4cd1a9115b1
--- /dev/null
+++ b/frontend/src/ts/queries/server-configuration.ts
@@ -0,0 +1,27 @@
+import { queryOptions } from "@tanstack/solid-query";
+import { baseKey } from "./keys";
+import Ape from "../ape";
+
+const queryKeys = {
+ root: () => baseKey("serverConfiguration"),
+};
+
+const staleTime = 1000 * 60 * 60;
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getServerConfigurationQueryOptions = () =>
+ queryOptions({
+ queryKey: queryKeys.root(),
+ queryFn: async () => {
+ const response = await Ape.configuration.get();
+
+ if (response.status !== 200) {
+ throw new Error(
+ `Could not fetch configuration: ${response.body.message}`,
+ );
+ }
+ return response.body.data;
+ },
+ staleTime,
+ gcTime: Infinity,
+ });
diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index f3c6127b08e0..8614eda9e779 100644
--- a/frontend/src/ts/signals/core.ts
+++ b/frontend/src/ts/signals/core.ts
@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js";
+import { createMemo, createSignal } from "solid-js";
import { PageName } from "../pages/page";
export const [getActivePage, setActivePage] = createSignal<PageName>("loading");
@@ -29,3 +29,8 @@ export const [getCommandlineSubgroup, setCommandlineSubgroup] = createSignal<
export const [getFocus, setFocus] = createSignal(false);
export const [getGlobalOffsetTop, setGlobalOffsetTop] = createSignal(0);
export const [getIsScreenshotting, setIsScreenshotting] = createSignal(false);
+
+const [userId, setUserId] = createSignal<string | null>(null);
+export { setUserId };
+export const getUserId = createMemo(() => userId());
+export const isLoggedIn = createMemo(() => getUserId() !== null);
diff --git a/frontend/src/ts/types/tanstack-table.d.ts b/frontend/src/ts/types/tanstack-table.d.ts
index d69863e3b835..b0719fca4858 100644
--- a/frontend/src/ts/types/tanstack-table.d.ts
+++ b/frontend/src/ts/types/tanstack-table.d.ts
@@ -12,6 +12,17 @@ declare module "@tanstack/solid-table" {
*/
breakpoint?: BreakpointKey;
+ /**
+ * define maximal breakpoint for the column to be visible.
+ * If not set, the column is always visible
+ */
+ maxBreakpoint?: BreakpointKey;
+
+ /**
+ * align header and cells, default: `left`
+ */
+ align?: "left" | "right" | "center";
+
/**
* additional attributes to be set on the table cell.
* Can be used to define mouse-overs with `aria-label` and `data-balloon-pos`
@@ -24,9 +35,9 @@ declare module "@tanstack/solid-table" {
}) => JSX.HTMLAttributes<HTMLTableCellElement>);
/**
- * additional attributes to be set on the header if it is sortable
+ * additional attributes to be set on the header
* Can be used to define mouse-overs with `aria-label` and `data-balloon-pos`
*/
- sortableHeaderMeta?: JSX.HTMLAttributes;
+ headerMeta?: JSX.HTMLAttributes;
}
}
diff --git a/frontend/src/ts/utils/format.ts b/frontend/src/ts/utils/format.ts
index c8ebab24b644..bf50d649b47a 100644
--- a/frontend/src/ts/utils/format.ts
+++ b/frontend/src/ts/utils/format.ts
@@ -1,6 +1,9 @@
import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
import * as Numbers from "@monkeytype/util/numbers";
-import { Config as ConfigType } from "@monkeytype/schemas/configs";
+import {
+ Config as ConfigType,
+ TypingSpeedUnit,
+} from "@monkeytype/schemas/configs";
import Config from "../config";
export type FormatOptions = {
@@ -20,9 +23,16 @@ export type FallbackOptions = {
fallback?: string;
};
+type FormatConfig = Pick<
+ ConfigType,
+ "typingSpeedUnit" | "alwaysShowDecimalPlaces"
+>;
+
export class Formatting {
- constructor(private config: ConfigType) {
- //
+ private config: FormatConfig;
+
+ constructor(config: FormatConfig) {
+ this.config = config;
}
typingSpeed(
@@ -65,6 +75,10 @@ export class Formatting {
return this.number(value, options);
}
+ get typingSpeedUnit(): TypingSpeedUnit {
+ return this.config.typingSpeedUnit;
+ }
+
private number(
value: number | null | undefined,
formatOptions: FormatOptions,