cay/dok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dghkm

Browse Source
This commit is contained in:
cay 2026-04-14 11:29:11 +01:00
parent c149ec785c
commit c0f7f965c4
1 changed files with 109 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
public/js/quickmenu/events.js
View File

@ -5,7 +5,7 @@
Stat-Icons SVG 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_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 = { const RARITY_CRYSTALS = {
1: "roter-cristal.png", 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?.defends != null ? `<span class="bs-stat-def">${card.defends}</span>` : ""}
${card?.cooldown != null ? `<span class="bs-stat-cd">${card.cooldown}</span>` : ""} ${card?.cooldown != null ? `<span class="bs-stat-cd">${card.cooldown}</span>` : ""}
${card?.rarity ? `<div class="bs-rarity">${rarityImgs(card.rarity, 11)}</div>` : ""} ${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"> <div class="bs-range-race">
${card?.range != null ? `<span class="bs-badge-range">${BS_SVG_RANGE}&thinsp;${card.range}</span>` : ""} ${card?.range != null ? `<span class="bs-badge-range">${BS_SVG_RANGE}&thinsp;${card.range}</span>` : ""}
${card?.race != null ? `<span class="bs-badge-race">${BS_SVG_RACE}&thinsp;${card.race}</span>` : ""} ${card?.race != null ? `<span class="bs-badge-race">${BS_SVG_RACE}&thinsp;${card.race}</span>` : ""}
</div>` : ""} </div>`
: ""
}
<div class="bs-card-name">${card?.name || ""}</div> <div class="bs-card-name">${card?.name || ""}</div>
`; `;
} }
@ -185,7 +189,7 @@ export async function loadEvents() {
<div class="booster-stage"> <div class="booster-stage">
<div class="booster-left"> <div class="booster-left">
<div class="wood-btn-wrap"> <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 class="gold-stamp" id="gold-stamp">Bitte Spenden</div>
</div> </div>
<span class="booster-stapel-hint" id="gold-hint">100 Gold spenden</span> <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", () => { body.querySelector("#arena-back-btn").addEventListener("click", () => {
if (isArenaSearching) return; // Während Suche gesperrt if (isArenaSearching) return; // Während Suche gesperrt
eventsGrid.style.display = ""; eventsGrid.style.display = "";
arenaUi.style.display = "none"; arenaUi.style.display = "none";
cancelArenaSearch(); cancelArenaSearch();
@ -403,12 +407,16 @@ export async function loadEvents() {
if (card) { if (card) {
card.classList.remove("searching"); card.classList.remove("searching");
card.querySelector(".arena-mode-label-daily").textContent = "1v1"; 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"; if (status) status.style.display = "none";
const backBtn = body.querySelector("#arena-back-btn"); 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() { function cancelArenaSearch() {
@ -445,16 +453,19 @@ export async function loadEvents() {
const card1v1 = body.querySelector("#arena-1v1-card"); const card1v1 = body.querySelector("#arena-1v1-card");
card1v1.classList.add("searching"); card1v1.classList.add("searching");
card1v1.querySelector(".arena-mode-label-daily").textContent = "⏳ Suche…"; 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 // Zurück-Button sperren während Suche
const backBtn = body.querySelector("#arena-back-btn"); const backBtn = body.querySelector("#arena-back-btn");
backBtn.style.opacity = "0.35"; 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})… 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>`); <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("match_found");
socket.off("queue_status"); socket.off("queue_status");
@ -464,9 +475,11 @@ export async function loadEvents() {
const pool = data.poolSize ? ` · ${data.poolSize} im Pool` : ""; const pool = data.poolSize ? ` · ${data.poolSize} im Pool` : "";
showArenaStatus(`⏳ Suche Gegner (Level ${Math.max(1, me.level - 5)}–${me.level + 5})${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>`); <br><span class="arena-cancel-link" id="arena-cancel-link">Suche abbrechen</span>`);
body.querySelector("#arena-cancel-link")?.addEventListener("click", () => { body
cancelArenaSearch(); .querySelector("#arena-cancel-link")
}); ?.addEventListener("click", () => {
cancelArenaSearch();
});
} }
}); });
@ -496,16 +509,20 @@ export async function loadEvents() {
const box = body.querySelector("#arena-daily-status"); const box = body.querySelector("#arena-daily-status");
if (!box) return; if (!box) return;
box.style.display = "block"; box.style.display = "block";
box.style.color = isError ? "#e74c3c" : "#dceb15"; box.style.color = isError ? "#e74c3c" : "#dceb15";
box.innerHTML = html; box.innerHTML = html;
if (isError) setTimeout(() => { box.style.display = "none"; }, 3000); if (isError)
setTimeout(() => {
box.style.display = "none";
}, 3000);
} }
function showArenaMatchFound(myName, opponentName, onDone) { function showArenaMatchFound(myName, opponentName, onDone) {
if (document.getElementById("match-found-overlay")) return; if (document.getElementById("match-found-overlay")) return;
const overlay = document.createElement("div"); const overlay = document.createElement("div");
overlay.id = "match-found-overlay"; 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 = ` 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: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} &nbsp;vs&nbsp; ${opponentName}</div> <div style="font-family:'Cinzel',serif;font-size:18px;color:rgba(255,255,255,0.75);letter-spacing:3px;">${myName} &nbsp;vs&nbsp; ${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 id="mfBar" style="height:100%;background:#ffd750;width:0%;border-radius:2px;transition:width 1.5s ease;"></div>
</div>`; </div>`;
document.body.appendChild(overlay); document.body.appendChild(overlay);
requestAnimationFrame(() => { const b = document.getElementById("mfBar"); if (b) b.style.width = "100%"; }); requestAnimationFrame(() => {
setTimeout(() => { overlay.remove(); onDone(); }, 1600); const b = document.getElementById("mfBar");
if (b) b.style.width = "100%";
});
setTimeout(() => {
overlay.remove();
onDone();
}, 1600);
} }
function openArenaMatchPopup(src, opponentName, matchId, mode = "1v1") { function openArenaMatchPopup(src, opponentName, matchId, mode = "1v1") {
@ -522,10 +545,12 @@ export async function loadEvents() {
document.getElementById("arena-popup")?.remove(); document.getElementById("arena-popup")?.remove();
const backdrop = document.createElement("div"); const backdrop = document.createElement("div");
backdrop.id = "arena-backdrop"; 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"); const popup = document.createElement("div");
popup.id = "arena-popup"; 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 = ` 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;"> <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> <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) ── */ /* ── Arena2 Daily Zustand (2v2 Lobby) ── */
let isArena2InMatch = false; let isArena2InMatch = false;
let daily2v2TeamId = null; let daily2v2TeamId = null;
let daily2v2Me = null; let daily2v2Me = null;
async function open2v2DailyLobby() { async function open2v2DailyLobby() {
const socket = window._socket; const socket = window._socket;
if (!socket) { showDaily2v2Error("❌ Keine Verbindung zum Server."); return; } if (!socket) {
showDaily2v2Error("❌ Keine Verbindung zum Server.");
return;
}
if (!daily2v2Me) { if (!daily2v2Me) {
try { try {
@ -576,7 +604,7 @@ export async function loadEvents() {
socket.on("2v2_team_joined", (data) => { socket.on("2v2_team_joined", (data) => {
daily2v2TeamId = data.teamId; 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"; body.querySelector("#daily-lobby-section").style.display = "none";
}); });
@ -584,17 +612,22 @@ export async function loadEvents() {
socket.on("2v2_partner_left", (data) => { socket.on("2v2_partner_left", (data) => {
const s = body.querySelector("#daily-team-status"); 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", () => { socket.on("2v2_searching", () => {
const s = body.querySelector("#daily-team-status"); 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"); const a = body.querySelector("#daily-team-actions");
if (a) a.innerHTML = ""; if (a) a.innerHTML = "";
// Zurück sperren während Suche // Zurück sperren während Suche
const backBtn = body.querySelector("#arena2-back-btn"); 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; isArena2InMatch = true;
}); });
@ -606,16 +639,20 @@ export async function loadEvents() {
isArena2InMatch = false; isArena2InMatch = false;
markDailyComplete(3); markDailyComplete(3);
showArenaMatchFound(daily2v2Me.name, `Team ${data.myTeam === 1 ? 2 : 1}`, () => { showArenaMatchFound(
eventsGrid.style.display = ""; daily2v2Me.name,
arena2Ui.style.display = "none"; `Team ${data.myTeam === 1 ? 2 : 1}`,
openArenaMatchPopup( () => {
`/arena/2v2?match=${encodeURIComponent(data.matchId)}&slot=${encodeURIComponent(data.mySlot)}`, eventsGrid.style.display = "";
data.opponents?.join(" & ") || "Gegner", arena2Ui.style.display = "none";
data.matchId, openArenaMatchPopup(
"2v2", `/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}`)); 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>`; el.innerHTML = `<div class="arena-lobby-empty">Keine offenen Teams vorhanden.</div>`;
return; return;
} }
el.innerHTML = list.map(t => ` el.innerHTML = list
.map(
(t) => `
<div class="arena-lobby-row"> <div class="arena-lobby-row">
<div class="arena-lobby-row-info"> <div class="arena-lobby-row-info">
<span class="arena-lobby-leader">⚔️ ${t.leader}</span> <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> <span class="arena-lobby-count">${t.count}/2</span>
</div> </div>
<button class="arena-btn-join" data-teamid="${t.teamId}">Beitreten</button> <button class="arena-btn-join" data-teamid="${t.teamId}">Beitreten</button>
</div>`).join(""); </div>`,
el.querySelectorAll(".arena-btn-join").forEach(btn => { )
.join("");
el.querySelectorAll(".arena-btn-join").forEach((btn) => {
btn.addEventListener("click", () => { 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"); const actionsEl = body.querySelector("#daily-team-actions");
if (!playersEl || !actionsEl) return; if (!playersEl || !actionsEl) return;
playersEl.innerHTML = data.players.map(p => ` playersEl.innerHTML = data.players
<div class="arena-team-player ${p.ready ? 'ready' : ''}"> .map(
(p) => `
<div class="arena-team-player ${p.ready ? "ready" : ""}">
<span class="arena-team-player-name">${p.name}</span> <span class="arena-team-player-name">${p.name}</span>
<span class="arena-team-player-level">Lvl ${p.level}</span> <span class="arena-team-player-level">Lvl ${p.level}</span>
<span class="arena-team-player-status">${p.ready ? '✅ Bereit' : '⌛ Wartet'}</span> <span class="arena-team-player-status">${p.ready ? "✅ Bereit" : "⌛ Wartet"}</span>
</div>`).join(""); </div>`,
)
.join("");
if (data.count < 2) { if (data.count < 2) {
actionsEl.innerHTML = `<div class="arena-waiting-partner">Warte auf Partner…</div>`; actionsEl.innerHTML = `<div class="arena-waiting-partner">Warte auf Partner…</div>`;
} else { } 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; const iAmReady = myEntry?.ready;
actionsEl.innerHTML = iAmReady actionsEl.innerHTML = iAmReady
? `<button class="arena-btn-ready active" disabled>✅ Du bist bereit</button>` ? `<button class="arena-btn-ready active" disabled>✅ Du bist bereit</button>`
: `<button class="arena-btn-ready" id="daily-ready-btn">⚔️ Bereit</button>`; : `<button class="arena-btn-ready" id="daily-ready-btn">⚔️ Bereit</button>`;
if (!iAmReady) { if (!iAmReady) {
body.querySelector("#daily-ready-btn")?.addEventListener("click", () => { body
socket.emit("2v2_player_ready", { teamId: daily2v2TeamId }); .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 panel = body.querySelector("#daily-team-panel");
const section = body.querySelector("#daily-lobby-section"); const section = body.querySelector("#daily-lobby-section");
const backBtn = body.querySelector("#arena2-back-btn"); 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 (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) { function showDaily2v2Error(msg) {
const s = body.querySelector("#daily-team-status"); const s = body.querySelector("#daily-team-status");
if (!s) return; if (!s) return;
s.innerHTML = `<span style="color:#e74c3c;">${msg}</span>`; s.innerHTML = `<span style="color:#e74c3c;">${msg}</span>`;
setTimeout(() => { s.innerHTML = ""; }, 3000); setTimeout(() => {
s.innerHTML = "";
}, 3000);
} }
// Lobby beim Öffnen des Arena2-UI initialisieren // Lobby beim Öffnen des Arena2-UI initialisieren