fix(typing): live elements sometimes being softlocked in the hidden s…

…tate Fixed by adding a state variable which is independent of the dom classes Closes #4613
monkeytypegame · Sep 11, 2023 · 7e9e096 · 7e9e096
1 parent 4a42957
commit 7e9e096
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/frontend/src/ts/test/live-acc.ts b/frontend/src/ts/test/live-acc.ts
@@ -12,11 +12,13 @@ export function update(acc: number): void {
   (document.querySelector("#liveAcc") as Element).innerHTML = number + "%";
 }
 
+let state = false;
+
 export function show(): void {
   if (!Config.showLiveAcc) return;
   if (!TestState.isActive) return;
+  if (state) return;
   if (Config.timerStyle === "mini") {
-    if (!$("#miniTimerAndLiveWpm .acc").hasClass("hidden")) return;
     $("#miniTimerAndLiveWpm .acc")
       .stop(true, false)
       .removeClass("hidden")
@@ -28,7 +30,6 @@ export function show(): void {
         125
       );
   } else {
-    if (!$("#liveAcc").hasClass("hidden")) return;
     $("#liveAcc")
       .stop(true, false)
       .removeClass("hidden")
@@ -40,11 +41,13 @@ export function show(): void {
         125
       );
   }
+  state = true;
 }
 
 export function hide(): void {
   // $("#liveWpm").css("opacity", 0);
   // $("#miniTimerAndLiveWpm .wpm").css("opacity", 0);
+  if (!state) return;
   $("#liveAcc")
     .stop(true, false)
     .animate(
@@ -67,6 +70,7 @@ export function hide(): void {
         $("#miniTimerAndLiveWpm .acc").addClass("hidden");
       }
     );
+  state = false;
 }
 
 ConfigEvent.subscribe((eventKey, eventValue) => {

diff --git a/frontend/src/ts/test/live-burst.ts b/frontend/src/ts/test/live-burst.ts
@@ -12,11 +12,13 @@ export async function update(burst: number): Promise<void> {
     burst.toString();
 }
 
+let state = false;
+
 export function show(): void {
   if (!Config.showLiveBurst) return;
   if (!TestState.isActive) return;
+  if (state) return;
   if (Config.timerStyle === "mini") {
-    if (!$("#miniTimerAndLiveWpm .burst").hasClass("hidden")) return;
     $("#miniTimerAndLiveWpm .burst")
       .stop(true, false)
       .removeClass("hidden")
@@ -28,7 +30,6 @@ export function show(): void {
         125
       );
   } else {
-    if (!$("#liveBurst").hasClass("hidden")) return;
     $("#liveBurst")
       .stop(true, false)
       .removeClass("hidden")
@@ -43,6 +44,7 @@ export function show(): void {
 }
 
 export function hide(): void {
+  if (!state) return;
   $("#liveBurst")
     .stop(true, false)
     .animate(
@@ -65,6 +67,7 @@ export function hide(): void {
         $("#miniTimerAndLiveWpm .burst").addClass("hidden");
       }
     );
+  state = false;
 }
 
 ConfigEvent.subscribe((eventKey, eventValue) => {

diff --git a/frontend/src/ts/test/live-wpm.ts b/frontend/src/ts/test/live-wpm.ts
@@ -20,13 +20,15 @@ export function update(wpm: number, raw: number): void {
   liveWpmElement.innerHTML = number.toString();
 }
 
+let state = false;
+
 export function show(): void {
   if (!Config.showLiveWpm) return;
   if (!TestState.isActive) return;
+  if (state) return;
   if (Config.timerStyle === "mini") {
-    if (!miniLiveWpmElement.classList.contains("hidden")) return;
     $(miniLiveWpmElement)
-      .stop(true, true)
+      .stop(true, false)
       .removeClass("hidden")
       .css("opacity", 0)
       .animate(
@@ -36,9 +38,8 @@ export function show(): void {
         125
       );
   } else {
-    if (!liveWpmElement.classList.contains("hidden")) return;
     $(liveWpmElement)
-      .stop(true, true)
+      .stop(true, false)
       .removeClass("hidden")
       .css("opacity", 0)
       .animate(
@@ -48,11 +49,13 @@ export function show(): void {
         125
       );
   }
+  state = true;
 }
 
 export function hide(): void {
+  if (!state) return;
   $(liveWpmElement)
-    .stop(true, true)
+    .stop(true, false)
     .animate(
       {
         opacity: 0,
@@ -63,7 +66,7 @@ export function hide(): void {
       }
     );
   $(miniLiveWpmElement)
-    .stop(true, true)
+    .stop(true, false)
     .animate(
       {
         opacity: 0,
@@ -73,6 +76,7 @@ export function hide(): void {
         miniLiveWpmElement.classList.add("hidden");
       }
     );
+  state = false;
 }
 
 ConfigEvent.subscribe((eventKey, eventValue) => {