QuickChess/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const Pieces = {
    WhitePawn: 0,
    WhiteRook: 1,
    WhiteKnight: 2,
    WhiteBishop: 3,
    WhiteQueen: 4,
    WhiteKing: 5,

    BlackPawn: 6,
    BlackRook: 7,
    BlackKnight: 8,
    BlackBishop: 9,
    BlackQueen: 10,
    BlackKing: 11
};

const Images = [
    './white_pawn.svg',
    './white_rook.svg',
    './white_knight.svg',
    './white_bishop.svg',
    './white_queen.svg',
    './white_king.svg',

    './black_pawn.svg',
    './black_rook.svg',
    './black_knight.svg',
    './black_bishop.svg',
    './black_queen.svg',
    './black_king.svg',
];

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(${Images[props.value]})`,
      backgroundSize: `11vw`,
      // backgroundColor: "lightblue",
  };
  if (props.value != null) {
    return (
      <button
        className="square"
        onClick={props.onClick}
        style={bg}
      >
      </button>
    );
  } else {
    return (
      <button
        className="square"
        onClick={props.onClick}
      ></button>
    );
  }
}

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: this.reset(),
      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,
      Pieces.WhiteKnight,
      Pieces.WhiteBishop,
      Pieces.WhiteQueen,
      Pieces.WhiteKing,
      Pieces.WhiteBishop,
      Pieces.WhiteKnight,
      Pieces.WhiteRook
    ];
    let blackRow = [
      Pieces.BlackRook,
      Pieces.BlackKnight,
      Pieces.BlackBishop,
      Pieces.BlackQueen,
      Pieces.BlackKing,
      Pieces.BlackBishop,
      Pieces.BlackKnight,
      Pieces.BlackRook
    ];
    let squares = whiteRow.slice();
    squares = squares.concat(Array(8).fill(Pieces.WhitePawn));
    squares = squares.concat(Array(32).fill(null));
    squares = squares.concat(Array(8).fill(Pieces.BlackPawn));
    squares = squares.concat(blackRow.slice());
    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 (this.isHoldingPiece()) {
      if (this.isValidMove(this.heldPiece(), i)) {
        squares[i] = squares[this.heldPiece()];
        squares[this.heldPiece()] = null;
        this.setHand({
            heldPiece: null,
        });
        this.setState({
          squares: squares,
          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) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  row(row) {
    let i = row * 8;
    return (
      <div className="board-row">
        {this.renderSquare(i)}
        {this.renderSquare(i + 1)}
        {this.renderSquare(i + 2)}
        {this.renderSquare(i + 3)}
        {this.renderSquare(i + 4)}
        {this.renderSquare(i + 5)}
        {this.renderSquare(i + 6)}
        {this.renderSquare(i + 7)}
      </div>
    );
  }

  render() {
    const winner = calculateWinner(this.state.squares);
    let status = winner ?
      'Winner: ' + winner :
      (this.state.blackIsNext ? 'Black' : 'White') + "'s Turn";

    var texttext =
      <div style={{textAlign: `center`,}}>
        <div className="status"><h1>{status}</h1></div>
        {this.row(0)}
        {this.row(1)}
        {this.row(2)}
        {this.row(3)}
        {this.row(4)}
        {this.row(5)}
        {this.row(6)}
        {this.row(7)}
        <p>{Images[this.state.hand.heldPiece]}</p>
      </div>
    ;

    return (
        texttext
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
        <div className="game-board">
          <Board />
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}