diff --git a/static/css/styles.css b/static/css/styles.css index cc74754..da27cac 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -163,6 +163,10 @@ select:focus, input:focus { outline: none; border-color: #c8a44a; } .btn-danger { background: #8b2222; color: #fff; } .btn-sm { padding: 5px 10px; font-size: 0.75rem; } +.seg-btn:hover { background: rgba(200, 164, 74, 0.1) !important; color: #c8a44a !important; } +.seg-btn.active { background: #c8a44a !important; color: #1a1a2e !important; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } + + #no-town-selected { color: #666; font-size: 0.85rem; diff --git a/static/js/api.js b/static/js/api.js index d7eb683..cd3b8e2 100644 --- a/static/js/api.js +++ b/static/js/api.js @@ -97,8 +97,8 @@ window.sendCommand = async function() { const town = window.getSelectedTown(); if (!town) return alert('Select a town first.'); - const type = document.getElementById('cmd-type').value; - if (!type) return alert('Παρακαλώ επιλέξτε Ενέργεια (Command Type) πρώτα.'); + const type = window.currentCmdType; + if (!type) return alert('Παρακαλώ επιλέξτε Ενέργεια (Κατασκευή/Στρατός/Παζάρι/Έρευνα) πρώτα.'); let payload = {}; diff --git a/static/js/components/commandForm.js b/static/js/components/commandForm.js index cefb984..b030299 100644 --- a/static/js/components/commandForm.js +++ b/static/js/components/commandForm.js @@ -2,13 +2,84 @@ // Command Form Component // ================================================================ -window.onCmdTypeChange = function() { - const type = document.getElementById('cmd-type').value; - document.getElementById('build-options').style.display = type === 'build' ? '' : 'none'; - document.getElementById('recruit-options').style.display = type === 'recruit' ? '' : 'none'; - document.getElementById('amount-group').style.display = type === 'recruit' ? '' : 'none'; - document.getElementById('market-options').style.display = type === 'market_offer' ? '' : 'none'; - document.getElementById('research-options').style.display = type === 'research' ? '' : 'none'; +window.currentCmdType = null; + +window.setCmdType = function(type, openModal = false) { + window.currentCmdType = type; + + // Update segmented control active state + document.querySelectorAll('.seg-btn').forEach(btn => btn.classList.remove('active')); + const activeBtn = document.getElementById('seg-' + (type === 'market_offer' ? 'market' : type)); + if (activeBtn) activeBtn.classList.add('active'); + + // Show selection area + document.getElementById('selection-area').style.display = 'flex'; + document.getElementById('recruit-amount-wrap').style.display = type === 'recruit' ? 'flex' : 'none'; + + // Update selection label with current choice if any, or default + window.updateSelectionDisplay(); + + if (openModal) { + window.reopenActiveModal(); + } +}; + +window.updateSelectionDisplay = function() { + const type = window.currentCmdType; + const labelEl = document.getElementById('selection-label'); + + if (type === 'build') { + if (window.selectedBuildingId) { + labelEl.innerHTML = `🏗️ ${window.BUILDING_NAMES_GR[window.selectedBuildingId] || window.selectedBuildingId}`; + } else { + labelEl.innerHTML = `-- Επιλέξτε Κατασκευή --`; + } + } else if (type === 'recruit') { + if (window.selectedUnitId) { + labelEl.innerHTML = `⚔️ ${window.UNIT_NAMES_GR[window.selectedUnitId] || window.selectedUnitId}`; + } else { + labelEl.innerHTML = `-- Επιλέξτε Μονάδα --`; + } + } else if (type === 'research') { + if (window.selectedResearchId) { + const rd = window.RESEARCH_DATA[window.selectedResearchId]; + labelEl.innerHTML = `🦉 ${rd ? rd.name : window.selectedResearchId}`; + } else { + labelEl.innerHTML = `-- Επιλέξτε Έρευνα --`; + } + } else if (type === 'market_offer') { + labelEl.innerHTML = `🛒 Ρυθμίσεις Παζαριού`; + } +}; + +window.reopenActiveModal = function() { + const type = window.currentCmdType; + if (type === 'build') window.openBuildingModal(); + else if (type === 'recruit') window.openUnitModal(); + else if (type === 'research') window.openAcademyModal(); + else if (type === 'market_offer') window.openMarketModal(); +}; + +window.openMarketModal = function() { + document.getElementById('market-modal-overlay').classList.add('open'); +}; + +window.closeMarketModal = function(e) { + if (e && !e.target.classList.contains('modal-overlay') && !e.target.classList.contains('modal-close')) return; + document.getElementById('market-modal-overlay').classList.remove('open'); +}; + +window.saveMarketModal = function() { + const oType = document.getElementById('market-offer-type').value; + const oAmt = document.getElementById('market-offer-amount').value; + const dType = document.getElementById('market-demand-type').value; + const dAmt = document.getElementById('market-demand-amount').value; + + const labelEl = document.getElementById('selection-label'); + const resGr = { wood: 'Ξύλο', stone: 'Πέτρα', iron: 'Ασήμι' }; + labelEl.innerHTML = `🛒 ${oAmt} ${resGr[oType]} ➔ ${dAmt} ${resGr[dType]}`; + + window.closeMarketModal(); }; // Building emoji icons for the visual grid @@ -118,11 +189,8 @@ window.closeBuildingModal = function(e) { 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.updateSelectionDisplay(); window.openBuildingModal(); - // Close after brief visual feedback setTimeout(() => document.getElementById('building-modal-overlay').classList.remove('open'), 180); }; @@ -233,7 +301,7 @@ window.closeAcademyModal = function(e) { window.selectResearch = function(key, name) { window.selectedResearchId = key; - document.getElementById('selected-research-label').textContent = `🧪 ${name}`; + window.updateSelectionDisplay(); window.openAcademyModal(); setTimeout(() => document.getElementById('academy-modal-overlay').classList.remove('open'), 180); }; @@ -359,7 +427,7 @@ window.closeUnitModal = function(e) { window.selectUnit = function(key, nameGr) { window.selectedUnitId = key; - document.getElementById('selected-unit-label').textContent = `${window.UNIT_ICONS[key] || '💂'} ${nameGr}`; + window.updateSelectionDisplay(); window.openUnitModal(); setTimeout(() => document.getElementById('unit-modal-overlay').classList.remove('open'), 180); }; diff --git a/templates/dashboard.html b/templates/dashboard.html index 593732d..b1d9557 100644 --- a/templates/dashboard.html +++ b/templates/dashboard.html @@ -83,106 +83,30 @@