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

package/dist/index.d.ts

@@ -0,0 +1,264 @@
+import { ChessboardOptions } from 'react-chessboard';
+import * as React$1 from 'react';
+import React__default, { CSSProperties } from 'react';
+import * as chess_js from 'chess.js';
+import { Color, Chess } from 'chess.js';
+
+type Sound = "check" | "move" | "capture" | "gameOver";
+type Sounds = Record<Sound, HTMLAudioElement>;
+
+type SoundsProps = {
+    sounds?: Partial<Record<Sound, string>>;
+};
+
+interface ChessGameProps {
+    options?: ChessboardOptions;
+}
+
+/**
+ * Board appearance configuration - colors for light and dark squares
+ */
+interface BoardTheme {
+    /** Style for light squares */
+    lightSquare: CSSProperties;
+    /** Style for dark squares */
+    darkSquare: CSSProperties;
+}
+/**
+ * Game state highlight colors (RGBA color strings)
+ */
+interface StateTheme {
+    /** Background color for last move from/to squares */
+    lastMove: string;
+    /** Background color for king when in check */
+    check: string;
+    /** Background color for currently selected piece's square */
+    activeSquare: string;
+    /** Full CSSProperties for valid drop target squares */
+    dropSquare: CSSProperties;
+}
+/**
+ * Move indicator styling - colors for move dots and capture rings
+ */
+interface IndicatorTheme {
+    /** Color for move dots on empty destination squares (used in radial-gradient) */
+    move: string;
+    /** Color for capture rings on capturable pieces (used in radial-gradient) */
+    capture: string;
+}
+/**
+ * Complete theme configuration for ChessGame component
+ */
+interface ChessGameTheme {
+    board: BoardTheme;
+    state: StateTheme;
+    indicators: IndicatorTheme;
+}
+/**
+ * Utility type for creating partial versions of nested objects
+ */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/**
+ * Partial theme for user customization - allows overriding only specific properties
+ */
+type PartialChessGameTheme = DeepPartial<ChessGameTheme>;
+
+interface RootProps {
+    fen?: string;
+    orientation?: Color;
+    /** Optional theme configuration. Supports partial themes - only override the colors you need. */
+    theme?: PartialChessGameTheme;
+}
+
+type useChessGameProps = {
+    fen?: string;
+    orientation?: Color;
+};
+declare const useChessGame: ({ fen, orientation: initialOrientation, }?: useChessGameProps) => {
+    game: Chess;
+    currentFen: string;
+    currentPosition: string;
+    orientation: Color;
+    currentMoveIndex: number;
+    isLatestMove: boolean;
+    info: {
+        turn: Color;
+        isPlayerTurn: boolean;
+        isOpponentTurn: boolean;
+        moveNumber: number;
+        lastMove: chess_js.Move | undefined;
+        isCheck: boolean;
+        isCheckmate: boolean;
+        isDraw: boolean;
+        isStalemate: boolean;
+        isThreefoldRepetition: boolean;
+        isInsufficientMaterial: boolean;
+        isGameOver: boolean;
+        isDrawn: boolean;
+        hasPlayerWon: boolean;
+        hasPlayerLost: boolean;
+    };
+    methods: {
+        makeMove: (move: Parameters<Chess["move"]>[0]) => boolean;
+        setPosition: (fen: string, orientation: Color) => void;
+        flipBoard: () => void;
+        goToMove: (moveIndex: number) => void;
+        goToStart: () => void;
+        goToEnd: () => void;
+        goToPreviousMove: () => void;
+        goToNextMove: () => void;
+    };
+};
+
+declare const useChessGameContext: () => {
+    game: chess_js.Chess;
+    currentFen: string;
+    currentPosition: string;
+    orientation: chess_js.Color;
+    currentMoveIndex: number;
+    isLatestMove: boolean;
+    info: {
+        turn: chess_js.Color;
+        isPlayerTurn: boolean;
+        isOpponentTurn: boolean;
+        moveNumber: number;
+        lastMove: chess_js.Move | undefined;
+        isCheck: boolean;
+        isCheckmate: boolean;
+        isDraw: boolean;
+        isStalemate: boolean;
+        isThreefoldRepetition: boolean;
+        isInsufficientMaterial: boolean;
+        isGameOver: boolean;
+        isDrawn: boolean;
+        hasPlayerWon: boolean;
+        hasPlayerLost: boolean;
+    };
+    methods: {
+        makeMove: (move: Parameters<chess_js.Chess["move"]>[0]) => boolean;
+        setPosition: (fen: string, orientation: chess_js.Color) => void;
+        flipBoard: () => void;
+        goToMove: (moveIndex: number) => void;
+        goToStart: () => void;
+        goToEnd: () => void;
+        goToPreviousMove: () => void;
+        goToNextMove: () => void;
+    };
+};
+type ChessGameContextType = ReturnType<typeof useChessGame>;
+
+type KeyboardControlsProps = {
+    controls?: KeyboardControls;
+};
+type KeyboardControls = Record<string, (context: ChessGameContextType) => void>;
+declare const KeyboardControls: React.FC<KeyboardControlsProps>;
+
+declare const ChessGame: {
+    Root: React$1.FC<React$1.PropsWithChildren<RootProps>>;
+    Board: React$1.FC<ChessGameProps>;
+    Sounds: React$1.FC<SoundsProps>;
+    KeyboardControls: React$1.FC<{
+        controls?: KeyboardControls;
+    }>;
+};
+
+/**
+ * Returns an object with information about the current state of the game. This can be determined
+ * using chess.js instance, but this function is provided for convenience.
+ * @param game - The Chess.js instance representing the game.
+ * @returns An object with information about the current state of the game.
+ */
+declare const getGameInfo: (game: Chess, orientation: Color) => {
+    turn: Color;
+    isPlayerTurn: boolean;
+    isOpponentTurn: boolean;
+    moveNumber: number;
+    lastMove: chess_js.Move | undefined;
+    isCheck: boolean;
+    isCheckmate: boolean;
+    isDraw: boolean;
+    isStalemate: boolean;
+    isThreefoldRepetition: boolean;
+    isInsufficientMaterial: boolean;
+    isGameOver: boolean;
+    isDrawn: boolean;
+    hasPlayerWon: boolean;
+    hasPlayerLost: boolean;
+};
+type GameInfo = ReturnType<typeof getGameInfo>;
+
+/**
+ * Smart deep merge for ChessboardOptions that handles different property types appropriately:
+ * - Functions: Overwrite (custom functions replace base functions)
+ * - Objects: Deep merge (nested objects merge recursively)
+ * - Primitives: Overwrite (custom values replace base values)
+ *
+ * This ensures that computed options (like squareStyles with move highlighting) are preserved
+ * while allowing custom options to extend or override them intelligently.
+ *
+ * @param baseOptions - The computed base options (e.g., computed squareStyles, event handlers)
+ * @param customOptions - Custom options provided by the user
+ * @returns Intelligently merged ChessboardOptions
+ */
+declare const deepMergeChessboardOptions: (baseOptions: ChessboardOptions, customOptions?: Partial<ChessboardOptions>) => ChessboardOptions;
+
+/**
+ * Default theme for ChessGame component.
+ * These values match the original hardcoded colors for backward compatibility.
+ */
+declare const defaultGameTheme: ChessGameTheme;
+
+/**
+ * Lichess-inspired theme with green highlights
+ */
+declare const lichessTheme: ChessGameTheme;
+/**
+ * Chess.com-inspired theme with green board and yellow highlights
+ */
+declare const chessComTheme: ChessGameTheme;
+
+/**
+ * Deep merges a partial theme with the default theme.
+ * Allows users to override only specific theme properties while keeping defaults for the rest.
+ *
+ * @param partialTheme - Partial theme with only the properties to override
+ * @returns Complete theme with overridden properties merged with defaults
+ *
+ * @example
+ * ```typescript
+ * const customTheme = mergeTheme({
+ *   state: { lastMove: "rgba(100, 200, 100, 0.6)" }
+ * });
+ * // Returns full theme with only lastMove color changed
+ * ```
+ */
+declare const mergeTheme: (partialTheme?: PartialChessGameTheme) => ChessGameTheme;
+/**
+ * Deep merges a partial theme with a base theme.
+ * Useful when extending an existing theme.
+ *
+ * @param baseTheme - The base theme to extend
+ * @param partialTheme - Partial theme with properties to override
+ * @returns Complete theme with overridden properties
+ */
+declare const mergeThemeWith: (baseTheme: ChessGameTheme, partialTheme?: PartialChessGameTheme) => ChessGameTheme;
+
+/**
+ * Context for ChessGame theme
+ */
+declare const ChessGameThemeContext: React__default.Context<ChessGameTheme>;
+/**
+ * Hook to access the current ChessGame theme.
+ * Returns the default theme if no ThemeProvider is present.
+ */
+declare const useChessGameTheme: () => ChessGameTheme;
+
+declare const themes: {
+    readonly default: ChessGameTheme;
+    readonly lichess: ChessGameTheme;
+    readonly chessCom: ChessGameTheme;
+};
+
+export { type BoardTheme, ChessGame, type ChessGameContextType, type ChessGameProps, type ChessGameTheme, ChessGameThemeContext, type DeepPartial, type GameInfo, type IndicatorTheme, KeyboardControls, type PartialChessGameTheme, type RootProps, type Sound, type Sounds, type SoundsProps, type StateTheme, chessComTheme, deepMergeChessboardOptions, defaultGameTheme, lichessTheme, mergeTheme, mergeThemeWith, themes, useChessGame, useChessGameContext, type useChessGameProps, useChessGameTheme };

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,68 @@ 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));
 };
 
 // src/components/ChessGame/parts/Board.tsx
