react-chessboard-ui 1.5.1 → 1.7.0

package/dist/ChessBoard/ChessBoard.d.ts

@@ -5,6 +5,7 @@ declare type ChessBoardProps = {
     FEN: string;
     onChange: (moveData: MoveData) => void;
     onEndGame: (result: GameResult) => void;
+    showMovesTrail?: boolean;
     change?: ChangeMove;
     reversed?: boolean;
     config?: Partial<ChessBoardConfig>;

package/dist/ChessBoard/ChessBoardCellsLayout.d.ts

@@ -1,8 +1,10 @@
 import { FC } from "react";
 import { ChessBoardConfig } from "./models";
+import { CellPos } from "../JSChessEngine";
 declare type ChessBoardCellsLayoutProps = {
-    size?: number;
     boardConfig: ChessBoardConfig;
+    size?: number;
+    movesTrail?: [CellPos, CellPos];
 };
 export declare const ChessBoardCellsLayout: FC<ChessBoardCellsLayoutProps>;
 export {};

package/dist/ChessBoard/constants.d.ts

@@ -1,3 +1,4 @@
+import { Figure } from "../JSChessEngine";
 import { ChessBoardConfig } from "./models";
 export declare const DEFAULT_CELL_SIZE = 92;
 export declare const DEFAULT_FIGURE_SIZE_PERCENT = 80;
@@ -11,4 +12,6 @@ export declare const DEFAULT_ARROW_COLOR = "#6ac2fd";
 export declare const DEFAULT_MARKED_CELL_COLOR = "#3697ce";
 export declare const DEFAULT_CHECKED_CELL_COLOR = "#e95b5c";
 export declare const DEFAULT_PIECES_MAP: import("./models").ChessPiecesMap;
+export declare const DEFAULT_CSS_HIDE_PIECES_EFFECT: string;
+export declare const DEFAULT_HIDE_PIECES_HANDLER: (figure: Figure) => void;
 export declare const DEFAULT_CHESSBORD_CONFIG: ChessBoardConfig;

package/dist/ChessBoard/useChessBoardInteractive.d.ts

@@ -10,6 +10,7 @@ export declare const useChessBoardInteractive: (props: UseChessBoardInteractiveP
     fromPos: CellPos;
     newMove: ChangeMove;
     animated: boolean;
+    movesTrail: [CellPos, CellPos];
     boardConfig: ChessBoardConfig;
     markedCells: CellPos[];
     grabbingPos: CellPos;

package/dist/index.css

@@ -92,7 +92,7 @@
     opacity: .4;
 }
 
-._1cIvE {
+._2YKzU {
     opacity: 0;
     transform: rotate(-90deg);
 }
@@ -144,4 +144,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-}
+}
+
+._1RqCc {
+    width: 100%;
+    height: 100%;
+    box-shadow: inset 0 0 11px #3697ce80 !important;
+    background-color: #B8E6FE;
+}

package/dist/index.js

@@ -1675,7 +1675,7 @@ var stateToFEN = function stateToFEN(state, currentColor, countMoves) {
   return positionsFEN + " " + colorFEN + " " + casttlingFEN + " " + beatedFieldFEN + " " + blackMoves + " " + countMoves;
 };
 
