search

Clariity / react-chessboard

The React Chessboard Library used at ChessOpenings.co.uk. Inspired and adapted from the unmaintained Chessboard.jsx.
https://react-chessboard.vercel.app
MIT License
340 stars 101 forks source link

showPromotionDialog prop always shows if autoPromoteToQueen=false #79

Closed DevArches closed 1 year ago

DevArches commented 1 year ago

Setting 

autoPromoteToQueen={false}
showPromotionDialog={false}

Will always show the promotion dialog if a pawn is moved to the end file if autoPromoteToQueen is set to false.

Clariity commented 1 year ago

autoPromoteToQueen={false}

This setting is the default and means that it will show the PromotionDialog

showPromotionDialog={false}

This setting is for manually showing and hiding the promotion dialog in real time, for example it can be used when implementing Click to Move as shown in the storybook example

In order to stop the promotion dialog showing when a pawn reaches to the end file, set autoPromoteToQueen={true}

DevArches commented 1 year ago

Ah interesting. My misunderstand. Thank you!

DevArches commented 1 year ago

Sorry, reopening this beacuse I have 2 boards I am using. One is a setup board where I want showPromotionDialog={false} to always be set to false so that I can move pieces from anywhere to anywhere. If I move a pawn as if it were a promotion even with showPromotionDialog={false}, the dialog will still open because of the autoPromoteToQueen={false} prop. But I would like to have it also not auto promote to queen. But also not show the promotion dialog. The wording of the props makes it seems like that would be possible.

The other case is in an actual game. It is very strange to set autoPromoteToQueen={true} when I am actually saying I want it to be false but be able to trigger the promotion dialog manually.

Just to make sure I understand what your previous comment was is that: if autoPromoteToQueen={false} the dialog will be shown if a pawn is moved to the end file. Even if showPromotionDialog={false} And if I want to manually control showPromotionDialog I need to set autoPromoteToQueen={true} but handle wether or not it actually promotes to queen or not on my end based on the choice of the promotion dialog.

Clariity commented 1 year ago

Unless you are implementing click to move, completely ignore the showPromotionDialog prop

For the setup board you should therefore set autoPromoteToQueen={true} and provide an onPieceDrop function that receives the queen piece in the 3rd argument and ignores it, changing it to be a pawn with whatever logic you please

For the actual game board, why would you want to trigger the promotion dialog manually?

if autoPromoteToQueen={false} the dialog will be shown if a pawn is moved to the end file.

Yes, correct

Even if showPromotionDialog={false}

showPromotionDialog is only for very special cases where you want to manually control in real time to opening and closing of the promotion dialog, this is not related to autoPromoteToQueen, please ignore it for your use cases

And if I want to manually control showPromotionDialog I need to set autoPromoteToQueen={true} but handle wether or not it actually promotes to queen or not on my end based on the choice of the promotion dialog.

I don't understand your use case, why not just use the default promotion dialog behaviour? no need to interact with either of these props then?

DevArches commented 1 year ago

Alright, thanks for the help! The issue is that I had both drag/drop and click to move implemented. So some things were conflicting with eachother. I just needed to conditionaly set the props for showPromotionDialog and onPromotionPieceSelect. Closing again.

kul-sudo commented 1 year ago

I still do not quite get. The dialog is not supposed to pop up when a promotion is illegal, right? But when it is legal, I want to choose which piece to promote to on my own.

DevArches commented 1 year ago

@kul-sudo I handle the logic of

The dialog is not supposed to pop up when a promotion is illegal, right?

With my own logic, which I also think is currently the intended way to do it. As for

But when it is legal, I want to choose which piece to promote to on my own.

The piece that you selected from the piece promotion dialog will be the piece returned in the onPieceDrop to be used in your move logic.

kul-sudo commented 1 year ago

@kul-sudo I handle the logic of

The dialog is not supposed to pop up when a promotion is illegal, right?

With my own logic, which I also think is currently the intended way to do it. As for

But when it is legal, I want to choose which piece to promote to on my own.

The piece that you selected from the piece promotion dialog will be the piece returned in the onPieceDrop to be used in your move logic.

Sorry for moving you between two issues, but could you give me the source code of your own logic, please?

DevArches commented 1 year ago

I'll help where I can on the 2 different issues seperately. But I can't post the code because its my companies code. But how I handled it is

kul-sudo commented 1 year ago

I'll help where I can on the 2 different issues seperately. But I can't post the code because its my companies code. But how I handled it is

  • onPieceDragBegin I set a state with the piece and source square. I have a function to determine that pieces' possible legal moves.
  • then onDragOverSquare I check if the square is one of those legal squares. If not I had the dialog

Hope this correct behaviour gets added to the library by default.

DevArches commented 1 year ago

I might have to check but I believe in the PR for the promotion dialog there was as usePromotion hook the was removed since I think Clariity didnt want that to be in by default actually. So I doubt it will come. But you can always copy that old hook and see if you can get it working. I believe it even handled premoves

kul-sudo commented 1 year ago

I might have to check but I believe in the PR for the promotion dialog there was as usePromotion hook the was removed since I think Clariity didnt want that to be in by default actually. So I doubt it will come. But you can always copy that old hook and see if you can get it working. I believe it even handled premoves

Which commit was it deleted in? I am asking, because I need to browse the source code of this exact commit.

DevArches commented 1 year ago

feat: simplify promotion

GabrielCTroia commented 8 months ago

I still have trouble understanding the behavior of the promotion dialog. First of all there are too many props that deal with it, and the default/basic use case isn't documented well.

I think there needs to be at least a story for the basic use case as well as for more "advanced" use cases such as click to move (which imho is still very basic as well).

Finally, from what I read in the comments above the behavior should be "if autoPromoteToQueen={false} the dialog will be shown if a pawn is moved to the end file." (see https://github.com/Clariity/react-chessboard/issues/79#issuecomment-1600479570) yet that is not what I experience. If I put a pawn on the last file there is no promo dialog opening up.

I suggest the API for this gets simplified to something along the lines of:

And that's it! The developer then has the ability to control the promo dialog any way (s)he wants without the react-chessboard interfering, using chess.js as the engine or any other chess or game variant they desire. Yes it's a bit more work on the implementation side but I think it's worth in exchange for having all of the control.

GabrielCTroia commented 8 months ago

Also, is there a way to change the color for the pieces shown in the dialog? They always seem to be white.