// majorView.jsx - playoffs bracket view
const { useState: useStM } = React;
const PLAYOFF_TEAM_NAMES = {
my_team:'Meu Time',
lum2016:'Luminosity',
ast2018:'Astralis',
navi2021:'NAVI',
faze2022:'FaZe',
fnc2015:'fnatic',
spr2024:'Spirit',
sk2017:'SK',
vp2014:'Virtus.pro',
c92018:'Cloud9',
liq2019:'Liquid',
heroic2023:'HEROIC',
gambit2017:'Gambit',
vit2023:'Vitality',
g22023:'G2',
nip2013:'NiP',
envy2015:'EnVyUs',
navi2010:'NAVI 1.6',
mouz2024:'MOUZ',
furia2022:'FURIA',
outsiders2022:'Outsiders',
};
function MajorView({ bracket, myTeamId, onPlayMatch, stage }) {
const isMobile = window.useIsMobileView?.(820) || false;
const champion = bracket.final?.result
? (bracket.final.result.winner === 'A' ? bracket.final.teamA : bracket.final.teamB)
: null;
if (isMobile) {
return (
);
}
return (
Playoffs
Mata-mata do Major - quartas, semifinais e final em BO3
Playoff bracket
{stage === 'qf' ? 'Quartas' : stage === 'sf' ? 'Semifinais' : 'Final'}
{bracket.qf.map(match => (
onPlayMatch(match, 'qf')} />
))}
{bracket.sf.map(match => (
onPlayMatch(match, 'sf')} />
))}
onPlayMatch(bracket.final, 'final')} />
);
}
function MajorMobileView({ bracket, myTeamId, onPlayMatch, stage, champion }) {
const activeIndex = playoffStageIndex(stage);
const [selected, setSelected] = useStM(stage || 'qf');
React.useEffect(() => setSelected(stage || 'qf'), [stage]);
const stageMatches = selected === 'qf' ? bracket.qf
: selected === 'sf' ? bracket.sf
: selected === 'final' ? [bracket.final]
: [];
const myNext = findMyPlayableMatch(bracket, stage, myTeamId);
return (
Playoffs
Mata-mata do Major. Quartas, semis e final em BO3.
{[
['qf','Quartas'],
['sf','Semis'],
['final','Final'],
['champion','Campeao'],
].map(([id, label], index) => {
const active = selected === id;
const done = id === 'champion' ? !!champion : index < activeIndex;
return (
);
})}
{selected === 'champion' ? 'Campeao' : stageLabel(selected)}
{bracket.matchFormat || 'MR16'}
{selected === 'champion' ? (
) : (
stageMatches.map(match => (
onPlayMatch(match, selected)} />
))
)}
Bracket completo
{bracket.qf.map(match => (
onPlayMatch(match, 'qf')} />
))}
{bracket.sf.map(match => (
onPlayMatch(match, 'sf')} />
))}
onPlayMatch(bracket.final, 'final')} />
);
}
function MobilePlayoffHero({ bracket, myTeamId, stage, champion, myNext, onPlayMatch }) {
const stageText = stage === 'qf' ? 'Quartas' : stage === 'sf' ? 'Semifinais' : 'Final';
return (
Formato
{bracket.matchFormat || 'MR16'}
{champion ? (
{teamName(champion)}
campeão definido
) : myNext ? (
) : (
Aguardando os confrontos desta etapa.
)}
);
}
function MobileVersusTeam({ team, mine, right }) {
return (
{!right &&
}
{teamName(team)}
{team?.year || 'Mix'}
{right &&
}
Caminho até o título
{stages.map(([id, label, matches], index) => {
const match = matches.find(m => m.teamA?.id === myTeamId || m.teamB?.id === myTeamId);
const winner = getWinner(match);
const won = winner?.id === myTeamId;
const lost = match?.result && !won;
const opponent = match?.teamA?.id === myTeamId ? match.teamB : match?.teamB?.id === myTeamId ? match.teamA : null;
const active = index === activeIndex;
return (
{label}
{opponent ? `vs ${teamName(opponent)}` : 'aguardando'}
{won ? 'venceu' : lost ? 'caiu' : active ? 'agora' : '-'}
);
})}
{[
['qf','QUARTAS'],
['sf','SEMIS'],
['final','FINAL'],
].map(([id, label]) => {
const active = id === stage;
return (
{label}
);
})}
);
}
function BracketColumn({ title, subtitle, children, compact = false, finalCol = false }) {
return (
);
}
function ConnectorStack({ count, tall = false, champion = false }) {
return (
{Array.from({ length:count }).map((_, i) => (
))}
setHov(true)}
onMouseLeave={() => setHov(false)}
style={{ padding:10, minHeight:126,
background:isPlayable && hov ? 'rgba(30,88,58,0.96)' : 'rgba(7,34,24,0.78)',
border:`2px solid ${border}`, borderRadius:'var(--r-sm)',
cursor:isPlayable ? 'pointer' : 'default',
boxShadow:isPlayable ? '0 0 0 2px rgba(244,165,35,0.12)' : 'inset 0 0 24px rgba(0,0,0,0.16)',
transition:'background 140ms ease, border-color 140ms ease' }}>
{stageLabel(stage)} - BO{match.bo}
{isDone ? 'finalizado' : isPlayable ? 'sua partida' : isPending ? 'aguardando' : 'definido'}
{isPlayable && (
)}
?
Aguardando vencedor
);
}
const score = scoreForSide(match, side);
return (
{teamName(team)}
{isMyTeam && MEU}
{team.year || 'Mix'} · OVR {team.overall || '-'}
{score != null ? score : '-'}
);
}
function ChampionSlot({ champion, myTeamId }) {
return (
Campeão
{champion ? (
<>
{teamName(champion)}
) : (
Aguardando final
)}
);
}
function getWinner(match) {
if (!match?.result) return null;
return match.result.winner === 'A' ? match.teamA : match.teamB;
}
function scoreForSide(match, side) {
if (!match?.result) return null;
if (match.result.bo > 1) return side === 'A' ? match.result.wA : match.result.wB;
return side === 'A' ? match.result.scoreA : match.result.scoreB;
}
function stageLabel(stage) {
return stage === 'qf' ? 'Quartas' : stage === 'sf' ? 'Semifinal' : 'Final';
}
function teamName(team) {
if (!team) return 'Aguardando';
if (team.id === 'my_team') return team.name || 'Meu Time';
return PLAYOFF_TEAM_NAMES[team.id] || team.name || 'Time';
}
function TeamToken({ team, mine = false, current = false, size = 34 }) {
const color = team?.color || (mine ? 'var(--accent)' : '#8a9cb4');
const textColor = tokenTextColor(color);
return (
{initials(team?.name || 'T')}
);
}
function initials(name) {
const clean = String(name || 'T').replace(/[^a-z0-9\s]/gi, ' ').trim();
const parts = clean.split(/\s+/).filter(Boolean);
if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
return clean.slice(0, 2).toUpperCase() || 'T';
}
function tokenTextColor(color) {
const hex = String(color || '').trim();
if (!/^#[0-9a-f]{6}$/i.test(hex)) return '#f4ead8';
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
return luminance > 0.62 ? '#132019' : '#f4ead8';
}
window.MajorView = MajorView;