fix(test-timer): test timer doesn't stop right after a test ends (@Leonabcd123) (monkeytypegame#7230)

### Description

In the current implementation, the time difference between `now` and
when we call `TestTimer.clear()` is high enough, so that if the test
duration is really close to a whole number (say `3.96`), then
`TestTimer` will continue to run up until the whole number, and will
push another wpm entry to `wpmHistory` and another raw entry to
`rawHistory`, causing the result chart to be messed up. This
implementation clears `TestTimer` right after calculating `now` to
hopefully allow for a smaller time difference between `now` and
`TestTimer`.

Also fixed some typos in comments.

Author: Leonabcd123

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

@@ -85,24 +85,24 @@ class ChartWithUpdateColors<
   }
 
   async updateColors(): Promise<void> {
-    //@ts-expect-error its too difficult to figure out these types, but this works
+    //@ts-expect-error it's too difficult to figure out these types, but this works
     await updateColors(this);
   }
 
   getDataset(id: DatasetIds): ChartDataset<TType, TData> {
-    //@ts-expect-error its too difficult to figure out these types, but this works
+    //@ts-expect-error it's too difficult to figure out these types, but this works
     return this.data.datasets?.find((x) => x.yAxisID === id);
   }
 
   getScaleIds(): DatasetIds[] {
-    //@ts-expect-error its too difficult to figure out these types, but this works
+    //@ts-expect-error it's too difficult to figure out these types, but this works
     return typedKeys(this.options?.scales ?? {}) as DatasetIds[];
   }
 
   getScale(
     id: DatasetIds extends never ? never : "x" | DatasetIds,
   ): DatasetIds extends never ? never : CartesianScaleOptions {
-    //@ts-expect-error its too difficult to figure out these types, but this works
+    //@ts-expect-error it's too difficult to figure out these types, but this works
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
     return this.options.scales[id];
   }
@@ -120,7 +120,7 @@ export const result = new ChartWithUpdateColors<
     labels: [],
     datasets: [
       {
-        //@ts-expect-error the type is defined incorrectly, have to ingore the error
+        //@ts-expect-error the type is defined incorrectly, have to ignore the error
         clip: false,
         label: "wpm",
         data: [],
@@ -131,7 +131,7 @@ export const result = new ChartWithUpdateColors<
         pointRadius: 1,
       },
       {
-        //@ts-expect-error the type is defined incorrectly, have to ingore the error
+        //@ts-expect-error the type is defined incorrectly, have to ignore the error
         clip: false,
         label: "raw",
         data: [],
@@ -143,7 +143,7 @@ export const result = new ChartWithUpdateColors<
         pointRadius: 0,
       },
       {
-        //@ts-expect-error the type is defined incorrectly, have to ingore the error
+        //@ts-expect-error the type is defined incorrectly, have to ignore the error
         clip: false,
         label: "errors",
         data: [],
@@ -166,7 +166,7 @@ export const result = new ChartWithUpdateColors<
         },
       },
       {
-        //@ts-expect-error the type is defined incorrectly, have to ingore the error
+        //@ts-expect-error the type is defined incorrectly, have to ignore the error
         clip: false,
         label: "burst",
         data: [],
@@ -1268,7 +1268,7 @@ async function updateColors<
     return;
   }
 
-  //@ts-expect-error its too difficult to figure out these types, but this works
+  //@ts-expect-error it's too difficult to figure out these types, but this works
   chart.data.datasets[0].borderColor = (ctx): string => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     const isPb = ctx.raw?.isPb as boolean;

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

@@ -930,6 +930,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
   if (!TestState.isActive) return;
   TestUI.setResultCalculating(true);
   const now = performance.now();
+  TestTimer.clear();
   TestStats.setEnd(now);
 
   // fade out the test and show loading
@@ -977,7 +978,6 @@ export async function finish(difficultyFailed = false): Promise<void> {
   LiveBurst.hide();
   TimerProgress.hide();
   OutOfFocus.hide();
-  TestTimer.clear();
   Monkey.hide();
   void ModesNotice.update();