Merge branch 'master' into feature/auto-random-theme

Author: fehmer

frontend/package.json

@@ -31,6 +31,16 @@
     "not op_mini all",
     "not dead"
   ],
+  "lint-staged": {
+    "*.{json,scss,css,html}": [
+      "prettier --write"
+    ],
+    "*.{ts,js}": [
+      "prettier --write",
+      "oxlint",
+      "eslint"
+    ]
+  },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "5.15.4",
     "@monkeytype/eslint-config": "workspace:*",

frontend/scripts/language-hashes.ts

@@ -0,0 +1,66 @@
+import { Plugin } from "vite";
+import { readdirSync, readFileSync } from "fs";
+import { TextEncoder } from "util";
+import { createHash } from "crypto";
+
+const virtualModuleId = "virtual:language-hashes";
+const resolvedVirtualModuleId = "\0" + virtualModuleId;
+let skip = false;
+
+export function languageHashes(): Plugin {
+  return {
+    name: "virtual-language-hashes",
+    resolveId(id) {
+      if (id === virtualModuleId) return resolvedVirtualModuleId;
+      return;
+    },
+    load(id) {
+      if (id === resolvedVirtualModuleId) {
+        const hashes: Record<string, string> = skip ? {} : getHashes();
+        return `
+          export const languageHashes = ${JSON.stringify(hashes)};
+        `;
+      }
+      return;
+    },
+    configResolved(resolvedConfig) {
+      if (resolvedConfig?.define?.["IS_DEVELOPMENT"] === "true") {
+        skip = true;
+        console.log("Skipping language hashing in dev environment.");
+      }
+    },
+  };
+}
+
+function getHashes(): Record<string, string> {
+  const start = performance.now();
+
+  console.log("\nHashing languages...");
+
+  const hashes = Object.fromEntries(
+    readdirSync("./static/languages").map((file) => {
+      return [file.slice(0, -5), calcHash(file)];
+    })
+  );
+
+  const end = performance.now();
+
+  console.log(`Creating language hashes took ${Math.round(end - start)} ms`);
+
+  return hashes;
+}
+
+function calcHash(file: string): string {
+  const currentLanguage = JSON.stringify(
+    JSON.parse(readFileSync("./static/languages/" + file).toString()),
+    null,
+    0
+  );
+  const encoder = new TextEncoder();
+  const data = encoder.encode(currentLanguage);
+  return createHash("sha256").update(data).digest("hex");
+}
+
+if (import.meta.url.endsWith(process.argv[1] as string)) {
+  console.log(JSON.stringify(getHashes(), null, 4));
+}

frontend/src/ts/controllers/input-controller.ts

