Aktuelle Releases können für die verschiedenen Branches genutzt werden:
Die Implementierung des Clients ist als Web-Anwendung gedacht und bedarf daher im Allgemeinen keiner eigenhändigen Installation. Das Spiel kann über die oben aufgelisteten Links gestartet werden.
Sollte es dennoch gewünscht sein, Änderungen vorzunehmen oder das Spiel selbst zu builden, sind folgende Schritte nötig:
- Projektordner runterladen.
- Im entsprechenden Verzeichnis
npm installausführen, um externe Packages zu installieren. npm run serveausführen, um einen Development-Server zu starten.npm run buildausführen, um das Projekt zu builden.
Für die Installation ist mindestens Node V8 nötig.
Als Frontend-Framwork wurde Vue.js verwendet, das es u. a. erlaubt, umfangreiche SPAs zu entwickeln. Mehr zu Vue.js
- vue: ^2.6.10
- vue-template-compiler: ^2.5.21
- The MIT License (MIT)
Fontawesome bietet eine umfangreiche Sammlung kostenloser SVG-Grafiken zur Gestaltunge von UIs, die sich einfach einbinden und konfigurieren lassen. Mehr zu Fontawesome
- @fortawesome/fontawesome-svg-core: ^1.2.19
- @fortawesome/free-solid-svg-icons: ^5.9.0
- @fortawesome/vue-fontawesome: ^0.1.6
- CC BY 4.0 License
Animated.css bietet eine Sammlung vorgefertigter CSS-Animationen, die sich einfach in die Anwendung einbinden lassen. Mehr zu Animate.css
- animate.css: ^3.7.2
- The MIT License (MIT)
Mit diesem Package lassen sich auch die neuesten Features von JavaScript bis hin zu ES2018 in die Anwendung integrieren. Babel (siehe unten), erlaubt es dann, diese Features in von allen Browsern unterstütztes JavaScript zu übersetzen. Mehr zu core-js
- core-js: ^2.6.5
- The MIT License (MIT)
Vuex ist eine Erweiterung für Vue, die Features für application state management nach dem Vorbild von Redux zur Verfügung stellt. Mehr zu vuex
- vuex: ^3.1.1
- The MIT License (MIT)
Um den Entwicklungsprozess möglichst produktiv zu gestalten, wurden einige Dev-Dependencies eingesetzt:
Die Vue CLI erlaubt ein schnelles Setup von neuen Vue-Projketen über die Kommandozeile. Dabei können vorab oder nachträglich über einfache Befehle Konfigurationen vorgenommen werden. Mehr zu Vue CLI
- @vue/cli-service: ^3.6.0
- The MIT License (MIT)
Da JavaScript eine dynamische Programmiersprache ist, kann die Fehlersuche von Zeit zu Zeit recht umständlich sein. Mit ESLint, einem JavaScript Linter, können viele Fehler (und spezifizierte Stil-Regeln) vorab erkannt bzw. durchgesetzt werden. Hier wird es in Verbindung mit Babel (neuste ECMA Script Syntax-Unterstützung) und Prettier verwendet. Mehr zu ESLint
- eslint: ^5.16.0
- eslint-loader: ^2.1.2
- eslint-plugin-vue: ^5.0.0
- eslint-config-prettier: ^4.3.0
- eslint-plugin-prettier: ^3.1.0
- babel-eslint: ^10.0.1
- @vue/cli-plugin-eslint: ^3.6.0
- The MIT License (MIT)
Babel erlaubt es, die neuesten Features von JavaScript (ECMA Script) zu verwenden, ohne auf eine vollständige Browser-Unterstützung angewiesen zu sein. Babel übersetzt die neuesten Features in Code mit einer von allen Browsern unterstützten Version von ECMA Script. Mehr zu Babel
- @babel/core: 7.4.4
- The MIT License (MIT)
Prettier ist ein Style Formatter, der hier im Zusammenspiel mit ESLint zum Einsatz kommt. Bei jedem Speichervorgang werden die Style-Guides des Vue-Core-Teams automatisch umgesetzt. Es entsteht eine saubere und einheitliche code base. Mehr zu Prettier
- prettier: ^1.18.2
- @vue/cli-plugin-babel: ^3.6.0
- The MIT License (MIT)
Das genaue Setup für Linting und Formatierung ist von diesem Medium-Artikel inspiriert.
Als Texteditor kam für den Client ausschließlich VisualStudio Code zum Einsatz. Mehr zu VS Code
Zum Erstellen von Spielgrafiken wurde die kommerzielle Software Affinity Designer v1.7.1 von Serif verwendet.