From b769ea9f4af636a370ae8796027b5de7654c7f1d Mon Sep 17 00:00:00 2001
From: ekatwikz <ekatwikz@gmail.com>
Date: Tue, 14 May 2024 02:36:50 +0200
Subject: [PATCH 01/10] truncate formatted score

uses lila's score formatting

See: https://github.com/lichess-org/lila/blob/e110605c138c1f6fec417ab9317968b32a928a16/ui/ceval/src/util.ts#L8
---
 src/components/boards/EvalBar.tsx            | 4 ++--
 src/components/panels/analysis/BestMoves.tsx | 2 +-
 src/utils/score.ts                           | 7 +++++--
 src/utils/tests/score.test.ts                | 8 ++++++--
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/boards/EvalBar.tsx b/src/components/boards/EvalBar.tsx
index fd5530c7..f1f9c8f4 100644
--- a/src/components/boards/EvalBar.tsx
+++ b/src/components/boards/EvalBar.tsx
@@ -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).replace(/\+|-/, "")}
         </Text>
       </Box>,
       <Box
@@ -59,7 +59,7 @@ function EvalBar({
           ta="center"
           mt={orientation === "white" ? "auto" : undefined}
         >
-          {score.value > 0 && formatScore(score, 1).slice(1)}
+          {score.value > 0 && formatScore(score).slice(1)}
         </Text>
       </Box>,
     ];
diff --git a/src/components/panels/analysis/BestMoves.tsx b/src/components/panels/analysis/BestMoves.tsx
index 32e9ace5..6208b346 100644
--- a/src/components/panels/analysis/BestMoves.tsx
+++ b/src/components/panels/analysis/BestMoves.tsx
@@ -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) ?? 0}
               </Text>
             </Stack>
             <Stack align="center" gap={0}>
