Faergria Interactive Map

faergriaMap

Eine interaktive Karte begleitend für eine Tabletop RPG Kampgne auf dem fiktiven Kontinent Faergria

Table of Contents

• 1. Einleitung
• 2. Mitwirkende
• 3. Userguide
  • a. Installation
  • b. Ausführen der Applikation
  • c. Nutzung der interaktiven Karte
• 4. Dokumentation
  • a. Verwendete Technologien
    • i. Frontend-Entwicklung
    • ii. Kartentechnologie
    • iii. Backend-Entwicklung
    • iv. Datenbank
  • b. Architektur
    • i. Single Page Application (SPA)
    • ii. Vue.js und Reaktivität
    • iii. Backend und Datenbank
    • iv. API und Event Handling
  • c. Datenbankmodell
• 5. Business Case
  • a. Executive Summary
  • b. Marktanalyse
  • c. Wettbewerbsanalyse
  • d. Geschäftsmodell
  • e. Marketing- und Vertriebsstrategie

1. Einleitung

Die Website stellt eine interaktive Karte als Begleitung für eine Dungeons & Dragons Kampagne dar. Die Spieler sollen in der Lage sein, Marker für Orte auf der Karte des fiktiven Kontinents Faergria anzusehen und eigene Marker zur Orientierung während dem Spielen setzen und bearbeiten können. Zur weiteren Orientierung auf dem fiktiven Kontinent, sollen die Spieler die verschiedenen Regionen übersichtlich einsehen können.

2. Mitwirkende

Mitwirkende	GitHub
Luke Grasser (Zetsu)	@Zetsuboushii

3. Userguide

Im Folgenden wird das grundlegende Setup, sowie die Bedienelemente der Anwendung erklärt.

a. Installation

Zum Ausführen wird Node.js mit npm benötigt.

Zu Beginn das Projekt klonen und folgende Befehle ausführen:

npm install

b. Ausführen der Applikation

npm run start

Die Karte ist während begrenzten Zeitrahmen unter http://faergriamap.zetsuboushii.site erreichbar.

c. Nutzung der interaktiven Karte

Beim Aufruf der Website wird der Nutzer direkt auf der interaktiven Karte begrüßt. Die Bedienung der Karte ist intuitiv gestaltet: Mit dem Mausrad kann der Nutzer stufenlos hinein- und herauszoomen, und durch Ziehen mit der gedrückten Maustaste lässt sich die Karte navigieren. Die Marker passen sich jeder Zoomstufe dynamisch an, sodass auch Cluster von Markern bei höheren Zoomstufen deutlich erkennbar bleiben.
Auf der Karte sind die Regionen farblich markiert. Wenn der Nutzer mit der Maus über eine Region fährt, wird der Name der Region am oberen Bildschirmrand angezeigt.
Ein Klick auf einen beliebigen Punkt der Karte öffnet auf der rechten Bildschirmseite einen Drawer. Hier kann der Nutzer den Namen und das Icon eines Markers festlegen und diesen der Karte hinzufügen. Markierungen können bearbeitet werden, sofern der Nutzer die entsprechenden Berechtigungen besitzt. Beim Hovern über einen Marker erscheint dessen Name als Tooltip.
Am linken Bildschirmrand befindet sich eine scrollbare Legende, die die Farben der Regionen und deren geopolitische Zugehörigkeit anzeigt. Ein ausfahrbares Optionsfenster ermöglicht es, einen Sessioncode einzugeben, um eigene Marker hinzuzufügen. Zusätzlich gibt es eine Togglebox, mit der die Anzeige der Regionen ein- oder ausgeschaltet werden kann.
Sessions sind dazu gedacht, dass sich Gruppen, hauptsächlich Spielergruppen, ein eigenes Set an Markern teilen können. Vom Dungeon Master festgelegte Marker sind nicht bearbeitbar.
Wenn ein Marker per Linksklick ausgewählt wurde, kann ein zweiter Marker per Rechtsklick angewählt werden, um eine Linie zwischen diesen zu ziehen. Am unteren Bildschirmrand wird dann die Distanz zwischen den beiden Markern angezeigt.

4. Dokumentation

Im Folgenden wird das Projekt aus technischer Sicht näher beleuchtet.

a. Verwendete Technologien

Dieses Webprojekt wurde mit einer Vielzahl moderner Technologien realisiert, um eine leistungsfähige und benutzerfreundliche Anwendung zu erstellen. Im Folgenden werden die verwendeten Technologien ausführlicher beschrieben:

i. Frontend-Entwicklung

