grepo-remote/static/js/components/commandForm.js

// ================================================================
// 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';
};

window.renderBuildingDropdown = function() {
  const town = window.getSelectedTown();
  if (!town) return;
  const bSelect = document.getElementById('building-select');
  const bLevels = town.buildings || {};
  const bData   = town.build_data || {};
  
  const currentVal = bSelect.value;
  bSelect.innerHTML = '<option value="" disabled selected>-- Επιλέξτε Κατασκευή --</option>';
  
  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}]`;

    if (data) {
      const w  = window.fmt(data.wood || 0);
      const st = window.fmt(data.stone || 0);
      const i  = window.fmt(data.iron || 0);
      const pop = data.pop || 0;
      let t    = data.build_time || '';
      if (t.startsWith('00:')) t = t.substring(3); // make '00:06:00' cleaner as '06:00'
      
      const popStr = pop > 0 ? ` 🧔:${pop} ` : ' ';
      const costStr = `Ξ:${w} Π:${st} Α:${i}${popStr}· ⏱ ${t}`;

      // Figure out the state - missing_dependencies is an Object!
      const missingKeys = data.missing_dependencies ? Object.keys(data.missing_dependencies) : [];
      const isLocked = (!data.dependencies) || (missingKeys.length > 0);

      const option = document.createElement('option');
      option.value = key;

      if (data.has_max_level) {
        option.textContent = `${text} — (Μέγιστο Επίπεδο)`;
        option.style.color = '#33aa33';
      } else if (isLocked) {
        option.textContent = `${text} — 🔒 Κλειδωμένο (Προϋποθέσεις)`;
        option.style.color = '#ff4444'; // Red as requested
      } else if (data.can_upgrade === true) {
        option.textContent = `${text} — ✅ ${costStr}`;
      } else if (data.enough_resources === false) {
        option.textContent = `${text} — ❌ ${costStr} (Λείπουν Πόροι)`;
        option.style.color = '#aa5555';
      } else {
        // can_upgrade is false, but resources are fine = Population limit or Queue full
        option.textContent = `${text} — ⚠️ ${costStr} (Πληθυσμός / Ουρά)`;
        option.style.color = '#aa8855';
      }
      
      bSelect.appendChild(option);
    } else {
      const option = document.createElement('option');
      option.value = key;
      option.textContent = text;
      bSelect.appendChild(option);
    }
  }
  
  if (currentVal && Array.from(bSelect.options).some(o => o.value === currentVal)) {
    bSelect.value = currentVal;
  }
};

window.renderUnitDropdown = function() {
  const town = window.getSelectedTown();
  if (!town) return;
  const uSelect = document.getElementById('unit-select');
  const uData   = town.unit_data || {};
  
  const currentVal = uSelect.value;
  uSelect.innerHTML = '<option value="" disabled selected>-- Επιλέξτε Μονάδα --</option>';

  for (const [key, nameGr] of Object.entries(window.UNIT_NAMES_GR)) {
    if (key === 'militia') continue;
    
    const data = uData[key];
    let text = `${nameGr}`;

    if (data) {
      const w  = window.fmt(data.wood || 0);
      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
      let t = data.build_time || 0;
      let tStr = `${t}s`;
      if (t > 60) {
        let m = Math.floor(t / 60);
        let s = t % 60;
        tStr = `${m}m ${s}s`;
      }
      
      const costStr = `Ξ:${w} Π:${st} Α:${i} 🧔:${pop} · ⏱ ${tStr}`;

      const missingKeys = data.missing_dependencies ? Object.keys(data.missing_dependencies) : [];
      const isLocked = missingKeys.length > 0;

      const option = document.createElement('option');
      option.value = key;

      if (isLocked) {
        option.textContent = `${text} — 🔒 Κλειδωμένο`;
        option.style.color = '#ff4444';
      } else if (data.enough_resources === false) {
        option.textContent = `${text} — ❌ ${costStr} (Λείπουν Πόροι 1x)`;
        option.style.color = '#aa5555';
      } else {
        option.textContent = `${text} — ✅ ${costStr}`;
      }
      
      uSelect.appendChild(option);
    } else {
      const option = document.createElement('option');
      option.value = key;
      option.textContent = text;
      uSelect.appendChild(option);
    }
  }
  
  if (currentVal && Array.from(uSelect.options).some(o => o.value === currentVal)) {
    uSelect.value = currentVal;
  }
};

window.renderBuildQueuePreview = function() {
  const town = window.getSelectedTown();
  const el = document.getElementById('build-queue-preview');
  if (!town || !town.build_queue || !town.build_queue.length) {
    el.innerHTML = '<span style="color:#444">Build queue: empty</span>';
    return;
  }
  const items = town.build_queue.map(o => {
    const raw = o.building_type || o.name || "";
    const nameGr = window.BUILDING_NAMES_GR[raw] || raw || JSON.stringify(o);
    return `<span style="background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; margin-right: 4px; font-size: 0.8rem;">${nameGr}</span>`;
  }).join('');
  el.innerHTML = `<div style="margin-top:6px;color:#888;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">Current queue</div>${items}`;
};