time and cost add

static/js/components/commandForm.js

@@ -14,15 +14,52 @@ window.renderBuildingDropdown = function() {
   if (!town) return;
   const bSelect = document.getElementById('building-select');
   const bLevels = town.buildings || {};
+  const bData   = town.build_data || {};
   
   const currentVal = bSelect.value;
   bSelect.innerHTML = '';
+
+  // Helper to format seconds -> "1h 30m" or "4m 15s"
+  const formatTime = (secs) => {
+    if (!secs) return '';
+    const h = Math.floor(secs / 3600);
+    const m = Math.floor((secs % 3600) / 60);
+    const s = secs % 60;
+    if (h > 0) return `${h}h ${m}m`;
+    if (m > 0) return `${m}m ${s}s`;
+    return `${s}s`;
+  };
   
   for (const [key, nameGr] of Object.entries(window.BUILDING_NAMES_GR)) {
     const level = bLevels[key] !== undefined ? bLevels[key] : "?";
+    const data = bData[key];
+    
+    let text = `${nameGr} [Επίπεδο ${level}]`;
+    let buildable = true;
+
+    if (data) {
+      const w  = window.fmt(data.wood || 0);
+      const st = window.fmt(data.stone || 0);
+      const i  = window.fmt(data.iron || 0);
+      const t  = formatTime(data.build_time);
+      buildable = data.buildable;
+
+      // Only show costs if the prerequisites are fulfilled and it's not max level
+      if (data.dependencies) {
+        text += ` — Ξ:${w} Π:${st} Α:${i} · ⏱ ${t}`;
+      } else {
+        text += ` — (Μη διαθέσιμο)`;
+      }
+    }
+
     const option = document.createElement('option');
     option.value = key;
-    option.textContent = `${nameGr} [Επίπεδο ${level}]`;
+    option.textContent = (!buildable && data?.dependencies) ? `❌ ${text}` : text;
+    
+    if (!buildable) {
+      option.style.color = '#aa5555';
+    }
+    
     bSelect.appendChild(option);
   }