monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-20 07:16:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

dynamically adjusting words and words wrapper height in custom mode

Browse source 
closes #3805
This commit is contained in:
Miodec 2023-03-07 16:24:59 +01:00
parent d5165f137c
commit 4d73c306d4
2 changed files with 44 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/ts/commandline/lists/font-size.ts
View file

@ -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
},
},

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

@ -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 = <number>(
$(<Element>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 {