Ä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.

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:', {
+      // Passagier-Generierung initialisiert
-        interval: this.passengerGenerationInterval,
-        currentMap: !!this.currentMap,
-        tileHouses: this.currentMap?.tileHouses?.length || 0
-      });
     },
 
     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
+      // Finde die Straße für dieses spezifische Haus
-      const availableStreets = [];
+      let streetName = "Unbekannte Straße";
-      if (this.currentMap.tileStreets) {
+      let houseNumber = 1;
-        this.currentMap.tileStreets.forEach(ts => {
+      
-          if (ts.streetNameH && ts.streetNameH.name) {
+      // Suche nach Straßennamen für das gewählte Haus-Tile
-            availableStreets.push(ts.streetNameH.name);
+      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) {
+        } else if (corner === 'lu' || corner === 'ru') {
-            availableStreets.push(ts.streetNameV.name);
+          // Vertikale Straße
+          if (houseTile.streetNameV && houseTile.streetNameV.name) {
+            streetName = houseTile.streetNameV.name;
           }
-        });
+        }
       }
       
-      // Wenn keine Straßen in der Map vorhanden, verwende Fallback
+      // Finde die Hausnummer für dieses spezifische Haus
-      let streetName, houseNumber;
+      const houseKey = `${selectedHouse.x},${selectedHouse.y},${selectedHouse.house.corner}`;
-      if (availableStreets.length > 0) {
+      houseNumber = this.houseNumbers[houseKey] || 1;
-        // 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');
-      }
       
       // 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) {
+      // Passagiere wurden entfernt (abgelaufen)
-        console.log(`${expiredPassengers.length} Passagiere entfernt (abgelaufen):`, expiredPassengers);
-      }
     },
 
     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');