monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-02 19:47:40 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: updateWordsWrapperHeight

Browse source 
remove unnecessary code, clean up existing, add comments
This commit is contained in:
Miodec 2025-04-01 18:09:54 +02:00
parent 2059e88b9c
commit 7a887dfa9a
2 changed files with 36 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/styles/test.scss
View file

@ -179,7 +179,6 @@
align-content: flex-start;
-webkit-user-select: none;
user-select: none;
padding-bottom: 1em;
.newline {
width: inherit;

81
frontend/src/ts/test/test-ui.ts
View file

@ -488,6 +488,9 @@ export function updateWordsWrapperHeight(force = false): void {
if (ActivePage.get() !== "test" || resultVisible) return;
if (!force && Config.mode !== "custom") return;
const wrapperEl = document.getElementById("wordsWrapper") as HTMLElement;
const outOfFocusEl = document.querySelector(
".outOfFocusWarning"
) as HTMLElement;
const wordElements = wrapperEl.querySelectorAll<HTMLElement>("#words .word");
const activeWordEl =
wordElements[TestState.activeWordIndex - activeWordElementOffset];
@ -495,65 +498,53 @@ export function updateWordsWrapperHeight(force = false): void {
wrapperEl.classList.remove("hidden");
//insert temporary character for zen mode
const activeWordEmpty = activeWordEl?.children.length === 0;
if (activeWordEmpty) {
activeWordEl.insertAdjacentHTML(
"beforeend",
'<letter style="opacity: 0;">_</letter>'
);
}
const wordComputedStyle = window.getComputedStyle(activeWordEl);
const wordMargin =
parseInt(wordComputedStyle.marginTop) +
parseInt(wordComputedStyle.marginBottom);
const wordHeight = activeWordEl.offsetHeight + wordMargin;
let wrapperHeightStr: string;
let outOfFocusMargin: string | undefined = undefined;
const shouldLimitToThreeLines =
const timedTest =
Config.mode === "time" ||
(Config.mode === "custom" && CustomText.getLimitMode() === "time") ||
(Config.mode === "custom" && CustomText.getLimitValue() === 0);
if (Config.showAllLines && !shouldLimitToThreeLines) {
wrapperHeightStr = "auto";
outOfFocusMargin = wordHeight + convertRemToPixels(1) / 2 + "px";
} else if (Config.tapeMode !== "off") {
wrapperHeightStr = TestWords.hasNewline
const showAllLines = Config.showAllLines && !timedTest;
if (Config.tapeMode === "off") {
if (showAllLines) {
//allow the wrapper to grow and shink with the words
wrapperEl.style.height = "";
} else {
let lines = 0;
let lastTop = 0;
let wordIndex = 0;
let wrapperHeight = 0;
while (lines < 3) {
const word = wordElements[wordIndex] as HTMLElement | null;
if (!word) break;
const top = word.offsetTop;
if (top > lastTop) {
lines++;
wrapperHeight += word.offsetHeight + wordMargin;
lastTop = top;
}
wordIndex++;
}
if (lines < 3) wrapperHeight = wrapperHeight * (3 / lines);
//limit to 3 lines
wrapperEl.style.height = wrapperHeight + "px";
}
} else {
//tape mode
wrapperEl.style.height = TestWords.hasNewline
? wordHeight * 3 + "px"
: wordHeight * 1 + "px";
} else {
let lines = 0;
let lastTop = 0;
let wordIndex = 0;
let wrapperHeight = 0;
while (lines < 3) {
const word = wordElements[wordIndex] as HTMLElement | null;
if (!word) break;
const top = word.offsetTop;
if (top > lastTop) {
lines++;
wrapperHeight += word.offsetHeight + wordMargin;
lastTop = top;
}
wordIndex++;
}
if (lines < 3) wrapperHeight = wrapperHeight * (3 / lines);
wrapperHeightStr = wrapperHeight + "px";
}
wrapperEl.style.height = wrapperHeightStr;
if (outOfFocusMargin !== undefined) {
$(".outOfFocusWarning").css({ height: 0, "margin-top": outOfFocusMargin });
}
if (activeWordEmpty) {
activeWordEl?.replaceChildren();
}
outOfFocusEl.style.maxHeight = wordHeight * 3 + "px";
}
function updateWordsMargin(): void {