Showcases of modern Browser technologies


Sorting cards is a popular pastime. As far as I am concerened, re-programming it for the web is just the same. But finding a solution with good performance prooved to be more difficult than it first seemed.

I had designed the card faces as SVG . Thus using the vector grafics format also for displaying the game seemed like a evident solution. Only the cards need to be moved by drag & drop – and that is where all the browsers still fail to render a fluent movement. Neither Chrome, nor Internet Explorer, and certainly not Firefox. So in the end it had to be PNG dot grafics, pre-loaded to the browser offline cache  for optimal loading performance.

Local Web Storage  is employed to retain the last game played and the language of the user interface. This avoids cookies, although it seems some browsers use cookie settings to determine whether they can use that feature for a site.

The game page uses several CSS3 techniques like transforms  and flexbox . (including a fallback for IE 9) Presentation is realised with the D3 framework , the game engine is written in .

The rules of the individual games are loaded asynchronously as JSON files. For their validation I have developed a JSON-Schema .

All sources are published at Github  and can be downloaded and reused under the terms of a copyleft licence.