enchance

templates/dashboard.html

@@ -226,6 +226,28 @@
     <h2>Send Command</h2>
     <div id="no-town-selected">← Select a town first</div>
     
+    <!-- New dynamic town details panel -->
+    <div id="town-details-panel" style="display:none; margin-bottom: 20px; padding: 12px; background: #0f3460; border-radius: 6px; border: 1px solid #2a4a6a;">
+      <h3 id="td-name" style="color: #c8a44a; margin-bottom: 8px; font-size: 1rem; border-bottom: 1px solid #2a4a6a; padding-bottom: 4px;">Town Name</h3>
+      
+      <div style="display: flex; gap: 20px; flex-wrap: wrap;">
+        <div style="flex: 1; min-width: 130px;">
+          <strong style="font-size: 0.75rem; color: #888; text-transform: uppercase;">Ποροι</strong>
+          <div id="td-resources" style="font-size: 0.85rem; margin-top: 4px; line-height: 1.5;"></div>
+        </div>
+        
+        <div style="flex: 1; min-width: 130px;">
+          <strong style="font-size: 0.75rem; color: #888; text-transform: uppercase;">Γενικα</strong>
+          <div id="td-general" style="font-size: 0.85rem; margin-top: 4px; line-height: 1.5;"></div>
+        </div>
+
+        <div style="flex: 1; min-width: 130px;">
+          <strong style="font-size: 0.75rem; color: #888; text-transform: uppercase;">Στρατος</strong>
+          <div id="td-units" style="font-size: 0.85rem; margin-top: 4px; line-height: 1.5; color: #a4c84a;"></div>
+        </div>
+      </div>
+    </div>
+
     <div id="command-form-wrap" style="display:none">
       <div class="command-form">
 
@@ -326,6 +348,23 @@ const BUILDING_NAMES_GR = {
   wall: "Τείχος"
 };
 
+const UNIT_NAMES_GR = {
+  sword: "Ξιφομάχος", slinger: "Σφενδονήτης", archer: "Τοξότης", hoplite: "Οπλίτης",
+  rider: "Ιππέας", chariot: "Άρμα", catapult: "Καταπέλτης",
+  big_transporter: "Μεταφορικό", small_transporter: "Γρήγ. Μεταφορικό", bireme: "Διήρης",
+  attack_ship: "Πλοίο Φάρος", trireme: "Τριήρης", colonize_ship: "Αποικιακό",
+  medusa: "Μέδουσα", zyklop: "Κύκλωπας", harpy: "Άρπυια", pegasus: "Πήγασος",
+  minotaur: "Μινώταυρος", manticore: "Μαντιχώρας", cerberus: "Κέρβερος",
+  hydra: "Ύδρα", sea_monster: "Τέρας Θάλασσας", militia: "Εθνοφρουρά"
+};
+
+const RES_ICONS = {
+  wood: '<span class="res-icon res-wood" style="display:inline-block; margin-right:4px;"></span>',
+  stone: '<span class="res-icon res-stone" style="display:inline-block; margin-right:4px;"></span>',
+  iron: '<span class="res-icon res-iron" style="display:inline-block; margin-right:4px;"></span>',
+  pop: '<span class="res-icon res-pop" style="display:inline-block; margin-right:4px;"></span>'
+};
+
 // ================================================================
 // Polling
 // ================================================================
@@ -335,6 +374,12 @@ async function fetchTowns() {
     towns = await res.json();
     renderTowns();
     updateConnectionStatus(true);
+    
+    if (selectedTownId) {
+      renderBuildQueuePreview();
+      renderBuildingDropdown();
+      renderTownDetails();
+    }
   } catch (e) {
     updateConnectionStatus(false);
   }
@@ -405,9 +450,44 @@ function selectTown(id) {
 
   document.getElementById('no-town-selected').style.display = 'none';
   document.getElementById('command-form-wrap').style.display = 'block';
+  document.getElementById('town-details-panel').style.display = 'block';
 
   renderBuildQueuePreview();
   renderBuildingDropdown();
+  renderTownDetails();
+}
+
+function renderTownDetails() {
+  const t = getSelectedTown();
+  if(!t) return;
+  
+  document.getElementById('td-name').textContent = t.town_name;
+  
+  document.getElementById('td-resources').innerHTML = `
+    <div>${RES_ICONS.wood} Ξύλο: <strong>${fmt(t.resources.wood)}</strong></div>
+    <div>${RES_ICONS.stone} Πέτρα: <strong>${fmt(t.resources.stone)}</strong></div>
+    <div>${RES_ICONS.iron} Ασήμι: <strong>${fmt(t.resources.iron)}</strong></div>
+    <div>${RES_ICONS.pop} Πληθυσμός: <strong>${t.resources.population}</strong></div>
+  `;
+  
+  const godName = t.god ? t.god.charAt(0).toUpperCase() + t.god.slice(1) : 'Κανένας';
+  document.getElementById('td-general').innerHTML = `
+    <div>Πόντοι: <strong>${t.points}</strong></div>
+    <div>Θεός: <strong>${godName}</strong></div>
+    <div>Παίκτης: <strong style="color:#aaa">${t.player}</strong></div>
+  `;
+
+  const unitsObj = t.units || {};
+  let unitsHtml = '';
+  for(const [unitKey, count] of Object.entries(unitsObj)) {
+    if(count > 0 && unitKey !== 'militia') { 
+      const name = UNIT_NAMES_GR[unitKey] || unitKey;
+      unitsHtml += `<div>${name}: <strong style="color:#fff">${count}</strong></div>`;
+    }
+  }
+  if(unitsHtml === '') unitsHtml = '<div style="color:#666">Κανένα στράτευμα</div>';
+  
+  document.getElementById('td-units').innerHTML = unitsHtml;
 }
 
 function renderBuildingDropdown() {