Store piece sprites as vector graphics

[tsevasa]

Lichess stores all its piece sprites as vector graphics (see here, for example) and each piece is less than 1KB in file size. In contrast, our spritesheet is a png file and takes up 1MB in total.

We should also store piece sprites in svg format.

[Naviary2]

This would be great, and a huge performance boost!! As long as we can convert the vector graphics back into textures on startup!

[Naviary2]

All piece's have now been converted to an SVG! Next we can take steps towards using those svgs and re-forming the spritesheet on the client-side with them!

See discussion here
https://discord.com/channels/1114425729569017918/1261070585476288674

[Naviary2]

I imagine we would group all the classical pieces into one http request (as svgs are just text afterall, there has to be some way to split them into individual svgs eith javascript afterward), and other fairy pieces may or may not be in groups! Atleast, a pair of a black and white piece should atleast be merged into one request.

[Heinrich-XIAO]

I imagine we would group all the classical pieces into one http request (as svgs are just text afterall, there has to be some way to split them into individual svgs eith javascript afterward), and other fairy pieces may or may not be in groups! Atleast, a pair of a black and white piece should atleast be merged into one request.

We could combine them in one big JSON object or something.

[Heinrich-XIAO]

[Naviary2]

Is this the time it takes the request the spritesheet?

[Heinrich-XIAO]

Is this the time it takes the request the spritesheet?

Yeah. The 1MB file.

[Naviary2]

We don't even need to combine them all. If 95% of games are classical, we can just merge all the classical piece's svgs into one request, and only send the other fairy pieces when needed

[Naviary2]

All pieces have already been converted into SVG's and been compressed. All we need to do from here is:

• Write a method JavaScript method that will take a list of SVGs and create a spritesheet PNG from them (maybe could use inspiration from checkerboardgenerator.js?? Idk, ask ChatGPT how to do this)
  EDIT: Like this
• Merge all the classical piece SVGs into one API request.
• Create APIs for fetching all the other fairy pieces.