react-chessboard-ui 1.7.3 → 2.0.0

package/dist/index.modern.js

@@ -1672,7 +1672,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","hiddenFigureEffect":"_2YKzU","markedCell":"_Zly-L","checkedCell":"_31pmr","arrow":"_12Bbd","arrowEnd":"_1BC3I","figurePicker":"_13OXq","figurePickerItem":"_16zCe","chessBoardFigurePicker":"_1ZGj2","movesTrail":"_1RqCc"};
+var styles = {"chessBoard":"_3XI6H","figuresLayout":"_2SyRK","controlLayout":"_3OVc8","controlLayoutGrabbing":"_G0IIl","interactiveLayout":"_3THn5","selectedSquare":"_1YsOr","pickedSquare":"_3MMcp","checkedSquare":"_KLkVN","interactiveCell":"_27yHq","possibleMoveMark":"_UYGA_","row":"_2XKSc","piece":"_2QHnf","holdedPiece":"_3z25q","bluredPiece":"_10meo","hiddenFigureEffect":"_2YKzU","arrow":"_12Bbd","arrowEnd":"_1BC3I","piecePicker":"_3gVhA","piecePickerItem":"_3EtmA","chessBoardPiecePicker":"_2xZM1","movesTrail":"_1RqCc","lightSquare":"_1B0qo","darkSquare":"_1NBqS"};
 
 var CHESS_PIECES_MAP = {
   'pawn-white': function pawnWhite(size) {
@@ -1874,36 +1874,41 @@ var CHESS_PIECES_MAP = {
   }
 };
 
-var DEFAULT_CELL_SIZE = 92;
-var DEFAULT_FIGURE_SIZE_PERCENT = 80;
-var FACTOR_FOR_SIZE_CIRCLE_MARK = 4.6;
+var DEFAULT_FACTOR_FOR_SIZE_CIRCLE_MARK = 4.6;
 var DEFAULT_CIRCLE_MARK_COLOR = '#3697ce';
-var DEFAULT_WHITE_CELL_COLOR = '#fafafc';
-var DEFAULT_BLACK_CELL_COLOR = '#d8d9e6';
-var DEFAULT_SELECTED_CELL_COLOR = '#e3f1fe';
-var DEFAULT_SELECTED_CELL_BORDER = '3px solid #6ac2fd';
 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_SHOW_MOVES_TRAIL = true;
 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_SQUARE_SIZE = 92;
+var DEFAULT_PIECE_SIZE_PERCENT = 80;
+var DEFAULT_HIDE_PIECE_EFFECT_CLASS_NAME = styles.hiddenFigureEffect;
+var DEFAULT_LIGHT_SQUARE_CLASS_NAME = undefined;
+var DEFAULT_DARK_SQUARE_CLASS_NAME = undefined;
+var DEFAULT_PICKED_SQUARE_CLASS_NAME = undefined;
+var DEFAULT_CHECKED_SQUARE_CLASS_NAME = undefined;
+var DEFAULT_SQUARE_HIGLIGHT_CLASS_NAME = undefined;
+var DEFAULT_SELECTED_SQUARE_CLASS_NAME = undefined;
+var DEFAULT_HOLDED_PIECE_CLASS_NAME = undefined;
+var DEFAULT_POSSIBLE_MOVE_MARK_CLASS_NAME = undefined;
 var DEFAULT_CHESSBORD_CONFIG = {
-  cellSize: DEFAULT_CELL_SIZE,
-  figureSizePercent: DEFAULT_FIGURE_SIZE_PERCENT,
+  squareSize: DEFAULT_SQUARE_SIZE,
+  pieceSizePercent: DEFAULT_PIECE_SIZE_PERCENT,
+  lightSquareClassName: DEFAULT_LIGHT_SQUARE_CLASS_NAME,
+  darkSquareClassName: DEFAULT_DARK_SQUARE_CLASS_NAME,
+  pickedSquareClassName: DEFAULT_PICKED_SQUARE_CLASS_NAME,
+  selectedSquareClassName: DEFAULT_SELECTED_SQUARE_CLASS_NAME,
+  holdedPieceClassName: DEFAULT_HOLDED_PIECE_CLASS_NAME,
+  checkedSquareClassName: DEFAULT_CHECKED_SQUARE_CLASS_NAME,
+  squareHighlightClassName: DEFAULT_SQUARE_HIGLIGHT_CLASS_NAME,
   circleMarkColor: DEFAULT_CIRCLE_MARK_COLOR,
-  whiteCellColor: DEFAULT_WHITE_CELL_COLOR,
-  blackCellColor: DEFAULT_BLACK_CELL_COLOR,
-  selectedCellColor: DEFAULT_SELECTED_CELL_COLOR,
-  selectedCellBorder: DEFAULT_SELECTED_CELL_BORDER,
+  factorForSizeCircleMark: DEFAULT_FACTOR_FOR_SIZE_CIRCLE_MARK,
+  possibleMoveMarkClassName: DEFAULT_POSSIBLE_MOVE_MARK_CLASS_NAME,
   arrowColor: DEFAULT_ARROW_COLOR,
-  markedCellColor: DEFAULT_MARKED_CELL_COLOR,
-  checkedCellColor: DEFAULT_CHECKED_CELL_COLOR,
   piecesMap: DEFAULT_PIECES_MAP,
-  cssHidePieceEffect: DEFAULT_CSS_HIDE_PIECES_EFFECT,
+  hidePieceEffectClassName: DEFAULT_HIDE_PIECE_EFFECT_CLASS_NAME,
   showMovesTrail: DEFAULT_SHOW_MOVES_TRAIL,
   onHidePieces: DEFAULT_HIDE_PIECES_HANDLER
 };
@@ -1983,12 +1988,7 @@ var calcAngle = function calcAngle(start, end) {
 };
 var getChessBoardConfig = function getChessBoardConfig(config) {
   if (!config) return DEFAULT_CHESSBORD_CONFIG;
-  var configKeyes = Object.keys(DEFAULT_CHESSBORD_CONFIG);
-  var buildedConfig = {};
-  configKeyes.forEach(function (key) {
-    buildedConfig[key] = config[key] || DEFAULT_CHESSBORD_CONFIG[key];
-  });
-  return buildedConfig;
+  return _extends({}, DEFAULT_CHESSBORD_CONFIG, config);
 };
 var getFiguresByColor = function getFiguresByColor(color, forPawnTransform) {
   if (forPawnTransform === void 0) {
@@ -2018,7 +2018,7 @@ var correctGrabbingPosByScroll = function correctGrabbingPosByScroll(pos) {
   return [pos[0] - window.scrollX, pos[1] - window.scrollY];
 };
 var correctGrabbingPosForArrow = function correctGrabbingPosForArrow(pos, boardConfig) {
-  return [pos[0] * boardConfig.cellSize + (boardConfig.cellSize / 2 - 10), pos[1] * boardConfig.cellSize + boardConfig.cellSize / 2];
+  return [pos[0] * boardConfig.squareSize + (boardConfig.squareSize / 2 - 10), pos[1] * boardConfig.squareSize + boardConfig.squareSize / 2];
 };
 var createHtmlReversedStateHolder = function createHtmlReversedStateHolder() {
   if (!window) return;
@@ -2042,21 +2042,25 @@ var ChessBoardCellsLayout = function ChessBoardCellsLayout(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? BASE_BOARD_SIZE : _ref$size,
     boardConfig = _ref.boardConfig,
-    movesTrail = _ref.movesTrail;
+    movesTrail = _ref.movesTrail,
+    moveHighlight = _ref.moveHighlight;
   return React.createElement("div", null, getFilledArrayBySize(size).map(function (_, j) {
     return React.createElement("div", {
       className: styles.row,
       key: "cells-layout-" + j
     }, getFilledArrayBySize(size).map(function (_, i) {
+      var _cn;
       return React.createElement("div", {
         style: {
-          width: boardConfig.cellSize,
-          height: boardConfig.cellSize,
-          backgroundColor: getIsLightCell(j, i) ? boardConfig.whiteCellColor : boardConfig.blackCellColor
+          width: boardConfig.squareSize,
+          height: boardConfig.squareSize
         },
+        className: cn((_cn = {}, _cn[styles.lightSquare] = !boardConfig.lightSquareClassName && getIsLightCell(j, i), _cn[styles.darkSquare] = !boardConfig.darkSquareClassName && !getIsLightCell(j, i), _cn[boardConfig.lightSquareClassName] = !!boardConfig.lightSquareClassName && getIsLightCell(j, i), _cn[boardConfig.darkSquareClassName] = !!boardConfig.darkSquareClassName && !getIsLightCell(j, i), _cn)),
         key: "cells-layout-" + i
       }, movesTrail && (movesTrail[0][0] === i && movesTrail[0][1] === j || movesTrail[1][0] === i && movesTrail[1][1] === j) && React.createElement("div", {
-        className: styles.movesTrail
+        className: cn(styles.movesTrail, boardConfig.squareHighlightClassName)
+      }), moveHighlight && (moveHighlight[0][0] === i && moveHighlight[0][1] === j || moveHighlight[1][0] === i && moveHighlight[1][1] === j) && React.createElement("div", {
+        className: cn(styles.movesTrail, boardConfig.squareHighlightClassName)
       }));
     }));
   }));
@@ -2193,20 +2197,20 @@ var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
     });
   }, [reversed, initialState]);
   return React.createElement("div", {
-    className: styles.figuresLayout
+    className: styles.piecesLayout
   }, actualState.map(function (figure, i) {
     var _cn;
     return React.createElement("div", {
       key: i,
-      className: cn([styles.figure], (_cn = {}, _cn[boardConfig.cssHidePieceEffect] = figure.beated, _cn)),
+      className: cn([styles.piece], (_cn = {}, _cn[boardConfig.hidePieceEffectClassName] = figure.beated, _cn)),
       style: {
-        top: boardConfig.cellSize * figure.position[1] + "px",
-        left: boardConfig.cellSize * figure.position[0] + "px",
+        top: boardConfig.squareSize * figure.position[1] + "px",
+        left: boardConfig.squareSize * figure.position[0] + "px",
         transition: !!change && animated ? 'all .15s ease-out' : 'none',
-        width: boardConfig.cellSize,
-        height: boardConfig.cellSize
+        width: boardConfig.squareSize,
+        height: boardConfig.squareSize
       }
-    }, boardConfig.piecesMap[getFigureCSS(figure)] && boardConfig.piecesMap[getFigureCSS(figure)](boardConfig.figureSizePercent + "%"));
+    }, boardConfig.piecesMap[getFigureCSS(figure)] && boardConfig.piecesMap[getFigureCSS(figure)](boardConfig.pieceSizePercent + "%"));
   }));
 };
 
