fix(piece): stop neighboring pieces from re-rendering on drop animation

willb335 · Jun 29, 2018 · ba09e9b · ba09e9b
1 parent 49a9f47
commit ba09e9b
Show file tree

Hide file tree

Showing 13 changed files with 213 additions and 230 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,8 +1,7 @@
 {
   "name": "chessboardjsx",
   "version": "1.0.1",
-  "description":
-    "Chessboard.jsx is a chessboard for React. Inspired by chessboard.js",
+  "description": "Chessboard.jsx is a chessboard for React. Inspired by chessboard.js",
   "main": "dist/chessboard.min.js",
   "scripts": {
     "contributors:add": "all-contributors add",
@@ -18,8 +17,14 @@
     "start": "webpack-dev-server --open --config webpack.dev.js",
     "report-coverage": "cat ./coverage/lcov.info | codecov"
   },
-  "keywords": ["react", "chess", "chessboard"],
-  "files": ["dist"],
+  "keywords": [
+    "react",
+    "chess",
+    "chessboard"
+  ],
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/willb335/chessboardjsx.git"
@@ -81,7 +86,7 @@
     "react-docgen": "2.20.1",
     "react-dom": "^16.4.0",
     "react-testing-library": "3.1.6",
-    "rimraf": "2.6.2",
+    "roughjs": "2.2.3",
     "semantic-release": "^15.4.1",
     "style-loader": "0.21.0",
     "travis-deploy-once": "^5.0.0",

diff --git a/src/Chessboard/Board.js b/src/Chessboard/Board.js
@@ -6,13 +6,8 @@ import Notation from './Notation';
 import { COLUMNS } from './helpers';
 import Chessboard from './index';
 import PhantomPiece from './PhantomPiece';
-import errorMessages from './errorMessages';
 
 class Board extends Component {
-  componentDidMount() {
-    errorMessages(this.props);
-  }
-
   setSquareCoordinates = (x, y, square) =>
     this.setState({ [square]: { x, y } });
 
@@ -158,14 +153,11 @@ export default Board;
 const boardStyles = width => ({
   width: width,
   height: width,
-  position: 'relative',
-  boxSizing: 'content-box',
   cursor: 'default'
 });
 
 const rowStyles = {
   display: 'flex',
-  alignItems: 'stretch',
   flexWrap: 'nowrap',
   width: '100%'
 };
diff --git a/src/Chessboard/ErrorBoundary.js b/src/Chessboard/ErrorBoundary.js
@@ -10,30 +10,15 @@ class ErrorBoundary extends Component {
   componentDidCatch(error) {
     this.setState({ hasError: true });
 
-    console.log(error.message);
+    console.error(error.message);
   }
 
   render() {
     if (this.state.hasError) {
       return (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexDirection: 'column'
-          }}
-        >
-          <div
-            style={{
-              width: 250,
-              height: 250,
-              transform: `rotate(90deg)`
-            }}
-          >
-            {error.whiteKing}
-          </div>
-          <h1>Something went wrong. Check the console</h1>
+        <div style={container}>
+          <div style={whiteKingStyle}>{error.whiteKing}</div>
+          <h1>Something went wrong</h1>
         </div>
       );
     }
@@ -42,3 +27,16 @@ class ErrorBoundary extends Component {
 }
 
 export default ErrorBoundary;
+
+const container = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column'
+};
+
+const whiteKingStyle = {
+  width: 250,
+  height: 250,
+  transform: `rotate(90deg)`
+};
diff --git a/src/Chessboard/Notation.js b/src/Chessboard/Notation.js
@@ -1,3 +1,5 @@
+/* eslint react/prop-types: 0 */
+
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
@@ -13,6 +15,7 @@ Notation.propTypes = {
 
 const getRow = (orientation, row) =>
   orientation === 'white' ? row + 1 : row - 1;
+
 const getColumn = (orientation, alpha, col) =>
   orientation === 'black' ? alpha[7 - col] : alpha[col];
 
@@ -28,82 +31,132 @@ function Notation({
   const whiteColor = lightSquareStyle.backgroundColor;
   const blackColor = darkSquareStyle.backgroundColor;
 
-  const isBottomLeftSquare =
-    col === 0 &&
-    ((orientation === 'white' && row === 0) ||
-      (orientation === 'black' && row === 9));
   const isRow = col === 0;
   const isColumn =
     (orientation === 'white' && row === 0) ||
     (orientation === 'black' && row === 9);
+  const isBottomLeftSquare = isRow && isColumn;
 
   if (isBottomLeftSquare) {
-    return (
-      <Fragment>
-        <div
-          data-testid={`bottom-left-${getRow(orientation, row)}`}
-          style={{
-            ...notationStyle,
-            ...{ fontSize: width / 48, color: whiteColor },
-            ...numericStyle(width)
-          }}
-        >
-          {getRow(orientation, row)}
-        </div>
-        <div
-          data-testid={`bottom-left-${getColumn(orientation, alpha, col)}`}
-          style={{
-            ...notationStyle,
-            ...{ fontSize: width / 48, color: whiteColor },
-            ...alphaStyle(width)
-          }}
-        >
-          {getColumn(orientation, alpha, col)}
-        </div>
-      </Fragment>
-    );
+    return renderBottomLeft({
+      orientation,
+      row,
+      width,
+      alpha,
+      col,
+      whiteColor
+    });
+  }
+
+  if (isColumn) {
+    return renderLetters({
+      orientation,
+      row,
+      width,
+      alpha,
+      col,
+      whiteColor,
+      blackColor
+    });
   }
 
   if (isRow) {
-    return (
+    return renderNumbers({
+      orientation,
+      row,
+      width,
+      alpha,
+      col,
+      whiteColor,
+      blackColor,
+      isRow,
+      isBottomLeftSquare
+    });
+  }
+
+  return null;
+}
+
+export default Notation;
+
+function renderBottomLeft({ orientation, row, width, alpha, col, whiteColor }) {
+  return (
+    <Fragment>
       <div
+        data-testid={`bottom-left-${getRow(orientation, row)}`}
         style={{
           ...notationStyle,
-          ...rowStyle({
-            row,
-            width,
-            blackColor,
-            whiteColor,
-            orientation,
-            isBottomLeftSquare,
-            isRow
-          }),
+          ...{ fontSize: width / 48, color: whiteColor },
           ...numericStyle(width)
         }}
       >
         {getRow(orientation, row)}
       </div>
-    );
-  }
-
-  if (isColumn) {
-    return (
       <div
-        data-testid={`column-${getColumn(orientation, alpha, col)}`}
+        data-testid={`bottom-left-${getColumn(orientation, alpha, col)}`}
         style={{
           ...notationStyle,
-          ...columnStyle({ col, width, blackColor, whiteColor }),
+          ...{ fontSize: width / 48, color: whiteColor },
           ...alphaStyle(width)
         }}
       >
         {getColumn(orientation, alpha, col)}
       </div>
-    );
-  }
-  return null;
+    </Fragment>
+  );
 }
 
-export default Notation;
+function renderLetters({
+  orientation,
+  width,
+  alpha,
+  col,
+  whiteColor,
+  blackColor
+}) {
+  return (
+    <div
+      data-testid={`column-${getColumn(orientation, alpha, col)}`}
+      style={{
+        ...notationStyle,
+        ...columnStyle({ col, width, blackColor, whiteColor }),
+        ...alphaStyle(width)
+      }}
+    >
+      {getColumn(orientation, alpha, col)}
+    </div>
+  );
+}
+
+function renderNumbers({
+  orientation,
+  row,
+  width,
+  whiteColor,
+  blackColor,
+  isRow,
+  isBottomLeftSquare
+}) {
+  return (
+    <div
+      style={{
+        ...notationStyle,
+        ...rowStyle({
+          row,
+          width,
+          blackColor,
+          whiteColor,
+          orientation,
+          isBottomLeftSquare,
+          isRow
+        }),
+        ...numericStyle(width)
+      }}
+    >
+      {getRow(orientation, row)}
+    </div>
+  );
+}
 
 const columnStyle = ({ col, width, blackColor, whiteColor }) => ({
   fontSize: width / 48,
@@ -133,18 +186,17 @@ const rowStyle = ({
 };
 
 const alphaStyle = width => ({
-  position: 'absolute',
-  bottom: width / 8 / 40,
-  right: width / 8 / 20
+  alignSelf: 'flex-end',
+  paddingLeft: width / 8 - width / 48
 });
 
 const numericStyle = width => ({
-  position: 'absolute',
-  top: width / 8 / 40,
-  left: width / 8 / 40
+  alignSelf: 'flex-start',
+  paddingRight: width / 8 - width / 48
 });
 
 const notationStyle = {
-  fontFamily: `${'Helvetica Neue'}, Helvetica, Arial, sans-serif`,
-  fontSize: '14px'
+  fontFamily: 'Helvetica Neue',
+  zIndex: 10,
+  position: 'absolute'
 };