From f3f1ba4d0829ad6d006dfdd19cee6dff74a079b5 Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Wed, 24 Aug 2022 13:56:39 +0200
Subject: [PATCH] finished fixing the animation

---
 frontend/src/styles/test.scss       |  11 ++-
 frontend/src/ts/test/test-config.ts | 129 +++++++++++++++++++++++++++-
 2 files changed, 135 insertions(+), 5 deletions(-)

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 0a922c95c..da27c5432 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -992,7 +992,7 @@
   justify-content: space-around;
   transition: 0.125s;
   .puncAndNum {
-    transition: 0.25s;
+    // transition: 0.25s cubic-bezier(0.37, 0, 0.63, 1);
     overflow: hidden;
     max-width: 13rem;
     opacity: 1;
@@ -1027,6 +1027,15 @@
     gap: 0.5rem;
     grid-auto-flow: column;
   }
+  .time,
+  .wordCount,
+  .customText,
+  .zen,
+  .quoteLength {
+    // width: 100%;
+    justify-content: center;
+    overflow: hidden;
+  }
 }
 
 .pageTest {
diff --git a/frontend/src/ts/test/test-config.ts b/frontend/src/ts/test/test-config.ts
index 410e11344..90c2bd96b 100644
--- a/frontend/src/ts/test/test-config.ts
+++ b/frontend/src/ts/test/test-config.ts
@@ -42,10 +42,10 @@ export function hide(): void {
     );
 }
 
-export function update(
+export async function update(
   previous: MonkeyTypes.Mode,
   current: MonkeyTypes.Mode
-): void {
+): Promise<void> {
   if (previous === current) return;
   $("#testConfig .mode .textButton").removeClass("active");
   $("#testConfig .mode .textButton[mode='" + current + "']").addClass("active");
@@ -78,6 +78,8 @@ export function update(
     zen: "zen",
   };
 
+  const animTime = 250;
+
   const puncAndNumVisible = {
     time: true,
     words: true,
@@ -86,14 +88,52 @@ export function update(
     zen: false,
   };
 
-  // const animTime = 250;
-
   if (puncAndNumVisible[current]) {
     $("#testConfig .puncAndNum").removeClass("scrolled");
   } else {
     $("#testConfig .puncAndNum").addClass("scrolled");
   }
 
+  if (
+    puncAndNumVisible[previous] == false &&
+    puncAndNumVisible[current] == true
+  ) {
+    //show
+
+    $("#testConfig .puncAndNum")
+      .css({
+        opacity: 0,
+        maxWidth: 0,
+      })
+      .animate(
+        {
+          opacity: 1,
+          maxWidth: "13rem",
+        },
+        animTime,
+        "easeInOutSine"
+      );
+  } else if (
+    puncAndNumVisible[previous] == true &&
+    puncAndNumVisible[current] == false
+  ) {
+    //hide
+
+    $("#testConfig .puncAndNum")
+      .css({
+        opacity: 1,
+        maxWidth: "13rem",
+      })
+      .animate(
+        {
+          opacity: 1,
+          maxWidth: "0",
+        },
+        animTime,
+        "easeInOutSine"
+      );
+  }
+
   // const currentWidth = Math.round(
   //   document.querySelector("#testConfig .row")?.getBoundingClientRect().width ??
   //     0
@@ -115,10 +155,91 @@ export function update(
   //   $("#testConfig .rightSpacer").removeClass("hidden");
   // }
 
+  const previousWidth = Math.round(
+    document
+      .querySelector(`#testConfig .${submenu[previous]}`)
+      ?.getBoundingClientRect().width ?? 0
+  );
+
   $(`#testConfig .${submenu[previous]}`).addClass("hidden");
 
   $(`#testConfig .${submenu[current]}`).removeClass("hidden");
 
+  const currentWidth = Math.round(
+    document
+      .querySelector(`#testConfig .${submenu[current]}`)
+      ?.getBoundingClientRect().width ?? 0
+  );
+
+  $(`#testConfig .${submenu[previous]}`).removeClass("hidden");
+
+  $(`#testConfig .${submenu[current]}`).addClass("hidden");
+
+  const widthDifference = currentWidth - previousWidth;
+
+  const widthStep = widthDifference / 2;
+
+  $(`#testConfig .${submenu[previous]}`)
+    .css({
+      opacity: 1,
+      width: previousWidth,
+    })
+    .animate(
+      {
+        width: previousWidth + widthStep,
+        opacity: 0,
+      },
+      animTime / 2,
+      "easeInSine",
+      () => {
+        $(`#testConfig .${submenu[previous]}`)
+          .css({
+            opacity: 1,
+            width: "unset",
+          })
+          .addClass("hidden");
+        $(`#testConfig .${submenu[current]}`)
+          .css({
+            opacity: 0,
+            width: previousWidth + widthStep,
+          })
+          .removeClass("hidden")
+          .animate(
+            {
+              opacity: 1,
+              width: currentWidth,
+            },
+            animTime / 2,
+            "easeOutSine",
+            () => {
+              $(`#testConfig .${submenu[current]}`).css("width", "unset");
+            }
+          );
+      }
+    );
+
+  console.log(previousWidth);
+
+  // $(`#testConfig .${submenu[current]}`)
+  //   .css({
+  //     opacity: 0,
+  //     maxWidth: previousWidth,
+  //   })
+  //   .removeClass("hidden")
+  //   .animate(
+  //     {
+  //       maxWidth: currentWidth,
+  //       opacity: 1,
+  //     },
+  //     250,
+  //     () => {
+  //       $(`#testConfig .${submenu[current]}`).css({
+  //         opacity: 1,
+  //         maxWidth: "unset",
+  //       });
+  //     }
+  //   );
+
   // const newWidth = Math.round(
   //   document.querySelector("#testConfig .row")?.getBoundingClientRect().width ??
   //     0