search

shaack / cm-chessboard

A JavaScript chessboard without dependencies. Rendered in SVG, coded in ES6. Views FEN, handles move input, animated, responsive, expandable
MIT License
216 stars 68 forks source link

showPromotionDialog() always cancels #126

Closed djeetee closed 1 year ago

djeetee commented 1 year ago

Hey Stefan,

showPromotionDialog() pops up the dialog as expected however, clicking any promotion piece causes the dialog to cancel (returns null).

I noticed that the dialog looks different from the one in the cm-chessboard example. Mine has a black background and hovering over the pieces does not trigger the highlight.

I thought it's picking up the color of the page which black. changing page background did not make a difference.

I have feeling that it is a layering issue. I am not setting z-index for any of the page elements.

Any thoughts on what is going on?

image
shaack commented 1 year ago

Hi @djeetee, it looks, like you did not include the CSS for the dialog: <link rel="stylesheet" href="../../assets/extensions/promotion-dialog/promotion-dialog.css"/> You can also include the SCSS (which is in the same folder) to your main SCSS, if it fits better.

The main style, to get it working should be

svg.cm-chessboard .promotion-dialog-group .piece {
  pointer-events: none; 
}
djeetee commented 1 year ago

Bingo! That did it. Thank you for the prompt reply.