Merge branch 'master' into newads

frontend/src/styles/core.scss

@@ -48,6 +48,7 @@
 html {
   @extend .ffscroll;
   overflow-y: scroll;
+  scroll-behavior: smooth;
 }
 
 a {

frontend/src/styles/test.scss

@@ -400,14 +400,10 @@
   outline: none;
   display: block;
   resize: none;
-  position: fixed;
+  position: absolute;
   z-index: -1;
   cursor: default;
   pointer-events: none;
-  margin-left: 1rem;
-  // left: 50%;
-  // top: 50%;
-  // transform: translate(-50%, -50%);
 }
 
 #capsWarning {

frontend/src/ts/commandline/lists/font-size.ts

@@ -1,5 +1,4 @@
 import Config, * as UpdateConfig from "../../config";
-import * as TestUI from "../../test/test-ui";
 
 const commands: MonkeyTypes.Command[] = [
   {
@@ -13,9 +12,6 @@ const commands: MonkeyTypes.Command[] = [
     exec: (input): void => {
       if (!input) return;
       UpdateConfig.setFontSize(parseFloat(input));
-      setTimeout(() => {
-        TestUI.updateWordsHeight();
-      }, 0); //honestly no clue why it i need to wait for the next event loop to do this
     },
   },
 ];

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

@@ -501,9 +501,9 @@ export function restart(options = {} as RestartOptions): void {
   $("#restartTestButton").blur();
   MemoryFunboxTimer.reset();
   QuoteRatePopup.clearQuoteStats();
-  if (ActivePage.get() == "test" && window.scrollY > 0) {
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  }
+  // if (ActivePage.get() == "test" && window.scrollY > 0) {
+  // window.scrollTo({ top: 0, behavior: "smooth" });
+  // }
   $("#wordsInput").val(" ");
 
   TestUI.reset();

frontend/src/ts/test/test-ui.ts

@@ -49,6 +49,7 @@ ConfigEvent.subscribe((eventKey, eventValue) => {
   ) {
     debouncedZipfCheck();
   }
+  if (eventKey === "fontSize") updateWordsHeight(true);
 
   if (eventValue === undefined || typeof eventValue !== "boolean") return;
   if (eventKey === "flipTestColors") flipColors(eventValue);
@@ -131,6 +132,7 @@ export function updateActiveElement(backspace?: boolean): void {
       });
     }
   } catch (e) {}
