react-chessboard-ui 1.2.0 → 1.3.0

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;
@@ -38,7 +40,16 @@ export declare const useChessBoardInteractive: (props: UseChessBoardInteractiveP
     startRenderArrow: (pos: CellPos) => void;
     reverseChessBoard: () => void;
     handleGrabbingCell: (cellPos: CellPos) => void;
+    moveFigureByChange: (change: ChangeMove) => void;
     getHasCheckByCellPos: ([x, y]: CellPos) => boolean;
     handleSelectFigurePicker: (figure: Figure) => void;
+    handleChangeFromExternal: (moveData: MoveData) => void;
+    moveFigureByExternalChange: (from: CellPos, to: CellPos, figure: Figure) => {
+        moveData?: undefined;
+        attackedPos?: undefined;
+    } | {
+        moveData: MoveData;
+        attackedPos: CellPos;
+    };
 };
 export {};

package/dist/index.js

@@ -128,7 +128,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;
 };
@@ -2139,7 +2140,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%'));
   }));
 };
 
@@ -2297,6 +2298,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]);
   };
@@ -2441,6 +2445,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();
@@ -2452,9 +2470,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);
@@ -2513,6 +2562,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       return;
     }
     onChange(moveData);
+    setAnimated(withTransition);
     setNewMove({
       move: moveData,
       withTransition: withTransition,
@@ -2521,6 +2571,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;
@@ -2536,6 +2601,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       attackedPos = _moveFigureByClick.attackedPos;
     if (!moveData) return;
     onChange(moveData);
+    setAnimated(withTransition);
     setNewMove({
       move: moveData,
       withTransition: withTransition,
@@ -2633,6 +2699,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
   return {
     fromPos: fromPos,
     newMove: newMove,
+    animated: animated,
     boardConfig: boardConfig,
     markedCells: markedCells,
     grabbingPos: grabbingPos,
@@ -2648,6 +2715,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     showFigurePicker: showFigurePicker,
     markCell: markCell,
     setNewMove: setNewMove,
+    setAnimated: setAnimated,
     handleClick: handleClick,
     clearFromPos: clearFromPos,
     handleGrabEnd: handleGrabEnd,
@@ -2662,8 +2730,11 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     startRenderArrow: startRenderArrow,
     reverseChessBoard: reverseChessBoard,
     handleGrabbingCell: handleGrabbingCell,
+    moveFigureByChange: moveFigureByChange,
     getHasCheckByCellPos: getHasCheckByCellPos,
-    handleSelectFigurePicker: handleSelectFigurePicker
+    handleSelectFigurePicker: handleSelectFigurePicker,
+    handleChangeFromExternal: handleChangeFromExternal,
+    moveFigureByExternalChange: moveFigureByExternalChange
   };
 };
 
@@ -2819,9 +2890,6 @@ 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,
@@ -2829,6 +2897,7 @@ var ChessBoard = function ChessBoard(props) {
     }),
     fromPos = _useChessBoardInterac.fromPos,
     newMove = _useChessBoardInterac.newMove,
+    animated = _useChessBoardInterac.animated,
     boardConfig = _useChessBoardInterac.boardConfig,
     markedCells = _useChessBoardInterac.markedCells,
     grabbingPos = _useChessBoardInterac.grabbingPos,
@@ -2841,7 +2910,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,
@@ -2855,7 +2923,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,
@@ -2875,24 +2944,8 @@ var ChessBoard = function ChessBoard(props) {
   }, [reversed]);
   React.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__default.createElement("div", {
     className: styles.chessBoard