Squashed commit of the following:

commit dbb5ce37add830b04e3cb977ca5caa9ae9429001
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Tue Mar 26 03:07:38 2024 +0100

    feat : add move click

commit a6d1d10d452a1e556b6e2ecb1fd12ada135b96d0
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Tue Mar 26 01:44:49 2024 +0100

    feat : board refacto done

commit 55f7d6dbac4cb135796cf66120de613e0bf34462
Author: GuillaumeSD <gsd.lfny@gmail.com>
Date:   Sun Mar 24 04:00:35 2024 +0100

    feat : add click to move

src/components/board/index.tsx

@@ -0,0 +1,284 @@
+import { Grid, Typography } from "@mui/material";
+import { Chessboard } from "react-chessboard";
+import { PrimitiveAtom, atom, useAtomValue, useSetAtom } from "jotai";
+import {
+  Arrow,
+  CustomSquareRenderer,
+  PromotionPieceOption,
+  Square,
+} from "react-chessboard/dist/chessboard/types";
+import { useChessActions } from "@/hooks/useChessActions";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Color, MoveClassification } from "@/types/enums";
+import { Chess } from "chess.js";
+import { getSquareRenderer, moveClassificationColors } from "./squareRenderer";
+import { CurrentPosition } from "@/types/eval";
+import EvaluationBar from "./evaluationBar";
+
+export interface Props {
+  id: string;
+  canPlay?: Color | boolean;
+  gameAtom: PrimitiveAtom<Chess>;
+  boardSize?: number;
+  whitePlayer?: string;
+  blackPlayer?: string;
+  boardOrientation?: Color;
+  currentPositionAtom?: PrimitiveAtom<CurrentPosition>;
+  showBestMoveArrow?: boolean;
+  showPlayerMoveIconAtom?: PrimitiveAtom<boolean>;
+  showEvaluationBar?: boolean;
+}
+
+export default function Board({
+  id: boardId,
+  canPlay,
+  gameAtom,
+  boardSize,
+  whitePlayer,
+  blackPlayer,
+  boardOrientation = Color.White,
+  currentPositionAtom = atom({}),
+  showBestMoveArrow = false,
+  showPlayerMoveIconAtom,
+  showEvaluationBar = false,
+}: Props) {
+  const boardRef = useRef<HTMLDivElement>(null);
+  const game = useAtomValue(gameAtom);
+  const { makeMove: makeGameMove } = useChessActions(gameAtom);
+  const clickedSquaresAtom = useMemo(() => atom<Square[]>([]), []);
+  const setClickedSquares = useSetAtom(clickedSquaresAtom);
+  const playableSquaresAtom = useMemo(() => atom<Square[]>([]), []);
+  const setPlayableSquares = useSetAtom(playableSquaresAtom);
+  const position = useAtomValue(currentPositionAtom);
+  const [showPromotionDialog, setShowPromotionDialog] = useState(false);
+  const [moveClickFrom, setMoveClickFrom] = useState<Square | null>(null);
+  const [moveClickTo, setMoveClickTo] = useState<Square | null>(null);
+
+  const gameFen = game.fen();
+
+  useEffect(() => {
+    setClickedSquares([]);
+  }, [gameFen, setClickedSquares]);
+
+  const isPieceDraggable = useCallback(
+    ({ piece }: { piece: string }): boolean => {
+      if (game.isGameOver() || !canPlay) return false;
+      if (canPlay === true || canPlay === piece[0]) return true;
+      return false;
+    },
+    [canPlay, game]
+  );
+
+  const onPieceDrop = (
+    source: Square,
+    target: Square,
+    piece: string
+  ): boolean => {
+    if (!isPieceDraggable({ piece })) return false;
+
+    const result = makeGameMove({
+      from: source,
+      to: target,
+      promotion: piece[1]?.toLowerCase() ?? "q",
+    });
+
+    return !!result;
+  };
+
+  const resetMoveClick = (square?: Square) => {
+    setMoveClickFrom(square ?? null);
+    setMoveClickTo(null);
+    setShowPromotionDialog(false);
+    if (square) {
+      const moves = game.moves({ square, verbose: true });
+      setPlayableSquares(moves.map((m) => m.to));
+    } else {
+      setPlayableSquares([]);
+    }
+  };
+
+  const handleSquareLeftClick = (square: Square) => {
+    setClickedSquares([]);
+
+    if (!moveClickFrom) {
+      resetMoveClick(square);
+      return;
+    }
+
+    const validMoves = game.moves({ square: moveClickFrom, verbose: true });
+    const move = validMoves.find((m) => m.to === square);
+
+    if (!move) {
+      resetMoveClick(square);
+      return;
+    }
+
+    setMoveClickTo(square);
+
+    if (
+      move.piece === "p" &&
+      ((move.color === "w" && square[1] === "8") ||
+        (move.color === "b" && square[1] === "1"))
+    ) {
+      setShowPromotionDialog(true);
+      return;
+    }
+
+    const result = makeGameMove({
+      from: moveClickFrom,
+      to: square,
+    });
+
+    resetMoveClick(result ? undefined : square);
+  };
+
+  const handleSquareRightClick = (square: Square) => {
+    setClickedSquares((prev) =>
+      prev.includes(square)
+        ? prev.filter((s) => s !== square)
+        : [...prev, square]
+    );
+  };
+
+  const handlePieceDragBegin = (_: string, square: Square) => {
+    resetMoveClick(square);
+  };
+
+  const handlePieceDragEnd = () => {
+    resetMoveClick();
+  };
+
+  const onPromotionPieceSelect = (piece?: PromotionPieceOption) => {
+    if (piece && moveClickFrom && moveClickTo) {
+      const result = makeGameMove({
+        from: moveClickFrom,
+        to: moveClickTo,
+        promotion: piece[1]?.toLowerCase() ?? "q",
+      });
+      resetMoveClick();
+      return !!result;
+    }
+
+    return false;
+  };
+
+  const customArrows: Arrow[] = useMemo(() => {
+    const bestMove = position?.lastEval?.bestMove;
+    const moveClassification = position?.eval?.moveClassification;
+
+    if (
+      bestMove &&
+      showBestMoveArrow &&
+      moveClassification !== MoveClassification.Book
+    ) {
+      const bestMoveArrow = [
+        bestMove.slice(0, 2),
+        bestMove.slice(2, 4),
+        moveClassificationColors[MoveClassification.Best],
+      ] as Arrow;
+
+      return [bestMoveArrow];
+    }
+
+    return [];
+  }, [position, showBestMoveArrow]);
+
+  const SquareRenderer: CustomSquareRenderer = useMemo(() => {
+    return getSquareRenderer({
+      currentPositionAtom: currentPositionAtom,
+      clickedSquaresAtom,
+      playableSquaresAtom,
+      showPlayerMoveIconAtom,
+    });
+  }, [
+    currentPositionAtom,
+    clickedSquaresAtom,
+    playableSquaresAtom,
+    showPlayerMoveIconAtom,
+  ]);
+
+  return (
+    <Grid
+      item
+      container
+      justifyContent="center"
+      alignItems="center"
+      wrap="nowrap"
+      width={boardSize}
+    >
+      {showEvaluationBar && (
+        <EvaluationBar
+          height={boardRef?.current?.offsetHeight || boardSize || 400}
+          boardOrientation={boardOrientation}
+          currentPositionAtom={currentPositionAtom}
+        />
+      )}
+
+      <Grid
+        item
+        container
+        rowGap={1}
+        justifyContent="center"
+        alignItems="center"
+        paddingLeft={showEvaluationBar ? 2 : 0}
+        xs
+      >
+        <Grid
+          item
+          container
+          xs={12}
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Typography variant="h6">
+            {boardOrientation === Color.White ? blackPlayer : whitePlayer}
+          </Typography>
+        </Grid>
+
+        <Grid
+          item
+          container
+          justifyContent="center"
+          alignItems="center"
+          ref={boardRef}
+          xs={12}
+        >
+          <Chessboard
+            id={`${boardId}-${canPlay}`}
+            position={gameFen}
+            onPieceDrop={onPieceDrop}
+            boardOrientation={
+              boardOrientation === Color.White ? "white" : "black"
+            }
+            customBoardStyle={{
+              borderRadius: "5px",
+              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
+            }}
+            customArrows={customArrows}
+            isDraggablePiece={isPieceDraggable}
+            customSquare={SquareRenderer}
+            onSquareClick={handleSquareLeftClick}
+            onSquareRightClick={handleSquareRightClick}
+            onPieceDragBegin={handlePieceDragBegin}
+            onPieceDragEnd={handlePieceDragEnd}
+            onPromotionPieceSelect={onPromotionPieceSelect}
+            showPromotionDialog={showPromotionDialog}
+            promotionToSquare={moveClickTo}
+          />
+        </Grid>
+
+        <Grid
+          item
+          container
+          xs={12}
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Typography variant="h6">
+            {boardOrientation === Color.White ? whitePlayer : blackPlayer}
+          </Typography>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+}