Vue.js mit TypeScript

Für das Frontend wurde das client-side Framework Vue.js verwendet, welches bekannt für seine Reaktivität und Modularität ist. Die Entscheidung, Vue.js mit TypeScript zu kombinieren, ermöglicht es, die Vorteile von Typüberprüfung und modernen JavaScript-Funktionen zu nutzen, was zu einer stabileren und wartbareren Codebasis führt. TypeScript bietet zudem eine verbesserte Entwicklererfahrung durch besseren Code-Editor-Support und frühzeitige Fehlererkennung.

Vuetify

Um die Benutzeroberfläche zu gestalten und konsistente, ästhetisch ansprechende Komponenten zu verwenden, wurde das Component Framework Vuetify integriert. Vuetify basiert auf Material Design Richtlinien und bietet eine breite Palette an vorgefertigten UI-Komponenten, die leicht anzupassen sind. Dies beschleunigt die Entwicklung und gewährleistet eine einheitliche Benutzererfahrung.

ii. Kartentechnologie

Leaflet und vue-leaflet

Die Kartendarstellung und -interaktion innerhalb der Anwendung wird durch die JavaScript-Bibliothek Leaflet ermöglicht. Leaflet ist bekannt für seine Leistungsfähigkeit und Flexibilität im Umgang mit interaktiven Karten. Um Leaflet nahtlos in das Vue-Framework zu integrieren, wird das vue-leaflet Package verwendet, das Leaflet-Funktionalitäten in Form von Vue-Komponenten zur Verfügung stellt. Dies ermöglicht eine einfache und effiziente Implementierung von Kartenfunktionen in der Anwendung.

iii. Backend-Entwicklung

ExpressJS

Der Server wird mit ExpressJS realisiert, einem minimalen und flexiblen Node.js-Web-Application-Framework, das robuste Features für Web- und Mobilanwendungen bietet. ExpressJS dient als Middleware-Schicht, die Anfragen verarbeitet, Routing durchführt und als Kommunikationsbrücke zwischen dem Frontend und der Datenbank fungiert.

iv. Datenbank

SQLite

Die Datenhaltung wird durch eine SQLite-Datenbank gelöst. SQLite ist eine leichtgewichtige, dateibasierte Datenbank, die sich besonders gut für lokale Anwendungen eignet. Sie benötigt keinen separaten Server und ist einfach zu konfigurieren und zu verwalten. SQLite bietet dennoch ausreichende Leistungsfähigkeit und Funktionalität für viele Anwendungsfälle, insbesondere für kleinere bis mittelgroße Projekte.

b. Architektur

Für dieses Projekt wurde die Entscheidung getroffen, eine Single Page Application (SPA) zu entwickeln. Der Hauptgrund hierfür ist die einzige statische Ansicht der Karte, auf der dynamisch Elemente ein- und ausgeblendet werden können. Eine SPA bietet mehrere Vorteile, insbesondere im Hinblick auf Leistung und Benutzererfahrung. Durch das Laden aller erforderlichen Ressourcen auf einmal und das anschließende dynamische Aktualisieren des Inhalts wird die Notwendigkeit ständiger Seitenneuladungen eliminiert, was zu einer schnelleren und flüssigeren Interaktion führt.

i. Single Page Application (SPA)

Eine SPA lädt initial eine HTML-Seite und aktualisiert den Inhalt dynamisch durch JavaScript, ohne die Seite neu zu laden. Dies ermöglicht eine reibungslose und responsive Benutzererfahrung, da nur die notwendigen Teile der Seite aktualisiert werden, anstatt den gesamten Inhalt neu zu laden. Dadurch werden die Serverlast und die Ladezeiten reduziert, was zu einer verbesserten Performance führt.

ii. Vue.js und Reaktivität

Vue.js wurde als Framework gewählt, da es eine kleinteilige Komponentenstruktur ermöglicht. Diese Struktur erlaubt es, Frontendelemente in separate, wiederverwendbare Komponenten auszulagern. Zu den Hauptkomponenten gehören:

• MapView: Die Hauptansicht, in der die Karte und andere dynamische Vue-Komponenten wie der MarkerInfoDrawer gerendert werden.
• MarkerInfoDrawer: Eine seitlich ein- und ausfahrbare Komponente, die Informationen zu den Markern anzeigt und deren Bearbeitung ermöglicht.

