541 lines
22 KiB
JavaScript
541 lines
22 KiB
JavaScript
// UI Management
|
|
const UI = {
|
|
tooltip: null,
|
|
recipeSelect: null,
|
|
selectedBuilding: null,
|
|
|
|
// Initialize UI
|
|
init() {
|
|
this.tooltip = document.getElementById('tooltip');
|
|
this.recipeSelect = document.getElementById('recipe-select');
|
|
|
|
this.createResourceBar();
|
|
this.createToolbar();
|
|
this.setupEventListeners();
|
|
},
|
|
|
|
// Create resource bar
|
|
createResourceBar() {
|
|
const container = document.getElementById('resource-bar');
|
|
container.innerHTML = CONFIG.RESOURCE_ORDER.map(res => `
|
|
<div class="resource">
|
|
<div class="resource-icon ${res}"></div>
|
|
<span>${CONFIG.RESOURCE_NAMES[res].split(' ')[0]}: <span id="res-${res}">0</span></span>
|
|
</div>
|
|
`).join('');
|
|
},
|
|
|
|
// Create toolbar
|
|
createToolbar() {
|
|
const toolbar = document.getElementById('toolbar');
|
|
toolbar.innerHTML = `
|
|
<h3 data-category="tools">Tools</h3>
|
|
<div class="tool-category" id="cat-tools">
|
|
<button class="tool-btn active" data-tool="select">
|
|
<div class="icon select">🖱</div>
|
|
<div class="tool-info">
|
|
<div class="name">Select</div>
|
|
<div class="cost">View & interact</div>
|
|
<div class="hotkey">[Q]</div>
|
|
</div>
|
|
</button>
|
|
<button class="tool-btn" data-tool="delete">
|
|
<div class="icon delete">✕</div>
|
|
<div class="tool-info">
|
|
<div class="name">Demolish</div>
|
|
<div class="cost">Remove buildings</div>
|
|
<div class="hotkey">[X]</div>
|
|
</div>
|
|
</button>
|
|
<button class="tool-btn" data-tool="mine">
|
|
<div class="icon mine">⛏</div>
|
|
<div class="tool-info">
|
|
<div class="name">Hand Mine</div>
|
|
<div class="cost">Click on ore</div>
|
|
<div class="hotkey">[E]</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<h3 data-category="extraction">Extraction</h3>
|
|
<div class="tool-category" id="cat-extraction">
|
|
<button class="tool-btn" data-tool="miner">
|
|
<div class="icon miner">⛏</div>
|
|
<div class="tool-info">
|
|
<div class="name">Miner</div>
|
|
<div class="cost">10 iron plates</div>
|
|
<div class="hotkey">[1]</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<h3 data-category="logistics">Logistics</h3>
|
|
<div class="tool-category" id="cat-logistics">
|
|
<button class="tool-btn" data-tool="belt">
|
|
<div class="icon belt">→</div>
|
|
<div class="tool-info">
|
|
<div class="name">Belt</div>
|
|
<div class="cost">1 iron plate</div>
|
|
<div class="hotkey">[2]</div>
|
|
</div>
|
|
</button>
|
|
<button class="tool-btn" data-tool="inserter">
|
|
<div class="icon inserter">⤵</div>
|
|
<div class="tool-info">
|
|
<div class="name">Inserter</div>
|
|
<div class="cost">2 iron, 1 gear</div>
|
|
<div class="hotkey">[3]</div>
|
|
</div>
|
|
</button>
|
|
<button class="tool-btn" data-tool="chest">
|
|
<div class="icon chest">📦</div>
|
|
<div class="tool-info">
|
|
<div class="name">Chest</div>
|
|
<div class="cost">5 iron plates</div>
|
|
<div class="hotkey">[4]</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<h3 data-category="production">Production</h3>
|
|
<div class="tool-category" id="cat-production">
|
|
<button class="tool-btn" data-tool="furnace">
|
|
<div class="icon furnace">🔥</div>
|
|
<div class="tool-info">
|
|
<div class="name">Furnace</div>
|
|
<div class="cost">10 iron ore</div>
|
|
<div class="hotkey">[5]</div>
|
|
</div>
|
|
</button>
|
|
<button class="tool-btn" data-tool="assembler">
|
|
<div class="icon assembler">⚙</div>
|
|
<div class="tool-info">
|
|
<div class="name">Assembler</div>
|
|
<div class="cost">5 iron, 3 gears</div>
|
|
<div class="hotkey">[6]</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<h3 data-category="defense">Defense</h3>
|
|
<div class="tool-category" id="cat-defense">
|
|
<button class="tool-btn" data-tool="gun_turret">
|
|
<div class="icon gun_turret">🔫</div>
|
|
<div class="tool-info">
|
|
<div class="name">Gun Turret</div>
|
|
<div class="cost">20 iron, 10 gear</div>
|
|
<div class="hotkey">[7]</div>
|
|
</div>
|
|
</button>
|
|
<button class="tool-btn" data-tool="flame_turret">
|
|
<div class="icon flame_turret">🔥</div>
|
|
<div class="tool-info">
|
|
<div class="name">Flame Turret</div>
|
|
<div class="cost">15i, 20c, 50 coal</div>
|
|
<div class="hotkey">[8]</div>
|
|
</div>
|
|
</button>
|
|
<button class="tool-btn" data-tool="laser_turret">
|
|
<div class="icon laser_turret">⚡</div>
|
|
<div class="tool-info">
|
|
<div class="name">Laser Turret</div>
|
|
<div class="cost">30i, 30c, 20 circuit</div>
|
|
<div class="hotkey">[9]</div>
|
|
</div>
|
|
</button>
|
|
<button class="tool-btn" data-tool="tesla_turret">
|
|
<div class="icon tesla_turret">⚡</div>
|
|
<div class="tool-info">
|
|
<div class="name">Tesla Coil</div>
|
|
<div class="cost">25i, 50c, 15 circuit</div>
|
|
<div class="hotkey">[0]</div>
|
|
</div>
|
|
</button>
|
|
<button class="tool-btn" data-tool="cannon_turret">
|
|
<div class="icon cannon_turret">💣</div>
|
|
<div class="tool-info">
|
|
<div class="name">Cannon</div>
|
|
<div class="cost">50i, 20 gear, 30 coal</div>
|
|
<div class="hotkey">[-]</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<h3 data-category="speed">Game Speed</h3>
|
|
<div class="tool-category" id="cat-speed">
|
|
<div class="game-speed">
|
|
<button class="speed-btn" data-speed="0.5">0.5x</button>
|
|
<button class="speed-btn active" data-speed="1">1x</button>
|
|
<button class="speed-btn" data-speed="2">2x</button>
|
|
<button class="speed-btn" data-speed="4">4x</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
<strong>Controls:</strong><br>
|
|
<kbd>R</kbd> Rotate | <kbd>E</kbd> Mine<br>
|
|
<kbd>WASD</kbd> Pan | <kbd>Scroll</kbd> Zoom<br>
|
|
<strong>Dev:</strong> <kbd>\`</kbd> Toggle<br>
|
|
<kbd>F1</kbd> Wave <kbd>F2</kbd> Kill <kbd>F3</kbd> Res
|
|
</div>
|
|
`;
|
|
|
|
// Category collapse handlers
|
|
toolbar.querySelectorAll('h3[data-category]').forEach(header => {
|
|
header.addEventListener('click', () => {
|
|
Audio.playUIClick();
|
|
header.classList.toggle('collapsed');
|
|
const category = document.getElementById('cat-' + header.dataset.category);
|
|
if (category) {
|
|
category.classList.toggle('collapsed');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Tool button handlers
|
|
toolbar.querySelectorAll('.tool-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
Audio.playUIClick();
|
|
Input.selectTool(btn.dataset.tool);
|
|
});
|
|
});
|
|
|
|
// Speed button handlers
|
|
toolbar.querySelectorAll('.speed-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
Audio.playUIClick();
|
|
Simulation.setSpeed(parseFloat(btn.dataset.speed));
|
|
toolbar.querySelectorAll('.speed-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Create wave indicator
|
|
this.createWaveIndicator();
|
|
|
|
// Create minimap
|
|
this.createMinimap();
|
|
|
|
// Create sound toggle
|
|
this.createSoundToggle();
|
|
},
|
|
|
|
// Create wave indicator element
|
|
createWaveIndicator() {
|
|
const indicator = document.createElement('div');
|
|
indicator.id = 'wave-indicator';
|
|
indicator.className = 'wave-indicator peaceful';
|
|
indicator.innerHTML = `
|
|
<div class="wave-title">Peaceful</div>
|
|
<div class="wave-info">Next wave in: --:--</div>
|
|
`;
|
|
document.querySelector('.canvas-container').appendChild(indicator);
|
|
},
|
|
|
|
// Create minimap
|
|
createMinimap() {
|
|
const container = document.createElement('div');
|
|
container.className = 'minimap-container';
|
|
container.innerHTML = `
|
|
<div class="minimap-header">
|
|
<span>MINIMAP</span>
|
|
</div>
|
|
<canvas id="minimap" width="150" height="150"></canvas>
|
|
`;
|
|
document.querySelector('.canvas-container').appendChild(container);
|
|
|
|
// Click to navigate
|
|
const minimap = document.getElementById('minimap');
|
|
minimap.addEventListener('click', (e) => {
|
|
const rect = minimap.getBoundingClientRect();
|
|
const x = (e.clientX - rect.left) / rect.width;
|
|
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.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
|
|
updateMinimap() {
|
|
const canvas = document.getElementById('minimap');
|
|
if (!canvas || canvas.width === 0 || canvas.height === 0) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
const scaleX = canvas.width / CONFIG.MAP_WIDTH;
|
|
const scaleY = canvas.height / CONFIG.MAP_HEIGHT;
|
|
const scale = Math.min(scaleX, scaleY);
|
|
|
|
// Clear
|
|
ctx.fillStyle = '#1a2a1a';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Draw resources
|
|
for (let y = 0; y < CONFIG.MAP_HEIGHT; y++) {
|
|
for (let x = 0; x < CONFIG.MAP_WIDTH; x++) {
|
|
const tile = Terrain.tiles[y]?.[x];
|
|
if (tile?.resource && tile.amount > 0) {
|
|
const colors = { iron: '#8899bb', copper: '#cc9966', coal: '#444' };
|
|
ctx.fillStyle = colors[tile.resource] || '#666';
|
|
ctx.fillRect(x * scaleX, y * scaleY, scaleX + 0.5, scaleY + 0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Draw buildings
|
|
ctx.fillStyle = '#ffaa00';
|
|
Buildings.list.forEach(b => {
|
|
const size = Utils.getBuildingSize(b.type);
|
|
ctx.fillRect(b.x * scaleX, b.y * scaleY, size.w * scaleX + 0.5, size.h * scaleY + 0.5);
|
|
});
|
|
|
|
// Draw towers
|
|
ctx.fillStyle = '#4a9eff';
|
|
Towers.list.forEach(t => {
|
|
ctx.fillRect(t.x * scaleX, t.y * scaleY, scaleX + 0.5, scaleY + 0.5);
|
|
});
|
|
|
|
// Draw enemies
|
|
ctx.fillStyle = '#ff4444';
|
|
Enemies.list.forEach(e => {
|
|
const ex = e.x / CONFIG.TILE_SIZE * scaleX;
|
|
const ey = e.y / CONFIG.TILE_SIZE * scaleY;
|
|
ctx.beginPath();
|
|
ctx.arc(ex, ey, Math.max(2, scale * 0.5), 0, Math.PI * 2);
|
|
ctx.fill();
|
|
});
|
|
|
|
// Draw viewport
|
|
const viewX = Renderer.camera.x / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scaleX;
|
|
const viewY = Renderer.camera.y / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scaleY;
|
|
const viewW = Renderer.canvas.width / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scaleX;
|
|
const viewH = Renderer.canvas.height / (CONFIG.TILE_SIZE * Renderer.camera.zoom) * scaleY;
|
|
|
|
ctx.strokeStyle = '#fff';
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeRect(viewX, viewY, viewW, viewH);
|
|
},
|
|
|
|
// Create sound toggle
|
|
createSoundToggle() {
|
|
const toggle = document.createElement('div');
|
|
toggle.className = 'sound-toggle';
|
|
toggle.id = 'sound-toggle';
|
|
toggle.innerHTML = '🔊 Sound';
|
|
toggle.addEventListener('click', () => {
|
|
const enabled = Audio.toggle();
|
|
toggle.innerHTML = enabled ? '🔊 Sound' : '🔇 Muted';
|
|
toggle.classList.toggle('muted', !enabled);
|
|
});
|
|
document.querySelector('.canvas-container').appendChild(toggle);
|
|
},
|
|
|
|
// Update wave indicator
|
|
updateWaveIndicator() {
|
|
const indicator = document.getElementById('wave-indicator');
|
|
if (!indicator) return;
|
|
|
|
const waveActive = Enemies.waveActive;
|
|
const timeUntil = Enemies.getTimeUntilWave();
|
|
|
|
indicator.className = 'wave-indicator ' + (waveActive ? '' : 'peaceful');
|
|
|
|
if (waveActive) {
|
|
indicator.innerHTML = `
|
|
<div class="wave-title">⚔ WAVE ${Enemies.wave} ⚔</div>
|
|
<div class="wave-info">Enemies remaining: ${Enemies.enemiesRemaining}</div>
|
|
`;
|
|
} else {
|
|
const minutes = Math.floor(timeUntil / 60);
|
|
const seconds = Math.floor(timeUntil % 60);
|
|
indicator.innerHTML = `
|
|
<div class="wave-title">Wave ${Enemies.wave + 1} incoming</div>
|
|
<div class="wave-info">Time until wave: ${minutes}:${seconds.toString().padStart(2, '0')}</div>
|
|
`;
|
|
}
|
|
|
|
// Dev mode indicator
|
|
this.updateDevModeIndicator();
|
|
},
|
|
|
|
// Show dev mode notification
|
|
showDevModeNotification() {
|
|
const existing = document.getElementById('dev-notification');
|
|
if (existing) existing.remove();
|
|
|
|
const notification = document.createElement('div');
|
|
notification.id = 'dev-notification';
|
|
notification.style.cssText = `
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: ${CONFIG.DEV_MODE ? 'rgba(68, 255, 68, 0.9)' : 'rgba(255, 68, 68, 0.9)'};
|
|
color: #000;
|
|
padding: 20px 40px;
|
|
border-radius: 10px;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
`;
|
|
notification.textContent = CONFIG.DEV_MODE ? '🛠 DEV MODE ON' : '🎮 DEV MODE OFF';
|
|
document.body.appendChild(notification);
|
|
|
|
setTimeout(() => notification.remove(), 1500);
|
|
},
|
|
|
|
// Update dev mode indicator
|
|
updateDevModeIndicator() {
|
|
let indicator = document.getElementById('dev-mode-indicator');
|
|
|
|
if (CONFIG.DEV_MODE) {
|
|
if (!indicator) {
|
|
indicator = document.createElement('div');
|
|
indicator.id = 'dev-mode-indicator';
|
|
indicator.style.cssText = `
|
|
position: fixed;
|
|
top: 10px;
|
|
left: 10px;
|
|
background: rgba(68, 255, 68, 0.8);
|
|
color: #000;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
z-index: 9999;
|
|
`;
|
|
indicator.textContent = '🛠 DEV MODE';
|
|
document.body.appendChild(indicator);
|
|
}
|
|
} else {
|
|
if (indicator) indicator.remove();
|
|
}
|
|
},
|
|
|
|
// Setup event listeners
|
|
setupEventListeners() {
|
|
// Menu buttons
|
|
document.getElementById('btn-new').addEventListener('click', () => this.showModal('new-modal'));
|
|
document.getElementById('btn-save').addEventListener('click', () => {
|
|
SaveLoad.updateSaveSlots();
|
|
this.showModal('save-modal');
|
|
});
|
|
document.getElementById('btn-load').addEventListener('click', () => {
|
|
SaveLoad.updateLoadSlots();
|
|
this.showModal('load-modal');
|
|
});
|
|
document.getElementById('save-new').addEventListener('click', () => {
|
|
SaveLoad.saveToNewSlot();
|
|
this.closeModal('save-modal');
|
|
});
|
|
document.getElementById('confirm-new').addEventListener('click', () => {
|
|
game.newGame();
|
|
this.closeModal('new-modal');
|
|
});
|
|
|
|
// Recipe select
|
|
document.querySelectorAll('.recipe-option').forEach(opt => {
|
|
opt.addEventListener('click', () => {
|
|
if (this.selectedBuilding && this.selectedBuilding.type === 'assembler') {
|
|
this.selectedBuilding.recipe = opt.dataset.recipe;
|
|
this.recipeSelect.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Close recipe select when clicking elsewhere
|
|
document.addEventListener('click', (e) => {
|
|
if (!this.recipeSelect.contains(e.target)) {
|
|
this.recipeSelect.style.display = 'none';
|
|
}
|
|
});
|
|
},
|
|
|
|
// Update resource display
|
|
updateResources() {
|
|
CONFIG.RESOURCE_ORDER.forEach(res => {
|
|
const el = document.getElementById(`res-${res}`);
|
|
if (el) {
|
|
el.textContent = Utils.formatNumber(Resources.get(res));
|
|
}
|
|
});
|
|
},
|
|
|
|
// Update tool button states
|
|
updateToolButtons(activeTool) {
|
|
document.querySelectorAll('.tool-btn[data-tool]').forEach(btn => {
|
|
const tool = btn.dataset.tool;
|
|
btn.classList.toggle('active', tool === activeTool);
|
|
|
|
// Disable if can't afford
|
|
if (CONFIG.COSTS[tool]) {
|
|
btn.classList.toggle('disabled', !Resources.canAfford(CONFIG.COSTS[tool]));
|
|
}
|
|
});
|
|
},
|
|
|
|
// Update tooltip
|
|
updateTooltip(clientX, clientY, mouseWorld) {
|
|
const building = Buildings.getAt(mouseWorld.x, mouseWorld.y);
|
|
const tile = Terrain.getTile(mouseWorld.x, mouseWorld.y);
|
|
|
|
if (building) {
|
|
let info = `<strong style="color:#4a9eff">${building.type.toUpperCase()}</strong><br>`;
|
|
if (building.type === 'assembler') {
|
|
info += `Recipe: ${building.recipe || 'None'}<br>`;
|
|
}
|
|
const invItems = Object.entries(building.inventory).filter(([k, v]) => v > 0);
|
|
const outItems = Object.entries(building.output).filter(([k, v]) => v > 0);
|
|
if (invItems.length > 0) {
|
|
info += '<span style="color:#aaa">Input:</span> ' + invItems.map(([k, v]) => `${k}: ${v}`).join(', ') + '<br>';
|
|
}
|
|
if (outItems.length > 0) {
|
|
info += '<span style="color:#aaa">Output:</span> ' + outItems.map(([k, v]) => `${k}: ${v}`).join(', ');
|
|
}
|
|
this.tooltip.innerHTML = info;
|
|
this.tooltip.style.display = 'block';
|
|
this.tooltip.style.left = (clientX + 15) + 'px';
|
|
this.tooltip.style.top = (clientY + 15) + 'px';
|
|
} else if (tile?.resource && tile.amount > 0) {
|
|
this.tooltip.innerHTML = `<strong style="color:#4a9eff">${tile.resource.toUpperCase()} ORE</strong><br>Amount: ${Utils.formatNumber(tile.amount)}<br><span style="color:#88cc44">Click with Mine tool [E] to harvest</span>`;
|
|
this.tooltip.style.display = 'block';
|
|
this.tooltip.style.left = (clientX + 15) + 'px';
|
|
this.tooltip.style.top = (clientY + 15) + 'px';
|
|
} else {
|
|
this.tooltip.style.display = 'none';
|
|
}
|
|
},
|
|
|
|
// Show recipe select
|
|
showRecipeSelect(clientX, clientY, building) {
|
|
this.selectedBuilding = building;
|
|
this.recipeSelect.style.display = 'block';
|
|
this.recipeSelect.style.left = (clientX + 10) + 'px';
|
|
this.recipeSelect.style.top = (clientY + 10) + 'px';
|
|
},
|
|
|
|
// Show modal
|
|
showModal(id) {
|
|
document.getElementById(id).style.display = 'flex';
|
|
},
|
|
|
|
// Close modal
|
|
closeModal(id) {
|
|
document.getElementById(id).style.display = 'none';
|
|
}
|
|
}; |