torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Ä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.
This commit is contained in:
Torsten Schulz (local)
2025-09-15 19:00:07 +02:00
parent f230849a5c
commit 07e01ebd77
1 changed files with 75 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/views/admin/TaxiToolsView.vue
View File

@@ -78,18 +78,26 @@
</div>
<div class="board-grid" :style="boardGridStyle">
<div
v-for="(cell, key) in boardCells"
:key="key"
v-for="y in range(minY, maxY)"
:key="`row-${y}`"
class="board-row"
>
<div
v-for="x in range(minX, maxX)"
:key="`${x},${y}`"
class="board-cell"
:class="getCellClasses(cell, key)"
@click="selectCell(key)"
:class="getCellClasses(getCellAtPosition(x, y), `${x},${y}`)"
@click="selectCell(`${x},${y}`)"
:title="`Position: (${x}, ${y})`"
>
<img
v-if="cell.tileType"
:src="`/images/taxi/map-${cell.tileType}.svg`"
:alt="cell.tileType"
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"
v-for="y in range(minY, maxY)"
:key="`row-${y}`"
class="board-row"
>
<div
v-for="x in range(minX, maxX)"
:key="`${x},${y}`"
class="board-cell"
:class="getCellClasses(cell, key)"
@click="selectCell(key)"
:class="getCellClasses(getCellAtPosition(x, y), `${x},${y}`)"
@click="selectCell(`${x},${y}`)"
:title="`Position: (${x}, ${y})`"
>
<img
v-if="cell.tileType"
:src="`/images/taxi/map-${cell.tileType}.svg`"
:alt="cell.tileType"
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);