Update static/js/app.js

static/js/app.js

@@ -1,4 +1,21 @@
 document.addEventListener("DOMContentLoaded", () => {
+    let buildingNames = {};
+    let unitNames = {};
+
+    // Fetch building names first
+    fetch("/api/buildings")
+        .then(res => res.json())
+        .then(data => {
+            buildingNames = data;
+        });
+
+    // Fetch unit names
+    fetch("/api/units")
+        .then(res => res.json())
+        .then(data => {
+            unitNames = data;
+        });
+
     fetch("/api/data")
         .then(res => res.json())
         .then(data => {
@@ -51,29 +68,80 @@ document.addEventListener("DOMContentLoaded", () => {
                     item.addEventListener("click", () => {
                         const townId = parseInt(item.dataset.townid);
                         const selectedTown = player.towns.find(t => t.town_id === townId);
-                        showTownDetails(selectedTown);
+                        showTownMenu(selectedTown);
                     });
                 });
             }
 
-            // Step 2: Show town data
-            function showTownDetails(town) {
+            // Step 2: Show town menu
+            function showTownMenu(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>
+                html += `<p>Select info to view:</p>`;
+                html += `
+                    <select id="town-info-select" class="form-select mb-2">
+                        <option value="main">Main Info</option>
+                        <option value="buildingOrder">Building Order</option>
+                        <option value="researches">Researches</option>
+                        <option value="units">Units</option>
+                    </select>
+                    <div id="town-info-display"></div>
+                `;
+                playerDetails.innerHTML = html;
+
+                const infoSelect = document.getElementById("town-info-select");
+                const infoDisplay = document.getElementById("town-info-display");
+
+                function renderInfo(option) {
+                    let displayHTML = "";
+                    if (option === "main") {
+                        displayHTML += `<h5>Main Info</h5>`;
+                        displayHTML += `<ul>
+                            <li>Sea: ${town.sea}</li>
                             <li>Wood: ${town.wood}</li>
                             <li>Stone: ${town.stone}</li>
                             <li>Iron: ${town.iron}</li>
+                            <li>Population: ${town.population}</li>
+                            <li>Points: ${town.points}</li>
                         </ul>`;
-                html += `<h5>Buildings</h5><ul>`;
+                        displayHTML += `<h5>Buildings</h5><ul>`;
                         Object.entries(town.buildings).forEach(([b, lvl]) => {
                             if (b !== "id") {
-                        html += `<li>${b}: ${lvl}</li>`;
+                                const name = buildingNames[b]?.name || b;
+                                displayHTML += `<li>${name}: ${lvl}</li>`;
                             }
                         });
-                html += `</ul>`;
-                playerDetails.innerHTML = html;
+                        displayHTML += `</ul>`;
+                    } else if (option === "buildingOrder") {
+                        displayHTML += `<h5>Building Order</h5><ul>`;
+                        town.buildingOrder.forEach(b => {
+                            const name = buildingNames[b.building_type]?.name || b.building_type;
+                            displayHTML += `<li>${name} (ID: ${b.id}) - To complete at: ${b.to_be_completed_at}</li>`;
+                        });
+                        displayHTML += `</ul>`;
+                    } else if (option === "researches") {
+                        displayHTML += `<h5>Researches</h5><ul>`;
+                        Object.entries(town.researches).forEach(([r, val]) => {
+                            if (r !== "id" && val) displayHTML += `<li>${r}</li>`;
+                        });
+                        displayHTML += `</ul>`;
+                    } else if (option === "units") {
+                        displayHTML += `<h5>Units</h5><ul>`;
+                        Object.entries(town.units).forEach(([u, val]) => {
+                            const name = unitNames[u]?.name || u;  // <-- Use Greek name mapping
+                            displayHTML += `<li>${name}: ${val}</li>`;
+                        });
+                        displayHTML += `</ul>`;
+                    }
+                    infoDisplay.innerHTML = displayHTML;
+                }
+
+                // Initial render
+                renderInfo(infoSelect.value);
+
+                // Update on selection change
+                infoSelect.addEventListener("change", () => {
+                    renderInfo(infoSelect.value);
+                });
             }
         });
 });