58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
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;
|
||
if (mode === "1v1") {
|
||
const margin = 50;
|
||
const width = window.screen.width - margin * 2;
|
||
const height = window.screen.height - margin * 2;
|
||
const tab = window.open(
|
||
"/arena/1v1",
|
||
"_blank",
|
||
`width=${width},height=${height},left=${margin},top=${margin}`,
|
||
);
|
||
tab?.focus();
|
||
} else {
|
||
console.log("Arena Modus gewählt:", mode);
|
||
}
|
||
});
|
||
});
|
||
}
|