add some filters v1

static/js/components/townViewer.js

@@ -4,27 +4,75 @@
 
 window.renderTowns = function() {
   const container = document.getElementById('town-list');
-  if (!window.towns.length) {
+  if (!window.towns || !window.towns.length) {
     container.innerHTML = '<p style="color:#444;font-size:0.8rem;">No towns received yet.</p>';
     return;
   }
 
+  // Get active filters
+  const searchTerm = (document.getElementById('town-search')?.value || '').toLowerCase();
+  const reqFullWh = document.getElementById('filter-full-wh')?.checked;
+  const reqFestival = document.getElementById('filter-festival')?.checked;
+  const reqPoints = document.getElementById('filter-points')?.checked;
+
+  const filteredTowns = window.towns.filter(t => {
+    // 1. Search by name
+    if (searchTerm && !t.town_name.toLowerCase().includes(searchTerm)) return false;
+    
+    const cap = t.resources.storage || 1;
+    const wPct = t.resources.wood / cap;
+    const sPct = t.resources.stone / cap;
+    const iPct = t.resources.iron / cap;
+    
+    // 2. Full WH (>95%)
+    if (reqFullWh && Math.max(wPct, sPct, iPct) < 0.95) return false;
+    
+    // 3. Festival (Wood>15k, Stone>18k, Iron>15k)
+    // City Festival exact costs = 15000, 18000, 15000
+    if (reqFestival && (t.resources.wood < 15000 || t.resources.stone < 18000 || t.resources.iron < 15000)) return false;
+    
+    // 4. Large Points
+    if (reqPoints && t.points < 10000) return false;
+    
+    return true;
+  });
+
+  if (filteredTowns.length === 0) {
+    container.innerHTML = '<p style="color:#888;font-size:0.85rem;padding:10px;">Καμία πόλη δεν ταιριάζει στα κριτήρια.</p>';
+    return;
+  }
+
   const now = Date.now();
-  container.innerHTML = window.towns.map(t => {
+  container.innerHTML = filteredTowns.map(t => {
     const updatedMs = new Date(t.updated_at + 'Z').getTime();
     const ageMin = Math.round((now - updatedMs) / 60000);
     const stale = ageMin > 3;
     const selected = t.town_id === window.selectedTownId ? 'selected' : '';
 
+    const cap = t.resources.storage || 1;
+    const wPct = t.resources.wood / cap;
+    const sPct = t.resources.stone / cap;
+    const iPct = t.resources.iron / cap;
+    
+    let markers = '';
+    if (wPct >= 0.95 || sPct >= 0.95 || iPct >= 0.95) {
+      markers += '<span title="Γεμάτη Αποθήκη!" style="margin-right:4px;">⚠️</span>';
+    }
+    if (t.resources.wood >= 15000 && t.resources.stone >= 18000 && t.resources.iron >= 15000) {
+      markers += '<span title="Αρκετοί πόροι για Φεστιβάλ!" style="margin-right:4px;">🎭</span>';
+    }
+
+    const getC = (pct) => pct >= 0.95 ? 'color:#ff4a4a;font-weight:bold;' : '';
+
     return `
       <div class="town-card ${selected} ${stale ? 'town-stale' : ''}"
            onclick="selectTown('${t.town_id}')">
-        <div class="town-name">${t.town_name}${t.has_premium ? ' <span style="color:#c8a44a;font-size:0.7rem;">★</span>' : ''}</div>
+        <div class="town-name">${markers}${t.town_name}${t.has_premium ? ' <span style="color:#c8a44a;font-size:0.7rem;">★</span>' : ''}</div>
         <div class="town-meta">${t.sea != null ? `🌊 Θ${t.sea} · ` : ''}${t.points} pts · ${t.god || 'No god'} · ${ageMin}m ago</div>
         <div class="town-res">
-          <div class="res-item"><div class="res-icon res-wood"></div>${window.fmt(t.resources.wood)}</div>
+          <div class="res-item" style="${getC(wPct)}"><div class="res-icon res-wood"></div>${window.fmt(t.resources.wood)}</div>
-          <div class="res-item"><div class="res-icon res-stone"></div>${window.fmt(t.resources.stone)}</div>
+          <div class="res-item" style="${getC(sPct)}"><div class="res-icon res-stone"></div>${window.fmt(t.resources.stone)}</div>
-          <div class="res-item"><div class="res-icon res-iron"></div>${window.fmt(t.resources.iron)}</div>
+          <div class="res-item" style="${getC(iPct)}"><div class="res-icon res-iron"></div>${window.fmt(t.resources.iron)}</div>
           <div class="res-item"><div class="res-icon res-pop"></div>${window.fmt(t.resources.population)}</div>
         </div>
       </div>`;

templates/dashboard.html

@@ -28,6 +28,25 @@
   <!-- Left: Town list -->
   <div id="town-panel">
     <h2>Towns</h2>
+    
+    <div id="town-filters" style="margin-bottom: 15px; padding: 10px; background: #0f3460; border-radius: 6px; border: 1px solid #2a4a6a;">
+      <input type="text" id="town-search" placeholder="Αναζήτηση Πόλης..." style="width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 6px; border-radius: 4px; border: 1px solid #3a5a7a; background: #1a1a24; color: white;" onkeyup="window.renderTowns()">
+      
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <label style="font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 12px; border: 1px solid #2a4a6a;">
+          <input type="checkbox" id="filter-full-wh" onchange="window.renderTowns()"> ⚠️ Γεμάτη Αποθήκη (>95%)
+        </label>
+        
+        <label style="font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 12px; border: 1px solid #2a4a6a;">
+          <input type="checkbox" id="filter-festival" onchange="window.renderTowns()"> 🎭 Ελεύθεροι Πόροι
+        </label>
+
+        <label style="font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 12px; border: 1px solid #2a4a6a;">
+          <input type="checkbox" id="filter-points" onchange="window.renderTowns()"> 📈 10k+ Πόντοι
+        </label>
+      </div>
+    </div>
+
     <div id="town-list"><p style="color:#444;font-size:0.8rem;">Waiting for data from home PC…</p></div>
   </div>