ui revamp

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;

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;
+  const type = window.currentCmdType;
-  if (!type) return alert('Παρακαλώ επιλέξτε Ενέργεια (Command Type) πρώτα.');
+  if (!type) return alert('Παρακαλώ επιλέξτε Ενέργεια (Κατασκευή/Στρατός/Παζάρι/Έρευνα) πρώτα.');
 
   let payload = {};
 

static/js/components/commandForm.js

@@ -2,13 +2,84 @@
 // Command Form Component
 // ================================================================
 
-window.onCmdTypeChange = function() {
+window.currentCmdType = null;
-  const type = document.getElementById('cmd-type').value;
+
-  document.getElementById('build-options').style.display   = type === 'build'   ? '' : 'none';
+window.setCmdType = function(type, openModal = false) {
-  document.getElementById('recruit-options').style.display = type === 'recruit' ? '' : 'none';
+  window.currentCmdType = type;
-  document.getElementById('amount-group').style.display    = type === 'recruit' ? '' : 'none';
+  
-  document.getElementById('market-options').style.display  = type === 'market_offer' ? '' : 'none';
+  // Update segmented control active state
-  document.getElementById('research-options').style.display = type === 'research' ? '' : 'none';
+  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
+  window.updateSelectionDisplay();
-  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);
 };
 
@@ -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);
 };

templates/dashboard.html

@@ -83,106 +83,30 @@
     </div>
 
     <div id="command-form-wrap" style="display:none">
-      <div class="command-form">
+      <div class="command-form" style="display: flex; flex-direction: column; gap: 15px;">
         
-        <div class="form-group">
+        <!-- Segmented Control Row -->
-          <label>Command Type</label>
+        <div class="segmented-control" id="cmd-type-buttons" style="display: flex; gap: 5px; background: #16213e; padding: 4px; border-radius: 8px; border: 1px solid #2a4a6a;">
-          <select id="cmd-type" onchange="onCmdTypeChange()">
+          <button class="seg-btn" id="seg-build" onclick="window.setCmdType('build', true)" style="flex: 1; padding: 10px; border: none; background: transparent; color: #888; border-radius: 6px; cursor: pointer; transition: 0.2s;">🏗️ Κατασκευές</button>
-            <option value="" disabled selected>-- Επιλέξτε --</option>
+          <button class="seg-btn" id="seg-recruit" onclick="window.setCmdType('recruit', true)" style="flex: 1; padding: 10px; border: none; background: transparent; color: #888; border-radius: 6px; cursor: pointer; transition: 0.2s;">⚔️ Στρατός</button>
-            <option value="build">Build / Upgrade</option>
+          <button class="seg-btn" id="seg-market" onclick="window.setCmdType('market_offer', true)" style="flex: 1; padding: 10px; border: none; background: transparent; color: #888; border-radius: 6px; cursor: pointer; transition: 0.2s;">🛒 Παζάρι</button>
-            <option value="recruit">Recruit Troops</option>
+          <button class="seg-btn" id="seg-research" onclick="window.setCmdType('research', true)" style="flex: 1; padding: 10px; border: none; background: transparent; color: #888; border-radius: 6px; cursor: pointer; transition: 0.2s;">🦉 Έρευνα</button>
-            <option value="market_offer">Παζάρι - Προσφορά</option>
-            <option value="research">Ακαδημία - Έρευνες</option>
-          </select>
         </div>
 
-        <!-- Build options - now a button that opens the visual picker -->
+        <!-- Dynamic Selection Area -->
-        <div class="form-group" id="build-options" style="display:none">
+        <div id="selection-area" style="display:none; align-items: center; gap: 10px; flex-wrap: wrap;">
-          <label>Building</label>
+           <button class="btn btn-gold" id="active-selection-display" onclick="window.reopenActiveModal()" style="min-width: 250px; padding: 10px 15px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; font-weight: bold;">
-          <button class="btn btn-gold" id="open-building-modal" onclick="window.openBuildingModal()" style="text-align:left; min-width:200px;">
+             <span id="selection-label">-- Επιλέξτε --</span>
-            <span id="selected-building-label">-- Επιλέξτε Κατασκευή --</span>
+           </button>
-          </button>
+           
+           <div id="recruit-amount-wrap" style="display:none; align-items: center; gap: 5px; background: #16213e; padding: 8px 12px; border-radius: 6px; border: 1px solid #2a4a6a;">
+             <label style="font-size:0.85rem; color:#ccc; margin:0;">Ποσότητα:</label>
+             <input type="number" id="recruit-amount" value="1" min="1" max="9999" style="width: 70px; background: #0f3460; color: #fff; border: 1px solid #c8a44a; border-radius: 4px; padding: 4px 8px;">
+           </div>
+           
+           <button id="btn-send" class="btn btn-gold" onclick="window.sendCommand()" style="margin-left: auto; padding: 10px 20px; font-size: 1rem;">Send ⚡</button>
         </div>
 