Vue.js ist bekannt für seine Reaktivität. Wenn sich der Zustand der Anwendung ändert, aktualisiert Vue automatisch die betroffenen Teile der Benutzeroberfläche. Dies macht die Entwicklung effizienter und die Anwendung reaktionsschneller. Reaktive Datenbindungen sorgen dafür, dass Änderungen im Datenmodell sofort im UI reflektiert werden, ohne dass explizit DOM-Manipulationen durchgeführt werden müssen.

iii. Backend und Datenbank

Die Datenbank, in der unter anderem Informationen über Marker gespeichert werden, wird von einem Server gehostet und auf einem spezifischen Port bereitgestellt. Die Datenbank verwendet SQLite, eine leichtgewichtige, dateibasierte Datenbanklösung. Der Zugriff auf die Datenbank erfolgt über eine eigens entwickelte API. Diese API stellt dem Frontend Funktionen und Variablen zur Verfügung, um Daten aus der Datenbank abzurufen und zu verwenden. Dies ermöglicht eine klare Trennung zwischen Frontend und Backend, wodurch die Wartbarkeit und Skalierbarkeit der Anwendung verbessert wird.

iv. API und Event Handling

Zusätzlich zur Datenbank-API existiert eine weitere API, die für das Handling von Events, State Changes und Berechnungen zuständig ist. Diese API ermöglicht es, auf Benutzerinteraktionen zu reagieren und die Anwendung entsprechend anzupassen. Beispiele hierfür sind das Hinzufügen oder Bearbeiten von Markern auf der Karte und das Berechnen von Distanzen zwischen Markern. Durch die Verwendung von APIs wird die Modularität und Erweiterbarkeit der Anwendung gewährleistet.

c. Datenbankmodell

Das Datenbankmodell zeigt die Struktur einer relationalen Datenbank, die für eine Anwendung zur Verwaltung von Markern und Regionen auf einer Karte verwendet wird. Die Datenbank besteht aus sechs Tabellen, die durch verschiedene Beziehungen miteinander verknüpft sind.

erDiagram
    GROUPS {
        int g_id
        text g_code
    }
    MARKER_TYPES {
        int mt_id
        text mt_name
        text url
        int fk_mt_region
        int mt_size
    }
    MARKERS {
        int m_id
        text m_name
        int fk_m_type
        real m_lat
        real m_lng
        text fk_m_group
    }
    REGIONS {
        int r_id
        text r_name
        text r_url
    }
    TERRITORIES {
        int t_id
        text t_name
        fk_t_region text
    }
    TERRITORY_COORDS {
        int c_id
        int fk_t_id
        real c_lat
        real c_lng
    }

    MARKERS }o--|| MARKER_TYPES: has
    MARKERS }o--|| GROUPS: belongs_to
    MARKER_TYPES }o--|| REGIONS: specified_for
    TERRITORIES }o--|| REGIONS: lays_in
    TERRITORY_COORDS }o--|| TERRITORIES: lays_in

GROUPS

• Attribute:
  • g_id (int): Primärschlüssel, der die Gruppe eindeutig identifiziert.
  • g_code (text): Ein Code, der zur Identifizierung der Gruppe verwendet wird.
• Beziehungen:
  • Eine Gruppe kann mehrere Marker haben (belongs_to Beziehung zu MARKERS).

MARKERS

• Attribute:
  • m_id (int): Primärschlüssel, der den Marker eindeutig identifiziert.
  • m_name (text): Der Name des Markers.
  • fk_m_type (int): Fremdschlüssel, der auf den Typ des Markers verweist (Verbindung zu MARKER_TYPES).
  • m_lat (real): Die geografische Breite des Markers.
  • m_lng (real): Die geografische Länge des Markers.
  • fk_m_group (text): Fremdschlüssel, der auf die Gruppe verweist, zu der der Marker gehört (Verbindung zu GROUPS).
• Beziehungen:
  • Jeder Marker gehört zu einer Gruppe.
  • Jeder Marker hat einen Typ (has Beziehung zu MARKER_TYPES).

MARKER_TYPES

• Attribute:
  • mt_id (int): Primärschlüssel, der den Markertyp eindeutig identifiziert.
  • mt_name (text): Der Name des Markertyps.
  • url (text): Eine URL, die möglicherweise ein Icon oder Bild für den Markertyp enthält.
  • fk_mt_region (int): Fremdschlüssel, der auf die Region verweist, zu der der Markertyp gehört (Verbindung zu REGIONS).
  • mt_size (int): Die Größe des Markertyps.
• Beziehungen:
  • Jeder Markertyp ist für eine Region spezifiziert (specified_for Beziehung zu REGIONS).

REGIONS

