redesign of recruit troops

static/js/api.js

@@ -132,7 +132,7 @@ window.sendCommand = async function() {
     
     payload = { building_id };
   } else if (type === 'recruit') {
-    const unit_id = document.getElementById('unit-select').value;
+    const unit_id = window.selectedUnitId;
     if (!unit_id) return alert('Παρακαλώ επιλέξτε Μονάδα προς εκπαίδευση.');
     
     const amount = parseInt(document.getElementById('recruit-amount').value) || 1;

static/js/components/commandForm.js

@@ -240,70 +240,122 @@ window.selectResearch = function(key, name) {
 
 
 
+window.selectedUnitId = null;
 
+window.UNIT_ICONS = {
+  sword: '⚔️', slinger: '🪨', archer: '🏹', hoplite: '🛡️',
+  rider: '🐎', chariot: '🛷', catapult: '☄️', godsent: '👼',
+  big_transporter: '⛴️', small_transporter: '🚤', bireme: '🛶',
+  attack_ship: '🔥', trireme: '🔱', colonize_ship: '⚓',
+  medusa: '🐍', zyklop: '👁️', harpy: '🦅', pegasus: '🐴',
+  minotaur: '🐂', manticore: '🦁', cerberus: '🐕',
+  hydra: '🐉', sea_monster: '🦑', militia: '🧑‍🌾'
+};
 
 window.renderUnitDropdown = function() {
+  // No-op - selection now happens via modal
+};
+
+window.openUnitModal = function() {
   const town = window.getSelectedTown();
   if (!town) return;
-  const uSelect = document.getElementById('unit-select');
+  const grid = document.getElementById('unit-grid');
-  const uData   = town.unit_data || {};
+  const uData = town.unit_data || {};
   
-  const currentVal = uSelect.value;
+  // Group units into categories for better display
-  uSelect.innerHTML = '<option value="" disabled selected>-- Επιλέξτε Μονάδα --</option>';
+  const categories = {
+    'Ξηρά': ['sword', 'slinger', 'archer', 'hoplite', 'rider', 'chariot', 'catapult', 'godsent'],
+    'Ναυτικές': ['big_transporter', 'small_transporter', 'bireme', 'attack_ship', 'trireme', 'colonize_ship'],
+    'Μυθικές': ['medusa', 'zyklop', 'harpy', 'pegasus', 'minotaur', 'manticore', 'cerberus', 'hydra', 'sea_monster']
+  };
 
-  for (const [key, nameGr] of Object.entries(window.UNIT_NAMES_GR)) {
+  let html = '';
-    if (key === 'militia') continue;
   
-    const data = uData[key];
+  for (const [catName, units] of Object.entries(categories)) {
-    let text = `${nameGr}`;
+    let catHtml = '';
     
-    if (data) {
+    for (const key of units) {
-      const w  = window.fmt(data.wood || 0);
+      if (key === 'militia') continue;
-      const st = window.fmt(data.stone || 0);
-      const i  = window.fmt(data.iron || 0);
-      const pop = data.pop || 0;
       
-      // Unit build_time is usually raw seconds in GameData
+      const nameGr = window.UNIT_NAMES_GR[key] || key;
-      let t = data.build_time || 0;
+      const data = uData[key];
-      let tStr = `${t}s`;
+      const icon = window.UNIT_ICONS[key] || '💂';
-      if (t > 60) {
+      const isSelected = key === window.selectedUnitId;
-        let m = Math.floor(t / 60);
-        let s = t % 60;
-        tStr = `${m}m ${s}s`;
-      }
       
-      const costStr = `Ξ:${w} Π:${st} Α:${i} 🧔:${pop} · ⏱ ${tStr}`;
+      let statusClass, statusLabel, cardClass = '';
+      let costStr = '';
+      let clickable = false;
       
-      const missingKeys = data.missing_dependencies ? Object.keys(data.missing_dependencies) : [];
+      if (data) {
-      const isLocked = missingKeys.length > 0;
+        const missingKeys = data.missing_dependencies ? Object.keys(data.missing_dependencies) : [];
+        const isLocked = missingKeys.length > 0;
         
-      const option = document.createElement('option');
+        const w  = window.fmt(data.wood || 0);
-      option.value = key;
+        const st = window.fmt(data.stone || 0);
+        const i  = window.fmt(data.iron || 0);
+        const pop = data.pop || 0;
         
-      if (isLocked) {
+        let t = data.build_time || 0;
-        option.textContent = `${text} — 🔒 Κλειδωμένο`;
+        let tStr = `${t}s`;
-        option.style.color = '#ff4444';
+        if (t > 60) {
-      } else if (data.enough_resources === false) {
+          let m = Math.floor(t / 60);
-        option.textContent = `${text} — ❌ ${costStr} (Λείπουν Πόροι 1x)`;
+          let s = t % 60;
-        option.style.color = '#aa5555';
+          tStr = `${m}m ${s}s`;
+        }
+        
+        // Show favor if it's a mythical unit or godsent
+        const favorStr = (data.favor && data.favor > 0) ? ` ⚡:${data.favor}` : '';
+        costStr = `Ξ:${w} Π:${st} Α:${i}${favorStr} 🧔:${pop} · ⏱ ${tStr}`;
+        
+        if (isLocked) {
+          statusClass = 'locked'; statusLabel = '🔒 Κλειδωμένο'; cardClass = 'bld-locked';
+        } else if (data.enough_resources === false) {
+          statusClass = 'no-resources'; statusLabel = '❌ Λείπουν Πόροι';
+        } else {
+          statusClass = 'can-build'; statusLabel = '✅ Διαθέσιμο';
+          clickable = true;
+        }
       } else {
-        option.textContent = `${text} — ✅ ${costStr}`;
+        // If no data is available for this unit, treat it as locked/unknown
+        statusClass = 'locked'; statusLabel = '🔒 Άγνωστο'; cardClass = 'bld-locked';
       }
       
-      uSelect.appendChild(option);
+      const onclick = clickable ? `onclick="window.selectUnit('${key}', '${nameGr}')"` : '';
-    } else {
+      
-      const option = document.createElement('option');
+      catHtml += `<div class="bld-card ${cardClass}${isSelected ? ' bld-selected' : ''}" ${onclick} style="width:140px; justify-content:flex-start;">
-      option.value = key;
+        <span class="bld-icon">${icon}</span>
-      option.textContent = text;
+        <span class="bld-name" style="margin-top:6px; font-size:0.85rem;">${nameGr}</span>
-      uSelect.appendChild(option);
+        <span class="bld-status ${statusClass}">${statusLabel}</span>
+        <span class="bld-cost" style="font-size:0.65rem;">${costStr}</span>
+      </div>`;
+    }
+    
+    if (catHtml) {
+      html += `<div style="width:100%; margin-top:10px;"><h4 style="color:#c8a44a; margin-bottom:10px; border-bottom:1px solid #2a4a6a; padding-bottom:4px;">${catName}</h4>
+        <div style="display:flex; flex-wrap:wrap; gap:10px;">${catHtml}</div>
+      </div>`;
     }
   }
   
-  if (currentVal && Array.from(uSelect.options).some(o => o.value === currentVal)) {
+  grid.innerHTML = html;
-    uSelect.value = currentVal;
+  document.getElementById('unit-modal-overlay').classList.add('open');
-  }
 };
 
+window.closeUnitModal = function(e) {
+  if (e && e.target !== document.getElementById('unit-modal-overlay') && e.target !== document.getElementById('unit-modal-close')) return;
+  document.getElementById('unit-modal-overlay').classList.remove('open');
+};
+
+window.selectUnit = function(key, nameGr) {
+  window.selectedUnitId = key;
+  document.getElementById('selected-unit-label').textContent = `${window.UNIT_ICONS[key] || '💂'} ${nameGr}`;
+  window.openUnitModal();
+  setTimeout(() => document.getElementById('unit-modal-overlay').classList.remove('open'), 180);
+};
+
+// ================================================================
+
+
 window.renderBuildQueuePreview = function() {
   const town = window.getSelectedTown();
   const el = document.getElementById('build-queue-preview');

static/js/state.js

@@ -25,7 +25,7 @@ window.BUILDING_NAMES_GR = {
 
 window.UNIT_NAMES_GR = {
   sword: "Ξιφομάχος", slinger: "Σφενδονήτης", archer: "Τοξότης", hoplite: "Οπλίτης",
-  rider: "Ιππέας", chariot: "Άρμα", catapult: "Καταπέλτης",
+  rider: "Ιππέας", chariot: "Άρμα", catapult: "Καταπέλτης", godsent: "Θεόσταλτος",
   big_transporter: "Μεταφορικό", small_transporter: "Γρήγ. Μεταφορικό", bireme: "Διήρης",
   attack_ship: "Πλοίο Φάρος", trireme: "Τριήρης", colonize_ship: "Αποικιακό",
   medusa: "Μέδουσα", zyklop: "Κύκλωπας", harpy: "Άρπυια", pegasus: "Πήγασος",

templates/dashboard.html

@@ -114,37 +114,11 @@
 
         <!-- Recruit options -->
         <div class="form-group" id="recruit-options" style="display:none">
-          <label>Unit</label>
+          <label>Μονάδα</label>
-          <select id="unit-select">
+          <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;">
-            <optgroup label="Ξηρά">
+            <span id="selected-unit-label">-- Επιλέξτε Μονάδα --</span>
-              <option value="sword">Ξιφομάχος</option>
+            <span>▼</span>
-              <option value="slinger">Σφενδονήτης</option>
+          </button>
-              <option value="archer">Τοξότης</option>
-              <option value="hoplite">Οπλίτης</option>
-              <option value="rider">Ιππέας</option>
-              <option value="chariot">Άρμα</option>
-              <option value="catapult">Καταπέλτης</option>
-            </optgroup>
-            <optgroup label="Ναυτικές">
-              <option value="big_transporter">Μεταφορικό Πλοίο</option>
-              <option value="small_transporter">Γρήγορο Μεταφορικό Πλοίο</option>
-              <option value="bireme">Διήρης</option>
-              <option value="attack_ship">Πλοίο Φάρος</option>
-              <option value="trireme">Τριήρης</option>
-              <option value="colonize_ship">Αποικιακό Πλοίο</option>
-            </optgroup>
-            <optgroup label="Μυθικές">
-              <option value="medusa">Μέδουσα</option>
-              <option value="zyklop">Κύκλωπας</option>
-              <option value="harpy">Άρπυια</option>
-              <option value="pegasus">Πήγασος</option>
-              <option value="minotaur">Μινώταυρος</option>
-              <option value="manticore">Μαντιχώρας</option>
-              <option value="cerberus">Κέρβερος</option>
-              <option value="hydra">Ύδρα</option>
-              <option value="sea_monster">Τέρας της Θάλασσας</option>
-            </optgroup>
-          </select>
         </div>
 
         <!-- Market options -->
@@ -243,6 +217,17 @@
     </div>
   </div>
 </div>
+<!-- ====== Unit Picker Modal ====== -->
+<div id="unit-modal-overlay" class="modal-overlay" onclick="window.closeUnitModal(event)">
+  <div id="unit-modal" class="custom-modal">
+    <div class="modal-header">
+      <h3>⚔️ Επιλογή Μονάδας</h3>
+      <button id="unit-modal-close" onclick="window.closeUnitModal()">✕</button>
+    </div>
+    <div id="unit-grid" style="display:flex; flex-wrap:wrap; gap:10px; max-height:70vh; overflow-y:auto; padding:10px 5px;"></div>
+  </div>
+</div>
+
 <!-- ====== Academy Picker Modal ====== -->
 <div id="academy-modal-overlay" onclick="window.closeAcademyModal(event)">
   <div id="academy-modal">