srtjhur
This commit is contained in:
parent
8c6151214e
commit
b6ab6fd5ad
@ -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;
|
||||
|
||||
125
public/js/buildings/bazaar.js
Normal file
125
public/js/buildings/bazaar.js
Normal file
@ -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 = `
|
||||
<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");
|
||||
}
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@ -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 = `
|
||||
<div class="mp-wrap">
|
||||
|
||||
<!-- Linke Tab-Leiste -->
|
||||
<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>
|
||||
|
||||
<!-- Inhalts-Bereich -->
|
||||
<div class="mp-content">
|
||||
|
||||
<div class="mp-panel active" id="mp-content-1">
|
||||
<div class="mp-col-header">Händler</div>
|
||||
<div class="mp-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-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-body">
|
||||
<span class="mp-coming-soon">Demnächst verfügbar…</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
/* 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");
|
||||
});
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user