fix(square): reset square coordinates when screen size changes

package.json

@@ -13,7 +13,7 @@
     "lint": "eslint src",
     "validate": "npm-run-all --parallel test lint build",
     "travis-deploy-once": "travis-deploy-once",
-    "semantic-release": "semantic-release -d",
+    "semantic-release": "npx semantic-release",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "start": "webpack-dev-server --open --config webpack.dev.js",
     "report-coverage": "cat ./coverage/lcov.info | codecov"

src/Chessboard/Board.js

@@ -80,10 +80,10 @@ class Board extends Component {
                           onMouseOverSquare={context.onMouseOverSquare}
                           onMouseOutSquare={context.onMouseOutSquare}
                           onHoverSquareStyle={context.onHoverSquareStyle}
-                          selectedSquareStyle={
-                            context.selectedSquareStyle
-                          }
+                          selectedSquareStyle={context.selectedSquareStyle}
                           id={context.id}
+                          screenWidth={context.screenWidth}
+                          screenHeight={context.screenHeight}
                         >
                           {this.hasPiece(context.currentPosition, square) ? (
                             <Fragment>

src/Chessboard/Square.js

@@ -20,7 +20,9 @@ class Square extends Component {
     onMouseOverSquare: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     onMouseOutSquare: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     onHoverSquareStyle: PropTypes.object,
-    selectedSquareStyle: PropTypes.object
+    selectedSquareStyle: PropTypes.object,
+    screenWidth: PropTypes.number,
+    screenHeight: PropTypes.number
   };
 
   componentDidMount() {
@@ -31,6 +33,24 @@ class Square extends Component {
     setSquareCoordinates(x, y, square);
   }
 
+  componentDidUpdate(prevProps) {
+    const {
+      screenWidth,
+      screenHeight,
+      square,
+      setSquareCoordinates
+    } = this.props;
+
+    const didScreenSizeChange =
+      prevProps.screenWidth !== screenWidth ||
+      prevProps.screenHeight !== screenHeight;
+
+    if (didScreenSizeChange) {
+      const { x, y } = this[square].getBoundingClientRect();
+      setSquareCoordinates(x, y, square);
+    }
+  }
+
   render() {
     const {
       connectDropTarget,

src/Chessboard/index.js

@@ -405,7 +405,9 @@ class Chessboard extends Component {
               dropSquare,
               setAnimation: this.setAnimation,
               setTouchState: this.setTouchState,
-              currentPosition
+              currentPosition,
+              screenWidth,
+              screenHeight
             }
           }}
         >

src/Demo.js

@@ -7,7 +7,7 @@ import HumanVsHuman from './integrations/HumanVsHuman';
 import { roughSquare } from './integrations/customRough';
 import RandomFEN from './integrations/RandomFEN';
 
-const calcWidth = screenWidth => (screenWidth < 500 ? 320 : 480);
+const calcWidth = screenWidth => (screenWidth < 500 ? 150 : 480);
 const boardStyle = {
   borderRadius: '5px',
   boxShadow: `0 5px 15px rgba(0, 0, 0, 0.5)`
@@ -91,6 +91,7 @@ class Demo extends Component {
                 {({ position }) => (
                   <Chessboard
                     calcWidth={calcWidth}
+                    // width={320}
                     id="random"
                     orientation="black"
                     position={position}