refactor: clean up test-ui and test-logic (@Miodec) (monkeytypegame#7229)

Move ui code to test ui, remove unused code, remove duplicated code,
merge the two config event listeners, merge a lot of the ui code to make
it easier to grasp.

Author: Miodec

frontend/src/ts/test/funbox/layoutfluid-funbox-timer.ts

@@ -20,6 +20,10 @@ export function hide(): void {
   });
 }
 
+export function instantHide(): void {
+  timerEl.style.opacity = "0";
+}
+
 export function updateTime(sec: number, layout: string): void {
   timerEl.textContent = `${capitalizeFirstLetter(layout)} in: ${sec}s`;
 }

frontend/src/ts/test/live-acc.ts

@@ -7,8 +7,8 @@ import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-fra
 
 const textEl = document.querySelector(
   "#liveStatsTextBottom .liveAcc",
-) as Element;
-const miniEl = document.querySelector("#liveStatsMini .acc") as Element;
+) as HTMLElement;
+const miniEl = document.querySelector("#liveStatsMini .acc") as HTMLElement;
 
 export function update(acc: number): void {
   requestDebouncedAnimationFrame("live-acc.update", () => {
@@ -73,6 +73,17 @@ export function hide(): void {
   });
 }
 
+export function instantHide(): void {
+  if (!state) return;
+
+  textEl.classList.add("hidden");
+  textEl.style.opacity = "0";
+  miniEl.classList.add("hidden");
+  miniEl.style.opacity = "0";
+
+  state = false;
+}
+
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "liveAccStyle") newValue === "off" ? hide() : show();
 });

frontend/src/ts/test/live-burst.ts

@@ -8,8 +8,8 @@ import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-fra
 
 const textEl = document.querySelector(
   "#liveStatsTextBottom .liveBurst",
-) as Element;
-const miniEl = document.querySelector("#liveStatsMini .burst") as Element;
+) as HTMLElement;
+const miniEl = document.querySelector("#liveStatsMini .burst") as HTMLElement;
 
 export function reset(): void {
   requestDebouncedAnimationFrame("live-burst.reset", () => {
@@ -71,6 +71,17 @@ export function hide(): void {
   });
 }
 
+export function instantHide(): void {
+  if (!state) return;
+
+  textEl.classList.add("hidden");
+  textEl.style.opacity = "0";
+  miniEl.classList.add("hidden");
+  miniEl.style.opacity = "0";
+
+  state = false;
+}
+
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "liveBurstStyle") newValue === "off" ? hide() : show();
 });

frontend/src/ts/test/live-speed.ts

@@ -8,8 +8,10 @@ import { animate } from "animejs";
 
 const textElement = document.querySelector(
   "#liveStatsTextBottom .liveSpeed",
-) as Element;
-const miniElement = document.querySelector("#liveStatsMini .speed") as Element;
+) as HTMLElement;
+const miniElement = document.querySelector(
+  "#liveStatsMini .speed",
+) as HTMLElement;
 
 export function reset(): void {
   requestDebouncedAnimationFrame("live-speed.reset", () => {
@@ -75,6 +77,15 @@ export function hide(): void {
   });
 }
 
+export function instantHide(): void {
+  if (!state) return;
+  miniElement.classList.add("hidden");
+  miniElement.style.opacity = "0";
+  textElement.classList.add("hidden");
+  textElement.style.opacity = "0";
+  state = false;
+}
+
 ConfigEvent.subscribe(({ key, newValue }) => {
   if (key === "liveSpeedStyle") newValue === "off" ? hide() : show();
 });

frontend/src/ts/test/monkey.ts

@@ -162,3 +162,10 @@ export function hide(): void {
     },
   });
 }
+
+export function instantHide(): void {
+  monkeyEl.classList.add("hidden");
+  monkeyEl.style.opacity = "0";
+  monkeyEl.style.animationDuration = "0s";
+  monkeyFastEl.style.opacity = "0";
+}