> = (props) => {
| > = (props) => {
return (
| = Omit<
Result,
- | "_id"
| "bailedOut"
| "blindMode"
| "lazyMode"
@@ -38,7 +32,6 @@ export type SnapshotResult = Omit<
| "afkDuration"
| "tags"
> & {
- _id: string;
bailedOut: boolean;
blindMode: boolean;
lazyMode: boolean;
@@ -52,6 +45,10 @@ export type SnapshotResult = Omit<
incompleteTestSeconds: number;
afkDuration: number;
tags: string[];
+ //calculated values
+ words: number;
+ timeTyping: number;
+ dayTimestamp: number;
};
export type Snapshot = Omit<
@@ -75,12 +72,10 @@ export type Snapshot = Omit<
inboxUnreadSize: number;
streak: number;
maxStreak: number;
- filterPresets: ResultFilters[];
isPremium: boolean;
streakHourOffset?: number;
tags: SnapshotUserTag[];
presets: SnapshotPreset[];
- results?: SnapshotResult[];
xp: number;
testActivity?: ModifiableTestActivityCalendar;
testActivityByYear?: { [key: string]: TestActivityCalendar };
@@ -92,7 +87,6 @@ export type SnapshotPreset = Preset & {
};
const defaultSnap = {
- results: undefined,
personalBests: {
time: {},
words: {},
@@ -120,7 +114,6 @@ const defaultSnap = {
quoteMod: false,
favoriteQuotes: {},
addedAt: 0,
- filterPresets: [],
xp: 0,
inboxUnreadSize: 0,
streak: 0,
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 6fc1a33d6807..ffc8835bf056 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -31,8 +31,6 @@ import chartAnnotation, {
type LabelOptions,
} from "chartjs-plugin-annotation";
import chartTrendline from "chartjs-plugin-trendline";
-import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
-import { getActivePage } from "../states/core";
Chart.register(
BarController,
@@ -58,16 +56,12 @@ Chart.defaults.elements.line.tension = 0.5;
Chart.defaults.elements.line.fill = "origin";
import "chartjs-adapter-date-fns";
-import { format } from "date-fns/format";
import { Config } from "../config/store";
import { configEvent } from "../events/config";
import * as TestInput from "../test/test-input";
-import * as DateTime from "../utils/date-and-time";
import * as Arrays from "../utils/arrays";
-import * as Numbers from "@monkeytype/util/numbers";
import { blendTwoHexColors } from "../utils/colors";
import { typedKeys } from "../utils/misc";
-import { qs } from "../utils/dom";
import { getTheme } from "../states/theme";
import { Theme } from "../constants/themes";
import { createDebouncedEffectOn } from "../hooks/effects";
@@ -345,765 +339,6 @@ export type ActivityChartDataPoint = {
avgCon?: number;
};
-export const accountHistory = new ChartWithUpdateColors<
- "line",
- HistoryChartData[] | AccChartData[] | OtherChartData[],
- string,
- | "wpm"
- | "pb"
- | "acc"
- | "wpmAvgTen"
- | "accAvgTen"
- | "wpmAvgHundred"
- | "accAvgHundred"
->(
- document.querySelector(
- ".pageAccount #accountHistoryChart",
- ) as HTMLCanvasElement,
- {
- type: "line",
- data: {
- datasets: [
- {
- yAxisID: "wpm",
- data: [],
- fill: false,
- borderWidth: 0,
- order: 3,
- },
- {
- yAxisID: "pb",
- data: [],
- fill: false,
- stepped: true,
- pointRadius: 0,
- pointHoverRadius: 0,
- order: 4,
- },
- {
- yAxisID: "acc",
- fill: false,
- data: [],
- pointStyle: "triangle",
- borderWidth: 0,
- pointRadius: 3.5,
- order: 3,
- },
- {
- yAxisID: "wpmAvgTen",
- data: [],
- fill: false,
- pointRadius: 0,
- pointHoverRadius: 0,
- order: 2,
- },
- {
- yAxisID: "accAvgTen",
- data: [],
- fill: false,
- pointRadius: 0,
- pointHoverRadius: 0,
- order: 2,
- },
- {
- yAxisID: "wpmAvgHundred",
- data: [],
- fill: false,
- pointRadius: 0,
- pointHoverRadius: 0,
- order: 1,
- },
- {
- yAxisID: "accAvgHundred",
- label: "accAvgHundred",
- data: [],
- fill: false,
- pointRadius: 0,
- pointHoverRadius: 0,
- order: 1,
- },
- ],
- },
- options: {
- // responsive: true,
- maintainAspectRatio: false,
- hover: {
- mode: "nearest",
- intersect: false,
- },
- scales: {
- x: {
- axis: "x",
- type: "linear",
- reverse: true,
- min: 0,
- ticks: {
- stepSize: 10,
- },
- display: false,
- grid: {
- display: false,
- },
- },
- wpm: {
- axis: "y",
- type: "linear",
- beginAtZero: true,
- min: 0,
- ticks: {
- stepSize: 10,
- },
- display: true,
- title: {
- display: true,
- text: "Words per Minute",
- },
- position: "right",
- },
- pb: {
- axis: "y",
- beginAtZero: true,
- min: 0,
- ticks: {
- stepSize: 10,
- },
- display: false,
- },
- acc: {
- axis: "y",
- beginAtZero: true,
- min: 0,
- max: 100,
- reverse: true,
- ticks: {
- stepSize: 10,
- },
- display: true,
- title: {
- display: true,
- text: "Accuracy",
- },
- grid: {
- display: false,
- },
- position: "left",
- },
- wpmAvgTen: {
- axis: "y",
- beginAtZero: true,
- min: 0,
- ticks: {
- stepSize: 10,
- },
- display: false,
- grid: {
- display: false,
- },
- },
- accAvgTen: {
- axis: "y",
- beginAtZero: true,
- min: 0,
- max: 100,
- reverse: true,
- ticks: {
- stepSize: 10,
- },
- display: false,
- grid: {
- display: false,
- },
- },
- wpmAvgHundred: {
- axis: "y",
- beginAtZero: true,
- min: 0,
- ticks: {
- stepSize: 10,
- },
- display: false,
- grid: {
- display: false,
- },
- },
- accAvgHundred: {
- axis: "y",
- beginAtZero: true,
- min: 0,
- max: 100,
- reverse: true,
- ticks: {
- stepSize: 10,
- },
- display: false,
- grid: {
- display: false,
- },
- },
- },
-
- plugins: {
- annotation: {
- annotations: [],
- },
- tooltip: {
- animation: { duration: 250 },
- // Disable the on-canvas tooltip
- enabled: true,
-
- intersect: false,
- external: function (ctx): void {
- if (ctx === undefined) return;
- ctx.tooltip.options.displayColors = false;
- },
- filter: function (tooltipItem): boolean {
- return (
- tooltipItem.datasetIndex !== 1 &&
- tooltipItem.datasetIndex !== 3 &&
- tooltipItem.datasetIndex !== 4 &&
- tooltipItem.datasetIndex !== 5 &&
- tooltipItem.datasetIndex !== 6
- );
- },
- callbacks: {
- title: function (): string {
- return "";
- },
-
- beforeLabel: function (tooltipItem): string {
- if (tooltipItem.datasetIndex !== 0) {
- const resultData = tooltipItem.dataset.data[
- tooltipItem.dataIndex
- ] as AccChartData;
- return `error rate: ${Numbers.roundTo2(
- resultData.errorRate,
- )}%\nacc: ${Numbers.roundTo2(100 - resultData.errorRate)}%`;
- }
- const resultData = tooltipItem.dataset.data[
- tooltipItem.dataIndex
- ] as HistoryChartData;
- let label =
- `${Config.typingSpeedUnit}: ${resultData.wpm}` +
- "\n" +
- `raw: ${resultData.raw}` +
- "\n" +
- `acc: ${resultData.acc}` +
- "\n\n" +
- `mode: ${resultData.mode} `;
-
- if (resultData.mode === "time") {
- label += resultData.mode2;
- } else if (resultData.mode === "words") {
- label += resultData.mode2;
- }
-
- let diff = resultData.difficulty ?? "normal";
- label += `\ndifficulty: ${diff}`;
-
- label +=
- "\n" +
- `punctuation: ${resultData.punctuation}` +
- "\n" +
- `language: ${resultData.language}` +
- `${resultData.isPb ? "\n\nnew personal best" : ""}` +
- "\n\n" +
- `date: ${format(
- new Date(resultData.timestamp),
- "dd MMM yyyy HH:mm",
- )}`;
-
- return label;
- },
- label: function (): string {
- return "";
- },
- afterLabel: function (tooltip): string {
- accountHistoryActiveIndex = tooltip.dataIndex;
- return "";
- },
- },
- },
- },
- },
- },
-);
-
-export const accountActivity = new ChartWithUpdateColors<
- "bar" | "line",
- ActivityChartDataPoint[],
- string,
- "count" | "avgWpm"
->(
- document.querySelector(
- ".pageAccount #accountActivityChart",
- ) as HTMLCanvasElement,
- {
- type: "bar",
- data: {
- labels: [],
- datasets: [
- {
- yAxisID: "count",
- label: "Seconds",
- data: [],
- trendlineLinear: {
- style: "rgba(255,105,180, .8)",
- lineStyle: "dotted",
- width: 2,
- },
- order: 3,
- },
- {
- yAxisID: "avgWpm",
- label: "Average Wpm",
- data: [],
- type: "line",
- order: 2,
- tension: 0,
- fill: false,
- },
- ],
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- hover: {
- mode: "nearest",
- intersect: false,
- },
- scales: {
- x: {
- axis: "x",
- ticks: {
- autoSkip: true,
- autoSkipPadding: 20,
- },
- type: "time",
- time: {
- unit: "day",
- displayFormats: {
- day: "d MMM",
- },
- },
- bounds: "ticks",
- display: true,
- title: {
- display: false,
- text: "Date",
- },
- offset: true,
- },
- count: {
- axis: "y",
- beginAtZero: true,
- min: 0,
- ticks: {
- autoSkip: true,
- autoSkipPadding: 20,
- stepSize: 1,
- },
- display: true,
- title: {
- display: true,
- text: "Time typing (minutes)",
- },
- },
- avgWpm: {
- axis: "y",
- beginAtZero: true,
- min: 0,
- ticks: {
- autoSkip: true,
- autoSkipPadding: 20,
- stepSize: 10,
- },
- display: true,
- position: "right",
- title: {
- display: true,
- text: "Average Wpm",
- },
- grid: {
- display: false,
- },
- },
- },
- plugins: {
- annotation: {
- annotations: [],
- },
- tooltip: {
- animation: { duration: 250 },
- intersect: false,
- mode: "index",
- filter: (tooltipItem): boolean => {
- return tooltipItem.datasetIndex === 0;
- },
- callbacks: {
- title: function (tooltipItem): string {
- const firstItem = tooltipItem[0] as TooltipItem<"bar" | "line">;
- const resultData = firstItem.dataset.data[
- firstItem.dataIndex
- ] as ActivityChartDataPoint;
- return format(new Date(resultData.x), "dd MMM yyyy");
- },
- beforeLabel: function (tooltipItem): string {
- const resultData = tooltipItem.dataset.data[
- tooltipItem.dataIndex
- ] as ActivityChartDataPoint;
- const typingSpeedUnit = getTypingSpeedUnit(
- Config.typingSpeedUnit,
- );
- return `Time Typing: ${DateTime.secondsToString(
- Math.round(resultData.y * 60),
- true,
- true,
- )}\nTests Completed: ${
- resultData.amount
- }\nRestarts per test: ${Numbers.roundTo2(
- (resultData.restarts ?? 0) / (resultData.amount ?? 0),
- )}\nHighest ${Config.typingSpeedUnit.toUpperCase()}: ${Numbers.roundTo2(
- typingSpeedUnit.fromWpm(resultData.maxWpm ?? 0),
- )}\nAverage ${Config.typingSpeedUnit.toUpperCase()}: ${Numbers.roundTo2(
- typingSpeedUnit.fromWpm(resultData.avgWpm ?? 0),
- )}\nAverage Accuracy: ${Numbers.roundTo2(
- resultData.avgAcc ?? 0,
- )}%\nAverage Consistency: ${Numbers.roundTo2(
- resultData.avgCon ?? 0,
- )}%`;
- },
- label: function (): string {
- return "";
- },
- },
- },
- },
- },
- },
-);
-
-export const accountHistogram = new ChartWithUpdateColors<
- "bar",
- ActivityChartDataPoint[],
- string,
- "count"
->(
- document.querySelector(
- ".pageAccount #accountHistogramChart",
- ) as HTMLCanvasElement,
- {
- type: "bar",
- data: {
- labels: [],
- datasets: [
- {
- yAxisID: "count",
- label: "Tests",
- data: [],
- },
- ],
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- hover: {
- mode: "nearest",
- intersect: false,
- },
- scales: {
- x: {
- axis: "x",
- // ticks: {
- // autoSkip: true,
- // autoSkipPadding: 20,
- // },
- bounds: "ticks",
- display: true,
- title: {
- display: false,
- text: "Bucket",
- },
- offset: true,
- },
- count: {
- axis: "y",
- beginAtZero: true,
- min: 0,
- ticks: {
- autoSkip: true,
- autoSkipPadding: 20,
- stepSize: 10,
- },
- display: true,
- title: {
- display: true,
- text: "Tests",
- },
- },
- },
- plugins: {
- annotation: {
- annotations: [],
- },
- tooltip: {
- animation: { duration: 250 },
- intersect: false,
- mode: "index",
- // callbacks: {
- // title: function (tooltipItem): string {
- // const resultData = tooltipItem[0].dataset.data[
- // tooltipItem[0].dataIndex
- // ] as MonkeyTypes.ActivityChartDataPoint;
- // return format(new Date(resultData.x), "dd MMM yyyy");
- // },
- // beforeLabel: function (tooltipItem): string {
- // const resultData = tooltipItem.dataset.data[
- // tooltipItem.dataIndex
- // ] as MonkeyTypes.ActivityChartDataPoint;
- // switch (tooltipItem.datasetIndex) {
- // case 0:
- // return `Time Typing: ${DateTime.secondsToString(
- // Math.round(resultData.y),
- // true,
- // true
- // )}\nTests Completed: ${resultData.amount}`;
- // case 1:
- // return `Average ${
- // Config.typingSpeedUnit
- // }: ${Numbers.roundTo2(resultData.y)}`;
- // default:
- // return "";
- // }
- // },
- // label: function (): string {
- // return "";
- // },
- // },
- },
- },
- },
- },
-);
-
-export const miniResult = new ChartWithUpdateColors<
- "line" | "scatter",
- number[],
- string,
- "wpm" | "burst" | "error"
->(document.querySelector("#miniResultChartModal canvas") as HTMLCanvasElement, {
- type: "line",
- data: {
- labels: [],
- datasets: [
- {
- label: "wpm",
- data: [],
- borderColor: "rgba(125, 125, 125, 1)",
- borderWidth: 3,
- yAxisID: "wpm",
- order: 2,
- pointRadius: 1,
- },
- {
- label: "burst",
- data: [],
- borderColor: "rgba(125, 125, 125, 1)",
- borderWidth: 3,
- yAxisID: "burst",
- order: 3,
- pointRadius: 1,
- },
- {
- label: "errors",
- data: [],
- borderColor: "rgba(255, 125, 125, 1)",
- pointBackgroundColor: "rgba(255, 125, 125, 1)",
- borderWidth: 2,
- order: 1,
- yAxisID: "error",
- type: "scatter",
- pointStyle: "crossRot",
- pointRadius: function (context): number {
- const index = context.dataIndex;
- const value = context.dataset.data[index] as number;
- return (value ?? 0) <= 0 ? 0 : 3;
- },
- pointHoverRadius: function (context): number {
- const index = context.dataIndex;
- const value = context.dataset.data[index] as number;
- return (value ?? 0) <= 0 ? 0 : 5;
- },
- },
- ],
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- scales: {
- x: {
- axis: "x",
- ticks: {
- autoSkip: true,
- autoSkipPadding: 20,
- },
- display: true,
- title: {
- display: false,
- text: "Seconds",
- },
- },
- wpm: {
- axis: "y",
- display: true,
- title: {
- display: true,
- text: "Words per Minute",
- },
- beginAtZero: true,
- min: 0,
- ticks: {
- autoSkip: true,
- autoSkipPadding: 20,
- },
- grid: {
- display: true,
- },
- },
- burst: {
- axis: "y",
- display: false,
- title: {
- display: true,
- text: "Burst Words per Minute",
- },
- beginAtZero: true,
- min: 0,
- ticks: {
- autoSkip: true,
- autoSkipPadding: 20,
- },
- grid: {
- display: false,
- },
- },
- error: {
- display: true,
- position: "right",
- title: {
- display: true,
- text: "Errors",
- },
- beginAtZero: true,
- ticks: {
- precision: 0,
- autoSkip: true,
- autoSkipPadding: 20,
- },
- grid: {
- display: false,
- },
- },
- },
- plugins: {
- annotation: {
- annotations: [],
- },
- tooltip: {
- animation: { duration: 250 },
- mode: "index",
- intersect: false,
- },
- },
- },
-});
-
-type ButtonBelowChart =
- | ".toggleResultsOnChart"
- | ".toggleAccuracyOnChart"
- | ".toggleAverage10OnChart"
- | ".toggleAverage100OnChart";
-
-export function updateAccountChartButtons(): void {
- updateResults();
- updateAccuracy();
- updateAverage10();
- updateAverage100();
-}
-
-function updateAccountChartButton(
- isActive: boolean,
- className: ButtonBelowChart,
-): void {
- isActive
- ? qs(`.pageAccount ${className}`)?.addClass("active")
- : qs(`.pageAccount ${className}`)?.removeClass("active");
-}
-
-function updateResults(): void {
- const resultsOn = Config.accountChart[0] === "on";
- updateAccountChartButton(resultsOn, ".toggleResultsOnChart");
-
- accountHistory.getDataset("wpm").hidden = !resultsOn;
- accountHistory.getDataset("pb").hidden = !resultsOn;
- accountHistory.getDataset("wpmAvgTen").hidden = !resultsOn;
- accountHistory.getDataset("wpmAvgHundred").hidden = !resultsOn;
- accountHistory.getScale("wpm").display = resultsOn;
-}
-
-function updateAccuracy(): void {
- const resultsOn = Config.accountChart[0] === "on";
- const accOn = Config.accountChart[1] === "on";
- updateAccountChartButton(accOn, ".toggleAccuracyOnChart");
-
- accountHistory.getDataset("acc").hidden = !accOn;
- accountHistory.getDataset("accAvgTen").hidden = !accOn;
- accountHistory.getDataset("accAvgHundred").hidden = !accOn;
- accountHistory.getScale("acc").display = accOn;
-
- if (resultsOn) {
- accountHistory.getScale("acc").min = 0;
- accountHistory.getScale("accAvgTen").min = 0;
- accountHistory.getScale("accAvgHundred").min = 0;
- } else {
- const minAccRoundedTo10 =
- Math.floor(
- Math.min(...accountHistory.getDataset("acc").data.map((x) => x.y)) / 5,
- ) * 5;
-
- accountHistory.getScale("acc").min = minAccRoundedTo10;
- accountHistory.getScale("accAvgTen").min = minAccRoundedTo10;
- accountHistory.getScale("accAvgHundred").min = minAccRoundedTo10;
- }
-}
-
-function updateAverage10(): void {
- const resultsOn = Config.accountChart[0] === "on";
- const accOn = Config.accountChart[1] === "on";
- const avg10On = Config.accountChart[2] === "on";
- updateAccountChartButton(avg10On, ".toggleAverage10OnChart");
-
- if (accOn) {
- accountHistory.getDataset("accAvgTen").hidden = !avg10On;
- }
- if (resultsOn) {
- accountHistory.getDataset("wpmAvgTen").hidden = !avg10On;
- }
-}
-
-function updateAverage100(): void {
- const resultsOn = Config.accountChart[0] === "on";
- const accOn = Config.accountChart[1] === "on";
- const avg100On = Config.accountChart[3] === "on";
- updateAccountChartButton(avg100On, ".toggleAverage100OnChart");
-
- if (accOn) {
- accountHistory.getDataset("accAvgHundred").hidden = !avg100On;
- }
- if (resultsOn) {
- accountHistory.getDataset("wpmAvgHundred").hidden = !avg100On;
- }
-}
-
async function updateColors<
TType extends ChartType = "bar" | "line" | "scatter",
TData =
@@ -1163,35 +398,6 @@ async function updateColors<
return;
}
- if (chart.id === miniResult.id) {
- const c = chart as unknown as typeof miniResult;
-
- const wpm = c.getDataset("wpm");
- wpm.backgroundColor = "transparent";
- wpm.borderColor = colors.main;
- wpm.pointBackgroundColor = colors.main;
- wpm.pointBorderColor = colors.main;
-
- const error = c.getDataset("error");
- error.backgroundColor = colors.error;
- error.borderColor = colors.error;
- error.pointBackgroundColor = colors.error;
- error.pointBorderColor = colors.error;
-
- const burst = c.getDataset("burst");
- burst.backgroundColor = blendTwoHexColors(
- colors.subAlt,
- colors.subAlt + "00",
- 0.75,
- );
- burst.borderColor = colors.sub;
- burst.pointBackgroundColor = colors.sub;
- burst.pointBorderColor = colors.sub;
-
- chart.update("resize");
- return;
- }
-
//@ts-expect-error it's too difficult to figure out these types, but this works
chart.data.datasets[0].borderColor = (ctx): string => {
// oxlint-disable-next-line no-unsafe-member-access
@@ -1348,16 +554,8 @@ function setDefaultFontFamily(font: string): void {
createDebouncedEffectOn(125, getTheme, (theme) => {
void result.updateColors(theme);
- void accountHistory.updateColors(theme);
- void accountHistogram.updateColors(theme);
- void accountActivity.updateColors(theme);
- void miniResult.updateColors(theme);
});
configEvent.subscribe(({ key, newValue }) => {
- if (key === "accountChart" && getActivePage() === "account") {
- updateAccountChartButtons();
- accountHistory.update();
- }
if (key === "fontFamily") setDefaultFontFamily(newValue);
});
diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index b777f0eec1f3..28838342074e 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -6,7 +6,6 @@ import {
setSelectedProfileName,
} from "../states/core";
import * as Settings from "../pages/settings";
-import * as Account from "../pages/account";
import * as PageTest from "../pages/test";
import * as PageLoading from "../pages/loading";
import * as Friends from "../pages/friends";
@@ -30,6 +29,9 @@ import {
readGetParameters,
} from "../states/leaderboard-selection";
import { configurationPromise as serverConfigurationPromise } from "../ape/server-configuration";
+import { getSnapshot } from "../db";
+import { resultsCollection } from "../collections/results";
+import * as TodayTracker from "../test/today-tracker";
type ChangeOptions = {
force?: boolean;
@@ -43,7 +45,34 @@ const pages = {
test: PageTest.page,
settings: Settings.page,
about: solidPage("about"),
- account: Account.page,
+ account: solidPage("account", {
+ loadingOptions: {
+ loadingMode: () => {
+ if (resultsCollection.isReady()) {
+ return "none";
+ } else {
+ return "sync";
+ }
+ },
+ loadingPromise: async () => {
+ if (getSnapshot() === null) {
+ throw new Error(
+ "Looks like your account data didn't download correctly. Please refresh the page.
If this error persists, please contact support.",
+ );
+ }
+ await resultsCollection.stateWhenReady();
+ TodayTracker.addAllFromToday();
+ },
+ style: "bar",
+ keyframes: [
+ {
+ percentage: 90,
+ durationMs: 2000,
+ text: "Downloading results...",
+ },
+ ],
+ },
+ }),
login: solidPage("login"),
profile: solidPage("profile", {
beforeShow: async (options) => {
diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
index 43623d33b19f..44e71363e5c0 100644
--- a/frontend/src/ts/db.ts
+++ b/frontend/src/ts/db.ts
@@ -4,7 +4,6 @@ import {
showErrorNotification,
} from "./states/notifications";
import { isAuthenticated, getAuthenticatedUser } from "./firebase";
-import { lastElementFromArray } from "./utils/arrays";
import * as Dates from "date-fns";
import {
TestActivityCalendar,
@@ -34,6 +33,11 @@ import {
get as getServerConfiguration,
} from "./ape/server-configuration";
import { Connection } from "@monkeytype/schemas/connections";
+import {
+ findFastestResultByTagId,
+ insertLocalResult,
+} from "./collections/results";
+import { resultFilterPresetsCollection } from "./collections/result-filter-presets";
import {
setLastResult,
setSnapshot as setSolidSnapshot,
@@ -174,7 +178,6 @@ export async function initSnapshot(): Promise {
snap.inboxUnreadSize = userData.inboxUnreadSize ?? 0;
snap.streak = userData?.streak?.length ?? 0;
snap.maxStreak = userData?.streak?.maxLength ?? 0;
- snap.filterPresets = userData.resultFilterPresets ?? [];
snap.isPremium = userData?.isPremium ?? false;
snap.allTimeLbs = userData.allTimeLbs;
@@ -254,6 +257,16 @@ export async function initSnapshot(): Promise {
snap.connections = convertConnections(connectionsData);
+ if (userData.resultFilterPresets !== undefined) {
+ void resultFilterPresetsCollection.stateWhenReady().then(() => {
+ resultFilterPresetsCollection.utils.writeBatch(() => {
+ (userData.resultFilterPresets ?? []).forEach((it) =>
+ resultFilterPresetsCollection.utils.writeInsert(it),
+ );
+ });
+ });
+ }
+
dbSnapshot = snap;
return dbSnapshot;
@@ -265,66 +278,6 @@ export async function initSnapshot(): Promise {
}
}
-export async function getUserResults(offset?: number): Promise {
- if (!isAuthenticated()) return false;
-
- if (!dbSnapshot) return false;
- if (
- dbSnapshot.results !== undefined &&
- (offset === undefined || dbSnapshot.results.length > offset)
- ) {
- return false;
- }
-
- const response = await Ape.results.get({ query: { offset } });
-
- if (response.status !== 200) {
- showErrorNotification("Error getting results", { response });
- return false;
- }
-
- //another check in case user logs out while waiting for response
- if (!isAuthenticated()) return false;
-
- const results: SnapshotResult[] = response.body.data.map((result) => {
- result.bailedOut ??= false;
- result.blindMode ??= false;
- result.lazyMode ??= false;
- result.difficulty ??= "normal";
- result.funbox ??= [];
- result.language ??= "english";
- result.numbers ??= false;
- result.punctuation ??= false;
- result.numbers ??= false;
- result.quoteLength ??= -1;
- result.restartCount ??= 0;
- result.incompleteTestSeconds ??= 0;
- result.afkDuration ??= 0;
- result.tags ??= [];
- return result as SnapshotResult;
- });
- results?.sort((a, b) => b.timestamp - a.timestamp);
-
- if (dbSnapshot.results !== undefined && dbSnapshot.results.length > 0) {
- //merge
- const oldestTimestamp = lastElementFromArray(dbSnapshot.results)
- ?.timestamp as number;
- const resultsWithoutDuplicates = results.filter(
- (it) => it.timestamp < oldestTimestamp,
- );
- dbSnapshot.results.push(...resultsWithoutDuplicates);
- } else {
- dbSnapshot.results = results;
- }
-
- setLastResult(results[0]);
- return true;
-}
-
-function _getCustomThemeById(themeID: string): CustomTheme | undefined {
- return dbSnapshot?.customThemes?.find((t) => t._id === themeID);
-}
-
export async function addCustomTheme(
theme: Omit,
): Promise {
@@ -413,156 +366,6 @@ export async function deleteCustomTheme(themeId: string): Promise {
return true;
}
-export async function getUserAverage10(
- mode: M,
- mode2: Mode2,
- punctuation: boolean,
- numbers: boolean,
- language: string,
- difficulty: Difficulty,
- lazyMode: boolean,
-): Promise<[number, number]> {
- const snapshot = getSnapshot();
-
- if (!snapshot) return [0, 0];
-
- function cont(): [number, number] {
- const activeTagIds: string[] = [];
- snapshot?.tags?.forEach((tag) => {
- if (tag.active === true) {
- activeTagIds.push(tag._id);
- }
- });
-
- let wpmSum = 0;
- let accSum = 0;
- let last10Wpm = 0;
- let last10Acc = 0;
- let count = 0;
- let last10Count = 0;
-
- if (snapshot?.results !== undefined) {
- for (const result of snapshot.results) {
- if (
- result.mode === mode &&
- (result.punctuation ?? false) === punctuation &&
- (result.numbers ?? false) === numbers &&
- result.language === language &&
- result.difficulty === difficulty &&
- (result.lazyMode === lazyMode ||
- (result.lazyMode === undefined && !lazyMode)) &&
- (activeTagIds.length === 0 ||
- activeTagIds.some((tagId) => result.tags?.includes(tagId)))
- ) {
- // Continue if the mode2 doesn't match and it's not a quote
- if (
- `${result.mode2}` !== `${mode2 as string | number}` &&
- mode !== "quote"
- ) {
- //using template strings because legacy results might use numbers in mode2
- continue;
- }
-
- // Grab the most recent results from the current mode
- if (last10Count < 10) {
- last10Wpm += result.wpm;
- last10Acc += result.acc;
- last10Count++;
- }
-
- // Check if the mode2 matches and if it does, add it to the sum, for quotes, this is the quote id
- if (`${result.mode2}` === `${mode2 as string | number}`) {
- //using template strings because legacy results might use numbers in mode2
- wpmSum += result.wpm;
- accSum += result.acc;
- count++;
-
- if (count >= 10) break;
- }
- }
- }
- }
-
- // Return the last 10 average wpm & acc for quote
- // if the current quote id has never been completed before by the user
- if (count === 0 && mode === "quote") {
- return [last10Wpm / last10Count, last10Acc / last10Count];
- }
-
- return [wpmSum / count, accSum / count];
- }
-
- const retval: [number, number] =
- snapshot === null || (await getUserResults()) === null ? [0, 0] : cont();
-
- return retval;
-}
-
-export async function getUserDailyBest(
- mode: M,
- mode2: Mode2,
- punctuation: boolean,
- numbers: boolean,
- language: string,
- difficulty: Difficulty,
- lazyMode: boolean,
-): Promise {
- const snapshot = getSnapshot();
-
- if (!snapshot) return 0;
-
- function cont(): number {
- const activeTagIds: string[] = [];
- snapshot?.tags?.forEach((tag) => {
- if (tag.active === true) {
- activeTagIds.push(tag._id);
- }
- });
-
- let bestWpm = 0;
-
- if (snapshot?.results !== undefined) {
- for (const result of snapshot.results) {
- if (
- result.mode === mode &&
- (result.punctuation ?? false) === punctuation &&
- (result.numbers ?? false) === numbers &&
- result.language === language &&
- result.difficulty === difficulty &&
- (result.lazyMode === lazyMode ||
- (result.lazyMode === undefined && !lazyMode)) &&
- (activeTagIds.length === 0 ||
- activeTagIds.some((tagId) => result.tags?.includes(tagId)))
- ) {
- if (result.timestamp < Date.now() - 86400000) {
- continue;
- }
-
- // Continue if the mode2 doesn't match and it's not a quote
- if (
- `${result.mode2}` !== `${mode2 as string | number}` &&
- mode !== "quote"
- ) {
- //using template strings because legacy results might use numbers in mode2
- continue;
- }
-
- if (result.wpm > bestWpm) {
- bestWpm = result.wpm;
- }
- }
- }
- }
-
- return bestWpm;
- }
-
- const retval: number =
- snapshot === null || (await getUserResults()) === null ? 0 : cont();
-
- return retval;
-}
-
export async function getActiveTagsPB(
mode: M,
mode2: Mode2,
@@ -855,20 +658,10 @@ export async function saveLocalTagPB(
return;
}
-
-export function deleteLocalTag(tagId: string): void {
- getSnapshot()?.results?.forEach((result) => {
- const tagIndex = result.tags.indexOf(tagId);
- if (tagIndex > -1) {
- result.tags.splice(tagIndex, 1);
- }
- });
-}
-
-export async function updateLocalTagPB(
+export async function updateLocalTagPB(
tagId: string,
- mode: M,
- mode2: Mode2,
+ mode: Mode,
+ mode2: Mode2,
punctuation: boolean,
numbers: boolean,
language: Language,
@@ -881,32 +674,24 @@ export async function updateLocalTagPB(
if (filteredtag === undefined) return;
+ const fastest = await findFastestResultByTagId({
+ tagId,
+ mode,
+ mode2,
+ punctuation,
+ numbers,
+ language,
+ difficulty,
+ lazyMode,
+ });
+
const pb = {
- wpm: 0,
- acc: 0,
- rawWpm: 0,
- consistency: 0,
+ wpm: fastest?.wpm ?? 0,
+ acc: fastest?.acc ?? 0,
+ rawWpm: fastest?.rawWpm ?? 0,
+ consistency: fastest?.consistency ?? 0,
};
- getSnapshot()?.results?.forEach((result) => {
- if (result.tags.includes(tagId) && result.wpm > pb.wpm) {
- if (
- result.mode === mode &&
- result.mode2 === mode2 &&
- result.punctuation === punctuation &&
- result.numbers === numbers &&
- result.language === language &&
- result.difficulty === difficulty &&
- result.lazyMode === lazyMode
- ) {
- pb.wpm = result.wpm;
- pb.acc = result.acc;
- pb.rawWpm = result.rawWpm;
- pb.consistency = result.consistency;
- }
- }
- });
-
await saveLocalTagPB(
tagId,
mode,
@@ -972,9 +757,7 @@ export function saveLocalResult(data: SaveLocalResultData): void {
if (!snapshot) return;
if (data.result !== undefined) {
- if (snapshot?.results !== undefined) {
- snapshot.results.unshift(data.result);
- }
+ void insertLocalResult(data.result);
setLastResult(data.result);
if (snapshot.testActivity !== undefined) {
snapshot.testActivity.increment(new Date(data.result.timestamp));
@@ -1216,3 +999,16 @@ export function isFriend(uid: string | undefined): boolean {
// cont();
// }
// }
+
+export function updateTagById(
+ tagId: string,
+ update: (old: SnapshotUserTag) => SnapshotUserTag,
+): void {
+ if (dbSnapshot === undefined) return;
+
+ dbSnapshot.tags = dbSnapshot?.tags.map((it) => {
+ if (it._id !== tagId) return it;
+ return update(it);
+ });
+ setSnapshot(dbSnapshot);
+}
diff --git a/frontend/src/ts/elements/account/result-filters.ts b/frontend/src/ts/elements/account/result-filters.ts
deleted file mode 100644
index cc1a78ea7065..000000000000
--- a/frontend/src/ts/elements/account/result-filters.ts
+++ /dev/null
@@ -1,970 +0,0 @@
-import * as Misc from "../../utils/misc";
-import * as Strings from "../../utils/strings";
-import * as DB from "../../db";
-import { Config } from "../../config/store";
-import {
- showNoticeNotification,
- showErrorNotification,
- showSuccessNotification,
-} from "../../states/notifications";
-import Ape from "../../ape/index";
-import { showLoaderBar, hideLoaderBar } from "../../states/loader-bar";
-import SlimSelect from "slim-select";
-import { QuoteLength } from "@monkeytype/schemas/configs";
-import {
- ResultFilters,
- ResultFiltersSchema,
- ResultFiltersGroup,
- ResultFiltersGroupItem,
-} from "@monkeytype/schemas/users";
-import { LocalStorageWithSchema } from "../../utils/local-storage-with-schema";
-import defaultResultFilters from "../../constants/default-result-filters";
-import { getAllFunboxes } from "@monkeytype/funbox";
-import { Snapshot } from "../../constants/default-snapshot";
-import { LanguageList } from "../../constants/languages";
-import { authEvent } from "../../events/auth";
-import { sanitize } from "../../utils/sanitize";
-import { qs, qsa } from "../../utils/dom";
-
-export function mergeWithDefaultFilters(
- filters: Partial,
-): ResultFilters {
- try {
- const merged = {} as ResultFilters;
- for (const groupKey of Misc.typedKeys(defaultResultFilters)) {
- if (groupKey === "_id") {
- let id = filters[groupKey] ?? defaultResultFilters[groupKey];
- if (id === "default-result-filters-id" || id === "") {
- id = "default";
- }
- merged[groupKey] = id;
- } else if (groupKey === "name") {
- merged[groupKey] = filters[groupKey] ?? defaultResultFilters[groupKey];
- } else {
- // @ts-expect-error i cant figure this out
- merged[groupKey] = {
- ...defaultResultFilters[groupKey],
- ...filters[groupKey],
- };
- }
- }
- return merged;
- } catch (e) {
- return defaultResultFilters;
- }
-}
-
-const resultFiltersLS = new LocalStorageWithSchema({
- key: "resultFilters",
- schema: ResultFiltersSchema,
- fallback: defaultResultFilters,
- migrate: (unknown, _issues) => {
- if (!Misc.isObject(unknown)) {
- return defaultResultFilters;
- }
- return mergeWithDefaultFilters(
- sanitize(ResultFiltersSchema.partial().strip(), unknown as ResultFilters),
- );
- },
-});
-
-type Option = {
- id: string;
- value: string;
- text: string;
- html: string;
- selected: boolean;
- display: boolean;
- disabled: boolean;
- placeholder: boolean;
- class: string;
- style: string;
- data: {
- [key: string]: string;
- };
- mandatory: boolean;
-};
-
-const groupsUsingSelect = new Set(["language", "funbox", "tags"]);
-const groupSelects: Partial> = {};
-
-// current activated filter
-let filters = defaultResultFilters;
-
-function save(): void {
- resultFiltersLS.set(filters);
-}
-
-export async function load(): Promise {
- try {
- filters = mergeWithDefaultFilters(resultFiltersLS.get());
-
- const newTags: Record = { none: false };
- Object.keys(defaultResultFilters.tags).forEach((tag) => {
- if (filters.tags[tag] !== undefined) {
- newTags[tag] = filters.tags[tag];
- } else {
- newTags[tag] = true;
- }
- });
-
- filters.tags = newTags;
- save();
- } catch {
- console.log("error in loading result filters");
- filters = defaultResultFilters;
- save();
- }
-}
-
-async function updateFilterPresets(): Promise {
- const parent = document.querySelector(".pageAccount .presetFilterButtons");
- const buttons = document.querySelector(
- ".pageAccount .presetFilterButtons .filterBtns",
- );
-
- if (!parent || !buttons) return;
-
- buttons.innerHTML = "";
-
- const filterPresets = DB.getSnapshot()?.filterPresets ?? [];
-
- if (filterPresets.length > 0) {
- let html = "";
-
- for (const filter of filterPresets) {
- html += `
- ${filter.name.replace(/_/g, " ")}
-
-
-
- ";
- if (group === "difficulty") {
- ret += ``;
- } else if (group === "mode") {
- ret += ``;
- } else if (group === "punctuation") {
- ret += ``;
- } else if (group === "numbers") {
- ret += ``;
- } else if (group === "words") {
- ret += ``;
- } else if (group === "time") {
- ret += ``;
- } else if (group === "date") {
- ret += ``;
- } else if (group === "tags") {
- ret += ``;
- } else if (group === "language") {
- ret += ``;
- } else if (group === "funbox") {
- ret += ``;
- }
- if (aboveChartDisplay[group]?.all) {
- ret += "all";
- } else {
- if (group === "tags") {
- ret += aboveChartDisplay.tags?.array
- ?.map((id) => {
- if (id === "none") return id;
- const snapshot = DB.getSnapshot();
- if (snapshot === undefined) return id;
- const name = snapshot.tags?.find((t) => t._id === id);
- if (name !== undefined) {
- return snapshot.tags?.find((t) => t._id === id)?.display;
- }
- return name;
- })
- .join(", ");
- } else {
- ret += aboveChartDisplay[group]?.array?.join(", ").replace(/_/g, " ");
- }
- }
- ret += " ";
- return ret;
- }
-
- let chartString = "";
-
- //date
- chartString += addText("date");
- chartString += ``;
-
- //mode
- chartString += addText("mode");
- chartString += ``;
-
- //time
- if (aboveChartDisplay.mode?.array?.includes("time")) {
- chartString += addText("time");
- chartString += ``;
- }
-
- //words
- if (aboveChartDisplay.mode?.array?.includes("words")) {
- chartString += addText("words");
- chartString += ``;
- }
-
- //diff
- chartString += addText("difficulty");
- chartString += ``;
-
- //punc
- chartString += addText("punctuation");
- chartString += ``;
-
- //numbers
- chartString += addText("numbers");
- chartString += ``;
-
- //language
- chartString += addText("language");
- chartString += ``;
-
- //funbox
- chartString += addText("funbox");
- chartString += ``;
-
- //tags
- chartString += addText("tags");
-
- qs(".pageAccount .group.chart .above")?.setHtml(chartString);
-}
-
-function toggle(
- group: G,
- filter: ResultFiltersGroupItem,
-): void {
- // user is changing the filters -> current filter is no longer a filter preset
- deSelectFilterPreset();
-
- try {
- if (group === "date") {
- setAllFilters("date", false);
- }
- const currentValue = filters[group][filter] as unknown as boolean;
- const newValue = !currentValue;
- filters[group][filter] =
- newValue as ResultFilters[G][ResultFiltersGroupItem];
- save();
- } catch (e) {
- showNoticeNotification(
- "Something went wrong toggling filter. Reverting to defaults.",
- );
- console.log("toggling filter error");
- console.error(e);
- reset();
- updateActive();
- }
-}
-
-for (const el of qsa(`
- .pageAccount .filterButtons .buttonsAndTitle .buttons,
- .pageAccount .group.topFilters .buttonsAndTitle.testDate .buttons
- `)) {
- el.onChild("click", "button", (e) => {
- const childTarget = e.childTarget as HTMLElement;
-
- if (childTarget.classList.contains("allFilters")) {
- Misc.typedKeys(getFilters()).forEach((group) => {
- // id and name field do not correspond to any ui elements, no need to update
- if (group === "_id" || group === "name") {
- return;
- }
-
- setAllFilters(group, true);
- });
- setAllFilters("date", false);
- filters.date.all = true;
- } else if (childTarget.classList.contains("noFilters")) {
- Misc.typedKeys(getFilters()).forEach((group) => {
- // id and name field do not correspond to any ui elements, no need to update
- if (group === "_id" || group === "name") {
- return;
- }
-
- if (group !== "date") {
- setAllFilters(group, false);
- }
- });
- } else {
- const group = (e.target as HTMLElement).parentElement?.getAttribute(
- "group",
- ) as ResultFiltersGroup | null;
- if (group === null) {
- throw new Error("Cannot find group of target.");
- }
-
- const filter = childTarget.getAttribute(
- "filter",
- ) as ResultFiltersGroupItem | null;
- if (filter === null) {
- throw new Error("Cannot find filter of target.");
- }
-
- if ((e.target as HTMLElement).tagName === "BUTTON") {
- if (e.shiftKey) {
- setAllFilters(group, false);
- filters[group][filter] =
- true as ResultFilters[typeof group][typeof filter];
- } else {
- toggle(group, filter);
- // filters[group][filter] = !filters[group][filter];
- }
- }
- }
- updateActive();
- save();
- });
-}
-
-qs(".pageAccount .topFilters button.allFilters")?.on("click", () => {
- // user is changing the filters -> current filter is no longer a filter preset
- deSelectFilterPreset();
-
- console.log(getFilters());
-
- Misc.typedKeys(getFilters()).forEach((group) => {
- // id and name field do not correspond to any ui elements, no need to update
- if (group === "_id" || group === "name") {
- return;
- }
-
- setAllFilters(group, true);
- });
- setAllFilters("date", false);
- filters.date.all = true;
- updateActive();
- save();
-});
-
-qs(".pageAccount .topFilters button.currentConfigFilter")?.on("click", () => {
- // user is changing the filters -> current filter is no longer a filter preset
- deSelectFilterPreset();
-
- Misc.typedKeys(getFilters()).forEach((group) => {
- // id and name field do not correspond to any ui elements, no need to update
- if (group === "_id" || group === "name") {
- return;
- }
-
- setAllFilters(group, false);
- });
-
- filters.pb.no = true;
- filters.pb.yes = true;
-
- filters.difficulty[Config.difficulty] = true;
- filters.mode[Config.mode] = true;
- if (Config.mode === "time") {
- if ([15, 30, 60, 120].includes(Config.time)) {
- const configTime = `${Config.time}` as keyof typeof filters.time;
- filters.time[configTime] = true;
- } else {
- filters.time.custom = true;
- }
- } else if (Config.mode === "words") {
- if ([10, 25, 50, 100, 200].includes(Config.words)) {
- const configWords = `${Config.words}` as keyof typeof filters.words;
- filters.words[configWords] = true;
- } else {
- filters.words.custom = true;
- }
- } else if (Config.mode === "quote") {
- const filterName: ResultFiltersGroupItem<"quoteLength">[] = [
- "short",
- "medium",
- "long",
- "thicc",
- ];
- filterName.forEach((ql, index) => {
- if (Config.quoteLength.includes(index as QuoteLength)) {
- filters.quoteLength[ql] = true;
- } else {
- filters.quoteLength[ql] = false;
- }
- });
- }
- if (Config.punctuation) {
- filters.punctuation.on = true;
- } else {
- filters.punctuation.off = true;
- }
- if (Config.numbers) {
- filters.numbers.on = true;
- } else {
- filters.numbers.off = true;
- }
- if (Config.mode === "quote" && /english.*/.test(Config.language)) {
- filters.language["english"] = true;
- } else {
- filters.language[Config.language] = true;
- }
-
- if (Config.funbox.length === 0) {
- filters.funbox["none"] = true;
- } else {
- for (const f of Config.funbox) {
- filters.funbox[f] = true;
- }
- }
-
- filters.tags["none"] = true;
-
- DB.getSnapshot()?.tags?.forEach((tag) => {
- if (tag.active === true) {
- filters.tags["none"] = false;
- filters.tags[tag._id] = true;
- }
- });
-
- filters.date.all = true;
- updateActive();
- save();
-});
-
-qs(".pageAccount .topFilters button.toggleAdvancedFilters")?.on("click", () => {
- const buttons = qs(".pageAccount .filterButtons");
- const advancedFiltersButton = qs(
- ".pageAccount .topFilters button.toggleAdvancedFilters",
- );
-
- if (buttons?.isVisible()) {
- void buttons.slideUp(250);
- advancedFiltersButton?.removeClass("active");
- } else {
- void buttons?.slideDown(250);
- advancedFiltersButton?.addClass("active");
- }
-});
-
-function adjustScrollposition(
- group: ResultFiltersGroup,
- topItem: number = 0,
-): void {
- const slimSelect = groupSelects[group];
- if (slimSelect === undefined) return;
- const listElement = slimSelect.render.content.list;
- const topListItem = listElement.children.item(topItem) as HTMLElement;
-
- listElement.scrollTop = topListItem.offsetTop - listElement.offsetTop;
-}
-
-function selectBeforeChangeFn(
- group: ResultFiltersGroup,
- selectedOptions: Option[],
- oldSelectedOptions: Option[],
-): boolean {
- const includesAllNow = selectedOptions.some(
- (option) => option.value === "all",
- );
- const includedAllBefore = oldSelectedOptions.some(
- (option) => option.value === "all",
- );
-
- if (includesAllNow) {
- if (!includedAllBefore) {
- // all option was selected
- selectedOptions = selectedOptions.filter(
- (option) => option.value === "all",
- );
- } else if (selectedOptions.length < oldSelectedOptions.length) {
- // options other than all were deselcted
- selectedOptions = selectedOptions.filter(
- (option) => option.value !== "all",
- );
- }
- } else {
- if (includedAllBefore) {
- // all option was deselected
- selectedOptions = [];
- }
- }
-
- setAllFilters(group, false);
- for (const selectedOption of selectedOptions) {
- if (selectedOption.value === "all") {
- setAllFilters(group, true);
- break;
- }
-
- setFilter(
- group,
- selectedOption.value as ResultFiltersGroupItem,
- true,
- );
- }
-
- updateActive();
- save();
- selectChangeCallbackFn();
- return false;
-}
-
-let selectChangeCallbackFn: () => void = () => {
- //
-};
-
-export function updateTagsDropdownOptions(): void {
- const snapshot = DB.getSnapshot();
-
- if (snapshot === undefined) {
- return;
- }
-
- const newTags = snapshot.tags.filter(
- (it) => defaultResultFilters.tags[it._id] === undefined,
- );
- if (newTags.length > 0) {
- const everythingSelected = Object.values(filters.tags).every((v) => v);
-
- defaultResultFilters.tags = {
- ...defaultResultFilters.tags,
- ...Object.fromEntries(newTags.map((tag) => [tag._id, true])),
- };
-
- filters.tags = {
- ...filters.tags,
- ...Object.fromEntries(
- newTags.map((tag) => [tag._id, everythingSelected]),
- ),
- };
- }
-
- const el = document.querySelector(
- ".pageAccount .content .filterButtons .buttonsAndTitle.tags .select select",
- );
-
- if (!(el instanceof HTMLElement)) return;
-
- let html = "";
-
- html += "";
- html += "";
-
- for (const tag of snapshot.tags) {
- html += ``;
- }
-
- el.innerHTML = html;
-}
-
-let buttonsAppended = false;
-
-export async function appendDropdowns(
- selectChangeCallback: () => void,
-): Promise {
- //snapshot at this point is guaranteed to exist
- const snapshot = DB.getSnapshot() as Snapshot;
-
- tagDropdownUpdate(snapshot);
-
- if (buttonsAppended) return;
-
- selectChangeCallbackFn = selectChangeCallback;
-
- groupSelects["language"] = new SlimSelect({
- select:
- ".pageAccount .content .filterButtons .buttonsAndTitle.languages .select .languageSelect",
- data: [
- { value: "all", text: "all" },
- ...LanguageList.map((language) => ({
- value: language,
- text: Strings.getLanguageDisplayString(language),
- filter: language,
- })),
- ],
- settings: {
- showSearch: true,
- placeholderText: "select a language",
- allowDeselect: true,
- closeOnSelect: false,
- },
- events: {
- beforeChange: (selectedOptions, oldSelectedOptions): boolean => {
- return selectBeforeChangeFn(
- "language",
- selectedOptions,
- oldSelectedOptions,
- );
- },
- beforeOpen: (): void => {
- adjustScrollposition("language");
- },
- },
- });
-
- groupSelects["funbox"] = new SlimSelect({
- select:
- ".pageAccount .content .filterButtons .buttonsAndTitle.funbox .select .funboxSelect",
- data: [
- { value: "all", text: "all" },
- { value: "none", text: "no funbox" },
- ...getAllFunboxes().map((funbox) => ({
- value: funbox.name,
- text: funbox.name.replace(/_/g, " "),
- filter: funbox.name,
- })),
- ],
- settings: {
- showSearch: true,
- placeholderText: "select a funbox",
- allowDeselect: true,
- closeOnSelect: false,
- },
- events: {
- beforeChange: (selectedOptions, oldSelectedOptions): boolean => {
- return selectBeforeChangeFn(
- "funbox",
- selectedOptions,
- oldSelectedOptions,
- );
- },
- beforeOpen: (): void => {
- adjustScrollposition("funbox");
- },
- },
- });
-
- void updateFilterPresets();
- buttonsAppended = true;
-}
-
-function tagDropdownUpdate(snapshot: Snapshot): void {
- const tagsSection = qs(
- ".pageAccount .content .filterButtons .buttonsAndTitle.tags",
- );
-
- if (snapshot.tags.length === 0) {
- tagsSection?.hide();
- if (groupSelects["tags"]) {
- groupSelects["tags"].destroy();
- delete groupSelects["tags"];
- }
- setFilter("tags", "none", true);
- } else {
- tagsSection?.show();
-
- updateTagsDropdownOptions();
-
- // Only create SlimSelect if it doesn't exist yet
- if (!groupSelects["tags"]) {
- const selectEl = document.querySelector(
- ".pageAccount .content .filterButtons .buttonsAndTitle.tags .select .tagsSelect",
- );
-
- if (selectEl) {
- groupSelects["tags"] = new SlimSelect({
- select: selectEl,
- settings: {
- showSearch: true,
- placeholderText: "select a tag",
- allowDeselect: true,
- closeOnSelect: false,
- },
- events: {
- beforeChange: (selectedOptions, oldSelectedOptions): boolean => {
- return selectBeforeChangeFn(
- "tags",
- selectedOptions,
- oldSelectedOptions,
- );
- },
- beforeOpen: (): void => {
- adjustScrollposition("tags");
- },
- },
- });
- }
- }
- }
-}
-
-for (const el of qsa(".group.presetFilterButtons .filterBtns")) {
- el.onChild("click", ".filterPresets .delete-filter-preset", (e) => {
- void deleteFilterPreset(
- (e.childTarget as HTMLElement).dataset["id"] as string,
- );
- });
-}
-
-function verifyResultFiltersStructure(filterIn: ResultFilters): ResultFilters {
- const filter = mergeWithDefaultFilters(
- sanitize(ResultFiltersSchema.partial().strip(), structuredClone(filterIn)),
- );
-
- return filter;
-}
-
-authEvent.subscribe((event) => {
- if (event.type === "snapshotUpdated" && event.data.isInitial) {
- loadTags();
- void load();
- }
-});
diff --git a/frontend/src/ts/elements/last-10-average.ts b/frontend/src/ts/elements/last-10-average.ts
index df296a69afdd..d5460dadf8da 100644
--- a/frontend/src/ts/elements/last-10-average.ts
+++ b/frontend/src/ts/elements/last-10-average.ts
@@ -1,8 +1,8 @@
-import * as DB from "../db";
import * as Misc from "../utils/misc";
import * as Numbers from "@monkeytype/util/numbers";
import { Config } from "../config/store";
import * as TestWords from "../test/test-words";
+import { getUserAverage } from "../collections/results";
let averageWPM = 0;
let averageAcc = 0;
@@ -10,17 +10,13 @@ let averageAcc = 0;
export async function update(): Promise {
const mode2 = Misc.getMode2(Config, TestWords.currentQuote);
- const [wpm, acc] = (
- await DB.getUserAverage10(
- Config.mode,
- mode2 as never,
- Config.punctuation,
- Config.numbers,
- Config.language,
- Config.difficulty,
- Config.lazyMode,
- )
- ).map(Numbers.roundTo2) as [number, number];
+ const average = await getUserAverage({
+ ...Config,
+ mode2,
+ last10Only: true,
+ });
+ const wpm = Numbers.roundTo2(average.wpm);
+ const acc = Numbers.roundTo2(average.acc);
averageWPM = Config.alwaysShowDecimalPlaces ? wpm : Math.round(wpm);
averageAcc = Config.alwaysShowDecimalPlaces ? acc : Math.floor(acc);
diff --git a/frontend/src/ts/elements/result-batches.ts b/frontend/src/ts/elements/result-batches.ts
index 9f7395d70695..2af9d3691874 100644
--- a/frontend/src/ts/elements/result-batches.ts
+++ b/frontend/src/ts/elements/result-batches.ts
@@ -5,6 +5,7 @@ import { mapRange } from "@monkeytype/util/numbers";
import { getTheme } from "../states/theme";
import { qs } from "../utils/dom";
+//TODO
export function hide(): void {
qs(".pageAccount .resultBatches")?.hide();
}
@@ -14,7 +15,8 @@ export function show(): void {
}
export async function update(): Promise {
- const results = DB.getSnapshot()?.results;
+ //TODO fix or delete?
+ const results: string[] | undefined = [];
if (results === undefined) {
console.error(
diff --git a/frontend/src/ts/elements/simple-modal.ts b/frontend/src/ts/elements/simple-modal.ts
index 620afd3ec5d2..552b174d9dca 100644
--- a/frontend/src/ts/elements/simple-modal.ts
+++ b/frontend/src/ts/elements/simple-modal.ts
@@ -143,6 +143,7 @@ export class SimpleModal {
hideCallsExec: boolean;
showLabels: boolean;
afterClickAway: (() => void) | undefined;
+ context?: unknown;
constructor(options: SimpleModalOptions) {
this.parameters = [];
this.id = options.id;
@@ -416,9 +417,13 @@ export class SimpleModal {
simpleModalEl.qsa(".checkbox").removeClass("disabled");
}
- show(parameters: string[] = [], showOptions: ShowOptions): void {
+ show(
+ parameters: string[] = [],
+ showOptions: ShowOptions & { context?: unknown },
+ ): void {
activePopup = this;
this.parameters = parameters;
+ this.context = showOptions.context;
void modal.show({
focusFirstInput: true,
...showOptions,
diff --git a/frontend/src/ts/event-handlers/account.ts b/frontend/src/ts/event-handlers/account.ts
deleted file mode 100644
index dacb31b25aae..000000000000
--- a/frontend/src/ts/event-handlers/account.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as PbTablesModal from "../modals/pb-tables";
-import * as EditProfileModal from "../modals/edit-profile";
-import { getSnapshot } from "../db";
-import { isAuthenticated } from "../firebase";
-import {
- showNoticeNotification,
- showErrorNotification,
-} from "../states/notifications";
-import * as EditResultTagsModal from "../modals/edit-result-tags";
-import * as AddFilterPresetModal from "../modals/new-filter-preset";
-import { parseWithSchema as parseJsonWithSchema } from "@monkeytype/util/json";
-import { z } from "zod";
-import { qs } from "../utils/dom";
-
-const accountPage = qs("#pageAccount");
-
-accountPage?.onChild("click", ".pbsTime .showAllButton", () => {
- PbTablesModal.show("time");
-});
-
-accountPage?.onChild("click", ".pbsWords .showAllButton", () => {
- PbTablesModal.show("words");
-});
-
-accountPage?.onChild("click", ".editProfileButton", () => {
- if (!isAuthenticated()) {
- showNoticeNotification("You must be logged in to edit your profile");
- return;
- }
- const snapshot = getSnapshot();
- if (!snapshot) {
- showErrorNotification(
- "Failed to open edit profile modal: No user snapshot found",
- );
- return;
- }
- if (snapshot.banned === true) {
- showNoticeNotification("Banned users cannot edit their profile");
- return;
- }
- EditProfileModal.show();
-});
-
-const TagsArraySchema = z.array(z.string());
-
-accountPage?.onChild("click", ".group.history .resultEditTagsButton", (e) => {
- const targetButton = e.childTarget as HTMLElement;
- const resultid = targetButton?.getAttribute("data-result-id");
- const tags = targetButton?.getAttribute("data-tags");
-
- EditResultTagsModal.show(
- resultid ?? "",
- parseJsonWithSchema(tags ?? "[]", TagsArraySchema),
- "accountPage",
- );
-});
-
-accountPage?.qs("button.createFilterPresetBtn")?.on("click", () => {
- AddFilterPresetModal.show();
-});
diff --git a/frontend/src/ts/firebase.ts b/frontend/src/ts/firebase.ts
index 3a45a7244ec2..ea424ab1c05b 100644
--- a/frontend/src/ts/firebase.ts
+++ b/frontend/src/ts/firebase.ts
@@ -33,7 +33,7 @@ import {
import { tryCatch } from "@monkeytype/util/trycatch";
import { googleSignUpEvent } from "./events/google-sign-up";
import { addBanner } from "./states/banners";
-import { setUserId } from "./states/core";
+import { setUserId, setUserVerified } from "./states/core";
let app: FirebaseApp | undefined;
let Auth: AuthType | undefined;
@@ -71,6 +71,7 @@ export async function init(callback: ReadyCallback): Promise {
if (!ignoreAuthCallback) {
await callback(true, user);
setUserId(user?.uid ?? null);
+ setUserVerified(user?.emailVerified ?? false);
}
});
} catch (e) {
@@ -79,6 +80,7 @@ export async function init(callback: ReadyCallback): Promise {
console.error("Firebase failed to initialize", e);
await callback(false, null);
setUserId(null);
+ setUserVerified(false);
if (isDevEnvironment()) {
addBanner({
level: "notice",
diff --git a/frontend/src/ts/hooks/useLocalStorageStore.ts b/frontend/src/ts/hooks/useLocalStorageStore.ts
index 36b1d3704236..109ebf08cd7b 100644
--- a/frontend/src/ts/hooks/useLocalStorageStore.ts
+++ b/frontend/src/ts/hooks/useLocalStorageStore.ts
@@ -7,6 +7,7 @@ export type UseLocalStorageStoreOptions = {
schema: LocalStorageWithSchema["schema"];
fallback: LocalStorageWithSchema["fallback"];
migrate?: LocalStorageWithSchema["migrate"];
+ afterParse?: LocalStorageWithSchema["afterParse"];
/**
* Whether to sync changes across tabs/windows using storage events.
* @default true
@@ -32,7 +33,14 @@ export type UseLocalStorageStoreOptions = {
export function useLocalStorageStore(
options: UseLocalStorageStoreOptions,
): [T, SetStoreFunction] {
- const { key, schema, fallback, migrate, syncAcrossTabs = true } = options;
+ const {
+ key,
+ schema,
+ fallback,
+ migrate,
+ afterParse,
+ syncAcrossTabs = true,
+ } = options;
// Create the underlying localStorage manager
const storage = new LocalStorageWithSchema({
@@ -40,6 +48,7 @@ export function useLocalStorageStore(
schema,
fallback,
migrate,
+ afterParse,
});
// Create store with initial value from storage
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index 7cc56fdd05f4..745671d4b460 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -2,13 +2,12 @@
import "./dev/signal-tracker";
//enable solidjs-devtools
-import "solid-devtools";
+//import "solid-devtools";
import "./event-handlers/global";
import "./event-handlers/keymap";
import "./event-handlers/test";
import "./event-handlers/settings";
-import "./event-handlers/account";
import "./modals/google-sign-up";
import { init } from "./firebase";
@@ -29,7 +28,6 @@ import "./modals/simple-modals";
import * as CookiesModal from "./modals/cookies";
import "./input/listeners";
import "./controllers/route-controller";
-import * as Account from "./pages/account";
import "./elements/no-css";
import { egVideoListener } from "./popups/video-ad-popup";
import "./legacy-states/connection";
@@ -91,7 +89,6 @@ void init(onAuthStateChanged).then(() => {
addToGlobal({
snapshot: DB.getSnapshot,
config: Config,
- toggleFilterDebug: Account.toggleFilterDebug,
glarsesMode: enable,
stats: TestStats.getStats,
replay: Replay.getReplayExport,
diff --git a/frontend/src/ts/modals/edit-result-tags.ts b/frontend/src/ts/modals/edit-result-tags.ts
index 2a844bb4b43d..a00b5d6af62c 100644
--- a/frontend/src/ts/modals/edit-result-tags.ts
+++ b/frontend/src/ts/modals/edit-result-tags.ts
@@ -6,10 +6,10 @@ import {
showErrorNotification,
showSuccessNotification,
} from "../states/notifications";
-import * as AccountPage from "../pages/account";
import { areUnsortedArraysEqual } from "../utils/arrays";
import * as TestResult from "../test/result";
import AnimatedModal from "../utils/animated-modal";
+import { resultsCollection } from "../collections/results";
type State = {
resultId: string;
@@ -126,30 +126,28 @@ async function save(): Promise {
showSuccessNotification("Tags updated", { durationMs: 2000 });
- DB.getSnapshot()?.results?.forEach((result) => {
- if (result._id === state.resultId) {
- const tagsToUpdate = [
- ...result.tags.filter((tag) => !state.tags.includes(tag)),
- ...state.tags.filter((tag) => !result.tags.includes(tag)),
- ];
- result.tags = state.tags;
- tagsToUpdate.forEach((tag) => {
- void DB.updateLocalTagPB(
- tag,
- result.mode,
- result.mode2,
- result.punctuation,
- result.numbers,
- result.language,
- result.difficulty,
- result.lazyMode,
- );
- });
- }
+ resultsCollection.update(state.resultId, (result) => {
+ const tagsToUpdate = [
+ ...result.tags.filter((tag) => !state.tags.includes(tag)),
+ ...state.tags.filter((tag) => !result.tags.includes(tag)),
+ ];
+ result.tags = state.tags;
+ tagsToUpdate.forEach((tag) => {
+ void DB.updateLocalTagPB(
+ tag,
+ result.mode,
+ result.mode2,
+ result.punctuation,
+ result.numbers,
+ result.language,
+ result.difficulty,
+ result.lazyMode,
+ );
+ });
});
if (state.source === "accountPage") {
- AccountPage.updateTagsForResult(state.resultId, state.tags);
+ //TODO AccountPage.updateTagsForResult(state.resultId, state.tags);
} else if (state.source === "resultPage") {
TestResult.updateTagsAfterEdit(state.tags, responseTagPbs);
}
diff --git a/frontend/src/ts/modals/edit-tag.ts b/frontend/src/ts/modals/edit-tag.ts
index 41bda4879a13..e595a463b292 100644
--- a/frontend/src/ts/modals/edit-tag.ts
+++ b/frontend/src/ts/modals/edit-tag.ts
@@ -4,12 +4,8 @@ import * as Settings from "../pages/settings";
import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
import { SimpleModal, TextInput } from "../elements/simple-modal";
import { TagNameSchema } from "@monkeytype/schemas/users";
-import { SnapshotUserTag } from "../constants/default-snapshot";
import { IsValidResponse } from "../types/validation";
-
-function getTagFromSnapshot(tagId: string): SnapshotUserTag | undefined {
- return DB.getSnapshot()?.tags.find((tag) => tag._id === tagId);
-}
+import { deleteLocalTag } from "../collections/results";
const cleanTagName = (tagName: string): string => tagName.replaceAll(" ", "_");
const tagNameValidation = async (tagName: string): Promise => {
@@ -45,7 +41,8 @@ const actionModals: Record = {
};
}
- DB.getSnapshot()?.tags?.push({
+ const snap = DB.getSnapshot();
+ snap?.tags?.push({
display: propTagName,
name: response.body.data.name,
_id: response.body.data._id,
@@ -57,6 +54,8 @@ const actionModals: Record = {
custom: {},
},
});
+ DB.setSnapshot(snap);
+
void Settings.update();
return { status: "success", message: `Tag added` };
@@ -92,12 +91,11 @@ const actionModals: Record = {
};
}
- const matchingTag = getTagFromSnapshot(tagId);
-
- if (matchingTag !== undefined) {
- matchingTag.name = tagName;
- matchingTag.display = propTagName;
- }
+ DB.updateTagById(tagId, (it) => ({
+ ...it,
+ name: tagName,
+ display: propTagName,
+ }));
void Settings.update();
@@ -128,7 +126,7 @@ const actionModals: Record = {
snapshot.tags = snapshot.tags.filter((it) => it._id !== tagId);
}
- DB.deleteLocalTag(tagId);
+ deleteLocalTag(tagId);
void Settings.update();
@@ -156,17 +154,16 @@ const actionModals: Record = {
};
}
- const matchingTag = getTagFromSnapshot(tagId);
-
- if (matchingTag !== undefined) {
- matchingTag.personalBests = {
+ DB.updateTagById(tagId, (it) => ({
+ ...it,
+ personalBests: {
time: {},
words: {},
quote: {},
zen: {},
custom: {},
- };
- }
+ },
+ }));
void Settings.update();
return { status: "success", message: `Tag PB cleared` };
diff --git a/frontend/src/ts/modals/mini-result-chart.ts b/frontend/src/ts/modals/mini-result-chart.ts
deleted file mode 100644
index e30925d79b62..000000000000
--- a/frontend/src/ts/modals/mini-result-chart.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ChartData } from "@monkeytype/schemas/results";
-import AnimatedModal from "../utils/animated-modal";
-import * as ChartController from "../controllers/chart-controller";
-import { Config } from "../config/store";
-function updateData(data: ChartData): void {
- // let data = filteredResults[filteredId].chartData;
- let labels = [];
- for (let i = 1; i <= data.wpm.length; i++) {
- labels.push(i.toString());
- }
-
- //make sure data.wpm and data.err are the same length as data.burst using slice
- data.wpm = data.wpm.slice(0, data.burst.length);
- data.err = data.err.slice(0, data.burst.length);
- labels = labels.slice(0, data.burst.length);
-
- ChartController.miniResult.data.labels = labels;
-
- ChartController.miniResult.getDataset("wpm").data = data.wpm;
- ChartController.miniResult.getDataset("burst").data = data.burst;
- ChartController.miniResult.getDataset("error").data = data.err;
-
- const maxChartVal = Math.max(
- ...[Math.max(...data.wpm), Math.max(...data.burst)],
- );
- const minChartVal = Math.min(
- ...[Math.min(...data.wpm), Math.min(...data.burst)],
- );
-
- ChartController.miniResult.getScale("wpm").max = Math.round(maxChartVal);
- ChartController.miniResult.getScale("burst").max = Math.round(maxChartVal);
-
- if (!Config.startGraphsAtZero) {
- ChartController.miniResult.getScale("wpm").min = Math.round(minChartVal);
- ChartController.miniResult.getScale("burst").min = Math.round(minChartVal);
- } else {
- ChartController.miniResult.getScale("wpm").min = 0;
- ChartController.miniResult.getScale("burst").min = 0;
- }
-}
-
-export function show(data: ChartData): void {
- updateData(data);
- void modal.show();
-}
-
-const modal = new AnimatedModal({
- dialogId: "miniResultChartModal",
-});
diff --git a/frontend/src/ts/modals/new-filter-preset.ts b/frontend/src/ts/modals/new-filter-preset.ts
deleted file mode 100644
index 3cd94d5b6e23..000000000000
--- a/frontend/src/ts/modals/new-filter-preset.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ResultFiltersSchema } from "@monkeytype/schemas/users";
-import { createFilterPreset } from "../elements/account/result-filters";
-import { SimpleModal } from "../elements/simple-modal";
-
-export function show(): void {
- newFilterPresetModal.show(undefined, {});
-}
-
-const newFilterPresetModal = new SimpleModal({
- id: "newFilterPresetModal",
- title: "New Filter Preset",
- inputs: [
- {
- placeholder: "Preset Name",
- type: "text",
- initVal: "",
- validation: {
- schema: ResultFiltersSchema.shape.name,
- },
- },
- ],
- buttonText: "add",
- execFn: async (_thisPopup, name) => {
- const status = await createFilterPreset(name);
-
- if (status === 1) {
- return { status: "success", message: "Filter preset created" };
- } else {
- let status: "error" | "notice" | "success" = "error";
- let message: string = "Error creating filter preset";
- return { status, message, alwaysHide: true };
- }
- },
-});
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
deleted file mode 100644
index 9232daddee18..000000000000
--- a/frontend/src/ts/pages/account.ts
+++ /dev/null
@@ -1,1246 +0,0 @@
-import * as DB from "../db";
-import * as ResultFilters from "../elements/account/result-filters";
-import * as ChartController from "../controllers/chart-controller";
-
-import { Config } from "../config/store";
-import { setConfig } from "../config/setters";
-import * as MiniResultChartModal from "../modals/mini-result-chart";
-import * as Focus from "../test/focus";
-import * as TodayTracker from "../test/today-tracker";
-import {
- showNoticeNotification,
- showErrorNotification,
-} from "../states/notifications";
-import Page from "./page";
-import * as DateTime from "../utils/date-and-time";
-import * as Misc from "../utils/misc";
-import * as Arrays from "../utils/arrays";
-import * as Numbers from "@monkeytype/util/numbers";
-import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
-import { format } from "date-fns/format";
-import * as Skeleton from "../utils/skeleton";
-import type { ScaleChartOptions, LinearScaleOptions } from "chart.js";
-import { configEvent } from "../events/config";
-import { getActivePage } from "../states/core";
-import { getAuthenticatedUser } from "../firebase";
-
-import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import * as ResultBatches from "../elements/result-batches";
-import Format from "../singletons/format";
-import { ChartData } from "@monkeytype/schemas/results";
-import { Mode, Mode2, Mode2Custom } from "@monkeytype/schemas/shared";
-import { ResultFiltersGroupItem } from "@monkeytype/schemas/users";
-import { findLineByLeastSquares } from "../utils/numbers";
-import defaultResultFilters from "../constants/default-result-filters";
-import { SnapshotResult } from "../constants/default-snapshot";
-import Ape from "../ape";
-import { AccountChart } from "@monkeytype/schemas/configs";
-import { SortedTableWithLimit } from "../utils/sorted-table";
-import { qs, qsa, qsr, ElementWithUtils, onDOMReady } from "../utils/dom";
-import { sendVerificationEmail } from "../auth";
-
-let filterDebug = false;
-//toggle filterdebug
-export function toggleFilterDebug(): void {
- filterDebug = !filterDebug;
- if (filterDebug) {
- console.log("filterDebug is on");
- }
-}
-
-let filteredResults: SnapshotResult[] = [];
-let visibleTableLines = 0;
-let historyTable: SortedTableWithLimit>;
-
-function loadMoreLines(lineIndex?: number): void {
- if (filteredResults === undefined || filteredResults.length === 0) return;
- let newVisibleLines;
- if (Numbers.isSafeNumber(lineIndex) && lineIndex > visibleTableLines) {
- newVisibleLines = Math.ceil(lineIndex / 10) * 10;
- } else {
- newVisibleLines = visibleTableLines + 10;
- }
-
- visibleTableLines = newVisibleLines;
- if (visibleTableLines >= filteredResults.length) {
- qs(".pageAccount .loadMoreButton")?.hide();
- } else {
- qs(".pageAccount .loadMoreButton")?.show();
- }
-
- historyTable.setLimit(newVisibleLines);
- historyTable.updateBody();
-}
-
-function buildResultRow(result: SnapshotResult): HTMLTableRowElement {
- let diff = result.difficulty ?? "normal";
-
- let icons = ``;
-
- if (diff === "normal") {
- icons += ``;
- } else if (diff === "expert") {
- icons += ``;
- } else if (diff === "master") {
- icons += ``;
- }
-
- if (result.punctuation) {
- icons += ``;
- }
-
- if (result.numbers) {
- icons += ``;
- }
-
- if (result.blindMode) {
- icons += ``;
- }
-
- if (result.lazyMode) {
- icons += ``;
- }
-
- if (result.funbox !== undefined && result.funbox.length > 0) {
- icons += ``;
- }
-
- if (result.chartData === "toolong" || result.testDuration > 122) {
- icons += ``;
- } else {
- icons += ``;
- }
-
- let tagNames = "no tags";
-
- if (result.tags !== undefined && result.tags.length > 0) {
- tagNames = "";
- result.tags.forEach((tag) => {
- DB.getSnapshot()?.tags?.forEach((snaptag) => {
- if (tag === snaptag._id) {
- tagNames += snaptag.display + ", ";
- }
- });
- });
- tagNames = tagNames.substring(0, tagNames.length - 2);
- }
-
- let restags;
- if (result.tags === undefined) {
- restags = "[]";
- } else {
- restags = JSON.stringify(result.tags);
- }
-
- const isActive = result.tags !== undefined && result.tags.length > 0;
- const icon =
- result.tags !== undefined && result.tags.length > 1 ? "fa-tags" : "fa-tag";
-
- const resultTagsButton = ``;
-
- let pb = "";
- if (result.isPb) {
- pb = '';
- } else {
- pb = "";
- }
-
- const charStats = result.charStats.join("/");
-
- const mode2 = result.mode === "custom" ? "" : result.mode2;
-
- const date = new Date(result.timestamp);
-
- const element = document.createElement("tr");
- element.classList.add("resultRow");
- element.dataset["id"] = result._id;
- element.innerHTML = `
- ${pb} |
- ${Format.typingSpeed(result.wpm, { showDecimalPlaces: true })} |
- ${Format.typingSpeed(result.rawWpm, { showDecimalPlaces: true })} |
- ${Format.percentage(result.acc, { showDecimalPlaces: true })} |
- ${Format.percentage(result.consistency, {
- showDecimalPlaces: true,
- })} |
- ${charStats} |
- ${result.mode} ${mode2} |
- ${icons} |
- ${resultTagsButton} |
- ${format(date, "dd MMM yyyy")}
- ${format(date, "HH:mm")}
- |
- `;
-
- return element;
-}
-
-function reset(): void {
- historyTable.setData([]);
- historyTable.updateBody();
-
- ChartController.accountHistogram.getDataset("count").data = [];
- ChartController.accountActivity.getDataset("count").data = [];
- ChartController.accountActivity.getDataset("avgWpm").data = [];
- ChartController.accountHistory.getDataset("wpm").data = [];
- ChartController.accountHistory.getDataset("pb").data = [];
- ChartController.accountHistory.getDataset("acc").data = [];
- ChartController.accountHistory.getDataset("wpmAvgTen").data = [];
- ChartController.accountHistory.getDataset("accAvgTen").data = [];
- ChartController.accountHistory.getDataset("wpmAvgHundred").data = [];
- ChartController.accountHistory.getDataset("accAvgHundred").data = [];
-}
-
-let totalSecondsFiltered = 0;
-let chartData: ChartController.HistoryChartData[] = [];
-let accChartData: ChartController.AccChartData[] = [];
-
-async function fillContent(): Promise {
- console.log("updating account page");
-
- const snapshot = DB.getSnapshot();
- if (!snapshot) return;
-
- void ResultBatches.update();
-
- chartData = [];
- accChartData = [];
- const wpmChartData: number[] = [];
- visibleTableLines = 0;
-
- let topWpm = 0;
- let topMode = "";
- let testRestarts = 0;
- let totalWpm = 0;
- let testCount = 0;
-
- let last10 = 0;
- let wpmLast10total = 0;
-
- let topAcc = 0;
- let totalAcc = 0;
- let totalAcc10 = 0;
-
- const rawWpm = {
- total: 0,
- count: 0,
- last10Total: 0,
- last10Count: 0,
- max: 0,
- };
-
- let totalEstimatedWords = 0;
-
- // let totalSeconds = 0;
- totalSecondsFiltered = 0;
-
- let topCons = 0;
- let totalCons = 0;
- let totalCons10 = 0;
- let consCount = 0;
-
- type ActivityChartData = Record<
- number,
- {
- restarts: number;
- amount: number;
- time: number;
- maxWpm: number;
- totalWpm: number;
- totalAcc: number;
- totalCon: number;
- }
- >;
-
- const activityChartData: ActivityChartData = {};
- const histogramChartData: number[] = [];
- const typingSpeedUnit = getTypingSpeedUnit(Config.typingSpeedUnit);
-
- filteredResults = [];
- qs(".pageAccount .history table tbody")?.empty();
-
- DB.getSnapshot()?.results?.forEach((result) => {
- // totalSeconds += tt;
-
- //apply filters
- try {
- if (!ResultFilters.getFilter("pb", result.isPb ? "yes" : "no")) {
- if (filterDebug) {
- console.log(`skipping result due to pb filter`, result);
- }
- return;
- }
-
- let resdiff = result.difficulty ?? "normal";
- if (!ResultFilters.getFilter("difficulty", resdiff)) {
- if (filterDebug) {
- console.log(`skipping result due to difficulty filter`, result);
- }
- return;
- }
- if (!ResultFilters.getFilter("mode", result.mode)) {
- if (filterDebug) {
- console.log(`skipping result due to mode filter`, result);
- }
- return;
- }
-
- if (result.mode === "time") {
- let timefilter: Mode2<"time"> | "custom" = "custom";
- if (
- ["15", "30", "60", "120"].includes(
- `${result.mode2}`, //legacy results could have a number in mode2
- )
- ) {
- timefilter = `${result.mode2}` as `${number}`;
- }
- if (
- !ResultFilters.getFilter(
- "time",
- timefilter as "custom" | "15" | "30" | "60" | "120",
- )
- ) {
- if (filterDebug) {
- console.log(`skipping result due to time filter`, result);
- }
- return;
- }
- } else if (result.mode === "words") {
- let wordfilter: Mode2Custom<"words"> = "custom";
- if (
- ["10", "25", "50", "100", "200"].includes(
- `${result.mode2}`, //legacy results could have a number in mode2
- )
- ) {
- wordfilter = `${result.mode2}` as `${number}`;
- }
- if (
- !ResultFilters.getFilter(
- "words",
- wordfilter as "custom" | "10" | "25" | "50" | "100",
- )
- ) {
- if (filterDebug) {
- console.log(`skipping result due to word filter`, result);
- }
- return;
- }
- }
-
- if (result.quoteLength !== null) {
- let filter: keyof typeof defaultResultFilters.quoteLength | undefined =
- undefined;
- if (result.quoteLength === 0) {
- filter = "short";
- } else if (result.quoteLength === 1) {
- filter = "medium";
- } else if (result.quoteLength === 2) {
- filter = "long";
- } else if (result.quoteLength === 3) {
- filter = "thicc";
- }
- if (
- filter !== undefined &&
- !ResultFilters.getFilter("quoteLength", filter)
- ) {
- if (filterDebug) {
- console.log(`skipping result due to quoteLength filter`, result);
- }
- return;
- }
- }
-
- let langFilter = ResultFilters.getFilter("language", result.language);
-
- if (
- //legacy value for english_1k
- (result.language as string) === "english_expanded" &&
- ResultFilters.getFilter("language", "english_1k")
- ) {
- langFilter = true;
- }
- if (!langFilter) {
- if (filterDebug) {
- console.log(`skipping result due to language filter`, result);
- }
- return;
- }
-
- let puncfilter: ResultFiltersGroupItem<"punctuation"> = "off";
- if (result.punctuation) {
- puncfilter = "on";
- }
- if (!ResultFilters.getFilter("punctuation", puncfilter)) {
- if (filterDebug) {
- console.log(`skipping result due to punctuation filter`, result);
- }
- return;
- }
-
- let numfilter: ResultFiltersGroupItem<"numbers"> = "off";
- if (result.numbers) {
- numfilter = "on";
- }
- if (!ResultFilters.getFilter("numbers", numfilter)) {
- if (filterDebug) {
- console.log(`skipping result due to numbers filter`, result);
- }
- return;
- }
-
- if (result.funbox === undefined || result.funbox.length === 0) {
- if (!ResultFilters.getFilter("funbox", "none")) {
- if (filterDebug) {
- console.log(`skipping result due to funbox filter`, result);
- }
- return;
- }
- } else {
- let counter = 0;
- for (const f of result.funbox) {
- if (ResultFilters.getFilter("funbox", f)) {
- counter++;
- break;
- }
- }
- if (counter === 0) {
- if (filterDebug) {
- console.log(`skipping result due to funbox filter`, result);
- }
- return;
- }
- }
-
- let tagHide = true;
- if (result.tags === undefined || result.tags.length === 0) {
- //no tags, show when no tag is enabled
- if ((DB.getSnapshot()?.tags?.length ?? 0) > 0) {
- if (ResultFilters.getFilter("tags", "none")) tagHide = false;
- } else {
- tagHide = false;
- }
- } else {
- //tags exist
- const validTags = DB.getSnapshot()?.tags?.map((t) => t._id);
-
- if (validTags === undefined) return;
-
- result.tags.forEach((tag) => {
- //check if i even need to check tags anymore
- if (!tagHide) return;
- //check if tag is valid
- if (validTags?.includes(tag)) {
- //tag valid, check if filter is on
- if (ResultFilters.getFilter("tags", tag)) tagHide = false;
- } else {
- //tag not found in valid tags, meaning probably deleted
- if (ResultFilters.getFilter("tags", "none")) tagHide = false;
- }
- });
- }
-
- if (tagHide) {
- if (filterDebug) {
- console.log(`skipping result due to tag filter`, result);
- }
- return;
- }
-
- const timeSinceTest = Math.abs(result.timestamp - Date.now()) / 1000;
-
- let datehide = true;
-
- if (
- ResultFilters.getFilter("date", "all") ||
- (ResultFilters.getFilter("date", "last_day") &&
- timeSinceTest <= 86400) ||
- (ResultFilters.getFilter("date", "last_week") &&
- timeSinceTest <= 604800) ||
- (ResultFilters.getFilter("date", "last_month") &&
- timeSinceTest <= 2592000) ||
- (ResultFilters.getFilter("date", "last_3months") &&
- timeSinceTest <= 7776000)
- ) {
- datehide = false;
- }
-
- if (datehide) {
- if (filterDebug) {
- console.log(`skipping result due to date filter`, result);
- }
- return;
- }
-
- filteredResults.push(result);
- } catch (e) {
- showNoticeNotification(
- "Something went wrong when filtering. Resetting filters.",
- );
- console.log(result);
- console.error(e);
- ResultFilters.reset();
- ResultFilters.updateActive();
- void update();
- return;
- }
- //filters done
- //=======================================
-
- totalEstimatedWords += Math.round((result.wpm / 60) * result.testDuration);
-
- const resultDate = new Date(result.timestamp);
- resultDate.setSeconds(0);
- resultDate.setMinutes(0);
- resultDate.setHours(0);
- resultDate.setMilliseconds(0);
- const resultTimestamp = resultDate.getTime();
-
- const dataForTimestamp = activityChartData[resultTimestamp];
-
- if (dataForTimestamp !== undefined) {
- dataForTimestamp.amount++;
- dataForTimestamp.restarts += result.restartCount ?? 0;
- dataForTimestamp.time +=
- result.testDuration +
- (result.incompleteTestSeconds ?? 0) -
- (result.afkDuration ?? 0);
- if (result.wpm > dataForTimestamp.maxWpm) {
- dataForTimestamp.maxWpm = result.wpm;
- }
- dataForTimestamp.totalWpm += result.wpm;
- dataForTimestamp.totalAcc += result.acc;
- dataForTimestamp.totalCon += result.consistency ?? 0;
- } else {
- activityChartData[resultTimestamp] = {
- amount: 1,
- restarts: result.restartCount ?? 0,
- time:
- result.testDuration +
- (result.incompleteTestSeconds ?? 0) -
- (result.afkDuration ?? 0),
- maxWpm: result.wpm,
- totalWpm: result.wpm,
- totalAcc: result.acc,
- totalCon: result.consistency ?? 0,
- };
- }
-
- const bucketSize = typingSpeedUnit.histogramDataBucketSize;
- const bucket = Math.floor(
- Math.round(typingSpeedUnit.fromWpm(result.wpm)) / bucketSize,
- );
-
- //grow array if needed
- if (histogramChartData.length <= bucket) {
- for (let i = histogramChartData.length; i <= bucket; i++) {
- histogramChartData.push(0);
- }
- }
- (histogramChartData[bucket] as number) += 1;
-
- let tt = 0;
- if (
- result.testDuration === undefined &&
- result.mode2 !== "custom" &&
- result.mode2 !== "zen"
- ) {
- //test finished before testDuration field was introduced - estimate
- if (result.mode === "time") {
- tt = parseInt(result.mode2);
- } else if (result.mode === "words") {
- tt = (parseInt(result.mode2) / result.wpm) * 60;
- }
- } else {
- tt = parseFloat(result.testDuration as unknown as string); //legacy results could have a string here
- }
- if (result.incompleteTestSeconds !== undefined) {
- tt += result.incompleteTestSeconds;
- } else if (result.restartCount !== undefined && result.restartCount > 0) {
- tt += (tt / 4) * result.restartCount;
- }
-
- // if (result.incompleteTestSeconds !== undefined) {
- // tt += result.incompleteTestSeconds;
- // } else if (result.restartCount !== undefined && result.restartCount > 0) {
- // tt += (tt / 4) * result.restartCount;
- // }
- totalSecondsFiltered += tt;
-
- if (last10 < 10) {
- last10++;
- wpmLast10total += result.wpm;
- totalAcc10 += result.acc;
- if (result.consistency !== undefined) {
- totalCons10 += result.consistency;
- }
- }
- testCount++;
-
- if (result.consistency !== undefined) {
- consCount++;
- totalCons += result.consistency;
- if (result.consistency > topCons) {
- topCons = result.consistency;
- }
- }
-
- if (result.rawWpm !== null) {
- if (rawWpm.last10Count < 10) {
- rawWpm.last10Count++;
- rawWpm.last10Total += result.rawWpm;
- }
- rawWpm.total += result.rawWpm;
- rawWpm.count++;
- if (result.rawWpm > rawWpm.max) {
- rawWpm.max = result.rawWpm;
- }
- }
-
- if (result.acc > topAcc) {
- topAcc = result.acc;
- }
-
- totalAcc += result.acc;
-
- if (result.restartCount !== undefined) {
- testRestarts += result.restartCount;
- }
-
- chartData.push({
- x: filteredResults.length,
- y: Numbers.roundTo2(typingSpeedUnit.fromWpm(result.wpm)),
- wpm: Numbers.roundTo2(typingSpeedUnit.fromWpm(result.wpm)),
- acc: result.acc,
- mode: result.mode,
- mode2: result.mode2,
- punctuation: result.punctuation,
- language: result.language,
- timestamp: result.timestamp,
- difficulty: result.difficulty,
- raw: Numbers.roundTo2(typingSpeedUnit.fromWpm(result.rawWpm)),
- isPb: result.isPb ?? false,
- });
-
- wpmChartData.push(result.wpm);
-
- accChartData.push({
- x: filteredResults.length,
- y: result.acc,
- errorRate: 100 - result.acc,
- });
-
- if (result.wpm > topWpm) {
- topWpm = result.wpm;
- if (result.mode === "custom") {
- topMode = result.mode;
- } else {
- const puncsctring = result.punctuation ? ",
with punctuation" : "";
- const numbsctring = result.numbers ? ",
with numbers" : "";
- topMode = result.mode + " " + result.mode2 + puncsctring + numbsctring;
- }
- }
-
- totalWpm += result.wpm;
- });
-
- historyTable.setData(filteredResults);
-
- qs(".pageAccount .group.history table thead tr td:nth-child(2)")?.setText(
- Config.typingSpeedUnit,
- );
-
- await Misc.sleep(0);
- loadMoreLines();
- ////////
-
- const activityChartData_timeAndAmount: ChartController.ActivityChartDataPoint[] =
- [];
- const activityChartData_avgWpm: ChartController.ActivityChartDataPoint[] = [];
- const wpmStepSize = typingSpeedUnit.historyStepSize;
-
- // let lastTimestamp = 0;
- for (const date of Object.keys(activityChartData)) {
- const dateInt = parseInt(date);
- const dataPoint = activityChartData[dateInt];
-
- if (dataPoint === undefined) continue;
-
- activityChartData_timeAndAmount.push({
- x: dateInt,
- y: dataPoint.time / 60,
- amount: dataPoint.amount,
- restarts: dataPoint.restarts,
- maxWpm: Numbers.roundTo2(typingSpeedUnit.fromWpm(dataPoint.maxWpm)),
- avgWpm: Numbers.roundTo2(dataPoint.totalWpm / dataPoint.amount),
- avgAcc: Numbers.roundTo2(dataPoint.totalAcc / dataPoint.amount),
- avgCon: Numbers.roundTo2(dataPoint.totalCon / dataPoint.amount),
- });
- activityChartData_avgWpm.push({
- x: dateInt,
- y: Numbers.roundTo2(
- typingSpeedUnit.fromWpm(dataPoint.totalWpm) / dataPoint.amount,
- ),
- });
- }
-
- const accountActivityScaleOptions = (
- ChartController.accountActivity.options as ScaleChartOptions<"bar" | "line">
- ).scales;
-
- const accountActivityAvgWpmOptions = accountActivityScaleOptions[
- "avgWpm"
- ] as LinearScaleOptions;
-
- accountActivityAvgWpmOptions.title.text = "Average " + Config.typingSpeedUnit;
- accountActivityAvgWpmOptions.ticks.stepSize = wpmStepSize;
-
- ChartController.accountActivity.getDataset("count").data =
- activityChartData_timeAndAmount;
- ChartController.accountActivity.getDataset("avgWpm").data =
- activityChartData_avgWpm;
-
- const histogramChartDataBucketed: { x: number; y: number }[] = [];
- const labels: string[] = [];
-
- const bucketSize = typingSpeedUnit.histogramDataBucketSize;
- const bucketSizeUpperBound = bucketSize - (bucketSize <= 1 ? 0.01 : 1);
-
- histogramChartData.forEach((amount: number, i: number) => {
- const bucket = i * bucketSize;
- labels.push(`${bucket} - ${bucket + bucketSizeUpperBound}`);
- histogramChartDataBucketed.push({
- x: bucket,
- y: amount,
- });
- });
-
- ChartController.accountHistogram.data.labels = labels;
- ChartController.accountHistogram.getDataset("count").data =
- histogramChartDataBucketed;
-
- const accountHistoryScaleOptions = (
- ChartController.accountHistory.options as ScaleChartOptions<"line">
- ).scales;
-
- const accountHistoryWpmOptions = accountHistoryScaleOptions[
- "wpm"
- ] as LinearScaleOptions;
- accountHistoryWpmOptions.title.text = typingSpeedUnit.fullUnitString;
-
- if (chartData.length > 0) {
- // get pb points
- let currentPb = 0;
- const pb: { x: number; y: number }[] = [];
-
- for (let i = chartData.length - 1; i >= 0; i--) {
- const a = chartData[i] as ChartController.HistoryChartData;
- if (a.y > currentPb) {
- currentPb = a.y;
- pb.push(a);
- }
- }
-
- // add last point to pb
- pb.push({
- x: 1,
- y: Arrays.lastElementFromArray(pb)?.y as number,
- });
-
- const avgTen = [];
- const avgTenAcc = [];
- const avgHundred = [];
- const avgHundredAcc = [];
-
- for (let i = 0; i < chartData.length; i++) {
- // calculate averages of 10
- const subsetTen = chartData.slice(i, i + 10);
- const accSubsetTen = accChartData.slice(i, i + 10);
- const avgTenValue =
- subsetTen.reduce((acc, { y }) => acc + y, 0) / subsetTen.length;
- const accAvgTenValue =
- accSubsetTen.reduce((acc, { y }) => acc + y, 0) / accSubsetTen.length;
-
- avgTen.push({ x: i + 1, y: avgTenValue });
- avgTenAcc.push({ x: i + 1, y: accAvgTenValue });
-
- // calculate averages of 100
- const subsetHundred = chartData.slice(i, i + 100);
- const accSubsetHundred = accChartData.slice(i, i + 100);
- const avgHundredValue =
- subsetHundred.reduce((acc, { y }) => acc + y, 0) / subsetHundred.length;
- const accAvgHundredValue =
- accSubsetHundred.reduce((acc, { y }) => acc + y, 0) /
- accSubsetHundred.length;
- avgHundred.push({ x: i + 1, y: avgHundredValue });
- avgHundredAcc.push({ x: i + 1, y: accAvgHundredValue });
- }
-
- ChartController.accountHistory.getDataset("wpm").data = chartData;
- ChartController.accountHistory.getDataset("pb").data = pb;
- ChartController.accountHistory.getDataset("acc").data = accChartData;
- ChartController.accountHistory.getDataset("wpmAvgTen").data = avgTen;
- ChartController.accountHistory.getDataset("accAvgTen").data = avgTenAcc;
- ChartController.accountHistory.getDataset("wpmAvgHundred").data =
- avgHundred;
- ChartController.accountHistory.getDataset("accAvgHundred").data =
- avgHundredAcc;
-
- ChartController.accountHistory.getScale("x").max = chartData.length + 1;
- }
-
- const wpms = chartData.map((r) => r.y);
- const minWpm = Math.min(...wpms);
- const maxWpm = Math.max(...wpms);
- const minWpmChartVal = isFinite(minWpm) ? minWpm : 0;
- const maxWpmChartVal = isFinite(maxWpm) ? maxWpm : 0;
- const maxWpmChartValWithBuffer =
- Math.floor(maxWpmChartVal) +
- (wpmStepSize - (Math.floor(maxWpmChartVal) % wpmStepSize));
-
- // let accuracies = accChartData.map((r) => r.y);
- accountHistoryWpmOptions.max = maxWpmChartValWithBuffer;
-
- accountHistoryWpmOptions.ticks.stepSize = wpmStepSize;
-
- ChartController.accountHistory.getScale("pb").max = maxWpmChartValWithBuffer;
- ChartController.accountHistory.getScale("wpmAvgTen").max =
- maxWpmChartValWithBuffer;
- ChartController.accountHistory.getScale("wpmAvgHundred").max =
- maxWpmChartValWithBuffer;
-
- if (!Config.startGraphsAtZero) {
- const minWpmChartValFloor =
- Math.floor(minWpmChartVal / wpmStepSize) * wpmStepSize;
-
- ChartController.accountHistory.getScale("wpm").min = minWpmChartValFloor;
- ChartController.accountHistory.getScale("pb").min = minWpmChartValFloor;
- ChartController.accountHistory.getScale("wpmAvgTen").min =
- minWpmChartValFloor;
- ChartController.accountHistory.getScale("wpmAvgHundred").min =
- minWpmChartValFloor;
- } else {
- ChartController.accountHistory.getScale("wpm").min = 0;
- ChartController.accountHistory.getScale("pb").min = 0;
- ChartController.accountHistory.getScale("wpmAvgTen").min = 0;
- ChartController.accountHistory.getScale("wpmAvgHundred").min = 0;
- }
-
- if (chartData === undefined || chartData.length === 0) {
- qs(".pageAccount .group.noDataError")?.show();
- qs(".pageAccount .group.chart")?.hide();
- qs(".pageAccount .group.dailyActivityChart")?.hide();
- qs(".pageAccount .group.histogramChart")?.hide();
- qs(".pageAccount .group.aboveHistory")?.hide();
- qs(".pageAccount .group.history")?.hide();
- qs(".pageAccount .triplegroup.stats")?.hide();
- qs(".pageAccount .group.estimatedWordsTyped")?.hide();
- } else {
- qs(".pageAccount .group.noDataError")?.hide();
- qs(".pageAccount .group.chart")?.show();
- qs(".pageAccount .group.dailyActivityChart")?.show();
- qs(".pageAccount .group.histogramChart")?.show();
- qs(".pageAccount .group.aboveHistory")?.show();
- qs(".pageAccount .group.history")?.show();
- qs(".pageAccount .triplegroup.stats")?.show();
- qs(".pageAccount .group.estimatedWordsTyped")?.show();
- }
-
- qs(".pageAccount .timeTotalFiltered .val")?.setText(
- DateTime.secondsToString(Math.round(totalSecondsFiltered), true, true),
- );
-
- const speedUnit = Config.typingSpeedUnit;
-
- qs(".pageAccount .highestWpm .title")?.setText(`highest ${speedUnit}`);
- qs(".pageAccount .highestWpm .val")?.setText(Format.typingSpeed(topWpm));
-
- qs(".pageAccount .averageWpm .title")?.setText(`average ${speedUnit}`);
- qs(".pageAccount .averageWpm .val")?.setText(
- Format.typingSpeed(totalWpm / testCount),
- );
-
- qs(".pageAccount .averageWpm10 .title")?.setText(
- `average ${speedUnit} (last 10 tests)`,
- );
- qs(".pageAccount .averageWpm10 .val")?.setText(
- Format.typingSpeed(wpmLast10total / last10),
- );
-
- qs(".pageAccount .highestRaw .title")?.setText(`highest raw ${speedUnit}`);
- qs(".pageAccount .highestRaw .val")?.setText(Format.typingSpeed(rawWpm.max));
-
- qs(".pageAccount .averageRaw .title")?.setText(`average raw ${speedUnit}`);
- qs(".pageAccount .averageRaw .val")?.setText(
- Format.typingSpeed(rawWpm.total / rawWpm.count),
- );
-
- qs(".pageAccount .averageRaw10 .title")?.setText(
- `average raw ${speedUnit} (last 10 tests)`,
- );
- qs(".pageAccount .averageRaw10 .val")?.setText(
- Format.typingSpeed(rawWpm.last10Total / rawWpm.last10Count),
- );
-
- qs(".pageAccount .highestWpm .mode")?.setHtml(topMode);
- qs(".pageAccount .testsTaken .val")?.setText(testCount.toString());
-
- qs(".pageAccount .highestAcc .val")?.setText(Format.accuracy(topAcc));
- qs(".pageAccount .avgAcc .val")?.setText(
- Format.accuracy(totalAcc / testCount),
- );
- qs(".pageAccount .avgAcc10 .val")?.setText(
- Format.accuracy(totalAcc10 / last10),
- );
-
- if (totalCons === 0 || totalCons === undefined) {
- qs(".pageAccount .avgCons .val")?.setText("-");
- qs(".pageAccount .avgCons10 .val")?.setText("-");
- } else {
- qs(".pageAccount .highestCons .val")?.setText(Format.percentage(topCons));
-
- qs(".pageAccount .avgCons .val")?.setText(
- Format.percentage(totalCons / consCount),
- );
-
- qs(".pageAccount .avgCons10 .val")?.setText(
- Format.percentage(totalCons10 / Math.min(last10, consCount)),
- );
- }
-
- qs(".pageAccount .testsStarted .val")?.setText(`${testCount + testRestarts}`);
- qs(".pageAccount .testsCompleted .val")?.setText(
- `${testCount}(${Math.floor(
- (testCount / (testCount + testRestarts)) * 100,
- )}%)`,
- );
-
- qs(".pageAccount .testsCompleted .avgres")?.setText(`
- ${(testRestarts / testCount).toFixed(1)} restarts per completed test
- `);
-
- const wpmPoints = filteredResults.map((r) => r.wpm).reverse();
-
- const trend = findLineByLeastSquares(wpmPoints);
- if (trend) {
- const wpmChange = trend[1][1] - trend[0][1];
- const wpmChangePerHour = wpmChange * (3600 / totalSecondsFiltered);
- const plus = wpmChangePerHour > 0 ? "+" : "";
- qs(".pageAccount .group.chart .below .text")?.setText(
- `Speed change per hour spent typing: ${
- plus + Format.typingSpeed(wpmChangePerHour, { showDecimalPlaces: true })
- } ${Config.typingSpeedUnit}`,
- );
- }
- qs(".pageAccount .estimatedWordsTyped .val")?.setText(
- totalEstimatedWords.toString(),
- );
-
- if (chartData.length || accChartData.length) {
- ChartController.updateAccountChartButtons();
- ChartController.accountHistory.options.animation = false;
- ChartController.accountHistory.update();
- delete ChartController.accountHistory.options.animation;
- }
- await Misc.sleep(0);
- ChartController.accountActivity.update();
- ChartController.accountHistogram.update();
- Focus.set(false);
- qs(".page.pageAccount")?.setStyle({ height: "unset" }); //weird safari fix
-}
-
-export async function downloadResults(offset?: number): Promise {
- const results = await DB.getUserResults(offset);
-
- TodayTracker.addAllFromToday();
- if (results) {
- ResultFilters.updateActive();
- }
-}
-
-async function update(): Promise {
- await downloadResults();
- try {
- await Misc.sleep(0);
- await fillContent();
- } catch (e) {
- console.error(e);
- showErrorNotification(`Something went wrong: ${e}`);
- }
-}
-
-export function updateTagsForResult(resultId: string, tagIds: string[]): void {
- const tagNames: string[] = [];
-
- if (tagIds.length > 0) {
- for (const tag of tagIds) {
- DB.getSnapshot()?.tags?.forEach((snaptag) => {
- if (tag === snaptag._id) {
- tagNames.push(snaptag.display);
- }
- });
- }
- }
-
- const el = qs(
- `.pageAccount .resultEditTagsButton[data-result-id='${resultId}']`,
- );
-
- el?.setAttribute("data-tags", JSON.stringify(tagIds));
-
- if (tagIds.length > 0) {
- el?.setAttribute("aria-label", tagNames.join(", "));
- el?.addClass("active");
- if (tagIds.length > 1) {
- el?.setHtml(``);
- } else {
- el?.setHtml(``);
- }
- } else {
- el?.setAttribute("aria-label", "no tags");
- el?.removeClass("active");
- el?.setHtml(``);
- }
-}
-
-qs(".pageAccount button.toggleResultsOnChart")?.on("click", () => {
- const newValue = [...Config.accountChart] as AccountChart;
- newValue[0] = newValue[0] === "on" ? "off" : "on";
- setConfig("accountChart", newValue);
-});
-
-qs(".pageAccount button.toggleAccuracyOnChart")?.on("click", () => {
- const newValue = [...Config.accountChart] as AccountChart;
- newValue[1] = newValue[1] === "on" ? "off" : "on";
- setConfig("accountChart", newValue);
-});
-
-qs(".pageAccount button.toggleAverage10OnChart")?.on("click", () => {
- const newValue = [...Config.accountChart] as AccountChart;
- newValue[2] = newValue[2] === "on" ? "off" : "on";
- setConfig("accountChart", newValue);
-});
-
-qs(".pageAccount button.toggleAverage100OnChart")?.on("click", () => {
- const newValue = [...Config.accountChart] as AccountChart;
- newValue[3] = newValue[3] === "on" ? "off" : "on";
- setConfig("accountChart", newValue);
-});
-
-qs(".pageAccount .loadMoreButton")?.on("click", () => {
- loadMoreLines();
-});
-
-qs(".pageAccount #accountHistoryChart")?.on("click", () => {
- const chart = ChartController.accountHistory;
- const active = chart.tooltip?.getActiveElements?.() ?? [];
- if (!active.length) return;
-
- const index = active[0]?.index;
- if (index === undefined) return;
-
- loadMoreLines(index);
-
- const resultId = filteredResults[index]?._id;
- if (resultId === undefined) {
- throw new Error("Cannot find result for index " + index);
- }
-
- const element = qs(`.resultRow[data-id="${resultId}"]`);
- qsa(".resultRow").removeClass("active");
-
- element?.scrollIntoView({ block: "center" });
- element?.addClass("active");
-});
-
-qs(".pageAccount")?.onChild(
- "click",
- ".miniResultChartButton",
- async (event) => {
- const target = new ElementWithUtils(event.childTarget as HTMLElement);
- const resultId: string = target
- .closestParent("tr")
- ?.getAttribute("data-id") as string;
- if (target.hasClass("loading")) return;
- if (target.hasClass("disabled")) return;
-
- const result = filteredResults.find((it) => it._id === resultId);
- if (result === undefined) return;
-
- let chartData = result.chartData as ChartData;
-
- if (chartData === undefined) {
- //need to load full result
- target?.addClass("loading");
- target?.removeAttribute("aria-label");
- target?.setHtml('');
- showLoaderBar();
-
- const response = await Ape.results.getById({
- params: { resultId: result._id },
- });
- hideLoaderBar();
-
- target?.setHtml('');
- target?.removeClass("loading");
-
- if (response.status !== 200) {
- showErrorNotification("Error fetching result", { response });
- return;
- }
-
- chartData = response.body.data.chartData as ChartData;
-
- //update local cache
- result.chartData = chartData;
- const dbResult = DB.getSnapshot()?.results?.find(
- (it) => it._id === result._id,
- );
- if (dbResult !== undefined) {
- dbResult.chartData = result.chartData;
- }
-
- if (response.body.data.chartData === "toolong") {
- target?.setAttribute(
- "aria-label",
- "Graph history is not available for long tests",
- );
- target?.setAttribute("data-balloon-pos", "up");
- target.addClass("disabled");
-
- showNoticeNotification("Graph history is not available for long tests");
- return;
- }
- }
- target?.setAttribute("aria-label", "View graph");
- MiniResultChartModal.show(chartData);
- },
-);
-
-const filterButtons = qsa(
- ".pageAccount .group.topFilters, .pageAccount .filterButtons",
-);
-
-filterButtons.forEach((filterButton) => {
- filterButton.onChild("click", "button", () => {
- setTimeout(() => {
- void update();
- }, 0);
- });
-});
-
-qs(".pageAccount .group.presetFilterButtons")?.onChild(
- "click",
- ".filterBtns .filterPresets .select-filter-preset",
- async (e) => {
- const target = e.childTarget as HTMLElement;
- await ResultFilters.setFilterPreset(
- target.getAttribute("data-id") as string,
- );
- void update();
- },
-);
-
-qs(".pageAccount .content .group.aboveHistory .exportCSV")?.on("click", () => {
- showLoaderBar();
- void Misc.downloadResultsCSV(filteredResults).finally(() => {
- hideLoaderBar();
- });
-});
-
-qs(".pageAccount button.loadMoreResults")?.on("click", async () => {
- const offset = DB.getSnapshot()?.results?.length ?? 0;
-
- showLoaderBar();
- ResultBatches.disableButton();
-
- await downloadResults(offset);
- await fillContent();
- hideLoaderBar();
-});
-
-qs(".pageAccount")?.onChild("click", ".sendVerificationEmail", async () => {
- qs(".sendVerificationEmail")?.disable();
- await sendVerificationEmail();
- qs(".sendVerificationEmail")?.enable();
-});
-
-configEvent.subscribe(({ key }) => {
- if (getActivePage() === "account" && key === "typingSpeedUnit") {
- void update();
- }
-});
-
-export const page = new Page({
- id: "account",
- element: qsr(".page.pageAccount"),
- path: "/account",
- loadingOptions: {
- loadingMode: () => {
- if (DB.getSnapshot()?.results === undefined) {
- return "sync";
- } else {
- return "none";
- }
- },
- loadingPromise: async () => {
- if (DB.getSnapshot() === null) {
- throw new Error(
- "Looks like your account data didn't download correctly. Please refresh the page.
If this error persists, please contact support.",
- );
- }
- return downloadResults();
- },
- style: "bar",
- keyframes: [
- {
- percentage: 90,
- durationMs: 2000,
- text: "Downloading results...",
- },
- ],
- },
- afterHide: async (): Promise => {
- reset();
- Skeleton.remove("pageAccount");
- },
- beforeShow: async (): Promise => {
- Skeleton.append("pageAccount", "main");
- await ResultFilters.appendDropdowns(update);
- ResultFilters.updateActive();
- await Misc.sleep(0);
-
- historyTable ??= new SortedTableWithLimit>({
- limit: 10,
- table: qsr(".pageAccount .content .history table"),
- data: filteredResults,
- buildRow: (val) => {
- return buildResultRow(val);
- },
- initialSort: { property: "timestamp", descending: true },
- });
-
- await update().then(() => {
- qs(".pageAccount .content .accountVerificatinNotice")?.remove();
- if (getAuthenticatedUser()?.emailVerified === false) {
- qs(".pageAccount .content")?.prependHtml(
- `Your email address is still not verified |