diff --git a/public/css/quickmenu.css b/public/css/quickmenu.css
index 7892a65..b834743 100644
--- a/public/css/quickmenu.css
+++ b/public/css/quickmenu.css
@@ -6,8 +6,8 @@
#quickmenu-panel {
position: fixed;
- bottom: 20px;
- left: 50%;
+ bottom: 60px;
+ left: 430px;
z-index: 1999;
display: grid;
@@ -22,7 +22,7 @@
opacity 0.25s ease,
transform 0.25s ease;
opacity: 1;
- transform: translateX(-50%);
+ transform: translateX(0);
}
@@ -211,56 +211,66 @@
}
/* =========================
- Gaststätte Tabs
+ Gaststätte Popup
========================= */
-.qm-popup-body--tabs {
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- padding: 20px 40px;
-}
-
-.qm-tabs {
+.gaststaette-body {
display: flex;
- gap: 8px;
- margin-bottom: 20px;
- border-bottom: 2px solid #8b6a3c;
- padding-bottom: 8px;
- width: 100%;
+ flex: 1;
+ overflow: hidden;
}
-.qm-tab {
- background: linear-gradient(#3a2810, #1a0f04);
+.gaststaette-tabs {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ padding: 16px 10px;
+ background: rgba(0, 0, 0, 0.25);
+ border-right: 2px solid #8b6a3c;
+ min-width: 160px;
+}
+
+.gaststaette-tab {
+ background: linear-gradient(145deg, #3a2810, #1a0f04);
border: 2px solid #8b6a3c;
- border-radius: 6px 6px 0 0;
+ border-radius: 6px;
color: #e7d9b4;
font-family: "Cinzel", serif;
- font-size: 15px;
- padding: 8px 24px;
+ font-size: 13px;
+ font-weight: bold;
+ padding: 10px 14px;
+ text-align: left;
cursor: pointer;
transition: 0.2s;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
}
-.qm-tab:hover {
+.gaststaette-tab:hover {
border-color: #f0d060;
- background: linear-gradient(#5a3c18, #2a1a08);
+ background: linear-gradient(145deg, #5a3c18, #2a1a08);
}
-.qm-tab.active {
- background: linear-gradient(#6b4b2a, #3c2414);
+.gaststaette-tab.active {
+ background: linear-gradient(145deg, #6b4b2a, #3c2414);
border-color: #f0d060;
color: #f0d060;
+ box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
}
-.qm-tab-content {
- display: none;
- width: 100%;
- color: #5c3b20;
+.gaststaette-content {
+ flex: 1;
+ padding: 24px 40px;
+ overflow-y: auto;
font-family: "Cinzel", serif;
font-size: 16px;
+ color: #5c3b20;
}
-.qm-tab-content.active {
+.gaststaette-tab-content {
+ display: none;
+}
+
+.gaststaette-tab-content.active {
display: block;
}
diff --git a/public/js/map-ui.js b/public/js/map-ui.js
index cb10e4b..a181f46 100644
--- a/public/js/map-ui.js
+++ b/public/js/map-ui.js
@@ -8,6 +8,24 @@ const tooltip = document.getElementById("map-tooltip");
const tooltipCache = {};
+/* ================================
+ Gaststätte Popup
+================================ */
+
+const gaststaettePopup = document.getElementById("gaststaette-popup");
+const qmOverlay = document.getElementById("qm-overlay");
+
+document.querySelectorAll(".gaststaette-tab").forEach((tab) => {
+ tab.addEventListener("click", () => {
+ document.querySelectorAll(".gaststaette-tab").forEach((t) => t.classList.remove("active"));
+ document.querySelectorAll(".gaststaette-tab-content").forEach((c) => c.classList.remove("active"));
+ tab.classList.add("active");
+ document.getElementById(tab.dataset.tab).classList.add("active");
+ });
+});
+
+const tooltipCache = {};
+
// Tooltip verstecken wenn Maus über Quickmenu, Popup oder QM-Popups fährt
document
.getElementById("quickmenu-panel")
@@ -157,6 +175,17 @@ document.querySelectorAll(".building").forEach((building) => {
building.addEventListener("click", async (e) => {
e.preventDefault();
const url = building.getAttribute("href");
+
+ // Gebäude 6 → Gaststätte eigenes Popup
+ if (url === "/building/6") {
+ gaststaettePopup.style.left = "50%";
+ gaststaettePopup.style.top = "50%";
+ gaststaettePopup.style.transform = "translate(-50%, -50%) scale(1)";
+ gaststaettePopup.classList.add("active");
+ qmOverlay.classList.add("active");
+ return;
+ }
+
await openBuildingPopup(url);
});
});
diff --git a/views/launcher.ejs b/views/launcher.ejs
index d22c88d..bca2c5e 100644
--- a/views/launcher.ejs
+++ b/views/launcher.ejs
@@ -776,15 +776,6 @@
/>
Boosterjagd
-
-
-
-
Gaststätte
-