Browser…​unplugged
Showcases of modern Browser technologies

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 Edge, 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 muss sie dennoch erlaub werden, denn Browser verwenden die Erlaubnis für Cookies auch, um die Verwendung dieses Features für eine Seite zu bestimmen. (Unter Sicherheitsgesichtspunkten macht das Sinn.)

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.