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

Änderung: Aktualisierung der Logik zur Darstellung von Straßennamen im Taxi-Spiel

Browse Source 
Ä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.
This commit is contained in:
Torsten Schulz (local)
2025-09-17 19:04:20 +02:00
parent 9db7c88086
commit 547c81b867
1 changed files with 32 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/views/minigames/TaxiGame.vue
View File

@@ -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) {