From 3bb3518a9b4ca8b72841a1a9bfaa9348bb19a4f8 Mon Sep 17 00:00:00 2001
From: cay <cay@joksch.ch>
Date: Mon, 30 Mar 2026 14:50:08 +0100
Subject: [PATCH] =?UTF-8?q?Progressbar=20Punkte=20f=C3=BCr=20das=20Upgrade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.js              | 16 ++++++++++++----
 public/js/map-ui.js | 29 ++++++++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/app.js b/app.js
index 1c8dc37..01b9c20 100644
--- a/app.js
+++ b/app.js
@@ -151,9 +151,10 @@ app.get("/api/building/:id", requireLogin, async (req, res) => {
       upgradeCost: nextLevel[0]
         ? `${nextLevel[0].wood} Holz, ${nextLevel[0].stone} Stein, ${nextLevel[0].gold} Gold`
         : "Max Level erreicht",
-      upgradeWood:  nextLevel[0]?.wood  ?? null,
-      upgradeStone: nextLevel[0]?.stone ?? null,
-      upgradeGold:  nextLevel[0]?.gold  ?? null,
+      upgradeWood:           nextLevel[0]?.wood            ?? null,
+      upgradeStone:          nextLevel[0]?.stone           ?? null,
+      upgradeGold:           nextLevel[0]?.gold            ?? null,
+      upgradeRequiredPoints: nextLevel[0]?.required_points ?? null,  // NEU
     });
   } catch (err) {
     console.error(err);
@@ -172,7 +173,7 @@ app.post("/api/building/:id/upgrade", requireLogin, async (req, res) => {
   try {
     // Aktuelles Level holen
     const [[userBuilding]] = await db.query(
-      "SELECT id, level FROM user_buildings WHERE user_id = ? AND building_id = ?",
+      "SELECT id, level, points FROM user_buildings WHERE user_id = ? AND building_id = ?",
       [userId, buildingId],
     );
 
@@ -192,6 +193,13 @@ app.post("/api/building/:id/upgrade", requireLogin, async (req, res) => {
       return res.status(400).json({ error: "Maximales Level bereits erreicht" });
     }
 
+    // Punkte prüfen
+    if (userBuilding.points < levelData.required_points) {
+      return res.status(400).json({
+        error: `Nicht genügend Punkte. Benötigt: ${levelData.required_points}, Vorhanden: ${userBuilding.points}`,
+      });
+    }
+
     // Ressourcen des Spielers prüfen
     const [[currency]] = await db.query(
       "SELECT wood, stone, gold FROM account_currency WHERE account_id = ?",
diff --git a/public/js/map-ui.js b/public/js/map-ui.js
index 6855bd0..78fb160 100644
--- a/public/js/map-ui.js
+++ b/public/js/map-ui.js
@@ -85,15 +85,42 @@ async function openBuildingPopup(url) {
       buildingModules[buildingType](buildingType);
     }
 
+    // Punkte-Check: Upgrade nur möglich wenn genug Punkte vorhanden
+    const hasEnoughPoints =
+      data.upgradeRequiredPoints === null ||
+      data.points >= data.upgradeRequiredPoints;
+
+    const canUpgrade = data.upgradeWood !== null && hasEnoughPoints;
+
+    const pointsPct = data.upgradeRequiredPoints
+      ? Math.min((data.points / data.upgradeRequiredPoints) * 100, 100)
+      : 100;
+
+    const barColor = hasEnoughPoints ? "#88ff88" : "#e8a020";
+
     document.getElementById("tab-upgrade").innerHTML = `
       <div class="popup-info-title">Upgrade</div>
       <div class="popup-stat-row"><span class="popup-stat-key">Holz</span><span class="popup-stat-val">${data.upgradeWood ?? "–"}</span></div>
       <div class="popup-stat-row"><span class="popup-stat-key">Stein</span><span class="popup-stat-val">${data.upgradeStone ?? "–"}</span></div>
       <div class="popup-stat-row"><span class="popup-stat-key">Gold</span><span class="popup-stat-val">${data.upgradeGold ?? "–"}</span></div>
+
+      <div class="popup-xp-wrap" style="margin-top:14px;">
+        <div class="popup-xp-label" style="display:flex;justify-content:space-between;">
+          <span>Punkte für Upgrade</span>
+          <span style="color:${barColor}">${data.points} / ${data.upgradeRequiredPoints ?? "–"}</span>
+        </div>
+        <div class="popup-xp-track">
+          <div class="popup-xp-fill" style="width:${pointsPct}%;background:${barColor};">
+            <div class="popup-xp-shimmer"></div>
+          </div>
+        </div>
+      </div>
+
       <button class="popup-upgrade-btn" id="upgrade-btn" data-building="${url.split('/').pop()}"
-        ${data.upgradeWood === null ? 'disabled style="opacity:0.4;cursor:not-allowed;"' : ''}>
+        ${!canUpgrade ? 'disabled style="opacity:0.4;cursor:not-allowed;"' : ''}>
         ⚒ UPGRADE STARTEN ⚒
       </button>
+      ${!hasEnoughPoints ? `<p style="color:#ff6666;font-size:12px;margin-top:8px;text-align:center;">Noch ${data.upgradeRequiredPoints - data.points} Punkte bis zum Upgrade.</p>` : ""}
     `;
   } catch (error) {
     console.error("Gebäude konnte nicht geladen werden:", error);