From 6abac4a5623f45bb7f83af4d770c7f1a970af3c4 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Wed, 14 Jan 2026 19:50:52 +0200
Subject: [PATCH 01/11] Refactor timer-progress.ts

---
 frontend/src/ts/test/timer-progress.ts | 148 +++++++++++--------------
 1 file changed, 66 insertions(+), 82 deletions(-)

diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index a1fe882caa08..9a6ffecd2f67 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -19,49 +19,29 @@ const textEl = document.querySelector(
 ) as HTMLElement;
 const miniEl = document.querySelector("#liveStatsMini .time") as HTMLElement;
 
+function showElement(el: HTMLElement): void {
+  animate(el, {
+    opacity: [0, 1],
+    duration: applyReducedMotion(125),
+    onBegin: () => {
+      el.classList.remove("hidden");
+    },
+  });
+}
+
 export function show(): void {
   if (!TestState.isActive) return;
   requestDebouncedAnimationFrame("timer-progress.show", () => {
     if (Config.mode !== "zen" && Config.timerStyle === "bar") {
-      animate(barOpacityEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          barOpacityEl.classList.remove("hidden");
-        },
-      });
+      showElement(barOpacityEl);
     } else if (Config.timerStyle === "text") {
-      animate(textEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          textEl.classList.remove("hidden");
-        },
-      });
+      showElement(textEl);
     } else if (Config.timerStyle === "flash_mini") {
-      animate(miniEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          miniEl.classList.remove("hidden");
-        },
-      });
+      showElement(miniEl);
     } else if (Config.timerStyle === "flash_text") {
-      animate(textEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          textEl.classList.remove("hidden");
-        },
-      });
+      showElement(textEl);
     } else if (Config.mode === "zen" || Config.timerStyle === "mini") {
-      animate(miniEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          miniEl.classList.remove("hidden");
-        },
-      });
+      showElement(miniEl);
     }
   });
 }
@@ -85,28 +65,34 @@ export function reset(): void {
   });
 }
 
-export function hide(): void {
-  requestDebouncedAnimationFrame("timer-progress.hide", () => {
-    animate(barOpacityEl, {
-      opacity: 0,
-      duration: applyReducedMotion(125),
-    });
+function hideElement(el: HTMLElement, hideOnComplete: boolean): void {
+  type AnimateOptions = {
+    opacity: number;
+    duration: number;
+    onComplete?: () => void;
+  };
+
+  const args: AnimateOptions = {
+    opacity: 0,
+    duration: applyReducedMotion(125),
+  };
+
+  if (hideOnComplete) {
+    args.onComplete = () => {
+      el.classList.add("hidden");
+    };
+  }
 
-    animate(miniEl, {
-      opacity: 0,
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        miniEl.classList.add("hidden");
-      },
-    });
+  animate(el, {
+    ...args,
+  });
+}
 
-    animate(textEl, {
-      opacity: 0,
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        textEl.classList.add("hidden");
-      },
-    });
+export function hide(): void {
+  requestDebouncedAnimationFrame("timer-progress.hide", () => {
+    hideElement(barOpacityEl, false);
+    hideElement(miniEl, true);
+    hideElement(textEl, true);
   });
 }
 
@@ -131,6 +117,24 @@ function getCurrentCount(): number {
   }
 }
 
+function updateTimerInputLength(el: HTMLElement, wrapInDiv: boolean): void {
+  let historyLength = `${TestInput.input.getHistory().length}`;
+
+  if (wrapInDiv) {
+    historyLength = `<div>${historyLength}</div>`;
+  }
+
+  el.innerHTML = historyLength;
+}
+
+function updateTimer(el: HTMLElement, outof: number): void {
+  if (outof === 0) {
+    updateTimerInputLength(el, false);
+  } else {
+    el.innerHTML = `${getCurrentCount()}/${outof}`;
+  }
+}
+
 export function update(): void {
   requestDebouncedAnimationFrame("timer-progress.update", () => {
     const time = Time.get();
@@ -216,39 +220,19 @@ export function update(): void {
           duration: 250,
         });
       } else if (Config.timerStyle === "text") {
-        if (outof === 0) {
-          textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-        } else {
-          textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
-        }
+        updateTimer(textEl, outof);
       } else if (Config.timerStyle === "flash_mini") {
-        if (outof === 0) {
-          miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-        } else {
-          miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
-        }
+        updateTimer(miniEl, outof);
       } else if (Config.timerStyle === "flash_text") {
-        if (outof === 0) {
-          textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-        } else {
-          textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
-        }
+        updateTimer(textEl, outof);
       } else if (Config.timerStyle === "mini") {
-        if (outof === 0) {
-          miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-        } else {
-          miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
-        }
+        updateTimer(miniEl, outof);
       }
     } else if (Config.mode === "zen") {
-      if (Config.timerStyle === "text") {
-        textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-      } else if (Config.timerStyle === "flash_mini") {
-        miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-      } else if (Config.timerStyle === "flash_text") {
-        textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
+      if (Config.timerStyle === "text" || Config.timerStyle === "flash_text") {
+        updateTimerInputLength(textEl, true);
       } else {
-        miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
+        updateTimerInputLength(miniEl, false);
       }
     }
   });

