diff --git a/css/analysis.css b/css/analysis.css index 7ad6076..351296c 100644 --- a/css/analysis.css +++ b/css/analysis.css @@ -20,6 +20,17 @@ .player-card:hover { border-color: var(--borderem); } .player-card.player-hidden { opacity: 0.35; border-style: dashed; } +.player-card--ref { border-color: rgba(100, 160, 255, 0.35); } +.player-card--ref:hover { border-color: rgba(100, 160, 255, 0.7); } + +.ref-player-label { + font-size: 11px; + color: var(--t3); + text-transform: uppercase; + letter-spacing: 0.06em; + margin: 10px 0 6px; +} + .player-job-icon { width: 28px; height: 28px; diff --git a/js/analysis.js b/js/analysis.js index 9a5ba35..5dfe911 100644 --- a/js/analysis.js +++ b/js/analysis.js @@ -85,12 +85,15 @@ let phaseFilter = { startTime: 0, endTime: Infinity }; let refEvents = []; let refFightStart = 0; + let refPlayers = []; + let currentPlayers = []; let extFights = []; let extReportCode = ''; // ── Player grid ────────────────────────────────────────────────────────── function renderPlayers(players) { + currentPlayers = players; const grid = document.getElementById('player-grid'); const order = { healer: 0, dps: 1, tank: 2 }; players.sort((a, b) => { @@ -112,6 +115,53 @@ `).join(''); } + function renderRefPlayers() { + const section = document.getElementById('ref-player-section'); + const grid = document.getElementById('ref-player-grid'); + + if (!refPlayers.length) { section.style.display = 'none'; return; } + + const currentNames = new Set(currentPlayers.map(p => p.name)); + if (!refPlayers.some(p => !currentNames.has(p.name))) { + section.style.display = 'none'; + return; + } + + const order = { healer: 0, dps: 1, tank: 2 }; + const sorted = [...refPlayers].sort((a, b) => { + const roleCmp = (order[a.role] ?? 2) - (order[b.role] ?? 2); + return roleCmp !== 0 ? roleCmp : a.name.localeCompare(b.name); + }); + + sorted.filter(p => p.role === 'tank').forEach(p => hiddenPlayerNames.add(p.name)); + + grid.innerHTML = sorted.map(p => ` +