Try to move Piece to its own class

src/index.js

@@ -2,21 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 
-const Pieces = {
+const BLACK = 0;
-    WhitePawn: 0,
+const WHITE = 1;
-    WhiteRook: 1,
-    WhiteKnight: 2,
-    WhiteBishop: 3,
-    WhiteQueen: 4,
-    WhiteKing: 5,
 
-    BlackPawn: 6,
+const PAWN = 0;
-    BlackRook: 7,
+const ROOK = 1;
-    BlackKnight: 8,
+const KNIGHT = 2;
-    BlackBishop: 9,
+const BISHOP = 3;
-    BlackQueen: 10,
+const QUEEN = 4;
-    BlackKing: 11
+const KING = 5;
-};
 
 const Images = [
     './white_pawn.svg',
@@ -35,35 +29,43 @@ const Images = [
 ];
 
 function isBlack(piece) {
-  return piece >= Pieces.BlackPawn;
+  return piece != null && piece.color === BLACK;
 }
 
 function isWhite(piece) {
-  return !isBlack(piece);
+  return piece != null && piece.color === WHITE;
 }
 
 function isPawn(piece) {
-  return piece === Pieces.WhitePawn || piece === Pieces.BlackPawn;
+  return piece != null && piece.type === PAWN;
 }
 
 function isRook(piece) {
-  return piece === Pieces.WhiteRook || piece === Pieces.BlackRook;
+  return piece != null && piece.type === ROOK;
 }
 
 function isBishop(piece) {
-  return piece === Pieces.WhiteBishop || piece === Pieces.BlackBishop;
+  return piece != null && piece.type === BISHOP;
 }
 
 function isQueen(piece) {
-  return piece === Pieces.WhiteQueen || piece === Pieces.BlackQueen;
+  return piece != null && piece.type === QUEEN;
 }
 
 function isKnight(piece) {
-  return piece === Pieces.WhiteKnight || piece === Pieces.BlackKnight;
+  return piece != null && piece.type === KNIGHT;
 }
 
 function isKing(piece) {
-  return piece === Pieces.WhiteKing || piece === Pieces.BlackKing;
+  return piece != null && piece.type === KING;
+}
+
+function imageFromPiece(piece) {
+  if (piece) {
+    let image = piece.color === WHITE ? piece.type : piece.type + 6;
+    return Images[image];
+  }
+  return null;
 }
 
 function Square(props) {
@@ -72,7 +74,7 @@ function Square(props) {
       className="square"
       onClick={props.onClick}
       style={{
-        backgroundImage: `url(${Images[props.value]})`,
+        backgroundImage: `url(${imageFromPiece(props.piece)})`,
         backgroundSize: `100%`,
         backgroundColor: props.bgColor,
       }}
@@ -81,6 +83,14 @@ function Square(props) {
   );
 }
 
+class Piece {
+  constructor(color, type) {
+    this.color = color;
+    this.type = type;
+  }
+
+}
+
 class Board extends React.Component {
   constructor(props) {
     super(props);
@@ -102,31 +112,32 @@ class Board extends React.Component {
   }
 
   reset() {
+    console.log("RESET");
     let whiteRow = [
-      Pieces.WhiteRook,
+      new Piece(WHITE, ROOK),
-      Pieces.WhiteKnight,
+      new Piece(WHITE, KNIGHT),
-      Pieces.WhiteBishop,
+      new Piece(WHITE, BISHOP),
-      Pieces.WhiteQueen,
+      new Piece(WHITE, QUEEN),
-      Pieces.WhiteKing,
+      new Piece(WHITE, KING),
-      Pieces.WhiteBishop,
+      new Piece(WHITE, BISHOP),
-      Pieces.WhiteKnight,
+      new Piece(WHITE, KNIGHT),
-      Pieces.WhiteRook
+      new Piece(WHITE, ROOK),
     ];
     let blackRow = [
-      Pieces.BlackRook,
+      new Piece(BLACK, ROOK),
-      Pieces.BlackKnight,
+      new Piece(BLACK, KNIGHT),
-      Pieces.BlackBishop,
+      new Piece(BLACK, BISHOP),
-      Pieces.BlackQueen,
+      new Piece(BLACK, QUEEN),
-      Pieces.BlackKing,
+      new Piece(BLACK, KING),
-      Pieces.BlackBishop,
+      new Piece(BLACK, BISHOP),
-      Pieces.BlackKnight,
+      new Piece(BLACK, KNIGHT),
-      Pieces.BlackRook
+      new Piece(BLACK, ROOK)
     ];
-    let squares = whiteRow.slice();
+    let squares = whiteRow;
-    squares = squares.concat(Array(8).fill(Pieces.WhitePawn));
+    squares = squares.concat(Array(8).fill(new Piece(WHITE, PAWN)));
     squares = squares.concat(Array(32).fill(null));
-    squares = squares.concat(Array(8).fill(Pieces.BlackPawn));
+    squares = squares.concat(Array(8).fill(new Piece(BLACK, PAWN)));
-    squares = squares.concat(blackRow.slice());
+    squares = squares.concat(blackRow);
     return squares;
   }
 
@@ -192,7 +203,7 @@ class Board extends React.Component {
           moves.push([x, y + (shift * 2)]);
         }
       }
-      [x + 1, x - 1].forEach((x) => {
+      [x + 1, x - 1].forEach(x => {
         if (this.isEnemyOf(piece, x, y + shift)) {
           moves.push([x, y + shift]);
         }
@@ -249,8 +260,8 @@ class Board extends React.Component {
       }
     } else if (isQueen(piece)) {
       let [rook, bishop] = isBlack(piece) ?
-        [Pieces.BlackRook, Pieces.BlackBishop] :
+        [new Piece(BLACK, ROOK), new Piece(BLACK, BISHOP)] :
-        [Pieces.WhiteRook, Pieces.WhiteBishop];
+        [new Piece(WHITE, ROOK), new Piece(WHITE, BISHOP)];
       moves = moves.concat(this.getValidMovesAt(rook, x, y));
       moves = moves.concat(this.getValidMovesAt(bishop, x, y));
     } else if (isKnight(piece)) {
@@ -258,23 +269,44 @@ class Board extends React.Component {
         [2, 1], [2, -1], [-2, 1], [-2, -1],
         [1, 2], [1, -2], [-1, 2], [-1, -2],
       ];
-      deltas.forEach((delta) => tryAddMove(x + delta[0], y + delta[1]));
+      deltas.forEach(delta => tryAddMove(x + delta[0], y + delta[1]));
     } else if (isKing(piece)) {
       let deltas = [
         [1, 1], [1, -1], [-1, 1], [-1, -1], [0, 1], [0, -1], [1, 0], [-1, 0]
       ];
-      deltas.forEach((delta) => tryAddMove(x + delta[0], y + delta[1]));
+      deltas.forEach(delta => tryAddMove(x + delta[0], y + delta[1]));
     }
     return moves;
   }
 
-  inCheck(piece) {
+  findIndex(piece) {
-    var kingPos;
+    console.log("founding");
     for(var i = 0; i < this.squareCount(); i++) {
-      if(this.state.squares[i] === piece) {
+      let check = this.state.squares[i];
-        kingPos = this.getXandY(i);
+      if(check && check.type === piece.type && check.color === piece.color) {
+        console.log("found");
+        return i;
       }
     }
+    return null;
+  }
+
+  distanceBetween(i1, i2) {
+    let [pos1X, pos1Y] = this.getXandY(i1);
+    let [pos2X, pos2Y] = this.getXandY(i2);
+
+    var a = pos1X - pos2X;
+    a = a * a;
+
+    var b = pos1Y - pos2Y;
+    b = b * b;
+
+    return Math.sqrt(a + b);
+  }
+
+  inCheck(piece) {
+    var i;
+    var kingPos = this.getXandY(this.findIndex(piece));
 
     for(i = 0; i < this.squareCount(); i++) {
       let [x, y] = this.getXandY(i);
@@ -292,8 +324,8 @@ class Board extends React.Component {
   }
 
   whoInCheck() {
-    let blackKing = this.inCheck(Pieces.BlackKing);
+    let blackKing = this.inCheck(new Piece(BLACK, KING));
-    return blackKing ? blackKing : this.inCheck(Pieces.WhiteKing);
+    return blackKing ? blackKing : this.inCheck(new Piece(WHITE, KING));
   }
 
   squareCount() {
@@ -420,7 +452,7 @@ class Board extends React.Component {
       "#5D98E6" : plainBg;
     return (
       <Square
-        value={this.state.squares[i]}
+        piece={this.state.squares[i]}
         onClick={() => this.handleClick(i)}
         bgColor={bgColor}
       />