From 98de529b9447bfbfe5cbf65007dbd7bcd6667e91 Mon Sep 17 00:00:00 2001 From: hanabo-mk <124532165+hanabo-mk@users.noreply.github.com> Date: Mon, 6 Mar 2023 18:52:03 +0100 Subject: [PATCH 01/10] Added new German quotes (#4048) hanabo-mk * Added new quotes. * Fixed lengths and IDs * Fixed lengths AGAIN * Fixed lengths one more time --- frontend/static/quotes/german.json | 60 ++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/frontend/static/quotes/german.json b/frontend/static/quotes/german.json index 933bf0ab4..d2ed776cd 100644 --- a/frontend/static/quotes/german.json +++ b/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 } ] } From 31b1474a4783ec626eb417398a9d5d02fadd1e14 Mon Sep 17 00:00:00 2001 From: Miodec Date: Tue, 7 Mar 2023 14:57:37 +0100 Subject: [PATCH 02/10] moved words input inside words wrapper --- frontend/static/html/pages/test.html | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/frontend/static/html/pages/test.html b/frontend/static/html/pages/test.html index b3a2e33a1..349b0807f 100644 --- a/frontend/static/html/pages/test.html +++ b/frontend/static/html/pages/test.html @@ -100,19 +100,6 @@
Time left to memorise all words: 0s
-
60
@@ -127,6 +114,19 @@ Click here or start typing to focus
+
From d5165f137c2cb1b3ead53b02ff8a615a74cce06f Mon Sep 17 00:00:00 2001 From: Miodec Date: Tue, 7 Mar 2023 15:08:04 +0100 Subject: [PATCH 03/10] updating words input position each time user moves to the next word to move the IME suggestion box only shows up in japanese, korean and chinese languages for now (not sure which other languages use this) closes #4022 --- frontend/src/styles/test.scss | 6 +----- frontend/src/ts/test/test-ui.ts | 26 ++++++++++++++++++++++++++ 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss index f40c28dfd..e86a9d43b 100644 --- a/frontend/src/styles/test.scss +++ b/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 { diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index eeee40847..a4a4e0499 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/frontend/src/ts/test/test-ui.ts @@ -131,6 +131,7 @@ export function updateActiveElement(backspace?: boolean): void { }); } } catch (e) {} + updateWordsInputPosition(); } function getWordHTML(word: string): string { @@ -188,6 +189,30 @@ export function showWords(): void { $("#words").html(wordsHTML); updateWordsHeight(); + updateWordsInputPosition(true); +} + +const posUpdateLangList = ["japanese", "chinese", "korean"]; +export 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) { + el.style.top = "0px"; + el.style.left = "0px"; + return; + } + + el.style.top = activeWord.offsetTop + "px"; + el.style.left = activeWord.offsetLeft + "px"; } export function updateWordsHeight(): void { @@ -711,6 +736,7 @@ export function lineJump(currentTop: number): void { } } currentTestLine++; + updateWordsInputPosition(); } export function arrangeCharactersRightToLeft(): void { From 4d73c306d42bdb81e640f5096cef0948f2f61394 Mon Sep 17 00:00:00 2001 From: Miodec Date: Tue, 7 Mar 2023 16:24:59 +0100 Subject: [PATCH 04/10] dynamically adjusting words and words wrapper height in custom mode closes #3805 --- .../src/ts/commandline/lists/font-size.ts | 2 +- frontend/src/ts/test/test-ui.ts | 63 +++++++++++++------ 2 files changed, 44 insertions(+), 21 deletions(-) diff --git a/frontend/src/ts/commandline/lists/font-size.ts b/frontend/src/ts/commandline/lists/font-size.ts index aebef6f36..7e76c9185 100644 --- a/frontend/src/ts/commandline/lists/font-size.ts +++ b/frontend/src/ts/commandline/lists/font-size.ts @@ -14,7 +14,7 @@ const commands: MonkeyTypes.Command[] = [ if (!input) return; UpdateConfig.setFontSize(parseFloat(input)); setTimeout(() => { - TestUI.updateWordsHeight(); + TestUI.updateWordsHeight(true); }, 0); //honestly no clue why it i need to wait for the next event loop to do this }, }, diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index a4a4e0499..df6cbebeb 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/frontend/src/ts/test/test-ui.ts @@ -188,7 +188,7 @@ export function showWords(): void { $("#words").html(wordsHTML); - updateWordsHeight(); + updateWordsHeight(true); updateWordsInputPosition(true); } @@ -215,7 +215,8 @@ export function updateWordsInputPosition(force = false): void { el.style.left = activeWord.offsetLeft + "px"; } -export function updateWordsHeight(): void { +export function updateWordsHeight(force = false): void { + if (!force && Config.mode !== "custom") return; $("#wordsWrapper").removeClass("hidden"); const wordHeight = ( $(document.querySelector(".word")).outerHeight(true) @@ -243,29 +244,50 @@ 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++; + } + 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") { @@ -737,6 +759,7 @@ export function lineJump(currentTop: number): void { } currentTestLine++; updateWordsInputPosition(); + updateWordsHeight(); } export function arrangeCharactersRightToLeft(): void { From 26cc834a31c0984b12fedd494d458f7bdda48ccb Mon Sep 17 00:00:00 2001 From: Miodec Date: Tue, 7 Mar 2023 16:28:43 +0100 Subject: [PATCH 05/10] moved function to config listener to get rid of an import --- frontend/src/ts/commandline/lists/font-size.ts | 4 ---- frontend/src/ts/test/test-ui.ts | 1 + 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/frontend/src/ts/commandline/lists/font-size.ts b/frontend/src/ts/commandline/lists/font-size.ts index 7e76c9185..8190adc0d 100644 --- a/frontend/src/ts/commandline/lists/font-size.ts +++ b/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(true); - }, 0); //honestly no clue why it i need to wait for the next event loop to do this }, }, ]; diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index df6cbebeb..e18e53596 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/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); From 2d56f2d1f2ea389d336ebde0bf221943475ca793 Mon Sep 17 00:00:00 2001 From: Miodec Date: Tue, 7 Mar 2023 16:29:07 +0100 Subject: [PATCH 06/10] not exporting for no reason --- frontend/src/ts/test/test-ui.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index e18e53596..82703f241 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/frontend/src/ts/test/test-ui.ts @@ -194,7 +194,7 @@ export function showWords(): void { } const posUpdateLangList = ["japanese", "chinese", "korean"]; -export function updateWordsInputPosition(force = false): void { +function updateWordsInputPosition(force = false): void { const shouldUpdate = posUpdateLangList.some((l) => Config.language.startsWith(l) ); @@ -216,7 +216,7 @@ export function updateWordsInputPosition(force = false): void { el.style.left = activeWord.offsetLeft + "px"; } -export function updateWordsHeight(force = false): void { +function updateWordsHeight(force = false): void { if (!force && Config.mode !== "custom") return; $("#wordsWrapper").removeClass("hidden"); const wordHeight = ( From 9f9ac13764ab648e2f1e9216c6780d78a9dd750c Mon Sep 17 00:00:00 2001 From: Miodec Date: Tue, 7 Mar 2023 18:30:52 +0100 Subject: [PATCH 07/10] adjusting if lines is less than 3 --- frontend/src/ts/test/test-ui.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index 82703f241..1c5c882f2 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/frontend/src/ts/test/test-ui.ts @@ -274,6 +274,9 @@ function updateWordsHeight(force = false): void { } wordIndex++; } + + if (lines < 3) wrapperHeight = wrapperHeight * (3 / lines); + const wordsHeight = (wrapperHeight / 3) * 4; finalWordsHeight = wordsHeight; From 07ab45d167bb5678aa6817b2b54150fa4bbf52a4 Mon Sep 17 00:00:00 2001 From: Miodec Date: Tue, 7 Mar 2023 18:54:43 +0100 Subject: [PATCH 08/10] disabled autoscroll --- frontend/src/ts/test/test-logic.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts index 4e425ecdf..625cc059f 100644 --- a/frontend/src/ts/test/test-logic.ts +++ b/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(); From f4dd3799d3dcc298aa8404abad01dbc22e811e03 Mon Sep 17 00:00:00 2001 From: Miodec Date: Tue, 7 Mar 2023 18:54:57 +0100 Subject: [PATCH 09/10] placing the words input in the center --- frontend/src/ts/test/test-ui.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index 1c5c882f2..a345c60be 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/frontend/src/ts/test/test-ui.ts @@ -207,7 +207,8 @@ function updateWordsInputPosition(force = false): void { ) as HTMLElement | null; if (!shouldUpdate || !activeWord) { - el.style.top = "0px"; + const wordsWrapper = document.querySelector("#wordsWrapper") as HTMLElement; + el.style.top = wordsWrapper.offsetHeight / 2 + "px"; el.style.left = "0px"; return; } From 8f052215079ee281434bda91b179ce1cfe491e08 Mon Sep 17 00:00:00 2001 From: Miodec Date: Tue, 7 Mar 2023 18:56:27 +0100 Subject: [PATCH 10/10] enabled smooth scroll in css --- frontend/src/styles/core.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/styles/core.scss b/frontend/src/styles/core.scss index 98bf17466..ff98210c5 100644 --- a/frontend/src/styles/core.scss +++ b/frontend/src/styles/core.scss @@ -48,6 +48,7 @@ html { @extend .ffscroll; overflow-y: scroll; + scroll-behavior: smooth; } a {