From 14956ab4d5228d16456fd6581b6afc08b3c99125 Mon Sep 17 00:00:00 2001 From: Sage Vaillancourt Date: Mon, 28 Dec 2020 15:12:35 -0500 Subject: [PATCH] Most pieces move as expected (pawns need work) Now able to build and publish as static --- package.json | 3 +- src/index.js | 342 ++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 301 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 1b4251c..2963b91 100644 --- a/package.json +++ b/package.json @@ -34,5 +34,6 @@ "last 1 firefox version", "last 1 safari version" ] - } + }, + "homepage": "./" } diff --git a/src/index.js b/src/index.js index 28f481b..b06b33d 100644 --- a/src/index.js +++ b/src/index.js @@ -3,24 +3,72 @@ import ReactDOM from 'react-dom'; import './index.css'; const Pieces = { - WhitePawn: './white_pawn.png', - WhiteRook: './white_rook.png', - WhiteKnight: './white_knight.png', - WhiteBishop: './white_bishop.png', - WhiteQueen: './white_queen.png', - WhiteKing: './white_king.png', + WhitePawn: 0, + WhiteRook: 1, + WhiteKnight: 2, + WhiteBishop: 3, + WhiteQueen: 4, + WhiteKing: 5, - BlackPawn: './black_pawn.png', - BlackRook: './black_rook.png', - BlackKnight: './black_knight.png', - BlackBishop: './black_bishop.png', - BlackQueen: './black_queen.png', - BlackKing: './black_king.png', + BlackPawn: 6, + BlackRook: 7, + BlackKnight: 8, + BlackBishop: 9, + BlackQueen: 10, + 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,31 +95,42 @@ 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, - Pieces.WhiteKnight, - Pieces.WhiteBishop, - Pieces.WhiteQueen, - Pieces.WhiteKing, - Pieces.WhiteBishop, - Pieces.WhiteKnight, - Pieces.WhiteRook + 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 + 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)); @@ -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]) { - return; + 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, + }); + } } - squares[i] = this.state.xIsNext ? 'Black' : 'White'; - this.setState({ - squares: squares, - xIsNext: !this.state.xIsNext, - }); } renderSquare(i) { @@ -120,12 +378,9 @@ class Board extends React.Component { render() { const winner = calculateWinner(this.state.squares); - let status; - if (winner) { - status = 'Winner: ' + winner; - } else { - status = 'Next player: ' + (this.state.xIsNext ? 'Black' : 'White'); - } + let status = winner ? + 'Winner: ' + winner : + 'Next player: ' + (this.state.blackIsNext ? 'Black' : 'White'); var texttext =
@@ -138,6 +393,7 @@ class Board extends React.Component { {this.row(5)} {this.row(6)} {this.row(7)} +

{Images[this.state.hand.heldPiece]}

;