+  updateWordsInputPosition();
 }
 
 function getWordHTML(word: string): string {
@@ -187,10 +189,36 @@ export function showWords(): void {
 
   $("#words").html(wordsHTML);
 
-  updateWordsHeight();
+  updateWordsHeight(true);
+  updateWordsInputPosition(true);
 }
 
-export function updateWordsHeight(): void {
+const posUpdateLangList = ["japanese", "chinese", "korean"];
+function updateWordsInputPosition(force = false): void {
+  const shouldUpdate = posUpdateLangList.some((l) =>
+    Config.language.startsWith(l)
+  );
+
+  if (!force && !shouldUpdate) return;
+
+  const el = document.querySelector("#wordsInput") as HTMLElement;
+  const activeWord = document.querySelector(
+    "#words .active"
+  ) as HTMLElement | null;
+
+  if (!shouldUpdate || !activeWord) {
+    const wordsWrapper = document.querySelector("#wordsWrapper") as HTMLElement;
+    el.style.top = wordsWrapper.offsetHeight / 2 + "px";
+    el.style.left = "0px";
+    return;
+  }
+
+  el.style.top = activeWord.offsetTop + "px";
+  el.style.left = activeWord.offsetLeft + "px";
+}
+
+function updateWordsHeight(force = false): void {
+  if (!force && Config.mode !== "custom") return;
   $("#wordsWrapper").removeClass("hidden");
   const wordHeight = <number>(
     $(<Element>document.querySelector(".word")).outerHeight(true)
@@ -218,29 +246,53 @@ export function updateWordsHeight(): void {
     }
     $(".outOfFocusWarning").css("line-height", nh + "px");
   } else {
+    let finalWordsHeight: number, finalWrapperHeight: number;
+
     if (Config.tapeMode !== "off") {
       const wrapperHeight = wordHeight;
 
-      $("#words")
-        .css("height", wordHeight * 2 + "px")
-        .css("overflow", "hidden")
-        .css("width", "200%")
-        .css("margin-left", "50%");
-      $("#wordsWrapper")
-        .css("height", wrapperHeight + "px")
-        .css("overflow", "hidden");
-      $(".outOfFocusWarning").css("line-height", wrapperHeight + "px");
+      finalWordsHeight = wordHeight * 2;
+      finalWrapperHeight = wrapperHeight;
     } else {
-      $("#words")
-        .css("height", wordHeight * 4 + "px")
-        .css("overflow", "hidden")
-        .css("width", "100%")
-        .css("margin-left", "unset");
-      $("#wordsWrapper")
-        .css("height", wordHeight * 3 + "px")
-        .css("overflow", "hidden");
-      $(".outOfFocusWarning").css("line-height", wordHeight * 3 + "px");
+      let lines = 0;
+      let lastHeight = 0;
+      let wordIndex = 0;
+      const words = document.querySelectorAll("#words .word");
+      let wrapperHeight = 0;
+
+      const wordComputedStyle = window.getComputedStyle(words[0]);
+      const wordTopMargin = parseInt(wordComputedStyle.marginTop);
+      const wordBottomMargin = parseInt(wordComputedStyle.marginBottom);
+
+      while (lines < 3) {
+        const word = words[wordIndex] as HTMLElement | null;
+        if (!word) break;
+        const height = word.offsetTop;
+        if (height > lastHeight) {
+          lines++;
+          wrapperHeight += word.offsetHeight + wordTopMargin + wordBottomMargin;
+          lastHeight = height;
+        }
+        wordIndex++;
+      }
+
+      if (lines < 3) wrapperHeight = wrapperHeight * (3 / lines);
+
+      const wordsHeight = (wrapperHeight / 3) * 4;
+
+      finalWordsHeight = wordsHeight;
+      finalWrapperHeight = wrapperHeight;
     }
+
+    $("#words")
+      .css("height", finalWordsHeight + "px")
+      .css("overflow", "hidden")
+      .css("width", "100%")
+      .css("margin-left", "unset");
+    $("#wordsWrapper")
+      .css("height", finalWrapperHeight + "px")
+      .css("overflow", "hidden");
+    $(".outOfFocusWarning").css("line-height", finalWrapperHeight + "px");
   }
 
   if (Config.mode === "zen") {
@@ -711,6 +763,8 @@ export function lineJump(currentTop: number): void {
     }
   }
   currentTestLine++;
+  updateWordsInputPosition();
+  updateWordsHeight();
 }
 
 export function arrangeCharactersRightToLeft(): void {

frontend/static/html/pages/test.html

@@ -100,19 +100,6 @@
     </div>
     <div id="memoryTimer">Time left to memorise all words: 0s</div>
     <div id="testModesNotice"></div>
-    <input
-      id="wordsInput"
-      class=""
-      tabindex="0"
-      type="text"
-      autocomplete="off"
-      autocapitalize="off"
-      autocorrect="off"
-      data-gramm="false"
-      data-gramm_editor="false"
-      data-enable-grammarly="false"
-      list="autocompleteOff"
-    />
     <div id="timerNumber" class="timerMain">
       <div>60</div>
     </div>
@@ -127,6 +114,19 @@
       Click here or start typing to focus
     </div>
     <div id="wordsWrapper" translate="no">
+      <input
+        id="wordsInput"
+        class=""
+        tabindex="0"
+        type="text"
+        autocomplete="off"
+        autocapitalize="off"
+        autocorrect="off"
+        data-gramm="false"
+        data-gramm_editor="false"
+        data-enable-grammarly="false"
+        list="autocompleteOff"
+      />
       <div id="paceCaret" class="default hidden"></div>
       <div id="caret" class="default"></div>
       <div id="words"></div>

frontend/static/quotes/german.json

@@ -3246,6 +3246,66 @@
       "source": "[5/5] 20 Affirmationen zur Selbstheilung",
       "length": 1255,
       "id": 548
+    },
+    {
+      "text":"Durch das Gedränge der Menschenmenge bahnen wir uns den altbekannten Weg. Entlang der Gassen, zu den Rheinterrassen, über die Brücken, bis hin zu der Musik. Wo alles laut ist, wo alle drauf sind, um durchzudrehen. Wo die anderen warten, um mit uns zu starten und abzugehen.",
+      "source":"Die Toten Hosen - Tage wie diese",
+      "length":273,
+      "id":549
+    },
+    {
+      "text":"Das Internet ist für uns alle Neuland und es ermöglicht auch Feinden und Gegnern unserer demokratischen Grundordnung natürlich, mit neuen Mitteln und neuen Herangehensweisen unsere Art zu leben in Gefahr zu bringen. Deshalb müssen wir auch darüber sprechen, welche Regeln gelten, wie die Dinge eingeschränkt werden müssen, wo es auch Ausnahmen geben muss, wo es Transparenz geben muss.",
+      "source":"Angela Merkel",
+      "length":385,
+      "id":550
+    },
+    {
+      "text":"Steige aus dem Bett, dreh den Swag auf, schaue kurz in den Spiegel, sag \"What up?\"",
+      "source":"Money Boy - Dreh den Swag auf",
+      "length":82,
+      "id":551
+    },
+    {
+      "text":"Sieh dir diese kleine Karte an. So viel bedeutet sie. Die Vorderseite ist schlicht weiß, dezent, das Firmenlogo in Silber. Die Rückseite enthält alle wichtigen Informationen: Name, Adresse, Telefonnummern, E-Mail-Adresse. Die Schriftart ist etwas kühn, aber nicht aufdringlich. Ein Hauch von Vanille.",
+      "source":"American Psycho",
+      "length":300,
+      "id":552
+    },
+    {
+      "text":"Weißt du, wenn wir erst mal wieder zu Hause sind, dann machen wir was Großes. Wir beide. Wir beide zusammen, ja?",
+      "source":"Im Westen nichts Neues (2022)",
+      "length":112,
+      "id":553
+    },
+    {
+      "text":"Ich stehe von Ihnen in der Hoffnung, dass Sie unsere Anwesenheit zum Anlass nehmen, alle Feindseligkeiten auszusetzen. Im Namen der Menschlichkeit bitte ich Sie, für die Dauer der Verhandlungen einer sofortigen Waffenruhe zuzustimmen, um unseren Völkern unnötige Opfer zu ersparen. Matthias Erzberger, Leiter der deutschen Delegation.",
+      "source":"Im Westen nichts Neues (2022)",
+      "length":334,
+      "id":554
+    },
+    {
+      "text":"Was sollen wir machen? Zusammen Schuhsohlen vernageln? Ich kann nicht mal 'n Brief lesen von meiner Frau. Du gehst studieren, Paul. Sonst erschieße ich dich gleich hier. Meine Hose rutscht. Die Hose ist lose.",
+      "source":"Im Westen nichts Neues (2022)",
+      "length":208,
+      "id":555
+    },
+    {
+      "text":"Isst Olaf Scholz gerne Döner? Klar. Mir schmecken die jedenfalls schon sehr lange und ich esse gerne Döner.",
+      "source":"Olaf Scholz",
+      "length":107,
+      "id":556
+    },
+    {
+      "text":"Herr Scholz, wann Bubatz legal? - Wir haben ja beschlossen, dass wir die Cannabis-Legalisierung vornehmen wollen, und das wird umgesetzt. Da ist jetzt die Vorbereitung im Gange, das kommt in dieser Legislaturperiode, das genaue Datum haben wir noch nicht festgelegt.",
+      "source":"Tina Hassel, Olaf Scholz",
+      "length":266,
+      "id":557
+    },
+    {
+        "text":"Deutschland ist ein starkes Land, und das Motiv, in dem wir an diese Dinge herangehen, muss sein: \"Wir haben so vieles geschafft, wir schaffen das.\"", 
+        "source":"Angela Merkel",
+        "length":148,
+        "id":558
     }
   ]
 }