Wrote A Solitaire Clone
Not too much to explain. Felt like playing around with an SVG animation library and Solitaire seemed like a good use. Used Surplus to render the UI, but bulk of the work leveraged svg.js.
Animation management turned out to be a complete pain. Took a few attempts before I could decouple the animation system from the core game state. Initially just treated the animation as a side effect of state changes, but this approach fizzled out for a few reasons. I couldn’t treat animations as pure side effects because of dependencies between related animations. I can’t animate a card moving from pile A to pile C, when it first needs to move from pile B to pile A.
SVG.js caused a few problems as well. The final transition coordinates were terrible due to floating precision. I would try to animate something from (0,0) to (50,5), but the final position would be ( 49.999937,5.0000023). If it was 1 card this probably wouldn’t be perceptible, but this would happen to a whole stack of cards and the pile would look wonky.
The only way I could fix it was to implement an end-of-animation system where I statically positioned the cards using Surplus.
Probably the most surprising thing was how awful SVG animation performance could be. The SVG card deck I used had some pretty complex designs and trying to animate several of these cards at once was not possible at 60fps. It might be an issue with linux graphical performance, but I eventually added support for highish-res PNG cards just so the animations could look acceptable.
I think it’s a general problem with SVG. Noticed a similar issue with Tetris on mobile.