feat : add accuracies to UI

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 (
+    <Grid
+      item
+      container
+      xs={12}
+      justifyContent="center"
+      alignItems="center"
+      columnGap={{ xs: "8vw", sm: 6, md: 8 }}
+    >
+      <Typography
+        align="center"
+        sx={{ backgroundColor: "white", color: "black" }}
+        borderRadius="5px"
+        lineHeight={1}
+        padding={1}
+      >
+        {`${gameEval?.accuracy.white.toFixed(1)} %`}
+      </Typography>
+
+      <Typography align="center">Accuracies</Typography>
+
+      <Typography
+        align="center"
+        sx={{ backgroundColor: "black", color: "white" }}
+        borderRadius="5px"
+        lineHeight={1}
+        padding={1}
+      >
+        {`${gameEval?.accuracy.black.toFixed(1)} %`}
+      </Typography>
+    </Grid>
+  );
+}

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 (
+    <Grid item xs={12}>
+      <Typography align="center">{`${bestMoveSan} was the best move`}</Typography>
+    </Grid>
+  );
+}

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}
     >
       <Grid
         item
@@ -70,13 +71,9 @@ export default function ReviewPanelBody() {
         </Grid>
       </Grid>
 
-      {!!bestMove && (
+      <Accuracies />
-        <Grid item xs={12}>
+
-          <Typography align="center">
+      <BestMove />
-            {`${bestMove} was the best move`}
-          </Typography>
-        </Grid>
-      )}
 
       {isGameOver && (
         <Grid item xs={12}>
@@ -85,7 +82,7 @@ export default function ReviewPanelBody() {
       )}
 
       <Grid item container xs={12} justifyContent="center" alignItems="center">
-        <List sx={{ maxWidth: "95%" }}>
+        <List sx={{ maxWidth: "95%", padding: 0 }}>
           {!board.isCheckmate() &&
             engineLines.map((line) => (
               <LineEvaluation key={line.multiPv} line={line} />