react-chessboard-ui 0.1.1

package/dist/index.modern.js

@@ -0,0 +1,2817 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import cn from 'classnames';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+var DIRECTIONS_D = ['top-right', 'bottom-right', 'bottom-left', 'top-left'];
+var DIRECTIONS_VH = ['top', 'right', 'bottom', 'left'];
+var FIGURES_COUNTS = {
+  PAWNS_COUNT: 8,
+  KNIGHTS_COUNT: 2,
+  BISHOPS_COUNT: 2,
+  ROOKS_COUNT: 2,
+  QUEENS_COUNT: 1,
+  KINGS_COUNT: 1
+};
+var JSChessEngine = /*#__PURE__*/function () {
+  function JSChessEngine() {}
+  JSChessEngine.detectDrawByRepeatMoves = function detectDrawByRepeatMoves(fenMoves) {
+    if (fenMoves.length < 8) return false;
+    var lastMoves = fenMoves.slice(fenMoves.length - 8);
+    var firstFromSelectedMoves = lastMoves.slice(0, 4);
+    var lastFromSelectedMoves = lastMoves.slice(4);
+    var firstResultsFENs = firstFromSelectedMoves.join('');
+    var lastResultsFENs = lastFromSelectedMoves.join('');
+    return firstResultsFENs === lastResultsFENs;
+  };
+  JSChessEngine.getCastlingType = function getCastlingType(move) {
+    if (move.figure.touched || move.figure.type !== 'king') return undefined;
+    var horizontalDiff = move.to[0] - move.from[0];
+    if (horizontalDiff === 0 || Math.abs(horizontalDiff) === 1) return undefined;
+    if (horizontalDiff > 0) return '0-0';
+    return '0-0-0';
+  };
+  return JSChessEngine;
+}();
+JSChessEngine.getNextMoves = function (state, _ref, linesWithCheck, revese) {
+  var i = _ref[0],
+    j = _ref[1];
+  if (revese === void 0) {
+    revese = false;
+  }
+  var figure = state[j][i].figure;
+  var type = figure.type;
+  var nextPositions = [];
+  switch (type) {
+    case 'pawn':
+      var pawnPossibleMoves = JSChessEngine.getNextMovesPawn(state, [i, j], revese);
+      nextPositions = JSChessEngine.correctionPossibleMoves(state, [i, j], pawnPossibleMoves, linesWithCheck);
+      break;
+    case 'bishop':
+      var bishopPossibleMoves = JSChessEngine.getNextMovesBishop(state, [i, j]);
+      nextPositions = JSChessEngine.correctionPossibleMoves(state, [i, j], bishopPossibleMoves, linesWithCheck);
+      break;
+    case 'knigts':
+      var knigtPossibleMoves = JSChessEngine.getNextMovesKnigts(state, [i, j]);
+      nextPositions = JSChessEngine.correctionPossibleMoves(state, [i, j], knigtPossibleMoves, linesWithCheck);
+      break;
+    case 'rook':
+      var rookPossibleMovese = JSChessEngine.getNextMovesRook(state, [i, j]);
+      nextPositions = JSChessEngine.correctionPossibleMoves(state, [i, j], rookPossibleMovese, linesWithCheck);
+      break;
+    case 'queen':
+      var queenPossibleMoves = JSChessEngine.getNextMovesQueen(state, [i, j]);
+      nextPositions = JSChessEngine.correctionPossibleMoves(state, [i, j], queenPossibleMoves, linesWithCheck);
+      break;
+    case 'king':
+      nextPositions = JSChessEngine.getNextMovesKing(state, [i, j], revese);
+      break;
+  }
+  return nextPositions;
+};
+JSChessEngine.reverseChessBoard = function (state) {
+  var prepareCells = [].concat(state);
+  var reversedCells = [].concat(prepareCells.reverse());
+  return reversedCells.map(function (row) {
+    return [].concat(row).reverse();
+  });
+};
+JSChessEngine.reverseMove = function (moveData, boardSize) {
+  var from = moveData.from,
+    to = moveData.to,
+    figure = moveData.figure,
+    type = moveData.type;
+  var reversedMove = {
+    figure: figure,
+    from: [boardSize - (from[0] + 1), boardSize - (from[1] + 1)],
+    to: [boardSize - (to[0] + 1), boardSize - (to[1] + 1)],
+    type: type
+  };
+  return reversedMove;
+};
+JSChessEngine.reverseMoveVector = function (moveVector, boardSize) {
+  if (boardSize === void 0) {
+    boardSize = 8;
+  }
+  var from = moveVector[0],
+    to = moveVector[1];
+  var reversedMoveVector = [[boardSize - (from[0] + 1), boardSize - (from[1] + 1)], [boardSize - (to[0] + 1), boardSize - (to[1] + 1)]];
+  return reversedMoveVector;
+};
+JSChessEngine.checkInBorderBoard = function (state, pos) {
+  return pos[0] >= 0 && pos[0] < state.length && pos[1] >= 0 && pos[1] < state.length;
+};
+JSChessEngine.getFigureColor = function (state, pos) {
+  return state[pos[1]][pos[0]].figure.color;
+};
+JSChessEngine.getFigureType = function (state, pos) {
+  var _state$pos$1$pos$0$fi;
+  return (_state$pos$1$pos$0$fi = state[pos[1]][pos[0]].figure) === null || _state$pos$1$pos$0$fi === void 0 ? void 0 : _state$pos$1$pos$0$fi.type;
+};
+JSChessEngine.checkEnemy = function (state, pos, target) {
+  var _state$target$1$targe, _state$target$1$targe2;
+  var color = JSChessEngine.getFigureColor(state, pos);
+  var targetColor = (_state$target$1$targe = state[target[1]][target[0]]) === null || _state$target$1$targe === void 0 ? void 0 : (_state$target$1$targe2 = _state$target$1$targe.figure) === null || _state$target$1$targe2 === void 0 ? void 0 : _state$target$1$targe2.color;
+  return !!targetColor && targetColor !== color;
+};
+JSChessEngine.checkTeammate = function (state, pos, target) {
+  var _state$target$1$targe3;
+  var color = JSChessEngine.getFigureColor(state, pos);
+  var targetColor = (_state$target$1$targe3 = state[target[1]][target[0]].figure) === null || _state$target$1$targe3 === void 0 ? void 0 : _state$target$1$targe3.color;
+  return !!targetColor && targetColor === color;
+};
+JSChessEngine.checkEnemyKing = function (state, pos, target) {
+  var _state$target$1$targe4, _state$target$1$targe5;
+  var isKing = ((_state$target$1$targe4 = state[target[1]][target[0]]) === null || _state$target$1$targe4 === void 0 ? void 0 : (_state$target$1$targe5 = _state$target$1$targe4.figure) === null || _state$target$1$targe5 === void 0 ? void 0 : _state$target$1$targe5.type) === 'king';
+  if (!isKing) return false;
+  return JSChessEngine.checkEnemy(state, pos, target);
+};
+JSChessEngine.checkBeatedCell = function (state, target) {
+  var _state$target$1$targe6;
+  return !!((_state$target$1$targe6 = state[target[1]][target[0]]) !== null && _state$target$1$targe6 !== void 0 && _state$target$1$targe6.beated);
+};
+JSChessEngine.hasFigure = function (state, pos) {
+  var _state$pos$1$pos$;
+  return !!((_state$pos$1$pos$ = state[pos[1]][pos[0]]) !== null && _state$pos$1$pos$ !== void 0 && _state$pos$1$pos$.figure);
+};
+JSChessEngine.checkFigureIsLongRange = function (state, figurePos) {
+  var figure = state[figurePos[1]][figurePos[0]].figure;
+  return (figure === null || figure === void 0 ? void 0 : figure.type) === 'bishop' || (figure === null || figure === void 0 ? void 0 : figure.type) === 'rook' || (figure === null || figure === void 0 ? void 0 : figure.type) === 'queen';
+};
+JSChessEngine.getCountEnemys = function (state, figurePos, positions) {
+  var count = 0;
+  positions.forEach(function (pos) {
+    if (JSChessEngine.checkEnemy(state, figurePos, pos) && !JSChessEngine.checkEnemyKing(state, figurePos, pos)) {
+      count += 1;
+    }
+  });
+  return count;
+};
+JSChessEngine.getTeammateKingPos = function (state, figurePos) {
+  var figureColor = JSChessEngine.getFigureColor(state, figurePos);
+  var kingPos = undefined;
+  for (var j = 0; j < state.length; j++) {
+    var row = state[j];
+    for (var i = 0; i < row.length; i++) {
+      var figure = row[i].figure;
+      if ((figure === null || figure === void 0 ? void 0 : figure.color) === figureColor && figure.type === 'king') {
+        kingPos = [i, j];
+        break;
+      }
+    }
+    if (!!kingPos) {
+      break;
+    }
+  }
+  return kingPos;
+};
+JSChessEngine.getAllEnemysPositions = function (state, pos) {
+  var enemysPos = [];
+  state.forEach(function (row, j) {
+    return row.forEach(function (_, i) {
+      JSChessEngine.checkEnemy(state, pos, [i, j]) && enemysPos.push([i, j]);
+    });
+  });
+  return enemysPos;
+};
+JSChessEngine.getAllTeammatesPositionsByColor = function (state, color) {
+  var positions = [];
+  state.forEach(function (row, j) {
+    return row.forEach(function (cell, i) {
+      if (!!cell.figure && cell.figure.color === color) {
+        positions.push([i, j]);
+      }
+    });
+  });
+  return positions;
+};
+JSChessEngine.checkPossibleMoveTo = function (state, pos, target) {
+  return JSChessEngine.checkInBorderBoard(state, target) && (!JSChessEngine.hasFigure(state, target) || JSChessEngine.hasFigure(state, target) && JSChessEngine.checkEnemy(state, pos, target) && !JSChessEngine.checkEnemyKing(state, pos, target));
+};
+JSChessEngine.checkPossibleAttackTo = function (state, figurePos, target) {
+  return JSChessEngine.checkInBorderBoard(state, target) && (!JSChessEngine.hasFigure(state, target) || JSChessEngine.checkEnemy(state, figurePos, target));
+};
+JSChessEngine.checkAttackedCell = function (state, pos, target) {
+  return JSChessEngine.checkInBorderBoard(state, target);
+};
+JSChessEngine.checkAttackedCellByPawn = function (state, pos, target) {
+  switch (target.typeMove) {
+    case 'default':
+    case 'first':
+      return false;
+    case 'attack':
+      return JSChessEngine.checkInBorderBoard(state, target.pos);
+  }
+};
+JSChessEngine.checkPosBetweenAttckerAndKing = function (state, pos, kingPos, attackerPos) {
+  if (pos[0] === attackerPos[0] && pos[0] === kingPos[0]) {
+    return pos[1] > kingPos[1] && pos[1] < attackerPos[1] || pos[1] > attackerPos[1] && pos[1] < kingPos[1];
+  }
+  if (pos[1] === attackerPos[1] && pos[1] === kingPos[1]) {
+    return pos[0] > kingPos[0] && pos[0] < attackerPos[0] || pos[0] > attackerPos[0] && pos[0] < kingPos[0];
+  }
+  if (pos[1] > kingPos[1] && pos[1] < attackerPos[1] || pos[1] > attackerPos[1] && pos[1] < kingPos[1]) {
+    return pos[0] > kingPos[0] && pos[0] < attackerPos[0] || pos[0] > attackerPos[0] && pos[0] < kingPos[0];
+  }
+  if (pos[0] > kingPos[0] && pos[0] < attackerPos[0] || pos[0] > attackerPos[0] && pos[0] < kingPos[0]) {
+    return pos[1] > kingPos[1] && pos[1] < attackerPos[1] || pos[1] > attackerPos[1] && pos[1] < kingPos[1];
+  }
+  return false;
+};
+JSChessEngine.correctionPossibleMoves = function (state, figurePos, possibleMoves, linesWithCheck) {
+  var kingPos = JSChessEngine.getTeammateKingPos(state, figurePos);
+  var enemysPos = JSChessEngine.getAllEnemysPositions(state, figurePos);
+  var longrangeEnemysPos = enemysPos.filter(function (pos) {
+    return JSChessEngine.checkFigureIsLongRange(state, pos);
+  });
+  var correctedPossibleMoves = [];
+  var kingBehidFigure = false;
+  longrangeEnemysPos.forEach(function (enemyPos) {
+    var enemyType = state[enemyPos[1]][enemyPos[0]].figure.type;
+    switch (enemyType) {
+      case 'bishop':
+        DIRECTIONS_D.forEach(function (direction) {
+          if (!kingBehidFigure) {
+            var attackedLine = JSChessEngine.getFullAttackedLine(state, enemyPos, direction);
+            var foundIndexKingPos = attackedLine.findIndex(function (pos) {
+              return pos[0] === kingPos[0] && pos[1] === kingPos[1];
+            });
+            var foundIndexFigurePos = attackedLine.findIndex(function (pos) {
+              return pos[0] === figurePos[0] && pos[1] === figurePos[1];
+            });
+            var countFiguresBehindKing = JSChessEngine.getCountEnemys(state, enemyPos, attackedLine);
+            kingBehidFigure = foundIndexKingPos > -1 && foundIndexFigurePos > -1 && foundIndexKingPos > foundIndexFigurePos && countFiguresBehindKing === 1;
+            if (kingBehidFigure) {
+              possibleMoves.forEach(function (possibleMove) {
+                [].concat(attackedLine, [enemyPos]).forEach(function (attackedPos) {
+                  if (attackedPos[0] === possibleMove[0] && attackedPos[1] === possibleMove[1]) {
+                    correctedPossibleMoves.push(possibleMove);
+                  }
+                });
+              });
+            }
+          }
+        });
+        break;
+      case 'rook':
+        if (kingBehidFigure) {
+          break;
+        }
+        DIRECTIONS_VH.forEach(function (direction) {
+          if (!kingBehidFigure) {
+            var attackedLine = JSChessEngine.getFullAttackedLine(state, enemyPos, direction);
+            var foundIndexKingPos = attackedLine.findIndex(function (pos) {
+              return pos[0] === kingPos[0] && pos[1] === kingPos[1];
+            });
+            var foundIndexFigurePos = attackedLine.findIndex(function (pos) {
+              return pos[0] === figurePos[0] && pos[1] === figurePos[1];
+            });
+            var countFiguresBehindKing = JSChessEngine.getCountEnemys(state, enemyPos, attackedLine);
+            kingBehidFigure = foundIndexKingPos > -1 && foundIndexFigurePos > -1 && foundIndexKingPos > foundIndexFigurePos && countFiguresBehindKing === 1;
+            if (kingBehidFigure) {
+              possibleMoves.forEach(function (possibleMove) {
+                [].concat(attackedLine, [enemyPos]).forEach(function (attackedPos) {
+                  if (attackedPos[0] === possibleMove[0] && attackedPos[1] === possibleMove[1]) {
+                    correctedPossibleMoves.push(possibleMove);
+                  }
+                });
+              });
+            }
+          }
+        });
+        break;
+      case 'queen':
+        if (kingBehidFigure) {
+          break;
+        }
+        [].concat(DIRECTIONS_D, DIRECTIONS_VH).forEach(function (direction) {
+          if (!kingBehidFigure) {
+            var attackedLine = JSChessEngine.getFullAttackedLine(state, enemyPos, direction);
+            var foundIndexKingPos = attackedLine.findIndex(function (pos) {
+              return pos[0] === kingPos[0] && pos[1] === kingPos[1];
+            });
+            var foundIndexFigurePos = attackedLine.findIndex(function (pos) {
+              return pos[0] === figurePos[0] && pos[1] === figurePos[1];
+            });
+            var countFiguresBehindKing = JSChessEngine.getCountEnemys(state, enemyPos, attackedLine);
+            kingBehidFigure = foundIndexKingPos > -1 && foundIndexFigurePos > -1 && foundIndexKingPos > foundIndexFigurePos && countFiguresBehindKing === 1;
+            if (kingBehidFigure) {
+              possibleMoves.forEach(function (possibleMove) {
+                [].concat(attackedLine, [enemyPos]).forEach(function (attackedPos) {
+                  if (attackedPos[0] === possibleMove[0] && attackedPos[1] === possibleMove[1]) {
+                    correctedPossibleMoves.push(possibleMove);
+                  }
+                });
+              });
+            }
+          }
+        });
+        break;
+    }
+  });
+  var preparedMoves = kingBehidFigure ? correctedPossibleMoves : possibleMoves;
+  if (linesWithCheck.length === 1) {
+    var correctedMovesForProtectKing = [];
+    var attackedLine = linesWithCheck[0];
+    var attackerPos = attackedLine[attackedLine.length - 1];
+    attackedLine.forEach(function (attackedPos) {
+      preparedMoves.forEach(function (possibleMove) {
+        if (attackedPos[0] === possibleMove[0] && attackedPos[1] === possibleMove[1] && (JSChessEngine.checkPosBetweenAttckerAndKing(state, possibleMove, kingPos, attackerPos) || JSChessEngine.checkEnemy(state, kingPos, possibleMove))) {
+          correctedMovesForProtectKing.push(possibleMove);
+        }
+      });
+    });
+    return correctedMovesForProtectKing;
+  }
+  if (linesWithCheck.length > 1) return [];
+  return preparedMoves;
+};
+JSChessEngine.getFullAttackedLine = function (state, figurePos, direction) {
+  var nextMove;
+  var attackedPositions = [];
+  switch (direction) {
+    case 'top-right':
+      nextMove = [figurePos[0] + 1, figurePos[1] - 1];
+      while (JSChessEngine.checkPossibleAttackTo(state, figurePos, nextMove)) {
+        attackedPositions.push(nextMove);
+        nextMove = [nextMove[0] + 1, nextMove[1] - 1];
+      }
+      break;
+    case 'bottom-right':
+      nextMove = [figurePos[0] + 1, figurePos[1] + 1];
+      while (JSChessEngine.checkPossibleAttackTo(state, figurePos, nextMove)) {
+        attackedPositions.push(nextMove);
+        nextMove = [nextMove[0] + 1, nextMove[1] + 1];
+      }
+      break;
+    case 'bottom-left':
+      nextMove = [figurePos[0] - 1, figurePos[1] + 1];
+      while (JSChessEngine.checkPossibleAttackTo(state, figurePos, nextMove)) {
+        attackedPositions.push(nextMove);
+        nextMove = [nextMove[0] - 1, nextMove[1] + 1];
+      }
+      break;
+    case 'top-left':
+      nextMove = [figurePos[0] - 1, figurePos[1] - 1];
+      while (JSChessEngine.checkPossibleAttackTo(state, figurePos, nextMove)) {
+        attackedPositions.push(nextMove);
+        nextMove = [nextMove[0] - 1, nextMove[1] - 1];
+      }
+      break;
+    case 'top':
+      nextMove = [figurePos[0], figurePos[1] - 1];
+      while (JSChessEngine.checkPossibleAttackTo(state, figurePos, nextMove)) {
+        attackedPositions.push(nextMove);
+        nextMove = [nextMove[0], nextMove[1] - 1];
+      }
+      break;
+    case 'right':
+      nextMove = [figurePos[0] + 1, figurePos[1]];
+      while (JSChessEngine.checkPossibleAttackTo(state, figurePos, nextMove)) {
+        attackedPositions.push(nextMove);
+        nextMove = [nextMove[0] + 1, nextMove[1]];
+      }
+      break;
+    case 'bottom':
+      nextMove = [figurePos[0], figurePos[1] + 1];
+      while (JSChessEngine.checkPossibleAttackTo(state, figurePos, nextMove)) {
+        attackedPositions.push(nextMove);
+        nextMove = [nextMove[0], nextMove[1] + 1];
+      }
+      break;
+    case 'left':
+      nextMove = [figurePos[0] - 1, figurePos[1]];
+      while (JSChessEngine.checkPossibleAttackTo(state, figurePos, nextMove)) {
+        attackedPositions.push(nextMove);
+        nextMove = [nextMove[0] - 1, nextMove[1]];
+      }
+      break;
+  }
+  return attackedPositions;
+};
+JSChessEngine.getAllAttckedPostionsByEnemys = function (state, figurePos, reverse) {
+  var enemysPos = JSChessEngine.getAllEnemysPositions(state, figurePos);
+  var attackedPositions = [];
+  enemysPos.forEach(function (_ref2) {
+    var i = _ref2[0],
+      j = _ref2[1];
+    var figure = state[j][i].figure;
+    var type = figure.type;
+    switch (type) {
+      case 'pawn':
+        var pawnAttackedPos = JSChessEngine.calcPawnMoves(state, [i, j], reverse, JSChessEngine.checkAttackedCellByPawn);
+        attackedPositions = [].concat(attackedPositions, pawnAttackedPos);
+        break;
+      case 'bishop':
+        var bishopAttackedPos = JSChessEngine.calcDiagonalMoves(state, [i, j], JSChessEngine.checkAttackedCell, function (state, _, targetPos) {
+          return JSChessEngine.hasFigure(state, targetPos) && !JSChessEngine.checkEnemyKing(state, [i, j], targetPos);
+        });
+        attackedPositions = [].concat(attackedPositions, bishopAttackedPos);
+        break;
+      case 'knigts':
+        var knigtAttackedPos = JSChessEngine.calcKnigtsMoves(state, [i, j], JSChessEngine.checkAttackedCell);
+        attackedPositions = [].concat(attackedPositions, knigtAttackedPos);
+        break;
+      case 'rook':
+        var rookAttackedPos = JSChessEngine.calcHorizontalAndVerticalMoves(state, [i, j], JSChessEngine.checkAttackedCell, function (state, _, targetPos) {
+          return JSChessEngine.hasFigure(state, targetPos) && !JSChessEngine.checkEnemyKing(state, [i, j], targetPos);
+        });
+        attackedPositions = [].concat(attackedPositions, rookAttackedPos);
+        break;
+      case 'queen':
+        var queenAttachedPosD = JSChessEngine.calcDiagonalMoves(state, [i, j], JSChessEngine.checkAttackedCell, function (state, _, targetPos) {
+          return JSChessEngine.hasFigure(state, targetPos) && !JSChessEngine.checkEnemyKing(state, [i, j], targetPos);
+        });
+        var queenAttachedPosVH = JSChessEngine.calcHorizontalAndVerticalMoves(state, [i, j], JSChessEngine.checkAttackedCell, function (state, _, targetPos) {
+          return JSChessEngine.hasFigure(state, targetPos) && !JSChessEngine.checkEnemyKing(state, [i, j], targetPos);
+        });
+        attackedPositions = [].concat(attackedPositions, queenAttachedPosD, queenAttachedPosVH);
+        break;
+      case 'king':
+        var kingAttackedPos = JSChessEngine.calcKingMoves(state, [i, j], reverse, true);
+        attackedPositions = [].concat(attackedPositions, kingAttackedPos);
+        break;
+    }
+  });
+  return attackedPositions;
+};
+JSChessEngine.calcDiagonalMoves = function (state, figurePos, onCheckPossible, onCheckFigureInCell) {
+  if (onCheckPossible === void 0) {
+    onCheckPossible = JSChessEngine.checkPossibleMoveTo;
+  }
+  if (onCheckFigureInCell === void 0) {
+    onCheckFigureInCell = JSChessEngine.checkEnemy;
+  }
+  var nextMoves = [];
+  var nextMove = [figurePos[0] - 1, figurePos[1] - 1];
+  while (onCheckPossible(state, figurePos, nextMove)) {
+    nextMoves.push([].concat(nextMove));
+    if (onCheckFigureInCell(state, figurePos, nextMove)) {
+      break;
+    }
+    nextMove = [nextMove[0] - 1, nextMove[1] - 1];
+  }
+  nextMove = [figurePos[0] + 1, figurePos[1] - 1];
+  while (onCheckPossible(state, figurePos, nextMove)) {
+    nextMoves.push([].concat(nextMove));
+    if (onCheckFigureInCell(state, figurePos, nextMove)) {
+      break;
+    }
+    nextMove = [nextMove[0] + 1, nextMove[1] - 1];
+  }
+  nextMove = [figurePos[0] + 1, figurePos[1] + 1];
+  while (onCheckPossible(state, figurePos, nextMove)) {
+    nextMoves.push([].concat(nextMove));
+    if (onCheckFigureInCell(state, figurePos, nextMove)) {
+      break;
+    }
+    nextMove = [nextMove[0] + 1, nextMove[1] + 1];
+  }
+  nextMove = [figurePos[0] - 1, figurePos[1] + 1];
+  while (onCheckPossible(state, figurePos, nextMove)) {
+    nextMoves.push([].concat(nextMove));
+    if (onCheckFigureInCell(state, figurePos, nextMove)) {
+      break;
+    }
+    nextMove = [nextMove[0] - 1, nextMove[1] + 1];
+  }
+  return nextMoves;
+};
+JSChessEngine.calcHorizontalAndVerticalMoves = function (state, figurePos, onCheckPossible, onCheckFigureInCell) {
+  if (onCheckPossible === void 0) {
+    onCheckPossible = JSChessEngine.checkPossibleMoveTo;
+  }
+  if (onCheckFigureInCell === void 0) {
+    onCheckFigureInCell = JSChessEngine.checkEnemy;
+  }
+  var nextMoves = [];
+  var nextMove = [figurePos[0] - 1, figurePos[1]];
+  while (onCheckPossible(state, figurePos, nextMove)) {
+    nextMoves.push([].concat(nextMove));
+    if (onCheckFigureInCell(state, figurePos, nextMove)) {
+      break;
+    }
+    nextMove = [nextMove[0] - 1, nextMove[1]];
+  }
+  nextMove = [figurePos[0], figurePos[1] - 1];
+  while (onCheckPossible(state, figurePos, nextMove)) {
+    nextMoves.push([].concat(nextMove));
+    if (onCheckFigureInCell(state, figurePos, nextMove)) {
+      break;
+    }
+    nextMove = [nextMove[0], nextMove[1] - 1];
+  }
+  nextMove = [figurePos[0] + 1, figurePos[1]];
+  while (onCheckPossible(state, figurePos, nextMove)) {
+    nextMoves.push([].concat(nextMove));
+    if (onCheckFigureInCell(state, figurePos, nextMove)) {
+      break;
+    }
+    nextMove = [nextMove[0] + 1, nextMove[1]];
+  }
+  nextMove = [figurePos[0], figurePos[1] + 1];
+  while (onCheckPossible(state, figurePos, nextMove)) {
+    nextMoves.push([].concat(nextMove));
+    if (onCheckFigureInCell(state, figurePos, nextMove)) {
+      break;
+    }
+    nextMove = [nextMove[0], nextMove[1] + 1];
+  }
+  return nextMoves;
+};
+JSChessEngine.calcKnigtsMoves = function (state, figurePos, onCheckPossible) {
+  if (onCheckPossible === void 0) {
+    onCheckPossible = JSChessEngine.checkPossibleMoveTo;
+  }
+  var nextMoves = [];
+  var possibleMoves = [[figurePos[0] + 1, figurePos[1] - 2], [figurePos[0] - 1, figurePos[1] - 2], [figurePos[0] - 2, figurePos[1] + 1], [figurePos[0] - 2, figurePos[1] - 1], [figurePos[0] + 2, figurePos[1] + 1], [figurePos[0] + 2, figurePos[1] - 1], [figurePos[0] + 1, figurePos[1] + 2], [figurePos[0] - 1, figurePos[1] + 2]];
+  possibleMoves.forEach(function (move) {
+    if (onCheckPossible(state, figurePos, move)) {
+      nextMoves.push(move);
+    }
+  });
+  return nextMoves;
+};
+JSChessEngine.checkPossiblePawnMoveToPos = function (state, pos, target, pawnColor, reverse) {
+  switch (target.typeMove) {
+    case 'first':
+      if (pawnColor === 'white' && reverse || pawnColor === 'black' && !reverse) {
+        return pos[1] === 1 && !JSChessEngine.hasFigure(state, [target.pos[0], target.pos[1] - 1]) && !JSChessEngine.hasFigure(state, target.pos);
+      }
+      return pos[1] === state.length - 2 && !JSChessEngine.hasFigure(state, [target.pos[0], target.pos[1] + 1]) && !JSChessEngine.hasFigure(state, target.pos);
+    case 'default':
+      return !JSChessEngine.hasFigure(state, target.pos);
+    case 'attack':
+      return JSChessEngine.checkInBorderBoard(state, target.pos) && JSChessEngine.hasFigure(state, target.pos) && JSChessEngine.checkEnemy(state, pos, target.pos) && !JSChessEngine.checkEnemyKing(state, pos, target.pos) || JSChessEngine.checkInBorderBoard(state, target.pos) && JSChessEngine.checkBeatedCell(state, target.pos);
+  }
+};
+JSChessEngine.calcPawnMoves = function (state, figurePos, revese, onCheckPossible) {
+  if (onCheckPossible === void 0) {
+    onCheckPossible = JSChessEngine.checkPossiblePawnMoveToPos;
+  }
+  var pawnColor = JSChessEngine.getFigureColor(state, figurePos);
+  var nextMoves = [];
+  var possibleMoves = [{
+    typeMove: 'first',
+    pos: [figurePos[0], figurePos[1] - 2]
+  }, {
+    typeMove: 'default',
+    pos: [figurePos[0], figurePos[1] - 1]
+  }, {
+    typeMove: 'attack',
+    pos: [figurePos[0] - 1, figurePos[1] - 1]
+  }, {
+    typeMove: 'attack',
+    pos: [figurePos[0] + 1, figurePos[1] - 1]
+  }];
+  var possibleMovesReverse = [{
+    typeMove: 'first',
+    pos: [figurePos[0], figurePos[1] + 2]
+  }, {
+    typeMove: 'default',
+    pos: [figurePos[0], figurePos[1] + 1]
+  }, {
+    typeMove: 'attack',
+    pos: [figurePos[0] - 1, figurePos[1] + 1]
+  }, {
+    typeMove: 'attack',
+    pos: [figurePos[0] + 1, figurePos[1] + 1]
+  }];
+  var possibleMovesForColor = pawnColor === 'white' && !revese || pawnColor === 'black' && revese ? possibleMoves : possibleMovesReverse;
+  possibleMovesForColor.forEach(function (move) {
+    onCheckPossible(state, figurePos, move, pawnColor, revese) && nextMoves.push(move.pos);
+  });
+  return nextMoves;
+};
+JSChessEngine.checkPossibleCastling = function (state, kingPos, castlingPath, reverse) {
+  var _state$kingPos$1$king, _state$rookPos$1$rook;
+  if (!!state[kingPos[1]][kingPos[0]].figure && (_state$kingPos$1$king = state[kingPos[1]][kingPos[0]].figure) !== null && _state$kingPos$1$king !== void 0 && _state$kingPos$1$king.touched) return false;
+  var allAttackedPositionsByEnemys = JSChessEngine.getAllAttckedPostionsByEnemys(state, kingPos, reverse);
+  var foundCheckKingPos = allAttackedPositionsByEnemys.find(function (attackedPos) {
+    return attackedPos[0] === kingPos[0] && attackedPos[1] === kingPos[1];
+  });
+  if (!!foundCheckKingPos) return false;
+  var castlingPathWithoutRook = [].concat(castlingPath);
+  var rookPos = castlingPathWithoutRook.pop();
+  if (!state[rookPos[1]][rookPos[0]] || !state[rookPos[1]][rookPos[0]].figure) return false;
+  if (!!state[rookPos[1]][rookPos[0]].figure && (_state$rookPos$1$rook = state[rookPos[1]][rookPos[0]].figure) !== null && _state$rookPos$1$rook !== void 0 && _state$rookPos$1$rook.touched) return false;
+  var castlinPathWithFigures = castlingPathWithoutRook.filter(function (castlingPos) {
+    return JSChessEngine.hasFigure(state, castlingPos);
+  });
+  if (castlinPathWithFigures.length > 0) return false;
+  var isPossibleCastling = true;
+  for (var i = 0; i < allAttackedPositionsByEnemys.length; i++) {
+    var attackedPos = allAttackedPositionsByEnemys[i];
+    for (var j = 0; j < castlingPathWithoutRook.length; j++) {
+      var castlingPos = castlingPathWithoutRook[j];
+      if (castlingPos[0] === attackedPos[0] && castlingPos[1] === attackedPos[1]) {
+        isPossibleCastling = false;
+        break;
+      }
+    }
+    if (!isPossibleCastling) break;
+  }
+  return isPossibleCastling;
+};
+JSChessEngine.calcKingMoves = function (state, figurePos, reverse, onlyAttacks) {
+  if (onlyAttacks === void 0) {
+    onlyAttacks = false;
+  }
+  var nextMoves = [];
+  var possibleMoves = [[figurePos[0], figurePos[1] - 1], [figurePos[0] + 1, figurePos[1] - 1], [figurePos[0] + 1, figurePos[1]], [figurePos[0] + 1, figurePos[1] + 1], [figurePos[0], figurePos[1] + 1], [figurePos[0] - 1, figurePos[1] + 1], [figurePos[0] - 1, figurePos[1]], [figurePos[0] - 1, figurePos[1] - 1]];
+  var castlingMovesDefault = [[figurePos[0] + 1, figurePos[1]], [figurePos[0] + 2, figurePos[1]], [figurePos[0] + 3, figurePos[1]]];
+  var longCastlingMovesDefault = [[figurePos[0] - 1, figurePos[1]], [figurePos[0] - 2, figurePos[1]], [figurePos[0] - 3, figurePos[1]], [figurePos[0] - 4, figurePos[1]]];
+  var castlingMovesReversed = [[figurePos[0] - 1, figurePos[1]], [figurePos[0] - 2, figurePos[1]], [figurePos[0] - 3, figurePos[1]]];
+  var longCastlingMovesReversed = [[figurePos[0] + 1, figurePos[1]], [figurePos[0] + 2, figurePos[1]], [figurePos[0] + 3, figurePos[1]], [figurePos[0] + 4, figurePos[1]]];
+  var castlingMoves = reverse ? castlingMovesReversed : castlingMovesDefault;
+  var longCastlingMoves = reverse ? longCastlingMovesReversed : longCastlingMovesDefault;
+  if (onlyAttacks) return possibleMoves;
+  var allAttackedPositionsByEnemys = JSChessEngine.getAllAttckedPostionsByEnemys(state, figurePos, reverse);
+  possibleMoves.forEach(function (move) {
+    if (JSChessEngine.checkPossibleMoveTo(state, figurePos, move)) {
+      var foundInAttacked = allAttackedPositionsByEnemys.find(function (attackedMove) {
+        return attackedMove[0] === move[0] && attackedMove[1] === move[1];
+      });
+      foundInAttacked === undefined && nextMoves.push(move);
+    }
+  });
+  if (JSChessEngine.checkPossibleCastling(state, figurePos, castlingMoves, reverse)) {
+    castlingMoves.forEach(function (castlingPos) {
+      return nextMoves.push(castlingPos);
+    });
+  }
+  if (JSChessEngine.checkPossibleCastling(state, figurePos, longCastlingMoves, reverse)) {
+    longCastlingMoves.forEach(function (castlingPos) {
+      return nextMoves.push(castlingPos);
+    });
+  }
+  return nextMoves;
+};
+JSChessEngine.getNextMovesPawn = function (state, figurePos, reverse) {
+  return JSChessEngine.calcPawnMoves(state, figurePos, reverse);
+};
+JSChessEngine.getNextMovesBishop = function (state, figurePos) {
+  return JSChessEngine.calcDiagonalMoves(state, figurePos);
+};
+JSChessEngine.getNextMovesKnigts = function (state, figurePos) {
+  return JSChessEngine.calcKnigtsMoves(state, figurePos);
+};
+JSChessEngine.getNextMovesRook = function (state, figurePos) {
+  return JSChessEngine.calcHorizontalAndVerticalMoves(state, figurePos);
+};
+JSChessEngine.getNextMovesQueen = function (state, figurePos) {
+  var diagonalMoves = JSChessEngine.calcDiagonalMoves(state, figurePos);
+  var verticalAndHorizontalMoves = JSChessEngine.calcHorizontalAndVerticalMoves(state, figurePos);
+  var moves = [].concat(diagonalMoves, verticalAndHorizontalMoves);
+  return moves;
+};
+JSChessEngine.getNextMovesKing = function (state, figurePos, reverse) {
+  return JSChessEngine.calcKingMoves(state, figurePos, reverse);
+};
+JSChessEngine.getLinesWithCheck = function (state, activeColor, reverse) {
+  if (reverse === void 0) {
+    reverse = false;
+  }
+  var posTeammates = JSChessEngine.getAllTeammatesPositionsByColor(state, activeColor);
+  var linesWithCheck = [];
+  posTeammates.forEach(function (pos) {
+    var figureType = JSChessEngine.getFigureType(state, pos);
+    switch (figureType) {
+      case 'bishop':
+        DIRECTIONS_D.forEach(function (direction) {
+          var attackedLineBishop = JSChessEngine.getFullAttackedLine(state, pos, direction);
+          var hasAttackedEnemyKing = false;
+          for (var i = 0; i < attackedLineBishop.length; i++) {
+            var attackedPos = attackedLineBishop[i];
+            if (JSChessEngine.hasFigure(state, attackedPos) && !JSChessEngine.checkEnemyKing(state, pos, attackedPos)) {
+              break;
+            }
+            if (JSChessEngine.checkEnemyKing(state, pos, attackedPos)) {
+              hasAttackedEnemyKing = true;
+              break;
+            }
+          }
+          if (hasAttackedEnemyKing) {
+            linesWithCheck.push([].concat(attackedLineBishop, [pos]));
+          }
+        });
+        break;
+      case 'rook':
+        DIRECTIONS_VH.forEach(function (direction) {
+          var attackedLineRook = JSChessEngine.getFullAttackedLine(state, pos, direction);
+          var hasAttackedEnemyKing = false;
+          for (var i = 0; i < attackedLineRook.length; i++) {
+            var attackedPos = attackedLineRook[i];
+            if (JSChessEngine.hasFigure(state, attackedPos) && !JSChessEngine.checkEnemyKing(state, pos, attackedPos)) {
+              break;
+            }
+            if (JSChessEngine.checkEnemyKing(state, pos, attackedPos)) {
+              hasAttackedEnemyKing = true;
+              break;
+            }
+          }
+          if (hasAttackedEnemyKing) {
+            linesWithCheck.push([].concat(attackedLineRook, [pos]));
+          }
+        });
+        break;
+      case 'queen':
+        [].concat(DIRECTIONS_D, DIRECTIONS_VH).forEach(function (direction) {
+          var attackedLineQueen = JSChessEngine.getFullAttackedLine(state, pos, direction);
+          var hasAttackedEnemyKing = false;
+          for (var i = 0; i < attackedLineQueen.length; i++) {
+            var attackedPos = attackedLineQueen[i];
+            if (JSChessEngine.hasFigure(state, attackedPos) && !JSChessEngine.checkEnemyKing(state, pos, attackedPos)) {
+              break;
+            }
+            if (JSChessEngine.checkEnemyKing(state, pos, attackedPos)) {
+              hasAttackedEnemyKing = true;
+              break;
+            }
+          }
+          if (hasAttackedEnemyKing) {
+            linesWithCheck.push([].concat(attackedLineQueen, [pos]));
+          }
+        });
+        break;
+      case 'pawn':
+        var pawnAttackedPositions = [];
+        if (reverse && activeColor === 'white' || !reverse && activeColor === 'black') {
+          pawnAttackedPositions.push([pos[0] + 1, pos[1] + 1]);
+          pawnAttackedPositions.push([pos[0] - 1, pos[1] + 1]);
+        }
+        if (reverse && activeColor === 'black' || !reverse && activeColor === 'white') {
+          pawnAttackedPositions.push([pos[0] + 1, pos[1] - 1]);
+          pawnAttackedPositions.push([pos[0] - 1, pos[1] - 1]);
+        }
+        pawnAttackedPositions.forEach(function (attackedPos) {
+          if (JSChessEngine.checkInBorderBoard(state, attackedPos) && JSChessEngine.checkEnemyKing(state, pos, attackedPos)) {
+            linesWithCheck.push([attackedPos, pos]);
+          }
+        });
+        break;
+      case 'knigts':
+        var knigtAttackedPositions = [[pos[0] + 1, pos[1] - 2], [pos[0] - 1, pos[1] - 2], [pos[0] - 2, pos[1] + 1], [pos[0] - 2, pos[1] - 1], [pos[0] + 2, pos[1] + 1], [pos[0] + 2, pos[1] - 1], [pos[0] + 1, pos[1] + 2], [pos[0] - 1, pos[1] + 2]];
+        knigtAttackedPositions.forEach(function (attackedPos) {
+          if (JSChessEngine.checkInBorderBoard(state, attackedPos) && JSChessEngine.checkEnemyKing(state, pos, attackedPos)) {
+            linesWithCheck.push([attackedPos, pos]);
+          }
+        });
+        break;
+    }
+  });
+  return linesWithCheck;
+};
+JSChessEngine.changeState = function (state, currentFigure, targetPos, prevPos, reverse) {
+  var attackedPos = undefined;
+  var diffHorizontal = targetPos[0] - prevPos[0];
+  if (currentFigure.type === 'king' && Math.abs(diffHorizontal) > 1) {
+    if (diffHorizontal > 0) {
+      if (reverse) {
+        var _updatedCells = state.map(function (row, j) {
+          return row.map(function (cell, i) {
+            if (j === prevPos[1] && i === 4) {
+              return _extends({}, cell, {
+                figure: {
+                  type: 'rook',
+                  color: currentFigure.color,
+                  touched: true
+                }
+              });
+            }
+            if (j === prevPos[1] && i === 5) {
+              return _extends({}, cell, {
+                figure: {
+                  type: 'king',
+                  color: currentFigure.color,
+                  touched: true
+                }
+              });
+            }
+            if (j === prevPos[1] && i === 7 || j === prevPos[1] && i === prevPos[0]) {
+              return _extends({}, cell, {
+                figure: undefined
+              });
+            }
+            return cell;
+          });
+        });
+        return {
+          updatedCells: _updatedCells,
+          attackedPos: attackedPos
+        };
+      } else {
+        var _updatedCells2 = state.map(function (row, j) {
+          return row.map(function (cell, i) {
+            if (j === prevPos[1] && i === 5) {
+              return _extends({}, cell, {
+                figure: {
+                  type: 'rook',
+                  color: currentFigure.color,
+                  touched: true
+                }
+              });
+            }
+            if (j === prevPos[1] && i === 6) {
+              return _extends({}, cell, {
+                figure: {
+                  type: 'king',
+                  color: currentFigure.color,
+                  touched: true
+                }
+              });
+            }
+            if (j === prevPos[1] && i === 7 || j === prevPos[1] && i === prevPos[0]) {
+              return _extends({}, cell, {
+                figure: undefined
+              });
+            }
+            return cell;
+          });
+        });
+        return {
+          updatedCells: _updatedCells2,
+          attackedPos: attackedPos
+        };
+      }
+    }
+    if (diffHorizontal < 0) {
+      if (reverse) {
+        var _updatedCells3 = state.map(function (row, j) {
+          return row.map(function (cell, i) {
+            if (j === prevPos[1] && i === 2) {
+              return _extends({}, cell, {
+                figure: {
+                  type: 'rook',
+                  color: currentFigure.color,
+                  touched: true
+                }
+              });
+            }
+            if (j === prevPos[1] && i === 1) {
+              return _extends({}, cell, {
+                figure: {
+                  type: 'king',
+                  color: currentFigure.color,
+                  touched: true
+                }
+              });
+            }
+            if (j === prevPos[1] && i === 0 || j === prevPos[1] && i === prevPos[0]) {
+              return _extends({}, cell, {
+                figure: undefined
+              });
+            }
+            return cell;
+          });
+        });
+        return {
+          updatedCells: _updatedCells3,
+          attackedPos: attackedPos
+        };
+      } else {
+        var _updatedCells4 = state.map(function (row, j) {
+          return row.map(function (cell, i) {
+            if (j === prevPos[1] && i === 3) {
+              return _extends({}, cell, {
+                figure: {
+                  type: 'rook',
+                  color: currentFigure.color,
+                  touched: true
+                }
+              });
+            }
+            if (j === prevPos[1] && i === 2) {
+              return _extends({}, cell, {
+                figure: {
+                  type: 'king',
+                  color: currentFigure.color,
+                  touched: true
+                }
+              });
+            }
+            if (j === prevPos[1] && i === 0 || j === prevPos[1] && i === prevPos[0]) {
+              return _extends({}, cell, {
+                figure: undefined
+              });
+            }
+            return cell;
+          });
+        });
+        return {
+          updatedCells: _updatedCells4,
+          attackedPos: attackedPos
+        };
+      }
+    }
+  }
+  var updatedCells = state.map(function (row, j) {
+    return row.map(function (cell, i) {
+      if (targetPos[0] === i && targetPos[1] === j) {
+        return {
+          figure: _extends({}, currentFigure, {
+            touched: true
+          })
+        };
+      }
+      if (prevPos[0] === i && prevPos[1] === j) {
+        return {
+          figure: undefined
+        };
+      }
+      if (currentFigure.type === 'pawn' && JSChessEngine.checkBeatedCell(state, targetPos) && j === prevPos[1] && i === targetPos[0]) {
+        attackedPos = [i, j];
+        return {
+          figure: undefined,
+          beated: false
+        };
+      }
+      if (currentFigure.type === 'pawn') {
+        var diff = targetPos[1] - prevPos[1];
+        if (Math.abs(diff) === 2) {
+          if (diff > 0 && j === targetPos[1] - 1 && targetPos[0] === i || diff < 0 && j === targetPos[1] + 1 && targetPos[0] === i) {
+            return {
+              figure: undefined,
+              beated: true
+            };
+          }
+        }
+      }
+      return _extends({}, cell, {
+        beated: cell.beated ? false : cell.beated
+      });
+    });
+  });
+  return {
+    updatedCells: updatedCells,
+    attackedPos: attackedPos
+  };
+};
+JSChessEngine.transformPawnToFigure = function (state, fromPos, targetPos, transformFigure) {
+  var preparedState = [].concat(state);
+  return preparedState.map(function (row, j) {
+    return row.map(function (cell, i) {
+      if (i === fromPos[0] && j === fromPos[1]) {
+        return {
+          beated: false,
+          figure: undefined
+        };
+      }
+      if (i === targetPos[0] && j === targetPos[1]) {
+        return {
+          beated: false,
+          figure: transformFigure
+        };
+      }
+      return _extends({}, cell);
+    });
+  });
+};
+JSChessEngine.getFieldsWithFigures = function (state) {
+  var fieldsWithFigures = [];
+  state.forEach(function (row) {
+    return row.forEach(function (cell) {
+      if (!!cell.figure) {
+        fieldsWithFigures.push(cell);
+      }
+    });
+  });
+  return fieldsWithFigures;
+};
+JSChessEngine.getGameResult = function (state, linesWithCheck, activeColor, reverse) {
+  var posTeammates = JSChessEngine.getAllTeammatesPositionsByColor(state, activeColor);
+  var cellsWithFigures = JSChessEngine.getFieldsWithFigures(state);
+  if (cellsWithFigures.length === 2) return {
+    resultType: 'draw'
+  };
+  if (cellsWithFigures.length === 3) {
+    var figureForCommon = cellsWithFigures.find(function (cell) {
+      var _cell$figure, _cell$figure2;
+      return ((_cell$figure = cell.figure) === null || _cell$figure === void 0 ? void 0 : _cell$figure.type) === 'knigts' || ((_cell$figure2 = cell.figure) === null || _cell$figure2 === void 0 ? void 0 : _cell$figure2.type) === 'bishop';
+    });
+    if (!!figureForCommon) return {
+      resultType: 'draw'
+    };
+  }
+  var countsNextMoves = [];
+  posTeammates.forEach(function (pos) {
+    var nextMoves = JSChessEngine.getNextMoves(state, pos, linesWithCheck, reverse);
+    countsNextMoves.push(nextMoves.length);
+  });
+  var countsSumResult = countsNextMoves.reduce(function (prevValue, curentValue) {
+    return prevValue + curentValue;
+  });
+  if (linesWithCheck.length > 0 && countsSumResult === 0) return {
+    resultType: 'mat',
+    winColor: activeColor === 'white' ? 'black' : 'white'
+  };
+  if (linesWithCheck.length === 0 && countsSumResult === 0) return {
+    resultType: 'pat'
+  };
+  return undefined;
+};
+JSChessEngine.getFiguresCountByType = function (flatState, figureType) {
+  var filtred = flatState.filter(function (_ref3) {
+    var figure = _ref3.figure;
+    return (figure === null || figure === void 0 ? void 0 : figure.type) === figureType;
+  });
+  var count = filtred.length;
+  return count;
+};
+JSChessEngine.getBeatedFigures = function (state, color, countsConfig) {
+  if (countsConfig === void 0) {
+    countsConfig = FIGURES_COUNTS;
+  }
+  var cellsWithFigures = [];
+  state.forEach(function (row) {
+    var filtredCells = row.filter(function (cell) {
+      return !!cell.figure && cell.figure.color === color;
+    });
+    if (filtredCells.length > 0) {
+      cellsWithFigures = [].concat(cellsWithFigures, filtredCells);
+    }
+  });
+  var beatedCountsData = {
+    pawn: countsConfig.PAWNS_COUNT - JSChessEngine.getFiguresCountByType(cellsWithFigures, 'pawn'),
+    knigts: countsConfig.KNIGHTS_COUNT - JSChessEngine.getFiguresCountByType(cellsWithFigures, 'knigts'),
+    bishop: countsConfig.BISHOPS_COUNT - JSChessEngine.getFiguresCountByType(cellsWithFigures, 'bishop'),
+    rook: countsConfig.ROOKS_COUNT - JSChessEngine.getFiguresCountByType(cellsWithFigures, 'rook'),
+    queen: countsConfig.QUEENS_COUNT - JSChessEngine.getFiguresCountByType(cellsWithFigures, 'queen')
+  };
+  return beatedCountsData;
+};
+
+var LETTERS = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
+var FIGURES_LATTERS_NOTATIONS = {
+  white: {
+    pawn: 'P',
+    knigts: 'N',
+    bishop: 'B',
+    rook: 'R',
+    queen: 'Q',
+    king: 'K'
+  },
+  black: {
+    pawn: 'p',
+    knigts: 'n',
+    bishop: 'b',
+    rook: 'r',
+    queen: 'q',
+    king: 'k'
+  }
+};
+var LETTER_TO_FIGURE_MAP = {
+  P: {
+    type: 'pawn',
+    color: 'white'
+  },
+  N: {
+    type: 'knigts',
+    color: 'white'
+  },
+  B: {
+    type: 'bishop',
+    color: 'white'
+  },
+  R: {
+    type: 'rook',
+    color: 'white'
+  },
+  Q: {
+    type: 'queen',
+    color: 'white'
+  },
+  K: {
+    type: 'king',
+    color: 'white'
+  },
+  p: {
+    type: 'pawn',
+    color: 'black'
+  },
+  n: {
+    type: 'knigts',
+    color: 'black'
+  },
+  b: {
+    type: 'bishop',
+    color: 'black'
+  },
+  r: {
+    type: 'rook',
+    color: 'black'
+  },
+  q: {
+    type: 'queen',
+    color: 'black'
+  },
+  k: {
+    type: 'king',
+    color: 'black'
+  }
+};
+var ALL_FIGURES = [{
+  type: 'pawn',
+  color: 'white'
+}, {
+  type: 'knigts',
+  color: 'white'
+}, {
+  type: 'bishop',
+  color: 'white'
+}, {
+  type: 'rook',
+  color: 'white'
+}, {
+  type: 'queen',
+  color: 'white'
+}, {
+  type: 'king',
+  color: 'white'
+}, {
+  type: 'pawn',
+  color: 'black'
+}, {
+  type: 'knigts',
+  color: 'black'
+}, {
+  type: 'bishop',
+  color: 'black'
+}, {
+  type: 'rook',
+  color: 'black'
+}, {
+  type: 'queen',
+  color: 'black'
+}, {
+  type: 'king',
+  color: 'black'
+}];
+var CHESS_BOARD_CONFIG = {
+  cellWhiteBg: '#FFFFFF',
+  cellBlackBg: '#E2E4ED',
+  cellSelectedBg: '#728bc1',
+  cellSize: 80,
+  figures: {
+    white: {
+      pawn: '',
+      bishop: '',
+      knigts: '',
+      rook: '',
+      queen: '',
+      king: ''
+    },
+    black: {
+      pawn: '',
+      bishop: '',
+      knigts: '',
+      rook: '',
+      queen: '',
+      king: ''
+    }
+  }
+};
+var INITIAL_CELLS = [[{
+  figure: {
+    type: 'rook',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'knigts',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'bishop',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'queen',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'king',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'bishop',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'knigts',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'rook',
+    color: 'black',
+    touched: false
+  }
+}], [{
+  figure: {
+    type: 'pawn',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'black',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'black',
+    touched: false
+  }
+}], [{
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}], [{
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}], [{
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}], [{
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}, {
+  figure: undefined
+}], [{
+  figure: {
+    type: 'pawn',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'pawn',
+    color: 'white',
+    touched: false
+  }
+}], [{
+  figure: {
+    type: 'rook',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'knigts',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'bishop',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'queen',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'king',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'bishop',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'knigts',
+    color: 'white',
+    touched: false
+  }
+}, {
+  figure: {
+    type: 'rook',
+    color: 'white',
+    touched: false
+  }
+}]];
+
+var getPositionByFEN = function getPositionByFEN(positionFEN) {
+  return [8 - parseInt(positionFEN[1]) + 1, LETTERS.findIndex(function (letter) {
+    return letter === positionFEN[0];
+  })];
+};
+var prepareCastlingByFEN = function prepareCastlingByFEN(castlingNotation, state) {
+  if (castlingNotation === '-') return state;
+  var preparedState = [].concat(state);
+  if (castlingNotation.includes('K')) {
+    preparedState[preparedState.length - 1][preparedState.length - 1].figure = _extends({}, preparedState[preparedState.length - 1][preparedState.length - 1].figure, {
+      touched: false
+    });
+    preparedState[preparedState.length - 1][4].figure = _extends({}, preparedState[preparedState.length - 1][4].figure, {
+      touched: false
+    });
+  }
+  if (castlingNotation.includes('Q')) {
+    preparedState[preparedState.length - 1][0].figure = _extends({}, preparedState[preparedState.length - 1][0].figure, {
+      touched: false
+    });
+    preparedState[preparedState.length - 1][4].figure = _extends({}, preparedState[preparedState.length - 1][4].figure, {
+      touched: false
+    });
+  }
+  if (castlingNotation.includes('k')) {
+    preparedState[0][preparedState.length - 1].figure = _extends({}, preparedState[0][preparedState.length - 1].figure, {
+      touched: false
+    });
+    preparedState[0][4].figure = _extends({}, preparedState[0][4].figure, {
+      touched: false
+    });
+  }
+  if (castlingNotation.includes('q')) {
+    preparedState[0][0].figure = _extends({}, preparedState[0][preparedState.length - 1].figure, {
+      touched: false
+    });
+    preparedState[0][4].figure = _extends({}, preparedState[0][4].figure, {
+      touched: false
+    });
+  }
+  return preparedState;
+};
+var partFENtoState = function partFENtoState(notation) {
+  var restoredState = [];
+  var stateRows = notation.split('/');
+  stateRows.forEach(function (stateRow) {
+    var rowCells = [];
+    for (var i = 0; i < stateRow.length; i++) {
+      var cellNotation = stateRow[i];
+      if (cellNotation === '.') {
+        rowCells.push({
+          figure: undefined
+        });
+      } else {
+        var figure = LETTER_TO_FIGURE_MAP[cellNotation];
+        rowCells.push({
+          figure: _extends({}, figure, {
+            touched: true
+          })
+        });
+      }
+    }
+    restoredState.push(rowCells);
+  });
+  return restoredState.filter(function (row) {
+    return row.length > 0;
+  });
+};
+var FENtoGameState = function FENtoGameState(FEN) {
+  var gameState = {
+    boardState: [],
+    currentColor: 'white'
+  };
+  var _FEN$split = FEN.split(' '),
+    stateNotaion = _FEN$split[0],
+    currentColor = _FEN$split[1],
+    FENcastling = _FEN$split[2],
+    beatedField = _FEN$split[3],
+    _ = _FEN$split.slice(4);
+  var preparedStateNotation = '';
+  for (var i = 0; i < stateNotaion.length; i++) {
+    if (!isNaN(parseInt(stateNotaion[i]))) {
+      var dotsCount = parseInt(stateNotaion[i]);
+      for (var dotI = 0; dotI < dotsCount; dotI++) preparedStateNotation += '.';
+      continue;
+    }
+    preparedStateNotation += stateNotaion[i];
+  }
+  gameState.boardState = partFENtoState(preparedStateNotation);
+  gameState.currentColor = currentColor === 'w' ? 'white' : 'black';
+  gameState.boardState = prepareCastlingByFEN(FENcastling, gameState.boardState);
+  if (beatedField !== '-') {
+    var posBeatedCell = getPositionByFEN(beatedField);
+    gameState.boardState[posBeatedCell[0]][posBeatedCell[1]] = _extends({}, gameState.boardState[posBeatedCell[0]][posBeatedCell[1]], {
+      beated: true
+    });
+  }
+  return gameState;
+};
+var getBeatedCellFENfromState = function getBeatedCellFENfromState(state) {
+  var beatedFieldFEN = '-';
+  for (var j = 0; j < state.length; j++) {
+    for (var i = 0; i < state[j].length; i++) {
+      if (state[j][i].beated) {
+        beatedFieldFEN = LETTERS[i] + (state.length - j).toString();
+        break;
+      }
+    }
+  }
+  return beatedFieldFEN;
+};
+var getFENpositionsFromState = function getFENpositionsFromState(state) {
+  var positionsFEN = '';
+  var emptyCellsCount = 0;
+  state.forEach(function (row, j) {
+    row.forEach(function (cell, i) {
+      if (cell.figure) {
+        if (emptyCellsCount > 0) {
+          positionsFEN += emptyCellsCount.toString();
+          emptyCellsCount = 0;
+        }
+        positionsFEN += FIGURES_LATTERS_NOTATIONS[cell.figure.color][cell.figure.type];
+      } else {
+        emptyCellsCount += 1;
+      }
+    });
+    if (emptyCellsCount > 0) {
+      positionsFEN += emptyCellsCount.toString();
+      emptyCellsCount = 0;
+    }
+    if (j !== state.length - 1) {
+      positionsFEN += '/';
+    }
+  });
+  return positionsFEN;
+};
+var getFENcastlingFromState = function getFENcastlingFromState(state) {
+  var whiteCastlingFEN = '';
+  var blackCastlingFEN = '';
+  var stateLastCell = state.length - 1;
+  state.forEach(function (row, j) {
+    return row.forEach(function (cell, i) {
+      if (j === 0 && i === 0) {
+        if (!!cell.figure && cell.figure.type === 'rook' && !cell.figure.touched) {
+          blackCastlingFEN = 'q';
+        }
+      }
+      if (j === 0 && i === 4) {
+        if (!cell.figure || cell.figure.type !== 'king' || cell.figure.touched) {
+          blackCastlingFEN = '-';
+        }
+      }
+      if (j === 0 && i === stateLastCell) {
+        if (!!cell.figure && cell.figure.type === 'rook' && !cell.figure.touched && blackCastlingFEN !== '-') {
+          blackCastlingFEN = 'k' + blackCastlingFEN;
+        }
+      }
+      if (j === stateLastCell && i === 0) {
+        if (!!cell.figure && cell.figure.type === 'rook' && !cell.figure.touched) {
+          whiteCastlingFEN = 'Q';
+        }
+      }
+      if (j === stateLastCell && i === 4) {
+        if (!cell.figure || cell.figure.type !== 'king' || cell.figure.touched) {
+          whiteCastlingFEN = '-';
+        }
+      }
+      if (j === stateLastCell && i === stateLastCell) {
+        if (!!cell.figure && cell.figure.type === 'rook' && !cell.figure.touched && blackCastlingFEN !== '-') {
+          whiteCastlingFEN = 'K' + whiteCastlingFEN;
+        }
+      }
+    });
+  });
+  if (whiteCastlingFEN === '-' && blackCastlingFEN === '-') return '-';
+  return (whiteCastlingFEN + blackCastlingFEN).replace('-', '');
+};
+var stateToFEN = function stateToFEN(state, currentColor, countMoves) {
+  if (countMoves === void 0) {
+    countMoves = 1;
+  }
+  var casttlingFEN = getFENcastlingFromState(state);
+  var positionsFEN = getFENpositionsFromState(state);
+  var colorFEN = currentColor === 'white' ? 'w' : 'b';
+  var beatedFieldFEN = getBeatedCellFENfromState(state);
+  var blackMoves = countMoves === 0 ? 0 : countMoves - 1;
+  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 CHESS_PIECES_MAP = {
+  'pawn-white': function pawnWhite(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      d: "M37.3492 12.5238C37.3492 15.286 36.1576 17.7735 34.2541 19.5131L39.1587 22.9297V29.1905H34.3573C34.5888 32.0925 36.4757 34.9969 38.9172 37.5303C41.5083 40.2188 44.6258 42.3871 46.6961 43.5546L47 43.726V53H9V43.726L9.30392 43.5546C11.3742 42.3871 14.4917 40.2188 17.0828 37.5303C19.5243 34.9969 21.4112 32.0925 21.6427 29.1905H16.8413V22.9297L21.4091 19.7477C19.351 18.0011 18.0476 15.4127 18.0476 12.5238C18.0476 7.26396 22.3684 3 27.6984 3C33.0284 3 37.3492 7.26396 37.3492 12.5238Z",
+      fill: "white"
+    }), React.createElement("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M31.8338 19.6768C31.7847 18.906 32.0841 18.155 32.6449 17.6425C34.0658 16.344 34.9237 14.522 34.9237 12.5238C34.9237 8.74601 31.7893 5.5 27.6984 5.5C23.6075 5.5 20.4732 8.74601 20.4732 12.5238C20.4732 14.6125 21.4113 16.5112 22.9509 17.8177C23.5415 18.319 23.8681 19.0781 23.8319 19.8658C23.7958 20.6535 23.4012 21.3775 22.7673 21.819L19.2668 24.2575V26.6905H21.6427C22.3206 26.6905 22.9675 26.9828 23.4267 27.4967C23.886 28.0106 24.1157 28.6991 24.0601 29.3954C23.757 33.1938 21.3675 36.6318 18.8036 39.2921C16.3921 41.7943 13.5841 43.8574 11.4255 45.1831V50.5H44.5745V45.1831C42.4159 43.8574 39.6079 41.7943 37.1964 39.2921C34.6325 36.6318 32.243 33.1938 31.9399 29.3954C31.8843 28.6991 32.114 28.0106 32.5733 27.4967C33.0325 26.9828 33.6794 26.6905 34.3573 26.6905H36.7332V24.2575L32.8959 21.5844C32.2749 21.1519 31.8828 20.4477 31.8338 19.6768ZM39.1587 22.9297V29.1905H34.3573C34.424 30.0266 34.6281 30.8629 34.9433 31.6905C35.7221 33.7353 37.1791 35.7268 38.9172 37.5303C41.5083 40.2188 44.6258 42.3871 46.6961 43.5546L47 43.726V53H9V43.726L9.30392 43.5546C11.3742 42.3871 14.4917 40.2188 17.0828 37.5303C18.8209 35.7268 20.2779 33.7353 21.0567 31.6905C21.3719 30.8629 21.576 30.0266 21.6427 29.1905H16.8413V22.9297L21.4091 19.7477C20.7719 19.207 20.207 18.5855 19.7308 17.8994C18.6689 16.3695 18.0476 14.5183 18.0476 12.5238C18.0476 7.26396 22.3684 3 27.6984 3C33.0284 3 37.3492 7.26396 37.3492 12.5238C37.3492 14.3952 36.8023 16.1405 35.8575 17.6126C35.4078 18.3133 34.868 18.9521 34.2541 19.5131L39.1587 22.9297Z",
+      fill: "#3E3F4F"
+    }));
+  },
+  'knigts-white': function knigtsWhite(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M32.9167 12.8482L25.1852 4.08704C24.066 6.15131 22.981 9.79459 24.5409 12.4247C23.7838 12.4902 23.0602 12.6146 22.5005 12.8328C18.9299 14.225 15.012 17.8218 13.0863 25.3052C12.5287 27.4722 11.5252 28.5098 10.3324 29.7432C9.2073 30.9065 7.91384 32.244 6.66755 34.8675C4.10004 40.2722 11.0292 45.6769 16.0818 40.768C18.9224 38.0082 21.4054 36.8689 23.49 35.9123C26.4905 34.5356 28.6657 33.5374 29.8944 28.6312C30.479 30.9197 30.2452 36.3207 24.6331 39.6161C19.0211 42.9116 17.8519 49.8534 17.9688 51.9131H49.8874C49.8874 32.359 47.2227 15.4643 32.9167 12.8482Z",
+      fill: "white"
+    }), React.createElement("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M25.0604 3.00684C25.4257 2.96664 25.7878 3.10529 26.0279 3.37731L33.5087 11.8544C40.9503 13.3628 45.3275 18.5751 47.8193 25.6764C50.3374 32.853 51 42.1196 51 51.913C51 52.5133 50.5018 53 49.8871 53H17.9686C17.3779 53 16.8901 52.5493 16.8574 51.9732C16.7889 50.7648 17.0879 48.3569 18.1183 45.8263C19.1555 43.279 20.9809 40.4923 24.0595 38.6845C26.1617 37.4501 27.4243 35.8968 28.1465 34.3608C28.1439 34.3633 28.1412 34.3659 28.1385 34.3685C26.9293 35.5354 25.4847 36.198 24.0415 36.86L23.963 36.896C21.9061 37.8398 19.5666 38.9151 16.8664 41.5386C13.9475 44.3745 10.348 44.2838 7.87371 42.5723C5.44537 40.8925 4.12188 37.6432 5.65784 34.4099C6.98024 31.6262 8.37192 30.1871 9.5232 28.9967C10.6946 27.7855 11.5232 26.9197 12.0068 25.0402C14.0037 17.28 18.1294 13.3666 22.0877 11.8232C22.3618 11.7164 22.6569 11.6305 22.9621 11.5613C22.5948 10.3424 22.5869 9.0646 22.7562 7.89187C22.9933 6.24878 23.5924 4.7017 24.2015 3.5783C24.3735 3.26093 24.695 3.04705 25.0604 3.00684ZM25.4952 6.10342C25.259 6.75438 25.0651 7.46829 24.9601 8.19533C24.764 9.5541 24.8927 10.8497 25.5037 11.8797C25.6943 12.2012 25.7037 12.5955 25.5285 12.9253C25.3533 13.255 25.0178 13.4745 24.6389 13.5073C23.9231 13.5692 23.3246 13.6817 22.9129 13.8422C19.7299 15.0832 16.0198 18.3634 14.1654 25.5701C13.537 28.0123 12.367 29.2221 11.1592 30.4709L11.1412 30.4895C10.0423 31.6257 8.84692 32.8618 7.67682 35.3249C6.64528 37.4963 7.50259 39.6517 9.16009 40.7983C10.7717 41.913 13.163 42.0703 15.2967 39.9973C18.2743 37.1045 20.898 35.9006 23.0092 34.9318L23.0166 34.9284C24.5479 34.2258 25.6605 33.7038 26.5743 32.822C27.4586 31.9686 28.2317 30.6948 28.8132 28.3729C28.9348 27.8873 29.3798 27.5454 29.8916 27.5442C30.4035 27.5431 30.8501 27.883 30.974 28.368C31.6414 30.9807 31.3516 36.9391 25.2063 40.5476C22.6729 42.0353 21.1077 44.3672 20.1865 46.6297C19.5273 48.2485 19.2218 49.7734 19.1174 50.8261H48.7714C48.722 41.4882 48.0155 32.9409 45.7138 26.3812C43.3397 19.6151 39.3401 15.1286 32.7117 13.9165C32.4634 13.8711 32.2384 13.7446 32.0735 13.5578L25.4952 6.10342Z",
+      fill: "#3E3F4F"
+    }), React.createElement("path", {
+      d: "M23.9202 21.4782C23.9202 22.6789 22.9237 23.6521 21.6945 23.6521C20.4652 23.6521 19.4688 22.6789 19.4688 21.4782C19.4688 20.2776 20.4652 19.3043 21.6945 19.3043C22.9237 19.3043 23.9202 20.2776 23.9202 21.4782Z",
+      fill: "#3E3F4F"
+    }));
+  },
+  'bishop-white': function bishopWhite(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      d: "M29.8545 30.4038H26.0727C26.0727 23.7267 28.1789 17.0608 32.8385 12.1815C33.5687 11.2259 34 10.046 34 8.76923C34 5.58296 31.3137 3 28 3C24.6863 3 22 5.58296 22 8.76923C22 10.3412 22.6539 11.7664 23.7144 12.807C19.9664 15.3761 13 22.2626 13 30.8846C13 39.5857 20.0948 43.1084 23.8167 43.8315L10 46.1818V53L46 53V46.1818L31.8556 43.7965C35.6197 42.9999 42.5 39.4532 42.5 30.8846C42.5 25.2741 39.7818 20.2727 36.4727 16.6364C32.8385 19.3636 29.8545 25.7273 29.8545 30.4038Z",
+      fill: "white"
+    }), React.createElement("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M28 5.27273C25.4418 5.27273 23.4694 7.28575 23.4694 9.64336C23.4694 10.8145 23.9467 11.8863 24.7431 12.6809C24.9818 12.919 25.1036 13.2554 25.0746 13.5966C25.0457 13.9377 24.8691 14.2472 24.594 14.439C22.9307 15.5983 20.5141 17.7636 18.5232 20.6218C16.5325 23.4797 15.0204 26.9522 15.0204 30.7535C15.0204 34.5515 16.5284 37.1728 18.4256 38.9466C20.3531 40.7487 22.6967 41.683 24.2802 41.9959C24.8042 42.0994 25.181 42.575 25.1748 43.1251C25.1687 43.6751 24.7813 44.1416 24.2552 44.2326L12.2041 46.317V50.7273L43.7959 50.7273V46.3184L31.4388 44.1995C30.9156 44.1098 30.5286 43.6485 30.5178 43.1018C30.5069 42.555 30.8753 42.0778 31.3944 41.9661C34.7008 41.2546 40.5102 38.1436 40.5102 30.7535C40.5102 26.1643 38.4904 21.9735 35.8369 18.7327C34.6056 19.9172 33.4539 21.6155 32.5602 23.5208C31.4833 25.8165 30.843 28.2803 30.843 30.2946C30.843 30.9222 30.3496 31.4309 29.741 31.4309H26.1907C25.5821 31.4309 25.0887 30.9222 25.0887 30.2946C25.0887 23.7121 27.1242 17.0654 31.7054 12.1582C32.2285 11.4429 32.5306 10.5762 32.5306 9.64336C32.5306 7.28575 30.5582 5.27273 28 5.27273ZM21.2653 9.64336C21.2653 5.91808 24.3365 3 28 3C31.6635 3 34.7347 5.91808 34.7347 9.64336C34.7347 11.1277 34.2402 12.4962 33.4134 13.5965C33.3886 13.6295 33.3621 13.6611 33.3339 13.6911C29.4537 17.8225 27.5365 23.4098 27.3146 29.1582H28.6902C28.8791 27.0011 29.5778 24.6592 30.576 22.5311C31.751 20.0265 33.4032 17.6856 35.2985 16.2394C35.7507 15.8944 36.3823 15.9559 36.7639 16.3822C39.9902 19.9872 42.7143 25.0235 42.7143 30.7535C42.7143 37.0527 39.2071 40.7331 35.8163 42.6462L45.0787 44.2344C45.6103 44.3255 46 44.7997 46 45.3554V51.8636C46 52.165 45.8839 52.4541 45.6772 52.6672C45.4705 52.8803 45.1902 53 44.898 53L11.102 53C10.4934 53 10 52.4912 10 51.8636V45.3554C10 44.8003 10.3889 44.3265 10.9197 44.2347L19.799 42.6989C18.8291 42.1599 17.8509 41.4771 16.9451 40.6303C14.6386 38.4738 12.8163 35.2611 12.8163 30.7535C12.8163 26.3247 14.5742 22.3954 16.7331 19.296C18.5307 16.7151 20.6432 14.6555 22.3709 13.2919C21.675 12.2488 21.2653 10.9955 21.2653 9.64336Z",
+      fill: "#3E3F4F"
+    }));
+  },
+  'rook-white': function rookWhite(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      d: "M9 5H18.7436V10.434H22.641V5H33.359V10.434H37.2564V5H47V13.1509L39.2051 18.5849L41.1538 36H14.8462L16.7949 18.5849L9 13.1509V5Z",
+      fill: "white"
+    }), React.createElement("path", {
+      d: "M14.8462 39H41.1538L47 45.7547V53H9V45.7547L14.8462 39Z",
+      fill: "white"
+    }), React.createElement("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M18.7436 12.834C17.404 12.834 16.3181 11.7594 16.3181 10.434V7.4H11.4255V11.906L18.1919 16.6229C18.9198 17.1304 19.3082 17.9918 19.2036 18.8668L17.5 33.5H38.5L36.7964 18.8668C36.6918 17.9918 37.0802 17.1304 37.8081 16.6229L44.5745 11.906V7.4H39.6819V10.434C39.6819 11.7594 38.596 12.834 37.2564 12.834H33.359C32.0194 12.834 30.9334 11.7594 30.9334 10.434V7.4H25.0666V10.434C25.0666 11.7594 23.9806 12.834 22.641 12.834H18.7436ZM22.641 5H33.359V10.434H37.2564V5H47V13.1509L39.2051 18.5849L41.1538 36H14.8462L16.7949 18.5849L9 13.1509V5H18.7436V10.434H22.641V5ZM16 41.5L11.4255 46.5953V50.6H44.5745V46.5953L40 41.5H16ZM41.1538 39H14.8462L9 45.7547V53H47V45.7547L41.1538 39Z",
+      fill: "#3E3F4F"
+    }));
+  },
+  'queen-white': function queenWhite(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      d: "M21.9569 11.4809C23.5293 10.8482 24.6452 9.25337 24.6452 7.38596C24.6452 4.96366 22.7676 3 20.4516 3C18.1356 3 16.2581 4.96366 16.2581 7.38596C16.2581 9.62443 17.8614 11.4712 19.9325 11.7387L18.0624 27.5614L9.04701 19.372C9.87134 18.5711 10.3871 17.4275 10.3871 16.1579C10.3871 13.7356 8.50958 11.7719 6.19355 11.7719C3.87752 11.7719 2 13.7356 2 16.1579C2 18.5802 3.87752 20.5439 6.19355 20.5439C6.60125 20.5439 6.99537 20.483 7.36805 20.3695L12.0645 37.2105L16.9212 45.5224L12.0645 46.421V53L44 53V46.421L39.081 45.5187L43.9355 37.2105L48.632 20.3695C49.0046 20.483 49.3987 20.5439 49.8064 20.5439C52.1225 20.5439 54 18.5802 54 16.1579C54 13.7356 52.1225 11.7719 49.8064 11.7719C47.4904 11.7719 45.6129 13.7356 45.6129 16.1579C45.6129 17.4275 46.1287 18.5711 46.953 19.372L37.9376 27.5614L36.0675 11.7387C38.1386 11.4712 39.7419 9.62443 39.7419 7.38596C39.7419 4.96366 37.8644 3 35.5484 3C33.2324 3 31.3548 4.96366 31.3548 7.38596C31.3548 9.25337 32.4707 10.8482 34.0431 11.4809L28 25.807L21.9569 11.4809Z",
+      fill: "white"
+    }), React.createElement("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M20.6997 9.60433C20.8359 9.50943 20.9831 9.42951 21.139 9.36676C21.8633 9.07534 22.4166 8.31673 22.4166 7.38596C22.4166 6.16443 21.4841 5.27273 20.4516 5.27273C19.4191 5.27273 18.4866 6.16443 18.4866 7.38596C18.4866 8.50989 19.2842 9.36408 20.2124 9.48393C20.3823 9.50587 20.5454 9.54678 20.6997 9.60433ZM19.9325 11.7387C19.8677 11.7303 19.8034 11.7204 19.7396 11.709C17.7627 11.3553 16.2581 9.55443 16.2581 7.38596C16.2581 4.96366 18.1356 3 20.4516 3C22.7676 3 24.6452 4.96366 24.6452 7.38596C24.6452 9.16107 23.6369 10.6899 22.1867 11.3801C22.1702 11.3879 22.1538 11.3956 22.1372 11.4032C22.0778 11.4305 22.0177 11.4564 21.9569 11.4809L28 25.807L34.0431 11.4809C33.9823 11.4564 33.9222 11.4305 33.8628 11.4032C33.8462 11.3956 33.8298 11.3879 33.8134 11.3801C32.3631 10.6899 31.3548 9.16108 31.3548 7.38596C31.3548 4.96366 33.2324 3 35.5484 3C37.8644 3 39.7419 4.96366 39.7419 7.38596C39.7419 9.55443 38.2373 11.3553 36.2604 11.709C36.1966 11.7204 36.1323 11.7303 36.0675 11.7387L37.9376 27.5614L46.953 19.372C46.8819 19.3029 46.8132 19.2313 46.7468 19.1573C46.6555 19.0555 46.5688 18.9491 46.487 18.8384C45.939 18.0972 45.6129 17.1674 45.6129 16.1579C45.6129 13.7356 47.4904 11.7719 49.8064 11.7719C52.1225 11.7719 54 13.7356 54 16.1579C54 18.5802 52.1225 20.5439 49.8064 20.5439C49.5014 20.5439 49.204 20.5098 48.9175 20.4451C48.8561 20.4313 48.7952 20.416 48.7349 20.3994C48.7004 20.3899 48.6661 20.3799 48.632 20.3695L43.9355 37.2105L39.081 45.5187L44 46.421V53L12.0645 53V46.421L16.9212 45.5224L12.0645 37.2105L7.36805 20.3695C7.33392 20.3799 7.29961 20.3899 7.26513 20.3994C7.20478 20.416 7.1439 20.4313 7.08252 20.4451C6.79599 20.5098 6.49857 20.5439 6.19355 20.5439C3.87752 20.5439 2 18.5802 2 16.1579C2 13.7356 3.87752 11.7719 6.19355 11.7719C8.50958 11.7719 10.3871 13.7356 10.3871 16.1579C10.3871 17.1674 10.061 18.0972 9.51303 18.8384C9.43124 18.9491 9.34451 19.0555 9.25318 19.1573C9.18684 19.2313 9.11807 19.3029 9.04701 19.372L18.0624 27.5614L19.9325 11.7387ZM10.6656 23.8859L16.5801 29.2585C17.1997 29.8213 18.0746 29.9865 18.8507 29.6872C19.6269 29.3878 20.1756 28.6735 20.2749 27.8334L21.6218 16.4377L25.9528 26.7051C26.3047 27.5392 27.1096 28.0797 28 28.0797C28.8904 28.0797 29.6953 27.5392 30.0472 26.7051L34.3782 16.4377L35.7251 27.8334C35.8244 28.6735 36.3731 29.3878 37.1493 29.6872C37.9254 29.9865 38.8003 29.8213 39.4199 29.2585L45.3344 23.8859L41.8717 36.3027L37.1665 44.3554C36.7923 44.9959 36.7499 45.783 37.0532 46.4615C37.3565 47.14 37.9668 47.6236 38.6865 47.7556L41.7714 48.3215V50.7273L14.2931 50.7273V48.3185L17.319 47.7587C18.0379 47.6257 18.6471 47.1418 18.9497 46.4636C19.2522 45.7854 19.2096 44.9991 18.8356 44.3591L14.1283 36.3027L10.6656 23.8859ZM7.19788 18.1034C7.28739 17.9677 7.39172 17.8412 7.50978 17.7265C7.90424 17.3432 8.15853 16.7895 8.15853 16.1579C8.15853 14.9364 7.22608 14.0447 6.19355 14.0447C5.16102 14.0447 4.22857 14.9364 4.22857 16.1579C4.22857 17.3794 5.16102 18.2711 6.19355 18.2711C6.38265 18.2711 6.56206 18.2431 6.73038 18.1918C6.88389 18.1451 7.04061 18.1157 7.19788 18.1034ZM48.8021 18.1034C48.9594 18.1157 49.1161 18.1451 49.2696 18.1918C49.4379 18.2431 49.6174 18.2711 49.8064 18.2711C50.839 18.2711 51.7714 17.3794 51.7714 16.1579C51.7714 14.9364 50.839 14.0447 49.8064 14.0447C48.7739 14.0447 47.8415 14.9364 47.8415 16.1579C47.8415 16.7895 48.0958 17.3432 48.4902 17.7265C48.6083 17.8412 48.7126 17.9677 48.8021 18.1034ZM35.3003 9.60433C35.4546 9.54678 35.6177 9.50587 35.7876 9.48393C36.7158 9.36408 37.5134 8.50989 37.5134 7.38596C37.5134 6.16443 36.5809 5.27273 35.5484 5.27273C34.5159 5.27273 33.5834 6.16443 33.5834 7.38596C33.5834 8.31673 34.1367 9.07534 34.861 9.36676C35.0169 9.42951 35.1641 9.50943 35.3003 9.60433Z",
+      fill: "#3E3F4F"
+    }));
+  },
+  'king-white': function kingWhite(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M25.4055 3H30.5945L30.7296 7.31034H35.7835V12.4828H30.8918L31.1294 18.3388C31.2242 18.2274 31.3219 18.1182 31.4225 18.0116C36.1472 13.0061 43.1524 10.3424 48.3235 14.6379C53.5125 18.9483 53.5125 28.8621 46.3679 34.5958C42.3207 37.8438 38.6956 40.9749 38.8743 45.5544L46.1437 46.5345V53H9.85632V46.5345L17.1257 45.5544C17.3044 40.9749 13.6793 37.8438 9.6321 34.5958C2.4875 28.8621 2.4875 18.9483 7.67648 14.6379C12.8476 10.3424 19.8528 13.0061 24.5775 18.0116C24.6781 18.1182 24.7758 18.2274 24.8706 18.3388L25.1082 12.4828H20.2165V7.31034H25.2704L25.4055 3ZM20.5175 22.8044C23.6886 27.982 24.1083 34.0345 24.1083 36.6666C22.5188 36.6694 16.527 34.0418 13.3546 29.7281C11.0708 26.6226 10.4753 22.0151 12.433 20.2263C14.3908 18.4375 18.5356 19.5685 20.5175 22.8044ZM35.4825 22.8044C32.3114 27.982 31.8917 34.0345 31.8917 36.6666C33.4812 36.6694 39.473 34.0418 42.6454 29.7281C44.9292 26.6226 45.5248 22.0151 43.567 20.2263C41.6092 18.4375 37.4644 19.5685 35.4825 22.8044Z",
+      fill: "white"
+    }), React.createElement("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M24.4333 4.05309C24.4517 3.46625 24.9344 3 25.5236 3H30.4764C31.0656 3 31.5483 3.46625 31.5667 4.05309L31.6627 7.12294H35.4291C36.0316 7.12294 36.52 7.60959 36.52 8.20989V13.1574C36.52 13.2013 36.5173 13.2446 36.5123 13.2871C37.2951 12.9327 38.0953 12.6474 38.9042 12.4427C42.0378 11.6496 45.3184 12.0711 48.0977 14.3847C53.6752 19.0278 53.4681 29.323 46.2168 35.1549C44.2754 36.7163 42.5402 38.17 41.3011 39.7435C40.2848 41.0341 39.6388 42.3604 39.4947 43.845L45.4642 44.6515C46.0051 44.7246 46.4085 45.1848 46.4085 45.7286V51.913C46.4085 52.5134 45.9201 53 45.3177 53H10.6823C10.0799 53 9.59149 52.5134 9.59149 51.913V45.7286C9.59149 45.1848 9.9949 44.7246 10.5358 44.6515L16.5053 43.845C16.3612 42.3604 15.7152 41.0341 14.6989 39.7435C13.4598 38.17 11.7246 36.7163 9.78319 35.1549L10.4085 34.3829L9.78319 35.1549C2.5319 29.323 2.32478 19.0278 7.90235 14.3847L8.60171 15.2189L7.90235 14.3847C10.6816 12.0711 13.9622 11.6496 17.0958 12.4427C17.9047 12.6474 18.7049 12.9327 19.4877 13.2871C19.4827 13.2446 19.48 13.2013 19.48 13.1574V8.20989C19.48 7.60959 19.9684 7.12294 20.5709 7.12294H24.3373L24.4333 4.05309ZM21.2957 14.2444C22.2495 14.8239 23.1645 15.5005 24.0229 16.2506L24.1041 14.2444H21.2957ZM23.9379 19.1897C21.7887 16.9079 19.1629 15.2087 16.5588 14.5497C13.9879 13.899 11.4575 14.2579 9.30107 16.0531C4.97314 19.6559 4.76602 28.3262 11.1534 33.4632C13.0749 35.0086 15.0012 36.6058 16.4153 38.4015C17.8503 40.224 18.8089 42.3135 18.7108 44.8333C18.6903 45.3608 18.2923 45.7974 17.7674 45.8683L11.7731 46.6782V50.8261H44.2269V46.6782L38.2327 45.8683C37.7077 45.7974 37.3097 45.3608 37.2892 44.8333C37.1911 42.3135 38.1497 40.224 39.5847 38.4015C40.9988 36.6058 42.9251 35.0086 44.8466 33.4632C51.234 28.3262 51.0269 19.6559 46.6989 16.0531C44.5425 14.2579 42.0121 13.899 39.4412 14.5497C36.8371 15.2087 34.2113 16.9079 32.0621 19.1897C31.9794 19.2776 31.8985 19.3682 31.8194 19.4612C31.5289 19.8031 31.0575 19.9324 30.6323 19.7867C30.2071 19.6411 29.9151 19.2503 29.897 18.8026L29.6702 13.2012C29.6582 12.9056 29.7677 12.6179 29.9734 12.4045C30.1791 12.1911 30.4632 12.0705 30.7601 12.0705H34.3383V9.29685H30.6054C30.0161 9.29685 29.5334 8.8306 29.5151 8.24376L29.419 5.17391H26.581L26.4849 8.24376C26.4666 8.8306 25.9839 9.29685 25.3946 9.29685H21.6617V12.0705H25.2399C25.5368 12.0705 25.8209 12.1911 26.0266 12.4045C26.2323 12.6179 26.3418 12.9056 26.3298 13.2012L26.103 18.8026C26.0849 19.2503 25.7929 19.6411 25.3677 19.7867C24.9425 19.9324 24.4711 19.8031 24.1806 19.4612C24.1015 19.3682 24.0207 19.2776 23.9379 19.1898M31.9771 16.2506C32.8355 15.5005 33.7505 14.8239 34.7042 14.2444H31.8959L31.9771 16.2506ZM17.3096 18.9553C19.0173 19.4744 20.7009 20.6833 21.7898 22.465C24.9721 27.672 25.3763 33.7022 25.3763 36.2898C25.3763 36.8893 24.8891 37.3756 24.2874 37.3767C23.6967 37.3778 22.8967 37.1574 22.0822 36.8511C21.2259 36.529 20.2214 36.0603 19.1766 35.4622C17.0987 34.2726 14.7747 32.521 13.1408 30.2946C11.9357 28.6523 11.1798 26.6258 10.9787 24.7519C10.7832 22.9302 11.0918 20.9651 12.4037 19.7639L13.1417 20.5643L12.4037 19.7639C13.7217 18.5571 15.6305 18.4449 17.3096 18.9553ZM16.673 21.0346C15.434 20.658 14.4305 20.8605 13.8798 21.3646C13.323 21.8745 12.9814 22.9684 13.148 24.5208C13.3089 26.0208 13.9272 27.6832 14.9019 29.0114C16.296 30.9111 18.3454 32.4792 20.2634 33.5772C21.2164 34.1228 22.1154 34.5399 22.8527 34.8172C22.9599 34.8576 23.0615 34.8941 23.1574 34.9271C23.0096 32.1253 22.348 27.558 19.9265 23.5957C19.1237 22.2821 17.8834 21.4025 16.673 21.0346ZM39.327 21.0346C38.1166 21.4025 36.8763 22.2821 36.0735 23.5957C33.652 27.558 32.9904 32.1253 32.8426 34.9271C32.9385 34.8941 33.0401 34.8576 33.1473 34.8172C33.8846 34.5399 34.7836 34.1228 35.7366 33.5772C37.6546 32.4792 39.704 30.9111 41.0981 29.0114C42.0728 27.6832 42.6911 26.0208 42.852 24.5208C43.0186 22.9684 42.677 21.8745 42.1202 21.3646C41.5695 20.8605 40.566 20.658 39.327 21.0346ZM38.6904 18.9553C40.3695 18.4449 42.2783 18.5571 43.5963 19.7639C44.9082 20.9651 45.2168 22.9302 45.0213 24.7519C44.8202 26.6258 44.0643 28.6523 42.8592 30.2946C41.2253 32.521 38.9013 34.2726 36.8234 35.4622C35.7786 36.0603 34.7741 36.529 33.9178 36.8511C33.1033 37.1574 32.3033 37.3778 31.7126 37.3767C31.1109 37.3756 30.6237 36.8893 30.6237 36.2898C30.6237 33.7022 31.0279 27.672 34.2102 22.465C35.2991 20.6833 36.9827 19.4744 38.6904 18.9553Z",
+      fill: "#3E3F4F"
+    }));
+  },
+  'pawn-black': function pawnBlack(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      d: "M37.3492 12.5238C37.3492 15.286 36.1576 17.7735 34.2541 19.5131L39.1587 22.9297V29.1905H34.3573C34.5888 32.0925 36.4757 34.9969 38.9172 37.5303C41.5083 40.2188 44.6258 42.3871 46.6961 43.5546L47 43.726V53H9V43.726L9.30392 43.5546C11.3742 42.3871 14.4917 40.2188 17.0828 37.5303C19.5243 34.9969 21.4112 32.0925 21.6427 29.1905H16.8413V22.9297L21.4091 19.7477C19.351 18.0011 18.0476 15.4127 18.0476 12.5238C18.0476 7.26396 22.3684 3 27.6984 3C33.0284 3 37.3492 7.26396 37.3492 12.5238Z",
+      fill: "#2A2B37"
+    }));
+  },
+  'knigts-black': function knigtsBlack(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M33.1658 12.1594L25.0408 3C23.8647 5.1581 22.7245 8.96699 24.3638 11.7166C23.5681 11.7851 22.8078 11.9152 22.2196 12.1433C18.4672 13.5988 14.35 17.3591 12.3263 25.1827C11.7404 27.4481 10.6857 28.5329 9.43229 29.8223C8.24992 31.0386 6.89064 32.4368 5.58093 35.1795C2.88277 40.8299 10.1645 46.4803 15.4742 41.3483C18.4594 38.463 21.0687 37.2719 23.2594 36.2719C26.4125 34.8325 28.6985 33.7891 29.9897 28.6598C30.6041 31.0524 30.3583 36.6988 24.4607 40.1441C18.5631 43.5893 17.3344 50.8467 17.4573 53H51C51 32.5571 48.1997 14.8944 33.1658 12.1594Z",
+      fill: "#2A2B37"
+    }), React.createElement("ellipse", {
+      cx: "21.3721",
+      cy: "21.1814",
+      rx: "2.33898",
+      ry: "2.27273",
+      fill: "white"
+    }));
+  },
+  'bishop-black': function bishopBlack(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      d: "M29.8545 30.4038H26.0727C26.0727 23.7267 28.1789 17.0608 32.8385 12.1815C33.5687 11.2259 34 10.046 34 8.76923C34 5.58296 31.3137 3 28 3C24.6863 3 22 5.58296 22 8.76923C22 10.3412 22.6539 11.7664 23.7144 12.807C19.9664 15.3761 13 22.2626 13 30.8846C13 39.5857 20.0948 43.1084 23.8167 43.8315L10 46.1818V53L46 53V46.1818L31.8556 43.7965C35.6197 42.9999 42.5 39.4532 42.5 30.8846C42.5 25.2741 39.7818 20.2727 36.4727 16.6364C32.8385 19.3636 29.8545 25.7273 29.8545 30.4038Z",
+      fill: "#2A2B37"
+    }));
+  },
+  'rook-black': function rookBlack(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      d: "M9 5H18.7436V10.434H22.641V5H33.359V10.434H37.2564V5H47V13.1509L39.2051 18.5849L41.1538 36H14.8462L16.7949 18.5849L9 13.1509V5Z",
+      fill: "#2A2B37"
+    }), React.createElement("path", {
+      d: "M14.8462 39H41.1538L47 45.7547V53H9V45.7547L14.8462 39Z",
+      fill: "#2A2B37"
+    }));
+  },
+  'queen-black': function queenBlack(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      d: "M21.9569 11.4809C23.5293 10.8482 24.6452 9.25337 24.6452 7.38596C24.6452 4.96366 22.7676 3 20.4516 3C18.1356 3 16.2581 4.96366 16.2581 7.38596C16.2581 9.62443 17.8614 11.4712 19.9325 11.7387L18.0624 27.5614L9.04701 19.372C9.87134 18.5711 10.3871 17.4275 10.3871 16.1579C10.3871 13.7356 8.50958 11.7719 6.19355 11.7719C3.87752 11.7719 2 13.7356 2 16.1579C2 18.5802 3.87752 20.5439 6.19355 20.5439C6.60125 20.5439 6.99537 20.483 7.36805 20.3695L12.0645 37.2105L16.9212 45.5224L12.0645 46.421V53L44 53V46.421L39.081 45.5187L43.9355 37.2105L48.632 20.3695C49.0046 20.483 49.3987 20.5439 49.8064 20.5439C52.1225 20.5439 54 18.5802 54 16.1579C54 13.7356 52.1225 11.7719 49.8064 11.7719C47.4904 11.7719 45.6129 13.7356 45.6129 16.1579C45.6129 17.4275 46.1287 18.5711 46.953 19.372L37.9376 27.5614L36.0675 11.7387C38.1386 11.4712 39.7419 9.62443 39.7419 7.38596C39.7419 4.96366 37.8644 3 35.5484 3C33.2324 3 31.3548 4.96366 31.3548 7.38596C31.3548 9.25337 32.4707 10.8482 34.0431 11.4809L28 25.807L21.9569 11.4809Z",
+      fill: "#2A2B37"
+    }));
+  },
+  'king-black': function kingBlack(size) {
+    return React.createElement("svg", {
+      width: size,
+      height: size,
+      viewBox: "0 0 56 56",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, React.createElement("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M25.4055 3H30.5945L30.7296 7.31034H35.7835V12.4828H30.8918L31.1294 18.3388C31.2242 18.2274 31.3219 18.1182 31.4225 18.0116C36.1472 13.0061 43.1524 10.3424 48.3235 14.6379C53.5125 18.9483 53.5125 28.8621 46.3679 34.5958C42.3207 37.8438 38.6956 40.9749 38.8743 45.5544L46.1437 46.5345V53H9.85632V46.5345L17.1257 45.5544C17.3044 40.9749 13.6793 37.8438 9.6321 34.5958C2.4875 28.8621 2.4875 18.9483 7.67648 14.6379C12.8476 10.3424 19.8528 13.0061 24.5775 18.0116C24.6781 18.1182 24.7758 18.2274 24.8706 18.3388L25.1082 12.4828H20.2165V7.31034H25.2704L25.4055 3ZM20.5175 22.8044C23.6886 27.982 24.1083 34.0345 24.1083 36.6666C22.5188 36.6694 16.527 34.0418 13.3546 29.7281C11.0708 26.6226 10.4753 22.0151 12.433 20.2263C14.3908 18.4375 18.5356 19.5685 20.5175 22.8044ZM35.4825 22.8044C32.3114 27.982 31.8917 34.0345 31.8917 36.6666C33.4812 36.6694 39.473 34.0418 42.6454 29.7281C44.9292 26.6226 45.5248 22.0151 43.567 20.2263C41.6092 18.4375 37.4644 19.5685 35.4825 22.8044Z",
+      fill: "#2A2B37"
+    }));
+  }
+};
+
+var DEFAULT_CELL_SIZE = 92;
+var 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_CHESSBORD_CONFIG = {
+  cellSize: DEFAULT_CELL_SIZE,
+  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,
+  arrowColor: DEFAULT_ARROW_COLOR,
+  markedCellColor: DEFAULT_MARKED_CELL_COLOR,
+  checkedCellColor: DEFAULT_CHECKED_CELL_COLOR,
+  piecesMap: DEFAULT_PIECES_MAP
+};
+
+var getFigureCSS = function getFigureCSS(figure) {
+  return figure.type + "-" + figure.color;
+};
+var getIsLightCell = function getIsLightCell(rowId, cellId) {
+  return rowId % 2 === 0 && cellId % 2 === 0 || rowId % 2 > 0 && cellId % 2 > 0;
+};
+var getFilledArrayBySize = function getFilledArrayBySize(size) {
+  var array = [];
+  for (var i = 0; i < size; i++) {
+    array.push(i);
+  }
+  return array;
+};
+var mapCellsToFiguresArray = function mapCellsToFiguresArray(boardState) {
+  var figuresWithPosition = [];
+  boardState.forEach(function (row, j) {
+    return row.forEach(function (cell, i) {
+      if (cell.figure) {
+        figuresWithPosition.push(_extends({}, cell.figure, {
+          position: [i, j]
+        }));
+      }
+    });
+  });
+  return figuresWithPosition;
+};
+var checkIsPossibleMove = function checkIsPossibleMove(possibleMoves, position) {
+  return !!possibleMoves.find(function (possibleMove) {
+    return possibleMove[0] === position[0] && possibleMove[1] === position[1];
+  });
+};
+var checkPositionsHas = function checkPositionsHas(positions, pos) {
+  if (!positions) return false;
+  return !!positions.find(function (posItem) {
+    return posItem[0] === pos[0] && posItem[1] === pos[1];
+  });
+};
+var checkIsCastlingMove = function checkIsCastlingMove(moveData) {
+  var figure = moveData.figure,
+    from = moveData.from,
+    to = moveData.to;
+  if (figure.type !== 'king') return false;
+  if (from[1] !== to[1]) return false;
+  var horizontalDiff = Math.abs(to[0] - from[0]);
+  if (horizontalDiff === 1) return false;
+  return true;
+};
+var hasCheck = function hasCheck(cell, currentColor, linesWithCheck) {
+  return !!cell.figure && cell.figure.type === 'king' && cell.figure.color === currentColor && linesWithCheck.length > 0;
+};
+var degrees = function degrees(a, b) {
+  return Math.atan(a / b) * 180 / Math.PI;
+};
+var calcAngle = function calcAngle(start, end) {
+  var x = end[0] - start[0];
+  var y = end[1] - start[1];
+  if (x > 0 && y > 0) {
+    return degrees(y, x) - 90;
+  }
+  if (x < 0 && y < 0) {
+    return degrees(y, x) + 90;
+  }
+  if (x < 0 && y > 0) {
+    return degrees(y, x) + 90;
+  }
+  if (x > 0 && y < 0) {
+    return degrees(y, x) - 90;
+  }
+  if (y === 0 && x > 0) return -90;
+  if (y === 0 && x < 0) return 90;
+  if (x === 0 && y < 0) return 180;
+  return 0;
+};
+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;
+};
+var getFiguresByColor = function getFiguresByColor(color, forPawnTransform) {
+  if (forPawnTransform === void 0) {
+    forPawnTransform = false;
+  }
+  if (forPawnTransform) {
+    var figureNamesForPawn = ['queen', 'rook', 'bishop', 'knigts'];
+    return figureNamesForPawn.map(function (figureName) {
+      return {
+        type: figureName,
+        color: color,
+        touched: true
+      };
+    });
+  }
+  var figureNames = ['pawn', 'knigts', 'bishop', 'rook', 'queen', 'king'];
+  return figureNames.map(function (figureName) {
+    return {
+      type: figureName,
+      color: color,
+      touched: true
+    };
+  });
+};
+
+var BASE_BOARD_SIZE = 8;
+var ChessBoardCellsLayout = function ChessBoardCellsLayout(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? BASE_BOARD_SIZE : _ref$size,
+    boardConfig = _ref.boardConfig;
+  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) {
+      return React.createElement("div", {
+        style: {
+          width: boardConfig.cellSize,
+          height: boardConfig.cellSize,
+          backgroundColor: getIsLightCell(j, i) ? boardConfig.whiteCellColor : boardConfig.blackCellColor
+        },
+        key: "cells-layout-" + i
+      });
+    }));
+  }));
+};
+
+var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
+  var initialState = props.initialState,
+    change = props.change,
+    reversed = props.reversed,
+    boardConfig = props.boardConfig;
+  var _useState = useState([]),
+    actualState = _useState[0],
+    setActualState = _useState[1];
+  useEffect(function () {
+    setActualState(mapCellsToFiguresArray(initialState));
+  }, [initialState]);
+  useEffect(function () {
+    if (!!change) {
+      setActualState(function (prevState) {
+        var updatedState = [].concat(prevState);
+        var move = change.move,
+          attackedPos = change.attackedPos,
+          transformTo = change.transformTo;
+        if (checkIsCastlingMove(move)) {
+          var castlingType = JSChessEngine.getCastlingType(move);
+          var color = move.figure.color;
+          if (color === 'white') {
+            var kingIndex = updatedState.findIndex(function (figure) {
+              return figure.color === 'white' && figure.type === 'king';
+            });
+            if (castlingType === '0-0') {
+              var _rookIndex = updatedState.findIndex(function (figure) {
+                return figure.color === color && figure.type === 'rook' && figure.position[0] === 7;
+              });
+              updatedState[_rookIndex].position[0] = 5;
+              updatedState[kingIndex].position[0] = 6;
+              return updatedState;
+            }
+            var rookIndex = updatedState.findIndex(function (figure) {
+              return figure.color === color && figure.type === 'rook' && figure.position[0] === 0;
+            });
+            updatedState[rookIndex].position[0] = 3;
+            updatedState[kingIndex].position[0] = 2;
+            return updatedState;
+          }
+          if (color === 'black') {
+            var _kingIndex = updatedState.findIndex(function (figure) {
+              return figure.color === 'black' && figure.type === 'king';
+            });
+            if (castlingType === '0-0') {
+              var _rookIndex2 = updatedState.findIndex(function (figure) {
+                return figure.color === color && figure.type === 'rook' && figure.position[0] === 7;
+              });
+              updatedState[_rookIndex2].position[0] = 5;
+              updatedState[_kingIndex].position[0] = 6;
+              return updatedState;
+            }
+            var _rookIndex3 = updatedState.findIndex(function (figure) {
+              return figure.color === color && figure.type === 'rook' && figure.position[0] === 0;
+            });
+            updatedState[_rookIndex3].position[0] = 3;
+            updatedState[_kingIndex].position[0] = 2;
+            return updatedState;
+          }
+          return updatedState;
+        }
+        var from = move.from,
+          to = move.to;
+        var foundAttactedFigure = updatedState.find(function (figure) {
+          if (attackedPos) return figure.position[0] === attackedPos[0] && figure.position[1] === attackedPos[1];
+          return figure.position[0] === to[0] && figure.position[1] === to[1];
+        });
+        if (foundAttactedFigure) {
+          foundAttactedFigure.color === 'white' ? foundAttactedFigure.position = [8, foundAttactedFigure.position[1]] : foundAttactedFigure.position = [-1, foundAttactedFigure.position[1]];
+        }
+        var foundFigureByPositionFrom = updatedState.find(function (figure) {
+          return figure.position[0] === from[0] && figure.position[1] === from[1];
+        });
+        foundFigureByPositionFrom.position = move.to;
+        if (!!transformTo) {
+          foundFigureByPositionFrom.type = transformTo.type;
+          foundFigureByPositionFrom.color = transformTo.color;
+        }
+        return updatedState;
+      });
+    }
+  }, [change]);
+  useEffect(function () {
+    if (!reversed) return;
+    setActualState(function (prevState) {
+      var preparedState = [].concat(prevState);
+      return preparedState.map(function (figure) {
+        return _extends({}, figure, {
+          position: [Math.abs(7 - figure.position[0]), Math.abs(7 - figure.position[1])]
+        });
+      });
+    });
+  }, [reversed, initialState]);
+  return React.createElement("div", {
+    className: styles.figuresLayout
+  }, actualState.map(function (figure, i) {
+    var _cn;
+    return React.createElement("div", {
+      key: i,
+      className: cn([styles.figure], (_cn = {}, _cn[styles.hiddenFigure] = figure.position[0] === -1 || figure.position[0] === 8, _cn)),
+      style: {
+        top: boardConfig.cellSize * figure.position[1] + "px",
+        left: boardConfig.cellSize * figure.position[0] + "px",
+        transition: !!change && change.withTransition ? 'all .15s ease-out' : 'none',
+        width: boardConfig.cellSize,
+        height: boardConfig.cellSize
+      }
+    }, boardConfig.piecesMap[getFigureCSS(figure)]('80%'));
+  }));
+};
+
+var BASE_BOARD_SIZE$1 = 8;
+var ChessBoardControlLayout = function ChessBoardControlLayout(props) {
+  var _cn;
+  var _props$size = props.size,
+    size = _props$size === void 0 ? BASE_BOARD_SIZE$1 : _props$size,
+    boardConfig = props.boardConfig,
+    onClick = props.onClick,
+    onGrabEnd = props.onGrabEnd,
+    onGrabbing = props.onGrabbing,
+    onGrabStart = props.onGrabStart,
+    onRightClick = props.onRightClick,
+    onGrabEndRight = props.onGrabEndRight,
+    onGrabStartRight = props.onGrabStartRight;
+  var _useState = useState(false),
+    pressed = _useState[0],
+    setPressed = _useState[1];
+  var handleClick = function handleClick(cellPos) {
+    onClick(cellPos);
+  };
+  var handleGrabStart = function handleGrabStart(cellPos) {
+    return function (event) {
+      setPressed(true);
+      if (event.button === 0) {
+        onGrabStart(cellPos);
+      }
+      if (event.button === 2) {
+        onGrabStartRight(cellPos);
+      }
+    };
+  };
+  var handleGrabEnd = function handleGrabEnd(cellPos) {
+    return function (event) {
+      if (event.button === 0) {
+        setPressed(false);
+        onGrabEnd(cellPos);
+      }
+      if (event.button === 2) {
+        onGrabEndRight(cellPos);
+      }
+    };
+  };
+  var handleGrabing = function handleGrabing(event) {
+    if (pressed) {
+      var pageX = event.pageX,
+        pageY = event.pageY;
+      onGrabbing(pageX, pageY);
+    }
+  };
+  var handleContextMenu = function handleContextMenu(cellPos) {
+    return function (event) {
+      event.preventDefault();
+      onRightClick(cellPos);
+    };
+  };
+  return React.createElement("div", {
+    className: cn(styles.controlLayout, (_cn = {}, _cn[styles.controlLayoutGrabbing] = pressed, _cn)),
+    onMouseMove: handleGrabing
+  }, getFilledArrayBySize(size).map(function (_, j) {
+    return React.createElement("div", {
+      className: styles.row,
+      key: "control-layout-" + j
+    }, getFilledArrayBySize(size).map(function (_, i) {
+      return React.createElement("div", {
+        key: "control-layout-" + i,
+        className: styles.controlCell,
+        style: {
+          width: boardConfig.cellSize,
+          height: boardConfig.cellSize
+        },
+        onClick: function onClick() {
+          return handleClick([i, j]);
+        },
+        onMouseDown: handleGrabStart([i, j]),
+        onMouseUp: handleGrabEnd([i, j]),
+        onContextMenu: handleContextMenu([i, j])
+      });
+    }));
+  }));
+};
+
+var useChessBoardInteractive = function useChessBoardInteractive(props) {
+  var config = props.config,
+    onChange = props.onChange,
+    onEndGame = props.onEndGame;
+  var _useState = useState(DEFAULT_CHESSBORD_CONFIG),
+    boardConfig = _useState[0],
+    setBoardConfig = _useState[1];
+  var _useState2 = useState([]),
+    initialState = _useState2[0],
+    setInitialState = _useState2[1];
+  var _useState3 = useState([]),
+    actualState = _useState3[0],
+    setActualState = _useState3[1];
+  var _useState4 = useState([-1, -1]),
+    fromPos = _useState4[0],
+    setFromPos = _useState4[1];
+  var _useState5 = useState(),
+    holdedFigure = _useState5[0],
+    setHoldedFigure = _useState5[1];
+  var _useState6 = useState([-1, -1]),
+    grabbingPos = _useState6[0],
+    setGrabbingPos = _useState6[1];
+  var _useState7 = useState([]),
+    possibleMoves = _useState7[0],
+    setPossibleMoves = _useState7[1];
+  var _useState8 = useState(false),
+    boardReversed = _useState8[0],
+    setBoardReversed = _useState8[1];
+  var _useState9 = useState('white'),
+    currentColor = _useState9[0],
+    setCurrentColor = _useState9[1];
+  var _useState10 = useState(),
+    playerColor = _useState10[0];
+  var _useState11 = useState(),
+    newMove = _useState11[0],
+    setNewMove = _useState11[1];
+  var _useState12 = useState([]),
+    linesWithCheck = _useState12[0],
+    setLinesWithCheck = _useState12[1];
+  var _useState13 = useState([]),
+    markedCells = _useState13[0],
+    setMarkedCells = _useState13[1];
+  var _useState14 = useState([-1, -1]),
+    clickedPos = _useState14[0],
+    setClickedPos = _useState14[1];
+  var _useState15 = useState(),
+    clickedFigure = _useState15[0],
+    setClickedFigure = _useState15[1];
+  var _useState16 = useState([]),
+    clickPossibleMoves = _useState16[0],
+    setClickPossibleMoves = _useState16[1];
+  var _useState17 = useState([-1, -1]),
+    startArrowCoord = _useState17[0],
+    setStartArrowCoord = _useState17[1];
+  var _useState18 = useState([]),
+    arrowsCoords = _useState18[0],
+    setArrowsCoords = _useState18[1];
+  var _useState19 = useState(false),
+    showFigurePicker = _useState19[0],
+    setShowFigurePicker = _useState19[1];
+  var _useState20 = useState([-1, -1]),
+    targetPos = _useState20[0],
+    setTargetPos = _useState20[1];
+  var clearFromPos = function clearFromPos() {
+    return setFromPos([-1, -1]);
+  };
+  var clearGrabbingPos = function clearGrabbingPos() {
+    return setGrabbingPos([-1, -1]);
+  };
+  var clearPossibleMoves = function clearPossibleMoves() {
+    return setPossibleMoves([]);
+  };
+  var clearClickPossibleMoves = function clearClickPossibleMoves() {
+    return setClickPossibleMoves([]);
+  };
+  var toggleCurrentColor = function toggleCurrentColor() {
+    return setCurrentColor(function (prevColor) {
+      return prevColor === 'white' ? 'black' : 'white';
+    });
+  };
+  var clearMarkedCells = function clearMarkedCells() {
+    return setMarkedCells([]);
+  };
+  var clearClickedPos = function clearClickedPos() {
+    return setClickedPos([-1, -1]);
+  };
+  var clearArrows = function clearArrows() {
+    return setArrowsCoords([]);
+  };
+  useEffect(function () {
+    setBoardConfig(getChessBoardConfig(config));
+  }, []);
+  useEffect(function () {
+    if (linesWithCheck.length > 0) {
+      var gameResult = JSChessEngine.getGameResult(actualState, linesWithCheck, currentColor, boardReversed);
+      if (gameResult) onEndGame(gameResult);
+    }
+  }, [actualState, linesWithCheck, boardReversed, currentColor]);
+  var cleanAllForFigure = function cleanAllForFigure() {
+    setHoldedFigure(undefined);
+    clearFromPos();
+    clearGrabbingPos();
+    clearPossibleMoves();
+  };
+  var cleanAllForClickedFigure = function cleanAllForClickedFigure() {
+    setClickedFigure(undefined);
+    clearClickedPos();
+    clearClickPossibleMoves();
+  };
+  var reverseChessBoard = function reverseChessBoard() {
+    cleanAllForFigure();
+    setActualState(function (prevState) {
+      return JSChessEngine.reverseChessBoard(prevState);
+    });
+    setBoardReversed(function (prevReversed) {
+      return !prevReversed;
+    });
+  };
+  var selectFigureFrom = function selectFigureFrom(cellPos) {
+    var cell = actualState[cellPos[1]][cellPos[0]];
+    if (!cell.figure) {
+      cleanAllForFigure();
+      return {
+        figure: undefined,
+        nextMoves: []
+      };
+    }
+    var figure = cell.figure;
+    if (figure.color !== currentColor) {
+      cleanAllForFigure();
+      return {
+        figure: undefined,
+        nextMoves: []
+      };
+    }
+    var nextMoves = JSChessEngine.getNextMoves(actualState, cellPos, linesWithCheck, boardReversed);
+    return {
+      figure: cell.figure,
+      nextMoves: nextMoves
+    };
+  };
+  var selectClickFrom = function selectClickFrom(cellPos) {
+    var _selectFigureFrom = selectFigureFrom(cellPos),
+      figure = _selectFigureFrom.figure,
+      nextMoves = _selectFigureFrom.nextMoves;
+    if (!figure) return;
+    setClickedFigure(figure);
+    setClickedPos(cellPos);
+    setClickPossibleMoves(nextMoves);
+  };
+  var selectHoverFrom = function selectHoverFrom(cellPos) {
+    var _selectFigureFrom2 = selectFigureFrom(cellPos),
+      figure = _selectFigureFrom2.figure,
+      nextMoves = _selectFigureFrom2.nextMoves;
+    if (!figure) return;
+    setHoldedFigure(figure);
+    setPossibleMoves(nextMoves);
+    setFromPos(cellPos);
+  };
+  var moveFigure = function moveFigure(from, to, figure) {
+    var inNextMoves = checkPositionsHas(possibleMoves, to);
+    var conditionForDoMove = (to[0] !== from[0] || to[1] !== from[1]) && inNextMoves;
+    if (!conditionForDoMove) return {};
+    var _JSChessEngine$change = JSChessEngine.changeState(actualState, figure, to, from, boardReversed),
+      updatedCells = _JSChessEngine$change.updatedCells,
+      attackedPos = _JSChessEngine$change.attackedPos;
+    var linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
+    setLinesWithCheck(linesCheck);
+    if (playerColor === undefined) 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();
+    setHoldedFigure(undefined);
+    clearFromPos();
+    clearGrabbingPos();
+    clearArrows();
+    clearMarkedCells();
+    return {
+      moveData: moveData,
+      attackedPos: attackedPos
+    };
+  };
+  var moveFigureByClick = function moveFigureByClick(from, to, figure) {
+    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 linesCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
+    setLinesWithCheck(linesCheck);
+    if (playerColor === undefined) 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 handleGrabbing = function handleGrabbing(x, y) {
+    setGrabbingPos([x, y]);
+  };
+  var handleGrabEnd = function handleGrabEnd(cellPos, withTransition) {
+    if (withTransition === void 0) {
+      withTransition = false;
+    }
+    if (fromPos[0] === -1) {
+      clearGrabbingPos();
+      return;
+    }
+    if (!holdedFigure) {
+      return;
+    }
+    if (possibleMoves.length === 0) {
+      clearGrabbingPos();
+      return;
+    }
+    var foundPosInPossible = checkIsPossibleMove(possibleMoves, cellPos);
+    if (!foundPosInPossible) {
+      clearGrabbingPos();
+      return;
+    }
+    var _moveFigure = moveFigure(fromPos, cellPos, holdedFigure),
+      moveData = _moveFigure.moveData,
+      attackedPos = _moveFigure.attackedPos;
+    if (!moveData) {
+      clearGrabbingPos();
+      return;
+    }
+    onChange(moveData);
+    setNewMove({
+      move: moveData,
+      withTransition: withTransition,
+      attackedPos: attackedPos
+    });
+    clearGrabbingPos();
+    clearPossibleMoves();
+  };
+  var handleClickForTargetCell = function handleClickForTargetCell(cellPos, withTransition) {
+    if (withTransition === void 0) {
+      withTransition = false;
+    }
+    if (clickedPos[0] === -1) return;
+    if (!clickedFigure) return;
+    if (clickPossibleMoves.length === 0) return;
+    var foundPosInPossible = checkIsPossibleMove(clickPossibleMoves, cellPos);
+    if (!foundPosInPossible) return;
+    var _moveFigureByClick = moveFigureByClick(clickedPos, cellPos, clickedFigure),
+      moveData = _moveFigureByClick.moveData,
+      attackedPos = _moveFigureByClick.attackedPos;
+    if (!moveData) return;
+    onChange(moveData);
+    setNewMove({
+      move: moveData,
+      withTransition: withTransition,
+      attackedPos: attackedPos
+    });
+    clearClickedPos();
+    clearClickPossibleMoves();
+  };
+  var handleClick = function handleClick(cellPos) {
+    clearMarkedCells();
+    clearArrows();
+    if (clickedPos[0] === -1) {
+      selectClickFrom(cellPos);
+      return;
+    }
+    var foundPosInPossible = checkIsPossibleMove(clickPossibleMoves, cellPos);
+    if (!foundPosInPossible) {
+      cleanAllForClickedFigure();
+      return;
+    }
+    handleClickForTargetCell(cellPos, true);
+  };
+  var markCell = function markCell(cellPos) {
+    cleanAllForFigure();
+    setMarkedCells(function (prev) {
+      var preparedPrev = [].concat(prev);
+      var foundCellIndex = preparedPrev.findIndex(function (_ref) {
+        var x = _ref[0],
+          y = _ref[1];
+        return x === cellPos[0] && y === cellPos[1];
+      });
+      if (foundCellIndex !== -1) return prev.filter(function (_, i) {
+        return i !== foundCellIndex;
+      });
+      return [].concat(preparedPrev, [cellPos]);
+    });
+  };
+  var getHasCheckByCellPos = function getHasCheckByCellPos(_ref2) {
+    var x = _ref2[0],
+      y = _ref2[1];
+    if (actualState.length === 0) return false;
+    var cell = actualState[y][x];
+    if (!cell.figure) return false;
+    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];
+    setStartArrowCoord(startPos);
+  };
+  var endRenderArrow = function endRenderArrow(_ref3) {
+    var x = _ref3[0],
+      y = _ref3[1];
+    if (startArrowCoord[0] === -1) return;
+    setArrowsCoords(function (arrows) {
+      var copiedArrows = [].concat(arrows);
+      return [].concat(copiedArrows, [{
+        start: [].concat(startArrowCoord),
+        end: [x * boardConfig.cellSize + (boardConfig.cellSize / 2 - 10), y * boardConfig.cellSize + boardConfig.cellSize / 2]
+      }]);
+    });
+    setStartArrowCoord([-1, -1]);
+  };
+  var handleSelectFigurePicker = function handleSelectFigurePicker(figure) {
+    var startPos = fromPos[0] > -1 ? fromPos : clickedPos;
+    var updatedCells = JSChessEngine.transformPawnToFigure(actualState, startPos, targetPos, figure);
+    var moveData = {
+      figure: figure,
+      from: startPos,
+      to: targetPos,
+      type: 'transform'
+    };
+    onChange(moveData);
+    setActualState(updatedCells);
+    toggleCurrentColor();
+    setNewMove({
+      move: moveData,
+      withTransition: false,
+      transformTo: figure
+    });
+    var linesWithCheck = JSChessEngine.getLinesWithCheck(updatedCells, currentColor, boardReversed);
+    setLinesWithCheck(linesWithCheck);
+    clearGrabbingPos();
+    clearPossibleMoves();
+    clearMarkedCells();
+    setShowFigurePicker(false);
+    clearClickedPos();
+    setHoldedFigure(undefined);
+    setFromPos([-1, -1]);
+    setClickedPos([-1, -1]);
+    clearArrows();
+  };
+  return {
+    fromPos: fromPos,
+    newMove: newMove,
+    boardConfig: boardConfig,
+    markedCells: markedCells,
+    grabbingPos: grabbingPos,
+    actualState: actualState,
+    currentColor: currentColor,
+    arrowsCoords: arrowsCoords,
+    initialState: initialState,
+    holdedFigure: holdedFigure,
+    possibleMoves: possibleMoves,
+    linesWithCheck: linesWithCheck,
+    startArrowCoord: startArrowCoord,
+    showFigurePicker: showFigurePicker,
+    markCell: markCell,
+    setNewMove: setNewMove,
+    handleClick: handleClick,
+    clearFromPos: clearFromPos,
+    handleGrabEnd: handleGrabEnd,
+    handleGrabbing: handleGrabbing,
+    endRenderArrow: endRenderArrow,
+    setActualState: setActualState,
+    setCurrentColor: setCurrentColor,
+    selectClickFrom: selectClickFrom,
+    selectHoverFrom: selectHoverFrom,
+    setInitialState: setInitialState,
+    startRenderArrow: startRenderArrow,
+    reverseChessBoard: reverseChessBoard,
+    getHasCheckByCellPos: getHasCheckByCellPos,
+    handleSelectFigurePicker: handleSelectFigurePicker
+  };
+};
+
+var HoldedFigure = function HoldedFigure(props) {
+  var holdedFigure = props.holdedFigure,
+    grabbingPos = props.grabbingPos,
+    boardConfig = props.boardConfig;
+  var isCanShowFigure = holdedFigure && grabbingPos[0] > -1 && grabbingPos[1] > -1;
+  return isCanShowFigure && React.createElement("div", {
+    className: cn([styles.figure, styles.holdedFigure]),
+    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
+    }
+  }, " ", boardConfig.piecesMap[getFigureCSS(holdedFigure)]('80%'));
+};
+
+var BASE_BOARD_SIZE$2 = 8;
+var ChessBoardInteractiveLayout = function ChessBoardInteractiveLayout(props) {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? BASE_BOARD_SIZE$2 : _props$size,
+    boardConfig = props.boardConfig,
+    selectedPos = props.selectedPos,
+    possibleMoves = props.possibleMoves,
+    holdedFigure = props.holdedFigure,
+    grabbingPos = props.grabbingPos,
+    markedCells = props.markedCells,
+    onHasCheck = props.onHasCheck;
+  return React.createElement("div", null, React.createElement(HoldedFigure, {
+    holdedFigure: holdedFigure,
+    grabbingPos: grabbingPos,
+    boardConfig: boardConfig
+  }), React.createElement("div", {
+    className: styles.interactiveLayout
+  }, getFilledArrayBySize(size).map(function (_, j) {
+    return React.createElement("div", {
+      className: styles.row,
+      key: "interactive-layout-" + j
+    }, 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)),
+        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'
+        }
+      }, selectedPos[0] === i && selectedPos[1] === j && holdedFigure && React.createElement("div", {
+        className: cn([styles.figure, styles.holdedFigure], (_cn2 = {}, _cn2[styles.bluredFigure] = grabbingPos[0] !== -1, _cn2)),
+        style: {
+          width: boardConfig.cellSize,
+          height: boardConfig.cellSize
+        }
+      }, boardConfig.piecesMap[getFigureCSS(holdedFigure)]('80%')), checkIsPossibleMove(possibleMoves, [i, j]) && React.createElement("div", {
+        className: styles.possibleMoveMark,
+        style: {
+          width: boardConfig.cellSize / FACTOR_FOR_SIZE_CIRCLE_MARK,
+          height: boardConfig.cellSize / FACTOR_FOR_SIZE_CIRCLE_MARK,
+          backgroundColor: boardConfig.circleMarkColor
+        }
+      }));
+    }));
+  })));
+};
+
+var ARROW_CORRECTION = 20;
+var Arrow = function Arrow(props) {
+  var start = props.start,
+    end = props.end,
+    color = props.color;
+  var arrowLength = useMemo(function () {
+    return Math.sqrt(Math.pow(end[0] - start[0], 2) + Math.pow(end[1] - start[1], 2));
+  }, [start, end]);
+  if (arrowLength <= ARROW_CORRECTION * 3) {
+    return null;
+  }
+  return React.createElement("div", {
+    className: styles.arrow,
+    style: {
+      height: arrowLength - ARROW_CORRECTION,
+      top: start[1] + "px",
+      left: start[0] + "px",
+      transformOrigin: "10px 0",
+      transform: "rotate(" + calcAngle(start, end) + "deg)",
+      backgroundColor: color
+    }
+  }, React.createElement("div", {
+    className: styles.arrowEnd,
+    style: {
+      borderLeftColor: color
+    }
+  }));
+};
+
+var ArrowLayout = function ArrowLayout(props) {
+  var startArrowCoord = props.startArrowCoord,
+    arrowsCoords = props.arrowsCoords,
+    grabbingPos = props.grabbingPos,
+    boardConfig = props.boardConfig;
+  return React.createElement("div", {
+    className: styles.arrowsLayer
+  }, startArrowCoord[0] > -1 && grabbingPos[0] > -1 && React.createElement(Arrow, {
+    start: startArrowCoord,
+    end: grabbingPos,
+    color: boardConfig.arrowColor
+  }), arrowsCoords.map(function (coords, i) {
+    return React.createElement(Arrow, Object.assign({
+      key: i
+    }, coords, {
+      color: boardConfig.arrowColor
+    }));
+  }));
+};
+
+var FigurePicker = function FigurePicker(props) {
+  var boardConfig = props.boardConfig,
+    color = props.color,
+    onSelect = props.onSelect,
+    _props$forPawnTransfo = props.forPawnTransform,
+    forPawnTransform = _props$forPawnTransfo === void 0 ? false : _props$forPawnTransfo;
+  var handleChange = useCallback(function (figure) {
+    onSelect(figure);
+  }, [onSelect]);
+  return React.createElement("div", {
+    className: styles.figurePicker
+  }, getFiguresByColor(color, forPawnTransform).map(function (figure) {
+    return React.createElement("div", {
+      key: figure.type,
+      className: styles.figurePickerItem,
+      style: {
+        width: boardConfig.cellSize,
+        height: boardConfig.cellSize
+      },
+      onClick: function onClick() {
+        return handleChange(figure);
+      }
+    }, boardConfig.piecesMap[getFigureCSS(figure)]('80%'));
+  }));
+};
+
+var ChessBoard = function ChessBoard(props) {
+  var FEN = props.FEN,
+    onChange = props.onChange,
+    onEndGame = props.onEndGame,
+    change = props.change,
+    reversed = props.reversed,
+    config = props.config;
+  var _useChessBoardInterac = useChessBoardInteractive({
+      onChange: onChange,
+      onEndGame: onEndGame,
+      config: config
+    }),
+    initialState = _useChessBoardInterac.initialState,
+    fromPos = _useChessBoardInterac.fromPos,
+    holdedFigure = _useChessBoardInterac.holdedFigure,
+    grabbingPos = _useChessBoardInterac.grabbingPos,
+    possibleMoves = _useChessBoardInterac.possibleMoves,
+    newMove = _useChessBoardInterac.newMove,
+    markedCells = _useChessBoardInterac.markedCells,
+    arrowsCoords = _useChessBoardInterac.arrowsCoords,
+    startArrowCoord = _useChessBoardInterac.startArrowCoord,
+    boardConfig = _useChessBoardInterac.boardConfig,
+    currentColor = _useChessBoardInterac.currentColor,
+    showFigurePicker = _useChessBoardInterac.showFigurePicker,
+    setActualState = _useChessBoardInterac.setActualState,
+    startRenderArrow = _useChessBoardInterac.startRenderArrow,
+    selectHoverFrom = _useChessBoardInterac.selectHoverFrom,
+    handleGrabbing = _useChessBoardInterac.handleGrabbing,
+    handleGrabEnd = _useChessBoardInterac.handleGrabEnd,
+    handleClick = _useChessBoardInterac.handleClick,
+    setInitialState = _useChessBoardInterac.setInitialState,
+    setCurrentColor = _useChessBoardInterac.setCurrentColor,
+    reverseChessBoard = _useChessBoardInterac.reverseChessBoard,
+    setNewMove = _useChessBoardInterac.setNewMove,
+    markCell = _useChessBoardInterac.markCell,
+    getHasCheckByCellPos = _useChessBoardInterac.getHasCheckByCellPos,
+    endRenderArrow = _useChessBoardInterac.endRenderArrow,
+    handleSelectFigurePicker = _useChessBoardInterac.handleSelectFigurePicker;
+  useEffect(function () {
+    var _FENtoGameState = FENtoGameState(FEN),
+      boardState = _FENtoGameState.boardState,
+      currentColor = _FENtoGameState.currentColor;
+    setInitialState(boardState);
+    setActualState(boardState);
+    setCurrentColor(currentColor);
+  }, [FEN]);
+  useEffect(function () {
+    if (reversed) reverseChessBoard();
+  }, [reversed]);
+  useEffect(function () {
+    setNewMove(change);
+  }, [change]);
+  return React.createElement("div", {
+    className: styles.chessBoard
+  }, React.createElement(ChessBoardCellsLayout, {
+    boardConfig: boardConfig
+  }), React.createElement(ChessBoardFiguresLayout, {
+    initialState: initialState,
+    change: newMove,
+    reversed: reversed,
+    boardConfig: boardConfig
+  }), React.createElement(ChessBoardInteractiveLayout, {
+    selectedPos: fromPos,
+    possibleMoves: possibleMoves,
+    holdedFigure: holdedFigure,
+    grabbingPos: grabbingPos,
+    markedCells: markedCells,
+    boardConfig: boardConfig,
+    onHasCheck: getHasCheckByCellPos
+  }), React.createElement(ArrowLayout, {
+    arrowsCoords: arrowsCoords,
+    startArrowCoord: startArrowCoord,
+    grabbingPos: grabbingPos,
+    boardConfig: boardConfig
+  }), React.createElement(ChessBoardControlLayout, {
+    boardConfig: boardConfig,
+    onClick: handleClick,
+    onGrabStart: selectHoverFrom,
+    onGrabStartRight: startRenderArrow,
+    onGrabEnd: handleGrabEnd,
+    onGrabEndRight: endRenderArrow,
+    onGrabbing: handleGrabbing,
+    onRightClick: markCell
+  }), showFigurePicker && React.createElement("div", {
+    className: styles.chessBoardFigurePicker
+  }, React.createElement(FigurePicker, {
+    boardConfig: boardConfig,
+    color: currentColor,
+    forPawnTransform: true,
+    onSelect: handleSelectFigurePicker
+  })));
+};
+
+export { ALL_FIGURES, CHESS_BOARD_CONFIG, ChessBoard, FENtoGameState, FIGURES_LATTERS_NOTATIONS, INITIAL_CELLS, JSChessEngine, LETTERS, LETTER_TO_FIGURE_MAP, getBeatedCellFENfromState, getFENcastlingFromState, getFENpositionsFromState, getPositionByFEN, partFENtoState, prepareCastlingByFEN, stateToFEN };
+//# sourceMappingURL=index.modern.js.map