Alert Fenster umgebaut

public/css/building.css

@@ -527,6 +527,110 @@ body {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
 }
 
+/* =========================
+   Game Notification
+========================= */
+
+#game-notification {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.85);
+
+  z-index: 9999;
+
+  width: 360px;
+  max-width: 90vw;
+
+  background: url("/images/parchment.png") center / cover no-repeat;
+
+  border: 3px solid #6b4b2a;
+  border-radius: 10px;
+
+  box-shadow:
+    0 0 40px rgba(0, 0, 0, 0.9),
+    inset 0 0 20px rgba(0, 0, 0, 0.4);
+
+  display: none;
+  opacity: 0;
+
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+#game-notification.show {
+  display: block;
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.notification-header {
+  padding: 12px 16px;
+
+  background: linear-gradient(#6b4b2a, #3c2414);
+  border-bottom: 2px solid #8b6a3c;
+  border-radius: 7px 7px 0 0;
+
+  font-family: "Tangerine", serif;
+  font-size: 28px;
+  color: #f0d9a6;
+  text-shadow: 0 2px 4px black;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.notification-body {
+  padding: 20px 20px 10px 20px;
+
+  font-family: "Cinzel", serif;
+  font-size: 15px;
+  color: #2b1b0f;
+  line-height: 1.6;
+  text-align: center;
+}
+
+.notification-footer {
+  padding: 10px 20px 16px 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.notification-btn {
+  padding: 8px 28px !important;
+  font-size: 14px !important;
+  font-family: "Cinzel", serif !important;
+  font-weight: bold !important;
+  background: linear-gradient(#7a5a2a, #caa24b) !important;
+  border: 1px solid #e0c67b !important;
+  border-radius: 4px;
+  color: #1a1206 !important;
+  cursor: pointer;
+  transition: 0.2s;
+  margin-top: 0 !important;
+}
+
+.notification-btn:hover {
+  transform: scale(1.05);
+  box-shadow:
+    0 0 10px #ffd66b,
+    0 0 20px #caa24b;
+}
+
+#game-notification-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9998;
+  display: none;
+}
+
+#game-notification-overlay.show {
+  display: block;
+}
+
 /* =========================
    Animation
 ========================= */

public/js/buildings/schwarzmarkt.js

@@ -1,3 +1,35 @@
+/* ================================
+   Eigene Benachrichtigung
+================================ */
+
+function showNotification(message, title = "Hinweis", icon = "⚔️") {
+  const overlay = document.getElementById("game-notification-overlay");
+  const notification = document.getElementById("game-notification");
+  const msgEl = document.getElementById("notification-message");
+  const titleEl = document.getElementById("notification-title");
+  const iconEl = document.getElementById("notification-icon");
+  const okBtn = document.getElementById("notification-ok");
+
+  msgEl.innerText = message;
+  titleEl.innerText = title;
+  iconEl.innerText = icon;
+
+  overlay.classList.add("show");
+  notification.style.display = "block";
+
+  requestAnimationFrame(() => {
+    notification.classList.add("show");
+  });
+
+  okBtn.onclick = () => {
+    notification.classList.remove("show");
+    overlay.classList.remove("show");
+    setTimeout(() => {
+      notification.style.display = "none";
+    }, 200);
+  };
+}
+
 export async function loadSchwarzmarkt() {
   const ui = document.querySelector(".building-ui");
 
@@ -115,14 +147,18 @@ document.addEventListener("click", async (e) => {
     const data = await res.json();
 
     if (data.error) {
-      alert(data.error);
+      showNotification(data.error, "Nicht genug Gold", "🪙");
       return;
     }
 
     loadPages();
   } catch (err) {
     console.error("Kauf Fehler:", err);
-    alert("Fehler beim Kauf. Bitte erneut versuchen.");
+    showNotification(
+      "Fehler beim Kauf. Bitte erneut versuchen.",
+      "Fehler",
+      "⚠️",
+    );
   }
 });
 

views/launcher.ejs

@@ -203,6 +203,20 @@
       </div>
     </div>
     <div id="map-tooltip"></div>
+
+    <div id="game-notification-overlay"></div>
+    <div id="game-notification">
+      <div class="notification-header">
+        <span id="notification-icon">⚔️</span>
+        <span id="notification-title">Hinweis</span>
+      </div>
+      <div class="notification-body">
+        <p id="notification-message"></p>
+      </div>
+      <div class="notification-footer">
+        <button class="notification-btn" id="notification-ok">OK</button>
+      </div>
+    </div>
     <script type="module" src="/js/map-ui.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script>