react-chessboard-ui 1.4.4 → 1.4.6

package/dist/ChessBoard/utils.d.ts

@@ -58,3 +58,18 @@ export declare const correctGrabbingPosByScroll: (pos: CellPos) => CellPos;
  * Корректирует указатели стрелки
  */
 export declare const correctGrabbingPosForArrow: (pos: CellPos, boardConfig: ChessBoardConfig) => CellPos;
+/**
+ * Создание тэга для хранение состояния
+ * разворота доски
+ *
+ * На момент создания, есть проблема с заданием
+ * разворота доски для слоя фигур - происходит двойной
+ * рендер. Из-за этого доска возврщает в тоже положение
+ * при reversed = true, но состояние игры разворачивается
+ *
+ * Поэтому принято решение вынести хранение и задание
+ * разворота доски на уровень data-атрибутов html
+ */
+export declare const createHtmlReversedStateHolder: () => void;
+export declare const setHtmlReversedStateHolderValue: (reversed: boolean) => void;
+export declare const getHtmlReversedStateHolderValue: () => boolean;

package/dist/index.js

@@ -2012,6 +2012,22 @@ var correctGrabbingPosByScroll = function correctGrabbingPosByScroll(pos) {
 var correctGrabbingPosForArrow = function correctGrabbingPosForArrow(pos, boardConfig) {
   return [pos[0] * boardConfig.cellSize + (boardConfig.cellSize / 2 - 10), pos[1] * boardConfig.cellSize + boardConfig.cellSize / 2];
 };
+var createHtmlReversedStateHolder = function createHtmlReversedStateHolder() {
+  if (!window) return;
+  var reversedStateHolder = document.createElement('div');
+  reversedStateHolder.setAttribute('id', 'reversed-state-holder');
+  reversedStateHolder.setAttribute('data-reversed-state', 'false');
+  document.body.append(reversedStateHolder);
+};
+var setHtmlReversedStateHolderValue = function setHtmlReversedStateHolderValue(reversed) {
+  if (!window) return;
+  document.getElementById('reversed-state-holder').setAttribute('data-reversed-state', JSON.stringify(reversed));
+};
+var getHtmlReversedStateHolderValue = function getHtmlReversedStateHolderValue() {
+  if (!window) return false;
+  var chessboardReversed = document.getElementById('reversed-state-holder') && document.getElementById('reversed-state-holder').getAttribute('data-reversed-state') === 'true';
+  return chessboardReversed;
+};
 
 var BASE_BOARD_SIZE = 8;
 var ChessBoardCellsLayout = function ChessBoardCellsLayout(_ref) {
@@ -2048,6 +2064,7 @@ var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
     setActualState(mapCellsToFiguresArray(initialState));
   }, [initialState]);
   React.useEffect(function () {
+    var chessboardReversed = getHtmlReversedStateHolderValue();
     if (!!change) {
       setActualState(function (prevState) {
         var updatedState = [].concat(prevState);
@@ -2061,11 +2078,28 @@ var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
             var kingIndex = updatedState.findIndex(function (figure) {
               return figure.color === 'white' && figure.type === 'king';
             });
+            if (chessboardReversed) {
+              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] = 4;
+                updatedState[kingIndex].position[0] = 5;
+                return updatedState;
+              }
+              var _rookIndex2 = updatedState.findIndex(function (figure) {
+                return figure.color === color && figure.type === 'rook' && figure.position[0] === 0;
+              });
+              console.log('WHITE', _rookIndex2);
+              updatedState[_rookIndex2].position[0] = 2;
+              updatedState[kingIndex].position[0] = 1;
+              return updatedState;
+            }
             if (castlingType === '0-0') {
-              var _rookIndex = updatedState.findIndex(function (figure) {
+              var _rookIndex3 = updatedState.findIndex(function (figure) {
                 return figure.color === color && figure.type === 'rook' && figure.position[0] === 7;
               });
-              updatedState[_rookIndex].position[0] = 5;
+              updatedState[_rookIndex3].position[0] = 5;
               updatedState[kingIndex].position[0] = 6;
               return updatedState;
             }
@@ -2080,18 +2114,34 @@ var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
             var _kingIndex = updatedState.findIndex(function (figure) {
               return figure.color === 'black' && figure.type === 'king';
             });
+            if (chessboardReversed) {
+              if (castlingType === '0-0') {
+                var _rookIndex4 = updatedState.findIndex(function (figure) {
+                  return figure.color === color && figure.type === 'rook' && figure.position[0] === 7;
+                });
+                updatedState[_rookIndex4].position[0] = 4;
+                updatedState[_kingIndex].position[0] = 5;
+                return updatedState;
+              }
+              var _rookIndex5 = updatedState.findIndex(function (figure) {
+                return figure.color === color && figure.type === 'rook' && figure.position[0] === 0;
+              });
+              updatedState[_rookIndex5].position[0] = 2;
+              updatedState[_kingIndex].position[0] = 1;
+              return updatedState;
+            }
             if (castlingType === '0-0') {
-              var _rookIndex2 = updatedState.findIndex(function (figure) {
+              var _rookIndex6 = updatedState.findIndex(function (figure) {
                 return figure.color === color && figure.type === 'rook' && figure.position[0] === 7;
               });
-              updatedState[_rookIndex2].position[0] = 5;
+              updatedState[_rookIndex6].position[0] = 5;
               updatedState[_kingIndex].position[0] = 6;
               return updatedState;
             }
-            var _rookIndex3 = updatedState.findIndex(function (figure) {
+            var _rookIndex7 = updatedState.findIndex(function (figure) {
               return figure.color === color && figure.type === 'rook' && figure.position[0] === 0;
             });
-            updatedState[_rookIndex3].position[0] = 3;
+            updatedState[_rookIndex7].position[0] = 3;
             updatedState[_kingIndex].position[0] = 2;
             return updatedState;
           }
@@ -2431,7 +2481,8 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       return {};
     }
     var colorFEN = currentColor === 'white' ? 'black' : 'white';
-    var FEN = stateToFEN(updatedCells, colorFEN);
+    var reversedUpdatedCells = boardReversed ? JSChessEngine.reverseChessBoard(updatedCells) : updatedCells;
+    var FEN = stateToFEN(reversedUpdatedCells, colorFEN);
     var moveData = {
       figure: figure,
       from: from,
@@ -2486,7 +2537,8 @@ var useChessBoardInteractive = function useChessBoardInteractive(props) {
       return {};
     }
     var colorFEN = currentColor === 'white' ? 'black' : 'white';
-    var FEN = stateToFEN(updatedCells, colorFEN);
+    var reversedUpdatedCells = boardReversed ? JSChessEngine.reverseChessBoard(updatedCells) : updatedCells;
+    var FEN = stateToFEN(reversedUpdatedCells, colorFEN);
     var moveData = {
       figure: figure,
       from: from,
@@ -2946,11 +2998,15 @@ var ChessBoard = function ChessBoard(props) {
     setCurrentColor(currentColor);
     setBoardReversed(reversed);
   };
+  React.useEffect(function () {
+    createHtmlReversedStateHolder();
+  }, []);
   React.useEffect(function () {
     setPlayerColor(playerColor);
   }, [playerColor]);
   React.useEffect(function () {
     handleUpdateFEN(FEN, reversed);
+    setHtmlReversedStateHolderValue(reversed);
   }, [FEN, reversed]);
   React.useEffect(function () {
     if (!change) return;