Änderung: Erweiterung der Passagier-Logik im Taxi-Spiel

Änderungen: - Hinzufügung der Funktionalität zum Laden und Verwalten von Passagierbildern. - Implementierung der Logik zur Zeichnung von Passagieren vor den Häusern. - Anpassung der Passagiergenerierung zur Berücksichtigung spezifischer Haus- und Straßendaten. Diese Anpassungen verbessern die visuelle Darstellung und Interaktivität des Spiels, indem sie eine realistischere Passagierdarstellung ermöglichen.
2025-09-19 20:43:18 +02:00
parent 71f25596e9
commit 54c7e134d1
2 changed files with 76 additions and 51 deletions
--- a/frontend/public/images/taxi/passenger2.png
+++ b/frontend/public/images/taxi/passenger2.png
--- a/frontend/src/views/minigames/TaxiGame.vue
+++ b/frontend/src/views/minigames/TaxiGame.vue
@@ -237,6 +237,7 @@ export default {
        images: {}
      },
      houseImage: null,
+      passengerImages: {}, // Speichert geladene Passagier-Bilder
      trafficLightStates: {},
      lastTrafficLightTick: 0,
      redLightViolations: 0,
@@ -308,6 +309,7 @@ export default {
    this.loadTiles();
    this.loadTaxiImage();
    this.loadHouseImage();
+    this.loadPassengerImages();
    this.loadMaps();
    this.setupEventListeners();
    await this.initializeMotorSound();
@@ -688,11 +690,7 @@ export default {
      this.passengerGenerationInterval = Math.floor(Math.random() * 25000) + 10000; // 10-35 Sekunden
      this.lastPassengerGeneration = Date.now();
      this.occupiedHouses.clear();
-      console.log('Passagier-Generierung initialisiert:', {
-        interval: this.passengerGenerationInterval,
-        currentMap: !!this.currentMap,
-        tileHouses: this.currentMap?.tileHouses?.length || 0
-      });
+      // Passagier-Generierung initialisiert
    },

    generateWaitingPassenger() {
@@ -717,50 +715,37 @@ export default {
      
      // Wenn keine freien Häuser verfügbar, generiere keinen Passagier
      if (availableHouses.length === 0) {
-        console.log('Keine freien Häuser verfügbar für Passagier-Generierung');
        return;
      }
      
      // Wähle zufälliges Haus
      const selectedHouse = availableHouses[Math.floor(Math.random() * availableHouses.length)];
      
-      // Finde verfügbare Straßennamen aus der Map
-      const availableStreets = [];
-      if (this.currentMap.tileStreets) {
-        this.currentMap.tileStreets.forEach(ts => {
-          if (ts.streetNameH && ts.streetNameH.name) {
-            availableStreets.push(ts.streetNameH.name);
+      // Finde die Straße für dieses spezifische Haus
+      let streetName = "Unbekannte Straße";
+      let houseNumber = 1;
+      
+      // Suche nach Straßennamen für das gewählte Haus-Tile
+      const houseTile = this.currentMap.tileStreets?.find(ts => ts.x === selectedHouse.x && ts.y === selectedHouse.y);
+      if (houseTile) {
+        // Bestimme die Straße basierend auf der Haus-Ecke
+        const corner = selectedHouse.house.corner;
+        if (corner === 'lo' || corner === 'ro') {
+          // Horizontale Straße
+          if (houseTile.streetNameH && houseTile.streetNameH.name) {
+            streetName = houseTile.streetNameH.name;
          }
-          if (ts.streetNameV && ts.streetNameV.name) {
-            availableStreets.push(ts.streetNameV.name);
+        } else if (corner === 'lu' || corner === 'ru') {
+          // Vertikale Straße
+          if (houseTile.streetNameV && houseTile.streetNameV.name) {
+            streetName = houseTile.streetNameV.name;
          }
-        });
+        }
      }
      
-      // Wenn keine Straßen in der Map vorhanden, verwende Fallback
-      let streetName, houseNumber;
-      if (availableStreets.length > 0) {
-        // Wähle zufällige Straße aus der Map
-        streetName = availableStreets[Math.floor(Math.random() * availableStreets.length)];
-        // Finde alle Hausnummern für diese Straße
-        const houseNumbersForStreet = this.getHouseNumbersForStreet(streetName);
-        if (houseNumbersForStreet.length > 0) {
-          // Wähle zufällige Hausnummer aus den existierenden
-          houseNumber = houseNumbersForStreet[Math.floor(Math.random() * houseNumbersForStreet.length)];
-        } else {
-          // Fallback falls keine Hausnummern für diese Straße gefunden
-          houseNumber = Math.floor(Math.random() * 200) + 1;
-        }
-        console.log('Verfügbare Straßen:', availableStreets);
-        console.log('Gewählte Straße:', streetName);
-        console.log('Hausnummern für Straße:', houseNumbersForStreet);
-        console.log('Gewählte Hausnummer:', houseNumber);
-      } else {
-        // Fallback falls keine Straßen in der Map
-        streetName = "Unbekannte Straße";
-        houseNumber = Math.floor(Math.random() * 200) + 1;
-        console.log('Keine Straßen in der Map gefunden, verwende Fallback');
-      }
+      // Finde die Hausnummer für dieses spezifische Haus
+      const houseKey = `${selectedHouse.x},${selectedHouse.y},${selectedHouse.house.corner}`;
+      houseNumber = this.houseNumbers[houseKey] || 1;
      
      // Erstelle Passagier
      const passenger = {
@@ -771,14 +756,14 @@ export default {
        tileX: selectedHouse.x,
        tileY: selectedHouse.y,
        houseIndex: selectedHouse.houseIndex,
+        houseCorner: selectedHouse.house.corner, // Speichere auch die Ecke
+        imageIndex: this.generatePassengerImageIndex(), // Zufälliger Bildindex 1-6
        createdAt: Date.now() // Zeitstempel der Erstellung
      };
      
      // Füge Passagier zur Liste hinzu und markiere Haus als belegt
      this.waitingPassengersList.push(passenger);
      this.occupiedHouses.add(selectedHouse.houseId);
-      
-      console.log('Neuer Passagier generiert:', passenger);
    },

    generatePassengerName() {
@@ -796,22 +781,20 @@ export default {
      return `${firstName} ${lastName}`;
    },

+    generatePassengerImageIndex() {
+      // Zufälliger Bildindex 1-6 (1-3 männlich, 4-6 weiblich)
+      return Math.floor(Math.random() * 6) + 1;
+    },
+
    updatePassengerGeneration() {
      const now = Date.now();
      const timeSinceLastGeneration = now - this.lastPassengerGeneration;
      
      if (timeSinceLastGeneration >= this.passengerGenerationInterval) {
-        console.log('Generiere neuen Passagier...', {
-          timeSinceLastGeneration,
-          interval: this.passengerGenerationInterval,
-          currentMap: !!this.currentMap,
-          tileHouses: this.currentMap?.tileHouses?.length || 0
-        });
        this.generateWaitingPassenger();
        this.lastPassengerGeneration = now;
        // Setze nächstes Intervall (10-35 Sekunden)
        this.passengerGenerationInterval = Math.floor(Math.random() * 25000) + 10000;
-        console.log('Nächstes Intervall:', this.passengerGenerationInterval);
      }
    },

@@ -845,9 +828,7 @@ export default {
        return true; // Behalte in der Liste
      });
      
-      if (expiredPassengers.length > 0) {
-        console.log(`${expiredPassengers.length} Passagiere entfernt (abgelaufen):`, expiredPassengers);
-      }
+      // Passagiere wurden entfernt (abgelaufen)
    },

    getPassengerTimeLeft(passenger) {
@@ -1851,9 +1832,39 @@ export default {
          ctx.fillStyle = '#000';
          ctx.fillText(String(num), 0, 0);
        }
+        
+        // Passagier zeichnen (falls vorhanden)
+        this.drawPassengerOnHouse(ctx, h, col, row);
+        
        ctx.restore();
      }
    },
+
+    drawPassengerOnHouse(ctx, house, col, row) {
+      // Finde Passagier für dieses Haus
+      const passenger = this.waitingPassengersList.find(p => 
+        p.tileX === col && p.tileY === row && (p.houseIndex === house.corner || p.houseCorner === house.corner)
+      );
+      
+      if (!passenger || !this.passengerImages[passenger.imageIndex]) {
+        return; // Kein Passagier oder Bild nicht geladen
+      }
+      
+      const passengerImg = this.passengerImages[passenger.imageIndex];
+      const PASSENGER_SIZE = 40; // Größe des Passagiers
+      const HOUSE_H = 150; // Haushöhe (muss mit drawHousesOnMainCanvas übereinstimmen)
+      
+      // Zeichne Passagier auf dem Boden vor dem Haus (stehend)
+      // Der untere Rand der Figur soll mit dem unteren Rand des Hauses ausgerichtet sein
+      ctx.drawImage(
+        passengerImg, 
+        -PASSENGER_SIZE/2, 
+        HOUSE_H/2 - PASSENGER_SIZE, // Unterer Rand der Figur am unteren Rand des Hauses
+        PASSENGER_SIZE, 
+        PASSENGER_SIZE
+      );
+    },
+
    // Haltelinien: 120px vom Rand, 5px dick, 40px breit, an allen vier Zufahrten
    drawStopLinesOnMainCanvas(ctx, size, approaches = { top:true, right:true, bottom:true, left:true }) {
      const margin = 120; // Basis-Abstand vom Rand
@@ -2114,6 +2125,20 @@ export default {
      img.src = '/images/taxi/house_small.png';
    },

+    loadPassengerImages() {
+      // Lade alle 6 Passagier-Bilder (1-3 männlich, 4-6 weiblich)
+      for (let i = 1; i <= 6; i++) {
+        const img = new Image();
+        img.onload = () => {
+          this.passengerImages[i] = img;
+        };
+        img.onerror = () => {
+          console.warn(`Fehler beim Laden von passenger${i}.png`);
+        };
+        img.src = `/images/taxi/passenger${i}.png`;
+      }
+    },
+    
    async loadMaps() {
      try {
        const response = await apiClient.get('/api/taxi-maps/maps');