Skip to content
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

Truncate Score Display #300

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Truncate Score Display #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b769ea9
truncate formatted score
Ekatwikz May 14, 2024
202bc9c
evalBar: disable overflow
Ekatwikz May 14, 2024
efe2b54
score bubble: disable overflow
Ekatwikz May 14, 2024
a4bc707
score bubble: add tooltip
Ekatwikz May 14, 2024
4fa9e87
score formatting: truncate optionally
Ekatwikz May 15, 2024
3c5fe18
score bubble: increase width to 4.5rem
Ekatwikz May 15, 2024
532db9e
score bubble: don't truncate value
Ekatwikz May 15, 2024
1f046b3
score bubble: increase width to 5rem
Ekatwikz May 17, 2024
6406c70
formatScore: invert default parameter
Ekatwikz May 17, 2024
3eb5d07
score tests: fix non-integer cp val
Ekatwikz May 17, 2024
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
9 changes: 7 additions & 2 deletions src/components/boards/EvalBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function EvalBar({
py={3}
mt={orientation === "black" ? "auto" : undefined}
>
{score.value <= 0 && formatScore(score, 1).replace(/\+|-/, "")}
{score.value <= 0 && formatScore(score, false).replace(/\+|-/, "")}
</Text>
</Box>,
<Box
Expand All @@ -58,8 +58,13 @@ function EvalBar({
c={theme.colors.dark[8]}
ta="center"
mt={orientation === "white" ? "auto" : undefined}
style={{
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
}}
>
{score.value > 0 && formatScore(score, 1).slice(1)}
{score.value > 0 && formatScore(score, false).slice(1)}
</Text>
</Box>,
];
Expand Down
2 changes: 1 addition & 1 deletion src/components/panels/analysis/BestMoves.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,7 @@ function EngineTop({
Eval
</Text>
<Text fw="bold" fz="md">
{formatScore(engineVariations[0].score.value, 1) ?? 0}
{formatScore(engineVariations[0].score.value, false) ?? 0}
</Text>
</Stack>
<Stack align="center" gap={0}>
Expand Down
35 changes: 22 additions & 13 deletions src/components/panels/analysis/ScoreBubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Score } from "@/bindings";
import { formatScore } from "@/utils/score";
import { Box, Progress, Text } from "@mantine/core";
import { Box, Progress, Text, Tooltip } from "@mantine/core";
import * as classes from "./ScoreBubble.css";

function ScoreBubble({
Expand All @@ -23,7 +23,7 @@ function ScoreBubble({
style={(theme) => ({
borderRadius: theme.radius.sm,
boxShadow: theme.shadows.md,
width: size === "md" ? "4rem" : "3.5rem",
width: size === "md" ? "5.0rem" : "3.5rem",
height: size === "md" ? "1.85rem" : "1.6rem",
})}
fz="0.5rem"
Expand Down Expand Up @@ -66,22 +66,31 @@ function ScoreBubble({
textAlign: "center",
padding: "0.15rem",
borderRadius: theme.radius.sm,
width: size === "md" ? "4rem" : "3.5rem",
width: size === "md" ? "5.0rem" : "3.5rem",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these changes from 4rem to 5rem really necessary? I think it would be better to change it to minWidth and keep it at 4rem

height: size === "md" ? "1.85rem" : "1.6rem",
boxShadow: theme.shadows.md,
})}
>
<Text
fw={700}
c={score.value.value >= 0 ? "black" : "white"}
size={size}
ta="center"
style={(theme) => ({
fontFamily: theme.fontFamilyMonospace,
})}
<Tooltip
position="left"
color={score.value.value < 0 ? "dark" : undefined}
label={formatScore(score.value)}
>
{formatScore(score.value)}
</Text>
<Text
fw={700}
c={score.value.value >= 0 ? "black" : "white"}
size={size}
ta="center"
style={(theme) => ({
fontFamily: theme.fontFamilyMonospace,
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
})}
>
{formatScore(score.value)}
</Text>
</Tooltip>
</Box>
);
}
Expand Down
12 changes: 10 additions & 2 deletions src/utils/score.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,17 @@ export const INITIAL_SCORE: Score = {

const CP_CEILING = 1000;

export function formatScore(score: ScoreValue, precision = 2): string {
export function formatScore(score: ScoreValue, precise = true): string {
let scoreText = match(score.type)
.with("cp", () => Math.abs(score.value / 100).toFixed(precision))
.with("cp", () => {
const absScore = Math.abs(score.value);
return (
precise
? (absScore / 100).toFixed(2)
: // idea from: https://github.com/lichess-org/lila/blob/e110605c/ui/ceval/src/util.ts#L8
Math.min(Math.round(absScore / 10) / 10, 99).toFixed(1)
).toString();
})
.with("mate", () => `M${Math.abs(score.value)}`)
.with("dtz", () => `DTZ${Math.abs(score.value)}`)
.exhaustive();
Expand Down
4 changes: 4 additions & 0 deletions src/utils/tests/score.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ test("should format a negative cp score correctly", () => {
expect(formatScore({ type: "cp", value: -50 })).toBe("-0.50");
});

test("should truncate a large cp score correctly", () => {
expect(formatScore({ type: "cp", value: 20000 }, false)).toBe("+99.0");
});

test("should format a mate score correctly", () => {
expect(formatScore({ type: "mate", value: 5 })).toBe("+M5");
expect(formatScore({ type: "mate", value: -5 })).toBe("-M5");
Expand Down
Loading