feat : add arrow opt out options

src/hooks/useEngine.ts

@@ -1,15 +1,18 @@
 import { Stockfish16 } from "@/lib/engine/stockfish16";
 import { UciEngine } from "@/lib/engine/uciEngine";
+import { engineMultiPvAtom } from "@/sections/analysis/states";
 import { EngineName } from "@/types/enums";
+import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
 
 export const useEngine = (engineName: EngineName) => {
   const [engine, setEngine] = useState<UciEngine | null>(null);
+  const multiPv = useAtomValue(engineMultiPvAtom);
 
   const pickEngine = (engine: EngineName): UciEngine => {
     switch (engine) {
       case EngineName.Stockfish16:
-        return new Stockfish16();
+        return new Stockfish16(multiPv);
     }
   };
 

src/lib/engine/stockfish16.ts

@@ -2,14 +2,14 @@ import { EngineName } from "@/types/enums";
 import { UciEngine } from "./uciEngine";
 
 export class Stockfish16 extends UciEngine {
-  constructor() {
+  constructor(multiPv: number) {
     const isWasmSupported = Stockfish16.isWasmSupported();
 
     const enginePath = isWasmSupported
       ? "engines/stockfish-wasm/stockfish-nnue-16-single.js"
       : "engines/stockfish.js";
 
-    super(EngineName.Stockfish16, enginePath);
+    super(EngineName.Stockfish16, enginePath, multiPv);
   }
 
   public static isWasmSupported() {

src/lib/engine/uciEngine.ts

@@ -5,10 +5,11 @@ export abstract class UciEngine {
   private worker: Worker;
   private ready = false;
   private engineName: EngineName;
-  private multiPv = 3;
+  private multiPv: number;
 
-  constructor(engineName: EngineName, enginePath: string) {
+  constructor(engineName: EngineName, enginePath: string, multiPv: number) {
     this.engineName = engineName;
+    this.multiPv = multiPv;
 
     this.worker = new Worker(enginePath);
 
@@ -17,7 +18,7 @@ export abstract class UciEngine {
 
   public async init(): Promise<void> {
     await this.sendCommands(["uci"], "uciok");
-    await this.setMultiPv(3, false);
+    await this.setMultiPv(this.multiPv, false);
     this.ready = true;
     console.log(`${this.engineName} initialized`);
   }
@@ -81,24 +82,21 @@ export abstract class UciEngine {
   public async evaluateGame(
     fens: string[],
     depth = 16,
-    multiPv = 3
+    multiPv = this.multiPv
   ): Promise<GameEval> {
     this.throwErrorIfNotReady();
     this.ready = false;
 
-    await this.setMultiPv(multiPv, false);
     await this.sendCommands(["ucinewgame", "isready"], "readyok");
     this.worker.postMessage("position startpos");
 
     const moves: MoveEval[] = [];
     for (const fen of fens) {
-      console.log(`Evaluating position: ${fen}`);
-      const result = await this.evaluatePosition(fen, depth, false);
+      const result = await this.evaluatePosition(fen, depth, multiPv, false);
       moves.push(result);
     }
 
     this.ready = true;
-    console.log(moves);
     return {
       moves,
       accuracy: { white: 82.34, black: 67.49 }, // TODO: Calculate accuracy
@@ -114,12 +112,16 @@ export abstract class UciEngine {
   public async evaluatePosition(
     fen: string,
     depth = 16,
+    multiPv = this.multiPv,
     checkIsReady = true
   ): Promise<MoveEval> {
     if (checkIsReady) {
       this.throwErrorIfNotReady();
     }
 
+    await this.setMultiPv(multiPv, checkIsReady);
+
+    console.log(`Evaluating position: ${fen}`);
     const results = await this.sendCommands(
       [`position fen ${fen}`, `go depth ${depth}`],
       "bestmove"

src/pages/database.tsx

@@ -60,11 +60,15 @@ export default function GameDatabase() {
         width: 150,
       },
       {
-        field: "white",
+        field: "whiteLabel",
         headerName: "White",
-        width: 150,
+        width: 200,
         headerAlign: "center",
         align: "center",
+        valueGetter: (params) =>
+          `${params.row.white.name ?? "Unknown"} (${
+            params.row.white.rating ?? "?"
+          })`,
       },
       {
         field: "result",
@@ -74,11 +78,15 @@ export default function GameDatabase() {
         width: 100,
       },
       {
-        field: "black",
+        field: "blackLabel",
         headerName: "Black",
-        width: 150,
+        width: 200,
         headerAlign: "center",
         align: "center",
+        valueGetter: (params) =>
+          `${params.row.black.name ?? "Unknown"} (${
+            params.row.black.rating ?? "?"
+          })`,
       },
       {
         field: "eval",
@@ -136,15 +144,14 @@ export default function GameDatabase() {
   );
 
   return (
-    <Grid container rowSpacing={3} justifyContent="center" alignItems="center">
     <Grid
-        item
       container
-        xs={12}
       justifyContent="center"
       alignItems="center"
-        spacing={4}
+      gap={4}
+      marginTop={6}
     >
+      <Grid item container xs={12} justifyContent="center" alignItems="center">
         <Grid item container justifyContent="center" sx={{ maxWidth: "250px" }}>
           <LoadGameButton />
         </Grid>
@@ -152,7 +159,7 @@ export default function GameDatabase() {
 
       <Grid item container xs={12} justifyContent="center" alignItems="center">
         <Typography variant="subtitle2">
-          You have {0} games in your database
+          You have {games.length} games in your database
         </Typography>
       </Grid>
 

src/pages/index.tsx

@@ -1,10 +1,37 @@
+import { useChessActions } from "@/hooks/useChess";
 import Board from "@/sections/analysis/board";
 import ReviewPanelBody from "@/sections/analysis/reviewPanelBody";
 import ReviewPanelHeader from "@/sections/analysis/reviewPanelHeader";
 import ReviewPanelToolBar from "@/sections/analysis/reviewPanelToolbar";
+import {
+  boardAtom,
+  boardOrientationAtom,
+  gameAtom,
+  gameEvalAtom,
+} from "@/sections/analysis/states";
 import { Grid } from "@mui/material";
+import { Chess } from "chess.js";
+import { useSetAtom } from "jotai";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 export default function GameReport() {
+  const boardActions = useChessActions(boardAtom);
+  const gameActions = useChessActions(gameAtom);
+  const setEval = useSetAtom(gameEvalAtom);
+  const setBoardOrientation = useSetAtom(boardOrientationAtom);
+  const router = useRouter();
+  const { gameId } = router.query;
+
+  useEffect(() => {
+    if (!gameId) {
+      boardActions.reset();
+      setEval(undefined);
+      setBoardOrientation(true);
+      gameActions.setPgn(new Chess().pgn());
+    }
+  }, [gameId]);
+
   return (
     <Grid
       container

src/sections/analysis/board/index.tsx

@@ -1,7 +1,12 @@
 import { Grid } from "@mui/material";
 import { Chessboard } from "react-chessboard";
 import { useAtomValue } from "jotai";
-import { boardAtom, boardOrientationAtom } from "../states";
+import {
+  boardAtom,
+  boardOrientationAtom,
+  showBestMoveArrowAtom,
+  showPlayerMoveArrowAtom,
+} from "../states";
 import { Arrow, Square } from "react-chessboard/dist/chessboard/types";
 import { useChessActions } from "@/hooks/useChess";
 import { useCurrentMove } from "@/hooks/useCurrentMove";
@@ -11,6 +16,8 @@ import PlayerInfo from "./playerInfo";
 export default function Board() {
   const board = useAtomValue(boardAtom);
   const boardOrientation = useAtomValue(boardOrientationAtom);
+  const showBestMoveArrow = useAtomValue(showBestMoveArrowAtom);
+  const showPlayerMoveArrow = useAtomValue(showPlayerMoveArrowAtom);
   const boardActions = useChessActions(boardAtom);
   const currentMove = useCurrentMove();
 
@@ -29,25 +36,37 @@ export default function Board() {
   };
 
   const customArrows: Arrow[] = useMemo(() => {
-    if (!currentMove?.lastEval) return [];
+    const arrows: Arrow[] = [];
 
+    if (currentMove?.lastEval && showBestMoveArrow) {
       const bestMoveArrow = [
         currentMove.lastEval.bestMove.slice(0, 2),
         currentMove.lastEval.bestMove.slice(2, 4),
         "#3aab18",
       ] as Arrow;
 
-    if (
-      !currentMove.from ||
-      !currentMove.to ||
-      (currentMove.from === bestMoveArrow[0] &&
-        currentMove.to === bestMoveArrow[1])
-    ) {
-      return [bestMoveArrow];
+      arrows.push(bestMoveArrow);
     }
 
-    return [[currentMove.from, currentMove.to, "#ffaa00"], bestMoveArrow];
-  }, [currentMove]);
+    if (currentMove.from && currentMove.to && showPlayerMoveArrow) {
+      const playerMoveArrow: Arrow = [
+        currentMove.from,
+        currentMove.to,
+        "#ffaa00",
+      ];
+
+      if (
+        arrows.every(
+          (arrow) =>
+            arrow[0] !== playerMoveArrow[0] || arrow[1] !== playerMoveArrow[1]
+        )
+      ) {
+        arrows.push(playerMoveArrow);
+      }
+    }
+
+    return arrows;
+  }, [currentMove, showBestMoveArrow, showPlayerMoveArrow]);
 
   return (
     <Grid
@@ -69,7 +88,7 @@ export default function Board() {
         maxWidth={"80vh"}
       >
         <Chessboard
-          id="BasicBoard"
+          id="AnalysisBoard"
           position={board.fen()}
           onPieceDrop={onPieceDrop}
           boardOrientation={boardOrientation ? "white" : "black"}

src/sections/analysis/reviewPanelHeader/analyzePanel.tsx

@@ -40,6 +40,7 @@ export default function AnalyzePanel() {
       engineDepth,
       engineMultiPv
     );
+    console.log(newGameEval);
     setEval(newGameEval);
 
     setEvaluationInProgress(false);

src/sections/analysis/reviewPanelHeader/gamePanel/index.tsx

@@ -1,7 +1,7 @@
 import { Grid, Typography } from "@mui/material";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { useAtomValue } from "jotai";
-import { gameAtom } from "../states";
+import { gameAtom } from "../../states";
 import PlayerInfo from "./playerInfo";
 
 export default function GamePanel() {
@@ -12,7 +12,14 @@ export default function GamePanel() {
 
   if (!hasGameInfo) {
     return (
-      <Grid item container xs={12} justifyContent="center" alignItems="center">
+      <Grid
+        item
+        container
+        xs={12}
+        justifyContent="center"
+        alignItems="center"
+        marginY={1}
+      >
         <Typography variant="h6">No game loaded</Typography>
       </Grid>
     );

src/sections/analysis/reviewPanelHeader/gamePanel/playerInfo.tsx

@@ -1,7 +1,7 @@
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
-import { gameAtom } from "../states";
+import { gameAtom } from "../../states";
 
 interface Props {
   color: "white" | "black";

src/sections/analysis/reviewPanelHeader/loadGame.tsx

@@ -54,7 +54,7 @@ export default function LoadGame() {
       <LoadGameButton
         label={isGameLoaded ? "Load another game" : "Load game"}
         setGame={async (game) => {
-          await router.push("");
+          await router.push("/");
           resetAndSetGamePgn(game.pgn());
         }}
       />

src/sections/analysis/reviewPanelToolbar/flipBoardButton.tsx

@@ -1,14 +1,16 @@
 import { useSetAtom } from "jotai";
 import { boardOrientationAtom } from "../states";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import { Icon } from "@iconify/react";
 
 export default function FlipBoardButton() {
   const setBoardOrientation = useSetAtom(boardOrientationAtom);
 
   return (
+    <Tooltip title="Flip board">
       <IconButton onClick={() => setBoardOrientation((prev) => !prev)}>
         <Icon icon="eva:flip-fill" />
       </IconButton>
+    </Tooltip>
   );
 }

src/sections/analysis/reviewPanelToolbar/goToLastPositionButton.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@iconify/react";
-import { IconButton } from "@mui/material";
+import { Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
 import { useChessActions } from "@/hooks/useChess";
@@ -15,6 +15,8 @@ export default function GoToLastPositionButton() {
   const isButtonDisabled = boardHistory >= gameHistory;
 
   return (
+    <Tooltip title="Go to final position">
+      <Grid>
         <IconButton
           onClick={() => {
             if (isButtonDisabled) return;
@@ -24,5 +26,7 @@ export default function GoToLastPositionButton() {
         >
           <Icon icon="ri:skip-forward-line" />
         </IconButton>
+      </Grid>
+    </Tooltip>
   );
 }

src/sections/analysis/reviewPanelToolbar/index.tsx

@@ -1,7 +1,18 @@
-import { Divider, Grid, IconButton } from "@mui/material";
+import {
+  Checkbox,
+  Divider,
+  FormControlLabel,
+  Grid,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
 import { Icon } from "@iconify/react";
-import { useAtomValue } from "jotai";
-import { boardAtom } from "../states";
+import { useAtom, useAtomValue } from "jotai";
+import {
+  boardAtom,
+  showBestMoveArrowAtom,
+  showPlayerMoveArrowAtom,
+} from "../states";
 import { useChessActions } from "@/hooks/useChess";
 import FlipBoardButton from "./flipBoardButton";
 import NextMoveButton from "./nextMoveButton";
@@ -9,6 +20,8 @@ import GoToLastPositionButton from "./goToLastPositionButton";
 import SaveButton from "./saveButton";
 
 export default function ReviewPanelToolBar() {
+  const [showBestMove, setShowBestMove] = useAtom(showBestMoveArrowAtom);
+  const [showPlayerMove, setShowPlayerMove] = useAtom(showPlayerMoveArrowAtom);
   const board = useAtomValue(boardAtom);
   const boardActions = useChessActions(boardAtom);
 
@@ -21,19 +34,27 @@ export default function ReviewPanelToolBar() {
       <Grid container item justifyContent="center" alignItems="center" xs={12}>
         <FlipBoardButton />
 
+        <Tooltip title="Reset board">
+          <Grid>
             <IconButton
               onClick={() => boardActions.reset()}
               disabled={boardHistory.length === 0}
             >
               <Icon icon="ri:skip-back-line" />
             </IconButton>
+          </Grid>
+        </Tooltip>
 
+        <Tooltip title="Go to previous move">
+          <Grid>
             <IconButton
               onClick={() => boardActions.undo()}
               disabled={boardHistory.length === 0}
             >
               <Icon icon="ri:arrow-left-s-line" height={30} />
             </IconButton>
+          </Grid>
+        </Tooltip>
 
         <NextMoveButton />
 
@@ -41,6 +62,37 @@ export default function ReviewPanelToolBar() {
 
         <SaveButton />
       </Grid>
+
+      <Grid
+        container
+        item
+        justifyContent="space-evenly"
+        alignItems="center"
+        xs={12}
+        marginY={3}
+        gap={3}
+      >
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={showBestMove}
+              onChange={(_, checked) => setShowBestMove(checked)}
+            />
+          }
+          label="Show best move green arrow"
+          sx={{ marginX: 0 }}
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={showPlayerMove}
+              onChange={(_, checked) => setShowPlayerMove(checked)}
+            />
+          }
+          label="Show player move yellow arrow"
+          sx={{ marginX: 0 }}
+        />
+      </Grid>
     </>
   );
 }

src/sections/analysis/reviewPanelToolbar/nextMoveButton.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "@iconify/react";
-import { IconButton } from "@mui/material";
+import { Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom } from "../states";
 import { useChessActions } from "@/hooks/useChess";
@@ -32,11 +32,15 @@ export default function NextMoveButton() {
   };
 
   return (
+    <Tooltip title="Go to next move">
+      <Grid>
         <IconButton
           onClick={() => addNextGameMoveToBoard()}
           disabled={!isButtonEnabled}
         >
           <Icon icon="ri:arrow-right-s-line" height={30} />
         </IconButton>
+      </Grid>
+    </Tooltip>
   );
 }

src/sections/analysis/reviewPanelToolbar/saveButton.tsx

@@ -1,6 +1,6 @@
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { Icon } from "@iconify/react";
-import { IconButton } from "@mui/material";
+import { Grid, IconButton, Tooltip } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { useRouter } from "next/router";
 import { boardAtom, gameAtom, gameEvalAtom } from "../states";
@@ -39,13 +39,21 @@ export default function SaveButton() {
   return (
     <>
       {gameFromUrl ? (
+        <Tooltip title="Game saved in database">
+          <Grid>
             <IconButton disabled={true}>
               <Icon icon="ri:folder-check-line" />
             </IconButton>
+          </Grid>
+        </Tooltip>
       ) : (
+        <Tooltip title="Save game">
+          <Grid>
             <IconButton onClick={handleSave} disabled={!enableSave}>
               <Icon icon="ri:save-3-line" />
             </IconButton>
+          </Grid>
+        </Tooltip>
       )}
     </>
   );

src/sections/analysis/states.ts

@@ -5,7 +5,10 @@ import { atom } from "jotai";
 export const gameEvalAtom = atom<GameEval | undefined>(undefined);
 export const gameAtom = atom(new Chess());
 export const boardAtom = atom(new Chess());
+
 export const boardOrientationAtom = atom(true);
+export const showBestMoveArrowAtom = atom(true);
+export const showPlayerMoveArrowAtom = atom(true);
 
 export const engineDepthAtom = atom(16);
 export const engineMultiPvAtom = atom(3);