fix(chessboard): change default colors for board

willb335 · Jun 27, 2018 · 49a9f47 · 49a9f47
1 parent ac59dc0
commit 49a9f47
Show file tree

Hide file tree

Showing 12 changed files with 15 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,8 @@
 <div align="center" markdown="1">
 
-<img src="./src/img/opposition.png" alt="opposition" width="200">
-<img src="./src/img/ruyLopez.png" alt="ruyLopez" width="200">
-<img src="./src/img/carlsen2016Championship.png" alt="carlsen2016Championship" width="200">
-<img src="./src/img/anandsImmortal.png" alt="anandsImmortal" width="200">
+<img src="./src/img/lucena.png" alt="lucena position" width="200">
+<img src="./src/img/carlsenWorldChampionship2016.png" alt="Carlsen 2016 Championship" width="200">
+<img src="./src/img/sicilian.png" alt="sicilian defense" width="200">
 
 **A chessboard for React inspired by [chessboard.js](https://github.com/oakmac/chessboardjs)**
 

diff --git a/src/Chessboard/Square.js b/src/Chessboard/Square.js
@@ -51,10 +51,10 @@ class Square extends Component {
     }
   }
 
-  componentWillUnmount() {
-    const { square } = this.props;
-    this[square].remove();
-  }
+  // componentWillUnmount() {
+  //   const { square } = this.props;
+  //   this[square].remove();
+  // }
 
   render() {
     const {

diff --git a/src/Chessboard/index.js b/src/Chessboard/index.js
@@ -156,8 +156,8 @@ class Chessboard extends Component {
     id: '0',
     renderPieces,
     pieces: {},
-    lightSquareStyle: { backgroundColor: '#61dafb' },
-    darkSquareStyle: { backgroundColor: '#10a8c8' },
+    lightSquareStyle: { backgroundColor: 'rgb(240, 217, 181)' },
+    darkSquareStyle: { backgroundColor: 'rgb(181, 136, 99)' },
     roughSquare: false,
     selectedSquares: [],
     onMouseOverSquare: false,

diff --git a/src/Demo.js b/src/Demo.js
@@ -46,9 +46,9 @@ class Demo extends Component {
                   selectedSquares,
                   onDrop,
                   onMouseOverSquare,
-                  onMouseOutSquare,
-                  getPosition,
-                  darkSquareStyle
+                  onMouseOutSquare
+                  // getPosition
+                  // darkSquareStyle
                 }) => (
                   <Chessboard
                     id="humanVsHuman"
@@ -61,8 +61,8 @@ class Demo extends Component {
                     roughSquare={roughSquare}
                     animationOnDrop="rubberBand"
                     boardStyle={boardStyle}
-                    getPosition={getPosition}
-                    darkSquareStyle={darkSquareStyle}
+                    // getPosition={getPosition}
+                    // darkSquareStyle={darkSquareStyle}
                   />
                 )}
               </HumanVsHuman>

diff --git a/src/img/anandsImmortal.png b/src/img/anandsImmortal.png
diff --git a/src/img/carlsen2016Championship.png b/src/img/carlsen2016Championship.png
diff --git a/src/img/carlsenWorldChampionship2016.png b/src/img/carlsenWorldChampionship2016.png
diff --git a/src/img/lucena.png b/src/img/lucena.png
diff --git a/src/img/opposition.png b/src/img/opposition.png
diff --git a/src/img/ruyLopez.png b/src/img/ruyLopez.png
diff --git a/src/img/sicilian.png b/src/img/sicilian.png
diff --git a/src/integrations/customRough.js b/src/integrations/customRough.js
@@ -4,7 +4,7 @@ export const roughSquare = (element, squareWidth) => {
   let rc = rough.svg(element);
   const chessSquare = rc.rectangle(0, 0, squareWidth, squareWidth, {
     roughness: 0.8,
-    fill: '#61dafb',
+    fill: '#b58863',
     bowing: 2
   });
   element.appendChild(chessSquare);