arena popup erstellt

public/css/arena.css

@@ -0,0 +1,124 @@
+/* ================================
+   ARENA UI
+================================ */
+
+#arena-ui {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px 20px;
+  min-height: 100%;
+}
+
+.arena-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #f0c040;
+  text-shadow:
+    0 0 8px rgba(200, 140, 0, 0.8),
+    2px 2px 4px rgba(0, 0, 0, 0.9);
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
+}
+
+.arena-subtitle {
+  color: #bba060;
+  font-size: 13px;
+  margin: 0 0 36px 0;
+  font-style: italic;
+  letter-spacing: 1px;
+}
+
+/* ================================
+   MODE CARDS
+================================ */
+
+.arena-modes {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.arena-mode-card {
+  width: 160px;
+  background: linear-gradient(
+    160deg,
+    rgba(40, 25, 8, 0.95) 0%,
+    rgba(20, 12, 4, 0.98) 100%
+  );
+  border: 2px solid #7a5a1e;
+  border-radius: 6px;
+  padding: 28px 16px 22px;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+
+  box-shadow:
+    inset 0 1px 0 rgba(200, 160, 40, 0.15),
+    0 4px 16px rgba(0, 0, 0, 0.6);
+
+  transition:
+    transform 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* Ornamental top line */
+.arena-mode-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 10%;
+  right: 10%;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    #c8960c,
+    transparent
+  );
+}
+
+.arena-mode-card:hover {
+  transform: translateY(-4px);
+  border-color: #c8960c;
+  box-shadow:
+    inset 0 1px 0 rgba(200, 160, 40, 0.25),
+    0 8px 24px rgba(0, 0, 0, 0.7),
+    0 0 12px rgba(200, 140, 0, 0.25);
+}
+
+.arena-mode-card:active {
+  transform: translateY(-1px);
+}
+
+/* Icon */
+.arena-mode-icon {
+  font-size: 36px;
+  margin-bottom: 12px;
+  line-height: 1;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
+}
+
+/* Label */
+.arena-mode-label {
+  font-size: 22px;
+  font-weight: bold;
+  color: #f0c040;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
+  letter-spacing: 2px;
+  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
+  margin-bottom: 10px;
+}
+
+/* Description */
+.arena-mode-desc {
+  font-size: 11px;
+  color: #a08050;
+  line-height: 1.5;
+  font-style: italic;
+}

public/js/buildings/arena.js

@@ -0,0 +1,46 @@
+export async function loadArena() {
+  const ui = document.querySelector(".building-ui");
+
+  ui.innerHTML = `
+<div id="arena-ui">
+
+  <div class="arena-title">⚔️ Kampfarena</div>
+  <p class="arena-subtitle">Wähle deinen Kampfmodus</p>
+
+  <div class="arena-modes">
+
+    <div class="arena-mode-card" data-mode="1v1">
+      <div class="arena-mode-icon">🗡️</div>
+      <div class="arena-mode-label">1v1</div>
+      <div class="arena-mode-desc">Einzelkampf – Beweis deine Stärke im Duell</div>
+    </div>
+
+    <div class="arena-mode-card" data-mode="2v2">
+      <div class="arena-mode-icon">⚔️</div>
+      <div class="arena-mode-label">2v2</div>
+      <div class="arena-mode-desc">Verbünde dich mit einem Kameraden im Kampf</div>
+    </div>
+
+    <div class="arena-mode-card" data-mode="4v4">
+      <div class="arena-mode-icon">🛡️</div>
+      <div class="arena-mode-label">4v4</div>
+      <div class="arena-mode-desc">Schlachtruf – Führe deine Truppe zum Sieg</div>
+    </div>
+
+  </div>
+
+</div>
+`;
+
+  initArenaModes();
+}
+
+function initArenaModes() {
+  document.querySelectorAll(".arena-mode-card").forEach((card) => {
+    card.addEventListener("click", () => {
+      const mode = card.dataset.mode;
+      // TODO: Ziel noch nicht definiert
+      console.log("Arena Modus gewählt:", mode);
+    });
+  });
+}

views/launcher.ejs

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="/css/quickmenu.css" />
     <link rel="stylesheet" href="/css/hud.css" />
     <link rel="stylesheet" href="/css/mine.css" />
+    <link rel="stylesheet" href="/css/arena.css" />
     <style>
       body {
         margin: 0;