monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-13 10:54:28 +08:00
Code Issues Projects Releases Packages Wiki Activity

remove LiveStatsMini

Browse source
This commit is contained in:
Christian Fehmer 2026-01-08 23:16:07 +01:00
parent 610be26d07
commit 435794eb1b
No known key found for this signature in database
GPG key ID: A567394D76EBDD7C
2 changed files with 14 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/ts/components/mount.tsx
View file

@ -1,15 +1,15 @@
import { render } from "solid-js/web";
import { qsr } from "../utils/dom";
import { LiveStats, LiveStatsMini } from "./test/LiveStats";
import { LiveStats } from "./test/LiveStats";
import { getAcc, getBurst, getWpm } from "../signals/test";
export function mountComponents(): void {
render(
() => <LiveStatsMini wpm={getWpm} acc={getAcc} burst={getBurst} />,
() => <LiveStats mode="mini" wpm={getWpm} acc={getAcc} burst={getBurst} />,
qsr("#liveStatsMini").native,
);
render(
() => <LiveStats wpm={getWpm} acc={getAcc} burst={getBurst} />,
() => <LiveStats mode="text" wpm={getWpm} acc={getAcc} burst={getBurst} />,
qsr("#liveStatsTextBottom").native,
);
}

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

@ -1,4 +1,4 @@
import { Accessor, createSignal, JSXElement } from "solid-js";
import { Accessor, JSXElement } from "solid-js";
import {
getLiveAccStyle,
getLiveBurstStyle,
@ -37,61 +37,33 @@ const getStatsVisible = (
});
};
export function LiveStatsMini(props: {
export function LiveStats(props: {
mode: "mini" | "text";
wpm: Accessor<string>;
acc: Accessor<string>;
burst: Accessor<string>;
}): JSXElement {
const isVisible = (
config: Accessor<string>,
): Accessor<VisibilityAnimationOptions> =>
getStatsVisible(() => config() === props.mode);
return (
<>
<Stat
class="speed"
value={props.wpm}
visibilityOptions={getStatsVisible(
() => getLiveSpeedStyle() === "mini",
)}
visibilityOptions={isVisible(getLiveSpeedStyle)}
/>
<Stat
class="acc"
value={props.acc}
visibilityOptions={getStatsVisible(() => getLiveAccStyle() === "mini")}
visibilityOptions={isVisible(getLiveAccStyle)}
/>
<Stat
class="burst"
value={props.burst}
visibilityOptions={getStatsVisible(
() => getLiveBurstStyle() === "mini",
)}
/>
</>
);
}
export function LiveStats(props: {
wpm: Accessor<string>;
acc: Accessor<string>;
burst: Accessor<string>;
}): JSXElement {
return (
<>
<Stat
class="liveSpeed"
value={props.wpm}
visibilityOptions={getStatsVisible(
() => getLiveSpeedStyle() === "text",
)}
/>
<Stat
class="liveAcc"
value={props.acc}
visibilityOptions={getStatsVisible(() => getLiveAccStyle() === "text")}
/>
<Stat
class="liveBurst"
value={props.burst}
visibilityOptions={getStatsVisible(
() => getLiveBurstStyle() === "text",
)}
visibilityOptions={isVisible(getLiveBurstStyle)}
/>
</>
);