monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-05 21:15:26 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: determine active word based on logical value, not DOM class (@NadAlaba) (#5834)

Browse source 
* refactor: use active word based on logical value, not DOM class

* use existing const instead of querying DOM

activeWord.offsetTop changes when the DOM element gets updated
no need to query the active word again

* better naming

* no need to requery DOM, we have the top of the previous word saved
This commit is contained in:
Nad Alaba 2024-09-02 12:49:41 +03:00 • committed by GitHub
parent 02490213d6
commit 55496996de
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/ts/controllers/input-controller.ts
View file

@ -677,14 +677,16 @@ function handleChar(
char
);
const activeWord = document.querySelectorAll("#words .word")?.[
TestUI.activeWordElementIndex
] as HTMLElement;
const testInputLength: number = !isCharKorean
? TestInput.input.current.length
: Hangul.disassemble(TestInput.input.current).length;
//update the active word top, but only once
if (testInputLength === 1 && TestWords.words.currentIndex === 0) {
TestUI.setActiveWordTop(
(document.querySelector("#words .active") as HTMLElement)?.offsetTop
);
TestUI.setActiveWordTop(activeWord?.offsetTop);
}
//max length of the input is 20 unless in zen mode then its 30
@ -732,14 +734,10 @@ function handleChar(
}
}
const activeWordTopBeforeJump = document.querySelector<HTMLElement>(
"#words .word.active"
)?.offsetTop as number;
const activeWordTopBeforeJump = activeWord?.offsetTop;
void TestUI.updateActiveWordLetters();
const newActiveTop = document.querySelector<HTMLElement>(
"#words .word.active"
)?.offsetTop as number;
const newActiveTop = activeWord?.offsetTop;
//stop the word jump by slicing off the last character, update word again
if (
activeWordTopBeforeJump < newActiveTop &&
@ -747,12 +745,7 @@ function handleChar(
TestInput.input.current.length > 1
) {
if (Config.mode === "zen") {
const currentTop = Math.floor(
document.querySelectorAll<HTMLElement>("#words .word")[
TestUI.activeWordElementIndex - 1
]?.offsetTop ?? 0
);
if (!Config.showAllLines) TestUI.lineJump(currentTop);
if (!Config.showAllLines) TestUI.lineJump(activeWordTopBeforeJump);
} else {
TestInput.input.current = TestInput.input.current.slice(0, -1);
void TestUI.updateActiveWordLetters();
@ -1103,14 +1096,14 @@ $(document).on("keydown", async (event) => {
//show dead keys
if (event.key === "Dead" && !CompositionState.getComposing()) {
void Sound.playClick();
const word: HTMLElement | null = document.querySelector<HTMLElement>(
"#words .word.active"
);
const activeWord: HTMLElement | null = document.querySelectorAll(
"#words .word"
)?.[TestUI.activeWordElementIndex] as HTMLElement;
const len: number = TestInput.input.current.length; // have to do this because prettier wraps the line and causes an error
// Check to see if the letter actually exists to toggle it as dead
const deadLetter: Element | undefined =
word?.querySelectorAll("letter")[len];
activeWord?.querySelectorAll("letter")[len];
if (deadLetter) {
deadLetter.classList.toggle("dead");
}

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

@ -438,7 +438,10 @@ export async function updateWordsInputPosition(initial = false): Promise<void> {
const isLanguageRTL = currentLanguage.rightToLeft;
const el = document.querySelector("#wordsInput") as HTMLElement;
const activeWord = document.querySelector<HTMLElement>("#words .active");
const activeWord =
document.querySelectorAll<HTMLElement>("#words .word")[
activeWordElementIndex
];
if (!activeWord) {
el.style.top = "0px";
@ -1086,8 +1089,10 @@ export function lineJump(currentTop: number): void {
.animate(newCss, SlowTimer.get() ? 0 : 125, () => {
currentLinesAnimating = 0;
activeWordTop = (
document.querySelector("#words .active") as HTMLElement
).offsetTop;
document.querySelectorAll("#words .word")?.[
activeWordElementIndex
] as HTMLElement
)?.offsetTop;
activeWordElementIndex -= toHide.length;
lineTransition = false;