add some filters v1

This commit is contained in:
2026-04-21 23:34:59 +03:00
parent af327ec142
commit f4016b4431
2 changed files with 73 additions and 6 deletions

View File

@@ -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"><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(wPct)}"><div class="res-icon res-wood"></div>${window.fmt(t.resources.wood)}</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" 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>`;