monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-12-26 18:09:40 +08:00
Code Issues Projects Releases Packages Wiki Activity

fixed a bug where smooth line transition would cause quick consecutive line jumps to not work correctly

Browse source 
closes #3662
This commit is contained in:
Miodec 2022-10-17 15:21:35 +02:00
parent 40cd8c58b0
commit 575cbcef60
2 changed files with 49 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -296,7 +296,7 @@ function handleSpace(): void {
nextTop = 0;
}
if (nextTop > currentTop && !TestUI.lineTransition) {
if (nextTop > currentTop) {
TestUI.lineJump(currentTop);
}
} //end of line wrap

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

@ -603,6 +603,8 @@ export function scrollTape(): void {
}
}
let currentLinesAnimating = 0;
export function lineJump(currentTop: number): void {
//last word of the line
if (
@ -628,29 +630,41 @@ export function lineJump(currentTop: number): void {
);
if (Config.smoothLineScroll && toHide.length > 0) {
lineTransition = true;
$("#words").prepend(
`<div class="smoothScroller" style="position: fixed;height:${wordHeight}px;width:100%"></div>`
);
$("#words .smoothScroller").animate(
{
height: 0,
},
SlowTimer.get() ? 0 : 125,
() => {
$("#words .smoothScroller").remove();
}
);
$("#paceCaret").animate(
{
top:
(<HTMLElement>document.querySelector("#paceCaret"))?.offsetTop -
wordHeight,
},
SlowTimer.get() ? 0 : 125
);
const smoothScroller = $("#words .smoothScroller");
if (smoothScroller.length === 0) {
$("#words").prepend(
`<div class="smoothScroller" style="position: fixed;height:${wordHeight}px;width:100%"></div>`
);
} else {
smoothScroller.css(
"height",
`${(smoothScroller.outerHeight(true) ?? 0) + wordHeight}px`
);
}
$("#words .smoothScroller")
.stop(true, false)
.animate(
{
height: 0,
},
SlowTimer.get() ? 0 : 125,
() => {
$("#words .smoothScroller").remove();
}
);
$("#paceCaret")
.stop(true, false)
.animate(
{
top:
(<HTMLElement>document.querySelector("#paceCaret"))?.offsetTop -
wordHeight,
},
SlowTimer.get() ? 0 : 125
);
const newCss: { [key: string]: string } = {
marginTop: `-${wordHeight}px`,
marginTop: `-${wordHeight * (currentLinesAnimating + 1)}px`,
};
if (Config.tapeMode !== "off") {
@ -660,15 +674,20 @@ export function lineJump(currentTop: number): void {
const newMargin = wordsWrapperWidth / 2;
newCss["marginLeft"] = `${newMargin}px`;
}
$("#words").animate(newCss, SlowTimer.get() ? 0 : 125, () => {
activeWordTop = (<HTMLElement>document.querySelector("#words .active"))
.offsetTop;
currentLinesAnimating++;
$("#words")
.stop(true, false)
.animate(newCss, SlowTimer.get() ? 0 : 125, () => {
currentLinesAnimating = 0;
activeWordTop = (<HTMLElement>(
document.querySelector("#words .active")
)).offsetTop;
currentWordElementIndex -= toHide.length;
lineTransition = false;
toHide.forEach((el) => el.remove());
$("#words").css("marginTop", "0");
});
currentWordElementIndex -= toHide.length;
lineTransition = false;
toHide.forEach((el) => el.remove());
$("#words").css("marginTop", "0");
});
} else {
toHide.forEach((el) => el.remove());
currentWordElementIndex -= toHide.length;