From 547c81b867c0ec0b89550f7442a249116d6bc6f8 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 17 Sep 2025 19:04:20 +0200
Subject: [PATCH] =?UTF-8?q?=C3=84nderung:=20Aktualisierung=20der=20Logik?=
 =?UTF-8?q?=20zur=20Darstellung=20von=20Stra=C3=9Fennamen=20im=20Taxi-Spie?=
 =?UTF-8?q?l?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Änderungen:
- Umbenennung der Methode `drawStreetNumbersOnMainCanvas` in `drawStreetNamesOnMainCanvas` zur besseren Klarheit.
- Anpassung der Logik zur Berechnung der absoluten Position von Straßennamen unter Berücksichtigung von Kartenoffsets.
- Verbesserung der Textdarstellung für Straßennamen mit neuen Zeichenmethoden und Anpassungen der Schriftart.

Diese Anpassungen verbessern die Lesbarkeit und Darstellung der Straßennamen im Taxi-Minispiel erheblich.
---
 frontend/src/views/minigames/TaxiGame.vue | 68 +++++++++++------------
 1 file changed, 32 insertions(+), 36 deletions(-)

diff --git a/frontend/src/views/minigames/TaxiGame.vue b/frontend/src/views/minigames/TaxiGame.vue
index 5a0f4e3..4867af4 100644
--- a/frontend/src/views/minigames/TaxiGame.vue
+++ b/frontend/src/views/minigames/TaxiGame.vue
@@ -1116,8 +1116,10 @@ export default {
             if (this.tiles.images[tileType]) {
               this.ctx.drawImage(this.tiles.images[tileType], 0, 0, tileSize, tileSize);
             }
-            // Straßennummern auf Haupt-Canvas zeichnen
-            this.drawStreetNumbersOnMainCanvas(this.ctx, tileSize, tileType, this.currentTile.col, this.currentTile.row);
+            // Straßennamen auf Haupt-Canvas zeichnen
+            const absCol = this.currentTile.col + (this.currentMap.offsetX || 0);
+            const absRow = this.currentTile.row + (this.currentMap.offsetY || 0);
+            this.drawStreetNamesOnMainCanvas(this.ctx, tileSize, tileType, absCol, absRow);
           }
         }
       }
@@ -1133,52 +1135,46 @@ export default {
         if (this.tiles.images[tileType]) {
           this.ctx.drawImage(this.tiles.images[tileType], 0, 0, tileSize, tileSize);
         }
-        // Straßennummern auch im Fallback dezent zeichnen (Spalten/Zeilen 0)
-        this.drawStreetNumbersOnMainCanvas(this.ctx, tileSize, tileType, 0, 0);
       }
     },
 
-    drawStreetNumbersOnMainCanvas(ctx, size, tileType, col, row) {
+    drawStreetNamesOnMainCanvas(ctx, size, tileType, col, row) {
       if (!this.currentMap || !Array.isArray(this.currentMap.tileStreets)) return;
-      const absCol = col + (this.currentMap.offsetX || 0);
-      const absRow = row + (this.currentMap.offsetY || 0);
-      const entry = this.currentMap.tileStreets.find(ts => ts.x === absCol && ts.y === absRow);
+      const entry = this.currentMap.tileStreets.find(ts => ts.x === col && ts.y === row);
       if (!entry) return;
 
-      ctx.save();
-      ctx.fillStyle = 'rgba(10,10,10,0.8)';
-      ctx.font = `${Math.max(11, Math.floor(size * 0.06) - 1)}px sans-serif`;
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-
-      const left = size * 0.2;
-      const right = size * 0.8;
-      const top = size * 0.2;
-      const bottom = size * 0.8;
+      const fontPx = 12;
+      const drawText = (text, px, py, rot = 0, selected = false) => {
+        ctx.save();
+        ctx.translate(px, py);
+        if (rot) ctx.rotate(rot);
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.font = `bold ${fontPx}px sans-serif`;
+        ctx.lineWidth = Math.max(2, Math.floor(fontPx / 6));
+        ctx.strokeStyle = 'rgba(255,255,255,0.95)';
+        ctx.strokeText(text, 0, 0);
+        ctx.fillStyle = selected ? '#ff4d4d' : '#222';
+        ctx.fillText(text, 0, 0);
+        ctx.restore();
+      };
 
       const hName = entry.streetNameH?.name || null;
       const vName = entry.streetNameV?.name || null;
-      const hNum = hName ? this.getStreetNumberByName(hName) : null;
-      const vNum = vName ? this.getStreetNumberByName(vName) : null;
 
-      const t = tileType;
-      const hLeftTiles = new Set(['cornerbottomleft','cornertopleft','horizontal','tdown','tup','cross','fuelhorizontal','tleft']);
-      const hRightTiles = new Set(['cornerbottomright','cornertopright','tright']);
-      const vTopTiles = new Set(['cornertopleft','cornertopright','vertical','tup','tleft','tright','cross','fuelvertical']);
-      const vBottomTiles = new Set(['cornerbottomleft','cornerbottomright','tdown']);
-
-      if (hNum !== null) {
-        const hx = hRightTiles.has(t) ? right : left;
-        const hy = size * 0.5 + 1; // 1px nach unten
-        ctx.fillText(String(hNum), hx, hy);
-      }
-      if (vNum !== null) {
-        const vx = size * 0.5;
-        const vy = vTopTiles.has(t) ? top : (vBottomTiles.has(t) ? bottom : top);
-        ctx.fillText(String(vNum), vx, vy);
+      if (vName) {
+        const sel = this.selectedStreetName && this.selectedStreetName === vName;
+        const cx = size / 2;
+        drawText(vName, cx, fontPx +1, 0, sel);
+        drawText(vName, cx, size - fontPx -1, 0, sel);
       }
 
-      ctx.restore();
+      if (hName) {
+        const sel = this.selectedStreetName && this.selectedStreetName === hName;
+        const cy = size / 2;
+        drawText(hName, fontPx, cy, -Math.PI / 2, sel);
+        drawText(hName, size - fontPx, cy, -Math.PI / 2, sel);
+      }
     },
     
     getTileType(row, col, rows, cols) {