make arrow sizes dependent on eval (closes #231)

franciscoBSalgueiro · Feb 29, 2024 · 1848959 · 1848959
1 parent cf914f4
commit 1848959
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 7 deletions.
diff --git a/src/atoms/atoms.ts b/src/atoms/atoms.ts
@@ -336,12 +336,15 @@ export const engineMovesFamily = atomFamily(
 // returns the best moves of each engine for the current position
 export const bestMovesFamily = atomFamily(
   ({ fen, gameMoves }: { fen: string; gameMoves: string[] }) =>
-    atom<Map<number, string[][]>>((get) => {
+    atom<Map<number, { pv: string[]; winChance: number }[]>>((get) => {
       const tab = get(activeTabAtom);
       if (!tab) return new Map();
       const engines = get(loadableEnginesAtom);
       if (!(engines.state === "hasData")) return new Map();
-      const bestMoves = new Map<number, string[][]>();
+      const bestMoves = new Map<
+        number,
+        { pv: string[]; winChance: number }[]
+      >();
       let n = 0;
       for (const engine of engines.data.filter((e) => e.loaded)) {
         const engineMoves = get(
@@ -366,13 +369,16 @@ export const bestMovesFamily = atomFamily(
           bestMoves.set(
             n,
             moves
-              .filter((m) => {
+              .map((m) => {
                 const winChance = getWinChance(
                   normalizeScore(m.score, pos?.turn || "white"),
                 );
-                return winChance >= bestWinChange - 5;
+                return {
+                  pv: m.uciMoves,
+                  winChance,
+                };
               })
-              .map((m) => m.uciMoves),
+              .filter((m) => bestWinChange - m.winChance < 10),
           );
         }
         n++;

diff --git a/src/components/boards/Board.tsx b/src/components/boards/Board.tsx
@@ -79,11 +79,15 @@ import * as classes from "./Board.css";
 import EvalBar from "./EvalBar";
 import PromotionModal from "./PromotionModal";
 
+const LARGE_BRUSH = 11;
+const MEDIUM_BRUSH = 7.5;
+const SMALL_BRUSH = 4;
+
 interface ChessboardProps {
   dirty: boolean;
   currentNode: TreeNode;
   position: number[];
-  arrows: Map<number, string[][]>;
+  arrows: Map<number, { pv: string[]; winChance: number }[]>;
   headers: GameHeaders;
   root: TreeNode;
   editingMode: boolean;
@@ -210,7 +214,8 @@ function Board({
     const entries = Array.from(arrows.entries()).sort((a, b) => a[0] - b[0]);
     for (const [i, moves] of entries) {
       if (i < 4) {
-        for (const [j, pv] of moves.entries()) {
+        const bestWinChance = moves[0].winChance;
+        for (const [j, { pv, winChance }] of moves.entries()) {
           const posClone = pos.clone();
           let prevSquare = null;
           for (const [ii, uci] of pv.entries()) {
@@ -222,6 +227,17 @@ function Board({
             if (prevSquare === null) {
               prevSquare = from;
             }
+            const brushSize = match(bestWinChance - winChance)
+              .when(
+                (d) => d < 2.5,
+                () => LARGE_BRUSH,
+              )
+              .when(
+                (d) => d < 5,
+                () => MEDIUM_BRUSH,
+              )
+              .otherwise(() => SMALL_BRUSH);
+
             if (
               ii === 0 ||
               (showConsecutiveArrows && j === 0 && ii % 2 === 0)
@@ -235,6 +251,9 @@ function Board({
                   orig: from,
                   dest: to,
                   brush: j === 0 ? arrowColors[i].strong : arrowColors[i].pale,
+                  modifiers: {
+                    lineWidth: brushSize,
+                  },
                 });
                 prevSquare = to;
               } else {