änmdern des tabs aus datenbank

app.js

@@ -67,19 +67,55 @@ app.set("view engine", "ejs");
 app.set("views", path.join(__dirname, "views"));
 
 /* ========================
-   Route für Ajax
+   Route für Ajax für Gebäude
 ======================== */
 
-app.get("/api/building/:id", (req, res) => {
-  const data = {
-    name: "Burg",
-    level: 3,
-    description: "Das Herz deiner Stadt.",
-    upgradeCost: "500 Holz, 200 Stein",
-    history: "Die Burg wurde vor Jahrhunderten erbaut.",
-  };
+app.get("/api/building/:id", async (req, res) => {
+  const buildingId = req.params.id;
+  const userId = req.session.user.id;
 
-  res.json(data);
+  try {
+    const [userBuilding] = await db.query(
+      "SELECT level, points FROM user_buildings WHERE user_id=? AND building_id=?",
+      [userId, buildingId],
+    );
+
+    let building;
+
+    if (!userBuilding.length) {
+      await db.query(
+        "INSERT INTO user_buildings (user_id,building_id,level,points) VALUES (?,?,1,0)",
+        [userId, buildingId],
+      );
+
+      building = { level: 1, points: 0 };
+    } else {
+      building = userBuilding[0];
+    }
+
+    const [nextLevel] = await db.query(
+      "SELECT required_points FROM building_levels WHERE building_id=? AND level=?",
+      [buildingId, building.level + 1],
+    );
+
+    const [info] = await db.query(
+      "SELECT name,description,history FROM buildings WHERE id=?",
+      [buildingId],
+    );
+
+    res.json({
+      name: info[0].name,
+      level: building.level,
+      points: building.points,
+      nextLevelPoints: nextLevel[0]?.required_points || null,
+      description: info[0].description,
+      history: info[0].history,
+      upgradeCost: "500 Holz, 200 Stein",
+    });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "DB Fehler" });
+  }
 });
 
 /* ========================

public/css/building.css

@@ -43,3 +43,18 @@ body {
 .back:hover {
   background: #4a85ff;
 }
+
+.progress-bar {
+  width: 100%;
+  height: 10px;
+
+  background: #2a1a0b;
+  border: 1px solid #8b6a3c;
+
+  margin-top: 6px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #3cff3c;
+}

public/js/chat.js

@@ -91,7 +91,7 @@ socket.on("onlineUsers", (users) => {
   const list = document.getElementById("online-list");
 
   list.innerHTML = "";
-
+  users.sort();
   users.forEach((user) => {
     const div = document.createElement("div");
 

public/js/map-ui.js

@@ -25,7 +25,13 @@ document.querySelectorAll(".building").forEach((b) => {
     document.getElementById("tab-info").innerHTML = `
       <h3>${data.name}</h3>
       <p>Level: ${data.level}</p>
+      <p>Punkte: ${data.points} / ${data.nextLevelPoints}</p>
       <p>${data.description}</p>
+      <div class="progress-bar">
+        <div class="progress-fill"
+            style="width:${(data.points / data.nextLevelPoints) * 100}%">
+        </div>
+      </div>
     `;
 
     document.getElementById("tab-actions").innerHTML = `
@@ -63,3 +69,29 @@ document.querySelectorAll(".tab").forEach((tab) => {
 document.querySelector(".popup-close").onclick = () => {
   popup.style.display = "none";
 };
+
+async function loadBuilding(buildingId) {
+  try {
+    const res = await fetch("/api/building/" + buildingId);
+    const data = await res.json();
+
+    document.getElementById("tab-info").innerHTML = `
+      <h3>${data.name}</h3>
+      <p>Level: ${data.level}</p>
+      <p>Punkte: ${data.points} / ${data.nextLevelPoints}</p>
+      <p>${data.description}</p>
+    `;
+
+    document.getElementById("tab-upgrade").innerHTML = `
+      <p>Nächstes Level benötigt:</p>
+      <p>${data.nextLevelPoints} Punkte</p>
+      <p>Kosten: ${data.upgradeCost}</p>
+    `;
+
+    document.getElementById("tab-history").innerHTML = `
+      <p>${data.history}</p>
+    `;
+  } catch (err) {
+    console.error("Fehler beim Laden des Gebäudes:", err);
+  }
+}