Pawn can capture en passant

[faizalzakaria]

https://en.wikipedia.org/wiki/En_passant

[kbanico]

Hi Faizal Here is my attempt. Currently I don't know how to call this function after a drag ends and i'm not sure how to update the images but here is what I have so far

    enPassant(piece,pieceX,pieceY,board){
    //current piece color
    const color = piece.isWhite;
    //need to know how to call this when dragging ends
    //this may not be checking edge cases for x
    if((board[pieceX][pieceY] == board[pieceX][3] && !piece.firstMove)){
      //pawn is in the fifth rank and its the pawns first move
        if(board[pieceX + 1][pieceY] || board[pieceX - 1][pieceY]){
          //if there is something beside us
          let opponent = board[pieceX + 1][pieceY] ? board[pieceX + 1][pieceY] : board[pieceX - 1][pieceY]
          //capture logic here
          if(opponent.isWhite != color){
            console.log("capture " + opponent)
            opponent = undefined;
            console.log("after capture " + opponent)
          }

        }

      return true;
    }else{
      return false
    }
  }

[faizalzakaria]

Hey @kbanico ,

This briefly how the drag drop works in here.

There are 2 things

• DragSource (e.g: Pawn, Knight, ..)
• DragTarget (e.g: BoardSquare)

Both has connector and collector.

• Connector has predefined functions (depends on the type, DragSource or DragTarget) that you can overwrite. More details here, http://react-dnd.github.io/react-dnd/docs-drag-source.html , http://react-dnd.github.io/react-dnd/docs-drop-target.html .
• Collector, is for you to return a state, that you can use in your rendering. This is how you read the state in the render method, https://github.com/faizalzakaria/react-chess-app/blob/master/src/components/Pawn.js#L44 .

DragSource

Example, https://github.com/faizalzakaria/react-chess-app/blob/master/src/components/Pawn.js#L6

@DragSource(PieceTypes.PAWN, pieceSource, pieceCollect)
export default class Pawn extends Component {
  ....
}

You have pieceSource (connector), pieceCollect (collector)

DragTarget

Example, https://github.com/faizalzakaria/react-chess-app/blob/master/src/components/BoardSquare.js#L30

@DropTarget(Object.values(PieceTypes), squareTarget, collect)
export default class BoardSquare extends Component {
  ....
}

You have squareTarget (connector), collect (collector).

---

You can call your enPassant method in the validMove. validMove will be called here, https://github.com/faizalzakaria/react-chess-app/blob/master/src/components/BoardSquare.js#L11 . Likely I should rename the function to validMove instead of canDrop.

Another word validMove will be called as soon as you start dragging the piece.

Few notes on your function, you should consider checking it while dragging, rather after the piece is dropped. As you won't be even able to drop on an illegal square at all.