react-chessboard-ui 1.4.4 → 1.4.6

package/dist/index.modern.js

@@ -2009,6 +2009,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) {
@@ -2045,6 +2061,7 @@ var ChessBoardFiguresLayout = function ChessBoardFiguresLayout(props) {
     setActualState(mapCellsToFiguresArray(initialState));
   }, [initialState]);
   useEffect(function () {
+    var chessboardReversed = getHtmlReversedStateHolderValue();
     if (!!change) {
       setActualState(function (prevState) {
         var updatedState = [].concat(prevState);
@@ -2058,11 +2075,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;
             }
@@ -2077,18 +2111,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;
           }
@@ -2428,7 +2478,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,
@@ -2483,7 +2534,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,
@@ -2943,11 +2995,15 @@ var ChessBoard = function ChessBoard(props) {
     setCurrentColor(currentColor);
     setBoardReversed(reversed);
   };
+  useEffect(function () {
+    createHtmlReversedStateHolder();
+  }, []);
   useEffect(function () {
     setPlayerColor(playerColor);
   }, [playerColor]);
   useEffect(function () {
     handleUpdateFEN(FEN, reversed);
+    setHtmlReversedStateHolderValue(reversed);
   }, [FEN, reversed]);
   useEffect(function () {
     if (!change) return;