react-chessboard-ui 1.1.2 → 1.2.0

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/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,7 +2135,7 @@ 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
       }
@@ -2815,6 +2819,9 @@ var ChessBoard = function ChessBoard(props) {
     reversed = props.reversed,
     config = props.config,
     playerColor = props.playerColor;
+  var _useState = React.useState(false),
+    animated = _useState[0],
+    setAnimated = _useState[1];
   var _useChessBoardInterac = useChessBoardInteractive({
       onChange: onChange,
       onEndGame: onEndGame,
@@ -2849,22 +2856,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 +2902,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,