feat : add game panel info

src/sections/analysis/board/index.tsx

@@ -0,0 +1,83 @@
+import { Grid } from "@mui/material";
+import { Chessboard } from "react-chessboard";
+import { useAtomValue } from "jotai";
+import { boardAtom, boardOrientationAtom } from "../states";
+import { Arrow, Square } from "react-chessboard/dist/chessboard/types";
+import { useChessActions } from "@/hooks/useChess";
+import { useCurrentMove } from "@/hooks/useCurrentMove";
+import { useMemo } from "react";
+import PlayerInfo from "./playerInfo";
+
+export default function Board() {
+  const board = useAtomValue(boardAtom);
+  const boardOrientation = useAtomValue(boardOrientationAtom);
+  const boardActions = useChessActions(boardAtom);
+  const currentMove = useCurrentMove();
+
+  const onPieceDrop = (source: Square, target: Square): boolean => {
+    try {
+      const result = boardActions.move({
+        from: source,
+        to: target,
+        promotion: "q", // TODO: Let the user choose the promotion
+      });
+
+      return !!result;
+    } catch {
+      return false;
+    }
+  };
+
+  const customArrows: Arrow[] = useMemo(() => {
+    if (!currentMove?.lastEval) return [];
+
+    const bestMoveArrow = [
+      currentMove.lastEval.bestMove.slice(0, 2),
+      currentMove.lastEval.bestMove.slice(2, 4),
+      "#3aab18",
+    ] as Arrow;
+
+    if (
+      !currentMove.from ||
+      !currentMove.to ||
+      (currentMove.from === bestMoveArrow[0] &&
+        currentMove.to === bestMoveArrow[1])
+    ) {
+      return [bestMoveArrow];
+    }
+
+    return [[currentMove.from, currentMove.to, "#ffaa00"], bestMoveArrow];
+  }, [currentMove]);
+
+  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"
+        maxWidth={"80vh"}
+      >
+        <Chessboard
+          id="BasicBoard"
+          position={board.fen()}
+          onPieceDrop={onPieceDrop}
+          boardOrientation={boardOrientation ? "white" : "black"}
+          customArrows={customArrows}
+        />
+      </Grid>
+
+      <PlayerInfo color={boardOrientation ? "white" : "black"} />
+    </Grid>
+  );
+}