Most pieces move as expected (pawns need work)
Now able to build and publish as static
This commit is contained in:
Sage Vaillancourt
parent
21951b4891
commit
14956ab4d5
|
|
@ -34,5 +34,6 @@
|
|||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
},
|
||||
"homepage": "./"
|
||||
}
|
||||
|
|
|
|||
306
src/index.js
306
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,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]) {
|
||||
return;
|
||||
}
|
||||
squares[i] = this.state.xIsNext ? 'Black' : 'White';
|
||||
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,
|
||||
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;
|
||||
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 =
|
||||
<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>
|
||||
;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue