cay/dok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fsjgsr

Browse Source
This commit is contained in:
cay 2026-04-10 11:43:11 +01:00
parent a70085f9a5
commit de0239c72d
3 changed files with 89 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
public/css/quickmenu.css
View File

@ -6,8 +6,8 @@
#quickmenu-panel { #quickmenu-panel {
position: fixed; position: fixed;
bottom: 20px; bottom: 60px;
left: 50%; left: 430px;
z-index: 1999; z-index: 1999;
display: grid; display: grid;
@ -22,7 +22,7 @@
opacity 0.25s ease, opacity 0.25s ease,
transform 0.25s ease; transform 0.25s ease;
opacity: 1; opacity: 1;
transform: translateX(-50%); transform: translateX(0);
} }
@ -211,56 +211,66 @@
} }
/* ========================= /* =========================
Gaststätte Tabs Gaststätte Popup
========================= */ ========================= */
.qm-popup-body--tabs { .gaststaette-body {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 20px 40px;
}
.qm-tabs {
display: flex; display: flex;
gap: 8px; flex: 1;
margin-bottom: 20px; overflow: hidden;
border-bottom: 2px solid #8b6a3c;
padding-bottom: 8px;
width: 100%;
} }
.qm-tab { .gaststaette-tabs {
background: linear-gradient(#3a2810, #1a0f04); 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: 2px solid #8b6a3c;
border-radius: 6px 6px 0 0; border-radius: 6px;
color: #e7d9b4; color: #e7d9b4;
font-family: "Cinzel", serif; font-family: "Cinzel", serif;
font-size: 15px; font-size: 13px;
padding: 8px 24px; font-weight: bold;
padding: 10px 14px;
text-align: left;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
} }
.qm-tab:hover { .gaststaette-tab:hover {
border-color: #f0d060; border-color: #f0d060;
background: linear-gradient(#5a3c18, #2a1a08); background: linear-gradient(145deg, #5a3c18, #2a1a08);
} }
.qm-tab.active { .gaststaette-tab.active {
background: linear-gradient(#6b4b2a, #3c2414); background: linear-gradient(145deg, #6b4b2a, #3c2414);
border-color: #f0d060; border-color: #f0d060;
color: #f0d060; color: #f0d060;
box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
} }
.qm-tab-content { .gaststaette-content {
display: none; flex: 1;
width: 100%; padding: 24px 40px;
color: #5c3b20; overflow-y: auto;
font-family: "Cinzel", serif; font-family: "Cinzel", serif;
font-size: 16px; font-size: 16px;
color: #5c3b20;
} }
.qm-tab-content.active { .gaststaette-tab-content {
display: none;
}
.gaststaette-tab-content.active {
display: block; display: block;
} }

29
public/js/map-ui.js
View File

@ -8,6 +8,24 @@ const tooltip = document.getElementById("map-tooltip");
const tooltipCache = {}; 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 // Tooltip verstecken wenn Maus über Quickmenu, Popup oder QM-Popups fährt
document document
.getElementById("quickmenu-panel") .getElementById("quickmenu-panel")
@ -157,6 +175,17 @@ document.querySelectorAll(".building").forEach((building) => {
building.addEventListener("click", async (e) => { building.addEventListener("click", async (e) => {
e.preventDefault(); e.preventDefault();
const url = building.getAttribute("href"); 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); await openBuildingPopup(url);
}); });
}); });

39
views/launcher.ejs
View File

@ -776,15 +776,6 @@
/> />
<span class="qm-slot-label">Boosterjagd</span> <span class="qm-slot-label">Boosterjagd</span>
</div> </div>
<div class="qm-slot" data-popup="qm-popup-gaststaette">
<img
src="/images/quickmenu/gaststaette.png"
alt=""
onerror="this.style.display = 'none'"
/>
<span class="qm-slot-label">Gaststätte</span>
</div>
</div> </div>
<!-- ================================ <!-- ================================
@ -797,27 +788,31 @@
================================ --> ================================ -->
<!-- ================================ <!-- ================================
Gaststätte Popup (Building 6) Gaststätte Popup (Gebäude 6)
================================ --> ================================ -->
<div id="qm-popup-gaststaette" class="qm-popup"> <div id="gaststaette-popup" class="qm-popup">
<div class="qm-popup-header"> <div class="qm-popup-header">
<span class="qm-popup-title">Gaststätte</span> <span class="qm-popup-title">Gaststätte</span>
<span class="qm-popup-close">✕</span> <span class="qm-popup-close">✕</span>
</div> </div>
<div class="qm-popup-body qm-popup-body--tabs" id="qm-body-gaststaette"> <div class="gaststaette-body">
<div class="qm-tabs"> <!-- Linke Tab-Sidebar -->
<button class="qm-tab active" data-tab="gaststaette-tab1">Tab 1</button> <div class="gaststaette-tabs">
<button class="qm-tab" data-tab="gaststaette-tab2">Tab 2</button> <button class="gaststaette-tab active" data-tab="gs-tab1">Dummy 1</button>
<button class="qm-tab" data-tab="gaststaette-tab3">Tab 3</button> <button class="gaststaette-tab" data-tab="gs-tab2">Dummy 2</button>
<button class="gaststaette-tab" data-tab="gs-tab3">Dummy 3</button>
</div> </div>
<div class="qm-tab-content active" id="gaststaette-tab1"> <!-- Hauptinhalt -->
<p>Inhalt Tab 1 (Dummy)</p> <div class="gaststaette-content">
<div class="gaststaette-tab-content active" id="gs-tab1">
<p>Inhalt Dummy 1</p>
</div> </div>
<div class="qm-tab-content" id="gaststaette-tab2"> <div class="gaststaette-tab-content" id="gs-tab2">
<p>Inhalt Tab 2 (Dummy)</p> <p>Inhalt Dummy 2</p>
</div>
<div class="gaststaette-tab-content" id="gs-tab3">
<p>Inhalt Dummy 3</p>
</div> </div>
<div class="qm-tab-content" id="gaststaette-tab3">
<p>Inhalt Tab 3 (Dummy)</p>
</div> </div>
</div> </div>
</div> </div>