fix : play board optimization

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