react-chessboard-ui 1.1.2 → 1.2.1

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,11 +2132,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%'));
   }));
 };
 
@@ -2290,6 +2294,9 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
   var _useState21 = useState([-1, -1]),
     targetPos = _useState21[0],
     setTargetPos = _useState21[1];
+  var _useState22 = useState(false),
+    animated = _useState22[0],
+    setAnimated = _useState22[1];
   var clearFromPos = function clearFromPos() {
     return setFromPos([-1, -1]);
   };
@@ -2506,6 +2513,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       return;
     }
     onChange(moveData);
+    setAnimated(withTransition);
     setNewMove({
       move: moveData,
       withTransition: withTransition,
@@ -2529,6 +2537,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       attackedPos = _moveFigureByClick.attackedPos;
     if (!moveData) return;
     onChange(moveData);
+    setAnimated(withTransition);
     setNewMove({
       move: moveData,
       withTransition: withTransition,
@@ -2626,6 +2635,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
   return {
     fromPos: fromPos,
     newMove: newMove,
+    animated: animated,
     boardConfig: boardConfig,
     markedCells: markedCells,
     grabbingPos: grabbingPos,
@@ -2641,6 +2651,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     showFigurePicker: showFigurePicker,
     markCell: markCell,
     setNewMove: setNewMove,
+    setAnimated: setAnimated,
     handleClick: handleClick,
     clearFromPos: clearFromPos,
     handleGrabEnd: handleGrabEnd,
@@ -2819,6 +2830,7 @@ var ChessBoard = function ChessBoard(props) {
     }),
     fromPos = _useChessBoardInterac.fromPos,
     newMove = _useChessBoardInterac.newMove,
+    animated = _useChessBoardInterac.animated,
     boardConfig = _useChessBoardInterac.boardConfig,
     markedCells = _useChessBoardInterac.markedCells,
     grabbingPos = _useChessBoardInterac.grabbingPos,
@@ -2832,6 +2844,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,
@@ -2846,22 +2859,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 +2905,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,