80 lines
3.5 KiB
JavaScript
80 lines
3.5 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
fetch("/api/data")
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
const playerList = document.getElementById("player-list");
|
|
const playerDetails = document.getElementById("player-details");
|
|
const attacksList = document.getElementById("attacks-list");
|
|
|
|
// Fill player list
|
|
Object.keys(data.players).forEach(name => {
|
|
const div = document.createElement("div");
|
|
div.className = "player-item";
|
|
div.textContent = name;
|
|
div.addEventListener("click", () => {
|
|
showTownSelection(data.players[name]);
|
|
});
|
|
playerList.appendChild(div);
|
|
});
|
|
|
|
// Fill incoming attacks panel
|
|
if (data.attacks.length === 0) {
|
|
attacksList.innerHTML = "<p class='p-2'>No incoming attacks</p>";
|
|
} else {
|
|
data.attacks.forEach(atk => {
|
|
const div = document.createElement("div");
|
|
div.className = "p-2 border-bottom";
|
|
div.innerHTML = `<strong>${atk.player}</strong>: ${atk.target_town} (${atk.units || 'Unknown units'}) ETA: ${atk.eta}`;
|
|
attacksList.appendChild(div);
|
|
});
|
|
}
|
|
|
|
// Step 1: Show list of towns for selected player
|
|
function showTownSelection(player) {
|
|
if (player.error) {
|
|
playerDetails.innerHTML = `<p style='color:red'>${player.error}</p>`;
|
|
return;
|
|
}
|
|
let html = `<h3>${player.player} (${player.player_id})</h3>`;
|
|
html += `<p><strong>Last Update:</strong> ${player.timestamp}</p>`;
|
|
html += `<h5>Select a town:</h5><ul>`;
|
|
player.towns.forEach(town => {
|
|
html += `<li class="town-item" style="cursor:pointer;color:blue" data-townid="${town.town_id}">
|
|
${town.town_name}
|
|
</li>`;
|
|
});
|
|
html += `</ul>`;
|
|
playerDetails.innerHTML = html;
|
|
|
|
// Attach click events for towns
|
|
document.querySelectorAll(".town-item").forEach(item => {
|
|
item.addEventListener("click", () => {
|
|
const townId = parseInt(item.dataset.townid);
|
|
const selectedTown = player.towns.find(t => t.town_id === townId);
|
|
showTownDetails(selectedTown);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Step 2: Show town data
|
|
function showTownDetails(town) {
|
|
let html = `<h4>${town.town_name}</h4>`;
|
|
html += `<p><strong>Points:</strong> ${town.points} | <strong>Population:</strong> ${town.population}</p>`;
|
|
html += `<h5>Resources</h5>
|
|
<ul>
|
|
<li>Wood: ${town.wood}</li>
|
|
<li>Stone: ${town.stone}</li>
|
|
<li>Iron: ${town.iron}</li>
|
|
</ul>`;
|
|
html += `<h5>Buildings</h5><ul>`;
|
|
Object.entries(town.buildings).forEach(([b, lvl]) => {
|
|
if (b !== "id") {
|
|
html += `<li>${b}: ${lvl}</li>`;
|
|
}
|
|
});
|
|
html += `</ul>`;
|
|
playerDetails.innerHTML = html;
|
|
}
|
|
});
|
|
});
|