react-chessboard-ui 1.1.2 → 1.2.0

package/dist/index.modern.js

@@ -114,6 +114,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,
@@ -2028,7 +2031,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 = useState([]),
     actualState = _useState[0],
     setActualState = _useState[1];
@@ -2128,7 +2132,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
       }
@@ -2812,6 +2816,9 @@ var ChessBoard = function ChessBoard(props) {
     reversed = props.reversed,
     config = props.config,
     playerColor = props.playerColor;
+  var _useState = useState(false),
+    animated = _useState[0],
+    setAnimated = _useState[1];
   var _useChessBoardInterac = useChessBoardInteractive({
       onChange: onChange,
       onEndGame: onEndGame,
@@ -2846,22 +2853,43 @@ var ChessBoard = function ChessBoard(props) {
     handleGrabbingCell = _useChessBoardInterac.handleGrabbingCell,
     getHasCheckByCellPos = _useChessBoardInterac.getHasCheckByCellPos,
     handleSelectFigurePicker = _useChessBoardInterac.handleSelectFigurePicker;
-  useEffect(function () {
-    setPlayerColor(playerColor);
-  }, [playerColor]);
-  useEffect(function () {
+  var handleUpdateFEN = function handleUpdateFEN(FEN) {
     var _FENtoGameState = FENtoGameState(FEN),
       boardState = _FENtoGameState.boardState,
       currentColor = _FENtoGameState.currentColor;
     setInitialState(boardState);
     setActualState(boardState);
     setCurrentColor(currentColor);
+  };
+  useEffect(function () {
+    setPlayerColor(playerColor);
+  }, [playerColor]);
+  useEffect(function () {
+    handleUpdateFEN(FEN);
   }, [FEN]);
   useEffect(function () {
     if (reversed) reverseChessBoard();
   }, [reversed]);
   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.createElement("div", {
     className: styles.chessBoard
@@ -2871,7 +2899,8 @@ var ChessBoard = function ChessBoard(props) {
     initialState: initialState,
     change: newMove,
     reversed: reversed,
-    boardConfig: boardConfig
+    boardConfig: boardConfig,
+    animated: animated
   }), React.createElement(ChessBoardInteractiveLayout, {
     selectedPos: fromPos,
     possibleMoves: possibleMoves,