Quickmenue geändert

public/js/quickmenu.js

@@ -1,17 +1,42 @@
+import { loadGlucksbox } from "./quickmenu/glucksbox.js";
+import { loadEvents } from "./quickmenu/events.js";
+import { loadHeldenbonus } from "./quickmenu/heldenbonus.js";
+import { loadSealedliga } from "./quickmenu/sealedliga.js";
+import { loadBeschwoerer } from "./quickmenu/beschwoerer.js";
+import { loadOnlinebonus } from "./quickmenu/onlinebonus.js";
+import { loadAktionen } from "./quickmenu/aktionen.js";
+import { loadBasar } from "./quickmenu/basar.js";
+import { loadBoosteraktion } from "./quickmenu/boosteraktion.js";
+import { loadBoosterjagd } from "./quickmenu/boosterjagd.js";
+
+/* Popup-ID → Loader Funktion */
+const popupLoaders = {
+  "qm-popup-glucksbox": loadGlucksbox,
+  "qm-popup-events": loadEvents,
+  "qm-popup-heldenbonus": loadHeldenbonus,
+  "qm-popup-sealedliga": loadSealedliga,
+  "qm-popup-beschwoerer": loadBeschwoerer,
+  "qm-popup-onlinebonus": loadOnlinebonus,
+  "qm-popup-aktionen": loadAktionen,
+  "qm-popup-basar": loadBasar,
+  "qm-popup-boosteraktion": loadBoosteraktion,
+  "qm-popup-boosterjagd": loadBoosterjagd,
+};
+
 /* ================================
    Quick Menu – Toggle
 ================================ */
 
-const toggleBtn  = document.getElementById("quickmenu-toggle");
+const toggleBtn = document.getElementById("quickmenu-toggle");
-const panel      = document.getElementById("quickmenu-panel");
+const panel = document.getElementById("quickmenu-panel");
-const overlay    = document.getElementById("qm-overlay");
+const overlay = document.getElementById("qm-overlay");
 
 let menuOpen = true;
 
 toggleBtn.addEventListener("click", () => {
   menuOpen = !menuOpen;
   panel.classList.toggle("hidden", !menuOpen);
-  toggleBtn.textContent = menuOpen ? "◀" : "▶";
+  toggleBtn.textContent = menuOpen ? "\u25c4" : "\u25ba";
 });
 
 /* ================================
@@ -28,6 +53,10 @@ document.querySelectorAll(".qm-slot").forEach((slot) => {
 
     overlay.classList.add("active");
     popup.classList.add("active");
+
+    // Zugehörigen Loader aufrufen
+    const loader = popupLoaders[id];
+    if (loader) loader();
   });
 });
 
@@ -36,14 +65,10 @@ document.querySelectorAll(".qm-slot").forEach((slot) => {
 ================================ */
 
 document.querySelectorAll(".qm-popup-close").forEach((btn) => {
-  btn.addEventListener("click", () => {
+  btn.addEventListener("click", closeAllPopups);
-    closeAllPopups();
-  });
 });
 
