From c8f2d25364d4dd3816f8d30af31dc4d7fb5d562d Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 13 Mar 2023 14:15:18 +0100
Subject: [PATCH] added custom layoutfluid timer countdown

---
 frontend/src/styles/test.scss                 |  3 ++-
 .../test/funbox/layoutfluid-funbox-timer.ts   | 25 +++++++++++++++++++
 frontend/src/ts/test/test-logic.ts            |  2 ++
 frontend/src/ts/test/test-timer.ts            | 10 +++++---
 frontend/static/html/pages/test.html          |  1 +
 5 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/ts/test/funbox/layoutfluid-funbox-timer.ts

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 5936e82af..8ee9372da 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -1035,7 +1035,8 @@
       );
     }
   }
-  #memoryTimer {
+  #memoryTimer,
+  #layoutfluidTimer {
     background: var(--main-color);
     color: var(--bg-color);
     padding: 1rem;
diff --git a/frontend/src/ts/test/funbox/layoutfluid-funbox-timer.ts b/frontend/src/ts/test/funbox/layoutfluid-funbox-timer.ts
new file mode 100644
index 000000000..7ce9e9d41
--- /dev/null
+++ b/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`
+  );
+}
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 1103eb7bb..022fe32bf 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/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();
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index 6e441b016..320f038b3 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/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);
     }
diff --git a/frontend/static/html/pages/test.html b/frontend/static/html/pages/test.html
index 17bfe952b..b0c95d41a 100644
--- a/frontend/static/html/pages/test.html
+++ b/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>