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

package/dist/{index.mjs → index.js}

@@ -1,5 +1,5 @@
 // src/components/ChessGame/parts/Root.tsx
-import React3 from "react";
+import React4 from "react";
 
 // src/hooks/useChessGame.ts
 import React, { useEffect } from "react";
@@ -9,9 +9,17 @@ import { Chess as Chess2 } from "chess.js";
 import { Chess } from "chess.js";
 import _ from "lodash";
 var cloneGame = (game) => {
-  const copy = new Chess();
-  copy.loadPgn(game.pgn());
-  return copy;
+  try {
+    const copy = new Chess();
+    const pgn = game == null ? void 0 : game.pgn();
+    if (pgn) {
+      copy.loadPgn(pgn);
+    }
+    return copy;
+  } catch (e) {
+    console.error("Failed to clone game:", e);
+    return new Chess();
+  }
 };
 var getGameInfo = (game, orientation) => {
   const turn = game.turn();
@@ -57,6 +65,9 @@ var isLegalMove = (game, move) => {
   }
 };
 var requiresPromotion = (game, move) => {
+  if (!game) {
+    throw new Error("Game is required");
+  }
   try {
     const copy = cloneGame(game);
     const result = copy.move(move);
@@ -76,12 +87,20 @@ var getCurrentFen = (fen, game, currentMoveIndex) => {
   const tempGame = new Chess();
   if (currentMoveIndex === -1) {
     if (fen) {
-      tempGame.load(fen);
+      try {
+        tempGame.load(fen);
+      } catch (e) {
+        console.error("Failed to load FEN in getCurrentFen:", fen, e);
+      }
     }
   } else {
     const moves = game.history().slice(0, currentMoveIndex + 1);
     if (fen) {
-      tempGame.load(fen);
+      try {
+        tempGame.load(fen);
+      } catch (e) {
+        console.error("Failed to load FEN in getCurrentFen:", fen, e);
+      }
     }
     moves.forEach((move) => tempGame.move(move));
   }
@@ -93,9 +112,21 @@ var useChessGame = ({
   fen,
   orientation: initialOrientation
 } = {}) => {
-  const [game, setGame] = React.useState(new Chess2(fen));
+  const [game, setGame] = React.useState(() => {
+    try {
+      return new Chess2(fen);
+    } catch (e) {
+      console.error("Invalid FEN:", fen, e);
+      return new Chess2();
+    }
+  });
   useEffect(() => {
-    setGame(new Chess2(fen));
+    try {
+      setGame(new Chess2(fen));
+    } catch (e) {
+      console.error("Invalid FEN:", fen, e);
+      setGame(new Chess2());
+    }
   }, [fen]);
   const [orientation, setOrientation] = React.useState(
     initialOrientation ?? "w"
@@ -119,11 +150,15 @@ var useChessGame = ({
     [game, currentMoveIndex]
   );
   const setPosition = React.useCallback((fen2, orientation2) => {
-    const newGame = new Chess2();
-    newGame.load(fen2);
-    setOrientation(orientation2);
-    setGame(newGame);
-    setCurrentMoveIndex(-1);
+    try {
+      const newGame = new Chess2();
+      newGame.load(fen2);
+      setOrientation(orientation2);
+      setGame(newGame);
+      setCurrentMoveIndex(-1);
+    } catch (e) {
+      console.error("Failed to load FEN:", fen2, e);
+    }
   }, []);
   const makeMove = React.useCallback(
     (move) => {
@@ -212,18 +247,69 @@ var useChessGameContext = () => {
   return context;
 };
 
+// src/theme/context.tsx
+import React3, { createContext, useContext } from "react";
+
+// src/theme/defaults.ts
+var defaultGameTheme = {
+  board: {
+    lightSquare: { backgroundColor: "#f0d9b5" },
+    darkSquare: { backgroundColor: "#b58863" }
+  },
+  state: {
+    lastMove: "rgba(255, 255, 0, 0.5)",
+    check: "rgba(255, 0, 0, 0.5)",
+    activeSquare: "rgba(255, 255, 0, 0.5)",
+    dropSquare: { backgroundColor: "rgba(255, 255, 0, 0.4)" }
+  },
+  indicators: {
+    move: "rgba(0, 0, 0, 0.1)",
+    capture: "rgba(1, 0, 0, 0.1)"
+  }
+};
+
+// src/theme/context.tsx
+var ChessGameThemeContext = createContext(defaultGameTheme);
+var useChessGameTheme = () => {
+  return useContext(ChessGameThemeContext);
+};
+var ThemeProvider = ({
+  theme,
+  children
+}) => {
+  return /* @__PURE__ */ React3.createElement(ChessGameThemeContext.Provider, { value: theme }, children);
+};
+
+// src/theme/utils.ts
+import { merge } from "lodash";
+var mergeTheme = (partialTheme) => {
+  if (!partialTheme) {
+    return { ...defaultGameTheme };
+  }
+  return merge({}, defaultGameTheme, partialTheme);
+};
+var mergeThemeWith = (baseTheme, partialTheme) => {
+  if (!partialTheme) {
+    return { ...baseTheme };
+  }
+  return merge({}, baseTheme, partialTheme);
+};
+
 // src/components/ChessGame/parts/Root.tsx
 var Root = ({
   fen,
   orientation,
+  theme,
   children
 }) => {
   const context = useChessGame({ fen, orientation });
-  return /* @__PURE__ */ React3.createElement(ChessGameContext.Provider, { value: context }, children);
+  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 React4 from "react";
+import React5 from "react";
 import {
   Chessboard,
   defaultPieces,
@@ -231,23 +317,21 @@ import {
 } from "react-chessboard";
 
 // src/utils/board.ts
-import { merge } from "lodash";
-var LAST_MOVE_COLOR = "rgba(255, 255, 0, 0.5)";
-var CHECK_COLOR = "rgba(255, 0, 0, 0.5)";
-var getCustomSquareStyles = (game, info, activeSquare) => {
+import { merge as merge2 } from "lodash";
+var getCustomSquareStyles = (game, info, activeSquare, theme = defaultGameTheme) => {
   const customSquareStyles = {};
   const { lastMove, isCheck, turn } = info;
   if (lastMove) {
     customSquareStyles[lastMove.from] = {
-      backgroundColor: LAST_MOVE_COLOR
+      backgroundColor: theme.state.lastMove
     };
     customSquareStyles[lastMove.to] = {
-      backgroundColor: LAST_MOVE_COLOR
+      backgroundColor: theme.state.lastMove
     };
   }
   if (activeSquare) {
     customSquareStyles[activeSquare] = {
-      backgroundColor: LAST_MOVE_COLOR
+      backgroundColor: theme.state.activeSquare
     };
   }
   if (activeSquare) {
@@ -255,7 +339,7 @@ var getCustomSquareStyles = (game, info, activeSquare) => {
     destinationSquares.forEach((square) => {
       var _a;
       customSquareStyles[square] = {
-        background: game.get(square) && ((_a = game.get(square)) == null ? void 0 : _a.color) !== turn ? "radial-gradient(circle, rgba(1, 0, 0, 0.1) 85%, transparent 85%)" : "radial-gradient(circle, rgba(0,0,0,.1) 25%, transparent 25%)"
+        background: game.get(square) && ((_a = game.get(square)) == null ? void 0 : _a.color) !== turn ? `radial-gradient(circle, ${theme.indicators.capture} 85%, transparent 85%)` : `radial-gradient(circle, ${theme.indicators.move} 25%, transparent 25%)`
       };
     });
   }
@@ -264,7 +348,7 @@ var getCustomSquareStyles = (game, info, activeSquare) => {
       return row.forEach((square) => {
         if ((square == null ? void 0 : square.type) === "k" && (square == null ? void 0 : square.color) === info.turn) {
           customSquareStyles[square.square] = {
-            backgroundColor: CHECK_COLOR
+            backgroundColor: theme.state.check
           };
         }
       });
@@ -276,7 +360,7 @@ var deepMergeChessboardOptions = (baseOptions, customOptions) => {
   if (!customOptions) {
     return { ...baseOptions };
   }
-  const result = merge({}, baseOptions, customOptions, {
+  const result = merge2({}, baseOptions, customOptions, {
     customizer: (_objValue, srcValue) => {
       if (typeof srcValue === "function") {
         return srcValue;
@@ -292,191 +376,199 @@ var deepMergeChessboardOptions = (baseOptions, customOptions) => {
 };
 
 // src/components/ChessGame/parts/Board.tsx
-var Board = ({ options = {} }) => {
-  var _a, _b, _c;
-  const gameContext = useChessGameContext();
-  if (!gameContext) {
-    throw new Error("ChessGameContext not found");
-  }
-  const {
-    game,
-    currentFen,
-    orientation,
-    info,
-    isLatestMove,
-    methods: { makeMove }
-  } = gameContext;
-  const { turn, isGameOver } = info;
-  const [activeSquare, setActiveSquare] = React4.useState(null);
-  const [promotionMove, setPromotionMove] = React4.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 = React4.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 = React4.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),
-    boardOrientation: orientation === "b" ? "black" : "white",
-    position: currentFen,
-    showNotation: true,
-    showAnimations: isLatestMove,
-    canDragPiece: ({ piece }) => {
-      if (isGameOver) return false;
-      return piece.pieceType[0] === turn;
-    },
-    dropSquareStyle: {
-      backgroundColor: "rgba(255, 255, 0, 0.4)"
-    },
-    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__ */ React4.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React4.createElement(Chessboard, { options: mergedOptions }), promotionMove && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.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__ */ React4.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__ */ React4.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";
@@ -538,6 +630,7 @@ var Sounds = ({ sounds }) => {
   useBoardSounds(customSoundsAudios);
   return null;
 };
+Sounds.displayName = "ChessGame.Sounds";
 
 // src/hooks/useKeyboardControls.ts
 import { useEffect as useEffect3 } from "react";
@@ -581,6 +674,7 @@ var KeyboardControls2 = ({
   useKeyboardControls(keyboardControls);
   return null;
 };
+KeyboardControls2.displayName = "ChessGame.KeyboardControls";
 
 // src/components/ChessGame/index.ts
 var ChessGame = {
@@ -589,10 +683,59 @@ var ChessGame = {
   Sounds,
   KeyboardControls: KeyboardControls2
 };
+
+// src/theme/presets.ts
+var lichessTheme = {
+  board: {
+    lightSquare: { backgroundColor: "#f0d9b5" },
+    darkSquare: { backgroundColor: "#b58863" }
+  },
+  state: {
+    lastMove: "rgba(155, 199, 0, 0.41)",
+    check: "rgba(255, 0, 0, 0.5)",
+    activeSquare: "rgba(20, 85, 30, 0.5)",
+    dropSquare: { backgroundColor: "rgba(20, 85, 30, 0.3)" }
+  },
+  indicators: {
+    move: "rgba(20, 85, 30, 0.3)",
+    capture: "rgba(20, 85, 30, 0.3)"
+  }
+};
+var chessComTheme = {
+  board: {
+    lightSquare: { backgroundColor: "#ebecd0" },
+    darkSquare: { backgroundColor: "#779556" }
+  },
+  state: {
+    lastMove: "rgba(255, 255, 0, 0.5)",
+    check: "rgba(255, 0, 0, 0.7)",
+    activeSquare: "rgba(255, 255, 0, 0.5)",
+    dropSquare: { backgroundColor: "rgba(255, 255, 0, 0.4)" }
+  },
+  indicators: {
+    move: "rgba(0, 0, 0, 0.1)",
+    capture: "rgba(0, 0, 0, 0.1)"
+  }
+};
+
+// src/theme/index.ts
+var themes = {
+  default: defaultGameTheme,
+  lichess: lichessTheme,
+  chessCom: chessComTheme
+};
 export {
   ChessGame,
+  ChessGameThemeContext,
+  chessComTheme,
   deepMergeChessboardOptions,
+  defaultGameTheme,
+  lichessTheme,
+  mergeTheme,
+  mergeThemeWith,
+  themes,
   useChessGame,
-  useChessGameContext
+  useChessGameContext,
+  useChessGameTheme
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map