@@ -1182,11 +1182,9 @@ $("#wordsInput").on("keydown", (event) => {
   }
 
   const now = performance.now();
-  setTimeout(() => {
-    const eventCode =
-      event.code === "" || event.key === "Unidentified" ? "NoCode" : event.code;
-    TestInput.recordKeydownTime(now, eventCode);
-  }, 0);
+  const eventCode =
+    event.code === "" || event.key === "Unidentified" ? "NoCode" : event.code;
+  TestInput.recordKeydownTime(now, eventCode);
 });
 
 $("#wordsInput").on("keyup", (event) => {
@@ -1213,11 +1211,9 @@ $("#wordsInput").on("keyup", (event) => {
   }
 
   const now = performance.now();
-  setTimeout(() => {
-    const eventCode =
-      event.code === "" || event.key === "Unidentified" ? "NoCode" : event.code;
-    TestInput.recordKeyupTime(now, eventCode);
-  }, 0);
+  const eventCode =
+    event.code === "" || event.key === "Unidentified" ? "NoCode" : event.code;
+  TestInput.recordKeyupTime(now, eventCode);
 });
 
 $("#wordsInput").on("keyup", (event) => {

frontend/src/ts/module.d.ts

@@ -0,0 +1,5 @@
+import { Language } from "@monkeytype/schemas/languages";
+
+declare module "virtual:language-hashes" {
+  export const languageHashes: Record<Language, string>;
+}

frontend/src/ts/sentry.ts

@@ -26,10 +26,10 @@ export async function activateSentry(): Promise<void> {
     environment: envConfig.isDevelopment ? "development" : "production",
     integrations: [
       Sentry.browserTracingIntegration(),
-      Sentry.replayIntegration({
-        unmask: ["#notificationCenter"],
-        block: ["#commandLine .modal .suggestions"],
-      }),
+      // Sentry.replayIntegration({
+      //   unmask: ["#notificationCenter"],
+      //   block: ["#commandLine .modal .suggestions"],
+      // }),
       Sentry.thirdPartyErrorFilterIntegration({
         filterKeys: ["monkeytype-frontend"],
         // Defines how to handle errors that contain third party stack frames.

frontend/src/ts/test/test-input.ts

@@ -262,16 +262,37 @@ export function forceKeyup(now: number): void {
   //using mean here because for words mode, the last keypress ends the test.
   //if we then force keyup on that last keypress, it will record a duration of 0
   //skewing the average and standard deviation
-  const avg = roundTo2(mean(keypressTimings.duration.array));
-  const keysOrder = Object.entries(keyDownData);
-  keysOrder.sort((a, b) => a[1].timestamp - b[1].timestamp);
-  for (const keyOrder of keysOrder) {
-    recordKeyupTime(now, keyOrder[0]);
+
+  const indexesToRemove = new Set(
+    Object.values(keyDownData).map((data) => data.index)
+  );
+
+  const keypressDurations = keypressTimings.duration.array.filter(
+    (_, index) => !indexesToRemove.has(index)
+  );
+  if (keypressDurations.length === 0) {
+    // this means the test ended while all keys were still held - probably safe to ignore
+    // since this will result in a "too short" test anyway
+    return;
   }
-  const last = lastElementFromArray(keysOrder)?.[0] as string;
-  const index = keyDownData[last]?.index;
-  if (last !== undefined && index !== undefined) {
+
+  const avg = roundTo2(mean(keypressDurations));
+
+  const orderedKeys = Object.entries(keyDownData).sort(
+    (a, b) => a[1].timestamp - b[1].timestamp
+  );
+
+  for (const [key, { index }] of orderedKeys) {
     keypressTimings.duration.array[index] = avg;
+
+    if (key === "NoCode") {
+      noCodeIndex--;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete keyDownData[key];
+
+    updateOverlap(now);
   }
 }
 
@@ -350,6 +371,21 @@ function updateOverlap(now: number): void {
 }
 
 export function resetKeypressTimings(): void {
+  //because keydown triggers before input, we need to grab the first keypress data here and carry it over
+
+  //take the key with the largest index
+  const lastKey = Object.keys(keyDownData).reduce((a, b) => {
+    const aIndex = keyDownData[a]?.index;
+    const bIndex = keyDownData[b]?.index;
+    if (aIndex === undefined) return b;
+    if (bIndex === undefined) return a;
+    return aIndex > bIndex ? a : b;
+  });
+
+  //get the data
+  const lastKeyData = keyDownData[lastKey];
+
+  //reset
   keypressTimings = {
     spacing: {
       first: -1,
@@ -366,6 +402,26 @@ export function resetKeypressTimings(): void {
   };
   keyDownData = {};
   noCodeIndex = 0;
+
+  //carry over
+  if (lastKeyData !== undefined) {
+    keypressTimings = {
+      spacing: {
+        first: lastKeyData.timestamp,
+        last: lastKeyData.timestamp,
+        array: [],
+      },
+      duration: {
+        array: [0],
+      },
+    };
+    keyDownData[lastKey] = {
+      timestamp: lastKeyData.timestamp,
+      // make sure to set it to the first index
+      index: 0,
+    };
+  }
+
   console.debug("Keypress timings reset");
 }
 
@@ -413,14 +469,4 @@ export function restart(): void {
     correct: 0,
     incorrect: 0,
   };
-  keypressTimings = {
-    spacing: {
-      first: -1,
-      last: -1,
-      array: [],
-    },
-    duration: {
-      array: [],
-    },
-  };
 }

frontend/src/ts/test/test-logic.ts

@@ -456,7 +456,6 @@ async function init(): Promise<boolean> {
   }
 
   if (!language || language.name !== Config.language) {
-    UpdateConfig.setLanguage("english");
     return await init();
   }
 
@@ -968,7 +967,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
   }
 
   // stats
-  const stats = TestStats.calculateStats();
+  const stats = TestStats.calculateFinalStats();
   if (stats.time % 1 !== 0 && Config.mode !== "time") {
     TestStats.setLastSecondNotRound();
   }

frontend/src/ts/test/test-stats.ts

@@ -7,6 +7,7 @@ import * as TestState from "./test-state";
 import * as Numbers from "@monkeytype/util/numbers";
 import { CompletedEvent, IncompleteTest } from "@monkeytype/schemas/results";
 import { isFunboxActiveWithProperty } from "./funbox/list";
+import * as CustomText from "./custom-text";
 
 type CharCount = {
   spaces: number;
@@ -144,14 +145,17 @@ export function calculateTestSeconds(now?: number): number {
   }
 }
 
-export function calculateWpmAndRaw(withDecimalPoints?: true): {
+export function calculateWpmAndRaw(
+  withDecimalPoints?: true,
+  final = false
+): {
   wpm: number;
   raw: number;
 } {
   const testSeconds = calculateTestSeconds(
     TestState.isActive ? performance.now() : end
   );
-  const chars = countChars();
+  const chars = countChars(final);
   const wpm = Numbers.roundTo2(
     ((chars.correctWordChars + chars.correctSpaces) * (60 / testSeconds)) / 5
   );
@@ -280,7 +284,7 @@ function getTargetWords(): string[] {
   return targetWords;
 }
 
-function countChars(): CharCount {
+function countChars(final = false): CharCount {
   let correctWordChars = 0;
   let correctChars = 0;
   let incorrectChars = 0;
@@ -343,7 +347,13 @@ function countChars(): CharCount {
       }
       correctChars += toAdd.correct;
       incorrectChars += toAdd.incorrect;
-      if (i === inputWords.length - 1) {
+
+      const isTimedTest =
+        Config.mode === "time" ||
+        (Config.mode === "custom" && CustomText.getLimit().mode === "time");
+      const shouldCountPartialLastWord = !final || (final && isTimedTest);
+
+      if (i === inputWords.length - 1 && shouldCountPartialLastWord) {
         //last word - check if it was all correct - add to correct word chars
         if (toAdd.incorrect === 0) correctWordChars += toAdd.correct;
       } else {
@@ -370,7 +380,7 @@ function countChars(): CharCount {
   };
 }
 
-export function calculateStats(): Stats {
+export function calculateFinalStats(): Stats {
   console.debug("Calculating result stats");
   let testSeconds = calculateTestSeconds();
   console.debug(
@@ -398,8 +408,10 @@ export function calculateStats(): Stats {
       testSeconds
     );
   }
-  const chars = countChars();
-  const { wpm, raw } = calculateWpmAndRaw(true);
+
+  //todo: this counts chars twice - once here and once in calculateWpmAndRaw
+  const chars = countChars(true);
+  const { wpm, raw } = calculateWpmAndRaw(true, true);
   const acc = Numbers.roundTo2(calculateAccuracy());
   const ret = {
     wpm: isNaN(wpm) ? 0 : wpm,

frontend/src/ts/utils/json-data.ts

@@ -1,9 +1,13 @@
 import { Language, LanguageObject } from "@monkeytype/schemas/languages";
 import { Challenge } from "@monkeytype/schemas/challenges";
 import { LayoutObject } from "@monkeytype/schemas/layouts";
+import { toHex } from "./strings";
+import { languageHashes } from "virtual:language-hashes";
+import { isDevEnvironment } from "./misc";
 
 //pin implementation
 const fetch = window.fetch;
+const cryptoSubtle = window.crypto.subtle;
 
 /**
  * Fetches JSON data from the specified URL using the fetch API.
@@ -96,9 +100,23 @@ let currentLanguage: LanguageObject;
 export async function getLanguage(lang: Language): Promise<LanguageObject> {
   // try {
   if (currentLanguage === undefined || currentLanguage.name !== lang) {
-    currentLanguage = await cachedFetchJson<LanguageObject>(
+    const loaded = await cachedFetchJson<LanguageObject>(
       `/languages/${lang}.json`
     );
+
+    if (!isDevEnvironment()) {
+      //check the content to make it less easy to manipulate
+      const encoder = new TextEncoder();
+      const data = encoder.encode(JSON.stringify(loaded, null, 0));
+      const hashBuffer = await cryptoSubtle.digest("SHA-256", data);
+      const hash = toHex(hashBuffer);
+      if (hash !== languageHashes[lang]) {
+        throw new Error(
+          "Integrity check failed. Try refreshing the page. If this error persists, please contact support."
+        );
+      }
+    }
+    currentLanguage = loaded;
   }
   return currentLanguage;
 }

frontend/src/ts/utils/strings.ts

@@ -296,6 +296,20 @@ export function areCharactersVisuallyEqual(
   return false;
 }
 
+export function toHex(buffer: ArrayBuffer): string {
+  // @ts-expect-error modern browsers
+  if (Uint8Array.prototype.toHex !== undefined) {
+    // @ts-expect-error modern browsers
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    return new Uint8Array(buffer).toHex() as string;
+  }
+  const hashArray = Array.from(new Uint8Array(buffer));
+  const hashHex = hashArray
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+  return hashHex;
+}
+
 // Export testing utilities for unit tests
 export const __testing = {
   hasRTLCharacters,