Änderung: Anpassung der TaxiHighscore-API und Verbesserung der Highscore-Anzeige im Taxi-Spiel

Änderungen: - Umbenennung des API-Endpunkts für Highscores von `/api/taxi/highscore` zu `/api/taxi/highscores`. - Anpassung der Highscore-Datenstruktur zur Verwendung von `hashedUserId` anstelle von `userId`. - Erweiterung der Router-Logik zur besseren Organisation der Highscore-Abfragen. - Implementierung einer neuen Highscore-Anzeige im Spiel, die die Top 20 Spieler und den aktuellen Spieler anzeigt. Diese Anpassungen verbessern die API-Konsistenz und erweitern die Benutzeroberfläche für die Highscore-Anzeige im Spiel.
2025-10-05 12:42:37 +02:00
parent 42349e46c8
commit 1bde46430b
6 changed files with 345 additions and 43 deletions
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -185,18 +185,19 @@ const store = createStore({
        let retryCount = 0;
        const maxRetries = 10;
        const retryConnection = (reconnectFn) => {
-          console.log(`Reconnect-Versuch ${retryCount + 1}/${maxRetries}`);
+          console.log(`Backend-Reconnect-Versuch ${retryCount + 1}/${maxRetries}`);
          if (retryCount >= maxRetries) {
            // Nach maxRetries alle 5 Sekunden weiter versuchen
-            console.log('Max Retries erreicht, versuche weiter alle 5 Sekunden...');
+            console.log('Backend: Max Retries erreicht, versuche weiter alle 5 Sekunden...');
            setTimeout(() => {
+              retryCount = 0; // Reset für nächsten Zyklus
              reconnectFn();
            }, 5000);
            return;
          }
          retryCount++;
          const delay = 5000; // Alle 5 Sekunden versuchen
-          console.log(`Warte ${delay}ms bis zum nächsten Reconnect-Versuch...`);
+          console.log(`Backend: Warte ${delay}ms bis zum nächsten Reconnect-Versuch...`);
          setTimeout(() => {
            reconnectFn();
          }, delay);
@@ -309,6 +310,7 @@ const store = createStore({
          // Nach maxRetries alle 5 Sekunden weiter versuchen
          console.log('Daemon: Max Retries erreicht, versuche weiter alle 5 Sekunden...');
          setTimeout(() => {
+            retryCount = 0; // Reset für nächsten Zyklus
            reconnectFn();
          }, 5000);
          return;
--- a/frontend/src/views/minigames/TaxiGame.vue
+++ b/frontend/src/views/minigames/TaxiGame.vue
@@ -91,17 +91,57 @@
                </div>
              </div>

-              <!-- Canvas -->
-              <div class="game-canvas-container">
-                <canvas 
-                  ref="gameCanvas" 
-                  width="500" 
-                  height="500"
-                  class="game-canvas"
-                  @click="handleCanvasClick"
-                  @keydown="handleKeyDown"
-                  tabindex="0"
-                ></canvas>
+              <!-- Canvas und Highscore Container -->
+              <div class="game-canvas-section">
+                <!-- Canvas (immer sichtbar) -->
+                <div class="game-canvas-container">
+                  <canvas 
+                    ref="gameCanvas" 
+                    width="500" 
+                    height="500"
+                    class="game-canvas"
+                    @click="handleCanvasClick"
+                    @keydown="handleKeyDown"
+                    tabindex="0"
+                  ></canvas>
+                </div>
+                
+                <!-- Highscore-Anzeige (als Overlay über dem Canvas) -->
+                <div v-if="showHighscore" class="highscore-overlay">
+                <div class="highscore-header">
+                  <h2>🏆 Highscore</h2>
+                  <div class="highscore-subtitle">Top 20 Spieler</div>
+                </div>
+                <div class="highscore-list">
+                  <div v-if="loadingHighscore" class="loading-message">
+                    Lade Highscore...
+                  </div>
+                  <div v-else-if="highscoreList.length === 0" class="no-highscore">
+                    Noch keine Highscores vorhanden
+                  </div>
+                  <div v-else class="highscore-table">
+                    <div 
+                      v-for="(entry, index) in highscoreList" 
+                      :key="index"
+                      class="highscore-entry"
+                      :class="{ 'current-player': entry.isCurrentPlayer }"
+                    >
+                      <div class="highscore-rank">{{ entry.rank }}</div>
+                      <div class="highscore-name">{{ entry.nickname }}</div>
+                      <div class="highscore-points">{{ entry.points }} Pkt</div>
+                    </div>
+                    <div v-if="showCurrentPlayerBelow" class="highscore-separator">...</div>
+                    <div 
+                      v-if="currentPlayerEntry && showCurrentPlayerBelow"
+                      class="highscore-entry current-player"
+                    >
+                      <div class="highscore-rank">{{ currentPlayerEntry.rank }}</div>
+                      <div class="highscore-name">{{ currentPlayerEntry.nickname }}</div>
+                      <div class="highscore-points">{{ currentPlayerEntry.points }} Pkt</div>
+                    </div>
+                  </div>
+                </div>
+                </div>
              </div>
            </div>
          </div>
@@ -114,6 +154,9 @@
            <button @click="restartLevel" class="control-button">
              {{ $t('minigames.taxi.restartLevel') }}
            </button>
+            <button @click="toggleHighscore" class="control-button">
+              {{ showHighscore ? 'Zurück zum Spiel' : 'Highscore' }}
+            </button>
          </div>
        </div>

@@ -312,6 +355,11 @@ export default {
      ,prevTaxiY: 250
      ,skipRedLightOneFrame: false
      ,gasStations: [] // Tankstellen im Spiel
+      ,showHighscore: false // Highscore-Anzeige aktiv
+      ,highscoreList: [] // Liste der Highscore-Einträge
+      ,loadingHighscore: false // Lade-Status für Highscore
+      ,currentPlayerEntry: null // Eintrag des aktuellen Spielers
+      ,showCurrentPlayerBelow: false // Zeige aktuellen Spieler nach Platz 20
    }
  },
  computed: {
@@ -586,6 +634,7 @@ export default {
    },
    
    setupEventListeners() {
+      // Event-Listener auf Document registrieren (Canvas bleibt immer sichtbar)
      document.addEventListener('keydown', this.handleKeyDown);
      document.addEventListener('keyup', this.handleKeyUp);
    },
@@ -698,6 +747,9 @@ export default {
        clearTimeout(this.motorStopTimeout);
        this.motorStopTimeout = null;
      }
+      // Event-Listener von Document entfernen
+      document.removeEventListener('keydown', this.handleKeyDown);
+      document.removeEventListener('keyup', this.handleKeyUp);
      // Cleanup aller Timeouts
      if (this.passengerGenerationTimeout) {
        clearTimeout(this.passengerGenerationTimeout);
@@ -708,8 +760,6 @@ export default {
        this.crashDialogTimeout = null;
      }
      // AudioContext bleibt global erhalten, nicht schließen
-      document.removeEventListener('keydown', this.handleKeyDown);
-      document.removeEventListener('keyup', this.handleKeyUp);
      if (this.audioUnlockHandler) {
        document.removeEventListener('pointerdown', this.audioUnlockHandler, { capture: true });
        document.removeEventListener('touchstart', this.audioUnlockHandler, { capture: true });
@@ -2865,8 +2915,9 @@ export default {
      
      // AudioContext bei erster Benutzerinteraktion initialisieren
      this.ensureAudioUnlockedInEvent();
-      // Bei Beschleunigungs-Key Motor starten (User-Geste garantiert)
-      if ((event.key === 'ArrowUp' || event.key === 'w' || event.key === 'W') && this.motorSound && !this.motorSound.isPlaying) {
+      
+      // Motor nur starten wenn Spiel nicht pausiert ist
+      if (!this.isPaused && (event.key === 'ArrowUp' || event.key === 'w' || event.key === 'W') && this.motorSound && !this.motorSound.isPlaying) {
        this.motorSound.start();
        // Direkt Parameter setzen, um hörbares Feedback ohne Verzögerung zu bekommen
        const speedKmh = Math.max(5, this.taxi.speed * 5);
@@ -2917,6 +2968,14 @@ export default {
    togglePause() {
      this.isPaused = !this.isPaused;
      this.showPauseOverlay = this.isPaused;
+      
+      // Motorgeräusch stoppen wenn pausiert, starten wenn fortgesetzt
+      if (this.isPaused) {
+        if (this.motorSound && this.motorSound.isPlaying) {
+          this.motorSound.stop();
+        }
+      }
+      // Wenn fortgesetzt wird, startet der Motor automatisch bei der nächsten Beschleunigung
    },
    
    restartLevel() {
@@ -3432,6 +3491,106 @@ export default {
          prev = curr; curr = next || null;
        }
      }
+    },
+    
+    // Highscore-Funktionen
+    async toggleHighscore() {
+      this.showHighscore = !this.showHighscore;
+      
+      if (this.showHighscore) {
+        // Spiel pausieren wenn Highscore angezeigt wird
+        if (!this.isPaused) {
+          this.isPaused = true;
+          // Motorgeräusch stoppen wenn pausiert
+          if (this.motorSound && this.motorSound.isPlaying) {
+            this.motorSound.stop();
+          }
+        }
+        // Highscore laden
+        await this.loadHighscore();
+      } else {
+        // Highscore geschlossen - Spiel automatisch fortsetzen
+        this.isPaused = false;
+        this.showPauseOverlay = false;
+        // Motor startet automatisch bei der nächsten Beschleunigung
+      }
+    },
+    
+    async loadHighscore() {
+      this.loadingHighscore = true;
+      try {
+        // Lade Top 20 Highscores für die aktuelle Map
+        const response = await apiClient.get('/api/taxi/highscores', {
+          params: {
+            mapId: this.selectedMapId,
+            limit: 20,
+            orderBy: 'points' // Sortiere nach Punkten
+          }
+        });
+        
+        if (response.data && response.data.success && Array.isArray(response.data.data)) {
+          this.highscoreList = response.data.data.map((entry, index) => ({
+            rank: index + 1,
+            nickname: entry.nickname || 'Unbekannt',
+            points: entry.points,
+            isCurrentPlayer: entry.userId === this.$store.state.user?.id
+          }));
+          
+          // Prüfe ob aktueller Spieler eine Platzierung hat
+          await this.checkCurrentPlayerRank();
+        }
+      } catch (error) {
+        console.error('Fehler beim Laden der Highscores:', error);
+        this.highscoreList = [];
+      } finally {
+        this.loadingHighscore = false;
+      }
+    },
+    
+    async checkCurrentPlayerRank() {
+      if (!this.$store.state.user?.id) return;
+      
+      try {
+        // Lade Rang des aktuellen Spielers
+        const response = await apiClient.get('/api/taxi/highscores/rank', {
+          params: {
+            userId: this.$store.state.user.id,
+            mapId: this.selectedMapId,
+            orderBy: 'points'
+          }
+        });
+        
+        if (response.data && response.data.success && response.data.data && response.data.data.rank) {
+          const rank = response.data.data.rank;
+          
+          // Wenn Spieler Platz 21 oder schlechter hat
+          if (rank > 20) {
+            this.showCurrentPlayerBelow = true;
+            
+            // Lade beste Punkte des Spielers
+            const bestScoreResponse = await apiClient.get('/api/taxi/highscores/user/best', {
+              params: {
+                userId: this.$store.state.user.id,
+                mapId: this.selectedMapId
+              }
+            });
+            
+            if (bestScoreResponse.data && bestScoreResponse.data.success && bestScoreResponse.data.data) {
+              this.currentPlayerEntry = {
+                rank: rank,
+                nickname: this.$store.state.user.nickname || 'Du',
+                points: bestScoreResponse.data.data.points,
+                isCurrentPlayer: true
+              };
+            }
+          } else {
+            this.showCurrentPlayerBelow = false;
+            this.currentPlayerEntry = null;
+          }
+        }
+      } catch (error) {
+        console.error('Fehler beim Laden des Spieler-Rangs:', error);
+      }
    }
  }
 }
@@ -3473,6 +3632,7 @@ export default {

 /* Game Canvas Section */
 .game-canvas-section {
+  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -3890,6 +4050,7 @@ export default {
  margin: 0; /* Kein Margin */
  text-align: center;
  width: 500px; /* Feste Breite wie das Tacho-Display */
+  height: 500px; /* Feste Höhe beibehalten */
  box-sizing: border-box; /* Border wird in die Breite eingerechnet */
 }

@@ -3970,6 +4131,120 @@ export default {
  border: 1px solid #7E471B;
 }

+/* Highscore Overlay */
+.highscore-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 500px;
+  height: 500px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(5px);
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 10;
+}
+
+.highscore-header {
+  background: #F9A22C;
+  color: #000;
+  padding: 20px;
+  text-align: center;
+  border-bottom: 2px solid #ddd;
+}
+
+.highscore-header h2 {
+  margin: 0 0 5px 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.highscore-subtitle {
+  margin: 0;
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+
+.highscore-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 15px;
+}
+
+.loading-message,
+.no-highscore {
+  text-align: center;
+  padding: 40px 20px;
+  color: #666;
+  font-style: italic;
+}
+
+.highscore-table {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.highscore-entry {
+  display: grid;
+  grid-template-columns: 50px 1fr auto;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 15px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.highscore-entry:hover {
+  background: #e9ecef;
+}
+
+.highscore-entry.current-player {
+  background: #fff3cd;
+  border: 2px solid #ffc107;
+  font-weight: 600;
+}
+
+.highscore-entry.current-player:hover {
+  background: #ffe8a1;
+}
+
+.highscore-rank {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #F9A22C;
+  text-align: center;
+}
+
+.highscore-name {
+  font-size: 1rem;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.highscore-points {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #666;
+  text-align: right;
+}
+
+.highscore-separator {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #999;
+  padding: 10px 0;
+  letter-spacing: 5px;
+}
+

 /* Responsive Design */
@media (max-width: 1024px) {