ui revamp

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);
 };