Most pieces move as expected (pawns need work)

Now able to build and publish as static

package.json

@@ -34,5 +34,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "homepage": "./"
 }

src/index.js

@@ -3,24 +3,72 @@ import ReactDOM from 'react-dom';
 import './index.css';
 
 const Pieces = {
-    WhitePawn: './white_pawn.png',
+    WhitePawn: 0,
-    WhiteRook: './white_rook.png',
+    WhiteRook: 1,
-    WhiteKnight: './white_knight.png',
+    WhiteKnight: 2,
-    WhiteBishop: './white_bishop.png',
+    WhiteBishop: 3,
-    WhiteQueen: './white_queen.png',
+    WhiteQueen: 4,
-    WhiteKing: './white_king.png',
+    WhiteKing: 5,
 
-    BlackPawn: './black_pawn.png',
+    BlackPawn: 6,
-    BlackRook: './black_rook.png',
+    BlackRook: 7,
-    BlackKnight: './black_knight.png',
+    BlackKnight: 8,
-    BlackBishop: './black_bishop.png',
+    BlackBishop: 9,
-    BlackQueen: './black_queen.png',
+    BlackQueen: 10,
-    BlackKing: './black_king.png',
+    BlackKing: 11
 };
 
+const Images = [
+    './white_pawn.png',
+    './white_rook.png',
+    './white_knight.png',
+    './white_bishop.png',
+    './white_queen.png',
+    './white_king.png',
+
+    './black_pawn.png',
+    './black_rook.png',
+    './black_knight.png',
+    './black_bishop.png',
+    './black_queen.png',
+    './black_king.png',
+];
+
+function isBlack(piece) {
+  return piece >= Pieces.BlackPawn;
+}
+
+function isWhite(piece) {
+  return !isBlack(piece);
+}
+
+function isPawn(piece) {
+  return piece === Pieces.WhitePawn || piece === Pieces.BlackPawn;
+}
+
+function isRook(piece) {
+  return piece === Pieces.WhiteRook || piece === Pieces.BlackRook;
+}
+
+function isBishop(piece) {
+  return piece === Pieces.WhiteBishop || piece === Pieces.BlackBishop;
+}
+
+function isQueen(piece) {
+  return piece === Pieces.WhiteQueen || piece === Pieces.BlackQueen;
+}
+
+function isKnight(piece) {
+  return piece === Pieces.WhiteKnight || piece === Pieces.BlackKnight;
+}
+
+function isKing(piece) {
+  return piece === Pieces.WhiteKing || piece === Pieces.BlackKing;
+}
+
 function Square(props) {
   let bg = {
-      backgroundImage: `url(${props.value})`,
+      backgroundImage: `url(${Images[props.value]})`,
       // backgroundColor: "lightblue",
   };
   if (props.value != null) {
@@ -47,11 +95,22 @@ class Board extends React.Component {
     super(props);
     this.state = {
       squares: this.reset(),
-      xIsNext: true,
+      blackIsNext: true,
+      hand: {
+        heldPiece: null,
+      },
     };
     this.reset();
   }
 
+  setHand(hand) {
+    this.setState({
+      squares: this.state.squares,
+      blackIsNext: this.state.blackIsNext,
+      hand: hand,
+    });
+  }
+
   reset() {
     let whiteRow = [
       Pieces.WhiteRook,
@@ -81,16 +140,215 @@ class Board extends React.Component {
     return squares;
   }
 
+  getXandY(i) {
+    let x = i % 8;
+    let y = Math.floor(i / 8);
+    return [x, y];
+  }
+
+  squareAt(x, y) {
+    let i = x + (y * 8);
+    if (i < 64 && x < 8 && y < 8) {
+      return this.state.squares[x + (y * 8)];
+    } else {
+      return null;
+    }
+  }
+
+  whiteAt(x, y) {
+    let square = this.squareAt(x, y);
+    if (square == null) {
+      return false;
+    }
+    return square < Pieces.BlackPawn;
+  }
+
+  blackAt(x, y) {
+    let square = this.squareAt(x, y);
+    if (square == null) {
+      return false;
+    }
+    return square >= Pieces.BlackPawn;
+  }
+
+  isEnemyOf(piece, x, y) {
+    let pieceIsBlack = isBlack(piece);
+    return pieceIsBlack ? this.whiteAt(x, y) : this.blackAt(x, y);
+  }
+
+  getValidMovesAt(piece, x, y) {
+    var i;
+    var moves = [];
+    let tryAddMove = (x, y) => {
+      if (this.squareAt(x, y) == null) {
+        moves.push([x, y]);
+        // Keep searching
+        return 0;
+      } else if (this.isEnemyOf(piece, x, y)) {
+        moves.push([x, y]);
+      }
+      // Stop searching
+      return 1;
+    };
+
+    if (isPawn(piece)) {
+      let pieceIsBlack = isBlack(piece);
+      let shift = pieceIsBlack ? -1 : 1;
+      let startLine = pieceIsBlack ? 6 : 1;
+
+      if (y === startLine) {
+        return [
+          [x, y + shift],
+          [x, y + (shift * 2)],
+        ];
+      } else {
+        return [
+          [x, y + shift],
+        ];
+      }
+    } else if (isRook(piece)) {
+      // Down
+      for (i = y + 1; i < 8; i++) {
+        if (tryAddMove(x, i) !== 0) {
+          break;
+        }
+      }
+      // Up
+      for (i = y - 1; i >= 0; i--) {
+        if (tryAddMove(x, i) !== 0) {
+          break;
+        }
+      }
+      // Right
+      for (i = x + 1; i < 8; i++) {
+        if (tryAddMove(i, y) !== 0) {
+          break;
+        }
+      }
+      // Left
+      for (i = x - 1; i >= 0; i--) {
+        if (tryAddMove(i, y) !== 0) {
+          break;
+        }
+      }
+    } else if (isBishop(piece)) {
+      console.log("Bishop");
+      // Down-Right
+      for (i = 1; i < 8; i++) {
+        if (tryAddMove(x + i, y + i) !== 0) {
+          break;
+        }
+      }
+      // Up-Right
+      for (i = 1; i < 8; i++) {
+        if (tryAddMove(x + i, y - i) !== 0) {
+          break;
+        }
+      }
+      // Down-Left
+      for (i = 1; i < 8; i++) {
+        if (tryAddMove(x - i, y + i) !== 0) {
+          break;
+        }
+      }
+      // Up-Left
+      for (i = 1; i < 8; i++) {
+        if (tryAddMove(x - i, y - i) !== 0) {
+          break;
+        }
+      }
+    } else if (isQueen(piece)) {
+      let [rook, bishop] = isBlack(piece) ?
+        [Pieces.BlackRook, Pieces.BlackBishop] :
+        [Pieces.WhiteRook, Pieces.WhiteBishop];
+      moves = moves.concat(this.getValidMovesAt(rook, x, y));
+      moves = moves.concat(this.getValidMovesAt(bishop, x, y));
+      console.log(moves);
+    } else if (isKnight(piece)) {
+      tryAddMove(x + 2, y + 1);
+      tryAddMove(x + 2, y - 1);
+      tryAddMove(x - 2, y + 1);
+      tryAddMove(x - 2, y - 1);
+      tryAddMove(x + 1, y + 2);
+      tryAddMove(x + 1, y - 2);
+      tryAddMove(x - 1, y + 2);
+      tryAddMove(x - 1, y - 2);
+    } else if (isKing(piece)) {
+      tryAddMove(x + 1, y + 1);
+      tryAddMove(x + 1, y - 1);
+      tryAddMove(x - 1, y + 1);
+      tryAddMove(x - 1, y - 1);
+
+      tryAddMove(x, y + 1);
+      tryAddMove(x, y - 1);
+      tryAddMove(x + 1, y);
+      tryAddMove(x - 1, y);
+    }
+    return moves;
+  }
+
+  getValidMoves(source) {
+    let [x, y] = this.getXandY(source);
+    console.log([x, y]);
+
+    let piece = this.state.squares[source];
+    return this.getValidMovesAt(piece, x, y);
+  }
+
+  isValidMove(source, dest) {
+    let [destX, destY] = this.getXandY(dest);
+
+    let validMoves = this.getValidMoves(source);
+    if (validMoves == null) {
+      console.log("Null moves");
+      return false;
+    }
+
+    for (var move of this.getValidMoves(source)) {
+      let [x, y] = move;
+      if (destX === x && destY === y) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  isHoldingPiece() {
+    return this.heldPiece() != null;
+  }
+
+  heldPiece() {
+    return this.state.hand.heldPiece;
+  }
+
   handleClick(i) {
     const squares = this.state.squares.slice();
-    if (calculateWinner(squares) || squares[i]) {
+    if (this.isHoldingPiece()) {
-      return;
+      if (this.isValidMove(this.heldPiece(), i)) {
-    }
+        squares[i] = squares[this.heldPiece()];
-    squares[i] = this.state.xIsNext ? 'Black' : 'White';
+        squares[this.heldPiece()] = null;
+        this.setHand({
+            heldPiece: null,
+        });
         this.setState({
           squares: squares,
-      xIsNext: !this.state.xIsNext,
+          blackIsNext: !this.state.blackIsNext,
         });
+      } else {
+        this.setHand({
+            heldPiece: null,
+        });
+      }
+    } else if (squares[i] != null) {
+      let isSquareBlack = isBlack(squares[i]);
+      if(isSquareBlack === this.state.blackIsNext) {
+        console.log(this.getValidMoves(i));
+        this.setHand({
+            heldPiece: i,
+        });
+      }
+    }
   }
 
   renderSquare(i) {
@@ -120,12 +378,9 @@ class Board extends React.Component {
 
   render() {
     const winner = calculateWinner(this.state.squares);
-    let status;
+    let status = winner ?
-    if (winner) {
+      'Winner: ' + winner :
-      status = 'Winner: ' + winner;
+      'Next player: ' + (this.state.blackIsNext ? 'Black' : 'White');
-    } else {
-      status = 'Next player: ' + (this.state.xIsNext ? 'Black' : 'White');
-    }
 
     var texttext =
       <div>
@@ -138,6 +393,7 @@ class Board extends React.Component {
         {this.row(5)}
         {this.row(6)}
         {this.row(7)}
+        <p>{Images[this.state.hand.heldPiece]}</p>
       </div>
     ;