@@ -2280,8 +2284,8 @@ var ChessBoardControlLayout = function ChessBoardControlLayout(props) {
         key: "control-layout-" + i,
         className: styles.controlCell,
         style: {
-          width: boardConfig.cellSize,
-          height: boardConfig.cellSize
+          width: boardConfig.squareSize,
+          height: boardConfig.squareSize
         },
         onClick: function onClick() {
           return handleClick([i, j]);
@@ -2735,7 +2739,7 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
     return hasCheck(cell, currentColor, linesWithCheck);
   };
   var startRenderArrow = function startRenderArrow(pos) {
-    var startPos = [(pos[0] + 1) * boardConfig.cellSize - boardConfig.cellSize / 2 - 10, (pos[1] + 1) * boardConfig.cellSize - boardConfig.cellSize / 2];
+    var startPos = [(pos[0] + 1) * boardConfig.squareSize - boardConfig.squareSize / 2 - 10, (pos[1] + 1) * boardConfig.squareSize - boardConfig.squareSize / 2];
     setStartArrowCoord(startPos);
   };
   var endRenderArrow = function endRenderArrow(_ref3) {
@@ -2838,16 +2842,16 @@ var HoldedFigure = function HoldedFigure(props) {
     boardConfig = props.boardConfig;
   var isCanShowFigure = holdedFigure && grabbingPos[0] > -1 && grabbingPos[1] > -1;
   return isCanShowFigure && React.createElement("div", {
-    className: cn([styles.figure, styles.holdedFigure]),
+    className: cn([styles.piece, styles.holdedPiece]),
     style: {
       position: 'fixed',
       zIndex: 6,
-      top: grabbingPos[1] - boardConfig.cellSize / 2 + "px",
-      left: grabbingPos[0] - boardConfig.cellSize / 2 + "px",
-      width: boardConfig.cellSize,
-      height: boardConfig.cellSize
+      top: grabbingPos[1] - boardConfig.squareSize / 2 + "px",
+      left: grabbingPos[0] - boardConfig.squareSize / 2 + "px",
+      width: boardConfig.squareSize,
+      height: boardConfig.squareSize
     }
-  }, " ", boardConfig.piecesMap[getFigureCSS(holdedFigure)](boardConfig.figureSizePercent + "%"));
+  }, " ", boardConfig.piecesMap[getFigureCSS(holdedFigure)](boardConfig.pieceSizePercent + "%"));
 };
 
 var BASE_BOARD_SIZE$2 = 8;
