Änderung: Überarbeitung der TaxiToolsView.vue zur Verbesserung der Benutzeroberfläche

Ä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

@@ -78,18 +78,26 @@
                   </div>
                   <div class="board-grid" :style="boardGridStyle">
                     <div 
-                      v-for="(cell, key) in boardCells" 
+                      v-for="y in range(minY, maxY)" 
-                      :key="key"
+                      :key="`row-${y}`"
-                      class="board-cell"
+                      class="board-row"
-                      :class="getCellClasses(cell, key)"
-                      @click="selectCell(key)"
                     >
-                      <img 
+                      <div 
-                        v-if="cell.tileType"
+                        v-for="x in range(minX, maxX)" 
-                        :src="`/images/taxi/map-${cell.tileType}.svg`"
+                        :key="`${x},${y}`"
-                        :alt="cell.tileType"
+                        class="board-cell"
-                        class="tile-image"
+                        :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" 
+                      v-for="y in range(minY, maxY)" 
-                      :key="key"
+                      :key="`row-${y}`"
-                      class="board-cell"
+                      class="board-row"
-                      :class="getCellClasses(cell, key)"
-                      @click="selectCell(key)"
                     >
-                      <img 
+                      <div 
-                        v-if="cell.tileType"
+                        v-for="x in range(minX, maxX)" 
-                        :src="`/images/taxi/map-${cell.tileType}.svg`"
+                        :key="`${x},${y}`"
-                        :alt="cell.tileType"
+                        class="board-cell"
-                        class="tile-image"
+                        :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)
+          // Nur links und oben (Kurve von oben nach links)
-          neighbors.push({ x: x+1, y: y }, { x: x, y: y+1 });
+          neighbors.push({ x: x-1, y: y }, { x: x, y: y-1 });
           break;
         case 'cornertopright':
-          // Nur links und unten
+          // 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 rechts und oben
           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
+          // Nur rechts und unten (Kurve von unten nach rechts)
-          neighbors.push({ x: x-1, y: y }, { x: x, y: y-1 });
+          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);