Need to introduce an event before drag start, i.e. "onClick" about chessboardjsx HOT 12 CLOSED

Use case 1:

I'm looking at chess.com and they record the piece that was clicked and allow you to move the piece by clicking the target square. This is a very nice feature(I use it all of the time on my ipad playing on chess.com)and wasn't implemented in chessboard.js but I definitely want it for Chessboard.jsx.

I would then need to use hover for styling the desired target

So have some sort of unique hover styling over a desired target. This seems like a useful feature

Use case 2:
While developing a play board, I want to prevent the user from dragging a piece that is not allowed to be moved

Ok, so as of now draggable prop is for the entire board, that is not going to work for your use case.

from chessboardjsx.

@willb335 Yes, I expect that draggable would apply to the whole board... this is a good thing and I need it too :)

Here though, I need to make the decision on a piece-by-piece basis at the moment dragging begins on a piece. Some pieces are valid to drag (white's move) and some pieces have valid moves (king has no adjacent empty squares) and so I want to prevent the drag operation from even starting.

from chessboardjsx.

Ok, got it. I'll use your suggested signature. Not sure when I'll start on this. I have some time this coming weekend

from chessboardjsx.

perhaps draggable prop could take a boolean for the whole board or an object for specific squares. draggable={ {'e5': false } }.

from chessboardjsx.

@csharptest
a1ee12f
I provided the onClick feature and updated Demo.js. Take a look at 'With Move Validation.'

from chessboardjsx.

I was looking for this feature for use case 2.

I can't find the Demo.js being referred to here. Neither the src/Demo.js in this repository nor the one at https://codesandbox.io/s/lp32ojqzqm?from-embed seems to have anything relevant.

Does it provide a way to reject picking up the piece? I'm thinking the handler should return true if the piece is allowed to be picked up and false if not.

from chessboardjsx.

@furrykef
After looking at this again I realized I misunderstood use case 2 from @csharptest.

see #28

I used: Signature: function( { piece: string, sourceSquare: string } ) => bool

Please check out Demo.js again with the 'Conditionally Disable Drag' demo

Please let me know if this is a solution for you

from chessboardjsx.

As I said before, I don't know where the Demo.js you refer to is.

from chessboardjsx.

Ok, if you fetch the allow-drag branch I committed in #28 and then run npm run start that will load the Demo.js component(usually called App.js, it's the root component)

If you want to see the implementation code for allowDrag then go to https://github.com/willb335/chessboardjsx/blob/allow-drag/src/integrations/AllowDrag.js

from chessboardjsx.

That looks fine to me. Thanks.

One quibble: I notice the mouse cursor changes to a hand icon when you mouseover a piece, whether that piece is draggable or not. I don't think it should do that when you mouseover a non-draggable piece. It's not remotely an urgent matter for me, though.

from chessboardjsx.

Ok, I'll look into fixing that

from chessboardjsx.

cursor: 'not-allowed' implemented for non-draggable pieces and will be available for 2.0.1

from chessboardjsx.