multiJSnake

Vor Kurzem habe ich ein Server-Client Snake in meine Liste von simplen Snake-Clonen [1, 2, 3, 4, 5, 6] eingereiht. Wie ich in meinem Artikel „RestfulSnake“ bereits angedeutet hatte, habe ich es um eine Multiplayer Komponente erweitert.

multiJSnake

Das grundlegende Design ist, dass der Server in festen Intervallen den nächsten Zeitschritt berechnet, den Spielzustand an alle Spieler schickt und auf Steuerkommandos von den Spielern lauscht. Dass der Server die gesamte Spiellogik verwaltet ist einerseits möglich, weil Snake einen relativ kleinen Zustand hat und nicht extrem empfindlich auf Latenzen reagiert. Außerdem können Spieler nicht (so einfach) schummeln, wenn der Spiel-Zustand auf dem Server berechnet wird.

Hier sehen wir auch schon das erste Problem für die alte Kommunikation per http: Da der Server nicht von sich aus Nachrichten an die Clients schicken kann, müssten die Clients pollen, was zu einem ganzen Haufen an Problemen führen kann (Poll kurz vor dem Tick zum nächsten Zeitschritt, Last, uneinheitliche Antwortzeiten und Races bei schlechtem Netzwerk, …) Genau für diesen Zweck sind aber Websocket-Verbindungen wie geschaffen! Da SpringBoot vernünftige Mechanismen mitbringt, um Websockets zu handhaben, ist die Umstellung sogar vergleichsweise schmerzfrei.

Das größte Problem ist nun, dass die meisten Leute „Rest“ als synonym für „json über http“ verstehen. Also muss ein neuer Name her — leider war „multisnake“ auf Heroku schon belegt, sodass ich mit „multiJSnake“ subtil darauf hinweise, dass Java und JavaScript das fundament bilden.

Ausprobiert werden kann es auf multijsnake.herokuapp.com und weitere Spieler können durch einen Einladungslink in die eigene Session eingeladen werden. Die Quellen sind natürlich auf Github: github.com/surt91/multiJSnake.

RestfulSnake

Vor wenigen Monaten hatte ich eine handvoll Bewerbungsgespräche. Von „Programmieraufgaben“, die durch das Erkennen der Fibonacci-Sequenz gelöst wurden bis zu „Wie viele Grashalme gibt es in deiner Heimatstadt?“ war alles dabei. Unter anderem auch „Wir glauben, dass du noch nie Java angefasst hast, deshalb sollst du ein Programm in Java schreiben, über das wir nächste Woche reden können!“

Also bin ich jetzt Java-Experte. Und das bedeutet, dass es Zeit ist für eine weitere Snake-Version [1, 2, 3, 4, 5].

Um besonders professionell zu wirken, habe ich mich für eine Client-Server-Architektur entschieden. Steuerkommandos werden per http post zum Server geschickt und in der Antwort steht die neue Position der Schlange. Das Backend nutzt Spring Boot und läuft auf einem Tomcat Server. Das Frontend besteht hauptsächlich aus dem Visualisierungs-Code von jsnake, aber echte Nerds werden es natürlich bevorzugen per curl zu spielen.

Normalerweise würde man es natürlich mittels Kubernetes und Docker auf AWS laufen lassen, aber stattdessen habe ich mich dafür entschieden Heroku zu nutzen, um ein kleines Unternehmen zu unterstützen. Auf multijsnake.herokuapp.com kann man also eine Partie spielen. Und die Quellen liegen wie immer auf GitHub

Überraschenderweise funktioniert das tatsächlich erstaunlich gut — solange die Latenz unter ~150 ms bleibt. Und dieses Design schreit geradezu nach einen Multiplayer-Modus…

Fira Code

