change layout
This commit is contained in:
@@ -10,71 +10,111 @@ window.onCmdTypeChange = function() {
|
||||
document.getElementById('market-options').style.display = type === 'market_offer' ? '' : 'none';
|
||||
};
|
||||
|
||||
// Building emoji icons for the visual grid
|
||||
const BUILDING_ICONS = {
|
||||
main: '🏛️', storage: '🏚️', farm: '🌾', academy: '📜',
|
||||
temple: '⛩️', barracks: '⚔️', docks: '⚓', market: '🛒',
|
||||
hide: '🕳️', lumber: '🪵', stoner: '🪨', ironer: '⛏️', wall: '🧱'
|
||||
};
|
||||
|
||||
window.selectedBuildingId = null;
|
||||
|
||||
window.renderBuildingDropdown = function() {
|
||||
// No-op — selection now happens via the modal
|
||||
};
|
||||
|
||||
window.openBuildingModal = function() {
|
||||
const town = window.getSelectedTown();
|
||||
if (!town) return;
|
||||
const bSelect = document.getElementById('building-select');
|
||||
|
||||
const grid = document.getElementById('building-grid');
|
||||
const bLevels = town.buildings || {};
|
||||
const bData = town.build_data || {};
|
||||
|
||||
const currentVal = bSelect.value;
|
||||
bSelect.innerHTML = '<option value="" disabled selected>-- Επιλέξτε Κατασκευή --</option>';
|
||||
|
||||
for (const [key, nameGr] of Object.entries(window.BUILDING_NAMES_GR)) {
|
||||
const level = bLevels[key] !== undefined ? bLevels[key] : "?";
|
||||
const data = bData[key];
|
||||
|
||||
let text = `${nameGr} [Επίπεδο ${level}]`;
|
||||
|
||||
if (data) {
|
||||
const w = window.fmt(data.wood || 0);
|
||||
const st = window.fmt(data.stone || 0);
|
||||
const i = window.fmt(data.iron || 0);
|
||||
const pop = data.pop || 0;
|
||||
let t = data.build_time || '';
|
||||
if (t.startsWith('00:')) t = t.substring(3); // make '00:06:00' cleaner as '06:00'
|
||||
|
||||
const popStr = pop > 0 ? ` 🧔:${pop} ` : ' ';
|
||||
const costStr = `Ξ:${w} Π:${st} Α:${i}${popStr}· ⏱ ${t}`;
|
||||
grid.innerHTML = Object.entries(window.BUILDING_NAMES_GR).map(([key, nameGr]) => {
|
||||
const level = bLevels[key] !== undefined ? bLevels[key] : '?';
|
||||
const data = bData[key];
|
||||
const icon = BUILDING_ICONS[key] || '🏗️';
|
||||
const isSelected = key === window.selectedBuildingId;
|
||||
|
||||
// Figure out the state - missing_dependencies is an Object!
|
||||
const missingKeys = data.missing_dependencies ? Object.keys(data.missing_dependencies) : [];
|
||||
const isLocked = (!data.dependencies) || (missingKeys.length > 0);
|
||||
|
||||
const option = document.createElement('option');
|
||||
option.value = key;
|
||||
|
||||
if (data.has_max_level) {
|
||||
option.textContent = `${text} — (Μέγιστο Επίπεδο)`;
|
||||
option.style.color = '#33aa33';
|
||||
} else if (isLocked) {
|
||||
option.textContent = `${text} — 🔒 Κλειδωμένο (Προϋποθέσεις)`;
|
||||
option.style.color = '#ff4444'; // Red as requested
|
||||
} else if (data.can_upgrade === true) {
|
||||
option.textContent = `${text} — ✅ ${costStr}`;
|
||||
} else if (data.enough_resources === false) {
|
||||
option.textContent = `${text} — ❌ ${costStr} (Λείπουν Πόροι)`;
|
||||
option.style.color = '#aa5555';
|
||||
} else {
|
||||
// can_upgrade is false, but resources are fine = Population limit or Queue full
|
||||
option.textContent = `${text} — ⚠️ ${costStr} (Πληθυσμός / Ουρά)`;
|
||||
option.style.color = '#aa8855';
|
||||
}
|
||||
|
||||
bSelect.appendChild(option);
|
||||
} else {
|
||||
const option = document.createElement('option');
|
||||
option.value = key;
|
||||
option.textContent = text;
|
||||
bSelect.appendChild(option);
|
||||
if (!data) {
|
||||
return `<div class="bld-card${isSelected ? ' bld-selected' : ''}" onclick="window.selectBuilding('${key}','${nameGr}')">
|
||||
<span class="bld-level">${level}</span>
|
||||
<span class="bld-icon">${icon}</span>
|
||||
<span class="bld-name">${nameGr}</span>
|
||||
<span class="bld-status queue-warn">Αγνωστο</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
const missingKeys = data.missing_dependencies ? Object.keys(data.missing_dependencies) : [];
|
||||
const isLocked = !data.dependencies || missingKeys.length > 0;
|
||||
const isMaxed = data.has_max_level;
|
||||
|
||||
let statusClass, statusLabel, cardClass = '';
|
||||
if (isMaxed) {
|
||||
statusClass = 'maxed'; statusLabel = '✓ Μέγιστο'; cardClass = 'bld-maxed';
|
||||
} else if (isLocked) {
|
||||
statusClass = 'locked'; statusLabel = '🔒 Κλειδωμένο'; cardClass = 'bld-locked';
|
||||
} else if (data.can_upgrade) {
|
||||
statusClass = 'can-build'; statusLabel = '✅ Αναβάθμιση';
|
||||
} else if (data.enough_resources === false) {
|
||||
statusClass = 'no-resources'; statusLabel = '❌ Λείπουν Πόροι';
|
||||
} else {
|
||||
statusClass = 'queue-warn'; statusLabel = '⚠️ Πληθ./Ουρά';
|
||||
}
|
||||
|
||||
const w = data.wood ? window.fmt(data.wood) : 0;
|
||||
const st = data.stone ? window.fmt(data.stone) : 0;
|
||||
const i = data.iron ? window.fmt(data.iron) : 0;
|
||||
let t = data.build_time || '';
|
||||
if (t.startsWith('00:')) t = t.substring(3);
|
||||
const costStr = (w || st || i) ? `Ξ:${w} Π:${st} Α:${i}${t ? ' · ⏱'+t : ''}` : '';
|
||||
|
||||
const clickable = !isMaxed && !isLocked;
|
||||
const onclick = clickable ? `onclick="window.selectBuilding('${key}','${nameGr}')"` : '';
|
||||
|
||||
return `<div class="bld-card ${cardClass}${isSelected ? ' bld-selected' : ''}" ${onclick}>
|
||||
<span class="bld-level">${level}</span>
|
||||
<span class="bld-icon">${icon}</span>
|
||||
<span class="bld-name">${nameGr}</span>
|
||||
<span class="bld-status ${statusClass}">${statusLabel}</span>
|
||||
${costStr ? `<span class="bld-cost">${costStr}</span>` : ''}
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
// Render current build queue in modal footer
|
||||
const qEl = document.getElementById('building-modal-queue-items');
|
||||
if (town.build_queue && town.build_queue.length) {
|
||||
qEl.innerHTML = town.build_queue.map(o => {
|
||||
const raw = o.building_type || o.name || '';
|
||||
const gr = window.BUILDING_NAMES_GR[raw] || raw;
|
||||
return `<span style="background:rgba(0,0,0,0.3);padding:2px 8px;border-radius:4px;margin-right:4px;font-size:0.8rem;">${gr}</span>`;
|
||||
}).join('');
|
||||
} else {
|
||||
qEl.innerHTML = '<span style="color:#555;font-size:0.8rem;">Κενή</span>';
|
||||
}
|
||||
|
||||
if (currentVal && Array.from(bSelect.options).some(o => o.value === currentVal)) {
|
||||
bSelect.value = currentVal;
|
||||
}
|
||||
|
||||
document.getElementById('building-modal-overlay').classList.add('open');
|
||||
};
|
||||
|
||||
window.closeBuildingModal = function(e) {
|
||||
// Close only if clicking the overlay background or the X button
|
||||
if (e && e.target !== document.getElementById('building-modal-overlay') && e.target !== document.getElementById('building-modal-close')) return;
|
||||
document.getElementById('building-modal-overlay').classList.remove('open');
|
||||
};
|
||||
|
||||
window.selectBuilding = function(key, nameGr) {
|
||||
window.selectedBuildingId = key;
|
||||
// Update the trigger button label
|
||||
document.getElementById('selected-building-label').textContent = `🏗️ ${nameGr}`;
|
||||
// Re-render grid to show new selection highlight
|
||||
window.openBuildingModal();
|
||||
// Close after brief visual feedback
|
||||
setTimeout(() => document.getElementById('building-modal-overlay').classList.remove('open'), 180);
|
||||
};
|
||||
|
||||
|
||||
|
||||
window.renderUnitDropdown = function() {
|
||||
const town = window.getSelectedTown();
|
||||
if (!town) return;
|
||||
|
||||
@@ -85,6 +85,10 @@ window.renderTowns = function() {
|
||||
|
||||
window.selectTown = function(id) {
|
||||
window.selectedTownId = id;
|
||||
window.selectedBuildingId = null;
|
||||
const lbl = document.getElementById('selected-building-label');
|
||||
if (lbl) lbl.textContent = '-- Επιλέξτε Κατασκευή --';
|
||||
|
||||
window.renderTowns();
|
||||
|
||||
document.getElementById('no-town-selected').style.display = 'none';
|
||||
|
||||
Reference in New Issue
Block a user