From aca8910bab6114f8aaa0bcded508a7aeac5e2b53 Mon Sep 17 00:00:00 2001 From: GuillaumeSD Date: Wed, 20 Mar 2024 00:56:40 +0100 Subject: [PATCH] fix : play board optimization --- src/hooks/useGameData.ts | 24 +++++++++++++++++++ .../analysis}/hooks/useCurrentPosition.ts | 2 +- .../analysis/reviewPanelBody/index.tsx | 2 +- .../analysis/reviewPanelBody/opening.tsx | 2 +- src/sections/play/board/index.tsx | 7 ++++-- src/sections/play/board/squareRenderer.tsx | 13 ++++++---- src/sections/play/states.ts | 5 ++++ 7 files changed, 45 insertions(+), 10 deletions(-) create mode 100644 src/hooks/useGameData.ts rename src/{ => sections/analysis}/hooks/useCurrentPosition.ts (97%) diff --git a/src/hooks/useGameData.ts b/src/hooks/useGameData.ts new file mode 100644 index 0000000..ea25f60 --- /dev/null +++ b/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, + gameDataAtom: PrimitiveAtom +) => { + 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; +}; diff --git a/src/hooks/useCurrentPosition.ts b/src/sections/analysis/hooks/useCurrentPosition.ts similarity index 97% rename from src/hooks/useCurrentPosition.ts rename to src/sections/analysis/hooks/useCurrentPosition.ts index 61b13d6..787b7f9 100644 --- a/src/hooks/useCurrentPosition.ts +++ b/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) => { diff --git a/src/sections/analysis/reviewPanelBody/index.tsx b/src/sections/analysis/reviewPanelBody/index.tsx index 6e7828d..47070fd 100644 --- a/src/sections/analysis/reviewPanelBody/index.tsx +++ b/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"; diff --git a/src/sections/analysis/reviewPanelBody/opening.tsx b/src/sections/analysis/reviewPanelBody/opening.tsx index 60aed5a..57f1f30 100644 --- a/src/sections/analysis/reviewPanelBody/opening.tsx +++ b/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() { diff --git a/src/sections/play/board/index.tsx b/src/sections/play/board/index.tsx index 4000017..59b1d44 100644 --- a/src/sections/play/board/index.tsx +++ b/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(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} > ( (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) diff --git a/src/sections/play/states.ts b/src/sections/play/states.ts index ce72325..1222b24 100644 --- a/src/sections/play/states.ts +++ b/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({ + history: [], + lastMove: undefined, +}); export const playerColorAtom = atom(Color.White); export const engineSkillLevelAtom = atom(1); export const isGameInProgressAtom = atom(false);