srtjhur
This commit is contained in:
parent
8c6151214e
commit
b6ab6fd5ad
@ -3,7 +3,8 @@
|
|||||||
============================================================ */
|
============================================================ */
|
||||||
|
|
||||||
/* ── Haupt-Layout ────────────────────────── */
|
/* ── Haupt-Layout ────────────────────────── */
|
||||||
.mp-wrap {
|
.mp-wrap,
|
||||||
|
.mp-body-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@ -101,7 +102,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ── Panel-Body ──────────────────────────── */
|
/* ── Panel-Body ──────────────────────────── */
|
||||||
.mp-body {
|
.mp-body,
|
||||||
|
.mp-panel-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
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 { loadBlackmarket } from "./buildings/blackmarket.js?v=2";
|
||||||
import { loadMine } from "./buildings/mine.js?v=2";
|
import { loadMine } from "./buildings/mine.js?v=2";
|
||||||
import { loadGlucksspiel } from "./gaststaette/glucksspiel.js";
|
import { loadGlucksspiel } from "./gaststaette/glucksspiel.js";
|
||||||
|
import { loadBazaar } from "./buildings/bazaar.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);
|
|
||||||
}
|
|
||||||
const popup = document.getElementById("building-popup");
|
const popup = document.getElementById("building-popup");
|
||||||
const title = document.getElementById("popup-title");
|
const title = document.getElementById("popup-title");
|
||||||
const tooltip = document.getElementById("map-tooltip");
|
const tooltip = document.getElementById("map-tooltip");
|
||||||
@ -194,6 +188,12 @@ document.querySelectorAll(".building").forEach((building) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Gebäude 8 → Bazaar eigenes Popup
|
||||||
|
if (url === "/building/8") {
|
||||||
|
loadBazaar();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
await openBuildingPopup(url);
|
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