various fixes totest

This commit is contained in:
2026-05-03 13:50:37 +03:00
parent eb31072c87
commit 11f30f4c6a
7 changed files with 199 additions and 115 deletions

View File

@@ -21,10 +21,11 @@
.card-title{font-size:1rem;font-weight:700;color:var(--gold);margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.3rem;margin-top:.75rem}
label:first-of-type{margin-top:0}
input[type=text],input[type=number],input[type=datetime-local]{
input[type=text],input[type=number],input[type=datetime-local],select{
width:100%;padding:9px 12px;background:#0f0f1a;border:1px solid var(--border);
border-radius:8px;color:var(--text);font-size:.875rem;font-family:inherit;transition:border-color .2s}
input:focus{outline:none;border-color:var(--gold)}
input:focus,select:focus{outline:none;border-color:var(--gold)}
select option{background:#181824}
.btn{padding:9px 18px;border:none;border-radius:8px;font-family:inherit;font-weight:600;
font-size:.85rem;cursor:pointer;transition:all .2s}
.btn-gold{background:var(--gold);color:#0f0f1a}.btn-gold:hover{background:#e0b85a}
@@ -56,9 +57,8 @@
padding:10px 14px;border-radius:8px;font-size:.83rem;margin-top:.75rem}
.warn-box{background:rgba(240,192,64,.08);border:1px solid rgba(240,192,64,.25);color:var(--yellow);
padding:10px 14px;border-radius:8px;font-size:.83rem;margin-top:.5rem}
#msg{display:none;margin-top:.75rem}
.countdown{font-family:monospace;font-weight:700;color:var(--yellow)}
.section-sep{height:1px;background:var(--border);margin:1.5rem 0}
.town-meta{font-size:.75rem;color:var(--muted);margin-top:4px}
.section-sep{height:1px;background:var(--border);margin:1rem 0}
.plan-row{cursor:pointer}.plan-row:hover td{background:rgba(200,164,74,.05)}
.detail-panel{display:none}
.detail-panel.open{display:block}
@@ -68,25 +68,32 @@
.unit-input input{padding:6px 8px;font-size:.82rem}
.feasible-ok{color:var(--green);font-size:.78rem}
.feasible-err{color:var(--red);font-size:.78rem}
#msg{display:none;margin-top:.75rem}
</style>
</head>
<body>
<!-- Inject credentials for API calls from the web browser -->
<script>
window.__GRC_CLAN_KEY = "{{ clan_key }}";
window.PLAYER_ID = "{{ player_id }}";
window.WORLD_ID = "{{ world_id }}";
</script>
<div class="page-header">
<a href="/player/{{ player_id }}/{{ world_id }}/hub" class="back-link">← Hub</a>
<a href="/player/{{ player_id }}/{{ world_id }}" class="back-link">← Hub</a>
<h1>⚔️ Attack Planner — {{ world_id }}</h1>
</div>
<div class="grid">
<!-- LEFT: Plans list -->
<!-- LEFT: Plans list + detail -->
<div>
<div class="card">
<div class="card-title">📋 Ενεργά Πλάνα</div>
<div class="card-title">📋 Πλάνα Επίθεσης — {{ world_id }}</div>
<div id="plans-list"><div class="empty">Φόρτωση...</div></div>
</div>
<!-- Plan detail panel (shown when a plan is clicked) -->
<div class="card detail-panel" id="detail-panel">
<div class="card-title" id="detail-title">Λεπτομέρειες Πλάνου</div>
<div id="detail-body"></div>
@@ -95,27 +102,29 @@
<!-- RIGHT: Create plan + add participant -->
<div>
<!-- Create plan -->
<div class="card">
<div class="card-title"> Νέο Πλάνο Επίθεσης</div>
<div class="card-title"> Νέο Πλάνο</div>
<label>Όνομα Πλάνου</label>
<input type="text" id="plan-name" placeholder="π.χ. Επίθεση στον Leonidas">
<label>Κόσμος (World)</label>
<input type="text" id="plan-world" value="{{ world_id }}" readonly style="opacity:.6;cursor:not-allowed">
<label>Όνομα Στόχου</label>
<input type="text" id="target-name" placeholder="π.χ. Sparta Colony">
<label>Συντεταγμένες Στόχου (X)</label>
<input type="number" id="target-x" placeholder="π.χ. 394" min="0" max="999">
<label>Συντεταγμένες Στόχου X</label>
<input type="number" id="target-x" placeholder="π.χ. 503" min="0" max="999">
<label>Συντεταγμένες Στόχου (Y)</label>
<input type="number" id="target-y" placeholder="π.χ. 512" min="0" max="999">
<label>Συντεταγμένες Στόχου Y</label>
<input type="number" id="target-y" placeholder="π.χ. 474" min="0" max="999">
<label>Ώρα Άφιξης (τοπική ώρα)</label>
<input type="datetime-local" id="arrival-time">
<div class="info-box">
Η ώρα άφιξης πρέπει να είναι τουλάχιστον 2 λεπτά στο μέλλον. Όλες οι ώρες αποθηκεύονται σε UTC.
<div class="warn-box mt">
Η ώρα άφιξης πρέπει να είναι τουλάχιστον 2 λεπτά στο μέλλον.
</div>
<div class="mt">
@@ -124,30 +133,21 @@
<div id="msg"></div>
</div>
<!-- Add participant (shown after plan selected) -->
<!-- Add participant — only shown after a plan is selected -->
<div class="card" id="add-participant-card" style="display:none">
<div class="card-title">👤 Προσθήκη Συμμετέχοντα</div>
<div class="card-title">👤 Προσθήκη Πόλης στο Πλάνο</div>
<p style="font-size:.82rem;color:var(--muted);margin-bottom:.75rem">
Πλάνο: <strong id="selected-plan-name" style="color:var(--gold)"></strong>
</p>
<label>Origin Town ID</label>
<input type="text" id="p-town-id" placeholder="Από town_state">
<label>Όνομα Πόλης</label>
<input type="text" id="p-town-name" placeholder="Προαιρετικό">
<label>Συντεταγμένες Πόλης X</label>
<input type="number" id="p-x" min="0" max="999">
<label>Συντεταγμένες Πόλης Y</label>
<input type="number" id="p-y" min="0" max="999">
<label>Θαλάσσια Ζώνη (sea)</label>
<input type="number" id="p-sea" placeholder="π.χ. 45">
<label>Επιλογή Πόλης ({{ world_id }})</label>
<select id="p-town-select" onchange="onTownSelected()">
<option value="">— Επίλεξε πόλη —</option>
</select>
<div class="town-meta" id="p-town-meta"></div>
<div class="section-sep"></div>
<div class="card-title" style="border:none;padding:0;margin-bottom:.5rem">🗡 Μονάδες</div>
<div style="font-size:.85rem;font-weight:700;color:var(--gold);margin-bottom:.5rem">🗡 Μονάδες</div>
<div class="unit-grid" id="unit-inputs"></div>
<div class="mt">
@@ -161,14 +161,18 @@
<script>
(function() {
const PLAYER_ID = '{{ player_id }}';
const WORLD_ID = '{{ world_id }}';
const PLAYER_ID = window.PLAYER_ID;
const WORLD_ID = window.WORLD_ID;
const CLAN_KEY = window.__GRC_CLAN_KEY;
let selectedPlanId = null;
// ---- Unit list for inputs (common Grepolis land units) ----
// ---- Town data loaded from DB ----
let townData = []; // array of town objects with x, y, sea, town_id, town_name
// ---- Unit list ----
const UNITS = [
'swordsman','slinger','archer','hoplite','horseman',
'chariot','catapult','godsent',
'chariot','catapult',
'bireme','attack_ship','demolition_ship','transport_ship','colonize_ship'
];
@@ -177,10 +181,51 @@
UNITS.forEach(u => {
const div = document.createElement('div');
div.className = 'unit-input';
div.innerHTML = `<label>${u}</label><input type="number" id="unit_${u}" min="0" value="0" placeholder="0">`;
div.innerHTML = `<label>${u}</label><input type="number" id="unit_${u}" min="0" value="0">`;
grid.appendChild(div);
});
// ---- Load player's towns for this world ----
async function loadTowns() {
try {
const res = await fetch(`/dashboard/towns?player_id=${PLAYER_ID}&world_id=${WORLD_ID}`);
const towns = await res.json();
townData = towns;
const sel = document.getElementById('p-town-select');
// Clear old options (keep first placeholder)
while (sel.options.length > 1) sel.remove(1);
if (!towns.length) {
sel.options[0].text = '— Δεν βρέθηκαν πόλεις (script offline?) —';
return;
}
towns.forEach(t => {
const opt = document.createElement('option');
opt.value = t.town_id;
opt.textContent = `${t.town_name} (${t.x}, ${t.y})`;
sel.appendChild(opt);
});
} catch(e) {
console.error('Failed to load towns:', e);
}
}
// ---- When a town is selected from dropdown ----
window.onTownSelected = function() {
const sel = document.getElementById('p-town-select');
const tid = sel.value;
const meta = document.getElementById('p-town-meta');
if (!tid) { meta.textContent = ''; return; }
const town = townData.find(t => String(t.town_id) === String(tid));
if (town) {
meta.innerHTML =
`🗺 X: <strong>${town.x}</strong> &nbsp; Y: <strong>${town.y}</strong> &nbsp; Sea: <strong>${town.sea}</strong> &nbsp; World: <strong>${town.world_id}</strong>`;
}
};
// ---- Helpers ----
function showMsg(el, text, isError) {
el.style.display = 'block';
@@ -197,37 +242,39 @@
return new Date(unix * 1000).toLocaleString('el-GR');
}
function countdown(unix) {
if (!unix) return '';
const s = Math.max(0, Math.floor(unix - Date.now()/1000));
const h = Math.floor(s/3600), m = Math.floor((s%3600)/60), ss = s%60;
return `<span class="countdown">${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(ss).padStart(2,'0')}</span>`;
function apiHeaders() {
return { 'Content-Type': 'application/json', 'X-Clan-Key': CLAN_KEY };
}
// ---- Load plans ----
// ---- Load plans list ----
async function loadPlans() {
const res = await fetch(`/api/${WORLD_ID}/attack_plans`);
const data = await res.json();
const el = document.getElementById('plans-list');
if (!data.length) {
if (!Array.isArray(data) || !data.length) {
el.innerHTML = '<div class="empty">Δεν υπάρχουν πλάνα ακόμη.</div>';
return;
}
let html = `<table>
<thead><tr><th>Πλάνο</th><th>Στόχος</th><th>Άφιξη</th><th>Κατάσταση</th><th>Συμμ.</th><th></th></tr></thead>
<tbody>`;
<thead><tr>
<th>Πλάνο</th><th>Στόχος</th><th>Άφιξη</th><th>Status</th><th>Συμμ.</th><th></th>
</tr></thead><tbody>`;
for (const p of data) {
html += `<tr class="plan-row" onclick="selectPlan(${p.id},'${p.plan_name}')">
<td><strong>${p.plan_name}</strong></td>
<td>${p.target_town_name || ''}</td>
<td>${p.target_town_name||''} ${p.target_x?`(${p.target_x},${p.target_y})`:''}
</td>
<td style="font-size:.78rem">${formatTs(p.target_arrival_time)}</td>
<td>${statusBadge(p.status)}</td>
<td>${p.participant_count}</td>
<td>
${p.status==='draft' ? `<button class="btn btn-green btn-sm" onclick="event.stopPropagation();armPlan(${p.id})">ARM</button>` : ''}
<button class="btn btn-red btn-sm" onclick="event.stopPropagation();cancelPlan(${p.id})" style="margin-left:4px">✕</button>
${p.status==='draft'
? `<button class="btn btn-green btn-sm" onclick="event.stopPropagation();armPlan(${p.id})">ARM</button>`
: ''}
<button class="btn btn-red btn-sm" style="margin-left:4px"
onclick="event.stopPropagation();cancelPlan(${p.id})">✕</button>
</td>
</tr>`;
}
@@ -235,7 +282,7 @@
el.innerHTML = html;
}
// ---- Select plan → show detail + add participant panel ----
// ---- Select plan → show detail + participant panel ----
window.selectPlan = async function(planId, planName) {
selectedPlanId = planId;
document.getElementById('selected-plan-name').textContent = planName;
@@ -249,7 +296,7 @@
const panel = document.getElementById('detail-panel');
const body = document.getElementById('detail-body');
document.getElementById('detail-title').textContent =
`📌 ${plan.plan_name}${plan.target_town_name || 'Άγνωστος Στόχος'}`;
`📌 ${plan.plan_name}${plan.target_town_name||'Άγνωστος Στόχος'} (${plan.target_x||'?'}, ${plan.target_y||'?'})`;
if (!plan.participants || !plan.participants.length) {
body.innerHTML = '<div class="empty">Χωρίς συμμετέχοντες ακόμη.</div>';
@@ -260,20 +307,20 @@
let html = `<table>
<thead><tr>
<th>Πόλη</th><th>Τύπος</th><th>Πλοία</th>
<th>Αποστολή</th><th>Επιστροφή</th><th>Κατάσταση</th><th>Feasible</th><th></th>
<th>Αποστολή</th><th>Επιστροφή</th><th>Status</th><th>OK</th><th></th>
</tr></thead><tbody>`;
for (const p of plan.participants) {
const feasHtml = p.is_feasible
const f = p.is_feasible
? '<span class="feasible-ok">✅</span>'
: `<span class="feasible-err" title="${p.error_msg}">❌</span>`;
: `<span class="feasible-err" title="${p.error_msg||''}">❌</span>`;
html += `<tr>
<td><strong>${p.origin_town_name||p.origin_town_id}</strong></td>
<td>${p.attack_type||''}</td>
<td style="font-size:.75rem">${p.attack_type||''}</td>
<td>${p.transport_needed ? p.transport_count : ''}</td>
<td style="font-size:.78rem">${formatTs(p.send_time)}</td>
<td style="font-size:.78rem">${formatTs(p.return_time)}</td>
<td style="font-size:.75rem">${formatTs(p.send_time)}</td>
<td style="font-size:.75rem">${formatTs(p.return_time)}</td>
<td>${statusBadge(p.status)}</td>
<td>${feasHtml}</td>
<td>${f}</td>
<td>
<button class="btn btn-red btn-sm"
onclick="removeParticipant(${planId},'${p.origin_town_id}')">✕</button>
@@ -282,11 +329,10 @@
}
html += '</tbody></table>';
// Return time summary
const latest = plan.participants.reduce((mx, p) => Math.max(mx, p.return_time||0), 0);
const latest = plan.participants.reduce((m, p) => Math.max(m, p.return_time||0), 0);
if (latest) {
html += `<div class="info-box" style="margin-top:.75rem">
🏠 Τελευταία επιστροφή στρατού: <strong>${formatTs(latest)}</strong>
🏠 Τελευταία επιστροφή: <strong>${formatTs(latest)}</strong>
</div>`;
}
@@ -296,24 +342,24 @@
// ---- Create plan ----
window.createPlan = async function() {
const msg = document.getElementById('msg');
const name = document.getElementById('plan-name').value.trim();
const tName = document.getElementById('target-name').value.trim();
const tx = parseFloat(document.getElementById('target-x').value);
const ty = parseFloat(document.getElementById('target-y').value);
const msg = document.getElementById('msg');
const name = document.getElementById('plan-name').value.trim();
const tName= document.getElementById('target-name').value.trim();
const tx = parseFloat(document.getElementById('target-x').value) || null;
const ty = parseFloat(document.getElementById('target-y').value) || null;
const dtLocal = document.getElementById('arrival-time').value;
if (!dtLocal) { showMsg(msg,'Επίλεξε ώρα άφιξης',true); return; }
if (!dtLocal) { showMsg(msg, 'Επίλεξε ώρα άφιξης', true); return; }
const arrivalUnix = Math.floor(new Date(dtLocal).getTime() / 1000);
const res = await fetch(`/api/${WORLD_ID}/attack_plans`, {
method: 'POST',
headers: { 'Content-Type': 'application/json',
'X-Clan-Key': window.__GRC_CLAN_KEY || '' },
headers: apiHeaders(),
body: JSON.stringify({
player_id: PLAYER_ID, plan_name: name||'Επίθεση',
target_town_name: tName, target_x: tx||null, target_y: ty||null,
player_id: PLAYER_ID,
plan_name: name || 'Επίθεση',
target_town_name: tName,
target_x: tx, target_y: ty,
target_arrival_time: arrivalUnix
})
});
@@ -326,41 +372,58 @@
}
};
// ---- Add participant ----
// ---- Add participant (uses selected town from dropdown) ----
window.addParticipant = async function() {
if (!selectedPlanId) return;
const result = document.getElementById('participant-result');
const sel = document.getElementById('p-town-select');
const tid = sel.value;
if (!tid) {
result.innerHTML = '<div class="error-box">❌ Επίλεξε πόλη πρώτα</div>';
return;
}
const town = townData.find(t => String(t.town_id) === String(tid));
if (!town) {
result.innerHTML = '<div class="error-box">❌ Πόλη δεν βρέθηκε</div>';
return;
}
const units = {};
UNITS.forEach(u => {
const v = parseInt(document.getElementById(`unit_${u}`).value) || 0;
const v = parseInt(document.getElementById(`unit_${u}`)?.value) || 0;
if (v > 0) units[u] = v;
});
const body = {
requester_player_id: PLAYER_ID,
player_id: document.getElementById('p-town-id').value.split('_')[0] || PLAYER_ID,
origin_town_id: document.getElementById('p-town-id').value.trim(),
origin_town_name:document.getElementById('p-town-name').value.trim(),
origin_x: parseFloat(document.getElementById('p-x').value)||null,
origin_y: parseFloat(document.getElementById('p-y').value)||null,
origin_sea: parseInt(document.getElementById('p-sea').value)||null,
player_id: PLAYER_ID,
origin_town_id: town.town_id,
origin_town_name: town.town_name,
origin_x: town.x,
origin_y: town.y,
origin_sea: town.sea,
units
};
const res = await fetch(`/api/${WORLD_ID}/attack_plans/${selectedPlanId}/participants`, {
method: 'POST',
headers: { 'Content-Type': 'application/json',
'X-Clan-Key': window.__GRC_CLAN_KEY || '' },
headers: apiHeaders(),
body: JSON.stringify(body)
});
const data = await res.json();
if (data.ok || data.is_feasible !== undefined) {
let html = data.is_feasible
? `<div class="info-box">✅ Feasible — Travel: ${Math.floor(data.travel_time_secs/60)}m, Ships: ${data.transport_count||0}, Send: ${new Date(data.send_time*1000).toLocaleString('el-GR')}</div>`
: `<div class="error-box">❌ ${data.error_msg}</div>`;
result.innerHTML = html;
if (data.is_feasible !== undefined) {
if (data.is_feasible) {
result.innerHTML = `<div class="info-box">
✅ Feasible — Χρόνος: ${Math.floor(data.travel_time_secs/60)}m
&nbsp;|&nbsp; Πλοία: ${data.transport_count||0}
&nbsp;|&nbsp; Αποστολή: ${new Date(data.send_time*1000).toLocaleString('el-GR')}
</div>`;
} else {
result.innerHTML = `<div class="error-box">❌ ${data.error_msg}</div>`;
}
loadPlanDetail(selectedPlanId);
} else {
result.innerHTML = `<div class="error-box">❌ ${data.error||'Unknown error'}</div>`;
@@ -372,8 +435,7 @@
if (!confirm('Αφαίρεση συμμετέχοντα;')) return;
await fetch(`/api/${WORLD_ID}/attack_plans/${planId}/participants/${townId}`, {
method: 'DELETE',
headers: { 'Content-Type': 'application/json',
'X-Clan-Key': window.__GRC_CLAN_KEY || '' },
headers: apiHeaders(),
body: JSON.stringify({ requester_player_id: PLAYER_ID })
});
loadPlanDetail(planId);
@@ -384,8 +446,7 @@
window.armPlan = async function(planId) {
const res = await fetch(`/api/${WORLD_ID}/attack_plans/${planId}/arm`, {
method: 'POST',
headers: { 'Content-Type': 'application/json',
'X-Clan-Key': window.__GRC_CLAN_KEY || '' },
headers: apiHeaders(),
body: JSON.stringify({ player_id: PLAYER_ID })
});
const data = await res.json();
@@ -399,8 +460,7 @@
if (!confirm('Ακύρωση πλάνου;')) return;
await fetch(`/api/${WORLD_ID}/attack_plans/${planId}/cancel`, {
method: 'POST',
headers: { 'Content-Type': 'application/json',
'X-Clan-Key': window.__GRC_CLAN_KEY || '' },
headers: apiHeaders(),
body: JSON.stringify({ player_id: PLAYER_ID })
});
loadPlans();
@@ -410,8 +470,9 @@
}
};
// ---- Auto-refresh every 15s ----
// ---- Init ----
loadPlans();
loadTowns();
setInterval(loadPlans, 15000);
setInterval(() => { if (selectedPlanId) loadPlanDetail(selectedPlanId); }, 15000);