Skip to content

refactor(timer-progress): extract logic into helper functions in timer-progress (@Leonabcd123) #7364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Leonabcd123 wants to merge 11 commits into
base: master
Choose a base branch
from
+72 −87
Open

refactor(timer-progress): extract logic into helper functions in timer-progress (@Leonabcd123) #7364

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6abac4a
Refactor timer-progress.ts
Leonabcd123 Jan 14, 2026
374dfa8
Concat
Leonabcd123 Jan 14, 2026
fc0f353
Don't spread
Leonabcd123 Jan 15, 2026
7efd3e2
Add wrapInDiv option to updateTimer
Leonabcd123 Jan 15, 2026
a45933e
Remove two else if
Leonabcd123 Jan 15, 2026
6e5766e
Don't wrap object in object
Leonabcd123 Jan 15, 2026
2fe47b6
More robust
Leonabcd123 Jan 15, 2026
a611cfc
Rename
Leonabcd123 Jan 15, 2026
c6b0a3c
Remove type definition
Leonabcd123 Jan 15, 2026
1a51e93
Use const
Leonabcd123 Jan 15, 2026
a86ba26
Template
Leonabcd123 Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 72 additions & 87 deletions frontend/src/ts/test/timer-progress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,49 +19,29 @@ const textEl = document.querySelector(
) as HTMLElement;
const miniEl = document.querySelector("#liveStatsMini .time") as HTMLElement;

function showElement(el: HTMLElement): void {
animate(el, {
opacity: [0, 1],
duration: applyReducedMotion(125),
onBegin: () => {
el.classList.remove("hidden");
},
});
}

export function show(): void {
if (!TestState.isActive) return;
requestDebouncedAnimationFrame("timer-progress.show", () => {
if (Config.mode !== "zen" && Config.timerStyle === "bar") {
animate(barOpacityEl, {
opacity: [0, 1],
duration: applyReducedMotion(125),
onBegin: () => {
barOpacityEl.classList.remove("hidden");
},
});
showElement(barOpacityEl);
} else if (Config.timerStyle === "text") {
animate(textEl, {
opacity: [0, 1],
duration: applyReducedMotion(125),
onBegin: () => {
textEl.classList.remove("hidden");
},
});
showElement(textEl);
} else if (Config.timerStyle === "flash_mini") {
animate(miniEl, {
opacity: [0, 1],
duration: applyReducedMotion(125),
onBegin: () => {
miniEl.classList.remove("hidden");
},
});
showElement(miniEl);
} else if (Config.timerStyle === "flash_text") {
animate(textEl, {
opacity: [0, 1],
duration: applyReducedMotion(125),
onBegin: () => {
textEl.classList.remove("hidden");
},
});
showElement(textEl);
} else if (Config.mode === "zen" || Config.timerStyle === "mini") {
animate(miniEl, {
opacity: [0, 1],
duration: applyReducedMotion(125),
onBegin: () => {
miniEl.classList.remove("hidden");
},
});
showElement(miniEl);
}
});
}
Expand All @@ -85,28 +65,30 @@ export function reset(): void {
});
}

function hideElement(el: HTMLElement, hideOnComplete: boolean): void {
const args = {
opacity: 0,
duration: applyReducedMotion(125),
};

animate(
el,
hideOnComplete
? {
...args,
onComplete: () => {
el.classList.add("hidden");
},
}
: args,
);
}

export function hide(): void {
requestDebouncedAnimationFrame("timer-progress.hide", () => {
animate(barOpacityEl, {
opacity: 0,
duration: applyReducedMotion(125),
});

animate(miniEl, {
opacity: 0,
duration: applyReducedMotion(125),
onComplete: () => {
miniEl.classList.add("hidden");
},
});

animate(textEl, {
opacity: 0,
duration: applyReducedMotion(125),
onComplete: () => {
textEl.classList.add("hidden");
},
});
hideElement(barOpacityEl, false);
hideElement(miniEl, true);
hideElement(textEl, true);
});
}

Expand All @@ -131,6 +113,24 @@ function getCurrentCount(): number {
}
}

function setTimerHtmlToInputLength(el: HTMLElement, wrapInDiv: boolean): void {
let historyLength = `${TestInput.input.getHistory().length}`;

if (wrapInDiv) {
historyLength = `<div>${historyLength}</div>`;
}

el.innerHTML = historyLength;
}

function updateTimer(el: HTMLElement, outof: number, wrapInDiv: boolean): void {
if (outof === 0) {
setTimerHtmlToInputLength(el, wrapInDiv);
} else {
el.innerHTML = `${getCurrentCount()}/${outof}`;
}
}

export function update(): void {
requestDebouncedAnimationFrame("timer-progress.update", () => {
const time = Time.get();
Expand Down Expand Up @@ -215,40 +215,25 @@ export function update(): void {
width: percent + "vw",
duration: 250,
});
} else if (Config.timerStyle === "text") {
if (outof === 0) {
textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
} else {
textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
}
} else if (Config.timerStyle === "flash_mini") {
if (outof === 0) {
miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
} else {
miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
}
} else if (Config.timerStyle === "flash_text") {
if (outof === 0) {
textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
} else {
textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
}
} else if (Config.timerStyle === "mini") {
if (outof === 0) {
miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
} else {
miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
}
} else if (
Config.timerStyle === "text" ||
Config.timerStyle === "flash_text"
) {
updateTimer(textEl, outof, true);
} else if (
Config.timerStyle === "mini" ||
Config.timerStyle === "flash_mini"
) {
updateTimer(miniEl, outof, false);
}
} else if (Config.mode === "zen") {
if (Config.timerStyle === "text") {
textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
} else if (Config.timerStyle === "flash_mini") {
miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
} else if (Config.timerStyle === "flash_text") {
textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
} else {
miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
if (Config.timerStyle === "text" || Config.timerStyle === "flash_text") {
setTimerHtmlToInputLength(textEl, true);
} else if (
Config.timerStyle === "mini" ||
Config.timerStyle === "flash_mini"
) {
setTimerHtmlToInputLength(miniEl, false);
}
}
});
Expand Down