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

package/dist/index.js

@@ -2,7 +2,7 @@
 import React4 from "react";
 
 // src/hooks/useChessGame.ts
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { Chess as Chess2 } from "chess.js";
 
 // src/utils/chess.ts
@@ -108,9 +108,12 @@ var getCurrentFen = (fen, game, currentMoveIndex) => {
 };
 
 // src/hooks/useChessGame.ts
+import { useOptionalChessClock } from "@react-chess-tools/react-chess-clock";
 var useChessGame = ({
   fen,
-  orientation: initialOrientation
+  orientation: initialOrientation,
+  timeControl,
+  autoSwitchOnMove = true
 } = {}) => {
   const [game, setGame] = React.useState(() => {
     try {
@@ -133,22 +136,19 @@ var useChessGame = ({
   );
   const [currentMoveIndex, setCurrentMoveIndex] = React.useState(-1);
   const history = React.useMemo(() => game.history(), [game]);
-  const isLatestMove = React.useMemo(
-    () => currentMoveIndex === history.length - 1 || currentMoveIndex === -1,
-    [currentMoveIndex, history.length]
-  );
+  const isLatestMove = currentMoveIndex === history.length - 1 || currentMoveIndex === -1;
   const info = React.useMemo(
     () => getGameInfo(game, orientation),
     [game, orientation]
   );
   const currentFen = React.useMemo(
     () => getCurrentFen(fen, game, currentMoveIndex),
-    [game, currentMoveIndex]
-  );
-  const currentPosition = React.useMemo(
-    () => game.history()[currentMoveIndex],
-    [game, currentMoveIndex]
+    [fen, game, currentMoveIndex]
   );
+  const currentPosition = game.history()[currentMoveIndex];
+  const clockState = useOptionalChessClock(timeControl);
+  const clockStateRef = useRef(clockState);
+  clockStateRef.current = clockState;
   const setPosition = React.useCallback((fen2, orientation2) => {
     try {
       const newGame = new Chess2();
@@ -165,17 +165,30 @@ var useChessGame = ({
       if (!isLatestMove) {
         return false;
       }
+      const clock = clockStateRef.current;
+      if (clock && clock.timeout !== null) {
+        return false;
+      }
       try {
         const copy = cloneGame(game);
         copy.move(move);
         setGame(copy);
         setCurrentMoveIndex(copy.history().length - 1);
+        if (clock && clock.status === "idle") {
+          clock.methods.start();
+        }
+        if (clock && clock.status === "running" && copy.isGameOver()) {
+          clock.methods.pause();
+        }
+        if (autoSwitchOnMove && clock && clock.status !== "finished") {
+          clock.methods.switch();
+        }
         return true;
       } catch (e) {
         return false;
       }
     },
-    [isLatestMove, game]
+    [isLatestMove, game, autoSwitchOnMove]
   );
   const flipBoard = React.useCallback(() => {
     setOrientation((orientation2) => orientation2 === "w" ? "b" : "w");
@@ -230,7 +243,8 @@ var useChessGame = ({
     currentMoveIndex,
     isLatestMove,
     info,
-    methods
+    methods,
+    clock: clockState
   };
 };
 
@@ -300,12 +314,20 @@ var Root = ({
   fen,
   orientation,
   theme,
+  timeControl,
+  autoSwitchOnMove,
   children
 }) => {
-  const context = useChessGame({ fen, orientation });
+  const context = useChessGame({
+    fen,
+    orientation,
+    timeControl,
+    autoSwitchOnMove
+  });
   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 +397,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 +651,7 @@ var Sounds = ({ sounds }) => {
   useBoardSounds(customSoundsAudios);
   return null;
 };
+Sounds.displayName = "ChessGame.Sounds";
 
 // src/hooks/useKeyboardControls.ts
 import { useEffect as useEffect3 } from "react";
@@ -665,15 +695,70 @@ var KeyboardControls2 = ({
   useKeyboardControls(keyboardControls);
   return null;
 };
+KeyboardControls2.displayName = "ChessGame.KeyboardControls";
+
+// src/components/ChessGame/Clock/index.tsx
+import React6 from "react";
+import {
+  Display as ClockDisplay,
+  Switch as ClockSwitch,
+  PlayPause as ClockPlayPause,
+  Reset as ClockReset,
+  ChessClockContext
+} from "@react-chess-tools/react-chess-clock";
+var Display = React6.forwardRef(
+  ({ color, ...rest }, ref) => {
+    const { clock } = useChessGameContext();
+    if (!clock) {
+      return null;
+    }
+    return /* @__PURE__ */ React6.createElement(ChessClockContext.Provider, { value: clock }, /* @__PURE__ */ React6.createElement(ClockDisplay, { ref, color, ...rest }));
+  }
+);
+Display.displayName = "ChessGame.Clock.Display";
+var Switch = React6.forwardRef(({ children, ...rest }, ref) => {
+  const { clock } = useChessGameContext();
+  if (!clock) {
+    return null;
+  }
+  return /* @__PURE__ */ React6.createElement(ChessClockContext.Provider, { value: clock }, /* @__PURE__ */ React6.createElement(ClockSwitch, { ref, ...rest }, children));
+});
+Switch.displayName = "ChessGame.Clock.Switch";
+var PlayPause = React6.forwardRef(({ children, ...rest }, ref) => {
+  const { clock } = useChessGameContext();
+  if (!clock) {
+    return null;
+  }
+  return /* @__PURE__ */ React6.createElement(ChessClockContext.Provider, { value: clock }, /* @__PURE__ */ React6.createElement(ClockPlayPause, { ref, ...rest }, children));
+});
+PlayPause.displayName = "ChessGame.Clock.PlayPause";
+var Reset = React6.forwardRef(({ children, ...rest }, ref) => {
+  const { clock } = useChessGameContext();
+  if (!clock) {
+    return null;
+  }
+  return /* @__PURE__ */ React6.createElement(ChessClockContext.Provider, { value: clock }, /* @__PURE__ */ React6.createElement(ClockReset, { ref, ...rest }, children));
+});
+Reset.displayName = "ChessGame.Clock.Reset";
+var Clock = {
+  Display,
+  Switch,
+  PlayPause,
+  Reset
+};
 
 // src/components/ChessGame/index.ts
 var ChessGame = {
   Root,
   Board,
   Sounds,
-  KeyboardControls: KeyboardControls2
+  KeyboardControls: KeyboardControls2,
+  Clock
 };
 
+// src/index.ts
+import { ChessClock } from "@react-chess-tools/react-chess-clock";
+
 // src/theme/presets.ts
 var lichessTheme = {
   board: {
@@ -715,6 +800,7 @@ var themes = {
   chessCom: chessComTheme
 };
 export {
+  ChessClock,
   ChessGame,
   ChessGameThemeContext,
   chessComTheme,