Progressbar Punkte für das Upgrade

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,
+      upgradeWood:           nextLevel[0]?.wood            ?? null,
-      upgradeStone: nextLevel[0]?.stone ?? null,
+      upgradeStone:          nextLevel[0]?.stone           ?? null,
-      upgradeGold:  nextLevel[0]?.gold  ?? 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 = ?",

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);