react-chessboard-ui 1.7.3 → 2.0.0

package/dist/ChessBoard/ChessBoard.d.ts

@@ -1,4 +1,4 @@
-import { FigureColor, GameResult, MoveData } from "../JSChessEngine";
+import { PieceColor, GameResult, MoveData, SquarePos } from "../JSChessEngine";
 import { FC } from "react";
 import { ChangeMove, ChessBoardConfig } from "./models";
 declare type ChessBoardProps = {
@@ -8,8 +8,9 @@ declare type ChessBoardProps = {
     change?: ChangeMove;
     reversed?: boolean;
     config?: Partial<ChessBoardConfig>;
-    playerColor?: FigureColor;
+    playerColor?: PieceColor;
     viewOnly?: boolean;
+    moveHighlight?: [SquarePos, SquarePos];
 };
 export declare const ChessBoard: FC<ChessBoardProps>;
 export {};

package/dist/ChessBoard/ChessBoardCellsLayout.d.ts

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

package/dist/ChessBoard/ChessBoardControlLayout.d.ts

@@ -1,17 +1,17 @@
 import { FC } from "react";
-import { CellPos } from "../JSChessEngine";
+import { SquarePos } from "../JSChessEngine";
 import { ChessBoardConfig } from "./models";
 declare type ChessBoardControlLayoutProps = {
     size?: number;
     boardConfig: ChessBoardConfig;
-    onClick: (position: CellPos) => void;
-    onGrabStart: (position: CellPos) => void;
-    onGrabStartRight: (position: CellPos) => void;
-    onGrabEnd: (position: CellPos) => void;
-    onGrabEndRight: (position: CellPos) => void;
+    onClick: (position: SquarePos) => void;
+    onGrabStart: (position: SquarePos) => void;
+    onGrabStartRight: (position: SquarePos) => void;
+    onGrabEnd: (position: SquarePos) => void;
+    onGrabEndRight: (position: SquarePos) => void;
     onGrabbing: (x: number, y: number) => void;
-    onRightClick: (position: CellPos) => void;
-    onGrabbingCell: (position: CellPos) => void;
+    onRightClick: (position: SquarePos) => void;
+    onGrabbingCell: (position: SquarePos) => void;
 };
 export declare const ChessBoardControlLayout: FC<ChessBoardControlLayoutProps>;
 export {};

package/dist/ChessBoard/ChessBoardInteractiveLayout.d.ts

@@ -1,15 +1,15 @@
 import { FC } from "react";
-import { CellPos, Figure } from "../JSChessEngine";
+import { SquarePos, Piece } from "../JSChessEngine";
 import { ChessBoardConfig } from "./models";
 declare type ChessBoardInteractiveLayoutProps = {
     size?: number;
     boardConfig: ChessBoardConfig;
-    selectedPos: CellPos;
-    possibleMoves: CellPos[];
-    markedCells: CellPos[];
-    holdedFigure?: Figure;
-    grabbingPos: CellPos;
-    onHasCheck: (cellPos: CellPos) => boolean;
+    selectedPos: SquarePos;
+    possibleMoves: SquarePos[];
+    markedCells: SquarePos[];
+    holdedFigure?: Piece;
+    grabbingPos: SquarePos;
+    onHasCheck: (cellPos: SquarePos) => boolean;
 };
 export declare const ChessBoardInteractiveLayout: FC<ChessBoardInteractiveLayoutProps>;
 export {};

package/dist/ChessBoard/FigurePicker.d.ts

@@ -1,11 +1,11 @@
 import { FC } from 'react';
-import { Figure, FigureColor } from '../JSChessEngine';
+import { Piece, PieceColor } from '../JSChessEngine';
 import { ChessBoardConfig } from './models';
 interface FigurePickerProps {
     boardConfig: ChessBoardConfig;
-    color: FigureColor;
+    color: PieceColor;
     forPawnTransform?: boolean;
-    onSelect: (figure: Figure) => void;
+    onSelect: (figure: Piece) => void;
 }
 export declare const FigurePicker: FC<FigurePickerProps>;
 export {};

package/dist/ChessBoard/constants.d.ts

@@ -1,18 +1,26 @@
-import { Figure } from "../JSChessEngine";
+import { Piece } from "../JSChessEngine";
 import { ChessBoardConfig } from "./models";
-export declare const DEFAULT_CELL_SIZE = 92;
-export declare const DEFAULT_FIGURE_SIZE_PERCENT = 80;
-export declare const FACTOR_FOR_SIZE_CIRCLE_MARK = 4.6;
+export declare const DEFAULT_FACTOR_FOR_SIZE_CIRCLE_MARK = 4.6;
 export declare const DEFAULT_CIRCLE_MARK_COLOR = "#3697ce";
-export declare const DEFAULT_WHITE_CELL_COLOR = "#fafafc";
-export declare const DEFAULT_BLACK_CELL_COLOR = "#d8d9e6";
+export declare const DEFAULT_WHITE_CELL_COLOR: string;
+export declare const DEFAULT_BLACK_CELL_COLOR: string;
 export declare const DEFAULT_SELECTED_CELL_COLOR = "#e3f1fe";
 export declare const DEFAULT_SELECTED_CELL_BORDER = "3px solid #6ac2fd";
 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_SHOW_MOVES_TRAIL = true;
-export declare const DEFAULT_HIDE_PIECES_HANDLER: (figure: Figure) => void;
+export declare const DEFAULT_HIDE_PIECES_HANDLER: (figure: Piece) => void;
+export declare const DEFAULT_SQUARE_SIZE = 92;
+export declare const DEFAULT_PIECE_SIZE_PERCENT = 80;
+export declare const DEFAULT_HIDE_PIECE_EFFECT_CLASS_NAME: string;
+export declare const DEFAULT_LIGHT_SQUARE_CLASS_NAME: string;
+export declare const DEFAULT_DARK_SQUARE_CLASS_NAME: string;
+export declare const DEFAULT_PICKED_SQUARE_CLASS_NAME: string;
+export declare const DEFAULT_CHECKED_SQUARE_CLASS_NAME: string;
+export declare const DEFAULT_SQUARE_HIGLIGHT_CLASS_NAME: string;
+export declare const DEFAULT_SELECTED_SQUARE_CLASS_NAME: string;
+export declare const DEFAULT_HOLDED_PIECE_CLASS_NAME: string;
+export declare const DEFAULT_POSSIBLE_MOVE_MARK_CLASS_NAME: string;
 export declare const DEFAULT_CHESSBORD_CONFIG: ChessBoardConfig;

package/dist/ChessBoard/utils.d.ts

@@ -1,9 +1,9 @@
-import { Cell, CellPos, Figure, FigureColor, MoveData } from "../JSChessEngine";
+import { Cell, SquarePos, Piece, PieceColor, MoveData } from "../JSChessEngine";
 import { ChessBoardConfig } from "./models";
 /**
  * Возвращает класс для фигуры в клетке
  */
-export declare const getFigureCSS: (figure: Figure) => string;
+export declare const getFigureCSS: (figure: Piece) => string;
 /**
  * Возвращает белая ли клетка
  */
@@ -16,20 +16,20 @@ export declare const getFilledArrayBySize: (size: number) => number[];
  * Возвращает только массив фигурам у которых
  * есть поле position
  */
-export declare const mapCellsToFiguresArray: (boardState: Cell[][]) => Figure[];
+export declare const mapCellsToFiguresArray: (boardState: Cell[][]) => Piece[];
 /**
  *
  * @param possibleMoves Список возможных ходов
  * @param position позиция для проверки
  */
-export declare const checkIsPossibleMove: (possibleMoves: CellPos[], position: CellPos) => boolean;
+export declare const checkIsPossibleMove: (possibleMoves: SquarePos[], position: import("../JSChessEngine").CellPos) => boolean;
 /**
  * Проверяет находится ли проверяемая позиция в
  * наборе позиций
  * @param positions набор позиций
  * @param pos позиция
  */
-export declare const checkPositionsHas: (positions: CellPos[] | undefined, pos: CellPos) => boolean;
+export declare const checkPositionsHas: (positions: SquarePos[] | undefined, pos: import("../JSChessEngine").CellPos) => boolean;
 /**
  * Проверяет, является ли ход рокеровкой
  * @param moveData
@@ -39,7 +39,7 @@ export declare const checkIsCastlingMove: (moveData: MoveData) => boolean;
 /**
  * Проверка клетки, на то есть ли шах
  */
-export declare const hasCheck: (cell: Cell, currentColor: FigureColor, linesWithCheck: CellPos[][]) => boolean;
+export declare const hasCheck: (cell: Cell, currentColor: PieceColor, linesWithCheck: SquarePos[][]) => boolean;
 export declare const degrees: (a: number, b: number) => number;
 export declare const calcAngle: (start: number[], end: number[]) => number;
 export declare const getChessBoardConfig: (config: Partial<ChessBoardConfig> | undefined) => ChessBoardConfig;
@@ -48,16 +48,16 @@ export declare const getChessBoardConfig: (config: Partial<ChessBoardConfig> | u
  * @param color цвет фигур
  * @param forPawnTransform только фигуры для превращения пешки
  */
-export declare const getFiguresByColor: (color: FigureColor, forPawnTransform?: boolean) => Figure[];
+export declare const getFiguresByColor: (color: PieceColor, forPawnTransform?: boolean) => Piece[];
 /**
  * Корректирует позицию захвата курсором
  * коррекция происходит по сроллу
  */
-export declare const correctGrabbingPosByScroll: (pos: CellPos) => CellPos;
+export declare const correctGrabbingPosByScroll: (pos: import("../JSChessEngine").CellPos) => import("../JSChessEngine").CellPos;
 /**
  * Корректирует указатели стрелки
  */
-export declare const correctGrabbingPosForArrow: (pos: CellPos, boardConfig: ChessBoardConfig) => CellPos;
+export declare const correctGrabbingPosForArrow: (pos: import("../JSChessEngine").CellPos, boardConfig: ChessBoardConfig) => import("../JSChessEngine").CellPos;
 /**
  * Создание тэга для хранение состояния
  * разворота доски

package/dist/JSChessEngine/JSChessEngine.d.ts

@@ -7,6 +7,10 @@ export interface Figure {
     touched?: boolean;
     position?: CellPos;
 }
+export declare type Piece = Figure;
+export declare type PieceColor = FigureColor;
+export declare type SquarePos = CellPos;
+export declare type PieceType = FigureType;
 export declare type CellColor = 'white' | 'black';
 export interface Cell {
     figure?: Figure;

package/dist/index.css

@@ -44,11 +44,19 @@
     z-index: 5;
 }
 
-._3vcXe {
+._1YsOr {
     box-sizing: border-box;
+    border: 3px solid #6ac2fd;
+    background-color: #e3f1fe;
 }
 
-._2yJs1 {}
+._3MMcp {
+    box-shadow: inset 0 0 30px #3697ce;
+}
+
+._KLkVN {
+    box-shadow: inset 0 0 30px #e95b5c;
+}
 
 ._27yHq {
     display: flex;
@@ -59,17 +67,15 @@
 ._UYGA_ {
     border-radius: 100%;
     opacity: 0.8;
+    background-color: #3697ce;
+    pointer-events: all;
 }
 
 ._2XKSc {
     display: flex;
 }
 
-._ssFQn {}
-
-._1407I {}
-
-._19mE- {
+._2QHnf {
     position: absolute;
     display: flex;
     justify-content: center;
@@ -84,11 +90,11 @@
     -webkit-user-drag: none;
 }
 
-._3u_-s {
+._3z25q {
     transition: none;
 }
 
-._3SfMJ {
+._10meo {
     opacity: .4;
 }
 
@@ -97,10 +103,6 @@
     transform: rotate(-90deg);
 }
 
-._Zly-L {}
-
-._31pmr {}
-
 ._12Bbd {
     position: absolute;
     width: 20px;
@@ -121,18 +123,18 @@
     transform: rotate(90deg);
 }
 
-._13OXq {
+._3gVhA {
     display: flex;
     justify-content: center;
 }
 
-._16zCe {
+._3EtmA {
     background-position: center;
     background-size: cover;
     cursor: pointer;
 }
 
-._1ZGj2 {
+._2xZM1 {
     z-index: 101;
     position: absolute;
     top: 0;
@@ -152,3 +154,11 @@
     box-shadow: inset 0 0 11px #3697ce80 !important;
     background-color: #B8E6FE;
 }
+
+._1B0qo {
+    background-color: #fafafc;
+}
+
+._1NBqS {
+    background-color: #d8d9e6;
+}

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","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) {
@@ -1877,36 +1877,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
 };
@@ -1986,12 +1991,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) {
@@ -2021,7 +2021,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;
@@ -2045,21 +2045,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__default.createElement("div", null, getFilledArrayBySize(size).map(function (_, j) {
     return React__default.createElement("div", {
       className: styles.row,
       key: "cells-layout-" + j
     }, getFilledArrayBySize(size).map(function (_, i) {
+      var _cn;
       return React__default.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__default.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__default.createElement("div", {
+        className: cn(styles.movesTrail, boardConfig.squareHighlightClassName)
       }));
     }));
   }));
@@ -2196,20 +2200,20 @@ var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
     });
   }, [reversed, initialState]);
   return React__default.createElement("div", {
-    className: styles.figuresLayout
+    className: styles.piecesLayout
   }, actualState.map(function (figure, i) {
     var _cn;
     return React__default.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 + "%"));
   }));
 };
 
@@ -2283,8 +2287,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]);
@@ -2738,7 +2742,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) {
@@ -2841,16 +2845,16 @@ var HoldedFigure = function HoldedFigure(props) {
     boardConfig = props.boardConfig;
   var isCanShowFigure = holdedFigure && grabbingPos[0] > -1 && grabbingPos[1] > -1;
   return isCanShowFigure && React__default.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;
@@ -2877,27 +2881,23 @@ var ChessBoardInteractiveLayout = function ChessBoardInteractiveLayout(props) {
     }, getFilledArrayBySize(size).map(function (_, i) {
       var _cn, _cn2;
       return React__default.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__default.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__default.createElement("div", {
-        className: styles.possibleMoveMark,
+      }, boardConfig.piecesMap[getFigureCSS(holdedFigure)](boardConfig.pieceSizePercent + "%")), checkIsPossibleMove(possibleMoves, [i, j]) && React__default.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
         }
       }));
     }));
@@ -2963,19 +2963,19 @@ var FigurePicker = function FigurePicker(props) {
     onSelect(figure);
   }, [onSelect]);
   return React__default.createElement("div", {
-    className: styles.figurePicker
+    className: styles.piecePicker
   }, getFiguresByColor(color, forPawnTransform).map(function (figure) {
     return React__default.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 + "%"));
   }));
 };
 
@@ -2987,7 +2987,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,
@@ -3056,7 +3057,8 @@ var ChessBoard = function ChessBoard(props) {
     className: styles.chessBoard
   }, React__default.createElement(ChessBoardCellsLayout, {
     boardConfig: boardConfig,
-    movesTrail: boardConfig.showMovesTrail && movesTrail
+    movesTrail: boardConfig.showMovesTrail && movesTrail,
+    moveHighlight: moveHighlight
   }), React__default.createElement(ChessBoardFiguresLayout, {
     initialState: initialState,
     change: newMove,
@@ -3088,7 +3090,7 @@ var ChessBoard = function ChessBoard(props) {
     onRightClick: markCell,
     onGrabbingCell: handleGrabbingCell
   }), showFigurePicker && React__default.createElement("div", {
-    className: styles.chessBoardFigurePicker
+    className: styles.chessBoardPiecePicker
   }, React__default.createElement(FigurePicker, {
     boardConfig: boardConfig,
     color: currentColor,