Patience

Karten sortieren ist ein beliebter Zeitvertreib. Das Spiel für das Web nachzuprogrogrammieren ist (zumindest was mich angeht) auch einer. Eine performante Lösung zu finden, ist aber schwieriger, als es auf den ersten Blick aussieht.

Der Kartensatz ist von mir als SVG gezeichnet worden. Da wäre es doch naheliegend gewesen, die Fähigkeiten dieses Vektorgrafik-Formates auch im Spiel zu nutzen. Darstellen können es inzwischen ja alle Browser. Aber die Karten-Elemente müssen per Drag&Drop verschoben werden, und daran beißen sich die Browser immer noch die Zähne aus: eine flüssige Spielbewegung ist nicht zu erreichen. Nicht mit Chrome, nicht mit Internet Explorer, und schon gar nicht mit Firefox. Deshalb blieb es am Ende bei PNG-Pixelgrafiken, die zur Verbesserung des Ladeverhaltens in den Offline-Cache des Browsers vorab geladen werden.

Im lokalen Web Storage wird festgehalten, welches Spiel zuletzt gespielt wurde, und in welcher Sprache das Benutzerinterface angezeigt werden soll. Damit wird die Verwendung von Cookies vermieden, allerdings scheint es, dass manche Browser die Enstellungen für Cookies auch verwenden, um die Erlaubnis zur Verwendung dieses FEatures für eine Seite zu bestimmen.

Die Spielseite nutzt verschiedene CSS3-Techniken, wie etwa Transformationen und Flexbox (mit einer Rückfallösung für den IE 9). Die Darstellung ist mit dem D3-Framework realisiert, die Engine habe ich mit Coffeescript geschrieben.

Die Spielregeln der einzelnen Patiencen werden als JSON-Dateien asynchron nachgeladen. Dafür habe ich ein JSON-Schema zur Validierung entwickelt.

Die Quellen sind auf Github veröffentlicht und unter einer Copyleft-Lizenz herunterladbar.