Wochenrückblick: Hochwertiges UI, lokalisierbare Website und Ausbau der Sicherheit

Textur-Erweiterungen

Ein allumfassendes Thema sind weiterhin unsere Nutzerinterfaces auf den verschiedenen Servern. Nach ersten Gehversuchen, Tests und Experimenten sind wir hier inzwischen in der produktiven Phase angekommen und erleben nahezu täglich neue visuelle Details und Verbesserungen.

Hierbei arbeiten unsere Entwickler eng mit unseren Grafikern zusammen, um (anders als ursprünglich geplant) bereits zum Release nahezu alle Menüs sowohl inhaltlich wie auch visuell aufzupolieren.

Web-Entwicklung

Neben der Infrastruktur ist die Website wegen ihrer Schlüsselrolle beim Managen der Spieler-Accounts und dem Verbinden der Community eine der letzten Hürden, die wir vor Release gemeistert haben müssen. Umso erfreulicher ist es, dass wir hier in den letzten Wochen gewaltige Fortschritte erleben! Wir gehen in diesem Rückblick feiner auf die einzelnen Schritte ein, als gewohnt, um einen Eindruck dafür zu vermitteln, mit welchem Aufwand die neue, technische Basis der Website einhergeht. Werfen wir mal einen Blick in die Details:

Component Library Structure

Bisher wurden Komponenten der Webseite (z.B. Textelemente, Karten oder Knöpfe) nach dem Atomic Design zu strukturiert. Da darunter die Übersichtlichkeit litt, haben wir uns dazu entschlossen, allen Komponenten in eine gemeinsame Liste zu strukturieren und ihnen einen einheitlichen Präfix zuzuweisen (jc-).

Wir folgen hiermit der Empfehlung von Vue (sowie EsLint), eigenen Komponenten Namen aus mindestens zwei Teilen zu geben. So sind diese besser von HTML und Vue Komponenten zu unterscheiden.

Internalization

Um die Website für verschiedene Sprachen fit zu machen, wurde nun eine Bibliothek für die Internationalisierung in die Webseite eingepflegt. Wie in den Screenshots zu sehen, wurden die bestehenden Texte durch Schlüssel ersetzt. Beim Aufrufen der Website, werden diese dann in die Sprache des Nutzers aufgelöst, falls hierfür Übersetzungen hinterlegt wurden. Zunächst fokussieren wir uns dabei auf Deutsch und Englisch, wollen in der Zukunft aber (auch durch Übersetzungsprojekte mit der Community) weitere Sprachen ergänzen.

Charon

Auch unsere API Charon hat weitere Updates bekommen: Wir haben jetzt einheitliche Endpunkte für eingeloggte und nicht-eingeloggte Nutzer und filtern entsprechend über die Berechtigungen, was zurückgegeben wird. So erhält jeder Nutzer der API nur die Resultate, die er auch betrachten darf. Darüber hinaus haben wir die Einteilung der Inhalte über mehrere Seiten (Pagination) so verbessert, dass sie nun auch mit dem Fall umgehen kann, dass während des Blätterns ein neues Element hinzugefügt oder entfernt wurde.

File Manager

Mit der verbesserten API konnten wir nun die Grundfunktionen des File Managers weitestgehend fertigstellen. Mit ihm ist es möglich, Bilder und andere Dateien über Charon zu SeaweedFS (unserem Storage für die Dateien) hochzuladen und diese zum Beispiel in einen Wochenrückblick einzubinden. Die Dateien können über den File Manager nun bereits eingesehen, bearbeitet und gelöscht werden.

Editor Image Extension

Anschließend haben wir eine Erweiterung geschrieben, die es ermöglicht, Bilder in Form einer Galerie mit Bildunterschriften anzeigen zu können. Dabei wird für die Darstellung der Bilder eine Vue Komponente genutzt, die in der Lage ist, unveröffentlichte Bilder nur denjenigen anzuzeigen, die auch die Berechtigung dazu haben (etwa eingeloggte Teammitglieder). Später wird es darüber auch möglich sein, Animationen und automatische Wasserzeichen zu nutzen.

Editor