From 374dfa822d022d83b04edcacc0d89e43eec91cf0 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Wed, 14 Jan 2026 19:56:37 +0200
Subject: [PATCH 02/11] Concat

---
 frontend/src/ts/test/timer-progress.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 9a6ffecd2f67..d8857aed2ea3 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -121,7 +121,7 @@ function updateTimerInputLength(el: HTMLElement, wrapInDiv: boolean): void {
   let historyLength = `${TestInput.input.getHistory().length}`;
 
   if (wrapInDiv) {
-    historyLength = `<div>${historyLength}</div>`;
+    historyLength = "<div>" + historyLength + "</div>";
   }
 
   el.innerHTML = historyLength;

From fc0f353667202187daf053bfcc8dca014b765e24 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Thu, 15 Jan 2026 15:11:22 +0200
Subject: [PATCH 03/11] Don't spread

---
 frontend/src/ts/test/timer-progress.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index d8857aed2ea3..9ee14307340d 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -84,7 +84,7 @@ function hideElement(el: HTMLElement, hideOnComplete: boolean): void {
   }
 
   animate(el, {
-    ...args,
+    args,
   });
 }
 

From 7efd3e293dd5b2a6a658f58348145d132708622a Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Thu, 15 Jan 2026 15:13:52 +0200
Subject: [PATCH 04/11] Add wrapInDiv option to updateTimer

---
 frontend/src/ts/test/timer-progress.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 9ee14307340d..45875658b395 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -127,9 +127,9 @@ function updateTimerInputLength(el: HTMLElement, wrapInDiv: boolean): void {
   el.innerHTML = historyLength;
 }
 
-function updateTimer(el: HTMLElement, outof: number): void {
+function updateTimer(el: HTMLElement, outof: number, wrapInDiv: boolean): void {
   if (outof === 0) {
-    updateTimerInputLength(el, false);
+    updateTimerInputLength(el, wrapInDiv);
   } else {
     el.innerHTML = `${getCurrentCount()}/${outof}`;
   }
@@ -220,13 +220,13 @@ export function update(): void {
           duration: 250,
         });
       } else if (Config.timerStyle === "text") {
-        updateTimer(textEl, outof);
+        updateTimer(textEl, outof, true);
       } else if (Config.timerStyle === "flash_mini") {
-        updateTimer(miniEl, outof);
+        updateTimer(miniEl, outof, false);
       } else if (Config.timerStyle === "flash_text") {
-        updateTimer(textEl, outof);
+        updateTimer(textEl, outof, true);
       } else if (Config.timerStyle === "mini") {
-        updateTimer(miniEl, outof);
+        updateTimer(miniEl, outof, false);
       }
     } else if (Config.mode === "zen") {
       if (Config.timerStyle === "text" || Config.timerStyle === "flash_text") {

From a45933e23c5da9a07d9bf96779e1b9b97d61e94c Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Thu, 15 Jan 2026 15:15:02 +0200
Subject: [PATCH 05/11] Remove two else if

---
 frontend/src/ts/test/timer-progress.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 45875658b395..e4eb5ec3613a 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -219,13 +219,15 @@ export function update(): void {
           width: percent + "vw",
           duration: 250,
         });
-      } else if (Config.timerStyle === "text") {
-        updateTimer(textEl, outof, true);
-      } else if (Config.timerStyle === "flash_mini") {
-        updateTimer(miniEl, outof, false);
-      } else if (Config.timerStyle === "flash_text") {
+      } else if (
+        Config.timerStyle === "text" ||
+        Config.timerStyle === "flash_text"
+      ) {
         updateTimer(textEl, outof, true);
-      } else if (Config.timerStyle === "mini") {
+      } else if (
+        Config.timerStyle === "mini" ||
+        Config.timerStyle === "flash_mini"
+      ) {
         updateTimer(miniEl, outof, false);
       }
     } else if (Config.mode === "zen") {

From 6e5766eadc4f7fecaa602737424b6d8b358fa4d8 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Thu, 15 Jan 2026 15:18:08 +0200
Subject: [PATCH 06/11] Don't wrap object in object

---
 frontend/src/ts/test/timer-progress.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index e4eb5ec3613a..c7398858f3af 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -83,9 +83,7 @@ function hideElement(el: HTMLElement, hideOnComplete: boolean): void {
     };
   }
 
