fix : play board optimization

src/hooks/useGameData.ts

@@ -0,0 +1,24 @@
+import { Chess, Move } from "chess.js";
+import { PrimitiveAtom, useAtom, useAtomValue } from "jotai";
+import { useEffect } from "react";
+
+export interface GameData {
+  history: Move[];
+  lastMove: Move | undefined;
+}
+
+export const useGameData = (
+  gameAtom: PrimitiveAtom<Chess>,
+  gameDataAtom: PrimitiveAtom<GameData>
+) => {
+  const game = useAtomValue(gameAtom);
+  const [gameData, setGameData] = useAtom(gameDataAtom);
+
+  useEffect(() => {
+    const history = game.history({ verbose: true });
+    const lastMove = history.at(-1);
+    setGameData({ history, lastMove });
+  }, [game]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return gameData;
+};

src/sections/analysis/hooks/useCurrentPosition.ts

@@ -9,7 +9,7 @@ import {
 import { CurrentPosition, PositionEval } from "@/types/eval";
 import { useAtom, useAtomValue } from "jotai";
 import { useEffect } from "react";
-import { useEngine } from "./useEngine";
+import { useEngine } from "../../../hooks/useEngine";
 import { EngineName } from "@/types/enums";
 
 export const useCurrentPosition = (engineName?: EngineName) => {

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);