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

Support for piece images #26

Closed rdeyo1129 closed 3 years ago

rdeyo1129 commented 3 years ago

Can someone help me understand what's going on with the .svg file and how they are being pulled as separate images from the one file? Is it going to be possible to use separate image files for each piece? My endgame is to have 2 different themes at the same time where for example the black piece theme is pulled from chessboard-sprite-staunty.svg and the white piece theme is pulled from chessboard-sprite.svg. Thanks in advance for any help and sorry if this is not an appropriate post for issues.

shaack commented 3 years ago

Hi, thanks for the question. The pieces sprite has to be 40x40 in size and every piece has to be at position (0,0). In the SVG the pieces must have ids, like id="br" (black rook) or id="wn" (white knight). Look in the SVG with a text editor, you can read it like HTML. With these ids, the pieces can be referenced and displayed via "use" <use href="/path/to/chessboard-sprite.svg#br"/> (see: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). Also the markers must be in the SVG (id="marker1", id="marker2"). For using different sprites for white and black you have to fork and modify the core code, this is not possible via API.

rdeyo1129 commented 3 years ago

Little late responding this but it helped me, thank you very much.