-import React4 from "react";
+import React5 from "react";
 import {
   Chessboard,
   defaultPieces,
@@ -231,23 +316,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 +338,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 +347,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 +359,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;
@@ -295,6 +378,7 @@ var deepMergeChessboardOptions = (baseOptions, customOptions) => {
 var Board = ({ options = {} }) => {
   var _a, _b, _c;
   const gameContext = useChessGameContext();
+  const theme = useChessGameTheme();
   if (!gameContext) {
     throw new Error("ChessGameContext not found");
   }
@@ -307,8 +391,8 @@ var Board = ({ options = {} }) => {
     methods: { makeMove }
   } = gameContext;
   const { turn, isGameOver } = info;
-  const [activeSquare, setActiveSquare] = React4.useState(null);
-  const [promotionMove, setPromotionMove] = React4.useState(null);
+  const [activeSquare, setActiveSquare] = React5.useState(null);
+  const [promotionMove, setPromotionMove] = React5.useState(null);
   const onSquareClick = (square) => {
     if (isGameOver) {
       return;
@@ -357,13 +441,13 @@ var Board = ({ options = {} }) => {
     setActiveSquare(null);
     setPromotionMove(null);
   };
-  const squareWidth = React4.useMemo(() => {
+  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 = React4.useMemo(() => {
+  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";
@@ -374,18 +458,18 @@ var Board = ({ options = {} }) => {
     );
   }, [promotionMove, squareWidth, orientation]);
   const baseOptions = {
-    squareStyles: getCustomSquareStyles(game, info, activeSquare),
+    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: {
-      backgroundColor: "rgba(255, 255, 0, 0.4)"
-    },
+    dropSquareStyle: theme.state.dropSquare,
     onPieceDrag: ({ piece, square }) => {
       if (piece.pieceType[0] === turn) {
         setActiveSquare(square);
@@ -413,7 +497,7 @@ var Board = ({ options = {} }) => {
     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(
+  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),
@@ -431,7 +515,7 @@ var Board = ({ options = {} }) => {
         zIndex: 1e3
       }
     }
-  ), /* @__PURE__ */ React4.createElement(
+  ), /* @__PURE__ */ React5.createElement(
     "div",
     {
       style: {
@@ -447,7 +531,7 @@ var Board = ({ options = {} }) => {
         boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.5)"
       }
     },
-    ["q", "r", "n", "b"].map((piece) => /* @__PURE__ */ React4.createElement(
+    ["q", "r", "n", "b"].map((piece) => /* @__PURE__ */ React5.createElement(
       "button",
       {
         key: piece,
@@ -589,9 +673,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