diff --git a/src/index.js b/src/index.js index 6fb66e1..575878b 100644 --- a/src/index.js +++ b/src/index.js @@ -2,21 +2,15 @@ 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, +const BLACK = 0; +const WHITE = 1; - BlackPawn: 6, - BlackRook: 7, - BlackKnight: 8, - BlackBishop: 9, - BlackQueen: 10, - BlackKing: 11 -}; +const PAWN = 0; +const ROOK = 1; +const KNIGHT = 2; +const BISHOP = 3; +const QUEEN = 4; +const KING = 5; const Images = [ './white_pawn.svg', @@ -35,35 +29,43 @@ const Images = [ ]; function isBlack(piece) { - return piece >= Pieces.BlackPawn; + return piece != null && piece.color === BLACK; } function isWhite(piece) { - return !isBlack(piece); + return piece != null && piece.color === WHITE; } function isPawn(piece) { - return piece === Pieces.WhitePawn || piece === Pieces.BlackPawn; + return piece != null && piece.type === PAWN; } function isRook(piece) { - return piece === Pieces.WhiteRook || piece === Pieces.BlackRook; + return piece != null && piece.type === ROOK; } function isBishop(piece) { - return piece === Pieces.WhiteBishop || piece === Pieces.BlackBishop; + return piece != null && piece.type === BISHOP; } function isQueen(piece) { - return piece === Pieces.WhiteQueen || piece === Pieces.BlackQueen; + return piece != null && piece.type === QUEEN; } function isKnight(piece) { - return piece === Pieces.WhiteKnight || piece === Pieces.BlackKnight; + return piece != null && piece.type === KNIGHT; } function isKing(piece) { - return piece === Pieces.WhiteKing || piece === Pieces.BlackKing; + return piece != null && piece.type === KING; +} + +function imageFromPiece(piece) { + if (piece) { + let image = piece.color === WHITE ? piece.type : piece.type + 6; + return Images[image]; + } + return null; } function Square(props) { @@ -72,7 +74,7 @@ function Square(props) { className="square" onClick={props.onClick} style={{ - backgroundImage: `url(${Images[props.value]})`, + backgroundImage: `url(${imageFromPiece(props.piece)})`, backgroundSize: `100%`, backgroundColor: props.bgColor, }} @@ -81,6 +83,14 @@ function Square(props) { ); } +class Piece { + constructor(color, type) { + this.color = color; + this.type = type; + } + +} + class Board extends React.Component { constructor(props) { super(props); @@ -102,31 +112,32 @@ class Board extends React.Component { } reset() { + console.log("RESET"); let whiteRow = [ - Pieces.WhiteRook, - Pieces.WhiteKnight, - Pieces.WhiteBishop, - Pieces.WhiteQueen, - Pieces.WhiteKing, - Pieces.WhiteBishop, - Pieces.WhiteKnight, - Pieces.WhiteRook + 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 = [ - Pieces.BlackRook, - Pieces.BlackKnight, - Pieces.BlackBishop, - Pieces.BlackQueen, - Pieces.BlackKing, - Pieces.BlackBishop, - Pieces.BlackKnight, - Pieces.BlackRook + 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 = whiteRow.slice(); - squares = squares.concat(Array(8).fill(Pieces.WhitePawn)); + let squares = whiteRow; + squares = squares.concat(Array(8).fill(new Piece(WHITE, PAWN))); squares = squares.concat(Array(32).fill(null)); - squares = squares.concat(Array(8).fill(Pieces.BlackPawn)); - squares = squares.concat(blackRow.slice()); + squares = squares.concat(Array(8).fill(new Piece(BLACK, PAWN))); + squares = squares.concat(blackRow); return squares; } @@ -192,7 +203,7 @@ class Board extends React.Component { moves.push([x, y + (shift * 2)]); } } - [x + 1, x - 1].forEach((x) => { + [x + 1, x - 1].forEach(x => { if (this.isEnemyOf(piece, x, y + shift)) { moves.push([x, y + shift]); } @@ -249,8 +260,8 @@ class Board extends React.Component { } } else if (isQueen(piece)) { let [rook, bishop] = isBlack(piece) ? - [Pieces.BlackRook, Pieces.BlackBishop] : - [Pieces.WhiteRook, Pieces.WhiteBishop]; + [new Piece(BLACK, ROOK), new Piece(BLACK, BISHOP)] : + [new Piece(WHITE, ROOK), new Piece(WHITE, BISHOP)]; moves = moves.concat(this.getValidMovesAt(rook, x, y)); moves = moves.concat(this.getValidMovesAt(bishop, x, y)); } else if (isKnight(piece)) { @@ -258,23 +269,44 @@ class Board extends React.Component { [2, 1], [2, -1], [-2, 1], [-2, -1], [1, 2], [1, -2], [-1, 2], [-1, -2], ]; - deltas.forEach((delta) => tryAddMove(x + delta[0], y + delta[1])); + deltas.forEach(delta => tryAddMove(x + delta[0], y + delta[1])); } else if (isKing(piece)) { let deltas = [ [1, 1], [1, -1], [-1, 1], [-1, -1], [0, 1], [0, -1], [1, 0], [-1, 0] ]; - deltas.forEach((delta) => tryAddMove(x + delta[0], y + delta[1])); + deltas.forEach(delta => tryAddMove(x + delta[0], y + delta[1])); } return moves; } - inCheck(piece) { - var kingPos; + findIndex(piece) { + console.log("founding"); for(var i = 0; i < this.squareCount(); i++) { - if(this.state.squares[i] === piece) { - kingPos = this.getXandY(i); + let check = this.state.squares[i]; + if(check && check.type === piece.type && check.color === piece.color) { + console.log("found"); + return i; } } + return null; + } + + distanceBetween(i1, i2) { + let [pos1X, pos1Y] = this.getXandY(i1); + let [pos2X, pos2Y] = this.getXandY(i2); + + var a = pos1X - pos2X; + a = a * a; + + var b = pos1Y - pos2Y; + b = b * b; + + return Math.sqrt(a + b); + } + + inCheck(piece) { + var i; + var kingPos = this.getXandY(this.findIndex(piece)); for(i = 0; i < this.squareCount(); i++) { let [x, y] = this.getXandY(i); @@ -292,8 +324,8 @@ class Board extends React.Component { } whoInCheck() { - let blackKing = this.inCheck(Pieces.BlackKing); - return blackKing ? blackKing : this.inCheck(Pieces.WhiteKing); + let blackKing = this.inCheck(new Piece(BLACK, KING)); + return blackKing ? blackKing : this.inCheck(new Piece(WHITE, KING)); } squareCount() { @@ -420,7 +452,7 @@ class Board extends React.Component { "#5D98E6" : plainBg; return ( this.handleClick(i)} bgColor={bgColor} />