fix(navigation): level up animation showing wrong level (@Miodec) (monkeytypegame#6946)

Introduced in monkeytypegame#6865, caused by account button reacting to the
`snapshotUpdate` triggered by `addXp` function.

Fixed by merging result related snapshot functions into one and adding a
`noDispatchEvent` param to `setSnapshot` and using it in the new
function and `addXp`. This works because result and alerts panel both
call the `XPBar.update` directly to animate the xp gain.

Author: Miodec

frontend/src/ts/db.ts

@@ -49,7 +49,10 @@ export function getSnapshot(): Snapshot | undefined {
   return dbSnapshot;
 }
 
-export function setSnapshot(newSnapshot: Snapshot | undefined): void {
+export function setSnapshot(
+  newSnapshot: Snapshot | undefined,
+  options?: { dispatchEvent?: boolean }
+): void {
   const originalBanned = dbSnapshot?.banned;
   const originalVerified = dbSnapshot?.verified;
   const lbOptOut = dbSnapshot?.lbOptOut;
@@ -71,7 +74,9 @@ export function setSnapshot(newSnapshot: Snapshot | undefined): void {
     dbSnapshot.lbOptOut = lbOptOut;
   }
 
-  AuthEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: false } });
+  if (options?.dispatchEvent !== false) {
+    AuthEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: false } });
+  }
 }
 
 export async function initSnapshot(): Promise<Snapshot | false> {
@@ -629,7 +634,7 @@ export async function getLocalPB<M extends Mode>(
   );
 }
 
