react-chessboard-ui 1.2.0 → 1.3.0

package/dist/index.modern.js

@@ -125,7 +125,8 @@ JSChessEngine.reverseMove = function (moveData, boardSize) {
     figure: figure,
     from: [boardSize - (from[0] + 1), boardSize - (from[1] + 1)],
     to: [boardSize - (to[0] + 1), boardSize - (to[1] + 1)],
-    type: type
+    type: type,
+    FEN: moveData.FEN
   };
   return reversedMove;
 };
@@ -2136,7 +2137,7 @@ var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
         width: boardConfig.cellSize,
         height: boardConfig.cellSize
       }
-    }, boardConfig.piecesMap[getFigureCSS(figure)]('80%'));
+    }, boardConfig.piecesMap[getFigureCSS(figure)] && boardConfig.piecesMap[getFigureCSS(figure)]('80%'));
   }));
 };
 
@@ -2294,6 +2295,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]);
   };
@@ -2438,6 +2442,20 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       attackedPos: attackedPos
     };
   };
+  var moveFigureByChange = function moveFigureByChange(change) {
+    var _change$move = change.move,
+      from = _change$move.from,
+      to = _change$move.to,
+      figure = _change$move.figure;
+    var _JSChessEngine$change2 = JSChessEngine.changeState(actualState, figure, to, from, boardReversed),
+      updatedCells = _JSChessEngine$change2.updatedCells;
+    var linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
+    setLinesWithCheck(linesCheck);
+    var updatedChange = _extends({}, change, {
+      move: boardReversed ? JSChessEngine.reverseMove(change.move) : change.move
+    });
+    setNewMove(updatedChange);
+  };
   var moveFigureByClick = function moveFigureByClick(from, to, figure) {
     if (!!playerColor && currentColor !== playerColor) {
       cleanAllForFigure();
@@ -2449,9 +2467,40 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     var inNextMoves = checkPositionsHas(clickPossibleMoves, to);
     var conditionForDoMove = (to[0] !== from[0] || to[1] !== from[1]) && inNextMoves;
     if (!conditionForDoMove) return {};
-    var _JSChessEngine$change2 = JSChessEngine.changeState(actualState, figure, to, from, boardReversed),
-      updatedCells = _JSChessEngine$change2.updatedCells,
-      attackedPos = _JSChessEngine$change2.attackedPos;
+    var _JSChessEngine$change3 = JSChessEngine.changeState(actualState, figure, to, from, boardReversed),
+      updatedCells = _JSChessEngine$change3.updatedCells,
+      attackedPos = _JSChessEngine$change3.attackedPos;
+    var linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
+    setLinesWithCheck(linesCheck);
+    setActualState(updatedCells);
+    if (figure.type === 'pawn' && (to[1] === 0 || to[1] === actualState.length - 1)) {
+      setTargetPos(to);
+      setShowFigurePicker(true);
+      return {};
+    }
+    var colorFEN = currentColor === 'white' ? 'black' : 'white';
+    var FEN = stateToFEN(updatedCells, colorFEN);
+    var moveData = {
+      figure: figure,
+      from: from,
+      to: to,
+      FEN: FEN
+    };
+    toggleCurrentColor();
+    setClickedFigure(undefined);
+    clearClickedPos();
+    clearGrabbingPos();
+    clearArrows();
+    clearMarkedCells();
+    return {
+      moveData: moveData,
+      attackedPos: attackedPos
+    };
+  };
+  var moveFigureByExternalChange = function moveFigureByExternalChange(from, to, figure) {
+    var _JSChessEngine$change4 = JSChessEngine.changeState(actualState, figure, to, from, boardReversed),
+      updatedCells = _JSChessEngine$change4.updatedCells,
+      attackedPos = _JSChessEngine$change4.attackedPos;
     var linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
     setLinesWithCheck(linesCheck);
     setActualState(updatedCells);
@@ -2510,6 +2559,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       return;
     }
     onChange(moveData);
+    setAnimated(withTransition);
     setNewMove({
       move: moveData,
       withTransition: withTransition,
@@ -2518,6 +2568,21 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     clearGrabbingPos();
     clearPossibleMoves();
   };
+  var handleChangeFromExternal = function handleChangeFromExternal(moveData) {
+    var _moveFigureByExternal = moveFigureByExternalChange(moveData.from, moveData.to, moveData.figure),
+      attackedPos = _moveFigureByExternal.attackedPos;
+    onChange(moveData);
+    setAnimated(true);
+    var change = {
+      move: moveData,
+      withTransition: true,
+      attackedPos: attackedPos,
+      transformTo: moveData.type === 'transform' ? moveData.figure : undefined
+    };
+    setNewMove(change);
+    clearClickedPos();
+    clearClickPossibleMoves();
+  };
   var handleClickForTargetCell = function handleClickForTargetCell(cellPos, withTransition) {
     if (withTransition === void 0) {
       withTransition = false;
@@ -2533,6 +2598,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       attackedPos = _moveFigureByClick.attackedPos;
     if (!moveData) return;
     onChange(moveData);
+    setAnimated(withTransition);
     setNewMove({
       move: moveData,
       withTransition: withTransition,
@@ -2630,6 +2696,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
   return {
     fromPos: fromPos,
     newMove: newMove,
+    animated: animated,
     boardConfig: boardConfig,
     markedCells: markedCells,
     grabbingPos: grabbingPos,
@@ -2645,6 +2712,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     showFigurePicker: showFigurePicker,
     markCell: markCell,
     setNewMove: setNewMove,
+    setAnimated: setAnimated,
     handleClick: handleClick,
     clearFromPos: clearFromPos,
     handleGrabEnd: handleGrabEnd,
@@ -2659,8 +2727,11 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     startRenderArrow: startRenderArrow,
     reverseChessBoard: reverseChessBoard,
     handleGrabbingCell: handleGrabbingCell,
+    moveFigureByChange: moveFigureByChange,
     getHasCheckByCellPos: getHasCheckByCellPos,
-    handleSelectFigurePicker: handleSelectFigurePicker
+    handleSelectFigurePicker: handleSelectFigurePicker,
+    handleChangeFromExternal: handleChangeFromExternal,
+    moveFigureByExternalChange: moveFigureByExternalChange
   };
 };
 
@@ -2816,9 +2887,6 @@ 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,
@@ -2826,6 +2894,7 @@ var ChessBoard = function ChessBoard(props) {
     }),
     fromPos = _useChessBoardInterac.fromPos,
     newMove = _useChessBoardInterac.newMove,
+    animated = _useChessBoardInterac.animated,
     boardConfig = _useChessBoardInterac.boardConfig,
     markedCells = _useChessBoardInterac.markedCells,
     grabbingPos = _useChessBoardInterac.grabbingPos,
@@ -2838,7 +2907,6 @@ var ChessBoard = function ChessBoard(props) {
     startArrowCoord = _useChessBoardInterac.startArrowCoord,
     showFigurePicker = _useChessBoardInterac.showFigurePicker,
     markCell = _useChessBoardInterac.markCell,
-    setNewMove = _useChessBoardInterac.setNewMove,
     handleClick = _useChessBoardInterac.handleClick,
     handleGrabEnd = _useChessBoardInterac.handleGrabEnd,
     handleGrabbing = _useChessBoardInterac.handleGrabbing,
@@ -2852,7 +2920,8 @@ var ChessBoard = function ChessBoard(props) {
     reverseChessBoard = _useChessBoardInterac.reverseChessBoard,
     handleGrabbingCell = _useChessBoardInterac.handleGrabbingCell,
     getHasCheckByCellPos = _useChessBoardInterac.getHasCheckByCellPos,
-    handleSelectFigurePicker = _useChessBoardInterac.handleSelectFigurePicker;
+    handleSelectFigurePicker = _useChessBoardInterac.handleSelectFigurePicker,
+    handleChangeFromExternal = _useChessBoardInterac.handleChangeFromExternal;
   var handleUpdateFEN = function handleUpdateFEN(FEN) {
     var _FENtoGameState = FENtoGameState(FEN),
       boardState = _FENtoGameState.boardState,
@@ -2872,24 +2941,8 @@ var ChessBoard = function ChessBoard(props) {
   }, [reversed]);
   useEffect(function () {
     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);
-    }
+    var reversedChange = reversed ? JSChessEngine.reverseMove(change.move) : change.move;
+    handleChangeFromExternal(reversedChange);
   }, [change]);
   return React.createElement("div", {
     className: styles.chessBoard