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/sections/play/board.tsx

@@ -0,0 +1,87 @@
+import { useAtomValue } from "jotai";
+import {
+  engineSkillLevelAtom,
+  gameAtom,
+  playerColorAtom,
+  isGameInProgressAtom,
+  gameDataAtom,
+} from "./states";
+import { useChessActions } from "@/hooks/useChessActions";
+import { useEffect, useMemo } from "react";
+import { useScreenSize } from "@/hooks/useScreenSize";
+import { Color, EngineName } from "@/types/enums";
+import { useEngine } from "@/hooks/useEngine";
+import { uciMoveParams } from "@/lib/chess";
+import Board from "@/components/board";
+import { useGameData } from "@/hooks/useGameData";
+
+export default function BoardContainer() {
+  const screenSize = useScreenSize();
+  const engine = useEngine(EngineName.Stockfish16);
+  const game = useAtomValue(gameAtom);
+  const playerColor = useAtomValue(playerColorAtom);
+  const { makeMove: makeGameMove } = useChessActions(gameAtom);
+  const engineSkillLevel = useAtomValue(engineSkillLevelAtom);
+  const isGameInProgress = useAtomValue(isGameInProgressAtom);
+
+  const gameFen = game.fen();
+  const isGameFinished = game.isGameOver();
+
+  useEffect(() => {
+    const playEngineMove = async () => {
+      if (
+        !engine?.isReady() ||
+        game.turn() === playerColor ||
+        isGameFinished ||
+        !isGameInProgress
+      ) {
+        return;
+      }
+      const move = await engine.getEngineNextMove(
+        gameFen,
+        engineSkillLevel - 1
+      );
+      if (move) makeGameMove(uciMoveParams(move));
+    };
+    playEngineMove();
+
+    return () => {
+      engine?.stopSearch();
+    };
+  }, [gameFen, isGameInProgress]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const boardSize = useMemo(() => {
+    const width = screenSize.width;
+    const height = screenSize.height;
+
+    // 900 is the md layout breakpoint
+    if (window?.innerWidth < 900) {
+      return Math.min(width, height - 150);
+    }
+
+    return Math.min(width - 300, height * 0.85);
+  }, [screenSize]);
+
+  useGameData(gameAtom, gameDataAtom);
+
+  return (
+    <Board
+      id="PlayBoard"
+      canPlay={isGameInProgress ? playerColor : false}
+      gameAtom={gameAtom}
+      boardSize={boardSize}
+      whitePlayer={
+        playerColor === Color.White
+          ? "You 🧠"
+          : `Stockfish level ${engineSkillLevel} 🤖`
+      }
+      blackPlayer={
+        playerColor === Color.Black
+          ? "You 🧠"
+          : `Stockfish level ${engineSkillLevel} 🤖`
+      }
+      boardOrientation={playerColor}
+      currentPositionAtom={gameDataAtom}
+    />
+  );
+}