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 haben sich die Browser über lange Jahre die Zähne ausgebissen: eine flüssige Spielbewegung war nicht zu erreichen. Nicht mit Chrome, nicht mit Edge, und schon gar nicht mit Firefox. Deshalb blieb es am Ende lange bei PNG-Pixelgrafiken. Erst 2020, sieben Jahre nach der ersten Veröffentlichung, kann ich die Vektorgrafiken verwenden. Zur Verbesserung der Ladezeiten werden diese als Daten-URLs im lokalen Web Storage  zwischengespeichert.

Dort wird auch 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 erlaubt 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.