qegQ
This commit is contained in:
parent
2dd5692d31
commit
2e64850314
2
app.js
2
app.js
@ -27,6 +27,7 @@ const arenaRoutes = require("./routes/arena.route");
|
||||
const { registerArenaHandlers } = require("./sockets/arena");
|
||||
const { registerChatHandlers } = require("./sockets/chat");
|
||||
const boosterRoutes = require("./routes/booster.route");
|
||||
const pointsRoutes = require("./routes/points.route");
|
||||
|
||||
const compression = require("compression");
|
||||
|
||||
@ -386,6 +387,7 @@ app.use("/api", carddeckRoutes);
|
||||
app.use("/arena", arenaRoutes);
|
||||
app.use("/api", boosterRoutes);
|
||||
app.use("/api", require("./routes/daily.route"));
|
||||
app.use("/api/points", pointsRoutes);
|
||||
|
||||
/* ========================
|
||||
404 Handler
|
||||
|
||||
233
routes/points.route.js
Normal file
233
routes/points.route.js
Normal file
@ -0,0 +1,233 @@
|
||||
/* ============================================================
|
||||
routes/points.route.js
|
||||
Punkte-Vergabe nach Arena-Matches
|
||||
|
||||
Jeder Spieler meldet sein eigenes Ergebnis:
|
||||
POST /api/points/match → Punkte für diesen Spieler vergeben
|
||||
GET /api/points/me → Aktueller Stand + Level-Fortschritt
|
||||
============================================================ */
|
||||
|
||||
const express = require("express");
|
||||
const router = express.Router();
|
||||
const db = require("../database/database");
|
||||
|
||||
/* ── Punkte-Konfiguration ───────────────────────────────── */
|
||||
const POINTS = {
|
||||
"1v1": { win: 15, lose: 3 },
|
||||
"2v2": { win: 12, lose: 2 },
|
||||
"4v4": { win: 10, lose: 2 },
|
||||
};
|
||||
const DAILY_LIMIT = 500;
|
||||
const SURRENDER_MIN_SEC = 60; // Aufgabe unter 60s → 0 Punkte
|
||||
|
||||
/* ── Auth-Guard ─────────────────────────────────────────── */
|
||||
function requireLogin(req, res, next) {
|
||||
if (!req.session?.user) return res.status(401).json({ error: "Nicht eingeloggt" });
|
||||
next();
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
HELPER: Punkte vergeben
|
||||
- accounts.arena_points += amount (NIE abgezogen → Level)
|
||||
- user_buildings.points += amount (für Gebäude-Upgrades)
|
||||
- Tages-Limit 500 prüfen
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
async function awardPoints(accountId, amount) {
|
||||
if (amount <= 0) return { awarded: 0, level_up: false };
|
||||
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
|
||||
const [[acc]] = await db.query(
|
||||
"SELECT arena_points, arena_points_today, arena_points_reset, level FROM accounts WHERE id = ?",
|
||||
[accountId]
|
||||
);
|
||||
if (!acc) return { awarded: 0, level_up: false };
|
||||
|
||||
/* Tages-Reset */
|
||||
const lastReset = acc.arena_points_reset
|
||||
? new Date(acc.arena_points_reset).toISOString().slice(0, 10)
|
||||
: null;
|
||||
const pointsToday = lastReset === today ? acc.arena_points_today : 0;
|
||||
|
||||
/* Tages-Limit anwenden */
|
||||
const remaining = Math.max(0, DAILY_LIMIT - pointsToday);
|
||||
const actual = Math.min(amount, remaining);
|
||||
|
||||
if (actual === 0) {
|
||||
return { awarded: 0, level_up: false, daily_limit_reached: true };
|
||||
}
|
||||
|
||||
/* accounts: arena_points erhöhen (NIE abziehen) */
|
||||
await db.query(
|
||||
`UPDATE accounts
|
||||
SET arena_points = arena_points + ?,
|
||||
arena_points_today = ? + ?,
|
||||
arena_points_reset = ?
|
||||
WHERE id = ?`,
|
||||
[actual, pointsToday, actual, today, accountId]
|
||||
);
|
||||
|
||||
/* Alle Gebäude des Spielers ebenfalls gutschreiben */
|
||||
await db.query(
|
||||
"UPDATE user_buildings SET points = points + ? WHERE user_id = ?",
|
||||
[actual, accountId]
|
||||
);
|
||||
|
||||
/* Level-Up prüfen */
|
||||
const newTotal = acc.arena_points + actual;
|
||||
const [[levelRow]] = await db.query(
|
||||
`SELECT MAX(level) AS level
|
||||
FROM character_levels
|
||||
WHERE points_cumulative <= ?`,
|
||||
[newTotal]
|
||||
);
|
||||
const newLevel = levelRow?.level || 1;
|
||||
const levelUp = newLevel > acc.level;
|
||||
|
||||
if (levelUp) {
|
||||
await db.query(
|
||||
"UPDATE accounts SET level = ? WHERE id = ?",
|
||||
[newLevel, accountId]
|
||||
);
|
||||
console.log(`[Points] Level-Up! Spieler ${accountId}: ${acc.level} → ${newLevel}`);
|
||||
}
|
||||
|
||||
return {
|
||||
awarded: actual,
|
||||
new_total: newTotal,
|
||||
new_level: newLevel,
|
||||
level_up: levelUp,
|
||||
daily_limit_reached: actual < amount,
|
||||
};
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
POST /api/points/match
|
||||
Jeder Spieler ruft dies für sich selbst auf wenn das
|
||||
Match endet (Sieg, Niederlage oder Aufgabe).
|
||||
|
||||
Body:
|
||||
{
|
||||
match_id: "match_1234_abc", -- eindeutige Match-ID
|
||||
mode: "1v1"|"2v2"|"4v4",
|
||||
result: "win"|"lose",
|
||||
surrender: false, -- true wenn aufgegeben
|
||||
duration_seconds: 240 -- Spieldauer in Sekunden
|
||||
}
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
router.post("/match", requireLogin, async (req, res) => {
|
||||
const { match_id, mode, result, surrender, duration_seconds } = req.body;
|
||||
const accountId = req.session.user.id;
|
||||
|
||||
if (!match_id || !mode || !POINTS[mode] || !["win", "lose"].includes(result)) {
|
||||
return res.status(400).json({ error: "Ungültige Parameter" });
|
||||
}
|
||||
|
||||
try {
|
||||
/* Doppelte Vergabe für diesen Spieler verhindern */
|
||||
const [[existing]] = await db.query(
|
||||
"SELECT id FROM arena_match_players WHERE match_id = ? AND account_id = ?",
|
||||
[match_id, accountId]
|
||||
);
|
||||
if (existing) {
|
||||
return res.json({ success: true, already_processed: true });
|
||||
}
|
||||
|
||||
/* Punkte berechnen */
|
||||
const pts = POINTS[mode];
|
||||
const isWin = result === "win";
|
||||
const isSurr = !!surrender;
|
||||
const shortMatch = duration_seconds && duration_seconds < SURRENDER_MIN_SEC;
|
||||
|
||||
let pointsToAward = 0;
|
||||
if (shortMatch) {
|
||||
pointsToAward = 0; // Zu kurz → keine Punkte
|
||||
} else if (isWin) {
|
||||
pointsToAward = pts.win;
|
||||
} else if (isSurr) {
|
||||
pointsToAward = 0; // Aufgegeben → keine Punkte
|
||||
} else {
|
||||
pointsToAward = pts.lose;
|
||||
}
|
||||
|
||||
/* Punkte vergeben */
|
||||
const awarded = await awardPoints(accountId, pointsToAward);
|
||||
|
||||
/* Match-Log: Eintrag für diesen Spieler */
|
||||
await db.query(
|
||||
`INSERT IGNORE INTO arena_matches (match_id, mode, surrender, duration_seconds)
|
||||
VALUES (?, ?, ?, ?)`,
|
||||
[match_id, mode, isSurr ? 1 : 0, duration_seconds || null]
|
||||
);
|
||||
|
||||
await db.query(
|
||||
`INSERT INTO arena_match_players (match_id, account_id, team, won, points)
|
||||
VALUES (?, ?, 1, ?, ?)`,
|
||||
[match_id, accountId, isWin ? 1 : 0, awarded.awarded]
|
||||
);
|
||||
|
||||
console.log(
|
||||
`[Points] ${mode} | Spieler ${accountId} | ${result} | +${awarded.awarded} Pts` +
|
||||
(awarded.level_up ? ` | LEVEL UP → ${awarded.new_level}!` : "")
|
||||
);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
points_awarded: awarded.awarded,
|
||||
total_arena_points: awarded.new_total,
|
||||
level: awarded.new_level,
|
||||
level_up: awarded.level_up,
|
||||
daily_limit_reached: awarded.daily_limit_reached || false,
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error("[Points] Fehler:", err);
|
||||
res.status(500).json({ error: "Datenbankfehler" });
|
||||
}
|
||||
});
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
GET /api/points/me
|
||||
Aktueller Punktestand + Level-Fortschritt für HUD
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
router.get("/me", requireLogin, async (req, res) => {
|
||||
const userId = req.session.user.id;
|
||||
try {
|
||||
const [[acc]] = await db.query(
|
||||
"SELECT arena_points, level FROM accounts WHERE id = ?",
|
||||
[userId]
|
||||
);
|
||||
if (!acc) return res.status(404).json({ error: "Spieler nicht gefunden" });
|
||||
|
||||
const [[curLevel]] = await db.query(
|
||||
`SELECT level, points_cumulative FROM character_levels
|
||||
WHERE points_cumulative <= ? ORDER BY level DESC LIMIT 1`,
|
||||
[acc.arena_points]
|
||||
);
|
||||
const [[nextLevel]] = await db.query(
|
||||
`SELECT level, points_cumulative FROM character_levels
|
||||
WHERE points_cumulative > ? ORDER BY level ASC LIMIT 1`,
|
||||
[acc.arena_points]
|
||||
);
|
||||
|
||||
const curThreshold = curLevel?.points_cumulative || 0;
|
||||
const nextThreshold = nextLevel?.points_cumulative || null;
|
||||
const progress = nextThreshold
|
||||
? Math.round((acc.arena_points - curThreshold) * 100 / (nextThreshold - curThreshold))
|
||||
: 100;
|
||||
|
||||
res.json({
|
||||
arena_points: acc.arena_points,
|
||||
level: acc.level,
|
||||
points_this_level: acc.arena_points - curThreshold,
|
||||
points_for_next: nextThreshold ? nextThreshold - curThreshold : 0,
|
||||
progress_percent: progress,
|
||||
is_max_level: !nextLevel,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("[Points] /me Fehler:", err);
|
||||
res.status(500).json({ error: "Datenbankfehler" });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@ -4,18 +4,45 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title><%= title || "Spielfeld" %></title>
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/css/1v1.css" />
|
||||
<style>
|
||||
#match-result-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.88);
|
||||
z-index: 9999;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: "Cinzel", serif;
|
||||
animation: fadeIn 0.4s ease;
|
||||
}
|
||||
#match-result-overlay.show { display: flex; }
|
||||
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
|
||||
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
|
||||
|
||||
.result-title { font-size:48px; letter-spacing:6px; margin-bottom:12px; text-shadow:0 0 30px currentColor; }
|
||||
.result-title.win { color:#f0d060; }
|
||||
.result-title.lose { color:#c84040; }
|
||||
.result-points { font-size:22px; color:#c8a860; margin-bottom:6px; letter-spacing:2px; }
|
||||
.result-levelup { font-size:18px; color:#60e060; margin-bottom:20px; letter-spacing:2px; animation:pulse 1s ease-in-out infinite; }
|
||||
.result-progress-wrap { width:320px; margin-bottom:24px; }
|
||||
.result-progress-label { display:flex; justify-content:space-between; font-size:12px; color:#a08060; margin-bottom:6px; }
|
||||
.result-progress-track { height:10px; background:rgba(255,255,255,0.08); border-radius:5px; overflow:hidden; }
|
||||
.result-progress-fill { height:100%; background:linear-gradient(90deg,#c8960c,#f0d060); border-radius:5px; transition:width 1s ease; }
|
||||
.result-close-btn {
|
||||
background:linear-gradient(#4a3010,#2a1a08); border:2px solid #c8960c;
|
||||
color:#f0d9a6; font-family:"Cinzel",serif; font-size:14px;
|
||||
padding:10px 30px; border-radius:8px; cursor:pointer;
|
||||
letter-spacing:2px; margin-top:10px; transition:0.2s;
|
||||
}
|
||||
.result-close-btn:hover { border-color:#f0d060; filter:brightness(1.2); }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Warte-Overlay bis Gegner verbunden ist -->
|
||||
<div id="connecting-overlay">
|
||||
<div class="spinner"></div>
|
||||
<div>Warte auf Gegner…</div>
|
||||
@ -23,29 +50,26 @@
|
||||
</div>
|
||||
|
||||
<div class="board">
|
||||
<!-- TOP BAR -->
|
||||
<div class="top-bar">
|
||||
<div class="game-title"><%= title || "Spielfeld" %></div>
|
||||
|
||||
<div class="top-icons">
|
||||
<div class="top-icon">⚙</div>
|
||||
<div class="top-icon">🗺</div>
|
||||
<div class="top-icon">📖</div>
|
||||
<div class="top-icon">🏆</div>
|
||||
<div class="top-icon">⚙</div><div class="top-icon">🗺</div>
|
||||
<div class="top-icon">📖</div><div class="top-icon">🏆</div>
|
||||
</div>
|
||||
|
||||
<div class="top-bar-actions">
|
||||
<button class="end-turn-btn" id="end-turn-btn" disabled>Zug beenden</button>
|
||||
<button class="aufgeben-btn" id="aufgeben-btn">🏳 Aufgeben</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spielfeld-Sperre bis beide Spieler bereit sind -->
|
||||
<div id="board-lock-overlay">
|
||||
<div id="ready-timer-box">
|
||||
<div id="ready-timer-label">Bereit machen</div>
|
||||
<div id="ready-timer-ring">
|
||||
<svg viewBox="0 0 80 80" width="80" height="80"><circle cx="40" cy="40" r="34" class="timer-track"/><circle cx="40" cy="40" r="34" class="timer-fill" id="timer-circle"/></svg>
|
||||
<svg viewBox="0 0 80 80" width="80" height="80">
|
||||
<circle cx="40" cy="40" r="34" class="timer-track"/>
|
||||
<circle cx="40" cy="40" r="34" class="timer-fill" id="timer-circle"/>
|
||||
</svg>
|
||||
<div id="ready-timer-number">30</div>
|
||||
</div>
|
||||
<div id="ready-timer-sub">Beide Spieler müssen BEREIT klicken</div>
|
||||
@ -57,90 +81,45 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LEFT AVATAR (Spieler 1) -->
|
||||
<div class="avatar avatar-left" id="avLeft">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
id="fileInputLeft"
|
||||
/>
|
||||
|
||||
<input type="file" accept="image/*" id="fileInputLeft" />
|
||||
<img id="avImgL" class="av-img" />
|
||||
|
||||
<div class="av-placeholder" id="avPhL">
|
||||
<div class="av-icon">⚔</div>
|
||||
</div>
|
||||
|
||||
<div class="av-placeholder" id="avPhL"><div class="av-icon">⚔</div></div>
|
||||
<div class="av-name" id="nameLeft"><%= player1 || "Spieler 1" %></div>
|
||||
|
||||
<div class="av-stats">
|
||||
<div class="stat hp">
|
||||
<span class="s-icon">❤</span>
|
||||
<span class="s-val" id="hpLeft"><%= player1hp || 20 %></span>
|
||||
</div>
|
||||
|
||||
<div class="stat mana">
|
||||
<span class="s-icon">💧</span>
|
||||
<span class="s-val" id="manaLeft"><%= player1mana || 3 %></span>
|
||||
</div>
|
||||
<div class="stat hp"><span class="s-icon">❤</span><span class="s-val" id="hpLeft"><%= player1hp || 20 %></span></div>
|
||||
<div class="stat mana"><span class="s-icon">💧</span><span class="s-val" id="manaLeft"><%= player1mana || 3 %></span></div>
|
||||
</div>
|
||||
|
||||
<div class="hp-orb" id="orbLeft"><%= player1hp || 15 %></div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT AVATAR (Spieler 2) -->
|
||||
<div class="avatar avatar-right" id="avRight">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
id="fileInputRight"
|
||||
/>
|
||||
|
||||
<input type="file" accept="image/*" id="fileInputRight" />
|
||||
<img id="avImgR" class="av-img" />
|
||||
|
||||
<div class="av-placeholder" id="avPhR">
|
||||
<div class="av-icon">🛡</div>
|
||||
</div>
|
||||
|
||||
<div class="av-name" id="nameRight"><%= player2 || "Spieler 2" %></div>
|
||||
|
||||
<div class="av-placeholder" id="avPhR"><div class="av-icon">🛡</div></div>
|
||||
<div class="av-name" id="nameRight"><%= player2 || "Gegner" %></div>
|
||||
<div class="av-stats">
|
||||
<div class="stat hp">
|
||||
<span class="s-icon">❤</span>
|
||||
<span class="s-val" id="hpRight"><%= player2hp || 20 %></span>
|
||||
</div>
|
||||
|
||||
<div class="stat mana">
|
||||
<span class="s-icon">💧</span>
|
||||
<span class="s-val" id="manaRight"><%= player2mana || 3 %></span>
|
||||
</div>
|
||||
<div class="stat hp"><span class="s-icon">❤</span><span class="s-val" id="hpRight"><%= player2hp || 20 %></span></div>
|
||||
<div class="stat mana"><span class="s-icon">💧</span><span class="s-val" id="manaRight"><%= player2mana || 3 %></span></div>
|
||||
</div>
|
||||
|
||||
<div class="hp-orb" id="orbRight"><%= player2hp || 15 %></div>
|
||||
</div>
|
||||
|
||||
<!-- CENTER CARD ROWS -->
|
||||
<div class="card-area">
|
||||
<div class="row-label">Reihe 1</div>
|
||||
<div class="card-row" id="row1"></div>
|
||||
|
||||
<div class="row-label">Reihe 2</div>
|
||||
<div class="card-row" id="row2"></div>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM BAR -->
|
||||
<div class="bottom-bar">
|
||||
<!-- HAND -->
|
||||
<div class="hand-area" id="handArea"></div>
|
||||
|
||||
<!-- ACTION BUTTONS -->
|
||||
<div class="action-hud">
|
||||
<div class="action-row">
|
||||
<div class="action-btn" title="Angriff">⚔</div>
|
||||
<div class="action-btn" title="Magie">✨</div>
|
||||
<div class="action-btn" title="Verteidigung">🛡</div>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<div class="action-btn" title="Heilen">💊</div>
|
||||
<div class="action-btn" title="Karte ziehen">🃏</div>
|
||||
@ -150,51 +129,45 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Socket.io (wird vom Parent-Fenster geerbt oder eigenständig geladen) -->
|
||||
<!-- Match-Ergebnis Overlay -->
|
||||
<div id="match-result-overlay">
|
||||
<div class="result-title" id="result-title"></div>
|
||||
<div class="result-points" id="result-points"></div>
|
||||
<div class="result-levelup" id="result-levelup" style="display:none;"></div>
|
||||
<div class="result-progress-wrap" id="result-progress-wrap" style="display:none;">
|
||||
<div class="result-progress-label">
|
||||
<span id="result-level-label">Level</span>
|
||||
<span id="result-pts-label"></span>
|
||||
</div>
|
||||
<div class="result-progress-track">
|
||||
<div class="result-progress-fill" id="result-progress-fill" style="width:0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="result-close-btn" id="result-close-btn">Schließen</button>
|
||||
</div>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
|
||||
<script>
|
||||
// ── Spielfeld-Karten aufbauen ──────────────────────────────────────────
|
||||
["row1", "row2"].forEach((id) => {
|
||||
/* ── Spielfeld aufbauen ─────────────────────────────── */
|
||||
["row1","row2"].forEach(id => {
|
||||
const row = document.getElementById(id);
|
||||
|
||||
for (let i = 1; i <= 11; i++) {
|
||||
const s = document.createElement("div");
|
||||
s.className = "card-slot";
|
||||
|
||||
if (id === "row1" && i === 1) {
|
||||
s.innerHTML = `
|
||||
<img
|
||||
src="/images/playcards/Silberklinge.png"
|
||||
alt="Silberklinge"
|
||||
style="width:100%;height:100%;object-fit:cover;border-radius:7px;"
|
||||
>
|
||||
`;
|
||||
s.innerHTML = `<img src="/images/playcards/Silberklinge.png" style="width:100%;height:100%;object-fit:cover;border-radius:7px;">`;
|
||||
} else {
|
||||
s.innerHTML =
|
||||
'<span class="slot-icon">✦</span><span class="slot-num">' +
|
||||
i +
|
||||
"</span>";
|
||||
s.innerHTML = '<span class="slot-icon">✦</span><span class="slot-num">' + i + "</span>";
|
||||
}
|
||||
|
||||
row.appendChild(s);
|
||||
}
|
||||
});
|
||||
|
||||
// ── Hand-Karten aufbauen ───────────────────────────────────────────────
|
||||
const hand = document.getElementById("handArea");
|
||||
|
||||
const silberklinge = document.createElement("div");
|
||||
silberklinge.className = "hand-slot";
|
||||
silberklinge.innerHTML = `
|
||||
<img
|
||||
src="/images/playcards/Silberklinge.png"
|
||||
alt="Silberklinge"
|
||||
style="width:100%;height:100%;object-fit:cover;border-radius:7px;"
|
||||
>
|
||||
`;
|
||||
hand.appendChild(silberklinge);
|
||||
|
||||
const silber = document.createElement("div");
|
||||
silber.className = "hand-slot";
|
||||
silber.innerHTML = `<img src="/images/playcards/Silberklinge.png" style="width:100%;height:100%;object-fit:cover;border-radius:7px;">`;
|
||||
hand.appendChild(silber);
|
||||
for (let i = 1; i < 8; i++) {
|
||||
const s = document.createElement("div");
|
||||
s.className = "hand-slot";
|
||||
@ -202,165 +175,184 @@
|
||||
hand.appendChild(s);
|
||||
}
|
||||
|
||||
// ── Match-Daten aus URL ────────────────────────────────────────────────
|
||||
/* ── Match-Daten ────────────────────────────────────── */
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const matchId = urlParams.get("match") || "<%= matchId || '' %>";
|
||||
const mySlot = urlParams.get("slot") || "<%= mySlot || 'player1' %>";
|
||||
const mySlot = urlParams.get("slot") || "<%= mySlot || 'player1' %>";
|
||||
const amIPlayer1 = mySlot === "player1";
|
||||
|
||||
// ── Socket.io: Gegner-Namen live empfangen ─────────────────────────────
|
||||
/* ── Socket ─────────────────────────────────────────── */
|
||||
const socket = io();
|
||||
|
||||
socket.emit("arena_join", { matchId, slot: mySlot });
|
||||
/* Account-ID laden dann arena_join senden */
|
||||
fetch("/arena/me")
|
||||
.then(r => r.json())
|
||||
.then(me => {
|
||||
socket.emit("arena_join", { matchId, slot: mySlot, accountId: me.id });
|
||||
})
|
||||
.catch(() => {
|
||||
socket.emit("arena_join", { matchId, slot: mySlot, accountId: null });
|
||||
});
|
||||
|
||||
socket.on("arena_opponent_joined", (data) => {
|
||||
// Gegner-Name anzeigen
|
||||
const opponentName = data.name || "Gegner";
|
||||
|
||||
if (amIPlayer1) {
|
||||
document.getElementById("nameRight").textContent = opponentName;
|
||||
} else {
|
||||
document.getElementById("nameLeft").textContent = opponentName;
|
||||
}
|
||||
|
||||
// Overlay entfernen
|
||||
const overlay = document.getElementById("connecting-overlay");
|
||||
if (overlay) overlay.remove();
|
||||
/* ── Gegner verbunden ───────────────────────────────── */
|
||||
socket.on("arena_opponent_joined", data => {
|
||||
const name = data.name || "Gegner";
|
||||
document.getElementById(amIPlayer1 ? "nameRight" : "nameLeft").textContent = name;
|
||||
document.getElementById("connecting-overlay")?.remove();
|
||||
});
|
||||
|
||||
// Beide Spieler sind verbunden → beide benachrichtigen
|
||||
socket.on("arena_ready", (data) => {
|
||||
const overlay = document.getElementById("connecting-overlay");
|
||||
if (overlay) overlay.remove();
|
||||
|
||||
// Namen setzen
|
||||
socket.on("arena_ready", data => {
|
||||
document.getElementById("connecting-overlay")?.remove();
|
||||
document.getElementById("nameLeft").textContent = data.player1 || "Spieler 1";
|
||||
document.getElementById("nameRight").textContent = data.player2 || "Spieler 2";
|
||||
});
|
||||
|
||||
// ── Bereit-System ─────────────────────────────────────────────────────
|
||||
/* ── Bereit-System ──────────────────────────────────── */
|
||||
let myReady = false;
|
||||
|
||||
function handleBereit() {
|
||||
if (myReady) return;
|
||||
myReady = true;
|
||||
|
||||
const btn = document.getElementById("bereit-btn");
|
||||
btn.textContent = "✔ BEREIT";
|
||||
btn.classList.add("bereit-clicked");
|
||||
btn.disabled = true;
|
||||
|
||||
socket.emit("player_ready", { matchId, slot: mySlot });
|
||||
}
|
||||
|
||||
// Timer-Kreis: Umfang des Kreises (r=34 → 2*π*34 ≈ 213.6)
|
||||
const CIRCUMFERENCE = 2 * Math.PI * 34;
|
||||
const timerCircle = document.getElementById("timer-circle");
|
||||
if (timerCircle) timerCircle.style.strokeDasharray = CIRCUMFERENCE;
|
||||
|
||||
socket.on("ready_timer", (data) => {
|
||||
const { remaining } = data;
|
||||
socket.on("ready_timer", data => {
|
||||
const num = document.getElementById("ready-timer-number");
|
||||
if (num) num.textContent = remaining;
|
||||
|
||||
// Kreis-Fortschritt aktualisieren
|
||||
if (num) num.textContent = data.remaining;
|
||||
if (timerCircle) {
|
||||
const progress = remaining / 30;
|
||||
const offset = CIRCUMFERENCE * (1 - progress);
|
||||
timerCircle.style.strokeDashoffset = offset;
|
||||
// Farbe: grün → gelb → rot
|
||||
if (remaining > 15) timerCircle.style.stroke = "#27ae60";
|
||||
else if (remaining > 7) timerCircle.style.stroke = "#f39c12";
|
||||
else timerCircle.style.stroke = "#e74c3c";
|
||||
timerCircle.style.strokeDashoffset = CIRCUMFERENCE * (1 - data.remaining / 30);
|
||||
timerCircle.style.stroke = data.remaining > 15 ? "#27ae60" : data.remaining > 7 ? "#f39c12" : "#e74c3c";
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("ready_status", (data) => {
|
||||
// Pips aktualisieren
|
||||
socket.on("ready_status", data => {
|
||||
const pip1 = document.getElementById("pip-player1");
|
||||
const pip2 = document.getElementById("pip-player2");
|
||||
if (data.readySlots && pip1 && pip2) {
|
||||
if (data.readySlots.includes("player1")) pip1.textContent = "✅ " + (document.getElementById("nameLeft")?.textContent || "Spieler 1");
|
||||
if (data.readySlots.includes("player2")) pip2.textContent = "✅ " + (document.getElementById("nameRight")?.textContent || "Spieler 2");
|
||||
if (data.readySlots) {
|
||||
if (data.readySlots.includes("player1") && pip1) pip1.textContent = "✅ " + (document.getElementById("nameLeft")?.textContent || "Spieler 1");
|
||||
if (data.readySlots.includes("player2") && pip2) pip2.textContent = "✅ " + (document.getElementById("nameRight")?.textContent || "Spieler 2");
|
||||
}
|
||||
|
||||
if (data.readyCount === 2) {
|
||||
// Beide bereit → Sperre aufheben
|
||||
const lock = document.getElementById("board-lock-overlay");
|
||||
if (lock) lock.remove();
|
||||
|
||||
const bereitBtn = document.getElementById("bereit-btn");
|
||||
if (bereitBtn) bereitBtn.remove();
|
||||
|
||||
const endBtn = document.getElementById("end-turn-btn");
|
||||
if (endBtn) endBtn.disabled = false;
|
||||
document.getElementById("board-lock-overlay")?.remove();
|
||||
document.getElementById("bereit-btn")?.remove();
|
||||
document.getElementById("end-turn-btn").disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
/* ── Aufgeben ───────────────────────────────────────── */
|
||||
function handleAufgeben() {
|
||||
if (!confirm("Wirklich aufgeben? Du erhältst keine Punkte.")) return;
|
||||
socket.emit("player_surrender", { matchId, slot: mySlot });
|
||||
}
|
||||
|
||||
/* ── Spielende Events ───────────────────────────────── */
|
||||
socket.on("player_surrendered", data => {
|
||||
/* Overlay sofort anzeigen, Punkte kommen per match_result */
|
||||
const iLost = data.slot === mySlot;
|
||||
showResultOverlay(iLost ? false : true, null);
|
||||
});
|
||||
|
||||
/* Punkte-Ergebnis vom Server (kommt kurz nach player_surrendered) */
|
||||
socket.on("match_result", data => {
|
||||
updateResultWithPoints(data);
|
||||
});
|
||||
|
||||
socket.on("match_cancelled", () => {
|
||||
// Popup im Parent-Fenster schließen (Spielfeld läuft im iframe)
|
||||
closePopup();
|
||||
});
|
||||
|
||||
/* ── Ergebnis-Overlay ───────────────────────────────── */
|
||||
function showResultOverlay(won, data) {
|
||||
const overlay = document.getElementById("match-result-overlay");
|
||||
const titleEl = document.getElementById("result-title");
|
||||
const pointsEl = document.getElementById("result-points");
|
||||
|
||||
titleEl.textContent = won ? "⚔️ SIEG!" : "💀 NIEDERLAGE";
|
||||
titleEl.className = "result-title " + (won ? "win" : "lose");
|
||||
pointsEl.textContent = "Punkte werden berechnet…";
|
||||
|
||||
overlay.classList.add("show");
|
||||
|
||||
if (data) updateResultWithPoints(data);
|
||||
}
|
||||
|
||||
function updateResultWithPoints(data) {
|
||||
const pointsEl = document.getElementById("result-points");
|
||||
const levelupEl = document.getElementById("result-levelup");
|
||||
const progressEl = document.getElementById("result-progress-wrap");
|
||||
const fillEl = document.getElementById("result-progress-fill");
|
||||
const lvlLbl = document.getElementById("result-level-label");
|
||||
const ptsLbl = document.getElementById("result-pts-label");
|
||||
|
||||
/* Overlay anzeigen falls noch nicht sichtbar */
|
||||
const overlay = document.getElementById("match-result-overlay");
|
||||
if (!overlay.classList.contains("show")) {
|
||||
document.getElementById("result-title").textContent = data.won ? "⚔️ SIEG!" : "💀 NIEDERLAGE";
|
||||
document.getElementById("result-title").className = "result-title " + (data.won ? "win" : "lose");
|
||||
overlay.classList.add("show");
|
||||
}
|
||||
|
||||
pointsEl.textContent = data.awarded > 0
|
||||
? "+" + data.awarded + " Arena-Punkte"
|
||||
: "Keine Punkte (Aufgabe zu früh oder Tageslimit erreicht)";
|
||||
|
||||
if (data.level_up) {
|
||||
levelupEl.style.display = "block";
|
||||
levelupEl.textContent = "⬆ LEVEL UP! → Level " + data.new_level;
|
||||
}
|
||||
|
||||
/* Fortschrittsbalken vom Server laden */
|
||||
fetch("/api/points/me")
|
||||
.then(r => r.json())
|
||||
.then(me => {
|
||||
progressEl.style.display = "block";
|
||||
lvlLbl.textContent = "Level " + me.current_level + (me.next_level ? " → " + me.next_level : " (MAX)");
|
||||
ptsLbl.textContent = me.points_this_level + " / " + me.points_for_next + " Pts";
|
||||
requestAnimationFrame(() => {
|
||||
fillEl.style.width = me.progress_percent + "%";
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/* ── Popup schließen ────────────────────────────────── */
|
||||
function closePopup() {
|
||||
if (window.parent && window.parent !== window) {
|
||||
window.parent.document.getElementById("arena-backdrop")?.remove();
|
||||
window.parent.document.getElementById("arena-popup")?.remove();
|
||||
} else {
|
||||
window.close();
|
||||
}
|
||||
});
|
||||
|
||||
function handleAufgeben() {
|
||||
// Funktion offen – hier kann später die Aufgabe-Logik rein
|
||||
socket.emit("player_surrender", { matchId, slot: mySlot });
|
||||
}
|
||||
// ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
// ── Avatar laden (lokal) ──────────────────────────────────────────────
|
||||
document.getElementById("result-close-btn").addEventListener("click", closePopup);
|
||||
|
||||
/* ── Avatar ─────────────────────────────────────────── */
|
||||
function loadAvatar(input, imgId, parentId) {
|
||||
const file = input.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const r = new FileReader();
|
||||
r.onload = (e) => {
|
||||
r.onload = e => {
|
||||
const img = document.getElementById(imgId);
|
||||
img.src = e.target.result;
|
||||
img.style.display = "block";
|
||||
|
||||
const parent = document.getElementById(parentId);
|
||||
const ph = parent.querySelector(".av-placeholder");
|
||||
if (ph) ph.style.display = "none";
|
||||
document.getElementById(parentId)?.querySelector(".av-placeholder")?.style.setProperty("display","none");
|
||||
};
|
||||
r.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function loadPortrait(input, imgId) {
|
||||
const file = input.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const r = new FileReader();
|
||||
r.onload = (e) => {
|
||||
const img = document.getElementById(imgId);
|
||||
img.src = e.target.result;
|
||||
img.style.display = "block";
|
||||
img.parentElement.querySelector("span").style.display = "none";
|
||||
};
|
||||
r.readAsDataURL(file);
|
||||
}
|
||||
// ── Event-Listener (kein inline-onclick wegen Helmet CSP) ─────────────
|
||||
document.getElementById("bereit-btn")
|
||||
?.addEventListener("click", handleBereit);
|
||||
|
||||
document.getElementById("aufgeben-btn")
|
||||
?.addEventListener("click", handleAufgeben);
|
||||
|
||||
document.getElementById("fileInputLeft")
|
||||
?.addEventListener("change", function () {
|
||||
loadAvatar(this, "avImgL", "avLeft");
|
||||
});
|
||||
|
||||
document.getElementById("fileInputRight")
|
||||
?.addEventListener("change", function () {
|
||||
loadAvatar(this, "avImgR", "avRight");
|
||||
});
|
||||
// ─────────────────────────────────────────────────────────────────────
|
||||
/* ── Event-Listener ─────────────────────────────────── */
|
||||
document.getElementById("bereit-btn") ?.addEventListener("click", handleBereit);
|
||||
document.getElementById("aufgeben-btn") ?.addEventListener("click", handleAufgeben);
|
||||
document.getElementById("fileInputLeft") ?.addEventListener("change", function() { loadAvatar(this,"avImgL","avLeft"); });
|
||||
document.getElementById("fileInputRight")?.addEventListener("change", function() { loadAvatar(this,"avImgR","avRight"); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user