diff --git a/src/sections/analysis/reviewPanelBody/accuracies.tsx b/src/sections/analysis/reviewPanelBody/accuracies.tsx new file mode 100644 index 0000000..6b9fd4d --- /dev/null +++ b/src/sections/analysis/reviewPanelBody/accuracies.tsx @@ -0,0 +1,42 @@ +import { Grid, Typography } from "@mui/material"; +import { useAtomValue } from "jotai"; +import { gameEvalAtom } from "../states"; + +export default function Accuracies() { + const gameEval = useAtomValue(gameEvalAtom); + + if (!gameEval) return null; + + return ( + + + {`${gameEval?.accuracy.white.toFixed(1)} %`} + + + Accuracies + + + {`${gameEval?.accuracy.black.toFixed(1)} %`} + + + ); +} diff --git a/src/sections/analysis/reviewPanelBody/bestMove.tsx b/src/sections/analysis/reviewPanelBody/bestMove.tsx new file mode 100644 index 0000000..952c052 --- /dev/null +++ b/src/sections/analysis/reviewPanelBody/bestMove.tsx @@ -0,0 +1,30 @@ +import { useCurrentMove } from "@/hooks/useCurrentMove"; +import { Grid, Typography } from "@mui/material"; +import { useAtomValue } from "jotai"; +import { boardAtom } from "../states"; +import { useMemo } from "react"; +import { moveLineUciToSan } from "@/lib/chess"; + +export default function BestMove() { + const move = useCurrentMove(); + const board = useAtomValue(boardAtom); + + const bestMove = move?.lastEval?.bestMove; + + const bestMoveSan = useMemo(() => { + if (!bestMove) return undefined; + + const lastPosition = board.history({ verbose: true }).at(-1)?.before; + if (!lastPosition) return undefined; + + return moveLineUciToSan(lastPosition)(bestMove); + }, [bestMove, board]); + + if (!bestMoveSan) return null; + + return ( + + {`${bestMoveSan} was the best move`} + + ); +} diff --git a/src/sections/analysis/reviewPanelBody/index.tsx b/src/sections/analysis/reviewPanelBody/index.tsx index 440ebe7..5048a85 100644 --- a/src/sections/analysis/reviewPanelBody/index.tsx +++ b/src/sections/analysis/reviewPanelBody/index.tsx @@ -7,6 +7,8 @@ import { useCurrentMove } from "@/hooks/useCurrentMove"; import { LineEval } from "@/types/eval"; import { EngineName } from "@/types/enums"; import EngineSettingsButton from "@/sections/engineSettings/engineSettingsButton"; +import Accuracies from "./accuracies"; +import BestMove from "./bestMove"; export default function ReviewPanelBody() { const linesNumber = useAtomValue(engineMultiPvAtom); @@ -17,7 +19,6 @@ export default function ReviewPanelBody() { const boardHistory = board.history(); const gameHistory = game.history(); - const bestMove = move?.lastEval?.bestMove; const isGameOver = gameHistory.length > 0 && boardHistory.join() === gameHistory.join(); @@ -36,7 +37,7 @@ export default function ReviewPanelBody() { xs={12} justifyContent="center" alignItems="center" - rowGap={1} + rowGap={1.5} > - {!!bestMove && ( - - - {`${bestMove} was the best move`} - - - )} + + + {isGameOver && ( @@ -85,7 +82,7 @@ export default function ReviewPanelBody() { )} - + {!board.isCheckmate() && engineLines.map((line) => (