Änderung: Überarbeitung der Steuerungsmechanik und Benutzeroberfläche im TaxiGame.vue

Änderungen:
- Entfernung von veralteten Legenden und Zielen zur Vereinfachung der Benutzeroberfläche.
- Implementierung einer neuen Lenkungslogik mit diskreten Steuerungsintervallen, die geschwindigkeitsabhängig ist.
- Anpassung der Bewegungsgeschwindigkeit des Taxis zur Verbesserung der Spielmechanik.
- Bereinigung von nicht mehr benötigten CSS-Klassen zur Optimierung des Codes.

Diese Anpassungen verbessern die Benutzererfahrung und die Spielmechanik im Taxi-Minispiel erheblich.

frontend/src/views/minigames/TaxiGame.vue

@@ -34,27 +34,12 @@
                   <span class="legend-key">← A</span>
                   <span class="legend-text">Links lenken</span>
                 </div>
-                <div class="legend-item">
-                  <span class="legend-key">S</span>
-                  <span class="legend-text">Passagier aufnehmen</span>
-                </div>
-                <div class="legend-item">
-                  <span class="legend-key">Q</span>
-                  <span class="legend-text">Passagier absetzen</span>
-                </div>
-                <div class="legend-item">
-                  <span class="legend-key">Enter</span>
-                  <span class="legend-text">Tanken</span>
-                </div>
               </div>
               
               <!-- Ziele -->
               <div class="game-objectives">
                 <h4>Ziele</h4>
                 <ul>
-                  <li>Fahre zu <span class="objective-green">grünen Markierungen</span> um Passagiere aufzunehmen</li>
-                  <li>Fahre zu <span class="objective-red">roten Markierungen</span> um Passagiere abzuliefern</li>
-                  <li><span class="objective-yellow">Gelbe Markierungen</span> sind Tankstellen</li>
                   <li>Vermeide Kollisionen mit anderen Fahrzeugen</li>
                 </ul>
               </div>
@@ -207,6 +192,8 @@ export default {
       gameLoop: null,
       lastSpeedChange: 0,
       speedChangeInterval: 100, // 200ms = 0.2 Sekunden
+      lastSteerChange: 0,
+      steeringBaseInterval: 300, // Basisintervall in ms bei sehr niedriger Geschwindigkeit
       canvas: null,
       ctx: null,
       minimapCanvas: null,
@@ -470,21 +457,36 @@ export default {
         }
       }
       
-      // Lenkung - abhängig von der Geschwindigkeit
+      // Lenkung in diskreten 11,25°-Schritten mit geschwindigkeitsabhängiger Verzögerung
-      const baseSteeringSpeed = 0.07; // Basis-Lenkgeschwindigkeit für 20 km/h (Stufe 4)
+      const steeringAngle = Math.PI / 16; // 11,25°
-      const currentSpeedLevel = this.taxi.speed; // 0-24 (entspricht 0-120 km/h)
+      const speedLevel = this.taxi.speed; // 0..24 (5 km/h je Stufe)
-      const steeringSpeed = baseSteeringSpeed * (currentSpeedLevel / 4); // Skaliert auf Stufe 4
+      // Nicht-lineare Beschleunigung der Eingabe: schneller bei hoher Geschwindigkeit
-      
+      const minInterval = 4;    // schnellste Annahme (ms) - erneut halbiert
-      if (this.keys['ArrowLeft'] || this.keys['a'] || this.keys['A']) {
+      const maxInterval = 60;   // langsamste Annahme (ms) - erneut halbiert
-        this.taxi.angle -= steeringSpeed;
+      const factor = Math.pow(speedLevel / this.taxi.maxSpeed, 1.5); // 0..1, gewichtet
-      }
+      const steeringInterval = Math.max(minInterval, maxInterval - (maxInterval - minInterval) * factor);
-      if (this.keys['ArrowRight'] || this.keys['d'] || this.keys['D']) {
+
-        this.taxi.angle += steeringSpeed;
+      // Richtung bestimmen (-1 links, +1 rechts)
+      let steerDir = 0;
+      if (this.keys['ArrowLeft'] || this.keys['a'] || this.keys['A']) steerDir = -1;
+      if (this.keys['ArrowRight'] || this.keys['d'] || this.keys['D']) steerDir = steerDir === -1 ? 0 : 1; // beide gedrückt -> neutral
+
+      if (steerDir !== 0) {
+        const elapsed = currentTime - this.lastSteerChange;
+        const steps = Math.floor(elapsed / steeringInterval);
+        if (steps > 0) {
+          this.taxi.angle += steerDir * steeringAngle * steps;
+          // Restzeit beibehalten, damit Timing gleichmäßig bleibt
+          this.lastSteerChange = currentTime - (elapsed % steeringInterval);
+        }
+      } else {
+        // Keine Lenkung gedrückt: Timer resetten, um Burst bei erstem Druck zu vermeiden
+        this.lastSteerChange = currentTime;
       }
       
       // Aktualisiere Position (1/4 der ursprünglichen Bewegung)
-      this.taxi.x += Math.cos(this.taxi.angle) * this.taxi.speed * 0.25;
+      this.taxi.x += Math.cos(this.taxi.angle) * this.taxi.speed * 0.1;
-      this.taxi.y += Math.sin(this.taxi.angle) * this.taxi.speed * 0.25;
+      this.taxi.y += Math.sin(this.taxi.angle) * this.taxi.speed * 0.1;
       
       // Aktualisiere aktuelle Tile-Position
       this.updateCurrentTile();
@@ -1162,25 +1164,6 @@ export default {
            offsetY = (canvas.height - 8 * tileSize) / 2;
          }
       
-      // Passagiere (grün)
-      ctx.fillStyle = '#4CAF50';
-      this.passengers.forEach(passenger => {
-        if (!passenger.pickedUp) {
-          ctx.beginPath();
-          ctx.arc(offsetX + passenger.x * scaleX, offsetY + passenger.y * scaleY, 2, 0, 2 * Math.PI);
-          ctx.fill();
-        }
-      });
-      
-      // Ziele (rot)
-      ctx.fillStyle = '#F44336';
-      this.destinations.forEach(dest => {
-        if (!dest.completed) {
-          ctx.beginPath();
-          ctx.arc(offsetX + dest.x * scaleX, offsetY + dest.y * scaleY, 2, 0, 2 * Math.PI);
-          ctx.fill();
-        }
-      });
       
       
          // Taxi (blau) - Position basierend auf aktueller Tile-Position
@@ -1606,20 +1589,6 @@ export default {
   border: 1px solid #7E471B;
 }
 
-.objective-green {
-  color: #4CAF50;
-  font-weight: bold;
-}
-
-.objective-red {
-  color: #F44336;
-  font-weight: bold;
-}
-
-.objective-yellow {
-  color: #FF9800;
-  font-weight: bold;
-}
 
 /* Responsive Design */
 @media (max-width: 1024px) {