feat : add click on engine lines

src/components/board/constants.ts

@@ -1,56 +0,0 @@
-import { Piece } from "react-chessboard/dist/chessboard/types";
-
-export const PIECE_CODES = [
-  "wP",
-  "wB",
-  "wN",
-  "wR",
-  "wQ",
-  "wK",
-  "bP",
-  "bB",
-  "bN",
-  "bR",
-  "bQ",
-  "bK",
-] as const satisfies Piece[];
-
-export const PIECE_SETS = [
-  "alpha",
-  "anarcandy",
-  "caliente",
-  "california",
-  "cardinal",
-  "cburnett",
-  "celtic",
-  "chess7",
-  "chessnut",
-  "companion",
-  "cooke",
-  "dubrovny",
-  "fantasy",
-  "firi",
-  "fresca",
-  "gioco",
-  "governor",
-  "horsey",
-  "icpieces",
-  "kiwen-suwi",
-  "kosal",
-  "leipzig",
-  "letter",
-  "maestro",
-  "merida",
-  "monarchy",
-  "mpchess",
-  "pirouetti",
-  "pixel",
-  "reillycraig",
-  "rhosgfx",
-  "riohacha",
-  "shapes",
-  "spatial",
-  "staunty",
-  "tatiana",
-  "xkcd",
-] as const satisfies string[];

src/components/board/index.tsx

@@ -5,6 +5,7 @@ import {
   Arrow,
   CustomPieces,
   CustomSquareRenderer,
+  Piece,
   PromotionPieceOption,
   Square,
 } from "react-chessboard/dist/chessboard/types";
@@ -15,13 +16,12 @@ import { Chess } from "chess.js";
 import { getSquareRenderer } from "./squareRenderer";
 import { CurrentPosition } from "@/types/eval";
 import EvaluationBar from "./evaluationBar";
-import { moveClassificationColors } from "@/lib/chess";
+import { CLASSIFICATION_COLORS } from "@/constants";
 import { Player } from "@/types/game";
 import PlayerHeader from "./playerHeader";
 import Image from "next/image";
 import { boardHueAtom, pieceSetAtom } from "./states";
 import tinycolor from "tinycolor2";
-import { PIECE_CODES } from "./constants";
 
 export interface Props {
   id: string;
@@ -52,7 +52,7 @@ export default function Board({
 }: Props) {
   const boardRef = useRef<HTMLDivElement>(null);
   const game = useAtomValue(gameAtom);
-  const { makeMove: makeGameMove } = useChessActions(gameAtom);
+  const { playMove } = useChessActions(gameAtom);
   const clickedSquaresAtom = useMemo(() => atom<Square[]>([]), []);
   const setClickedSquares = useSetAtom(clickedSquaresAtom);
   const playableSquaresAtom = useMemo(() => atom<Square[]>([]), []);
@@ -86,7 +86,7 @@ export default function Board({
   ): boolean => {
     if (!isPiecePlayable({ piece })) return false;
 
-    const result = makeGameMove({
+    const result = playMove({
       from: source,
       to: target,
       promotion: piece[1]?.toLowerCase() ?? "q",
@@ -135,7 +135,7 @@ export default function Board({
       return;
     }
 
-    const result = makeGameMove({
+    const result = playMove({
       from: moveClickFrom,
       to: square,
     });
@@ -168,7 +168,7 @@ export default function Board({
     const promotionPiece = piece[1]?.toLowerCase() ?? "q";
 
     if (moveClickFrom && moveClickTo) {
-      const result = makeGameMove({
+      const result = playMove({
         from: moveClickFrom,
         to: moveClickTo,
         promotion: promotionPiece,
@@ -178,7 +178,7 @@ export default function Board({
     }
 
     if (from && to) {
-      const result = makeGameMove({
+      const result = playMove({
         from,
         to,
         promotion: promotionPiece,
@@ -206,7 +206,7 @@ export default function Board({
       const bestMoveArrow = [
         bestMove.slice(0, 2),
         bestMove.slice(2, 4),
-        tinycolor(moveClassificationColors[MoveClassification.Best])
+        tinycolor(CLASSIFICATION_COLORS[MoveClassification.Best])
           .spin(-boardHue)
           .toHexString(),
       ] as Arrow;
@@ -325,3 +325,18 @@ export default function Board({
     </Grid>
   );
 }
+
+export const PIECE_CODES = [
+  "wP",
+  "wB",
+  "wN",
+  "wR",
+  "wQ",
+  "wK",
+  "bP",
+  "bB",
+  "bN",
+  "bR",
+  "bQ",
+  "bK",
+] as const satisfies Piece[];

src/components/board/squareRenderer.tsx

@@ -7,7 +7,7 @@ import {
   CustomSquareProps,
   Square,
 } from "react-chessboard/dist/chessboard/types";
-import { moveClassificationColors } from "@/lib/chess";
+import { CLASSIFICATION_COLORS } from "@/constants";
 import { boardHueAtom } from "./states";
 
 export interface Props {
@@ -110,7 +110,7 @@ const previousMoveSquareStyle = (
   width: "100%",
   height: "100%",
   backgroundColor: moveClassification
-    ? moveClassificationColors[moveClassification]
+    ? CLASSIFICATION_COLORS[moveClassification]
     : "#fad541",
   opacity: 0.5,
 });

src/components/board/states.ts

@@ -1,5 +1,5 @@
+import { PIECE_SETS } from "@/constants";
 import { atomWithStorage } from "jotai/utils";
-import { PIECE_SETS } from "./constants";
 
 export const pieceSetAtom = atomWithStorage<(typeof PIECE_SETS)[number]>(
   "pieceSet",