dghkm
This commit is contained in:
parent
c149ec785c
commit
c0f7f965c4
@ -5,7 +5,7 @@
|
||||
Stat-Icons SVG
|
||||
================================ */
|
||||
const BS_SVG_RANGE = `<svg viewBox="0 0 16 16" width="10" height="10" style="display:inline;vertical-align:middle;flex-shrink:0" fill="none" stroke="#e8b84b" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2 Q1 8 4 14"/><line x1="4" y1="2" x2="4" y2="14" stroke-width="0.7" stroke-dasharray="2,1.5"/><line x1="4" y1="8" x2="13" y2="8"/><polyline points="11,6 13,8 11,10"/><line x1="5" y1="7" x2="4" y2="8"/><line x1="5" y1="9" x2="4" y2="8"/></svg>`;
|
||||
const BS_SVG_RACE = `<svg viewBox="0 0 16 16" width="10" height="10" style="display:inline;vertical-align:middle;flex-shrink:0" fill="none" stroke="#7de87d" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="2.5" r="1.4" fill="#7de87d" stroke="none"/><line x1="9" y1="4" x2="8" y2="9"/><line x1="8" y1="9" x2="10" y2="14"/><line x1="8" y1="9" x2="6" y2="13"/><line x1="8.5" y1="5.5" x2="11" y2="8"/><line x1="8.5" y1="5.5" x2="6" y2="7"/></svg>`;
|
||||
const BS_SVG_RACE = `<svg viewBox="0 0 16 16" width="10" height="10" style="display:inline;vertical-align:middle;flex-shrink:0" fill="none" stroke="#7de87d" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="2.5" r="1.4" fill="#7de87d" stroke="none"/><line x1="9" y1="4" x2="8" y2="9"/><line x1="8" y1="9" x2="10" y2="14"/><line x1="8" y1="9" x2="6" y2="13"/><line x1="8.5" y1="5.5" x2="11" y2="8"/><line x1="8.5" y1="5.5" x2="6" y2="7"/></svg>`;
|
||||
|
||||
const RARITY_CRYSTALS = {
|
||||
1: "roter-cristal.png",
|
||||
@ -41,11 +41,15 @@ function cardHTML(card, isFront = true) {
|
||||
${card?.defends != null ? `<span class="bs-stat-def">${card.defends}</span>` : ""}
|
||||
${card?.cooldown != null ? `<span class="bs-stat-cd">${card.cooldown}</span>` : ""}
|
||||
${card?.rarity ? `<div class="bs-rarity">${rarityImgs(card.rarity, 11)}</div>` : ""}
|
||||
${(card?.range != null || card?.race != null) ? `
|
||||
${
|
||||
card?.range != null || card?.race != null
|
||||
? `
|
||||
<div class="bs-range-race">
|
||||
${card?.range != null ? `<span class="bs-badge-range">${BS_SVG_RANGE} ${card.range}</span>` : ""}
|
||||
${card?.race != null ? `<span class="bs-badge-race">${BS_SVG_RACE} ${card.race}</span>` : ""}
|
||||
</div>` : ""}
|
||||
${card?.race != null ? `<span class="bs-badge-race">${BS_SVG_RACE} ${card.race}</span>` : ""}
|
||||
</div>`
|
||||
: ""
|
||||
}
|
||||
<div class="bs-card-name">${card?.name || ""}</div>
|
||||
`;
|
||||
}
|
||||
@ -185,7 +189,7 @@ export async function loadEvents() {
|
||||
<div class="booster-stage">
|
||||
<div class="booster-left">
|
||||
<div class="wood-btn-wrap">
|
||||
<img id="gold-btn" src="/images/items/gold.png" alt="Gold Spenden" draggable="false" class="booster-stapel-img">
|
||||
<img id="gold-btn" src="/images/items/goldmuenze.png" alt="Gold Spenden" draggable="false" class="booster-stapel-img">
|
||||
<div class="gold-stamp" id="gold-stamp">Bitte Spenden</div>
|
||||
</div>
|
||||
<span class="booster-stapel-hint" id="gold-hint">100 Gold spenden</span>
|
||||
@ -385,7 +389,7 @@ export async function loadEvents() {
|
||||
});
|
||||
|
||||
body.querySelector("#arena-back-btn").addEventListener("click", () => {
|
||||
if (isArenaSearching) return; // Während Suche gesperrt
|
||||
if (isArenaSearching) return; // Während Suche gesperrt
|
||||
eventsGrid.style.display = "";
|
||||
arenaUi.style.display = "none";
|
||||
cancelArenaSearch();
|
||||
@ -403,12 +407,16 @@ export async function loadEvents() {
|
||||
if (card) {
|
||||
card.classList.remove("searching");
|
||||
card.querySelector(".arena-mode-label-daily").textContent = "1v1";
|
||||
card.querySelector(".arena-mode-desc-daily").textContent = "Einzelkampf – Beweis deine Stärke im Duell";
|
||||
card.querySelector(".arena-mode-desc-daily").textContent =
|
||||
"Einzelkampf – Beweis deine Stärke im Duell";
|
||||
}
|
||||
if (status) status.style.display = "none";
|
||||
|
||||
const backBtn = body.querySelector("#arena-back-btn");
|
||||
if (backBtn) { backBtn.style.opacity = "1"; backBtn.style.cursor = "pointer"; }
|
||||
if (backBtn) {
|
||||
backBtn.style.opacity = "1";
|
||||
backBtn.style.cursor = "pointer";
|
||||
}
|
||||
}
|
||||
|
||||
function cancelArenaSearch() {
|
||||
@ -445,16 +453,19 @@ export async function loadEvents() {
|
||||
const card1v1 = body.querySelector("#arena-1v1-card");
|
||||
card1v1.classList.add("searching");
|
||||
card1v1.querySelector(".arena-mode-label-daily").textContent = "⏳ Suche…";
|
||||
card1v1.querySelector(".arena-mode-desc-daily").textContent = "Warte auf passenden Gegner…";
|
||||
card1v1.querySelector(".arena-mode-desc-daily").textContent =
|
||||
"Warte auf passenden Gegner…";
|
||||
|
||||
// Zurück-Button sperren während Suche
|
||||
const backBtn = body.querySelector("#arena-back-btn");
|
||||
backBtn.style.opacity = "0.35";
|
||||
backBtn.style.cursor = "not-allowed";
|
||||
backBtn.style.cursor = "not-allowed";
|
||||
|
||||
showArenaStatus(`⏳ Suche Gegner (Level ${Math.max(1, me.level - 5)}–${me.level + 5})…
|
||||
<br><span class="arena-cancel-link" id="arena-cancel-link">Suche abbrechen</span>`);
|
||||
body.querySelector("#arena-cancel-link")?.addEventListener("click", () => cancelArenaSearch());
|
||||
body
|
||||
.querySelector("#arena-cancel-link")
|
||||
?.addEventListener("click", () => cancelArenaSearch());
|
||||
|
||||
socket.off("match_found");
|
||||
socket.off("queue_status");
|
||||
@ -464,9 +475,11 @@ export async function loadEvents() {
|
||||
const pool = data.poolSize ? ` · ${data.poolSize} im Pool` : "";
|
||||
showArenaStatus(`⏳ Suche Gegner (Level ${Math.max(1, me.level - 5)}–${me.level + 5})${pool}
|
||||
<br><span class="arena-cancel-link" id="arena-cancel-link">Suche abbrechen</span>`);
|
||||
body.querySelector("#arena-cancel-link")?.addEventListener("click", () => {
|
||||
cancelArenaSearch();
|
||||
});
|
||||
body
|
||||
.querySelector("#arena-cancel-link")
|
||||
?.addEventListener("click", () => {
|
||||
cancelArenaSearch();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -496,16 +509,20 @@ export async function loadEvents() {
|
||||
const box = body.querySelector("#arena-daily-status");
|
||||
if (!box) return;
|
||||
box.style.display = "block";
|
||||
box.style.color = isError ? "#e74c3c" : "#dceb15";
|
||||
box.innerHTML = html;
|
||||
if (isError) setTimeout(() => { box.style.display = "none"; }, 3000);
|
||||
box.style.color = isError ? "#e74c3c" : "#dceb15";
|
||||
box.innerHTML = html;
|
||||
if (isError)
|
||||
setTimeout(() => {
|
||||
box.style.display = "none";
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function showArenaMatchFound(myName, opponentName, onDone) {
|
||||
if (document.getElementById("match-found-overlay")) return;
|
||||
const overlay = document.createElement("div");
|
||||
overlay.id = "match-found-overlay";
|
||||
overlay.style.cssText = "position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center;";
|
||||
overlay.style.cssText =
|
||||
"position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center;";
|
||||
overlay.innerHTML = `
|
||||
<div style="font-family:'Cinzel',serif;font-size:36px;color:#ffd750;letter-spacing:6px;margin-bottom:12px;">⚔️ Match gefunden!</div>
|
||||
<div style="font-family:'Cinzel',serif;font-size:18px;color:rgba(255,255,255,0.75);letter-spacing:3px;">${myName} vs ${opponentName}</div>
|
||||
@ -513,8 +530,14 @@ export async function loadEvents() {
|
||||
<div id="mfBar" style="height:100%;background:#ffd750;width:0%;border-radius:2px;transition:width 1.5s ease;"></div>
|
||||
</div>`;
|
||||
document.body.appendChild(overlay);
|
||||
requestAnimationFrame(() => { const b = document.getElementById("mfBar"); if (b) b.style.width = "100%"; });
|
||||
setTimeout(() => { overlay.remove(); onDone(); }, 1600);
|
||||
requestAnimationFrame(() => {
|
||||
const b = document.getElementById("mfBar");
|
||||
if (b) b.style.width = "100%";
|
||||
});
|
||||
setTimeout(() => {
|
||||
overlay.remove();
|
||||
onDone();
|
||||
}, 1600);
|
||||
}
|
||||
|
||||
function openArenaMatchPopup(src, opponentName, matchId, mode = "1v1") {
|
||||
@ -522,10 +545,12 @@ export async function loadEvents() {
|
||||
document.getElementById("arena-popup")?.remove();
|
||||
const backdrop = document.createElement("div");
|
||||
backdrop.id = "arena-backdrop";
|
||||
backdrop.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(5px);z-index:9998;";
|
||||
backdrop.style.cssText =
|
||||
"position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(5px);z-index:9998;";
|
||||
const popup = document.createElement("div");
|
||||
popup.id = "arena-popup";
|
||||
popup.style.cssText = "position:fixed;inset:50px;z-index:9999;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,215,80,0.35),0 30px 90px rgba(0,0,0,0.85);";
|
||||
popup.style.cssText =
|
||||
"position:fixed;inset:50px;z-index:9999;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,215,80,0.35),0 30px 90px rgba(0,0,0,0.85);";
|
||||
popup.innerHTML = `
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;background:rgba(10,8,5,0.95);border-bottom:1px solid rgba(255,215,80,0.3);padding:0 16px;height:42px;flex-shrink:0;">
|
||||
<span style="font-family:'Cinzel',serif;font-size:13px;letter-spacing:4px;color:rgba(255,215,80,0.85);">⚔️ ${mode} · vs ${opponentName}</span>
|
||||
@ -545,12 +570,15 @@ export async function loadEvents() {
|
||||
|
||||
/* ── Arena2 Daily Zustand (2v2 Lobby) ── */
|
||||
let isArena2InMatch = false;
|
||||
let daily2v2TeamId = null;
|
||||
let daily2v2Me = null;
|
||||
let daily2v2TeamId = null;
|
||||
let daily2v2Me = null;
|
||||
|
||||
async function open2v2DailyLobby() {
|
||||
const socket = window._socket;
|
||||
if (!socket) { showDaily2v2Error("❌ Keine Verbindung zum Server."); return; }
|
||||
if (!socket) {
|
||||
showDaily2v2Error("❌ Keine Verbindung zum Server.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!daily2v2Me) {
|
||||
try {
|
||||
@ -576,7 +604,7 @@ export async function loadEvents() {
|
||||
|
||||
socket.on("2v2_team_joined", (data) => {
|
||||
daily2v2TeamId = data.teamId;
|
||||
body.querySelector("#daily-team-panel").style.display = "block";
|
||||
body.querySelector("#daily-team-panel").style.display = "block";
|
||||
body.querySelector("#daily-lobby-section").style.display = "none";
|
||||
});
|
||||
|
||||
@ -584,17 +612,22 @@ export async function loadEvents() {
|
||||
|
||||
socket.on("2v2_partner_left", (data) => {
|
||||
const s = body.querySelector("#daily-team-status");
|
||||
if (s) s.innerHTML = `<span style="color:#e74c3c;">⚠️ ${data.name} hat das Team verlassen.</span>`;
|
||||
if (s)
|
||||
s.innerHTML = `<span style="color:#e74c3c;">⚠️ ${data.name} hat das Team verlassen.</span>`;
|
||||
});
|
||||
|
||||
socket.on("2v2_searching", () => {
|
||||
const s = body.querySelector("#daily-team-status");
|
||||
if (s) s.innerHTML = `<div class="arena-searching-box">⏳ Suche nach Gegnerteam…</div>`;
|
||||
if (s)
|
||||
s.innerHTML = `<div class="arena-searching-box">⏳ Suche nach Gegnerteam…</div>`;
|
||||
const a = body.querySelector("#daily-team-actions");
|
||||
if (a) a.innerHTML = "";
|
||||
// Zurück sperren während Suche
|
||||
const backBtn = body.querySelector("#arena2-back-btn");
|
||||
if (backBtn) { backBtn.style.opacity = "0.35"; backBtn.style.cursor = "not-allowed"; }
|
||||
if (backBtn) {
|
||||
backBtn.style.opacity = "0.35";
|
||||
backBtn.style.cursor = "not-allowed";
|
||||
}
|
||||
isArena2InMatch = true;
|
||||
});
|
||||
|
||||
@ -606,16 +639,20 @@ export async function loadEvents() {
|
||||
isArena2InMatch = false;
|
||||
markDailyComplete(3);
|
||||
|
||||
showArenaMatchFound(daily2v2Me.name, `Team ${data.myTeam === 1 ? 2 : 1}`, () => {
|
||||
eventsGrid.style.display = "";
|
||||
arena2Ui.style.display = "none";
|
||||
openArenaMatchPopup(
|
||||
`/arena/2v2?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`,
|
||||
data.opponents?.join(" & ") || "Gegner",
|
||||
data.matchId,
|
||||
"2v2",
|
||||
);
|
||||
});
|
||||
showArenaMatchFound(
|
||||
daily2v2Me.name,
|
||||
`Team ${data.myTeam === 1 ? 2 : 1}`,
|
||||
() => {
|
||||
eventsGrid.style.display = "";
|
||||
arena2Ui.style.display = "none";
|
||||
openArenaMatchPopup(
|
||||
`/arena/2v2?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`,
|
||||
data.opponents?.join(" & ") || "Gegner",
|
||||
data.matchId,
|
||||
"2v2",
|
||||
);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
socket.on("2v2_error", (data) => showDaily2v2Error(`❌ ${data.message}`));
|
||||
@ -633,7 +670,9 @@ export async function loadEvents() {
|
||||
el.innerHTML = `<div class="arena-lobby-empty">Keine offenen Teams vorhanden.</div>`;
|
||||
return;
|
||||
}
|
||||
el.innerHTML = list.map(t => `
|
||||
el.innerHTML = list
|
||||
.map(
|
||||
(t) => `
|
||||
<div class="arena-lobby-row">
|
||||
<div class="arena-lobby-row-info">
|
||||
<span class="arena-lobby-leader">⚔️ ${t.leader}</span>
|
||||
@ -641,10 +680,15 @@ export async function loadEvents() {
|
||||
<span class="arena-lobby-count">${t.count}/2</span>
|
||||
</div>
|
||||
<button class="arena-btn-join" data-teamid="${t.teamId}">Beitreten</button>
|
||||
</div>`).join("");
|
||||
el.querySelectorAll(".arena-btn-join").forEach(btn => {
|
||||
</div>`,
|
||||
)
|
||||
.join("");
|
||||
el.querySelectorAll(".arena-btn-join").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
socket.emit("join_2v2_team", { teamId: btn.dataset.teamid, playerData: daily2v2Me });
|
||||
socket.emit("join_2v2_team", {
|
||||
teamId: btn.dataset.teamid,
|
||||
playerData: daily2v2Me,
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -654,25 +698,31 @@ export async function loadEvents() {
|
||||
const actionsEl = body.querySelector("#daily-team-actions");
|
||||
if (!playersEl || !actionsEl) return;
|
||||
|
||||
playersEl.innerHTML = data.players.map(p => `
|
||||
<div class="arena-team-player ${p.ready ? 'ready' : ''}">
|
||||
playersEl.innerHTML = data.players
|
||||
.map(
|
||||
(p) => `
|
||||
<div class="arena-team-player ${p.ready ? "ready" : ""}">
|
||||
<span class="arena-team-player-name">${p.name}</span>
|
||||
<span class="arena-team-player-level">Lvl ${p.level}</span>
|
||||
<span class="arena-team-player-status">${p.ready ? '✅ Bereit' : '⌛ Wartet'}</span>
|
||||
</div>`).join("");
|
||||
<span class="arena-team-player-status">${p.ready ? "✅ Bereit" : "⌛ Wartet"}</span>
|
||||
</div>`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
if (data.count < 2) {
|
||||
actionsEl.innerHTML = `<div class="arena-waiting-partner">Warte auf Partner…</div>`;
|
||||
} else {
|
||||
const myEntry = data.players.find(p => p.name === daily2v2Me?.name);
|
||||
const myEntry = data.players.find((p) => p.name === daily2v2Me?.name);
|
||||
const iAmReady = myEntry?.ready;
|
||||
actionsEl.innerHTML = iAmReady
|
||||
? `<button class="arena-btn-ready active" disabled>✅ Du bist bereit</button>`
|
||||
: `<button class="arena-btn-ready" id="daily-ready-btn">⚔️ Bereit</button>`;
|
||||
if (!iAmReady) {
|
||||
body.querySelector("#daily-ready-btn")?.addEventListener("click", () => {
|
||||
socket.emit("2v2_player_ready", { teamId: daily2v2TeamId });
|
||||
});
|
||||
body
|
||||
.querySelector("#daily-ready-btn")
|
||||
?.addEventListener("click", () => {
|
||||
socket.emit("2v2_player_ready", { teamId: daily2v2TeamId });
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -695,16 +745,21 @@ export async function loadEvents() {
|
||||
const panel = body.querySelector("#daily-team-panel");
|
||||
const section = body.querySelector("#daily-lobby-section");
|
||||
const backBtn = body.querySelector("#arena2-back-btn");
|
||||
if (panel) panel.style.display = "none";
|
||||
if (panel) panel.style.display = "none";
|
||||
if (section) section.style.display = "";
|
||||
if (backBtn) { backBtn.style.opacity = "1"; backBtn.style.cursor = "pointer"; }
|
||||
if (backBtn) {
|
||||
backBtn.style.opacity = "1";
|
||||
backBtn.style.cursor = "pointer";
|
||||
}
|
||||
}
|
||||
|
||||
function showDaily2v2Error(msg) {
|
||||
const s = body.querySelector("#daily-team-status");
|
||||
if (!s) return;
|
||||
s.innerHTML = `<span style="color:#e74c3c;">${msg}</span>`;
|
||||
setTimeout(() => { s.innerHTML = ""; }, 3000);
|
||||
setTimeout(() => {
|
||||
s.innerHTML = "";
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Lobby beim Öffnen des Arena2-UI initialisieren
|
||||
|
||||
Loading…
Reference in New Issue
Block a user