-  animate(el, {
-    args,
-  });
+  animate(el, args);
 }
 
 export function hide(): void {

From 2fe47b61dcfc6347a330b26881fac873595a5d35 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Thu, 15 Jan 2026 15:32:27 +0200
Subject: [PATCH 07/11] More robust

---
 frontend/src/ts/test/timer-progress.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index c7398858f3af..e22729e45254 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -231,7 +231,10 @@ export function update(): void {
     } else if (Config.mode === "zen") {
       if (Config.timerStyle === "text" || Config.timerStyle === "flash_text") {
         updateTimerInputLength(textEl, true);
-      } else {
+      } else if (
+        Config.timerStyle === "mini" ||
+        Config.timerStyle === "flash_mini"
+      ) {
         updateTimerInputLength(miniEl, false);
       }
     }

From a611cfcd00edd982e3849b8f0324b18aeb2a7f03 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Thu, 15 Jan 2026 16:19:59 +0200
Subject: [PATCH 08/11] Rename

---
 frontend/src/ts/test/timer-progress.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index e22729e45254..78819fd939d1 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -115,7 +115,7 @@ function getCurrentCount(): number {
   }
 }
 
-function updateTimerInputLength(el: HTMLElement, wrapInDiv: boolean): void {
+function setTimerHtmlToInputLength(el: HTMLElement, wrapInDiv: boolean): void {
   let historyLength = `${TestInput.input.getHistory().length}`;
 
   if (wrapInDiv) {
@@ -127,7 +127,7 @@ function updateTimerInputLength(el: HTMLElement, wrapInDiv: boolean): void {
 
 function updateTimer(el: HTMLElement, outof: number, wrapInDiv: boolean): void {
   if (outof === 0) {
-    updateTimerInputLength(el, wrapInDiv);
+    setTimerHtmlToInputLength(el, wrapInDiv);
   } else {
     el.innerHTML = `${getCurrentCount()}/${outof}`;
   }
@@ -230,12 +230,12 @@ export function update(): void {
       }
     } else if (Config.mode === "zen") {
       if (Config.timerStyle === "text" || Config.timerStyle === "flash_text") {
-        updateTimerInputLength(textEl, true);
+        setTimerHtmlToInputLength(textEl, true);
       } else if (
         Config.timerStyle === "mini" ||
         Config.timerStyle === "flash_mini"
       ) {
-        updateTimerInputLength(miniEl, false);
+        setTimerHtmlToInputLength(miniEl, false);
       }
     }
   });

From c6b0a3cdd3df10dc3e35ea2c8a900160a888cf10 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Thu, 15 Jan 2026 16:30:29 +0200
Subject: [PATCH 09/11] Remove type definition

---
 frontend/src/ts/test/timer-progress.ts | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 78819fd939d1..7c304ffef0a8 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -66,24 +66,22 @@ export function reset(): void {
 }
 
 function hideElement(el: HTMLElement, hideOnComplete: boolean): void {
-  type AnimateOptions = {
-    opacity: number;
-    duration: number;
-    onComplete?: () => void;
-  };
-
-  const args: AnimateOptions = {
+  let args = {
     opacity: 0,
     duration: applyReducedMotion(125),
   };
 
-  if (hideOnComplete) {
-    args.onComplete = () => {
-      el.classList.add("hidden");
-    };
-  }
-
-  animate(el, args);
+  animate(
+    el,
+    hideOnComplete
+      ? {
+          ...args,
+          onComplete: () => {
+            el.classList.add("hidden");
+          },
+        }
+      : args,
+  );
 }
 
 export function hide(): void {

From 1a51e93576960be20ed3bc95f500b9ec249e6b72 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Thu, 15 Jan 2026 16:35:10 +0200
Subject: [PATCH 10/11] Use const

---
 frontend/src/ts/test/timer-progress.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 7c304ffef0a8..9215306b340e 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -66,7 +66,7 @@ export function reset(): void {
 }
 
 function hideElement(el: HTMLElement, hideOnComplete: boolean): void {
-  let args = {
+  const args = {
     opacity: 0,
     duration: applyReducedMotion(125),
   };

From a86ba26f8c81ce9246d6df863f9f0201ac7a2b72 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Thu, 15 Jan 2026 17:23:20 +0200
Subject: [PATCH 11/11] Template

---
 frontend/src/ts/test/timer-progress.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 9215306b340e..eb5a4db0bbd7 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -117,7 +117,7 @@ function setTimerHtmlToInputLength(el: HTMLElement, wrapInDiv: boolean): void {
   let historyLength = `${TestInput.input.getHistory().length}`;
 
   if (wrapInDiv) {
-    historyLength = "<div>" + historyLength + "</div>";
+    historyLength = `<div>${historyLength}</div>`;
   }
 
   el.innerHTML = historyLength;