// swissView.jsx - Pick'Em-style Swiss stage board
const SWISS_FLOW = [
{
title:'STAGE I',
groups:[
{ label:'0X0', records:['0-0'], minSlots:10 },
],
},
{
title:'STAGE II',
groups:[
{ label:'1X0', records:['1-0'], minSlots:5 },
{ label:'0X1', records:['0-1'], minSlots:5 },
],
},
{
title:'STAGE III',
groups:[
{ label:'2X0', records:['2-0'], minSlots:3 },
{ label:'1X1', records:['1-1'], minSlots:5 },
{ label:'0X2', records:['0-2'], minSlots:3 },
],
},
{
title:'DECISIONS',
groups:[
{ label:'3X0 - CLASSIFICADAS', records:['3-0'], tone:'good', minSlots:2 },
{ label:'2X1', records:['2-1'], minSlots:3 },
{ label:'1X2', records:['1-2'], minSlots:3 },
{ label:'0X3 - ELIMINADAS', records:['0-3'], tone:'bad', minSlots:2 },
],
},
{
title:'FINAL',
groups:[
{ label:'3X1 E 3X2 - CLASSIFICADAS', records:['3-1','3-2'], tone:'good', minSlots:6 },
{ label:'2X2', records:['2-2'], minSlots:3 },
{ label:'1X3 E 2X3 - ELIMINADAS', records:['1-3','2-3'], tone:'bad', minSlots:4 },
],
},
];
const TEAM_SHORT_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 SwissView({ swiss, myTeamId, onPlayMatch, onAdvance }) {
const isMobile = window.useIsMobileView?.(820) || false;
const myTeam = swiss.teams.find(t => t.id === myTeamId);
const myRecord = recordOf(myTeam);
const boardSnapshots = React.useMemo(() => buildSwissBoardSnapshots(swiss), [swiss]);
const isQualified = (myTeam?.swiss?.wins || 0) >= 3;
const isEliminated = (myTeam?.swiss?.losses || 0) >= 3;
const activeCount = swiss.teams.filter(t => (t.swiss?.wins || 0) < 3 && (t.swiss?.losses || 0) < 3).length;
const qualifiedCount = swiss.teams.filter(t => (t.swiss?.wins || 0) >= 3).length;
const eliminatedCount = swiss.teams.filter(t => (t.swiss?.losses || 0) >= 3).length;
if (isMobile) {
return (
);
}
return (
Fase suíça
16 times - 3 vitórias classificam - 3 derrotas eliminam - jogos decisivos em BO3
{['STAGE I','STAGE II','STAGE III','PLAYOFFS'].map((label, i) => {
const active = i === Math.min(Math.max((swiss.round || 1) - 1, 0), 2);
return (
{label}
);
})}
Pick'Em - Fase suíça
Rodada {swiss.round} - {myRecord}
);
}
function SwissMobileView({ swiss, myTeamId, myTeam, myRecord, boardSnapshots,
isQualified, isEliminated, activeCount, qualifiedCount, eliminatedCount,
onPlayMatch, onAdvance }) {
const activeIndex = Math.min(Math.max((swiss.round || 1) - 1, 0), SWISS_FLOW.length - 1);
const [selectedIndex, setSelectedIndex] = React.useState(activeIndex);
const [isFullMapOpen, setIsFullMapOpen] = React.useState(false);
React.useEffect(() => setSelectedIndex(activeIndex), [activeIndex]);
const selected = SWISS_FLOW[selectedIndex] || SWISS_FLOW[0];
const currentIds = new Set([swiss.currentMatch?.teamA?.id, swiss.currentMatch?.teamB?.id].filter(Boolean));
return (
Fase suíça
3 vitórias classificam. 3 derrotas eliminam. Jogos decisivos em BO3.
{isQualified ? (
) : isEliminated ? (
) : (
)}
{SWISS_FLOW.map((col, index) => {
const active = selectedIndex === index;
const done = index < activeIndex;
return (
);
})}
{mobileSwissTitle(selected.title)}
rodada {swiss.round}
{selected.groups.map(group => {
const entries = entriesForGroup(swiss.teams, group, columnSnapshot(boardSnapshots, selectedIndex));
const mine = entries.some(entry => entry.team.id === myTeamId);
const active = entries.some(entry => currentIds.has(entry.team.id));
return (
);
})}
setIsFullMapOpen(event.currentTarget.open)}
style={{ marginBottom:12, background:'var(--bg-2)',
border:'1px solid var(--border-2)', borderRadius:'var(--r-lg)', overflow:'hidden' }}>
Mapa completo da fase
{isFullMapOpen && (
)}
);
}
function MobileSwissHero({ myTeam, myRecord, isQualified, isEliminated,
activeCount, qualifiedCount, eliminatedCount, matchFormat }) {
const recordColor = isQualified ? '#5aad5c' : isEliminated ? '#d46a6a' : 'var(--accent)';
return (
{myTeam?.name || 'Meu Time'}
{matchFormat || 'MR16'} - campanha suíça
);
}
function MobileMyPath({ snapshots, myTeamId, activeIndex }) {
const path = SWISS_FLOW.map((col, index) => {
const snap = columnSnapshot(snapshots, index);
return { title:mobileSwissTitle(col.title), record:snap?.[myTeamId] || '-' };
});
return (
Caminho do seu time
{path.map((step, index) => {
const active = index === activeIndex;
const passed = index < activeIndex;
return (
{step.record.replace('-', ':')}
{step.title}
);
})}
{group.label.replaceAll('X', '-')}
{entries.length} times nesta faixa
{mine && (
você
)}
{entries.map(entry => (
))}
{Array.from({ length:Math.min(emptySlots, entries.length ? 2 : 4) }).map((_, i) => (
))}
);
}
function mobileSwissTitle(title) {
return title === 'STAGE I' ? 'Stage I'
: title === 'STAGE II' ? 'Stage II'
: title === 'STAGE III' ? 'Stage III'
: title === 'DECISIONS' ? 'Decisao'
: 'Final';
}
function SwissFlowBoard({ swiss, myTeamId, snapshots }) {
return (
{SWISS_FLOW.map((col, index) => (
{col.title}
{col.groups.map(group => (
))}
{index < SWISS_FLOW.length - 1 && }
))}
{arrows.map((arrow, i) => (
{arrow}
))}
);
}
function SwissRecordGroup({ group, entries, myTeamId, currentMatch }) {
const tone = group.tone || 'neutral';
const good = tone === 'good';
const bad = tone === 'bad';
const containsMine = entries.some(entry => entry.team.id === myTeamId);
const currentIds = new Set([currentMatch?.teamA?.id, currentMatch?.teamB?.id].filter(Boolean));
const active = entries.some(entry => currentIds.has(entry.team.id));
const emptySlots = Math.max((group.minSlots || 0) - entries.length, 0);
const bg = good ? 'rgba(15,105,76,0.84)'
: bad ? 'rgba(104,28,47,0.84)'
: active ? 'rgba(21,76,52,0.92)'
: 'rgba(7,34,24,0.72)';
const border = containsMine ? 'rgba(244,165,35,0.78)'
: good ? 'rgba(28,190,111,0.38)'
: bad ? 'rgba(206,75,83,0.38)'
: 'rgba(94,151,111,0.20)';
return (
{group.label}
{entries.length}
{entries.map(entry => (
))}
{Array.from({ length:emptySlots }).map((_, i) => (
))}
);
}
function SwissProgressCard({ myTeam, myRecord, isQualified, isEliminated,
activeCount, qualifiedCount, eliminatedCount, matchFormat }) {
return (
{myTeam?.name || 'Meu Time'}
{matchFormat || 'MR16'} - campanha suíça
{myRecord}
);
}
function MiniCount({ label, value, tone }) {
const color = tone === 'good' ? '#5aad5c' : tone === 'bad' ? '#d46a6a' : 'var(--accent)';
return (
);
}
function SwissStatusCard({ title, body, tone, action, onAction }) {
const good = tone === 'good';
return (
{title}
{body}
{action && (
)}
);
}
function CurrentSwissMatch({ match, onPlayMatch }) {
if (!match) return null;
return (
Próxima partida
{match.record} - BO{match.bo}
);
}
function SwissHistory({ history, myTeamId }) {
return (
Rodadas resolvidas
{history.length === 0 ? (
A primeira rodada começa agora.
) : history.slice().reverse().map(round => (
Rodada {round.round}
{round.matches.slice(0, 4).map(m => {
const mine = m.teamAId === myTeamId || m.teamBId === myTeamId;
return (
{m.teamAName} vs {m.teamBName}{mine ? ' - você' : ''}
{m.score}
);
})}
))}
);
}
function SwissTeamLine({ team, mine }) {
return (
{team.name} {team.year || ''}
{team.achievement || team.era}
{recordOf(team)}
);
}
function TeamPill({ team, record, mine = false, current = false }) {
const displayRecord = record || recordOf(team);
return (
{teamName(team)}
{team?.year || 'Mix'} · OVR {team?.overall || '-'}
{displayRecord.replace('-', ':')}
);
}
function TeamToken({ team, record, mine = false, current = false, size = 34 }) {
const label = initials(team?.name || 'Meu Time');
const color = team?.color || (mine ? 'var(--accent)' : '#8a9cb4');
const textColor = tokenTextColor(color);
return (
{label}
);
}
function EmptyPill() {
return (
?
aguardando
);
}
function buildSwissBoardSnapshots(swiss) {
const records = {};
swiss.teams.forEach(team => { records[team.id] = '0-0'; });
const snapshots = [{ ...records }];
[...swiss.history].sort((a, b) => a.round - b.round).forEach(round => {
round.matches.forEach(match => {
const a = splitRecord(records[match.teamAId]);
const b = splitRecord(records[match.teamBId]);
if (match.winnerId === match.teamAId) {
records[match.teamAId] = `${a.w + 1}-${a.l}`;
records[match.teamBId] = `${b.w}-${b.l + 1}`;
} else {
records[match.teamAId] = `${a.w}-${a.l + 1}`;
records[match.teamBId] = `${b.w + 1}-${b.l}`;
}
});
snapshots.push({ ...records });
});
return snapshots;
}
function columnSnapshot(snapshots, columnIndex) {
if (columnIndex < 4) return snapshots[columnIndex] || null;
if (snapshots.length <= 4) return snapshots[4] || null;
return snapshots[snapshots.length - 1] || null;
}
function entriesForGroup(teams, group, snapshot) {
if (!snapshot) return [];
const recordSet = new Set(group.records);
return teams
.map(team => ({ team, record:snapshot[team.id] }))
.filter(entry => recordSet.has(entry.record))
.sort((a, b) => sortSwissEntries(a, b));
}
function sortSwissEntries(a, b) {
const ar = splitRecord(a.record);
const br = splitRecord(b.record);
if (br.w !== ar.w) return br.w - ar.w;
if (ar.l !== br.l) return ar.l - br.l;
return (a.team.swiss?.seedRank || 99) - (b.team.swiss?.seedRank || 99);
}
function sortSwissTeams(a, b) {
const aw = a.swiss?.wins || 0;
const bw = b.swiss?.wins || 0;
const al = a.swiss?.losses || 0;
const bl = b.swiss?.losses || 0;
if (bw !== aw) return bw - aw;
if (al !== bl) return al - bl;
return (a.swiss?.seedRank || 99) - (b.swiss?.seedRank || 99);
}
function recordOf(team) {
return `${team?.swiss?.wins || 0}-${team?.swiss?.losses || 0}`;
}
function splitRecord(record) {
const [w, l] = String(record || '0-0').split('-').map(n => parseInt(n, 10) || 0);
return { w, l };
}
function teamName(team) {
if (!team) return 'Aguardando';
if (team.id === 'my_team') return team.name || 'Meu Time';
return TEAM_SHORT_NAMES[team.id] || team.name || 'Time';
}
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.SwissView = SwissView;