@react-chess-tools/react-chess-game 1.0.0 → 1.0.1

package/dist/index.js

@@ -306,6 +306,7 @@ var Root = ({
   const mergedTheme = React4.useMemo(() => mergeTheme(theme), [theme]);
   return /* @__PURE__ */ React4.createElement(ChessGameContext.Provider, { value: context }, /* @__PURE__ */ React4.createElement(ThemeProvider, { theme: mergedTheme }, children));
 };
+Root.displayName = "ChessGame.Root";
 
 // src/components/ChessGame/parts/Board.tsx
 import React5 from "react";
@@ -375,192 +376,199 @@ var deepMergeChessboardOptions = (baseOptions, customOptions) => {
 };
 
 // src/components/ChessGame/parts/Board.tsx
-var Board = ({ options = {} }) => {
-  var _a, _b, _c;
-  const gameContext = useChessGameContext();
-  const theme = useChessGameTheme();
-  if (!gameContext) {
-    throw new Error("ChessGameContext not found");
-  }
-  const {
-    game,
-    currentFen,
-    orientation,
-    info,
-    isLatestMove,
-    methods: { makeMove }
-  } = gameContext;
-  const { turn, isGameOver } = info;
-  const [activeSquare, setActiveSquare] = React5.useState(null);
-  const [promotionMove, setPromotionMove] = React5.useState(null);
-  const onSquareClick = (square) => {
-    if (isGameOver) {
-      return;
+var Board = React5.forwardRef(
+  ({ options = {}, className, style: userStyle, ...rest }, ref) => {
+    var _a, _b, _c;
+    const gameContext = useChessGameContext();
+    const theme = useChessGameTheme();
+    if (!gameContext) {
+      throw new Error("ChessGameContext not found");
     }
-    if (activeSquare === null) {
-      const squadreInfo = game.get(square);
-      if (squadreInfo && squadreInfo.color === turn) {
-        return setActiveSquare(square);
+    const {
+      game,
+      currentFen,
+      orientation,
+      info,
+      isLatestMove,
+      methods: { makeMove }
+    } = gameContext;
+    const { turn, isGameOver } = info;
+    const [activeSquare, setActiveSquare] = React5.useState(null);
+    const [promotionMove, setPromotionMove] = React5.useState(null);
+    const onSquareClick = (square) => {
+      if (isGameOver) {
+        return;
       }
-      return;
-    }
-    if (!isLegalMove(game, {
-      from: activeSquare,
-      to: square,
-      promotion: "q"
-    })) {
-      return setActiveSquare(null);
-    }
-    if (requiresPromotion(game, {
-      from: activeSquare,
-      to: square,
-      promotion: "q"
-    })) {
-      return setPromotionMove({
+      if (activeSquare === null) {
+        const squadreInfo = game.get(square);
+        if (squadreInfo && squadreInfo.color === turn) {
+          return setActiveSquare(square);
+        }
+        return;
+      }
+      if (!isLegalMove(game, {
         from: activeSquare,
-        to: square
-      });
-    }
-    setActiveSquare(null);
-    makeMove({
-      from: activeSquare,
-      to: square
-    });
-  };
-  const onPromotionPieceSelect = (piece) => {
-    if ((promotionMove == null ? void 0 : promotionMove.from) && (promotionMove == null ? void 0 : promotionMove.to)) {
+        to: square,
+        promotion: "q"
+      })) {
+        return setActiveSquare(null);
+      }
+      if (requiresPromotion(game, {
+        from: activeSquare,
+        to: square,
+        promotion: "q"
+      })) {
+        return setPromotionMove({
+          from: activeSquare,
+          to: square
+        });
+      }
+      setActiveSquare(null);
       makeMove({
-        from: promotionMove.from,
-        to: promotionMove.to,
-        promotion: piece.toLowerCase()
+        from: activeSquare,
+        to: square
       });
-      setPromotionMove(null);
-    }
-  };
-  const onSquareRightClick = () => {
-    setActiveSquare(null);
-    setPromotionMove(null);
-  };
-  const squareWidth = React5.useMemo(() => {
-    var _a2;
-    if (typeof document === "undefined") return 80;
-    const squareElement = document.querySelector(`[data-square]`);
-    return ((_a2 = squareElement == null ? void 0 : squareElement.getBoundingClientRect()) == null ? void 0 : _a2.width) ?? 80;
-  }, [promotionMove]);
-  const promotionSquareLeft = React5.useMemo(() => {
-    var _a2;
-    if (!(promotionMove == null ? void 0 : promotionMove.to)) return 0;
-    const column = ((_a2 = promotionMove.to.match(/^[a-h]/)) == null ? void 0 : _a2[0]) ?? "a";
-    return squareWidth * chessColumnToColumnIndex(
-      column,
-      8,
-      orientation === "b" ? "black" : "white"
-    );
-  }, [promotionMove, squareWidth, orientation]);
-  const baseOptions = {
-    squareStyles: getCustomSquareStyles(game, info, activeSquare, theme),
-    boardOrientation: orientation === "b" ? "black" : "white",
-    position: currentFen,
-    showNotation: true,
-    showAnimations: isLatestMove,
-    lightSquareStyle: theme.board.lightSquare,
-    darkSquareStyle: theme.board.darkSquare,
-    canDragPiece: ({ piece }) => {
-      if (isGameOver) return false;
-      return piece.pieceType[0] === turn;
-    },
-    dropSquareStyle: theme.state.dropSquare,
-    onPieceDrag: ({ piece, square }) => {
-      if (piece.pieceType[0] === turn) {
-        setActiveSquare(square);
+    };
+    const onPromotionPieceSelect = (piece) => {
+      if ((promotionMove == null ? void 0 : promotionMove.from) && (promotionMove == null ? void 0 : promotionMove.to)) {
+        makeMove({
+          from: promotionMove.from,
+          to: promotionMove.to,
+          promotion: piece.toLowerCase()
+        });
+        setPromotionMove(null);
       }
-    },
-    onPieceDrop: ({ sourceSquare, targetSquare }) => {
+    };
+    const onSquareRightClick = () => {
       setActiveSquare(null);
-      const moveData = {
-        from: sourceSquare,
-        to: targetSquare
-      };
-      if (requiresPromotion(game, { ...moveData, promotion: "q" })) {
-        setPromotionMove(moveData);
-        return false;
-      }
-      return makeMove(moveData);
-    },
-    onSquareClick: ({ square }) => {
-      if (square.match(/^[a-h][1-8]$/)) {
-        onSquareClick(square);
-      }
-    },
-    onSquareRightClick,
-    allowDrawingArrows: true,
-    animationDurationInMs: game.history().length === 0 ? 0 : 300
-  };
-  const mergedOptions = deepMergeChessboardOptions(baseOptions, options);
-  return /* @__PURE__ */ React5.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React5.createElement(Chessboard, { options: mergedOptions }), promotionMove && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
-    "div",
-    {
-      onClick: () => setPromotionMove(null),
-      onContextMenu: (e) => {
-        e.preventDefault();
-        setPromotionMove(null);
+      setPromotionMove(null);
+    };
+    const squareWidth = React5.useMemo(() => {
+      var _a2;
+      if (typeof document === "undefined") return 80;
+      const squareElement = document.querySelector(`[data-square]`);
+      return ((_a2 = squareElement == null ? void 0 : squareElement.getBoundingClientRect()) == null ? void 0 : _a2.width) ?? 80;
+    }, [promotionMove]);
+    const promotionSquareLeft = React5.useMemo(() => {
+      var _a2;
+      if (!(promotionMove == null ? void 0 : promotionMove.to)) return 0;
+      const column = ((_a2 = promotionMove.to.match(/^[a-h]/)) == null ? void 0 : _a2[0]) ?? "a";
+      return squareWidth * chessColumnToColumnIndex(
+        column,
+        8,
+        orientation === "b" ? "black" : "white"
+      );
+    }, [promotionMove, squareWidth, orientation]);
+    const baseOptions = {
+      squareStyles: getCustomSquareStyles(game, info, activeSquare, theme),
+      boardOrientation: orientation === "b" ? "black" : "white",
+      position: currentFen,
+      showNotation: true,
+      showAnimations: isLatestMove,
+      lightSquareStyle: theme.board.lightSquare,
+      darkSquareStyle: theme.board.darkSquare,
+      canDragPiece: ({ piece }) => {
+        if (isGameOver) return false;
+        return piece.pieceType[0] === turn;
       },
-      style: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: "rgba(0, 0, 0, 0.1)",
-        zIndex: 1e3
-      }
-    }
-  ), /* @__PURE__ */ React5.createElement(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: ((_b = (_a = promotionMove.to) == null ? void 0 : _a[1]) == null ? void 0 : _b.includes("8")) ? 0 : "auto",
-        bottom: ((_c = promotionMove.to) == null ? void 0 : _c[1].includes("1")) ? 0 : "auto",
-        left: promotionSquareLeft,
-        backgroundColor: "white",
-        width: squareWidth,
-        zIndex: 1001,
-        display: "flex",
-        flexDirection: "column",
-        boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.5)"
-      }
-    },
-    ["q", "r", "n", "b"].map((piece) => /* @__PURE__ */ React5.createElement(
-      "button",
+      dropSquareStyle: theme.state.dropSquare,
+      onPieceDrag: ({ piece, square }) => {
+        if (piece.pieceType[0] === turn) {
+          setActiveSquare(square);
+        }
+      },
+      onPieceDrop: ({ sourceSquare, targetSquare }) => {
+        setActiveSquare(null);
+        const moveData = {
+          from: sourceSquare,
+          to: targetSquare
+        };
+        if (requiresPromotion(game, { ...moveData, promotion: "q" })) {
+          setPromotionMove(moveData);
+          return false;
+        }
+        return makeMove(moveData);
+      },
+      onSquareClick: ({ square }) => {
+        if (square.match(/^[a-h][1-8]$/)) {
+          onSquareClick(square);
+        }
+      },
+      onSquareRightClick,
+      allowDrawingArrows: true,
+      animationDurationInMs: game.history().length === 0 ? 0 : 300
+    };
+    const mergedOptions = deepMergeChessboardOptions(baseOptions, options);
+    const mergedStyle = {
+      ...userStyle,
+      position: "relative"
+    };
+    return /* @__PURE__ */ React5.createElement("div", { ref, className, style: mergedStyle, ...rest }, /* @__PURE__ */ React5.createElement(Chessboard, { options: mergedOptions }), promotionMove && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+      "div",
       {
-        key: piece,
-        onClick: () => onPromotionPieceSelect(piece),
+        onClick: () => setPromotionMove(null),
         onContextMenu: (e) => {
           e.preventDefault();
+          setPromotionMove(null);
         },
         style: {
-          width: "100%",
-          aspectRatio: "1",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.1)",
+          zIndex: 1e3
+        }
+      }
+    ), /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: ((_b = (_a = promotionMove.to) == null ? void 0 : _a[1]) == null ? void 0 : _b.includes("8")) ? 0 : "auto",
+          bottom: ((_c = promotionMove.to) == null ? void 0 : _c[1].includes("1")) ? 0 : "auto",
+          left: promotionSquareLeft,
+          backgroundColor: "white",
+          width: squareWidth,
+          zIndex: 1001,
           display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: 0,
-          border: "none",
-          cursor: "pointer",
-          backgroundColor: "white"
-        },
-        onMouseEnter: (e) => {
-          e.currentTarget.style.backgroundColor = "#f0f0f0";
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.backgroundColor = "white";
+          flexDirection: "column",
+          boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.5)"
         }
       },
-      defaultPieces[`${turn}${piece.toUpperCase()}`]()
-    ))
-  )));
-};
+      ["q", "r", "n", "b"].map((piece) => /* @__PURE__ */ React5.createElement(
+        "button",
+        {
+          key: piece,
+          onClick: () => onPromotionPieceSelect(piece),
+          onContextMenu: (e) => {
+            e.preventDefault();
+          },
+          style: {
+            width: "100%",
+            aspectRatio: "1",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 0,
+            border: "none",
+            cursor: "pointer",
+            backgroundColor: "white"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "#f0f0f0";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "white";
+          }
+        },
+        defaultPieces[`${turn}${piece.toUpperCase()}`]()
+      ))
+    )));
+  }
+);
+Board.displayName = "ChessGame.Board";
 
 // src/components/ChessGame/parts/Sounds.tsx
 import { useMemo } from "react";
@@ -622,6 +630,7 @@ var Sounds = ({ sounds }) => {
   useBoardSounds(customSoundsAudios);
   return null;
 };
+Sounds.displayName = "ChessGame.Sounds";
 
 // src/hooks/useKeyboardControls.ts
 import { useEffect as useEffect3 } from "react";
@@ -665,6 +674,7 @@ var KeyboardControls2 = ({
   useKeyboardControls(keyboardControls);
   return null;
 };
+KeyboardControls2.displayName = "ChessGame.KeyboardControls";
 
 // src/components/ChessGame/index.ts
 var ChessGame = {