fix : play board optimization

src/sections/analysis/hooks/useCurrentPosition.ts

@@ -0,0 +1,62 @@
+import {
+  boardAtom,
+  currentPositionAtom,
+  engineDepthAtom,
+  engineMultiPvAtom,
+  gameAtom,
+  gameEvalAtom,
+} from "@/sections/analysis/states";
+import { CurrentPosition, PositionEval } from "@/types/eval";
+import { useAtom, useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { useEngine } from "../../../hooks/useEngine";
+import { EngineName } from "@/types/enums";
+
+export const useCurrentPosition = (engineName?: EngineName) => {
+  const [currentPosition, setCurrentPosition] = useAtom(currentPositionAtom);
+  const engine = useEngine(engineName);
+  const gameEval = useAtomValue(gameEvalAtom);
+  const game = useAtomValue(gameAtom);
+  const board = useAtomValue(boardAtom);
+  const depth = useAtomValue(engineDepthAtom);
+  const multiPv = useAtomValue(engineMultiPvAtom);
+
+  useEffect(() => {
+    const position: CurrentPosition = {
+      lastMove: board.history({ verbose: true }).at(-1),
+    };
+
+    if (gameEval) {
+      const boardHistory = board.history();
+      const gameHistory = game.history();
+
+      if (
+        boardHistory.length <= gameHistory.length &&
+        gameHistory.slice(0, boardHistory.length).join() === boardHistory.join()
+      ) {
+        const evalIndex = board.history().length;
+
+        position.eval = gameEval.positions[evalIndex];
+        position.lastEval =
+          evalIndex > 0 ? gameEval.positions[evalIndex - 1] : undefined;
+      }
+    }
+
+    if (!position.eval && engine?.isReady()) {
+      const setPartialEval = (positionEval: PositionEval) => {
+        setCurrentPosition({ ...position, eval: positionEval });
+      };
+
+      engine.evaluatePositionWithUpdate({
+        fen: board.fen(),
+        depth,
+        multiPv,
+        setPartialEval,
+      });
+    }
+
+    setCurrentPosition(position);
+  }, [gameEval, board, game, engine, depth, multiPv, setCurrentPosition]);
+
+  return currentPosition;
+};

src/sections/analysis/reviewPanelBody/index.tsx

@@ -3,7 +3,7 @@ import { Grid, List, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, engineMultiPvAtom, gameAtom } from "../states";
 import LineEvaluation from "./lineEvaluation";
-import { useCurrentPosition } from "@/hooks/useCurrentPosition";
+import { useCurrentPosition } from "../hooks/useCurrentPosition";
 import { LineEval } from "@/types/eval";
 import { EngineName } from "@/types/enums";
 import EngineSettingsButton from "@/sections/engineSettings/engineSettingsButton";

src/sections/analysis/reviewPanelBody/opening.tsx

@@ -1,4 +1,4 @@
-import { useCurrentPosition } from "@/hooks/useCurrentPosition";
+import { useCurrentPosition } from "../hooks/useCurrentPosition";
 import { Grid, Typography } from "@mui/material";
 
 export default function Opening() {

src/sections/play/board/index.tsx

@@ -8,6 +8,7 @@ import {
   playableSquaresAtom,
   playerColorAtom,
   isGameInProgressAtom,
+  gameDataAtom,
 } from "../states";
 import { Square } from "react-chessboard/dist/chessboard/types";
 import { useChessActions } from "@/hooks/useChessActions";
@@ -18,10 +19,12 @@ import { Color, EngineName } from "@/types/enums";
 import SquareRenderer from "./squareRenderer";
 import { useEngine } from "@/hooks/useEngine";
 import { uciMoveParams } from "@/lib/chess";
+import { useGameData } from "@/hooks/useGameData";
 
 export default function Board() {
   const boardRef = useRef<HTMLDivElement>(null);
   const { boardSize } = useScreenSize();
+  const engine = useEngine(EngineName.Stockfish16);
   const game = useAtomValue(gameAtom);
   const playerColor = useAtomValue(playerColorAtom);
   const { makeMove: makeGameMove } = useChessActions(gameAtom);
@@ -29,7 +32,7 @@ export default function Board() {
   const setPlayableSquares = useSetAtom(playableSquaresAtom);
   const engineSkillLevel = useAtomValue(engineSkillLevelAtom);
   const isGameInProgress = useAtomValue(isGameInProgressAtom);
-  const engine = useEngine(EngineName.Stockfish16);
+  useGameData(gameAtom, gameDataAtom);
 
   const gameFen = game.fen();
   const isGameFinished = game.isGameOver();
@@ -129,7 +132,7 @@ export default function Board() {
         xs={12}
       >
         <Chessboard
-          id="AnalysisBoard"
+          id="PlayBoard"
           position={gameFen}
           onPieceDrop={onPieceDrop}
           boardOrientation={playerColor === Color.White ? "white" : "black"}

src/sections/play/board/squareRenderer.tsx

@@ -1,4 +1,8 @@
-import { clickedSquaresAtom, gameAtom, playableSquaresAtom } from "../states";
+import {
+  clickedSquaresAtom,
+  gameDataAtom,
+  playableSquaresAtom,
+} from "../states";
 import { useAtomValue } from "jotai";
 import { CSSProperties, forwardRef } from "react";
 import { CustomSquareProps } from "react-chessboard/dist/chessboard/types";
@@ -6,13 +10,12 @@ import { CustomSquareProps } from "react-chessboard/dist/chessboard/types";
 const SquareRenderer = forwardRef<HTMLDivElement, CustomSquareProps>(
   (props, ref) => {
     const { children, square, style } = props;
-    const game = useAtomValue(gameAtom);
     const clickedSquares = useAtomValue(clickedSquaresAtom);
     const playableSquares = useAtomValue(playableSquaresAtom);
+    const gameData = useAtomValue(gameDataAtom);
 
-    const lastMove = game.history({ verbose: true }).at(-1);
-    const fromSquare = lastMove?.from;
-    const toSquare = lastMove?.to;
+    const fromSquare = gameData.lastMove?.from;
+    const toSquare = gameData.lastMove?.to;
 
     const highlightSquareStyle: CSSProperties | undefined =
       clickedSquares.includes(square)

src/sections/play/states.ts

@@ -1,8 +1,13 @@
+import { GameData } from "@/hooks/useGameData";
 import { Color } from "@/types/enums";
 import { Chess } from "chess.js";
 import { atom } from "jotai";
 
 export const gameAtom = atom(new Chess());
+export const gameDataAtom = atom<GameData>({
+  history: [],
+  lastMove: undefined,
+});
 export const playerColorAtom = atom<Color>(Color.White);
 export const engineSkillLevelAtom = atom<number>(1);
 export const isGameInProgressAtom = atom(false);