Schlussendlich wurden die neuen Elemente dem UI des Editor hinzugefügt. Es ist damit nun endlich auf unserer neuen Website möglich, News wie diese hier zu erstellen, einschließlich wichtiger Features wie den Bilder, Galerien, Überschriften, Texte sowie eine Auswahl an Formatierungsoptionen (Fett, Kursiv, Code, usw.). Diese Neuerung verlangte es auch, dass wir im Hintergrund die Abspeicherung der verknüpften Daten überarbeiten.

Ausblick

Die Darstellung der News ist am heutigen Tag jedoch noch nicht final. Noch bedarf es Feinschliff beim Style, beim Generieren des Teasers und bei der Optimierung. Einige recht wichtige Funktionen, wie etwa dass Bilder automatisch freigeschaltet werden, wenn eine News veröffentlicht wird, müssen ebenfalls noch ergänzt werden.

Infra-Entwicklung

Ein wichtiges Thema vor Release betrifft die Sicherheit und Stabilität unserer Systeme. Alle unsere Nodes (also die physischen Server) sind nun auf Kubernetes (die Technologie zur Verwaltung des Clusters) Version 1.25.0 und Talos Linux (das Betriebssystem der Nodes) Version 1.2.1 – wir sind also wieder so aktuell wie möglich und haben daher die neuesten Features und Sicherheitspatches. Das beinhaltet auch die Ausführung der Container mit "Seccomp" (Secure Computing), was – vereinfacht gesagt – bewirkt, dass nur bestimmte System-Schnittstellen genutzt werden dürfen. Sollte es also jemandem möglich sein, in einen unserer Container einzubrechen, so ist dadurch nur das absolute Minimum möglich, dass wir dem jeweiligen Container explizit gestattet haben.

Die Konfiguration dieser Regeln ist mit zusätzlichem Aufwand verbunden, wirkt sich aber massiv auf die Sicherheit aus. Da uns die Sicherheit der Daten unserer Spieler sehr am Herzen liegt, ist es uns die Zeit wert.

Außerdem wurde unsere Infrastruktur-Dokumentation weiter ausgebaut und aktualisiert, sodass neue Entwickler sich schnell einarbeiten können und um die Übersicht über die Prozesse zu wahren.

Auch unsere Patches wurden nun noch übersichtlicher gestaltet und es wurde ein Load Balancing für jegliche Verwaltung des Clusters eingefügt. Das bedeutet im weitesten Sinne, dass jetzt jede Adresse im Zusammenhang mit der Cluster-Verwaltung keine konkreten Server mehr anvisiert, sondern eine zentrale Stelle, die die Aufrufe dann fair an die dahinterliegenden Server aufteilt. Dies funktioniert selbst dann noch, selbst wenn alle Server bis auf einen heruntergefahren sind. Die physischen Server wenden so noch anonymer und ersetzbarer und können entsprechend beliebig ausgetauscht werden, ohne dass irgendwo etwas angepasst werden muss.

Entwicklung Allgemein

Neben den neuen UI-Funktionen und einigen Bugfixes wurde Impackable, unser Service für den Download der Resourcepacks, in den letzten Tagen weiter beschleunigt, sowie robuster und konfigurierbarer gestaltet.

Außerdem wurde unser Service, der ursprünglich "ClanIslandDirector" hieß, nun zu "directory" umgetauft. Wie der ursprüngliche Name schon suggerierte, ging es dabei um die Zuweisung/Weisung von Klaninsel-Servern. Wenn also ein Spieler /clan home eingibt, dann kümmert sich dieser Service darum, dass entweder ein existierender Server gefunden wird oder ein neuer, passender Server erstellt wird und verbindet den Spieler anschließend auf diesen Server.

Nun haben wir das Konzept soweit abstrahiert, dass es nicht mehr nur für Klaninseln funktioniert, sondern dass wir beliebige Definitionen erstellen können und Spieler so immer passend (je nach Konzept) zu Servern gruppieren oder isolieren können. Das ist insbesondere für unser neues Minispiel wichtig gewesen, das wir während des Teamtreffens entwickelt haben. Denn hier erhält jeder Spieler einen eigenen Server.