@@ -2874,27 +2878,23 @@ var ChessBoardInteractiveLayout = function ChessBoardInteractiveLayout(props) {
     }, getFilledArrayBySize(size).map(function (_, i) {
       var _cn, _cn2;
       return React.createElement("div", {
-        className: cn(styles.interactiveCell, (_cn = {}, _cn[styles.selectedCell] = selectedPos[0] === i && selectedPos[1] === j, _cn[styles.markedCell] = checkIsPossibleMove(markedCells, [i, j]), _cn[styles.checkedCell] = onHasCheck([i, j]), _cn)),
+        className: cn(styles.interactiveCell, (_cn = {}, _cn[styles.selectedSquare + " " + boardConfig.selectedSquareClassName] = selectedPos[0] === i && selectedPos[1] === j, _cn[styles.pickedSquare + " " + boardConfig.pickedSquareClassName] = checkIsPossibleMove(markedCells, [i, j]), _cn[styles.checkedSquare + " " + boardConfig.checkedSquareClassName] = onHasCheck([i, j]), _cn)),
         key: "interactive-layout-" + i,
         style: {
-          width: boardConfig.cellSize,
-          height: boardConfig.cellSize,
-          backgroundColor: selectedPos[0] === i && selectedPos[1] === j ? boardConfig.selectedCellColor : 'transparent',
-          border: selectedPos[0] === i && selectedPos[1] === j ? boardConfig.selectedCellBorder : 'none',
-          boxShadow: checkIsPossibleMove(markedCells, [i, j]) ? "inset 0 0 30px " + boardConfig.markedCellColor : onHasCheck([i, j]) ? "inset 0 0 30px " + boardConfig.checkedCellColor : 'none'
+          width: boardConfig.squareSize,
+          height: boardConfig.squareSize
         }
       }, selectedPos[0] === i && selectedPos[1] === j && holdedFigure && React.createElement("div", {
-        className: cn([styles.figure, styles.holdedFigure], (_cn2 = {}, _cn2[styles.bluredFigure] = grabbingPos[0] !== -1, _cn2)),
+        className: cn([styles.piece, styles.holdedPiece], (_cn2 = {}, _cn2[styles.bluredPiece] = grabbingPos[0] !== -1, _cn2)),
         style: {
-          width: boardConfig.cellSize,
-          height: boardConfig.cellSize
+          width: boardConfig.squareSize,
+          height: boardConfig.squareSize
         }
-      }, boardConfig.piecesMap[getFigureCSS(holdedFigure)](boardConfig.figureSizePercent + "%")), checkIsPossibleMove(possibleMoves, [i, j]) && React.createElement("div", {
-        className: styles.possibleMoveMark,
+      }, boardConfig.piecesMap[getFigureCSS(holdedFigure)](boardConfig.pieceSizePercent + "%")), checkIsPossibleMove(possibleMoves, [i, j]) && React.createElement("div", {
+        className: cn([styles.possibleMoveMark, boardConfig.possibleMoveMarkClassName]),
         style: {
-          width: boardConfig.cellSize / FACTOR_FOR_SIZE_CIRCLE_MARK,
-          height: boardConfig.cellSize / FACTOR_FOR_SIZE_CIRCLE_MARK,
-          backgroundColor: boardConfig.circleMarkColor
+          width: boardConfig.squareSize / boardConfig.factorForSizeCircleMark,
+          height: boardConfig.squareSize / boardConfig.factorForSizeCircleMark
         }
       }));
     }));
