From a19e255ca7a5082e45dd0a1ac93a631d7e0c8f94 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 17 Sep 2025 09:39:37 +0200
Subject: [PATCH] =?UTF-8?q?=C3=84nderung:=20=C3=9Cberarbeitung=20der=20Ste?=
 =?UTF-8?q?uerungsmechanik=20und=20Benutzeroberfl=C3=A4che=20im=20TaxiGame?=
 =?UTF-8?q?.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ä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 | 89 ++++++++---------------
 1 file changed, 29 insertions(+), 60 deletions(-)

diff --git a/frontend/src/views/minigames/TaxiGame.vue b/frontend/src/views/minigames/TaxiGame.vue
index e18b2eb..ce6bd28 100644
--- a/frontend/src/views/minigames/TaxiGame.vue
+++ b/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
-      const baseSteeringSpeed = 0.07; // Basis-Lenkgeschwindigkeit für 20 km/h (Stufe 4)
-      const currentSpeedLevel = this.taxi.speed; // 0-24 (entspricht 0-120 km/h)
-      const steeringSpeed = baseSteeringSpeed * (currentSpeedLevel / 4); // Skaliert auf Stufe 4
-      
-      if (this.keys['ArrowLeft'] || this.keys['a'] || this.keys['A']) {
-        this.taxi.angle -= steeringSpeed;
-      }
-      if (this.keys['ArrowRight'] || this.keys['d'] || this.keys['D']) {
-        this.taxi.angle += steeringSpeed;
+      // Lenkung in diskreten 11,25°-Schritten mit geschwindigkeitsabhängiger Verzögerung
+      const steeringAngle = Math.PI / 16; // 11,25°
+      const speedLevel = this.taxi.speed; // 0..24 (5 km/h je Stufe)
+      // Nicht-lineare Beschleunigung der Eingabe: schneller bei hoher Geschwindigkeit
+      const minInterval = 4;    // schnellste Annahme (ms) - erneut halbiert
+      const maxInterval = 60;   // langsamste Annahme (ms) - erneut halbiert
+      const factor = Math.pow(speedLevel / this.taxi.maxSpeed, 1.5); // 0..1, gewichtet
+      const steeringInterval = Math.max(minInterval, maxInterval - (maxInterval - minInterval) * factor);
+
+      // 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.y += Math.sin(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.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) {