react-chessboard-ui 1.1.2 → 1.2.1

package/dist/ChessBoard/ChessBoardFiguresLayout.d.ts

@@ -5,6 +5,7 @@ declare type ChessBoardFiguresLayoutProps = {
     initialState: Cell[][];
     change?: ChangeMove;
     reversed?: boolean;
+    animated?: boolean;
     boardConfig: ChessBoardConfig;
 };
 export declare const ChessBoardFiguresLayout: FC<ChessBoardFiguresLayoutProps>;

package/dist/ChessBoard/useChessBoardInteractive.d.ts

@@ -9,6 +9,7 @@ declare type UseChessBoardInteractiveProps = {
 export declare const useChessBoardInteractive: (props: UseChessBoardInteractiveProps) => {
     fromPos: CellPos;
     newMove: ChangeMove;
+    animated: boolean;
     boardConfig: ChessBoardConfig;
     markedCells: CellPos[];
     grabbingPos: CellPos;
@@ -24,6 +25,7 @@ export declare const useChessBoardInteractive: (props: UseChessBoardInteractiveP
     showFigurePicker: boolean;
     markCell: (cellPos: CellPos) => void;
     setNewMove: import("react").Dispatch<import("react").SetStateAction<ChangeMove>>;
+    setAnimated: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     handleClick: (cellPos: CellPos) => void;
     clearFromPos: () => void;
     handleGrabEnd: (cellPos: CellPos, withTransition?: boolean) => void;

package/dist/JSChessEngine/JSChessEngine.d.ts

@@ -89,7 +89,7 @@ export declare class JSChessEngine {
      * @param moveData данные хода
      * @param boardSize размер доски
      */
-    static reverseMove: (moveData: MoveData, boardSize: number) => MoveData;
+    static reverseMove: (moveData: MoveData, boardSize?: number) => MoveData;
     /**
      * Возвращет перевернутое значение для начала и конца хода фигуры
      * Использовать при подсветке хода если доска перевернута

package/dist/index.js

@@ -117,6 +117,9 @@ JSChessEngine.reverseChessBoard = function (state) {
   });
 };
 JSChessEngine.reverseMove = function (moveData, boardSize) {
+  if (boardSize === void 0) {
+    boardSize = 8;
+  }
   var from = moveData.from,
     to = moveData.to,
     figure = moveData.figure,
@@ -2031,7 +2034,8 @@ var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
   var initialState = props.initialState,
     change = props.change,
     reversed = props.reversed,
-    boardConfig = props.boardConfig;
+    boardConfig = props.boardConfig,
+    animated = props.animated;
   var _useState = React.useState([]),
     actualState = _useState[0],
     setActualState = _useState[1];
@@ -2131,11 +2135,11 @@ var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
       style: {
         top: boardConfig.cellSize * figure.position[1] + "px",
         left: boardConfig.cellSize * figure.position[0] + "px",
-        transition: !!change && change.withTransition ? 'all .15s ease-out' : 'none',
+        transition: !!change && animated ? 'all .15s ease-out' : 'none',
         width: boardConfig.cellSize,
         height: boardConfig.cellSize
       }
-    }, boardConfig.piecesMap[getFigureCSS(figure)]('80%'));
+    }, boardConfig.piecesMap[getFigureCSS(figure)] && boardConfig.piecesMap[getFigureCSS(figure)]('80%'));
   }));
 };
 
@@ -2293,6 +2297,9 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
   var _useState21 = React.useState([-1, -1]),
     targetPos = _useState21[0],
     setTargetPos = _useState21[1];
+  var _useState22 = React.useState(false),
+    animated = _useState22[0],
+    setAnimated = _useState22[1];
   var clearFromPos = function clearFromPos() {
     return setFromPos([-1, -1]);
   };
@@ -2509,6 +2516,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       return;
     }
     onChange(moveData);
+    setAnimated(withTransition);
     setNewMove({
       move: moveData,
       withTransition: withTransition,
@@ -2532,6 +2540,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       attackedPos = _moveFigureByClick.attackedPos;
     if (!moveData) return;
     onChange(moveData);
+    setAnimated(withTransition);
     setNewMove({
       move: moveData,
       withTransition: withTransition,
@@ -2629,6 +2638,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
   return {
     fromPos: fromPos,
     newMove: newMove,
+    animated: animated,
     boardConfig: boardConfig,
     markedCells: markedCells,
     grabbingPos: grabbingPos,
@@ -2644,6 +2654,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     showFigurePicker: showFigurePicker,
     markCell: markCell,
     setNewMove: setNewMove,
+    setAnimated: setAnimated,
     handleClick: handleClick,
     clearFromPos: clearFromPos,
     handleGrabEnd: handleGrabEnd,
@@ -2822,6 +2833,7 @@ var ChessBoard = function ChessBoard(props) {
     }),
     fromPos = _useChessBoardInterac.fromPos,
     newMove = _useChessBoardInterac.newMove,
+    animated = _useChessBoardInterac.animated,
     boardConfig = _useChessBoardInterac.boardConfig,
     markedCells = _useChessBoardInterac.markedCells,
     grabbingPos = _useChessBoardInterac.grabbingPos,
@@ -2835,6 +2847,7 @@ var ChessBoard = function ChessBoard(props) {
     showFigurePicker = _useChessBoardInterac.showFigurePicker,
     markCell = _useChessBoardInterac.markCell,
     setNewMove = _useChessBoardInterac.setNewMove,
+    setAnimated = _useChessBoardInterac.setAnimated,
     handleClick = _useChessBoardInterac.handleClick,
     handleGrabEnd = _useChessBoardInterac.handleGrabEnd,
     handleGrabbing = _useChessBoardInterac.handleGrabbing,
@@ -2849,22 +2862,43 @@ var ChessBoard = function ChessBoard(props) {
     handleGrabbingCell = _useChessBoardInterac.handleGrabbingCell,
     getHasCheckByCellPos = _useChessBoardInterac.getHasCheckByCellPos,
     handleSelectFigurePicker = _useChessBoardInterac.handleSelectFigurePicker;
-  React.useEffect(function () {
-    setPlayerColor(playerColor);
-  }, [playerColor]);
-  React.useEffect(function () {
+  var handleUpdateFEN = function handleUpdateFEN(FEN) {
     var _FENtoGameState = FENtoGameState(FEN),
       boardState = _FENtoGameState.boardState,
       currentColor = _FENtoGameState.currentColor;
     setInitialState(boardState);
     setActualState(boardState);
     setCurrentColor(currentColor);
+  };
+  React.useEffect(function () {
+    setPlayerColor(playerColor);
+  }, [playerColor]);
+  React.useEffect(function () {
+    handleUpdateFEN(FEN);
   }, [FEN]);
   React.useEffect(function () {
     if (reversed) reverseChessBoard();
   }, [reversed]);
   React.useEffect(function () {
-    setNewMove(change);
+    if (!change) return;
+    var updatedChange = _extends({}, change, {
+      move: reversed ? JSChessEngine.reverseMove(change.move) : change.move
+    });
+    if (change.withTransition) {
+      setAnimated(true);
+      setTimeout(function () {
+        setNewMove(updatedChange);
+      }, 10);
+      setTimeout(function () {
+        setAnimated(false);
+      }, 160);
+      setTimeout(function () {
+        handleUpdateFEN(updatedChange.move.FEN);
+      }, 170);
+    } else {
+      setNewMove(updatedChange);
+      handleUpdateFEN(updatedChange.move.FEN);
+    }
   }, [change]);
   return React__default.createElement("div", {
     className: styles.chessBoard
@@ -2874,7 +2908,8 @@ var ChessBoard = function ChessBoard(props) {
     initialState: initialState,
     change: newMove,
     reversed: reversed,
-    boardConfig: boardConfig
+    boardConfig: boardConfig,
+    animated: animated
   }), React__default.createElement(ChessBoardInteractiveLayout, {
     selectedPos: fromPos,
     possibleMoves: possibleMoves,