-export async function saveLocalPB<M extends Mode>(
+function saveLocalPB<M extends Mode>(
   mode: M,
   mode2: Mode2<M>,
   punctuation: boolean,
@@ -641,7 +646,7 @@ export async function saveLocalPB<M extends Mode>(
   acc: number,
   raw: number,
   consistency: number
-): Promise<void> {
+): void {
   if (mode === "quote") return;
   if (!dbSnapshot) return;
   function cont(): void {
@@ -922,38 +927,76 @@ export async function resetConfig(): Promise<void> {
   }
 }
 
-export function saveLocalResult(result: SnapshotResult<Mode>): void {
+export type SaveLocalResultData = {
+  xp?: number;
+  streak?: number;
+  result?: SnapshotResult<Mode>;
+  isPb?: boolean;
+};
+
+export function saveLocalResult(data: SaveLocalResultData): void {
   const snapshot = getSnapshot();
   if (!snapshot) return;
 
-  if (snapshot?.results !== undefined) {
-    snapshot.results.unshift(result);
+  if (data.result !== undefined) {
+    if (snapshot?.results !== undefined) {
+      snapshot.results.unshift(data.result);
+    }
+    if (snapshot.testActivity !== undefined) {
+      snapshot.testActivity.increment(new Date(data.result.timestamp));
+    }
+    if (snapshot.typingStats === undefined) {
+      snapshot.typingStats = {
+        timeTyping: 0,
+        startedTests: 0,
+        completedTests: 0,
+      };
 
-    setSnapshot(snapshot);
-  }
+      const time =
+        data.result.testDuration +
+        data.result.incompleteTestSeconds -
+        data.result.afkDuration;
 
-  if (snapshot.testActivity !== undefined) {
-    snapshot.testActivity.increment(new Date(result.timestamp));
-    setSnapshot(snapshot);
+      snapshot.typingStats.timeTyping += time;
+      snapshot.typingStats.startedTests += data.result.restartCount + 1;
+      snapshot.typingStats.completedTests += 1;
+    }
+
+    if (data.isPb) {
+      saveLocalPB(
+        data.result.mode,
+        data.result.mode2,
+        data.result.punctuation,
+        data.result.numbers,
+        data.result.language,
+        data.result.difficulty,
+        data.result.lazyMode,
+        data.result.wpm,
+        data.result.acc,
+        data.result.rawWpm,
+        data.result.consistency
+      );
+    }
   }
-}
 
-export function updateLocalStats(started: number, time: number): void {
-  const snapshot = getSnapshot();
-  if (!snapshot) return;
-  if (snapshot.typingStats === undefined) {
-    snapshot.typingStats = {
-      timeTyping: 0,
-      startedTests: 0,
-      completedTests: 0,
-    };
+  if (data.xp !== undefined) {
+    if (snapshot.xp === undefined) {
+      snapshot.xp = 0;
+    }
+    snapshot.xp += data.xp;
   }
 
-  snapshot.typingStats.timeTyping += time;
-  snapshot.typingStats.startedTests += started;
-  snapshot.typingStats.completedTests += 1;
+  if (data.streak !== undefined) {
+    snapshot.streak = data.streak;
 
-  setSnapshot(snapshot);
+    if (snapshot.streak > snapshot.maxStreak) {
+      snapshot.maxStreak = snapshot.streak;
+    }
+  }
+
+  setSnapshot(snapshot, {
+    dispatchEvent: false,
+  });
 }
 
 export function addXp(xp: number): void {
@@ -964,7 +1007,9 @@ export function addXp(xp: number): void {
     snapshot.xp = 0;
   }
   snapshot.xp += xp;
-  setSnapshot(snapshot);
+  setSnapshot(snapshot, {
+    dispatchEvent: false,
+  });
 }
 
 export function updateInboxUnreadSize(newSize: number): void {
@@ -988,19 +1033,6 @@ export function addBadge(badge: Badge): void {
   setSnapshot(snapshot);
 }
 
-export function setStreak(streak: number): void {
-  const snapshot = getSnapshot();
-  if (!snapshot) return;
-
-  snapshot.streak = streak;
-
-  if (snapshot.streak > snapshot.maxStreak) {
-    snapshot.maxStreak = snapshot.streak;
-  }
-
-  setSnapshot(snapshot);
-}
-
 export async function getTestActivityCalendar(
   yearString: string
 ): Promise<TestActivityCalendar | undefined> {

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

@@ -1288,6 +1288,8 @@ async function saveResult(
   );
   $("#result .stats .tags .editTagsButton").removeClass("invisible");
 
+  const dataToSave: DB.SaveLocalResultData = {};
+
   if (data.xp !== undefined) {
     const snapxp = DB.getSnapshot()?.xp ?? 0;
 
@@ -1296,11 +1298,11 @@ async function saveResult(
       data.xp,
       TestUI.resultVisible ? data.xpBreakdown : undefined
     );
-    DB.addXp(data.xp);
+    dataToSave.xp = data.xp;
   }
 
   if (data.streak !== undefined) {
-    DB.setStreak(data.streak);
+    dataToSave.streak = data.streak;
   }
 
   if (data.insertedId !== undefined) {
@@ -1314,13 +1316,7 @@ async function saveResult(
     if (data.isPb !== undefined && data.isPb) {
       result.isPb = true;
     }
-    DB.saveLocalResult(result);
-    DB.updateLocalStats(
-      completedEvent.incompleteTests.length + 1,
-      completedEvent.testDuration +
-        completedEvent.incompleteTestSeconds -
-        completedEvent.afkDuration
-    );
+    dataToSave.result = result;
   }
 
   void AnalyticsController.log("testCompleted");
@@ -1343,34 +1339,11 @@ async function saveResult(
     }
     Result.showCrown("normal");
 
-    await DB.saveLocalPB(
-      completedEvent.mode,
-      completedEvent.mode2,
-      completedEvent.punctuation,
-      completedEvent.numbers,
-      completedEvent.language,
-      completedEvent.difficulty,
-      completedEvent.lazyMode,
-      completedEvent.wpm,
-      completedEvent.acc,
-      completedEvent.rawWpm,
-      completedEvent.consistency
-    );
+    dataToSave.isPb = true;
   } else {
     Result.showErrorCrownIfNeeded();
   }
 
-  // if (response.data.dailyLeaderboardRank) {
-  //   Notifications.add(
-  //     `New ${completedEvent.language} ${completedEvent.mode} ${completedEvent.mode2} rank: ` +
-  //       Misc.getPositionString(response.data.dailyLeaderboardRank),
-  //     1,
-  //     10,
-  //     "Daily Leaderboard",
-  //     "list-ol"
-  //   );
-  // }
-
   if (data.dailyLeaderboardRank === undefined) {
     $("#result .stats .dailyLeaderboard").addClass("hidden");
   } else {
@@ -1396,6 +1369,7 @@ async function saveResult(
   if (isRetrying) {
     Notifications.add("Result saved", 1, { important: true });
   }
+  DB.saveLocalResult(dataToSave);
 }
 
 export function fail(reason: string): void {

frontend/src/ts/utils/results.ts

@@ -27,15 +27,19 @@ export async function syncNotSignedInLastResult(uid: string): Promise<void> {
   const result = structuredClone(
     notSignedInLastResult
   ) as unknown as SnapshotResult<Mode>;
+
+  const dataToSave: DB.SaveLocalResultData = {
+    xp: response.body.data.xp,
+    streak: response.body.data.streak,
+    result,
+    isPb: response.body.data.isPb,
+  };
+
   result._id = response.body.data.insertedId;
   if (response.body.data.isPb) {
     result.isPb = true;
   }
-  DB.saveLocalResult(result);
-  DB.updateLocalStats(
-    1,
-    result.testDuration + result.incompleteTestSeconds - result.afkDuration
-  );
+  DB.saveLocalResult(dataToSave);
   TestLogic.clearNotSignedInResult();
   Notifications.add(
     `Last test result saved ${response.body.data.isPb ? `(new pb!)` : ""}`,