-        <!-- Research options -->
-        <div class="form-group" id="research-options" style="display:none">
-          <label>Έρευνα</label>
-          <button class="btn btn-gold" id="open-academy-modal" onclick="window.openAcademyModal()" style="text-align:left; min-width:200px;">
-            <span id="selected-research-label">-- Επιλέξτε Έρευνα --</span>
-          </button>
-        </div>
-
-        <!-- Recruit options -->
-        <div class="form-group" id="recruit-options" style="display:none">
-          <label>Μονάδα</label>
-          <button class="btn btn-gold" id="open-unit-modal" onclick="window.openUnitModal()" style="text-align:left; min-width:200px; padding: 10px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center;">
-            <span id="selected-unit-label">-- Επιλέξτε Μονάδα --</span>
-            <span>▼</span>
-          </button>
-        </div>
-
-        <!-- Market options -->
-        <!-- Market options -->
-        <div class="form-group" id="market-options" style="display:none">
-          <div style="display:flex; gap:10px; margin-bottom:10px;">
-            <div style="flex:1;">
-              <label>Προσφορά</label>
-              <input type="number" id="market-offer-amount" value="1000" min="1" max="99999" style="width:100%;">
-            </div>
-            <div style="flex:1;">
-              <label>Πόρος Προσφοράς</label>
-              <select id="market-offer-type">
-                <option value="wood">Ξύλο</option>
-                <option value="stone">Πέτρα</option>
-                <option value="iron">Ασήμι</option>
-              </select>
-            </div>
-          </div>
-          <div style="display:flex; gap:10px; margin-bottom:10px;">
-            <div style="flex:1;">
-              <label>Ζήτηση</label>
-              <input type="number" id="market-demand-amount" value="1000" min="1" max="99999" style="width:100%;">
-            </div>
-            <div style="flex:1;">
-              <label>Πόρος Ζήτησης</label>
-              <select id="market-demand-type">
-                <option value="iron">Ασήμι</option>
-                <option value="stone">Πέτρα</option>
-                <option value="wood">Ξύλο</option>
-              </select>
-            </div>
-          </div>
-          <div style="display:flex; gap:10px;">
-            <div style="flex:1;">
-              <label>Χρόνος (Ώρες)</label>
-              <select id="market-max-time">
-                <option value="1800">0.5</option>
-                <option value="3600">1</option>
-                <option value="7200">2</option>
-                <option value="14400">4</option>
-                <option value="28800">8</option>
-                <option value="43200">12</option>
-                <option value="86400">24</option>
-                <option value="172800">48</option>
-              </select>
-            </div>
-            <div style="flex:1;">
-              <label>Ορατότητα</label>
-              <select id="market-visibility">
-                <option value="allies">Συμμαχία Μόνο</option>
-                <option value="all">Όλοι</option>
-              </select>
-            </div>
-          </div>
-          
-        </div>
-
-        <div class="form-group" id="amount-group" style="display:none">
-          <label>Amount</label>
-          <input type="number" id="recruit-amount" value="1" min="1" max="9999" style="width:80px;">
-        </div>
-
-        <button id="btn-send" class="btn btn-gold" onclick="window.sendCommand()">Send ⚡</button>
       </div>
 
       <div id="build-queue-preview"></div>
@@ -203,6 +127,69 @@
 
 </div>
 
+<!-- ====== Market Modal ====== -->
+<div class="modal-overlay" id="market-modal-overlay" onclick="window.closeMarketModal(event)">
+  <div class="custom-modal" id="market-modal" style="max-width: 500px;">
+    <div class="modal-header">
+      <h3>🛒 Ρυθμίσεις Παζαριού</h3>
+      <button class="modal-close" onclick="window.closeMarketModal()">✕</button>
+    </div>
+    <div style="padding: 15px;">
+          <div style="display:flex; gap:10px; margin-bottom:10px;">
+            <div style="flex:1;">
+              <label style="color:#ccc; font-size:0.85rem;">Προσφορά</label>
+              <input type="number" id="market-offer-amount" value="1000" min="1" max="99999" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
+            </div>
+            <div style="flex:1;">
+              <label style="color:#ccc; font-size:0.85rem;">Πόρος Προσφοράς</label>
+              <select id="market-offer-type" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
+                <option value="wood">Ξύλο</option>
+                <option value="stone">Πέτρα</option>
+                <option value="iron">Ασήμι</option>
+              </select>
+            </div>
+          </div>
+          <div style="display:flex; gap:10px; margin-bottom:10px;">
+            <div style="flex:1;">
+              <label style="color:#ccc; font-size:0.85rem;">Ζήτηση</label>
+              <input type="number" id="market-demand-amount" value="1000" min="1" max="99999" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
+            </div>
+            <div style="flex:1;">
+              <label style="color:#ccc; font-size:0.85rem;">Πόρος Ζήτησης</label>
+              <select id="market-demand-type" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
+                <option value="iron">Ασήμι</option>
+                <option value="stone">Πέτρα</option>
+                <option value="wood">Ξύλο</option>
+              </select>
+            </div>
+          </div>
+          <div style="display:flex; gap:10px; margin-bottom:20px;">
+            <div style="flex:1;">
+              <label style="color:#ccc; font-size:0.85rem;">Χρόνος (Ώρες)</label>
+              <select id="market-max-time" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
+                <option value="1800">0.5</option>
+                <option value="3600">1</option>
+                <option value="7200">2</option>
+                <option value="14400">4</option>
+                <option value="28800">8</option>
+                <option value="43200">12</option>
+                <option value="86400">24</option>
+                <option value="172800">48</option>
+              </select>
+            </div>
+            <div style="flex:1;">
+              <label style="color:#ccc; font-size:0.85rem;">Ορατότητα</label>
+              <select id="market-visibility" style="width:100%; background:#0f3460; color:#fff; border:1px solid #2a4a6a; border-radius:4px; padding:6px;">
+                <option value="allies">Συμμαχία Μόνο</option>
+                <option value="all">Όλοι</option>
+              </select>
+            </div>
+          </div>
+          <button class="btn btn-gold" onclick="window.saveMarketModal()" style="width:100%; padding:10px; font-weight:bold;">✅ Αποθήκευση Προσφοράς</button>
+    </div>
+  </div>
+</div>
+
 <!-- ====== Building Picker Modal ====== -->
 <div id="building-modal-overlay" onclick="window.closeBuildingModal(event)">
   <div id="building-modal">