-var styles = {"chessBoard":"_3XI6H","figuresLayout":"_2SyRK","controlLayout":"_3OVc8","controlLayoutGrabbing":"_G0IIl","interactiveLayout":"_3THn5","selectedCell":"_3vcXe","controlCell":"_2yJs1","interactiveCell":"_27yHq","possibleMoveMark":"_UYGA_","row":"_2XKSc","cell":"_ssFQn","cellLight":"_1407I","figure":"_19mE-","holdedFigure":"_3u_-s","bluredFigure":"_3SfMJ","hiddenFigure":"_1cIvE","markedCell":"_Zly-L","checkedCell":"_31pmr","arrow":"_12Bbd","arrowEnd":"_1BC3I","figurePicker":"_13OXq","figurePickerItem":"_16zCe","chessBoardFigurePicker":"_1ZGj2"};
+var styles = {"chessBoard":"_3XI6H","figuresLayout":"_2SyRK","controlLayout":"_3OVc8","controlLayoutGrabbing":"_G0IIl","interactiveLayout":"_3THn5","selectedCell":"_3vcXe","controlCell":"_2yJs1","interactiveCell":"_27yHq","possibleMoveMark":"_UYGA_","row":"_2XKSc","cell":"_ssFQn","cellLight":"_1407I","figure":"_19mE-","holdedFigure":"_3u_-s","bluredFigure":"_3SfMJ","hiddenFigureEffect":"_2YKzU","markedCell":"_Zly-L","checkedCell":"_31pmr","arrow":"_12Bbd","arrowEnd":"_1BC3I","figurePicker":"_13OXq","figurePickerItem":"_16zCe","chessBoardFigurePicker":"_1ZGj2","movesTrail":"_1RqCc"};
 
 var CHESS_PIECES_MAP = {
   'pawn-white': function pawnWhite(size) {
@@ -1889,6 +1889,10 @@ var DEFAULT_ARROW_COLOR = '#6ac2fd';
 var DEFAULT_MARKED_CELL_COLOR = '#3697ce';
 var DEFAULT_CHECKED_CELL_COLOR = '#e95b5c';
 var DEFAULT_PIECES_MAP = CHESS_PIECES_MAP;
+var DEFAULT_CSS_HIDE_PIECES_EFFECT = styles.hiddenFigureEffect;
+var DEFAULT_HIDE_PIECES_HANDLER = function DEFAULT_HIDE_PIECES_HANDLER(figure) {
+  figure.color === 'white' ? figure.position = [8, figure.position[1]] : figure.position = [-1, figure.position[1]];
+};
 var DEFAULT_CHESSBORD_CONFIG = {
   cellSize: DEFAULT_CELL_SIZE,
   figureSizePercent: DEFAULT_FIGURE_SIZE_PERCENT,
@@ -1900,7 +1904,9 @@ var DEFAULT_CHESSBORD_CONFIG = {
   arrowColor: DEFAULT_ARROW_COLOR,
   markedCellColor: DEFAULT_MARKED_CELL_COLOR,
   checkedCellColor: DEFAULT_CHECKED_CELL_COLOR,
-  piecesMap: DEFAULT_PIECES_MAP
+  piecesMap: DEFAULT_PIECES_MAP,
+  cssHidePieceEffect: DEFAULT_CSS_HIDE_PIECES_EFFECT,
+  onHidePieces: DEFAULT_HIDE_PIECES_HANDLER
 };
 
 var getFigureCSS = function getFigureCSS(figure) {
@@ -2157,7 +2163,8 @@ var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
           return figure.position[0] === to[0] && figure.position[1] === to[1];
         });
         if (foundAttactedFigure && foundAttactedFigure.color !== move.figure.color) {
-          foundAttactedFigure.color === 'white' ? foundAttactedFigure.position = [8, foundAttactedFigure.position[1]] : foundAttactedFigure.position = [-1, foundAttactedFigure.position[1]];
+          foundAttactedFigure.beated = true;
+          boardConfig.onHidePieces(foundAttactedFigure);
         }
         var foundFigureByPositionFrom = updatedState.find(function (figure) {
           return figure.position[0] === from[0] && figure.position[1] === from[1];
@@ -2189,7 +2196,7 @@ var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
     var _cn;
     return React__default.createElement("div", {
       key: i,
-      className: cn([styles.figure], (_cn = {}, _cn[styles.hiddenFigure] = figure.position[0] === -1 || figure.position[0] === 8, _cn)),
+      className: cn([styles.figure], (_cn = {}, _cn[boardConfig.cssHidePieceEffect] = figure.beated, _cn)),
       style: {
         top: boardConfig.cellSize * figure.position[1] + "px",
         left: boardConfig.cellSize * figure.position[0] + "px",
@@ -2325,39 +2332,42 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
   var _useState11 = React.useState(),
     newMove = _useState11[0],
     setNewMove = _useState11[1];
-  var _useState12 = React.useState([]),
-    linesWithCheck = _useState12[0],
-    setLinesWithCheck = _useState12[1];
+  var _useState12 = React.useState(),
+    movesTrail = _useState12[0],
+    setMovesTrail = _useState12[1];
   var _useState13 = React.useState([]),
-    markedCells = _useState13[0],
-    setMarkedCells = _useState13[1];
-  var _useState14 = React.useState([-1, -1]),
-    grabbingCell = _useState14[0],
-    setGrabbingCell = _useState14[1];
+    linesWithCheck = _useState13[0],
+    setLinesWithCheck = _useState13[1];
+  var _useState14 = React.useState([]),
+    markedCells = _useState14[0],
+    setMarkedCells = _useState14[1];
   var _useState15 = React.useState([-1, -1]),
-    clickedPos = _useState15[0],
-    setClickedPos = _useState15[1];
-  var _useState16 = React.useState(),
-    clickedFigure = _useState16[0],
-    setClickedFigure = _useState16[1];
-  var _useState17 = React.useState([]),
-    clickPossibleMoves = _useState17[0],
-    setClickPossibleMoves = _useState17[1];
-  var _useState18 = React.useState([-1, -1]),
-    startArrowCoord = _useState18[0],
-    setStartArrowCoord = _useState18[1];
-  var _useState19 = React.useState([]),
-    arrowsCoords = _useState19[0],
-    setArrowsCoords = _useState19[1];
-  var _useState20 = React.useState(false),
-    showFigurePicker = _useState20[0],
-    setShowFigurePicker = _useState20[1];
-  var _useState21 = React.useState([-1, -1]),
-    targetPos = _useState21[0],
-    setTargetPos = _useState21[1];
-  var _useState22 = React.useState(false),
-    animated = _useState22[0],
-    setAnimated = _useState22[1];
+    grabbingCell = _useState15[0],
+    setGrabbingCell = _useState15[1];
+  var _useState16 = React.useState([-1, -1]),
+    clickedPos = _useState16[0],
+    setClickedPos = _useState16[1];
+  var _useState17 = React.useState(),
+    clickedFigure = _useState17[0],
+    setClickedFigure = _useState17[1];
+  var _useState18 = React.useState([]),
+    clickPossibleMoves = _useState18[0],
+    setClickPossibleMoves = _useState18[1];
+  var _useState19 = React.useState([-1, -1]),
+    startArrowCoord = _useState19[0],
+    setStartArrowCoord = _useState19[1];
+  var _useState20 = React.useState([]),
+    arrowsCoords = _useState20[0],
+    setArrowsCoords = _useState20[1];
+  var _useState21 = React.useState(false),
+    showFigurePicker = _useState21[0],
+    setShowFigurePicker = _useState21[1];
+  var _useState22 = React.useState([-1, -1]),
+    targetPos = _useState22[0],
+    setTargetPos = _useState22[1];
+  var _useState23 = React.useState(false),
+    animated = _useState23[0],
+    setAnimated = _useState23[1];
   var clearFromPos = function clearFromPos() {
     return setFromPos([-1, -1]);
   };
@@ -2519,6 +2529,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       move: boardReversed ? JSChessEngine.reverseMove(change.move) : change.move
     });
     setNewMove(updatedChange);
+    setMovesTrail([from, to]);
   };
   var moveFigureByClick = function moveFigureByClick(from, to, figure) {
     if (!!playerColor && currentColor !== playerColor) {
@@ -2630,6 +2641,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       withTransition: withTransition,
       attackedPos: attackedPos
     });
+    setMovesTrail([moveData.from, moveData.to]);
     clearGrabbingPos();
     clearPossibleMoves();
   };
@@ -2644,6 +2656,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       transformTo: moveData.type === 'transform' ? moveData.figure : undefined
     };
     setNewMove(change);
+    setMovesTrail([moveData.from, moveData.to]);
     clearClickedPos();
     setHoldedFigure(undefined);
     clearFromPos();
@@ -2671,6 +2684,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       withTransition: withTransition,
       attackedPos: attackedPos
     });
+    setMovesTrail([moveData.from, moveData.to]);
     clearClickedPos();
     clearClickPossibleMoves();
   };
@@ -2752,6 +2766,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       withTransition: false,
       transformTo: figure
     });
+    setMovesTrail([moveData.from, moveData.to]);
     var linesWithCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
     setLinesWithCheck(linesWithCheck);
     clearGrabbingPos();
@@ -2771,6 +2786,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     fromPos: fromPos,
     newMove: newMove,
     animated: animated,
+    movesTrail: movesTrail,
     boardConfig: boardConfig,
     markedCells: markedCells,
     grabbingPos: grabbingPos,