Änderung: Hinzufügung der Ampel-Logik zur Taxi-Map

Änderungen:
- Erweiterung des TaxiMapTile-Modells um die Spalte trafficLight zur Verwaltung von Ampelzuständen.
- Anpassung der TaxiMapService-Logik zur Unterstützung der Ampel-Updates und -Zustände.
- Implementierung von Methoden zur Steuerung und Anzeige von Ampeln in der Benutzeroberfläche, einschließlich der neuen Funktionen in TaxiToolsView.vue und TaxiGame.vue.
- Verbesserung der Darstellung und Logik zur Ampelsteuerung im Spiel, einschließlich der visuellen Darstellung und der Interaktion mit Ampeln.

Diese Anpassungen verbessern die Funktionalität und Benutzererfahrung im Taxi-Minispiel erheblich, indem sie eine realistischere Verkehrssteuerung ermöglichen.

frontend/src/views/admin/TaxiToolsView.vue

@@ -98,6 +98,7 @@
                             <div class="house-door" :class="doorClass(rotation)"></div>
                           </div>
                         </div>
+                        <img v-if="getCellAtPosition(x, y)?.extraTrafficLight" src="/images/taxi/redlight.svg" class="traffic-overlay" alt="Ampel" />
                       </div>
                     </div>
                   </div>
@@ -178,6 +179,11 @@
                         </div>
                       </div>
                     </div>
+                    <div class="trafficlight-row">
+                      <button class="trafficlight-btn" @click="toggleTrafficLight">
+                        <img src="/images/taxi/redlight.svg" alt="Ampel" class="trafficlight-icon" />
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -249,6 +255,7 @@
                           :alt="getCellAtPosition(x, y).tileType"
                           class="tile-image"
                         />
+                        <img v-if="getCellAtPosition(x, y)?.extraTrafficLight" src="/images/taxi/redlight.svg" class="traffic-overlay" alt="Ampel" />
                         <div v-if="getCellAtPosition(x, y)?.extraHouses" class="house-overlay">
                           <div 
                             v-for="(rotation, corner) in getCellAtPosition(x, y).extraHouses" 
@@ -339,6 +346,11 @@
                         </div>
                       </div>
                     </div>
+                    <div class="trafficlight-row">
+                      <button class="trafficlight-btn" @click="toggleTrafficLight">
+                        <img src="/images/taxi/redlight.svg" alt="Ampel" class="trafficlight-icon" />
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -795,6 +807,9 @@ export default {
             // Neue Struktur: Mapping corner -> rotation
             this.boardCells[key].extraHouses = { ...t.meta.houses };
           }
+          if (t.meta && t.meta.trafficLight) {
+            this.boardCells[key].extraTrafficLight = true;
+          }
         }
         // Straßennamen aus tileStreets übernehmen
         if (Array.isArray(map.tileStreets)) {
@@ -867,6 +882,13 @@ export default {
       this.computeAllowedHouseCorners();
     },
 
+    toggleTrafficLight() {
+      if (!this.selectedCellKey) return;
+      const cell = this.boardCells[this.selectedCellKey] || { x: 0, y: 0, tileType: null };
+      const updated = { ...cell, extraTrafficLight: !cell.extraTrafficLight };
+      this.$set ? this.$set(this.boardCells, this.selectedCellKey, updated) : (this.boardCells[this.selectedCellKey] = updated);
+    },
+
     startPlaceHouse(rotationDeg) {
       // Neuer Flow: Rotation wählen, nachdem Ecke gewählt wurde
       if (!this.selectedCellKey || !this.pendingCorner) return;
@@ -1155,7 +1177,10 @@ export default {
             x: c.x, 
             y: c.y, 
             tileType: c.tileType,
-            meta: c.extraHouses ? { houses: { ...c.extraHouses } } : null
+          meta: {
+            ...(c.extraHouses ? { houses: { ...c.extraHouses } } : {}),
+            ...(c.extraTrafficLight ? { trafficLight: true } : {})
+          }
           }));
         const tileStreetNames = this.collectTileStreetNames();
         const tileHouses = this.collectTileHouses();
@@ -1478,10 +1503,15 @@ export default {
 .house-square.corner-ro { position: absolute; top: 3px; right: 3px; }
 .house-square.corner-lu { position: absolute; bottom: 3px; left: 3px; }
 .house-square.corner-ru { position: absolute; bottom: 3px; right: 3px; }
+.traffic-overlay { position: absolute; width: 25px; height: 25px; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
 .corner-chooser { margin-top: 8px; display: flex; gap: 6px; }
 .corner-btn { padding: 3px; border: 1px solid #ccc; border-radius: 4px; background: #f7f7f7; cursor: pointer; }
 .corner-btn:hover { background: #eee; }
 
+.trafficlight-row { margin-top: 10px; }
+.trafficlight-btn { padding: 4px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }
+.trafficlight-icon { width: 40px; height: 40px; }
+
 .corner-preview { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
 .corner-preview .q { width: 100%; height: 100%; background: #000; display: block; }
 .corner-preview .q.active { background: #d60000; }