feat : add evaluation bar

src/sections/analysis/board/evaluationBar.tsx

@@ -0,0 +1,86 @@
+import { Box, Grid, Typography } from "@mui/material";
+import { useAtomValue } from "jotai";
+import { useEffect, useState } from "react";
+import { boardAtom, boardOrientationAtom } from "../states";
+import { getEvaluationBarValue } from "@/lib/chess";
+import { useCurrentMove } from "@/hooks/useCurrentMove";
+
+interface Props {
+  height?: number;
+}
+
+export default function EvaluationBar({ height }: Props) {
+  const [evalBar, setEvalBar] = useState({
+    whiteBarPercentage: 50,
+    label: "0.0",
+  });
+  const board = useAtomValue(boardAtom);
+  const boardOrientation = useAtomValue(boardOrientationAtom);
+  const currentMove = useCurrentMove();
+
+  useEffect(() => {
+    const bestLine = currentMove?.eval?.lines[0];
+    if (!bestLine) return;
+
+    const evalBar = getEvaluationBarValue(bestLine, board.turn() === "w");
+    setEvalBar(evalBar);
+  }, [currentMove, board.turn()]);
+
+  return (
+    <Grid
+      item
+      container
+      justifyContent="center"
+      alignItems="center"
+      xs={1}
+      height={height}
+      paddingX={3}
+    >
+      <Box
+        sx={{ backgroundColor: boardOrientation ? "black" : "white" }}
+        height={`${
+          boardOrientation
+            ? 100 - evalBar.whiteBarPercentage
+            : evalBar.whiteBarPercentage
+        }%`}
+        width="100%"
+        borderRadius="5px 5px 0 0"
+      >
+        <Typography
+          color={boardOrientation ? "white" : "black"}
+          textAlign="center"
+          width="100%"
+        >
+          {(evalBar.whiteBarPercentage < 50 && boardOrientation) ||
+          (evalBar.whiteBarPercentage >= 50 && !boardOrientation)
+            ? evalBar.label
+            : ""}
+        </Typography>
+      </Box>
+
+      <Box
+        sx={{ backgroundColor: boardOrientation ? "white" : "black" }}
+        height={`${
+          boardOrientation
+            ? evalBar.whiteBarPercentage
+            : 100 - evalBar.whiteBarPercentage
+        }%`}
+        width={"100%"}
+        display="flex"
+        alignItems="flex-end"
+        borderRadius="0 0 5px 5px"
+      >
+        <Typography
+          color={boardOrientation ? "black" : "white"}
+          textAlign="center"
+          width="100%"
+        >
+          {(evalBar.whiteBarPercentage >= 50 && boardOrientation) ||
+          (evalBar.whiteBarPercentage < 50 && !boardOrientation)
+            ? evalBar.label
+            : ""}
+        </Typography>
+      </Box>
+    </Grid>
+  );
+}

src/sections/analysis/board/index.tsx

@@ -10,10 +10,12 @@ import {
 import { Arrow, Square } from "react-chessboard/dist/chessboard/types";
 import { useChessActions } from "@/hooks/useChess";
 import { useCurrentMove } from "@/hooks/useCurrentMove";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import PlayerInfo from "./playerInfo";
+import EvaluationBar from "./evaluationBar";
 
 export default function Board() {
+  const boardRef = useRef<HTMLDivElement>(null);
   const board = useAtomValue(boardAtom);
   const boardOrientation = useAtomValue(boardOrientationAtom);
   const showBestMoveArrow = useAtomValue(showBestMoveArrowAtom);
@@ -69,34 +71,38 @@ export default function Board() {
   }, [currentMove, showBestMoveArrow, showPlayerMoveArrow]);
 
   return (
-    <Grid
-      item
-      container
-      rowGap={2}
-      justifyContent="center"
-      alignItems="center"
-      xs={12}
-      md={6}
-    >
-      <PlayerInfo color={boardOrientation ? "black" : "white"} />
+    <Grid item container justifyContent="center" alignItems="center" xs={12}>
+      <EvaluationBar height={boardRef?.current?.offsetWidth} />
 
       <Grid
         item
         container
+        rowGap={2}
         justifyContent="center"
         alignItems="center"
-        maxWidth={"80vh"}
+        xs={11}
       >
-        <Chessboard
-          id="AnalysisBoard"
-          position={board.fen()}
-          onPieceDrop={onPieceDrop}
-          boardOrientation={boardOrientation ? "white" : "black"}
-          customArrows={customArrows}
-        />
-      </Grid>
+        <PlayerInfo color={boardOrientation ? "black" : "white"} />
 
-      <PlayerInfo color={boardOrientation ? "white" : "black"} />
+        <Grid
+          item
+          container
+          justifyContent="center"
+          alignItems="center"
+          ref={boardRef}
+        >
+          <Chessboard
+            id="AnalysisBoard"
+            position={board.fen()}
+            onPieceDrop={onPieceDrop}
+            boardOrientation={boardOrientation ? "white" : "black"}
+            customArrows={customArrows}
+            customBoardStyle={{ borderRadius: "5px" }}
+          />
+        </Grid>
+
+        <PlayerInfo color={boardOrientation ? "white" : "black"} />
+      </Grid>
     </Grid>
   );
 }

src/sections/analysis/reviewPanelBody.tsx

@@ -5,10 +5,11 @@ import { boardAtom, engineMultiPvAtom, gameAtom } from "./states";
 import LineEvaluation from "./lineEvaluation";
 import { useCurrentMove } from "@/hooks/useCurrentMove";
 import { LineEval } from "@/types/eval";
+import { EngineName } from "@/types/enums";
 
 export default function ReviewPanelBody() {
   const linesNumber = useAtomValue(engineMultiPvAtom);
-  const move = useCurrentMove();
+  const move = useCurrentMove(EngineName.Stockfish16);
   const game = useAtomValue(gameAtom);
   const board = useAtomValue(boardAtom);