servername,captca,timestamp,reserve resources

static/js/api.js

@@ -8,6 +8,11 @@ window.fetchTowns = async function() {
     window.towns = await res.json();
     window.renderTowns();
     window.updateServerStatus(true);
+    
+    // Automatically select the first town if none is selected
+    if (!window.selectedTownId && window.towns && window.towns.length > 0) {
+        window.selectTown(window.towns[0].town_id);
+    }
 
     if (window.selectedTownId) {
       window.renderBuildQueuePreview();
@@ -45,7 +50,9 @@ window.fetchLog = async function() {
   try {
     const res = await fetch('/dashboard/commands?player_id=' + window.PLAYER_ID);
     const cmds = await res.json();
+    window.cmds = cmds; // Save globally so viewer can see reserved resources
     window.renderLog(cmds);
+    if (window.selectedTownId) window.renderTownDetails();
   } catch (e) {}
 };
 

static/js/components/commandLog.js

@@ -22,8 +22,10 @@ window.renderLog = function(cmds) {
     const statusClass = `status-${cmd.status}`;
     const cancelBtn = `<button class="btn btn-danger btn-sm" onclick="cancelCommand(${cmd.id})">✕</button>`;
 
+    const timeStr = new Date(cmd.created_at + 'Z').toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    
     return `<tr>
-      <td style="color:#888;font-size:0.7rem">#${cmd.id}</td>
+      <td style="color:#888;font-size:0.75rem">#${cmd.id}<br><span style="font-size:0.65rem;color:#555;">${timeStr}</span></td>
       <td>${cmd.town_name || cmd.town_id}</td>
       <td>${desc}</td>
       <td><span class="status-badge ${statusClass}">${cmd.status}</span></td>

static/js/components/townViewer.js

@@ -111,13 +111,48 @@ window.renderTownDetails = function() {
     return 'color: #fff;';
   };
   
+  // Calculate resources reserved in the bot's pending queues
+  let reservedWood = 0, reservedStone = 0, reservedIron = 0;
+  if (window.cmds) {
+    window.cmds.forEach(cmd => {
+      if ((cmd.status === 'pending' || cmd.status === 'executing') && cmd.town_id == t.town_id) {
+        if (cmd.type === 'build' && t.build_data) {
+          const p = typeof cmd.payload === 'string' ? JSON.parse(cmd.payload) : cmd.payload;
+          const cost = t.build_data[p.building_id];
+          if (cost) {
+            reservedWood += cost.wood || 0;
+            reservedStone += cost.stone || 0;
+            reservedIron += cost.iron || 0;
+          }
+        } else if (cmd.type === 'recruit' && t.unit_data) {
+          const p = typeof cmd.payload === 'string' ? JSON.parse(cmd.payload) : cmd.payload;
+          const amt = parseInt(p.amount) || 1;
+          const cost = t.unit_data[p.unit_id];
+          if (cost) {
+            reservedWood += (cost.wood || 0) * amt;
+            reservedStone += (cost.stone || 0) * amt;
+            reservedIron += (cost.iron || 0) * amt;
+          }
+        }
+      }
+    });
+  }
+
+  const resHtml = (actual, reserved) => {
+    let base = `<strong style="${getCol(actual)}">${window.fmt(actual)}</strong>`;
+    if (reserved > 0) {
+      base += ` <span style="color:#ff6666; font-size:0.75rem;">(-${window.fmt(reserved)})</span>`;
+    }
+    return base;
+  };
+
   const capFmt = (t.resources.storage != null && t.resources.storage !== '') ? window.fmt(t.resources.storage) : '?';
   
   document.getElementById('td-resources').innerHTML = `
     <div style="font-size:0.75rem; color:#aaa; margin-bottom: 4px;">Χωρητικότητα: <strong style="color:#eee">${capFmt}</strong></div>
-    <div>${window.RES_ICONS.wood} Ξύλο: <strong style="${getCol(t.resources.wood)}">${window.fmt(t.resources.wood)}</strong></div>
-    <div>${window.RES_ICONS.stone} Πέτρα: <strong style="${getCol(t.resources.stone)}">${window.fmt(t.resources.stone)}</strong></div>
-    <div>${window.RES_ICONS.iron} Ασήμι: <strong style="${getCol(t.resources.iron)}">${window.fmt(t.resources.iron)}</strong></div>
+    <div>${window.RES_ICONS.wood} Ξύλο: ${resHtml(t.resources.wood, reservedWood)}</div>
+    <div>${window.RES_ICONS.stone} Πέτρα: ${resHtml(t.resources.stone, reservedStone)}</div>
+    <div>${window.RES_ICONS.iron} Ασήμι: ${resHtml(t.resources.iron, reservedIron)}</div>
     <div style="margin-top: 6px;">${window.RES_ICONS.pop} Πληθυσμός: <strong style="color:#fff">${t.resources.population}</strong></div>
   `;