From 07e01ebd77218e0a9a046c4f4560cb952ea61b43 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 15 Sep 2025 19:00:07 +0200
Subject: [PATCH] =?UTF-8?q?=C3=84nderung:=20=C3=9Cberarbeitung=20der=20Tax?=
 =?UTF-8?q?iToolsView.vue=20zur=20Verbesserung=20der=20Benutzeroberfl?=
 =?UTF-8?q?=C3=A4che?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Änderungen:
- Anpassung der Darstellung des Spielbretts durch Verwendung von Zeilen und Zellen für eine bessere Struktur.
- Einführung einer neuen Methode `getCellAtPosition`, um Zellen dynamisch zu generieren und leere Zellen darzustellen.
- Verbesserung der Interaktivität durch Hinzufügen von Tooltipps für die Zellpositionen.
- Aktualisierung der CSS-Klassen für eine verbesserte visuelle Darstellung und Benutzererfahrung.

Diese Anpassungen optimieren die Benutzeroberfläche des Taxi-Minispiels und verbessern die Interaktion mit dem Spielbrett.
---
 frontend/src/views/admin/TaxiToolsView.vue | 106 +++++++++++++++------
 1 file changed, 75 insertions(+), 31 deletions(-)

diff --git a/frontend/src/views/admin/TaxiToolsView.vue b/frontend/src/views/admin/TaxiToolsView.vue
index 1be8455..de0f2fc 100644
--- a/frontend/src/views/admin/TaxiToolsView.vue
+++ b/frontend/src/views/admin/TaxiToolsView.vue
@@ -78,18 +78,26 @@
                   </div>
                   <div class="board-grid" :style="boardGridStyle">
                     <div 
-                      v-for="(cell, key) in boardCells" 
-                      :key="key"
-                      class="board-cell"
-                      :class="getCellClasses(cell, key)"
-                      @click="selectCell(key)"
+                      v-for="y in range(minY, maxY)" 
+                      :key="`row-${y}`"
+                      class="board-row"
                     >
-                      <img 
-                        v-if="cell.tileType"
-                        :src="`/images/taxi/map-${cell.tileType}.svg`"
-                        :alt="cell.tileType"
-                        class="tile-image"
-                      />
+                      <div 
+                        v-for="x in range(minX, maxX)" 
+                        :key="`${x},${y}`"
+                        class="board-cell"
+                        :class="getCellClasses(getCellAtPosition(x, y), `${x},${y}`)"
+                        @click="selectCell(`${x},${y}`)"
+                        :title="`Position: (${x}, ${y})`"
+                      >
+                        <img 
+                          v-if="getCellAtPosition(x, y)?.tileType"
+                          :src="`/images/taxi/map-${getCellAtPosition(x, y).tileType}.svg`"
+                          :alt="getCellAtPosition(x, y).tileType"
+                          class="tile-image"
+                        />
+                        <div v-else class="position-label">{{x}},{{y}}</div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -173,18 +181,26 @@
                   </div>
                   <div class="board-grid" :style="boardGridStyle">
                     <div 
-                      v-for="(cell, key) in boardCells" 
-                      :key="key"
-                      class="board-cell"
-                      :class="getCellClasses(cell, key)"
-                      @click="selectCell(key)"
+                      v-for="y in range(minY, maxY)" 
+                      :key="`row-${y}`"
+                      class="board-row"
                     >
-                      <img 
-                        v-if="cell.tileType"
-                        :src="`/images/taxi/map-${cell.tileType}.svg`"
-                        :alt="cell.tileType"
-                        class="tile-image"
-                      />
+                      <div 
+                        v-for="x in range(minX, maxX)" 
+                        :key="`${x},${y}`"
+                        class="board-cell"
+                        :class="getCellClasses(getCellAtPosition(x, y), `${x},${y}`)"
+                        @click="selectCell(`${x},${y}`)"
+                        :title="`Position: (${x}, ${y})`"
+                      >
+                        <img 
+                          v-if="getCellAtPosition(x, y)?.tileType"
+                          :src="`/images/taxi/map-${getCellAtPosition(x, y).tileType}.svg`"
+                          :alt="getCellAtPosition(x, y).tileType"
+                          class="tile-image"
+                        />
+                        <div v-else class="position-label">{{x}},{{y}}</div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -470,20 +486,20 @@ export default {
       
       switch (tileType) {
         case 'cornertopleft':
-          // Nur rechts und unten (wo man weitere Tiles anschließen kann)
-          neighbors.push({ x: x+1, y: y }, { x: x, y: y+1 });
+          // Nur links und oben (Kurve von oben nach links)
+          neighbors.push({ x: x-1, y: y }, { x: x, y: y-1 });
           break;
         case 'cornertopright':
-          // Nur links und unten
-          neighbors.push({ x: x-1, y: y }, { x: x, y: y+1 });
-          break;
-        case 'cornerbottomleft':
-          // Nur rechts und oben
+          // Nur rechts und oben (Kurve von oben nach rechts)
           neighbors.push({ x: x+1, y: y }, { x: x, y: y-1 });
           break;
+        case 'cornerbottomleft':
+          // Nur links und unten (Kurve von unten nach links)
+          neighbors.push({ x: x-1, y: y }, { x: x, y: y+1 });
+          break;
         case 'cornerbottomright':
-          // Nur links und oben
-          neighbors.push({ x: x-1, y: y }, { x: x, y: y-1 });
+          // Nur rechts und unten (Kurve von unten nach rechts)
+          neighbors.push({ x: x+1, y: y }, { x: x, y: y+1 });
           break;
         case 'horizontal':
           // Nur links und rechts (horizontal = nur horizontal anschließbar)
@@ -576,6 +592,24 @@ export default {
       return this.boardCells[key]?.tileType;
     },
 
+    getCellAtPosition(x, y) {
+      const key = `${x},${y}`;
+      const cell = this.boardCells[key];
+      if (cell) {
+        return cell;
+      }
+      // Erstelle leere Zelle für Grid-Position
+      return { tileType: null, x, y };
+    },
+
+    range(start, end) {
+      const result = [];
+      for (let i = start; i <= end; i++) {
+        result.push(i);
+      }
+      return result;
+    },
+
     isTileCompatible(tileType, neighbors) {
       // Vereinfachte Kompatibilitätsprüfung
       // In der Realität würde hier die komplexe Logik aus streetCoordinates verwendet
@@ -886,6 +920,10 @@ export default {
   min-height: 200px;
 }
 
+.board-row {
+  display: contents;
+}
+
 .board-cell {
   width: 50px;
   height: 50px;
@@ -904,6 +942,12 @@ export default {
   transform: scale(1.05);
 }
 
+.position-label {
+  font-size: 10px;
+  color: #666;
+  font-weight: bold;
+}
+
 .board-cell.selected {
   border: 3px solid #ffd700; /* Gelb für ausgewählte Zelle */
   box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);