c3jones3/WebFactory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update js/ui.js

Browse Source
This commit is contained in:
c3jones3
2026-01-13 18:45:39 +00:00
parent d79b63cfb1
commit 4577d65163
1 changed files with 30 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
js/ui.js
View File

@@ -248,21 +248,37 @@ const UI = {
const minimap = document.getElementById('minimap'); const minimap = document.getElementById('minimap');
minimap.addEventListener('click', (e) => { minimap.addEventListener('click', (e) => {
const rect = minimap.getBoundingClientRect(); const rect = minimap.getBoundingClientRect();
const x = (e.clientX - rect.left) / minimap.width; const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / minimap.height; const y = (e.clientY - rect.top) / rect.height;
Renderer.camera.x = x * CONFIG.MAP_WIDTH * CONFIG.TILE_SIZE * Renderer.camera.zoom - Renderer.canvas.width / 2; Renderer.camera.x = x * CONFIG.MAP_WIDTH * CONFIG.TILE_SIZE * Renderer.camera.zoom - Renderer.canvas.width / 2;
Renderer.camera.y = y * CONFIG.MAP_HEIGHT * CONFIG.TILE_SIZE * Renderer.camera.zoom - Renderer.canvas.height / 2; Renderer.camera.y = y * CONFIG.MAP_HEIGHT * CONFIG.TILE_SIZE * Renderer.camera.zoom - Renderer.canvas.height / 2;
}); });
// Handle resize
window.addEventListener('resize', () => this.resizeMinimap());
this.resizeMinimap();
},
// Resize minimap canvas to match display size
resizeMinimap() {
const canvas = document.getElementById('minimap');
if (!canvas) return;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
}, },
// Update minimap // Update minimap
updateMinimap() { updateMinimap() {
const canvas = document.getElementById('minimap'); const canvas = document.getElementById('minimap');
if (!canvas) return; if (!canvas || canvas.width === 0 || canvas.height === 0) return;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const scale = canvas.width / CONFIG.MAP_WIDTH; const scaleX = canvas.width / CONFIG.MAP_WIDTH;
const scaleY = canvas.height / CONFIG.MAP_HEIGHT;
const scale = Math.min(scaleX, scaleY);
// Clear // Clear
ctx.fillStyle = '#1a2a1a'; ctx.fillStyle = '#1a2a1a';
@@ -275,7 +291,7 @@ const UI = {
if (tile?.resource && tile.amount > 0) { if (tile?.resource && tile.amount > 0) {
const colors = { iron: '#8899bb', copper: '#cc9966', coal: '#444' }; const colors = { iron: '#8899bb', copper: '#cc9966', coal: '#444' };
ctx.fillStyle = colors[tile.resource] || '#666'; ctx.fillStyle = colors[tile.resource] || '#666';
ctx.fillRect(x * scale, y * scale, scale + 0.5, scale + 0.5); ctx.fillRect(x * scaleX, y * scaleY, scaleX + 0.5, scaleY + 0.5);
} }
} }
} }
@@ -284,30 +300,30 @@ const UI = {
ctx.fillStyle = '#ffaa00'; ctx.fillStyle = '#ffaa00';
Buildings.list.forEach(b => { Buildings.list.forEach(b => {
const size = Utils.getBuildingSize(b.type); const size = Utils.getBuildingSize(b.type);
ctx.fillRect(b.x * scale, b.y * scale, size.w * scale + 0.5, size.h * scale + 0.5); ctx.fillRect(b.x * scaleX, b.y * scaleY, size.w * scaleX + 0.5, size.h * scaleY + 0.5);
}); });
// Draw towers // Draw towers
ctx.fillStyle = '#4a9eff'; ctx.fillStyle = '#4a9eff';
Towers.list.forEach(t => { Towers.list.forEach(t => {
ctx.fillRect(t.x * scale, t.y * scale, scale + 0.5, scale + 0.5); ctx.fillRect(t.x * scaleX, t.y * scaleY, scaleX + 0.5, scaleY + 0.5);
}); });
// Draw enemies // Draw enemies
ctx.fillStyle = '#ff4444'; ctx.fillStyle = '#ff4444';
Enemies.list.forEach(e => { Enemies.list.forEach(e => {
const ex = e.x / CONFIG.TILE_SIZE * scale; const ex = e.x / CONFIG.TILE_SIZE * scaleX;
const ey = e.y / CONFIG.TILE_SIZE * scale; const ey = e.y / CONFIG.TILE_SIZE * scaleY;
ctx.beginPath(); ctx.beginPath();
ctx.arc(ex, ey, 2, 0, Math.PI * 2); ctx.arc(ex, ey, Math.max(2, scale * 0.5), 0, Math.PI * 2);
ctx.fill(); ctx.fill();
}); });
// Draw viewport // Draw viewport
const viewX = Renderer.camera.x / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scale; const viewX = Renderer.camera.x / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scaleX;
const viewY = Renderer.camera.y / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scale; const viewY = Renderer.camera.y / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scaleY;
const viewW = Renderer.canvas.width / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scale; const viewW = Renderer.canvas.width / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scaleX;
const viewH = Renderer.canvas.height / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scale; const viewH = Renderer.canvas.height / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scaleY;
ctx.strokeStyle = '#fff'; ctx.strokeStyle = '#fff';
ctx.lineWidth = 1; ctx.lineWidth = 1;