diff --git a/src/utils/score.ts b/src/utils/score.ts
index 7087e932..951aaded 100644
--- a/src/utils/score.ts
+++ b/src/utils/score.ts
@@ -14,9 +14,12 @@ export const INITIAL_SCORE: Score = {
 
 const CP_CEILING = 1000;
 
-export function formatScore(score: ScoreValue, precision = 2): string {
+export function formatScore(score: ScoreValue): string {
   let scoreText = match(score.type)
-    .with("cp", () => Math.abs(score.value / 100).toFixed(precision))
+    // yoinked from: https://github.com/lichess-org/lila/blob/e110605c138c1f6fec417ab9317968b32a928a16/ui/ceval/src/util.ts#L8
+    .with("cp", () =>
+      Math.min(Math.round(Math.abs(score.value) / 10) / 10, 99).toFixed(1),
+    )
     .with("mate", () => `M${Math.abs(score.value)}`)
     .with("dtz", () => `DTZ${Math.abs(score.value)}`)
     .exhaustive();
diff --git a/src/utils/tests/score.test.ts b/src/utils/tests/score.test.ts
index 8ae15a6e..cfe0bfcf 100644
--- a/src/utils/tests/score.test.ts
+++ b/src/utils/tests/score.test.ts
@@ -8,11 +8,15 @@ import {
 } from "../score";
 
 test("should format a positive cp score correctly", () => {
-  expect(formatScore({ type: "cp", value: 50 })).toBe("+0.50");
+  expect(formatScore({ type: "cp", value: 50 })).toBe("+0.5");
 });
 
 test("should format a negative cp score correctly", () => {
-  expect(formatScore({ type: "cp", value: -50 })).toBe("-0.50");
+  expect(formatScore({ type: "cp", value: -50 })).toBe("-0.5");
+});
+
+test("should format a large cp score correctly", () => {
+  expect(formatScore({ type: "cp", value: 12345.67 })).toBe("+99.0");
 });
 
 test("should format a mate score correctly", () => {

From 202bc9c102a1ba50646f5a5198b32093f21616a5 Mon Sep 17 00:00:00 2001
From: ekatwikz <ekatwikz@gmail.com>
Date: Tue, 14 May 2024 17:49:28 +0200
Subject: [PATCH 02/10] evalBar: disable overflow

---
 src/components/boards/EvalBar.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/boards/EvalBar.tsx b/src/components/boards/EvalBar.tsx
index f1f9c8f4..51d9e7ce 100644
--- a/src/components/boards/EvalBar.tsx
+++ b/src/components/boards/EvalBar.tsx
@@ -58,6 +58,11 @@ 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).slice(1)}
         </Text>

From efe2b54c80fa4d70ec7d25237342a792cd5bb5b7 Mon Sep 17 00:00:00 2001
From: ekatwikz <ekatwikz@gmail.com>
Date: Tue, 14 May 2024 17:54:38 +0200
Subject: [PATCH 03/10] score bubble: disable overflow

---
 src/components/panels/analysis/ScoreBubble.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/panels/analysis/ScoreBubble.tsx b/src/components/panels/analysis/ScoreBubble.tsx
index dbc8122b..d7c9d2a5 100644
--- a/src/components/panels/analysis/ScoreBubble.tsx
+++ b/src/components/panels/analysis/ScoreBubble.tsx
@@ -78,6 +78,9 @@ function ScoreBubble({
         ta="center"
         style={(theme) => ({
           fontFamily: theme.fontFamilyMonospace,
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
         })}
       >
         {formatScore(score.value)}

From a4bc7073ee97770219e674ac62993f74bbb62a5d Mon Sep 17 00:00:00 2001
From: ekatwikz <ekatwikz@gmail.com>
Date: Tue, 14 May 2024 17:54:45 +0200
Subject: [PATCH 04/10] score bubble: add tooltip

---
 .../panels/analysis/ScoreBubble.tsx           | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/panels/analysis/ScoreBubble.tsx b/src/components/panels/analysis/ScoreBubble.tsx
index d7c9d2a5..805c83ae 100644
--- a/src/components/panels/analysis/ScoreBubble.tsx
+++ b/src/components/panels/analysis/ScoreBubble.tsx
@@ -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({
@@ -71,20 +71,26 @@ function ScoreBubble({
         boxShadow: theme.shadows.md,
       })}
     >
-      <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",
-        })}
+      <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>
   );
 }

From 4fa9e87cf8a4b656d0a05151ef4c1960c450a260 Mon Sep 17 00:00:00 2001
From: ekatwikz <ekatwikz@gmail.com>
Date: Wed, 15 May 2024 16:40:33 +0200
Subject: [PATCH 05/10] score formatting: truncate optionally

---
 src/components/boards/EvalBar.tsx              |  2 +-
 src/components/common/EvalChart.tsx            |  2 +-
 src/components/panels/analysis/ScoreBubble.tsx |  2 +-
 src/utils/score.ts                             | 15 ++++++++++-----
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/boards/EvalBar.tsx b/src/components/boards/EvalBar.tsx
index 51d9e7ce..f3cfb7f1 100644
--- a/src/components/boards/EvalBar.tsx
+++ b/src/components/boards/EvalBar.tsx
@@ -78,7 +78,7 @@ function EvalBar({
     <Tooltip
       position="right"
       color={score && score.value < 0 ? "dark" : undefined}
-      label={score ? formatScore(score) : undefined}
+      label={score ? formatScore(score, false) : undefined}
       disabled={!score}
     >
       <Box
diff --git a/src/components/common/EvalChart.tsx b/src/components/common/EvalChart.tsx
index 265e7970..7f11b72e 100644
--- a/src/components/common/EvalChart.tsx
+++ b/src/components/common/EvalChart.tsx
@@ -77,7 +77,7 @@ function EvalChart(props: EvalChartProps) {
   function getEvalText(node: TreeNode, type: "cp" | "wdl"): string {
     if (node.score) {
       if (type === "cp") {
-        return `Advantage: ${formatScore(node.score.value)}`;
+        return `Advantage: ${formatScore(node.score.value, false)}`;
       }
       if (type === "wdl" && node.score.wdl) {
         return `
diff --git a/src/components/panels/analysis/ScoreBubble.tsx b/src/components/panels/analysis/ScoreBubble.tsx
index 805c83ae..eed2ea0f 100644
--- a/src/components/panels/analysis/ScoreBubble.tsx
+++ b/src/components/panels/analysis/ScoreBubble.tsx
@@ -74,7 +74,7 @@ function ScoreBubble({
       <Tooltip
         position="left"
         color={score.value.value < 0 ? "dark" : undefined}
-        label={formatScore(score.value)}
+        label={formatScore(score.value, false)}
       >
         <Text
           fw={700}
diff --git a/src/utils/score.ts b/src/utils/score.ts
index 951aaded..6c782010 100644
--- a/src/utils/score.ts
+++ b/src/utils/score.ts
@@ -14,12 +14,17 @@ export const INITIAL_SCORE: Score = {
 
 const CP_CEILING = 1000;
 
-export function formatScore(score: ScoreValue): string {
+export function formatScore(score: ScoreValue, truncate = true): string {
   let scoreText = match(score.type)
-    // yoinked from: https://github.com/lichess-org/lila/blob/e110605c138c1f6fec417ab9317968b32a928a16/ui/ceval/src/util.ts#L8
-    .with("cp", () =>
-      Math.min(Math.round(Math.abs(score.value) / 10) / 10, 99).toFixed(1),
-    )
+    .with("cp", () => {
+      const absScore = Math.abs(score.value);
+      return (
+        truncate
+          ? // idea from: https://github.com/lichess-org/lila/blob/e110605c138c1f6fec417ab9317968b32a928a16/ui/ceval/src/util.ts#L8
+            Math.min(Math.round(absScore / 10) / 10, 99).toFixed(1)
+          : (absScore / 100).toFixed(2)
+      ).toString();
+    })
     .with("mate", () => `M${Math.abs(score.value)}`)
     .with("dtz", () => `DTZ${Math.abs(score.value)}`)
     .exhaustive();

From 3c5fe1887f44c1d30117644b31f7a9c49b7045c4 Mon Sep 17 00:00:00 2001
From: ekatwikz <ekatwikz@gmail.com>
Date: Wed, 15 May 2024 19:27:21 +0200
Subject: [PATCH 06/10] score bubble: increase width to 4.5rem

---
 src/components/panels/analysis/ScoreBubble.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/panels/analysis/ScoreBubble.tsx b/src/components/panels/analysis/ScoreBubble.tsx
index eed2ea0f..6710b092 100644
--- a/src/components/panels/analysis/ScoreBubble.tsx
+++ b/src/components/panels/analysis/ScoreBubble.tsx
@@ -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" ? "4.5rem" : "3.5rem",
           height: size === "md" ? "1.85rem" : "1.6rem",
         })}
         fz="0.5rem"
@@ -66,7 +66,7 @@ function ScoreBubble({
         textAlign: "center",
         padding: "0.15rem",
         borderRadius: theme.radius.sm,
-        width: size === "md" ? "4rem" : "3.5rem",
+        width: size === "md" ? "4.5rem" : "3.5rem",
         height: size === "md" ? "1.85rem" : "1.6rem",
         boxShadow: theme.shadows.md,
       })}

From 532db9ea2462d01fefd2a43f587fdcb792440514 Mon Sep 17 00:00:00 2001
From: ekatwikz <ekatwikz@gmail.com>
Date: Wed, 15 May 2024 19:27:42 +0200
Subject: [PATCH 07/10] score bubble: don't truncate value

---
 src/components/panels/analysis/ScoreBubble.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/panels/analysis/ScoreBubble.tsx b/src/components/panels/analysis/ScoreBubble.tsx
index 6710b092..18eaef29 100644
--- a/src/components/panels/analysis/ScoreBubble.tsx
+++ b/src/components/panels/analysis/ScoreBubble.tsx
@@ -88,7 +88,7 @@ function ScoreBubble({
             whiteSpace: "nowrap",
           })}
         >
-          {formatScore(score.value)}
+          {formatScore(score.value, false)}
         </Text>
       </Tooltip>
     </Box>

From 1f046b3e2099570a4634875bbb14440ebe76067c Mon Sep 17 00:00:00 2001
From: ekatwikz <ekatwikz@gmail.com>
Date: Fri, 17 May 2024 12:24:49 +0200
Subject: [PATCH 08/10] score bubble: increase width to 5rem

to display possible 5 digit cp values without overflowing
---
 src/components/panels/analysis/ScoreBubble.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/panels/analysis/ScoreBubble.tsx b/src/components/panels/analysis/ScoreBubble.tsx
index 18eaef29..1a124056 100644
--- a/src/components/panels/analysis/ScoreBubble.tsx
+++ b/src/components/panels/analysis/ScoreBubble.tsx
@@ -23,7 +23,7 @@ function ScoreBubble({
         style={(theme) => ({
           borderRadius: theme.radius.sm,
           boxShadow: theme.shadows.md,
-          width: size === "md" ? "4.5rem" : "3.5rem",
+          width: size === "md" ? "5.0rem" : "3.5rem",
           height: size === "md" ? "1.85rem" : "1.6rem",
         })}
         fz="0.5rem"
@@ -66,7 +66,7 @@ function ScoreBubble({
         textAlign: "center",
         padding: "0.15rem",
         borderRadius: theme.radius.sm,
-        width: size === "md" ? "4.5rem" : "3.5rem",
+        width: size === "md" ? "5.0rem" : "3.5rem",
         height: size === "md" ? "1.85rem" : "1.6rem",
         boxShadow: theme.shadows.md,
       })}

From 6406c70ca3b225a4c3f706981e52b4b12a9233f2 Mon Sep 17 00:00:00 2001
From: ekatwikz <ekatwikz@gmail.com>
Date: Fri, 17 May 2024 12:56:23 +0200
Subject: [PATCH 09/10] formatScore: invert default parameter

precision is more common throughout
---
 src/components/boards/EvalBar.tsx              | 6 +++---
 src/components/common/EvalChart.tsx            | 2 +-
 src/components/panels/analysis/BestMoves.tsx   | 2 +-
 src/components/panels/analysis/ScoreBubble.tsx | 4 ++--
 src/utils/score.ts                             | 8 ++++----
 src/utils/tests/score.test.ts                  | 8 ++++----
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/boards/EvalBar.tsx b/src/components/boards/EvalBar.tsx
index f3cfb7f1..cc270880 100644
--- a/src/components/boards/EvalBar.tsx
+++ b/src/components/boards/EvalBar.tsx
@@ -39,7 +39,7 @@ function EvalBar({
           py={3}
           mt={orientation === "black" ? "auto" : undefined}
         >
-          {score.value <= 0 && formatScore(score).replace(/\+|-/, "")}
+          {score.value <= 0 && formatScore(score, false).replace(/\+|-/, "")}
         </Text>
       </Box>,
       <Box
@@ -64,7 +64,7 @@ function EvalBar({
             whiteSpace: "nowrap",
           }}
         >
-          {score.value > 0 && formatScore(score).slice(1)}
+          {score.value > 0 && formatScore(score, false).slice(1)}
         </Text>
       </Box>,
     ];
@@ -78,7 +78,7 @@ function EvalBar({
     <Tooltip
       position="right"
       color={score && score.value < 0 ? "dark" : undefined}
-      label={score ? formatScore(score, false) : undefined}
+      label={score ? formatScore(score) : undefined}
       disabled={!score}
     >
       <Box
diff --git a/src/components/common/EvalChart.tsx b/src/components/common/EvalChart.tsx
index 7f11b72e..265e7970 100644
--- a/src/components/common/EvalChart.tsx
+++ b/src/components/common/EvalChart.tsx
@@ -77,7 +77,7 @@ function EvalChart(props: EvalChartProps) {
   function getEvalText(node: TreeNode, type: "cp" | "wdl"): string {
     if (node.score) {
       if (type === "cp") {
-        return `Advantage: ${formatScore(node.score.value, false)}`;
+        return `Advantage: ${formatScore(node.score.value)}`;
       }
       if (type === "wdl" && node.score.wdl) {
         return `
diff --git a/src/components/panels/analysis/BestMoves.tsx b/src/components/panels/analysis/BestMoves.tsx
index 6208b346..037232c9 100644
--- a/src/components/panels/analysis/BestMoves.tsx
+++ b/src/components/panels/analysis/BestMoves.tsx
@@ -370,7 +370,7 @@ function EngineTop({
                 Eval
               </Text>
               <Text fw="bold" fz="md">
-                {formatScore(engineVariations[0].score.value) ?? 0}
+                {formatScore(engineVariations[0].score.value, false) ?? 0}
               </Text>
             </Stack>
             <Stack align="center" gap={0}>
diff --git a/src/components/panels/analysis/ScoreBubble.tsx b/src/components/panels/analysis/ScoreBubble.tsx
index 1a124056..a3640546 100644
--- a/src/components/panels/analysis/ScoreBubble.tsx
+++ b/src/components/panels/analysis/ScoreBubble.tsx
@@ -74,7 +74,7 @@ function ScoreBubble({
       <Tooltip
         position="left"
         color={score.value.value < 0 ? "dark" : undefined}
-        label={formatScore(score.value, false)}
+        label={formatScore(score.value)}
       >
         <Text
           fw={700}
@@ -88,7 +88,7 @@ function ScoreBubble({
             whiteSpace: "nowrap",
           })}
         >
-          {formatScore(score.value, false)}
+          {formatScore(score.value)}
         </Text>
       </Tooltip>
     </Box>
diff --git a/src/utils/score.ts b/src/utils/score.ts
index 6c782010..22903a13 100644
--- a/src/utils/score.ts
+++ b/src/utils/score.ts
@@ -14,15 +14,15 @@ export const INITIAL_SCORE: Score = {
 
 const CP_CEILING = 1000;
 
-export function formatScore(score: ScoreValue, truncate = true): string {
+export function formatScore(score: ScoreValue, precise = true): string {
   let scoreText = match(score.type)
     .with("cp", () => {
       const absScore = Math.abs(score.value);
       return (
-        truncate
-          ? // idea from: https://github.com/lichess-org/lila/blob/e110605c138c1f6fec417ab9317968b32a928a16/ui/ceval/src/util.ts#L8
+        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)
-          : (absScore / 100).toFixed(2)
       ).toString();
     })
     .with("mate", () => `M${Math.abs(score.value)}`)
diff --git a/src/utils/tests/score.test.ts b/src/utils/tests/score.test.ts
index cfe0bfcf..85ecb094 100644
--- a/src/utils/tests/score.test.ts
+++ b/src/utils/tests/score.test.ts
@@ -8,15 +8,15 @@ import {
 } from "../score";
 
 test("should format a positive cp score correctly", () => {
-  expect(formatScore({ type: "cp", value: 50 })).toBe("+0.5");
+  expect(formatScore({ type: "cp", value: 50 })).toBe("+0.50");
 });
 
 test("should format a negative cp score correctly", () => {
-  expect(formatScore({ type: "cp", value: -50 })).toBe("-0.5");
+  expect(formatScore({ type: "cp", value: -50 })).toBe("-0.50");
 });
 
-test("should format a large cp score correctly", () => {
-  expect(formatScore({ type: "cp", value: 12345.67 })).toBe("+99.0");
+test("should truncate a large cp score correctly", () => {
+  expect(formatScore({ type: "cp", value: 12345.67 }, false)).toBe("+99.0");
 });
 
 test("should format a mate score correctly", () => {

From 3eb5d0743382f4243fa8f74b88a72ebb680ada92 Mon Sep 17 00:00:00 2001
From: ekatwikz <ekatwikz@gmail.com>
Date: Fri, 17 May 2024 12:57:06 +0200
Subject: [PATCH 10/10] score tests: fix non-integer cp val

---
 src/utils/tests/score.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/tests/score.test.ts b/src/utils/tests/score.test.ts
index 85ecb094..0c952f89 100644
--- a/src/utils/tests/score.test.ts
+++ b/src/utils/tests/score.test.ts
@@ -16,7 +16,7 @@ test("should format a negative cp score correctly", () => {
 });
 
 test("should truncate a large cp score correctly", () => {
-  expect(formatScore({ type: "cp", value: 12345.67 }, false)).toBe("+99.0");
+  expect(formatScore({ type: "cp", value: 20000 }, false)).toBe("+99.0");
 });
 
 test("should format a mate score correctly", () => {