diff --git a/src/index.css b/src/index.css index 4ec318d..884fa9c 100644 --- a/src/index.css +++ b/src/index.css @@ -59,15 +59,8 @@ ol, ul { background: #ddd; } -.game { -} - .game-board { display: flex; justify-content: center; align-items: center; } - -.game-info { - margin-left: 20px; -} diff --git a/src/index.js b/src/index.js index 1de3994..5ad4948 100644 --- a/src/index.js +++ b/src/index.js @@ -126,7 +126,7 @@ class Board extends React.Component { } clone() { - var board = new Board(); + let board = new Board(); board.state.squares = this.state.squares.slice(); board.state.blackIsNext = this.state.blackIsNext; board.state.hand = { @@ -136,43 +136,30 @@ class Board extends React.Component { } reset() { - let whiteRow = [ - new Piece(WHITE, ROOK), - new Piece(WHITE, KNIGHT), - new Piece(WHITE, BISHOP), - new Piece(WHITE, QUEEN), - new Piece(WHITE, KING), - new Piece(WHITE, BISHOP), - new Piece(WHITE, KNIGHT), - new Piece(WHITE, ROOK), - ]; - let blackRow = [ - new Piece(BLACK, ROOK), - new Piece(BLACK, KNIGHT), - new Piece(BLACK, BISHOP), - new Piece(BLACK, QUEEN), - new Piece(BLACK, KING), - new Piece(BLACK, BISHOP), - new Piece(BLACK, KNIGHT), - new Piece(BLACK, ROOK) - ]; + let squares = []; + const mainRow = [ROOK, KNIGHT, BISHOP, QUEEN, KING, BISHOP, KNIGHT, ROOK]; function add(num, color, type) { - for(var i = 0; i < num; i++) { - squares.push(new Piece(color, type)); + for(let i = 0; i < num; i++) { + if(color != null && type != null) { + squares.push(new Piece(color, type)); + } else { + squares.push(null); + } } } - let squares = whiteRow; + + mainRow.forEach(type => add(1, WHITE, type)); add(8, WHITE, PAWN); - squares = squares.concat(Array(32).fill(null)); + add(32, null, null); add(8, BLACK, PAWN); - squares = squares.concat(blackRow); + mainRow.forEach(type => add(1, BLACK, type)); return squares; } getXandY(i) { - let x = i % 8; - let y = Math.floor(i / 8); + const x = i % 8; + const y = Math.floor(i / 8); return [x, y]; } @@ -184,9 +171,16 @@ class Board extends React.Component { return x < 8 && x >=0 && y < 8 && y >= 0; } + squareCount() { + return this.state.squares.length; + } + + squareAt(i) { + return i >= 0 && i < 64 ? this.state.squares[i] : null; + } + pieceAt(x, y) { - let i = this.getIndex(x, y); - if (i < 64 && this.isValidXY(x, y)) { + if (this.isValidXY(x, y)) { return this.state.squares[this.getIndex(x, y)]; } else { return null; @@ -194,7 +188,7 @@ class Board extends React.Component { } whiteAt(x, y) { - let square = this.pieceAt(x, y); + const square = this.pieceAt(x, y); if (square == null) { return false; } @@ -202,7 +196,7 @@ class Board extends React.Component { } blackAt(x, y) { - let square = this.pieceAt(x, y); + const square = this.pieceAt(x, y); if (square == null) { return false; } @@ -210,26 +204,31 @@ class Board extends React.Component { } isEnemyOf(piece, x, y) { - let pieceIsBlack = isBlack(piece); - return pieceIsBlack ? this.whiteAt(x, y) : this.blackAt(x, y); + return isBlack(piece) ? this.whiteAt(x, y) : this.blackAt(x, y); } getValidMovesAt(piece, x, y) { - var i; - var moves = []; - let tryAddMove = (x, y) => { + let moves = []; + const tryAddMove = (x, y) => { if (this.isValidXY(x, y)) { if(this.pieceAt(x, y) == null) { - moves.push({x: x, y: y}); + moves.push({x, y}); // Keep searching return 0; } else if (this.isEnemyOf(piece, x, y)) { - moves.push({x: x, y: y}); + moves.push({x, y}); } // Stop searching return 1; } }; + function addBunch(xFunc, yFunc, isUp) { + for (let i = 1; i < 8; i++) { + if(tryAddMove(xFunc(i), yFunc(i)) !== 0) { + break; + } + } + } if (isPawn(piece)) { let pieceIsBlack = isBlack(piece); @@ -240,78 +239,37 @@ class Board extends React.Component { let left = this.pieceAt(x - 1, y); let right = this.pieceAt(x + 1, y); if (left != null && left.passantable && left.color !== piece.color) { - moves.push({x: x - 1, y: y + shift, passant: {x: x - 1, y: y}}) + moves.push({x: x - 1, y: y + shift, passant: {x: x - 1, y}}) } if (right != null && right.passantable && right.color !== piece.color) { - moves.push({x: x + 1, y: y + shift, passant: {x: x + 1, y: y}}) + moves.push({x: x + 1, y: y + shift, passant: {x: x + 1, y}}) } - // Pawn moving two spaces becomes en-passantable if (this.pieceAt(x, y + shift) == null) { - moves.push({x: x, y: y + shift}); + moves.push({x, y: y + shift}); + // Pawn moving two spaces becomes en-passantable if (y === startLine && this.pieceAt(x, y + (shift * 2)) == null) { - moves.push({x: x, y: y + (shift * 2), passantable: true}); + moves.push({x, y: y + (shift * 2), passantable: true}); } } [x + 1, x - 1].forEach(x => { if (this.isValidXY(x, y + shift) && this.isEnemyOf(piece, x, y + shift)) { - moves.push({x: x, y: y + shift}); + moves.push({x, y: 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; - } - } + addBunch(n => {return x;}, n => {return y + n;}); + addBunch(n => {return x;}, n => {return y - n;}); + addBunch(n => {return x + n;}, n => {return y;}); + addBunch(n => {return x - n;}, n => {return y;}); } else if (isBishop(piece)) { - // 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; - } - } + addBunch(n => {return x + n;}, n => {return y + n;}); + addBunch(n => {return x - n;}, n => {return y + n;}); + addBunch(n => {return x + n;}, n => {return y - n;}); + addBunch(n => {return x - n;}, n => {return y - n;}); } else if (isQueen(piece)) { - let [rook, bishop] = isBlack(piece) ? - [new Piece(BLACK, ROOK), new Piece(BLACK, BISHOP)] : - [new Piece(WHITE, ROOK), new Piece(WHITE, BISHOP)]; + let [rook, bishop] = + [new Piece(piece.color, ROOK), new Piece(piece.color, BISHOP)]; moves = moves.concat(this.getValidMovesAt(rook, x, y)); moves = moves.concat(this.getValidMovesAt(bishop, x, y)); } else if (isKnight(piece)) { @@ -330,7 +288,7 @@ class Board extends React.Component { } findIndex(piece) { - for(var i = 0; i < this.squareCount(); i++) { + for(let i = 0; i < this.squareCount(); i++) { let check = this.state.squares[i]; if(check && check.type === piece.type && check.color === piece.color) { return i; @@ -343,24 +301,23 @@ class Board extends React.Component { let [pos1X, pos1Y] = this.getXandY(i1); let [pos2X, pos2Y] = this.getXandY(i2); - var a = pos1X - pos2X; + let a = pos1X - pos2X; a = a * a; - var b = pos1Y - pos2Y; + let b = pos1Y - pos2Y; b = b * b; return Math.sqrt(a + b); } inCheck(piece) { - var i; - var kingPos = this.getXandY(this.findIndex(piece)); + let kingPos = this.getXandY(this.findIndex(piece)); - for(i = 0; i < this.squareCount(); i++) { + for(let i = 0; i < this.squareCount(); i++) { let [x, y] = this.getXandY(i); if(this.isEnemyOf(piece, x, y)) { let moves = this.getValidMoves(i); - for(var j = 0; j < moves.length; j++) { + for(let j = 0; j < moves.length; j++) { if(moves[j].x === kingPos[0] && moves[j].y === kingPos[1]) { return piece; } @@ -376,27 +333,19 @@ class Board extends React.Component { return blackKing ? blackKing : this.inCheck(new Piece(WHITE, KING)); } - squareCount() { - return this.state.squares.length; - } - - squareAt(i) { - return i >= 0 && i < 64 ? this.state.squares[i] : null; - } - checkmate() { let checkedKing = this.whoInCheck(); if (checkedKing != null) { // For each square - for(var i = 0; i < this.squareCount(); i++) { + for(let i = 0; i < this.squareCount(); i++) { let piece = this.squareAt(i); // If that piece is on the checked team if (piece != null && isBlack(piece) === isBlack(checkedKing)) { // For each move of the above piece let moves = this.getValidMoves(i) - for(var move of moves) { + for(let move of moves) { // Copy the board - var board = this.clone(); + let 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); @@ -422,7 +371,7 @@ class Board extends React.Component { isValidMove(source, dest) { let [destX, destY] = this.getXandY(dest); - for (var move of this.getValidMoves(source)) { + for (let move of this.getValidMoves(source)) { if (destX === move.x && destY === move.y) { return move; } @@ -480,7 +429,7 @@ class Board extends React.Component { } if (this.isHoldingPiece()) { // Copy the board - var board = this.clone(); + let board = this.clone(); board.state.squares[i] = board.state.squares[board.heldPiece()]; board.state.squares[this.heldPiece()] = null; @@ -511,6 +460,7 @@ class Board extends React.Component { "#5D98E6" : plainBg; return ( this.handleClick(i)} bgColor={bgColor} @@ -518,42 +468,30 @@ class Board extends React.Component { ); } - row(row) { - let i = row * 8; + row(r) { + const i = r * 8; return ( -
- {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)} -
+
{ + [0, 1, 2, 3, 4, 5, 6, 7] + .map(n => this.renderSquare(n + i)) + }
); } render() { let checkMsg = this.whoInCheck() ? "Check! " : ""; let isCheckmate = this.checkmate(); - var namedPlayer = isCheckmate ? + let namedPlayer = isCheckmate ? !this.state.blackIsNext : this.state.blackIsNext let color = namedPlayer ? 'Black' : 'White'; const status = isCheckmate ? "Checkmate! " + color + " Wins!" : checkMsg + color + "'s Turn"; - var texttext = + let texttext =

{status}

- {this.row(0)} - {this.row(1)} - {this.row(2)} - {this.row(3)} - {this.row(4)} - {this.row(5)} - {this.row(6)} - {this.row(7)} + {[0, 1, 2, 3, 4, 5, 6, 7] + .map(n => this.row(n))}
; @@ -567,10 +505,6 @@ class Game extends React.Component { render() { return (
-
-
{/* status */}
-
    {/* TODO */}
-