diff --git a/public/css/bazaar.css b/public/css/bazaar.css index 57bfe00..f0cfd9d 100644 --- a/public/css/bazaar.css +++ b/public/css/bazaar.css @@ -3,7 +3,8 @@ ============================================================ */ /* ── Haupt-Layout ────────────────────────── */ -.mp-wrap { +.mp-wrap, +.mp-body-wrap { display: flex; width: 100%; max-width: 100%; @@ -101,7 +102,8 @@ } /* ── Panel-Body ──────────────────────────── */ -.mp-body { +.mp-body, +.mp-panel-body { flex: 1; display: flex; align-items: center; diff --git a/public/js/buildings/bazaar.js b/public/js/buildings/bazaar.js new file mode 100644 index 0000000..0a93d6c --- /dev/null +++ b/public/js/buildings/bazaar.js @@ -0,0 +1,125 @@ +/* ============================================================ + public/js/buildings/bazaar.js + Bazaar – eigenes Parchment-Popup (wie Gaststätte) +============================================================ */ + +let baz_initialized = false; + +/* ── CSS einmalig laden ── */ +function loadCSS() { + if (!document.querySelector('link[href="/css/bazaar.css"]')) { + const link = document.createElement("link"); + link.rel = "stylesheet"; + link.href = "/css/bazaar.css"; + document.head.appendChild(link); + } +} + +/* ── Popup-Element erzeugen falls noch nicht vorhanden ── */ +function ensurePopup() { + if (document.getElementById("bazaar-popup")) return; + + const popup = document.createElement("div"); + popup.id = "bazaar-popup"; + popup.className = "qm-popup"; + popup.innerHTML = ` +
+ Bazaar + ✕ +
+
+ +
+
+
Händler
+
+ Demnächst verfügbar… +
+
+
+
Auktionen
+
+ Demnächst verfügbar… +
+
+
+
Tauschbörse
+
+ Demnächst verfügbar… +
+
+
+
+ `; + document.body.appendChild(popup); + + /* Schließen-Button */ + popup.querySelector("#bazaar-close").addEventListener("click", closeBazaar); + + /* Tab-Klick */ + popup.querySelectorAll(".mp-tab").forEach((btn) => { + btn.addEventListener("click", () => { + popup.querySelectorAll(".mp-tab").forEach((t) => t.classList.remove("mp-tab-active")); + popup.querySelectorAll(".mp-panel").forEach((p) => p.classList.remove("active")); + btn.classList.add("mp-tab-active"); + document.getElementById(btn.dataset.tab)?.classList.add("active"); + }); + }); + + /* Drag-fähig machen */ + const header = popup.querySelector(".qm-popup-header"); + let isDragging = false, startX, startY, startLeft, startTop; + header.style.cursor = "grab"; + header.addEventListener("mousedown", (e) => { + if (e.target.classList.contains("qm-popup-close")) return; + isDragging = true; + header.style.cursor = "grabbing"; + const rect = popup.getBoundingClientRect(); + startX = e.clientX; startY = e.clientY; + startLeft = rect.left; startTop = rect.top; + popup.style.transform = "none"; + popup.style.left = startLeft + "px"; + popup.style.top = startTop + "px"; + e.preventDefault(); + }); + document.addEventListener("mousemove", (e) => { + if (!isDragging) return; + popup.style.left = (startLeft + (e.clientX - startX)) + "px"; + popup.style.top = (startTop + (e.clientY - startY)) + "px"; + }); + document.addEventListener("mouseup", () => { + if (!isDragging) return; + isDragging = false; + header.style.cursor = "grab"; + }); +} + +function closeBazaar() { + document.getElementById("bazaar-popup")?.classList.remove("active"); + document.getElementById("qm-overlay")?.classList.remove("active"); +} + +/* ── Öffentliche Funktion ── */ +export function loadBazaar() { + loadCSS(); + ensurePopup(); + + const popup = document.getElementById("bazaar-popup"); + const overlay = document.getElementById("qm-overlay"); + + popup.style.left = "50%"; + popup.style.top = "50%"; + popup.style.transform = "translate(-50%, -50%) scale(1)"; + popup.classList.add("active"); + overlay?.classList.add("active"); +} diff --git a/public/js/map-ui.js b/public/js/map-ui.js index ecb1a3a..13cdcae 100644 --- a/public/js/map-ui.js +++ b/public/js/map-ui.js @@ -3,13 +3,7 @@ import { loadCharacterHouse } from "./buildings/character-house.js?v=2"; import { loadBlackmarket } from "./buildings/blackmarket.js?v=2"; import { loadMine } from "./buildings/mine.js?v=2"; import { loadGlucksspiel } from "./gaststaette/glucksspiel.js"; - -/* Gaststätte CSS einmalig laden */ -if (!document.querySelector('link[href="/css/gaststaette.css"]')) { - const _l = document.createElement("link"); - _l.rel = "stylesheet"; _l.href = "/css/gaststaette.css"; - document.head.appendChild(_l); -} +import { loadBazaar } from "./buildings/bazaar.js"; const popup = document.getElementById("building-popup"); const title = document.getElementById("popup-title"); const tooltip = document.getElementById("map-tooltip"); @@ -194,6 +188,12 @@ document.querySelectorAll(".building").forEach((building) => { return; } + // Gebäude 8 → Bazaar eigenes Popup + if (url === "/building/8") { + loadBazaar(); + return; + } + await openBuildingPopup(url); }); }); diff --git a/public/js/quickmenu/bazaar.js b/public/js/quickmenu/bazaar.js deleted file mode 100644 index 3d95850..0000000 --- a/public/js/quickmenu/bazaar.js +++ /dev/null @@ -1,79 +0,0 @@ -/* ============================================================ - public/js/quickmenu/bazaar.js - Marktplatz – Tab-Layout (wie Gaststätte) -============================================================ */ - -let baz_initialized = false; - -export async function loadBazaar() { - const body = document.getElementById("qm-body-basar"); - if (!body) return; - - if (baz_initialized) return; - baz_initialized = true; - - /* CSS einmalig laden */ - if (!document.querySelector('link[href="/css/bazaar.css"]')) { - const link = document.createElement("link"); - link.rel = "stylesheet"; - link.href = "/css/bazaar.css"; - document.head.appendChild(link); - } - - body.innerHTML = ` -
- - - - - -
- -
-
Händler
-
- Demnächst verfügbar… -
-
- -
-
Auktionen
-
- Demnächst verfügbar… -
-
- -
-
Tauschbörse
-
- Demnächst verfügbar… -
-
- -
-
- `; - - /* Tab-Klick */ - body.querySelectorAll(".mp-tab").forEach((btn) => { - btn.addEventListener("click", () => { - body.querySelectorAll(".mp-tab").forEach((t) => t.classList.remove("mp-tab-active")); - body.querySelectorAll(".mp-panel").forEach((p) => p.classList.remove("active")); - btn.classList.add("mp-tab-active"); - document.getElementById(btn.dataset.tab)?.classList.add("active"); - }); - }); -}