Wohnhaus mit avantar ausgestattet

app.js

@@ -16,6 +16,9 @@ const session = require("express-session");
 const loginRoutes = require("./routes/login");
 const launcherRoutes = require("./routes/launcher");
 const buildingRoutes = require("./routes/buildings");
+const inventory = require("./routes/inventory");
+const avatar = require("./routes/avatar");
+const equip = require("./routes/equip");
 
 const app = express();
 app.set("trust proxy", 1);
@@ -172,6 +175,9 @@ app.use("/create-character", characterRoutes);
 app.use("/login", loginRoutes);
 app.use("/launcher", launcherRoutes);
 app.use("/", buildingRoutes);
+app.use("/api/inventory", inventory);
+app.use("/api/avatar", avatar);
+app.use("/api/equip", equip);
 
 /* ========================
    404 Handler

public/js/buildings/wohnhaus.js

@@ -0,0 +1,51 @@
+export async function loadWohnhaus(data) {
+  const container = document.querySelector(".building-ui");
+
+  container.innerHTML = `
+    <div id="wohnhaus-ui">
+
+      <div id="avatar"></div>
+
+      <div id="inventory"></div>
+
+    </div>
+  `;
+
+  loadAvatar();
+  loadInventory();
+}
+
+async function loadAvatar() {
+  const res = await fetch("/api/avatar");
+  const avatar = await res.json();
+
+  let html = `<div class="avatar">`;
+
+  avatar.forEach((i) => {
+    html += `<img src="${i.icon}" class="${i.slot}">`;
+  });
+
+  html += "</div>";
+
+  document.getElementById("avatar").innerHTML = html;
+}
+
+async function loadInventory() {
+  const res = await fetch("/api/inventory");
+  const items = await res.json();
+
+  let html = "";
+
+  items.forEach((item) => {
+    html += `
+<div class="inventory-item"
+data-id="${item.id}"
+data-level="${item.level}">
+<img src="${item.icon}">
+<p>${item.name}</p>
+</div>
+`;
+  });
+
+  document.getElementById("inventory").innerHTML = html;
+}

public/js/map-ui.js

@@ -1,7 +1,12 @@
+import { loadWohnhaus } from "./buildings/wohnhaus.js";
 const popup = document.getElementById("building-popup");
 const title = document.getElementById("popup-title");
 const tooltip = document.getElementById("map-tooltip");
 
+const buildingModules = {
+  wohnhaus: loadWohnhaus,
+};
+
 /* ================================
    Tabs zurücksetzen
 ================================ */
@@ -59,15 +64,24 @@ document.querySelectorAll(".building").forEach((building) => {
         </div>
       `;
 
-      document.getElementById("tab-actions").innerHTML = `
-        <button>Betreten</button>
-        <button>Handeln</button>
-      `;
+      const actionsTab = document.getElementById("tab-actions");
+
+      actionsTab.innerHTML = ` <button>Betreten</button> `;
+
+      // Prüfen ob das Gebäude ein eigenes Modul hat
+      if (buildingModules[data.type]) {
+        actionsTab.innerHTML = `
+          <div class="building-ui"></div>
+        `;
+
+        // Modul starten
+        buildingModules[data.type](data);
+      }
 
       document.getElementById("tab-upgrade").innerHTML = `
-        <p>Kosten: ${data.upgradeCost}</p>
-        <button>Upgrade</button>
-      `;
+              <p>Kosten: ${data.upgradeCost}</p>
+              <button>Upgrade</button>
+            `;
 
       document.getElementById("tab-history").innerHTML = `
         <p>${data.history}</p>

routes/equip.js

@@ -0,0 +1,21 @@
+const express = require("express");
+const router = express.Router();
+const db = require("../db");
+
+router.post("/", async (req, res) => {
+  const userId = 1;
+  const { itemId, itemLevelId } = req.body;
+
+  await db.query(
+    `
+REPLACE INTO avatar_equipment
+(user_id,slot,item_id,item_level_id)
+VALUES (?,?,?,?)
+`,
+    [userId, "weapon", itemId, itemLevelId],
+  );
+
+  res.json({ success: true });
+});
+
+module.exports = router;

routes/inventory.js

@@ -0,0 +1,27 @@
+const express = require("express");
+const router = express.Router();
+const db = require("../db");
+
+router.get("/", async (req, res) => {
+  const userId = 1;
+
+  const items = await db.query(
+    `
+SELECT
+items.id,
+items.name,
+items.icon,
+item_levels.level,
+user_inventory.amount
+FROM user_inventory
+JOIN items ON items.id=user_inventory.item_id
+LEFT JOIN item_levels ON item_levels.id=user_inventory.item_level_id
+WHERE user_inventory.user_id=?
+`,
+    [userId],
+  );
+
+  res.json(items);
+});
+
+module.exports = router;

routes/routes/avatar.js

@@ -0,0 +1,23 @@
+const express = require("express");
+const router = express.Router();
+const db = require("../db");
+
+router.get("/", async (req, res) => {
+  const userId = 1;
+
+  const avatar = await db.query(
+    `
+SELECT
+avatar_equipment.slot,
+items.icon
+FROM avatar_equipment
+JOIN items ON items.id=avatar_equipment.item_id
+WHERE avatar_equipment.user_id=?
+`,
+    [userId],
+  );
+
+  res.json(avatar);
+});
+
+module.exports = router;

views/launcher.ejs

@@ -203,7 +203,7 @@
       </div>
     </div>
     <div id="map-tooltip"></div>
-    <script src="/js/map-ui.js"></script>
+    <script type="module" src="/js/map-ui.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script>
       window.playerName = "<%= character.name %>";