Some clean-up.

Added piece-based tooltips. Subject to removal, but may be converted to React
pop-ups. Added part of castling framework.

src/index.js

@@ -78,6 +78,7 @@ function Square(props) {
         backgroundSize: `100%`,
         backgroundColor: props.bgColor,
       }}
+      title={props.piece == null ? "" : props.piece.getInfoText()}
     >
     </button>
   );
@@ -88,10 +89,20 @@ class Piece {
     this.color = color;
     this.type = type;
     this.passantable = false;
+    this.moves = 0;
   }
+
   setType(type) {
     this.type = type;
   }
+
+  getInfoText() {
+    if(this.moves === 1) {
+      return "Has made 1 move"
+    } else {
+      return "Has made " + this.moves + " moves"
+    }
+  }
 }
 
 class Board extends React.Component {
@@ -114,6 +125,16 @@ class Board extends React.Component {
     });
   }
 
+  clone() {
+    var board = new Board();
+    board.state.squares = this.state.squares.slice();
+    board.state.blackIsNext = this.state.blackIsNext;
+    board.state.hand = {
+      heldPiece: this.state.hand.heldPiece,
+    };
+    return board;
+  }
+
   reset() {
     let whiteRow = [
       new Piece(WHITE, ROOK),
@@ -371,14 +392,12 @@ class Board extends React.Component {
         let piece = this.squareAt(i);
         // If that piece is on the checked team
         if (piece != null && isBlack(piece) === isBlack(checkedKing)) {
-          // Copy the board
-          var board = new Board();
-          board.state.squares = this.state.squares.slice();
           // For each move of the above piece
-          let moves = board.getValidMoves(i)
+          let moves = this.getValidMoves(i)
-          for(var j = 0; j < moves.length; j++) {
+          for(var move of moves) {
-            let [x, y] = [moves[j].x, moves[j].y];
+            // Copy the board
-            board.state.squares[x + (y * 8)] = board.state.squares[i];
+            var board = this.clone();
+            board.state.squares[board.getIndex(move.x, move.y)] = board.state.squares[i];
             board.state.squares[i] = null;
             let check = board.inCheck(checkedKing);
             if (check == null || check.color !== checkedKing.color) {
@@ -396,7 +415,7 @@ class Board extends React.Component {
   getValidMoves(source) {
     let [x, y] = this.getXandY(source);
 
-    let piece = this.state.squares[source];
+    let piece = this.squareAt(source);
     return this.getValidMovesAt(piece, x, y);
   }
 
@@ -425,14 +444,14 @@ class Board extends React.Component {
     let move = this.isValidMove(from, to)
     if (move) {
       if (move.passant) {
-        squares[move.passant.x + (move.passant.y * 8)] = null;
+        squares[this.getIndex(move.passant.x, move.passant.y)] = null;
       }
       // Remove existing passantable states
-      for(var square of squares) {
+      squares.forEach(square => {
         if (square) {
           square.passantable = false;
         }
-      }
+      });
       if (move.passantable) {
         squares[from].passantable = true;
       }
@@ -442,6 +461,7 @@ class Board extends React.Component {
       if (squares[to].type === PAWN && (y === 0 || y === 7)) {
         squares[to].setType(QUEEN);
       }
+      squares[to].moves++;
       this.setState({
         squares: squares,
         blackIsNext: !this.state.blackIsNext,
@@ -460,9 +480,8 @@ class Board extends React.Component {
     }
     if (this.isHoldingPiece()) {
       // Copy the board
-      var board = new Board();
+      var board = this.clone();
-      board.state.squares = this.state.squares.slice();
+      board.state.squares[i] = board.state.squares[board.heldPiece()];
-      board.state.squares[i] = board.state.squares[this.heldPiece()];
       board.state.squares[this.heldPiece()] = null;
 
       let moversKing = this.state.blackIsNext ?