From 575cbcef60dfbde6c5901d0ba5126ab5454cdd7d Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 17 Oct 2022 15:21:35 +0200
Subject: [PATCH] fixed a bug where smooth line transition would cause quick
 consecutive line jumps to not work correctly closes #3662

---
 .../src/ts/controllers/input-controller.ts    |  2 +-
 frontend/src/ts/test/test-ui.ts               | 77 ++++++++++++-------
 2 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts
index 7831334cc..04b2a32d4 100644
--- a/frontend/src/ts/controllers/input-controller.ts
+++ b/frontend/src/ts/controllers/input-controller.ts
@@ -296,7 +296,7 @@ function handleSpace(): void {
       nextTop = 0;
     }
 
-    if (nextTop > currentTop && !TestUI.lineTransition) {
+    if (nextTop > currentTop) {
       TestUI.lineJump(currentTop);
     }
   } //end of line wrap
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 422003562..74c87a2d2 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -603,6 +603,8 @@ export function scrollTape(): void {
   }
 }
 
+let currentLinesAnimating = 0;
+
 export function lineJump(currentTop: number): void {
   //last word of the line
   if (
@@ -628,29 +630,41 @@ export function lineJump(currentTop: number): void {
     );
     if (Config.smoothLineScroll && toHide.length > 0) {
       lineTransition = true;
-      $("#words").prepend(
-        `<div class="smoothScroller" style="position: fixed;height:${wordHeight}px;width:100%"></div>`
-      );
-      $("#words .smoothScroller").animate(
-        {
-          height: 0,
-        },
-        SlowTimer.get() ? 0 : 125,
-        () => {
-          $("#words .smoothScroller").remove();
-        }
-      );
-      $("#paceCaret").animate(
-        {
-          top:
-            (<HTMLElement>document.querySelector("#paceCaret"))?.offsetTop -
-            wordHeight,
-        },
-        SlowTimer.get() ? 0 : 125
-      );
+      const smoothScroller = $("#words .smoothScroller");
+      if (smoothScroller.length === 0) {
+        $("#words").prepend(
+          `<div class="smoothScroller" style="position: fixed;height:${wordHeight}px;width:100%"></div>`
+        );
+      } else {
+        smoothScroller.css(
+          "height",
+          `${(smoothScroller.outerHeight(true) ?? 0) + wordHeight}px`
+        );
+      }
+      $("#words .smoothScroller")
+        .stop(true, false)
+        .animate(
+          {
+            height: 0,
+          },
+          SlowTimer.get() ? 0 : 125,
+          () => {
+            $("#words .smoothScroller").remove();
+          }
+        );
+      $("#paceCaret")
+        .stop(true, false)
+        .animate(
+          {
+            top:
+              (<HTMLElement>document.querySelector("#paceCaret"))?.offsetTop -
+              wordHeight,
+          },
+          SlowTimer.get() ? 0 : 125
+        );
 
       const newCss: { [key: string]: string } = {
-        marginTop: `-${wordHeight}px`,
+        marginTop: `-${wordHeight * (currentLinesAnimating + 1)}px`,
       };
 
       if (Config.tapeMode !== "off") {
@@ -660,15 +674,20 @@ export function lineJump(currentTop: number): void {
         const newMargin = wordsWrapperWidth / 2;
         newCss["marginLeft"] = `${newMargin}px`;
       }
-      $("#words").animate(newCss, SlowTimer.get() ? 0 : 125, () => {
-        activeWordTop = (<HTMLElement>document.querySelector("#words .active"))
-          .offsetTop;
+      currentLinesAnimating++;
+      $("#words")
+        .stop(true, false)
+        .animate(newCss, SlowTimer.get() ? 0 : 125, () => {
+          currentLinesAnimating = 0;
+          activeWordTop = (<HTMLElement>(
+            document.querySelector("#words .active")
+          )).offsetTop;
 
-        currentWordElementIndex -= toHide.length;
-        lineTransition = false;
-        toHide.forEach((el) => el.remove());
-        $("#words").css("marginTop", "0");
-      });
+          currentWordElementIndex -= toHide.length;
+          lineTransition = false;
+          toHide.forEach((el) => el.remove());
+          $("#words").css("marginTop", "0");
+        });
     } else {
       toHide.forEach((el) => el.remove());
       currentWordElementIndex -= toHide.length;