Support for alternatives when loading custom chess pieces (PNGs, individual SVGs)

[vesper8]

I would like to use the pieces from these chess sets: https://commons.wikimedia.org/wiki/Category:SVG_chess_pieces/Maurizio_Monge

I've been trying to make it work with the way you've set up your SVG sprite that includes all pieces in one file.. and I'm having a very hard time. I've found two other dozen sets of chess SVGs (here:https://github.com/supertorpe/chessendgametraining/tree/master/src/assets/pieces) that I would love to play with and possibly use but making it work with your format is very difficult.

It would have been lovely if you added support for alternatives when using custom piece sets.. such as allowing us to pass individual svgs or individual pngs.

Or some kind of converter script that accepts the individual SVGs and resizes them and constructs the sprite SVG in the format usable by cm-chessboard.

I know it's a shot in the dark and asking for a lot.. but figured it doesn't hurt to ask. In its current form.. it's just rather hard to work with any other custom set.

If you have tips on how to go about it, such as a handy tool to use, that adds to your comment here #26 (comment), I'd love to hear it.

Many thanks

[vesper8]

Being able to assign individual SVGs for each of the black and white pieces would be such a game changer! CM-Chessboard is already a very popular library but being restricted to only a few chess pieces styles I think is holding it back from becoming the de facto JS chessboard! Don't you agree @shaack ?

[shaack]

I don't think that individual pieces sets for b and w would be necessary. But adding more sets is easy, there are many in the lichess repository which can be integrated.

[vesper8]

I would still love to see this kind of support added. Currently adding more sets is not what I would call easy as you must take 10+ individual SVGs and build a single SVG sprite which to an SVG expert might not be so hard but because of issues with scale, coordinates translation in the SVG paths, and the difficulty in perfectly aligning the pieces on the SVG sprite.. in the best case scenario where the individual SVGs follow a standard, as perhaps in the case of Lichess, this may be not that hard, but when wanting to use other sets such as the ones I link to in my first post, it's very hard indeed.

[deverac]

https://github.com/deverac/piece-packager may be of use to this feature request. (Full disclosure: It's a repository of mine.)

The repo contains over 80 prepackaged chess sets that can be used in cm-chessboard. If color variations are included, the total number of sets exceeds 280.

1. Use the viewer to find a set you like.
2. Save the link at the top of the page to a file in your cm-chessboard/assets/pieces directory.
3. Update your cm-chessboard config file to use the file you downloaded. e.g. {style: { pieces: { file: 'pieces/kosal.svg' } } }

If you have Python3 installed, you can bundle your own PNG and/or SVG files into a single SVG file that can be used in cm-chessboard.

1. Copy the twelve files containing the individual chess pieces to a directory.
2. Be sure the filenames identify the piece they contain. (e.g. 'black_queen.svg' , 'bq.svg', 'qb.svg')
3. Run ./build.sh ./path/to/dir (On Windows, python3 piece-packager.py .\path\to\dir should work, but is untested.)

This will create a single SVG file (in the out directory) containing data from the twelve files you supplied.

@shaack, If you would prefer people not link to other repos, please feel free to delete this comment. You are also welcome to copy and modify any and all parts of piece-packager .

[shaack]

That's very nice. I would like to add a link to your repository to the cm-chessboard documentation, if that is OK for you. As far as I understand are the packed sprites in this folder? https://github.com/deverac/piece-packager/tree/main/out/svg

[deverac]

You are welcome to link to anything you wish.

You are correct about the location of the packed sprites (they are in the ./main/out/svg folder).

The pieces that @vesper8 wanted (https://commons.wikimedia.org/wiki/Category:SVG_chess_pieces/Maurizio_Monge) are named fantasy (which has three other variations).

[vesper8]

@deverac thank you for making this!! You're a rock star!