added custom layoutfluid timer countdown

frontend/src/styles/test.scss

@@ -1035,7 +1035,8 @@
       );
     }
   }
-  #memoryTimer {
+  #memoryTimer,
+  #layoutfluidTimer {
     background: var(--main-color);
     color: var(--bg-color);
     padding: 1rem;

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

@@ -0,0 +1,25 @@
+import { capitalizeFirstLetter } from "../../utils/misc";
+
+export function show(): void {
+  $("#typingTest #layoutfluidTimer").stop(true, true).animate(
+    {
+      opacity: 1,
+    },
+    125
+  );
+}
+
+export function hide(): void {
+  $("#typingTest #layoutfluidTimer").stop(true, true).animate(
+    {
+      opacity: 0,
+    },
+    125
+  );
+}
+
+export function update(sec: number, layout: string): void {
+  $("#typingTest #layoutfluidTimer").text(
+    `${capitalizeFirstLetter(layout)} in: ${sec}s`
+  );
+}

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

@@ -56,6 +56,7 @@ import * as ConnectionState from "../states/connection";
 import * as FunboxList from "./funbox/funbox-list";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import * as KeymapEvent from "../observables/keymap-event";
+import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer";
 
 let failReason = "";
 const koInputVisual = document.getElementById("koInputVisual") as HTMLElement;
@@ -490,6 +491,7 @@ export function restart(options = {} as RestartOptions): void {
   PaceCaret.reset();
   Monkey.hide();
   TestInput.input.setKoreanStatus(false);
+  LayoutfluidFunboxTimer.hide();
 
   $("#showWordHistoryButton").removeClass("loaded");
   $("#restartTestButton").blur();

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

@@ -16,6 +16,7 @@ import * as SlowTimer from "../states/slow-timer";
 import * as TestState from "./test-state";
 import * as Time from "../states/time";
 import * as TimerEvent from "../observables/timer-event";
+import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer";
 
 let slowTimerCount = 0;
 let timer: NodeJS.Timeout | null = null;
@@ -101,15 +102,16 @@ function layoutfluid(): void {
     }
 
     if (flooredSwitchTimes.includes(time + 3)) {
-      Notifications.add("3", 0, 1);
+      LayoutfluidFunboxTimer.show();
+      LayoutfluidFunboxTimer.update(3, layouts[index + 1]);
     } else if (flooredSwitchTimes.includes(time + 2)) {
-      Notifications.add("2", 0, 1);
+      LayoutfluidFunboxTimer.update(2, layouts[index + 1]);
     } else if (flooredSwitchTimes.includes(time + 1)) {
-      Notifications.add("1", 0, 1);
+      LayoutfluidFunboxTimer.update(1, layouts[index + 1]);
     }
 
     if (Config.layout !== layout && layout !== undefined) {
-      Notifications.add(`--- !!! ${layout} !!! ---`, 0);
+      LayoutfluidFunboxTimer.hide();
       UpdateConfig.setLayout(layout, true);
       UpdateConfig.setKeymapLayout(layout, true);
     }

frontend/static/html/pages/test.html

@@ -99,6 +99,7 @@
       Caps Lock
     </div>
     <div id="memoryTimer">Time left to memorise all words: 0s</div>
+    <div id="layoutfluidTimer">Time left to memorise all words: 0s</div>
     <div id="testModesNotice"></div>
     <div id="timerNumber" class="timerMain">
       <div>60</div>