• Attribute:
  • r_id (int): Primärschlüssel, der die Region eindeutig identifiziert.
  • r_name (text): Der Name der Region.
  • r_url (text): Eine URL, die möglicherweise ein Bild oder eine weitere Information zur Region enthält.
• Beziehungen:
  • Eine Region kann mehrere Markertypen haben.
  • Eine Region kann mehrere Territorien haben (lays_in Beziehung zu TERRITORIES).

TERRITORIES

• Attribute:
  • t_id (int): Primärschlüssel, der das Territorium eindeutig identifiziert.
  • t_name (text): Der Name des Territoriums.
  • fk_t_region (int): Fremdschlüssel, der auf die Region verweist, zu der das Territorium gehört (Verbindung zu REGIONS).
• Beziehungen:
  • Ein Territorium gehört zu einer Region.
  • Ein Territorium kann mehrere Koordinaten haben (lays_in Beziehung zu TERRITORY_COORDS).

TERRITORY_COORDS

• Attribute:
  • c_id (int): Primärschlüssel, der die Koordinate eindeutig identifiziert.
  • fk_t_id (int): Fremdschlüssel, der auf das Territorium verweist, zu dem die Koordinate gehört (Verbindung zu TERRITORIES).
  • c_lat (real): Die geografische Breite der Koordinate.
  • c_lng (real): Die geografische Länge der Koordinate.
• Beziehungen:
  • Eine Koordinate gehört zu einem Territorium.

5. Business Case

Im Folgenden wird der Business Case der Website im Zusammenhang mit dem aus der Faergria Suite erläutert.

a. Executive Summary

Die Faergria Interactive Map ist eine innovative Webanwendung, die speziell für Spielergruppen von Tabletop-Rollenspielen wie Dungeons & Dragons entwickelt wurde. Die interaktive Karte ermöglicht es den Spielern, sich auf dem fiktiven Kontinent Faergria zu orientieren, Marker zu setzen und relevante Informationen anzuzeigen. Die Anwendung fördert die Zusammenarbeit und das gemeinsame Erlebnis innerhalb der Spielergruppe und wird durch den Faergria Webshop ergänzt, der eine Vielzahl an themenbezogenen Produkten anbietet.

b. Marktanalyse

Der Markt für Tabletop-Rollenspiele und verwandte Produkte hat in den letzten Jahren ein bemerkenswertes Wachstum erfahren. Mit dem Aufschwung von Online-Communities und Streaming-Plattformen hat sich die Spielerbasis deutlich vergrößert. Es gibt eine hohe Nachfrage nach unterstützenden Tools und Anwendungen, die das Spielerlebnis verbessern. Die Faergria Interactive Map bedient diese Nachfrage, indem sie eine benutzerfreundliche und funktionsreiche Plattform bereitstellt, die nahtlos in die bestehenden Spielrunden integriert werden kann.

c. Wettbewerbsanalyse

Die Faergria Interactive Map steht in Konkurrenz zu anderen Karten- und Spielmanagement-Tools wie Roll20, Fantasy Grounds und D&D Beyond. Diese Plattformen bieten umfassende Lösungen für das Online-Spielen, einschließlich Kartenverwaltung, Charakterbögen und mehr. Die Faergria Interactive Map unterscheidet sich durch ihren Fokus auf Einfachheit und Benutzerfreundlichkeit sowie die spezielle Anpassung an die Bedürfnisse von Dungeons & Dragons-Spielern. Darüber hinaus bietet die Integration mit dem Faergria Webshop einen zusätzlichen Mehrwert, indem themenbezogene Produkte direkt in die Spielerfahrung eingebunden werden.

d. Geschäftsmodell

Das Geschäftsmodell der Faergria Interactive Map basiert auf der Verkauf von physischen und digitalen Produkten über den Faergria Webshop eine weitere Einnahmequelle darstellen. Dies umfasst exklusive Karten, Spielzubehör und themenbezogene Merchandise-Artikel.

e. Marketing- und Vertriebsstrategie

Die Marketingstrategie für die Faergria Interactive Map konzentriert sich auf mehrere Kernbereiche:

1. Online-Präsenz: Aufbau einer starken Online-Präsenz durch Social Media, Blogs und Foren, um die Zielgruppe direkt anzusprechen.
2. Community-Engagement: Förderung einer aktiven Community durch regelmäßige Updates, Feedback-Runden und exklusive Inhalte.
3. Cross-Promotion: Nutzung des Faergria Webshops zur Cross-Promotion der interaktiven Karte und umgekehrt, um die Kundenbasis zu erweitern.

Faergria © Zetsu 2024