-overlay.addEventListener("click", () => {
+overlay.addEventListener("click", closeAllPopups);
-  closeAllPopups();
-});
 
 function closeAllPopups() {
   document.querySelectorAll(".qm-popup").forEach((p) => {
@@ -52,7 +77,6 @@ function closeAllPopups() {
   overlay.classList.remove("active");
 }
 
-/* Escape-Taste schließt Popup */
 document.addEventListener("keydown", (e) => {
   if (e.key === "Escape") closeAllPopups();
 });

public/js/quickmenu/aktionen.js

@@ -0,0 +1,8 @@
+export async function loadAktionen() {
+  const body = document.getElementById("qm-body-aktionen");
+  if (!body) return;
+
+  body.innerHTML = `
+    <p>Inhalt folgt...</p>
+  `;
+}

public/js/quickmenu/basar.js

@@ -0,0 +1,8 @@
+export async function loadBasar() {
+  const body = document.getElementById("qm-body-basar");
+  if (!body) return;
+
+  body.innerHTML = `
+    <p>Inhalt folgt...</p>
+  `;
+}

public/js/quickmenu/beschwoerer.js

@@ -0,0 +1,8 @@
+export async function loadBeschwoerer() {
+  const body = document.getElementById("qm-body-beschwoerer");
+  if (!body) return;
+
+  body.innerHTML = `
+    <p>Inhalt folgt...</p>
+  `;
+}

public/js/quickmenu/boosteraktion.js

@@ -0,0 +1,8 @@
+export async function loadBoosteraktion() {
+  const body = document.getElementById("qm-body-boosteraktion");
+  if (!body) return;
+
+  body.innerHTML = `
+    <p>Inhalt folgt...</p>
+  `;
+}

public/js/quickmenu/boosterjagd.js

@@ -0,0 +1,8 @@
+export async function loadBoosterjagd() {
+  const body = document.getElementById("qm-body-boosterjagd");
+  if (!body) return;
+
+  body.innerHTML = `
+    <p>Inhalt folgt...</p>
+  `;
+}

public/js/quickmenu/events.js

@@ -0,0 +1,8 @@
+export async function loadEvents() {
+  const body = document.getElementById("qm-body-events");
+  if (!body) return;
+
+  body.innerHTML = `
+    <p>Inhalt folgt...</p>
+  `;
+}

public/js/quickmenu/glucksbox.js

@@ -0,0 +1,8 @@
+export async function loadGlucksbox() {
+  const body = document.getElementById("qm-body-glucksbox");
+  if (!body) return;
+
+  body.innerHTML = `
+    <p>Inhalt folgt...</p>
+  `;
+}

public/js/quickmenu/heldenbonus.js

@@ -0,0 +1,8 @@
+export async function loadHeldenbonus() {
+  const body = document.getElementById("qm-body-heldenbonus");
+  if (!body) return;
+
+  body.innerHTML = `
+    <p>Inhalt folgt...</p>
+  `;
+}

public/js/quickmenu/onlinebonus.js

@@ -0,0 +1,8 @@
+export async function loadOnlinebonus() {
+  const body = document.getElementById("qm-body-onlinebonus");
+  if (!body) return;
+
+  body.innerHTML = `
+    <p>Inhalt folgt...</p>
+  `;
+}

public/js/quickmenu/sealedliga.js

@@ -0,0 +1,8 @@
+export async function loadSealedliga() {
+  const body = document.getElementById("qm-body-sealedliga");
+  if (!body) return;
+
+  body.innerHTML = `
+    <p>Inhalt folgt...</p>
+  `;
+}

views/launcher.ejs

@@ -324,7 +324,7 @@
         <span class="qm-popup-title">Glücksbox</span>
         <span class="qm-popup-close">✕</span>
       </div>
-      <div class="qm-popup-body">Inhalt folgt...</div>
+      <div class="qm-popup-body" id="qm-body-glucksbox"></div>
     </div>
 
     <div id="qm-popup-events" class="qm-popup">
@@ -332,7 +332,7 @@
         <span class="qm-popup-title">Tägliche Events</span>
         <span class="qm-popup-close">✕</span>
       </div>
-      <div class="qm-popup-body">Inhalt folgt...</div>
+      <div class="qm-popup-body" id="qm-body-events"></div>
     </div>
 
     <div id="qm-popup-heldenbonus" class="qm-popup">
@@ -340,7 +340,7 @@
         <span class="qm-popup-title">Helden Bonus</span>
         <span class="qm-popup-close">✕</span>
       </div>
-      <div class="qm-popup-body">Inhalt folgt...</div>
+      <div class="qm-popup-body" id="qm-body-heldenbonus"></div>
     </div>
 
     <div id="qm-popup-sealedliga" class="qm-popup">
@@ -348,7 +348,7 @@
         <span class="qm-popup-title">Sealed Liga</span>
         <span class="qm-popup-close">✕</span>
       </div>
-      <div class="qm-popup-body">Inhalt folgt...</div>
+      <div class="qm-popup-body" id="qm-body-sealedliga"></div>
     </div>
 
     <div id="qm-popup-beschwoerer" class="qm-popup">
@@ -356,7 +356,7 @@
         <span class="qm-popup-title">Beschwörer der Seelen</span>
         <span class="qm-popup-close">✕</span>
       </div>
-      <div class="qm-popup-body">Inhalt folgt...</div>
+      <div class="qm-popup-body" id="qm-body-beschwoerer"></div>
     </div>
 
     <div id="qm-popup-onlinebonus" class="qm-popup">
@@ -364,7 +364,7 @@
         <span class="qm-popup-title">Online Bonus</span>
         <span class="qm-popup-close">✕</span>
       </div>
-      <div class="qm-popup-body">Inhalt folgt...</div>
+      <div class="qm-popup-body" id="qm-body-onlinebonus"></div>
     </div>
 
     <div id="qm-popup-aktionen" class="qm-popup">
@@ -372,7 +372,7 @@
         <span class="qm-popup-title">Aktionen</span>
         <span class="qm-popup-close">✕</span>
       </div>
-      <div class="qm-popup-body">Inhalt folgt...</div>
+      <div class="qm-popup-body" id="qm-body-aktionen"></div>
     </div>
 
     <div id="qm-popup-basar" class="qm-popup">
@@ -380,7 +380,7 @@
         <span class="qm-popup-title">Basar</span>
         <span class="qm-popup-close">✕</span>
       </div>
-      <div class="qm-popup-body">Inhalt folgt...</div>
+      <div class="qm-popup-body" id="qm-body-basar"></div>
     </div>
 
     <div id="qm-popup-boosteraktion" class="qm-popup">
@@ -388,7 +388,7 @@
         <span class="qm-popup-title">10 Booster Aktion</span>
         <span class="qm-popup-close">✕</span>
       </div>
-      <div class="qm-popup-body">Inhalt folgt...</div>
+      <div class="qm-popup-body" id="qm-body-boosteraktion"></div>
     </div>
 
     <div id="qm-popup-boosterjagd" class="qm-popup">
@@ -396,7 +396,7 @@
         <span class="qm-popup-title">Boosterjagd</span>
         <span class="qm-popup-close">✕</span>
       </div>
-      <div class="qm-popup-body">Inhalt folgt...</div>
+      <div class="qm-popup-body" id="qm-body-boosterjagd"></div>
     </div>
 
     <div id="game-notification-overlay"></div>
@@ -418,6 +418,6 @@
       window.playerName = "<%= character.name %>";
     </script>
     <script src="/js/chat.js"></script>
-    <script src="/js/quickmenu.js"></script>
+    <script type="module" src="/js/quickmenu.js"></script>
   </body>
 </html>