Fira ist eine humanist Sans-Serif Schriftart, die für FirefoxOS entwickelt wurde, und wird zur Zeit für die Sans-Serif Typen, wie die Überschriften, in diesem Blog genutzt. Aber eigentlich geht es mir hier um Fira Mono die dicktengleiche Variante, die später mit Ligaturen (und mehr) zu Fira Code erweitert wurde. Ich sehe wie in genau diesem Moment im Geist des Lesers die Frage „Ligaturen in einer dicktengleichen Schrift?!“ auftaucht. Beziehungsweise „Ist da ein Tippfehler in dickengleich?“ oder „Was sind Ligaturen?“ falls der Leser kein Hobby-Typographie-Nerd ist.

Für letztere klären wir erstmal kurz die beiden Fragen:

Die Dickte bezeichnet die Breite der Metall-Lettern im klassischen Buchdruck; wenn sie für alle Glyphen gleich ist, stehen die Buchstaben immer in perfekt ausgerichteten Spalten untereinander, was von vielen für das Schreiben von Code bevorzugt wird. Die meisten Schreibmaschinen haben ebenfalls solche Schrifttypen verwendet.

fi Ligaturen sind Kontraktionen von mehreren Glyphen in eine Glyphe. Die typischen Ligaturen sind fi oder fl (allerdings nicht in der Schriftart, in der diese Zeilen geschrieben sind, weshalb ich hier ein Bild der fi Ligatur in Computer Modern zeige). Ein paar Ligaturen haben sich mittlerweile zu eigenen Symbolen entwickelt, wie das Kaufmannsund &, das ursprünglich eine Ligatur von et war (Latein für und). Aber dieses Konzept beißt sich anscheinend mit einer dicktengleichen Schrift, in der jeder Buchstabe die gleiche Breite haben soll. Der Clou an der Sache ist, dass Fira Code Ligaturen für übliche Ausdrücke für mathematische Symbole in Programmiersprachen wie >=, != und -> hat, die wie folgt dargestellt werden: >=, !=, ->. Nur zu, kopiert diese Symbole in einen Editor eurer Wahl, um zu sehen, wie sie sich wieder in ihre Bestandteile zerlegen

Nur eine Spielerei? Möglicherweise. Aber ich bin begeistert davon, und verwende Fira Code in allen Editoren, die Ligaturen unterstützen. Der Fairness halber sollte gesagt werden, dass Fira Code nicht als erstes Projekt diese Idee hatte. Hasklig beispielsweise hatte ihr erstes Release 2 Jahre vor der Veröffentlichung von Fira Code im Jahr 2014. Und mittlerweile sind Code-Ligaturen so ziemlich im Mainstream angekommen, seitdem JetBrains Mono im letzten Jahr von dem gleichnamigen IDE-Entwickler veröffentlicht wurde.

Zum Schluss möchte ich noch auf eine Kleinigkeit aufmerksam machen, die wohl nur die wenigsten Nutzer von Fira Code bewusst bemerken würden, die aber zweifellos demonstriert wie durchdacht diese Schrift ist. Denn Fira Code passt die Position von arithmetischen Symbolen an die benachbarten Glyphen an: ein + zwischen zwei Großbuchstaben ist höher als eines zwischen zwei Kleinbuchstaben.

A+A a+a, die Plus-Zeichen haben unterschiedliche vertikale Positionen

Ich persönlich weiß solche Details sehr wertzuschätzen. Es ist ein Beispiel dafür, dass alle Aspekte unserer modernen Gesellschaft, so wenige Gedanken wir uns auch darum machen und für wie trivial wir sie halten, zahllose Stunden Design und Entwicklung gekostet haben und ständig verbessert werden. Typographie — und um das klarzustellen, ich bin beileibe kein Experte — fasziniert mich. Schriften sind exakt, mit klar definierter Funktion, aber obwohl wir sie seit Jahrtausenden benutzen, ist ihre Entwicklung noch lange nicht abgeschlossen. Mit jedem neuen Medium gibt es neue Anforderungen. Marken haben steten Bedarf an individuellen Schrifttypen als Teil ihres Brandings. Für jede neue Anwendung gibt es andere Optimierungskriterien.

Und jedes Mal wenn in meinem Code = und > wieder zu => verschmelzen, freue ich mich erneut über die Magie.