@@ -2960,19 +2960,19 @@ var FigurePicker = function FigurePicker(props) {
     onSelect(figure);
   }, [onSelect]);
   return React.createElement("div", {
-    className: styles.figurePicker
+    className: styles.piecePicker
   }, getFiguresByColor(color, forPawnTransform).map(function (figure) {
     return React.createElement("div", {
       key: figure.type,
-      className: styles.figurePickerItem,
+      className: styles.piecePickerItem,
       style: {
-        width: boardConfig.cellSize,
-        height: boardConfig.cellSize
+        width: boardConfig.squareSize,
+        height: boardConfig.squareSize
       },
       onClick: function onClick() {
         return handleChange(figure);
       }
-    }, boardConfig.piecesMap[getFigureCSS(figure)](boardConfig.figureSizePercent + "%"));
+    }, boardConfig.piecesMap[getFigureCSS(figure)](boardConfig.pieceSizePercent + "%"));
   }));
 };
 
@@ -2984,7 +2984,8 @@ var ChessBoard = function ChessBoard(props) {
     reversed = props.reversed,
     config = props.config,
     playerColor = props.playerColor,
-    viewOnly = props.viewOnly;
+    viewOnly = props.viewOnly,
+    moveHighlight = props.moveHighlight;
   var _useChessBoardInterac = useChessBoardInteractive({
       onChange: onChange,
       onEndGame: onEndGame,
@@ -3053,7 +3054,8 @@ var ChessBoard = function ChessBoard(props) {
     className: styles.chessBoard
   }, React.createElement(ChessBoardCellsLayout, {
     boardConfig: boardConfig,
-    movesTrail: boardConfig.showMovesTrail && movesTrail
+    movesTrail: boardConfig.showMovesTrail && movesTrail,
+    moveHighlight: moveHighlight
   }), React.createElement(ChessBoardFiguresLayout, {
     initialState: initialState,
     change: newMove,
@@ -3085,7 +3087,7 @@ var ChessBoard = function ChessBoard(props) {
     onRightClick: markCell,
     onGrabbingCell: handleGrabbingCell
   }), showFigurePicker && React.createElement("div", {
-    className: styles.chessBoardFigurePicker
+    className: styles.chessBoardPiecePicker
   }, React.createElement(FigurePicker, {
     boardConfig: boardConfig,
     color: currentColor,