126 lines
4.3 KiB
JavaScript
126 lines
4.3 KiB
JavaScript
/* ============================================================
|
||
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 = `
|
||
<div class="qm-popup-header">
|
||
<span class="qm-popup-title">Bazaar</span>
|
||
<span class="qm-popup-close" id="bazaar-close">✕</span>
|
||
</div>
|
||
<div class="mp-body-wrap">
|
||
<aside class="mp-tabs" id="mp-tabs">
|
||
<button class="mp-tab mp-tab-active" data-tab="mp-content-1">
|
||
<span class="mp-tab-dot"></span><span>Händler</span>
|
||
</button>
|
||
<button class="mp-tab" data-tab="mp-content-2">
|
||
<span class="mp-tab-dot"></span><span>Auktionen</span>
|
||
</button>
|
||
<button class="mp-tab" data-tab="mp-content-3">
|
||
<span class="mp-tab-dot"></span><span>Tauschbörse</span>
|
||
</button>
|
||
</aside>
|
||
<div class="mp-content">
|
||
<div class="mp-panel active" id="mp-content-1">
|
||
<div class="mp-col-header">Händler</div>
|
||
<div class="mp-panel-body">
|
||
<span class="mp-coming-soon">Demnächst verfügbar…</span>
|
||
</div>
|
||
</div>
|
||
<div class="mp-panel" id="mp-content-2">
|
||
<div class="mp-col-header">Auktionen</div>
|
||
<div class="mp-panel-body">
|
||
<span class="mp-coming-soon">Demnächst verfügbar…</span>
|
||
</div>
|
||
</div>
|
||
<div class="mp-panel" id="mp-content-3">
|
||
<div class="mp-col-header">Tauschbörse</div>
|
||
<div class="mp-panel-body">
|
||
<span class="mp-coming-soon">Demnächst verfügbar…</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
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");
|
||
}
|