/* eslint-disable */
// ─────────────────────────────────────────────────────────────
// searchgg · 전적검색(프로필) 섹션 컴포넌트
// 요약 헤더 / 시즌별 랭크전 / 클랜전 / 맵별 / 최근 동향 / 매치 기록 / 자주 함께한 유저
// 전역(window): Panel, Seg, RankBadge, WinRing, Icon, KdaChip, wrColor, SA
// ─────────────────────────────────────────────────────────────
const PSCH = "'Chakra Petch',sans-serif";
const PSPT = '#48515f';
const psTh = (a) => ({ fontSize: 11, fontWeight: 700, color: 'var(--t3)', padding: '10px 14px', textAlign: a, whiteSpace: 'nowrap', letterSpacing: '.2px' });
const psTd = { fontSize: 13, color: '#33373d', padding: '11px 14px', whiteSpace: 'nowrap', verticalAlign: 'middle' };
const psSmall = { fontSize: 11, color: 'var(--t3)', fontWeight: 600 };
function tierColor(name) { const t = (window.SA.tiers || []).find((x) => x.name === name); return t ? t.color : PSPT; }
function recStr(d) { return `${d.matches}전 ${d.w}승 ${d.l}패`; }
function WrCell({ wr, w = 46 }) {
const fill = Math.max(0.04, Math.min(1, (wr - 35) / (80 - 35)));
const col = wrColor(wr);
return (
{wr}%
);
}
function TierChipS({ name, div }) {
const col = tierColor(name);
return (
{name}{div ? ' ' + div : ''}
);
}
// ── 요약 헤더 ──
function ProfileSummary({ p }) {
const SA = window.SA;
const accent = p.rank.color;
const [scope, setScope] = React.useState('통합');
const selRank = scope === '통합' ? p.rankTotal : p.rankSeason;
const selRankNo = scope === '통합' ? p.rankNoTotal : p.rankNoSeason;
const stats = [
['승률', p.wr + '%', wrColor(p.wr)],
['킬뎃', SA.kdPct(p.kda) + '%', PSPT],
['헤드샷', p.hs + '%', 'var(--ink)'],
['라이플', p.rifle + '%', 'var(--ink)'],
['스나', p.sniper + '%', 'var(--ink)'],
['특수', p.special + '%', 'var(--ink)'],
['랭킹', SA.fmt(selRankNo) + '위', PSPT],
['매너', p.manner + '점', 'var(--ink)'],
['접속률', p.connRate + '%', 'var(--ink)'],
];
return (
{selRank.name}
{scope} 계급
{p.name}
{p.clan && {p.clan}}
{stats.map(([lab, val, col], i) => (
))}
);
}
// ── 시즌별 랭크전 전적 (시즌 선택 · 솔로/파티) ──
function RankedSeasons({ p }) {
const seasons = p.rankedSeasons;
const [sel, setSel] = React.useState(seasons[0].season);
const isAll = sel === '통산';
const cur = seasons.find((s) => s.season === sel) || seasons[0];
const agg = (key) => {
let M = 0, W = 0, L = 0, kdW = 0, hsW = 0;
seasons.forEach((s) => { const d = s[key]; M += d.matches; W += d.w; L += d.l; kdW += d.kd * d.matches; hsW += d.hs * d.matches; });
return { matches: M, w: W, l: L, wr: M ? Math.round(W / M * 100) : 0, kd: M ? Math.round(kdW / M) : 0, hs: M ? Math.round(hsW / M) : 0, tier: null };
};
const rows = [['솔로', isAll ? agg('solo') : cur.solo], ['파티', isAll ? agg('party') : cur.party]];
const sel2 = (
);
return (
| 구분 | 티어 | 티어 점수 |
매치 | 전적 |
승률 | 킬뎃 |
{rows.map(([label, d], i) => (
| {label} 랭크전 |
{isAll ? — : } |
{isAll ? — : {window.SA.fmt(d.points)} 점} |
{d.matches} |
{recStr(d)} |
|
{d.kd}% |
))}
);
}
// ── 클랜전 전적 (소속 클랜별) ──
function ClanRecords({ p }) {
const [open, setOpen] = React.useState(-1);
const [showAll, setShowAll] = React.useState(false);
const all = p.clanRecords;
const CAP = 4;
const list = showAll ? all : all.slice(0, CAP);
return (
소속 클랜별 · 클릭 시 활동 기간} bodyPad="0">
| 클랜 |
매치 | 전적 |
승률 | 킬뎃 |
{list.map((c, i) => {
const isOpen = open === i;
return (
setOpen(isOpen ? -1 : i)} style={{ borderBottom: '1px solid #eaecef', background: isOpen ? '#f1f3f5' : (i % 2 ? '#fff' : '#fbfbfc'), cursor: 'pointer' }}>
|
{c.tag}
{c.clan}
{i === 0 && 현재}
가입 {c.periods.length}회
|
{c.matches} |
{recStr(c)} |
|
{c.kd}% |
{isOpen && (
|
활동 기간 · {c.periods.length}회 가입
{c.periods.map((pd, j) => (
{c.periods.length - j}차
{pd.from} ~ {pd.to}
약 {pd.months}개월
))}
|
)}
);
})}
{all.length > CAP && (
)}
);
}
// ── 최근 동향 추세 그래프 (승률 / 킬뎃 시계열) ──
function TrendChart({ p }) {
const [period, setPeriod] = React.useState('주별');
const data = period === '일별' ? p.trend.daily : p.trend.weekly;
const W = 720, H = 250, padL = 38, padR = 16, padT = 18, padB = 34;
const iw = W - padL - padR, ih = H - padT - padB;
const n = data.length;
const x = (i) => padL + (n === 1 ? iw / 2 : (i / (n - 1)) * iw);
const y = (v) => padT + (1 - (v - 20) / (90 - 20)) * ih;
const path = (key) => data.map((d, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)} ${y(d[key]).toFixed(1)}`).join(' ');
const area = (key) => `${path(key)} L${x(n - 1).toFixed(1)} ${(padT + ih).toFixed(1)} L${x(0).toFixed(1)} ${(padT + ih).toFixed(1)} Z`;
const WR = '#2f6fed', KD = PSPT;
const grid = [20, 40, 60, 80];
const last = data[n - 1];
const first = data[0];
const delta = (key) => last[key] - first[key];
const dchip = (label, key, col) => {
const dv = delta(key);
return (
{label}
{last[key]}%
= 0 ? '#16a34a' : '#e5484d' }}>
{dv >= 0 ? '▲' : '▼'}{Math.abs(dv)}
);
};
const labelStep = Math.ceil(n / 8);
return (
} bodyPad="14px 16px 16px">
{dchip('승률', 'wr', WR)}
{dchip('킬뎃', 'kd', KD)}
{period === '일별' ? '최근 14일' : '최근 10주'} 추이
);
}
// ── 맵별 전적 ──
function MapRecords({ p }) {
const [showAll, setShowAll] = React.useState(false);
const all = p.mapRecords;
const CAP = 8;
const list = showAll ? all : all.slice(0, CAP);
return (
매치 많은 순 · {all.length}개 맵} bodyPad="0">
| # |
맵 |
매치 | 전적 |
승률 | 킬뎃 |
{list.map((m, i) => (
| {i + 1} |
{m.name} |
{m.matches} |
{recStr(m)} |
|
{m.kd}% |
))}
{all.length > CAP && (
)}
);
}
// ── 매치 기록 ──
function TeamTable({ result, color, players }) {
return (
{result}
5명
| 플레이어 |
K / D / A |
킬뎃 |
헤드샷 |
데미지 |
{players.map((pl, j) => {
const pct = Math.round(pl.k / (pl.k + pl.d) * 100);
return (
|
{pl.isOwner && ME}{pl.name}
|
{pl.k}
/
{pl.d}
/
{pl.a}
|
{pct}% |
{pl.hs}% |
{window.SA.fmt(pl.dmg)} |
);
})}
);
}
function MatchRow({ m, i, last }) {
const [open, setOpen] = React.useState(false);
const pct = Math.round(m.k / (m.k + m.d) * 100);
const winTeam = m.winSide === 'blue' ? m.teams.blue : m.teams.red;
const loseTeam = m.winSide === 'blue' ? m.teams.red : m.teams.blue;
return (
setOpen(!open)} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '11px 16px', cursor: 'pointer',
borderLeft: `3px solid ${m.win ? PSPT : '#e5484d'}`, background: open ? '#f7f8f9' : 'transparent' }}>
{m.win ? '승' : '패'}
킬뎃 {pct}%
{m.ago}
{open && (
)}
);
}
function MatchHistory({ p }) {
const TABS = ['전체', '클랜전', '솔로 랭크전', '파티 랭크전', '클랜 랭크전', '토너먼트'];
const [tab, setTab] = React.useState('전체');
React.useEffect(() => setTab('전체'), [p.name]);
const ms = tab === '전체' ? p.matches : p.matches.filter((m) => m.mode === tab);
const w = ms.filter((m) => m.win).length;
return (
{ms.length ? `최근 ${ms.length}전 · ${w}승 ${ms.length - w}패 · 클릭 시 상세` : '클릭 시 상세'}} bodyPad="0">
{/* 모드 서브탭 (가로 스크롤) */}
{TABS.map((t) => {
const on = tab === t;
return (
);
})}
{ms.map((m, i) => (
))}
{ms.length === 0 && (
해당 모드의 최근 매치가 없어요.
)}
);
}
// ── 최근 전적 및 동향 ──
function RecentTrend({ p }) {
const recent = p.matches.slice(0, 12);
const wins = recent.filter((m) => m.win).length;
const losses = recent.length - wins;
const wr = Math.round(wins / recent.length * 100);
const avgKd = Math.round(recent.reduce((a, m) => a + m.k / (m.k + m.d) * 100, 0) / recent.length);
return (
최근 {recent.length}전 {wins}승 {losses}패
{recent.slice().reverse().map((m, i) => (
{m.win ? '승' : '패'}
))}
← 최신 경기 흐름
);
}
// ── 자주 함께한 유저 ──
function Companions({ p, onPick }) {
const SA = window.SA;
return (
{SA.friends.slice(0, 4).map((f) => (
))}
);
}
// ── 모드별 전적 ──
function ModeRecords({ p }) {
return (
| 모드 |
매치 | 전적 |
승률 | 킬뎃 |
{p.modeRecords.map((m, i) => (
| {m.name} |
{m.matches} |
{recStr(m)} |
|
{m.kd}% |
))}
);
}
Object.assign(window, { ProfileSummary, RankedSeasons, ClanRecords, MapRecords, ModeRecords, MatchHistory, RecentTrend, Companions, TrendChart });