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) => (