Änderung: Hinzufügen von TaxiHighscore-Logik und Verbesserung der API-Integration

Änderungen:
- Implementierung des neuen Routers für TaxiHighscore zur Verwaltung von Highscore-Daten.
- Anpassung der Datenbankmodelle zur Unterstützung von TaxiHighscore-Associations.
- Erweiterung der Vue-Komponenten zur Anzeige und Speicherung von Highscores im Taxi-Spiel.
- Verbesserung der Statusanzeige im AppHeader zur besseren Benutzerinteraktion.

Diese Anpassungen erweitern die Spielmechanik und Benutzererfahrung, indem sie die Verwaltung von Highscores integrieren und die Benutzeroberfläche optimieren.

frontend/src/components/AppHeader.vue

@@ -3,9 +3,13 @@
     <div class="logo"><img src="/images/logos/logo.png" /></div>
     <div class="advertisement">Advertisement</div>
     <div class="connection-status" v-if="isLoggedIn">
-      <div class="status-indicator" :class="connectionStatusClass">
+      <div class="status-indicator" :class="backendStatusClass">
         <span class="status-dot"></span>
-        <span class="status-text">{{ connectionStatusText }}</span>
+        <span class="status-text">B</span>
+      </div>
+      <div class="status-indicator" :class="daemonStatusClass">
+        <span class="status-dot"></span>
+        <span class="status-text">D</span>
       </div>
     </div>
   </header>
@@ -17,8 +21,8 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'AppHeader',
   computed: {
-    ...mapGetters(['isLoggedIn', 'connectionStatus']),
-    connectionStatusClass() {
+    ...mapGetters(['isLoggedIn', 'connectionStatus', 'daemonConnectionStatus']),
+    backendStatusClass() {
       return {
         'status-connected': this.connectionStatus === 'connected',
         'status-connecting': this.connectionStatus === 'connecting',
@@ -26,14 +30,13 @@ export default {
         'status-error': this.connectionStatus === 'error'
       };
     },
-    connectionStatusText() {
-      switch (this.connectionStatus) {
-        case 'connected': return 'Verbunden';
-        case 'connecting': return 'Verbinde...';
-        case 'disconnected': return 'Getrennt';
-        case 'error': return 'Fehler';
-        default: return 'Unbekannt';
-      }
+    daemonStatusClass() {
+      return {
+        'status-connected': this.daemonConnectionStatus === 'connected',
+        'status-connecting': this.daemonConnectionStatus === 'connecting',
+        'status-disconnected': this.daemonConnectionStatus === 'disconnected',
+        'status-error': this.daemonConnectionStatus === 'error'
+      };
     }
   }
 };
@@ -60,22 +63,23 @@ header {
   display: flex;
   align-items: center;
   margin-left: 10px;
+  gap: 5px;
 }
 
 .status-indicator {
   display: flex;
   align-items: center;
-  padding: 4px 8px;
+  padding: 2px 6px;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 6pt;
   font-weight: 500;
 }
 
 .status-dot {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
-  margin-right: 6px;
+  margin-right: 4px;
   animation: pulse 2s infinite;
 }