monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-12 18:34:05 +08:00
Code Issues Projects Releases Packages Wiki Activity

support hide

Browse source
This commit is contained in:
Miodec 2026-01-08 20:36:00 +01:00
parent af35057815
commit 645eaebfa5
2 changed files with 31 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
frontend/src/ts/components/test/LiveStats.tsx
View file

@ -33,11 +33,13 @@ const [statsVisible, setStatsVisible] =
animate: true,
});
const getStatsVisible = (): VisibilityAnimationOptions => {
return {
visible: statsVisible().visible && isFocused(),
const getStatsVisible = (
visible: Accessor<boolean>,
): Accessor<VisibilityAnimationOptions> => {
return () => ({
visible: statsVisible().visible && isFocused() && visible(),
animate: statsVisible().animate,
};
});
};
export { setStatsVisible };
@ -52,17 +54,21 @@ export function LiveStatsMini(props: {
<Stat
class="speed"
value={() => (getLiveSpeedStyle() === "mini" ? props.wpm() : "")}
visibilityOptions={getStatsVisible}
visibilityOptions={getStatsVisible(
() => getLiveSpeedStyle() === "mini",
)}
/>
<Stat
class="acc"
value={() => (getLiveAccStyle() === "mini" ? props.acc() : "")}
visibilityOptions={getStatsVisible}
value={props.acc}
visibilityOptions={getStatsVisible(() => getLiveAccStyle() === "mini")}
/>
<Stat
class="burst"
value={() => (getLiveBurstStyle() === "mini" ? props.burst() : "")}
visibilityOptions={getStatsVisible}
value={props.burst}
visibilityOptions={getStatsVisible(
() => getLiveBurstStyle() === "mini",
)}
/>
</>
);
@ -77,18 +83,22 @@ export function LiveStats(props: {
<>
<Stat
class="liveSpeed"
value={() => (getLiveSpeedStyle() === "text" ? props.wpm() : "")}
visibilityOptions={getStatsVisible}
value={props.wpm}
visibilityOptions={getStatsVisible(
() => getLiveSpeedStyle() === "text",
)}
/>
<Stat
class="liveAcc"
value={() => (getLiveAccStyle() === "text" ? props.acc() : "")}
visibilityOptions={getStatsVisible}
value={props.acc}
visibilityOptions={getStatsVisible(() => getLiveAccStyle() === "text")}
/>
<Stat
class="liveBurst"
value={() => (getLiveBurstStyle() === "text" ? props.burst() : "")}
visibilityOptions={getStatsVisible}
value={props.burst}
visibilityOptions={getStatsVisible(
() => getLiveBurstStyle() === "text",
)}
/>
</>
);

6
frontend/src/ts/hooks/useVisibilityAnimation.ts
View file

@ -18,21 +18,27 @@ export function useVisibilityAnimation(
if (!el) return;
if (opt.visible) {
if (opt.animate) {
el.show();
el.animate({
opacity: [0, 1],
duration: applyReducedMotion(125),
});
} else {
el.setStyle({ opacity: "1" });
el.show();
}
} else {
if (opt.animate) {
el.animate({
opacity: [1, 0],
duration: applyReducedMotion(125),
onComplete: () => {
el.hide();
},
});
} else {
el.setStyle({ opacity: "0" });
el.hide();
}
}
});