arena popup erstellt
This commit is contained in:
parent
8211e56cb4
commit
1c46c71a7c
124
public/css/arena.css
Normal file
124
public/css/arena.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
46
public/js/buildings/arena.js
Normal file
46
public/js/buildings/arena.js
Normal file
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -14,6 +14,7 @@
|
|||||||
<link rel="stylesheet" href="/css/quickmenu.css" />
|
<link rel="stylesheet" href="/css/quickmenu.css" />
|
||||||
<link rel="stylesheet" href="/css/hud.css" />
|
<link rel="stylesheet" href="/css/hud.css" />
|
||||||
<link rel="stylesheet" href="/css/mine.css" />
|
<link rel="stylesheet" href="/css/mine.css" />
|
||||||
|
<link rel="stylesheet" href="/css/arena.css" />
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user