add color to engines

franciscoBSalgueiro · Nov 29, 2023 · 5392644 · 5392644
1 parent f7b630a
commit 5392644
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 34 deletions.
diff --git a/src/atoms/atoms.ts b/src/atoms/atoms.ts
@@ -228,6 +228,11 @@ const pgnOptionsFamily = atomFamily((tab: string) =>
 );
 export const currentPgnOptionsAtom = tabValue(pgnOptionsFamily);
 
+const arrowsFamily = atomFamily((tab: string) =>
+    atom(new Map<number, string[]>())
+);
+export const currentArrowsAtom = tabValue(arrowsFamily);
+
 // Game
 
 type GameState = "settingUp" | "playing" | "gameOver";

diff --git a/src/components/boards/Board.tsx b/src/components/boards/Board.tsx
@@ -63,11 +63,12 @@ import EvalBar from "./EvalBar";
 import PromotionModal from "./PromotionModal";
 import "./board.css";
 import { match } from "ts-pattern";
+import { arrowColors } from "../panels/analysis/BestMoves";
 
 interface ChessboardProps {
   dirty: boolean;
   currentNode: TreeNode;
-  arrows: string[];
+  arrows: Map<number, string[]>;
   headers: GameHeaders;
   root: TreeNode;
   editingMode: boolean;
@@ -211,17 +212,28 @@ function Board({
     }
   }
 
-  let shapes: DrawShape[] =
-    showArrows && arrows.length > 0
-      ? arrows.map((move, i) => {
+  let shapes: DrawShape[] = [];
+  if (showArrows && arrows.size > 0) {
+    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, move] of moves.entries()) {
           const { from, to } = parseUci(move);
-          return {
+          if (shapes.find((s) => s.orig === from && s.dest === to)) continue;
+          shapes.push({
             orig: from,
             dest: to,
-            brush: i === 0 ? "paleBlue" : "paleGrey",
-          };
-        })
-      : [];
+            brush:
+              j === 0
+                ? arrowColors[i]
+                : "pale" +
+                  arrowColors[i].charAt(0).toUpperCase() +
+                  arrowColors[i].slice(1),
+          });
+        }
+      }
+    }
+  }
 
   if (currentNode.shapes.length > 0) {
     shapes = shapes.concat(currentNode.shapes);

diff --git a/src/components/boards/BoardAnalysis.tsx b/src/components/boards/BoardAnalysis.tsx
@@ -31,6 +31,7 @@ import GameNotation from "./GameNotation";
 import { useAtom, useAtomValue } from "jotai";
 import {
   autoSaveAtom,
+  currentArrowsAtom,
   currentTabAtom,
   currentTabSelectedAtom,
 } from "@/atoms/atoms";
@@ -42,7 +43,7 @@ import { getMainLine } from "@/utils/chess";
 function BoardAnalysis() {
   const [editingMode, toggleEditingMode] = useToggle();
   const [reportingMode, toggleReportingMode] = useToggle();
-  const [arrows, setArrows] = useState<string[]>([]);
+  const [arrows, setArrows] = useAtom(currentArrowsAtom);
   const [currentTab, setCurrentTab] = useAtom(currentTabAtom);
   const autoSave = useAtomValue(autoSaveAtom);
   const dispatch = useContext(TreeDispatchContext);
@@ -55,7 +56,7 @@ function BoardAnalysis() {
   const currentNode = getNodeAtPath(root, position);
 
   useEffect(() => {
-    setArrows([]);
+    setArrows(new Map());
   }, [position]);
 
   const saveFile = useCallback(async () => {
@@ -166,7 +167,6 @@ function BoardAnalysis() {
             <Tabs.Panel value="analysis" sx={{ flex: 1, overflowY: "hidden" }}>
               <Suspense>
                 <AnalysisPanel
-                  setArrows={setArrows}
                   toggleReportingMode={toggleReportingMode}
                   inProgress={inProgress}
                   setInProgress={setInProgress}

diff --git a/src/components/panels/analysis/AnalysisPanel.tsx b/src/components/panels/analysis/AnalysisPanel.tsx
@@ -35,12 +35,10 @@ import LogsPanel from "./LogsPanel";
 import EvalChart from "@/components/common/EvalChart";
 
 function AnalysisPanel({
-  setArrows,
   toggleReportingMode,
   inProgress,
   setInProgress,
 }: {
-  setArrows: (arrows: string[]) => void;
   toggleReportingMode: () => void;
   inProgress: boolean;
   setInProgress: React.Dispatch<React.SetStateAction<boolean>>;
@@ -129,7 +127,6 @@ function AnalysisPanel({
                         <BestMoves
                           id={i}
                           engine={engine}
-                          setArrows={setArrows}
                           fen={currentNode.fen}
                           halfMoves={currentNode.halfMoves}
                         />

diff --git a/src/components/panels/analysis/BestMoves.tsx b/src/components/panels/analysis/BestMoves.tsx
@@ -1,5 +1,6 @@
 import {
   activeTabAtom,
+  currentArrowsAtom,
   engineMovesFamily,
   tabEngineSettingsFamily,
 } from "@/atoms/atoms";
@@ -55,18 +56,18 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
+export const arrowColors = ["blue", "green", "red", "yellow"];
+
 interface BestMovesProps {
   id: number;
   engine: Engine;
-  setArrows: (arrows: string[]) => void;
   fen: string;
   halfMoves: number;
 }
 
 export default function BestMovesComponent({
   id,
   engine,
-  setArrows,
   fen,
   halfMoves,
 }: BestMovesProps) {
@@ -78,6 +79,7 @@ export default function BestMovesComponent({
   const [settings, setSettings] = useAtom(
     tabEngineSettingsFamily({ engine: engine, tab: activeTab! })
   );
+  const [, setArrows] = useAtom(currentArrowsAtom);
 
   const engineVariations = useMemo(() => ev.get(fen) ?? [], [ev, fen]);
 
@@ -116,13 +118,14 @@ export default function BestMovesComponent({
               type: "SET_SCORE",
               payload: ev[0].score,
             });
-            if (id === 0) {
-              setArrows(
-                ev.map((ev) => {
-                  return ev.uciMoves[0];
-                })
+            setArrows((prev) => {
+              const newMap = new Map(prev);
+              newMap.set(
+                id,
+                ev.map((ev) => ev.uciMoves[0])
               );
-            }
+              return newMap;
+            });
           });
         }
       });
@@ -166,6 +169,14 @@ export default function BestMovesComponent({
                   newMap.set(fen, bestMoves);
                   return newMap;
                 });
+                setArrows((prev) => {
+                  const newMap = new Map(prev);
+                  newMap.set(
+                    id,
+                    bestMoves.map((ev) => ev.uciMoves[0])
+                  );
+                  return newMap;
+                });
               }
             });
         }
@@ -185,7 +196,7 @@ export default function BestMovesComponent({
             <ActionIcon
               size="lg"
               variant={settings.enabled ? "filled" : "transparent"}
-              color={theme.primaryColor}
+              color={id < 4 ? arrowColors[id] : theme.primaryColor}
               onClick={() => {
                 setSettings((prev) => ({ ...prev, enabled: !prev.enabled }));
               }}
@@ -280,6 +291,7 @@ export default function BestMovesComponent({
             engine={engine}
             settings={settings}
             setSettings={setSettings}
+            color={id < 4 ? arrowColors[id] : theme.primaryColor}
           />
         </Collapse>
 
@@ -288,8 +300,7 @@ export default function BestMovesComponent({
           animate={progress < 100 && settings.enabled && !isGameOver}
           size="xs"
           striped={progress < 100 && !settings.enabled}
-          // color={threat ? "red" : "blue"}
-          color={threat ? "red" : theme.primaryColor}
+          color={id < 4 ? arrowColors[id] : theme.primaryColor}
         />
         <Accordion.Panel>
           <Table>

diff --git a/src/components/panels/analysis/CoresSlider.tsx b/src/components/panels/analysis/CoresSlider.tsx
@@ -1,11 +1,13 @@
 import { SegmentedControl, useMantineTheme } from "@mantine/core";
 
-export default function CoresSlide({
+export default function CoresSlider({
   value,
   setValue,
+  color,
 }: {
   value: number;
   setValue: (v: number) => void;
+  color?: string;
 }) {
   const theme = useMantineTheme();
   const values = Array.from(
@@ -16,7 +18,7 @@ export default function CoresSlide({
   return (
     <SegmentedControl
       size="xs"
-      color={theme.primaryColor}
+      color={color || theme.primaryColor}
       value={value.toString()}
       onChange={(v) => setValue(parseInt(v))}
       data={values.map((v) => v.toString())}

diff --git a/src/components/panels/analysis/DepthSlider.tsx b/src/components/panels/analysis/DepthSlider.tsx
@@ -7,9 +7,11 @@ import { useStyles } from "./styles";
 export default function DepthSlider({
   value,
   setValue,
+  color,
 }: {
   value: GoMode;
   setValue: (v: GoMode) => void;
+  color?: string;
 }) {
   const [tempValue, setTempValue] = useState(value);
   const MARKS = [
@@ -46,6 +48,7 @@ export default function DepthSlider({
         min={10}
         max={60}
         value={v}
+        color={color}
         label={(v) => (v === 60 ? "Infinite" : v)}
         onChange={(v) => handleSliderChange(v, setTempValue)}
         onChangeEnd={(v) => handleSliderChange(v, setValue)}

diff --git a/src/components/panels/analysis/EngineSettingsForm.tsx b/src/components/panels/analysis/EngineSettingsForm.tsx
@@ -4,6 +4,7 @@ import {
   Button,
   Center,
   Group,
+  MantineColor,
   Modal,
   NumberInput,
   Select,
@@ -14,7 +15,6 @@ import {
   Tooltip,
 } from "@mantine/core";
 import React, { memo, useState } from "react";
-import CoresSlide from "./CoresSlider";
 import DepthSlider from "./DepthSlider";
 import LinesSlider from "./LinesSlider";
 import {
@@ -30,18 +30,21 @@ import { appDataDir, resolve } from "@tauri-apps/api/path";
 import { readTextFile, writeTextFile } from "@tauri-apps/api/fs";
 import { Engine } from "@/utils/engines";
 import { useAtom } from "jotai";
+import CoresSlider from "./CoresSlider";
 
 interface EngineSettingsProps {
   engine: Engine;
   settings: EngineSettings;
   setSettings: (fn: (prev: EngineSettings) => EngineSettings) => void;
+  color?: MantineColor;
   minimal?: boolean;
 }
 
 function EngineSettingsForm({
   engine,
   settings,
   setSettings,
+  color,
   minimal,
 }: EngineSettingsProps) {
   const [advancedOptions, setAdvancedOptions] = useState(false);
@@ -118,6 +121,7 @@ function EngineSettingsForm({
               <DepthSlider
                 value={settings.go}
                 setValue={(v) => setSettings((prev) => ({ ...prev, go: v }))}
+                color={color}
               />
             </Group>
           ) : (
@@ -156,6 +160,7 @@ function EngineSettingsForm({
                     options: { ...prev.options, multipv: v },
                   }))
                 }
+                color={color}
               />
             </Group>
           )}
@@ -164,14 +169,15 @@ function EngineSettingsForm({
             <Text size="sm" fw="bold">
               Number of cores
             </Text>
-            <CoresSlide
+            <CoresSlider
               value={settings.options.threads}
               setValue={(v) =>
                 setSettings((prev) => ({
                   ...prev,
                   options: { ...prev.options, threads: v },
                 }))
               }
+              color={color}
             />
           </Group>
 
@@ -187,6 +193,7 @@ function EngineSettingsForm({
                   options: { ...prev.options, hash: v },
                 }))
               }
+              color={color}
             />
           </Group>
         </Stack>

diff --git a/src/components/panels/analysis/HashSlider.tsx b/src/components/panels/analysis/HashSlider.tsx
@@ -9,9 +9,11 @@ import { useStyles } from "./styles";
 export default function HashSlider({
   value,
   setValue,
+  color,
 }: {
   value: number;
   setValue: (v: number) => void;
+  color?: string;
 }) {
   const [tempValue, setTempValue] = useState(Math.log2(value));
   const { classes } = useStyles();
@@ -29,6 +31,7 @@ export default function HashSlider({
       <Slider
         min={0}
         max={Math.log2(memorySize || 16)}
+        color={color}
         value={tempValue}
         onChange={setTempValue}
         onChangeEnd={(v) => setValue(2 ** v)}

diff --git a/src/components/panels/analysis/LinesSlider.tsx b/src/components/panels/analysis/LinesSlider.tsx
@@ -3,16 +3,18 @@ import { SegmentedControl, useMantineTheme } from "@mantine/core";
 export default function DepthSlider({
   value,
   setValue,
+  color,
 }: {
   value: number;
   setValue: (v: number) => void;
+  color?: string;
 }) {
   const theme = useMantineTheme();
 
   return (
     <SegmentedControl
       size="xs"
-      color={theme.primaryColor}
+      color={color || theme.primaryColor}
       data={["1", "2", "3", "4", "5"]}
       value={value.toString()}
       onChange={(v) => setValue(parseInt(v))}

diff --git a/src/components/panels/analysis/styles.ts b/src/components/panels/analysis/styles.ts
@@ -11,8 +11,8 @@ export const useStyles = createStyles((theme) => ({
         backgroundColor: theme.white,
         color: theme.colors.gray[5],
         border:
-            rem(1) +
-            " solid " +
-            "light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-2))",
+            rem(1) + " solid " + theme.colorScheme === "dark"
+                ? theme.colors.dark[2]
+                : theme.colors.gray[3],
     },
 }));