// freeBuilderView.jsx - free lineup lab for hypothetical rosters const BUILDER_ROLE_FILTERS = ['ALL','AWP','IGL','ENT','RIF','SUP','LRK']; const BUILDER_METRICS = [ ['AIM','aim'], ['ENT','entry'], ['CLU','clutch'], ['UTL','util'], ['AWP','awp'], ['IGL','igl'], ['CON','cons'], ]; function builderSlug(value) { return String(value || '') .toLowerCase() .normalize('NFD') .replace(/[\u0300-\u036f]/g, ''); } function builderTeamMap() { const map = new Map(); (window.DRAFT_TEAMS || []).forEach(team => map.set(team.id, team)); return map; } function builderAvg(players, key) { if (!players.length) return 0; return Math.round(players.reduce((sum, p) => sum + (p.s?.[key] || 0), 0) / players.length); } function builderRoleMetric(role) { return role === 'AWP' ? 'awp' : role === 'IGL' ? 'igl' : role === 'ENT' ? 'entry' : role === 'SUP' ? 'util' : role === 'LRK' ? 'clutch' : 'aim'; } function builderRoleFit(players) { if (!players.length) return 0; return Math.round(players.reduce((sum, p) => sum + (p.s?.[builderRoleMetric(p.role)] || 0), 0) / players.length); } function builderCounts(players, key) { const counts = {}; players.forEach(p => { counts[p[key]] = (counts[p[key]] || 0) + 1; }); return Object.entries(counts).sort((a, b) => b[1] - a[1]); } function builderProfile(players) { const roleCounts = {}; const slotCounts = {}; players.forEach(p => { roleCounts[p.role] = (roleCounts[p.role] || 0) + 1; const slot = window.getLineSlot(p); slotCounts[slot] = (slotCounts[slot] || 0) + 1; }); const line = window.getLineBreakdown(players); return { overall: line.strength, firepower: builderAvg(players, 'aim'), utility: Math.round((builderAvg(players, 'util') + builderAvg(players, 'igl')) / 2), clutch: builderAvg(players, 'clutch'), consistency: builderAvg(players, 'cons'), awp: builderAvg(players, 'awp'), roleFit: builderRoleFit(players), roleCounts, slotCounts, missing: line.missingSlots, duplicated: line.duplicateSlots, line, }; } function FreeBuilderView({ teamName = 'Meu Time', defaultMatchFormat = 'MR16', onComplete }) { const isMobile = window.useIsMobileView?.(820) || false; const [query, setQuery] = React.useState(''); const [roleFilter, setRoleFilter] = React.useState('ALL'); const [selected, setSelected] = React.useState([]); const [matchFormat, setMatchFormat] = React.useState(defaultMatchFormat || 'MR16'); const [focusedPlayerId, setFocusedPlayerId] = React.useState(null); const teamMap = React.useMemo(() => builderTeamMap(), []); const selectedIds = React.useMemo(() => new Set(selected.map(p => p.id)), [selected]); const selectedNames = React.useMemo(() => new Set(selected.map(p => builderSlug(p.name))), [selected]); const selectedProfile = React.useMemo(() => builderProfile(selected), [selected]); const formats = Object.values(window.MATCH_FORMATS || {}); const playerRows = React.useMemo(() => { return (window.PLAYERS || []).map(player => { const team = teamMap.get(player.team); const haystack = builderSlug([ player.name, player.role, player.era, player.country, team?.name, team?.year, team?.achievement, team?.region, ].filter(Boolean).join(' ')); return { player, team, haystack }; }); }, [teamMap]); const filteredPlayers = React.useMemo(() => { const q = builderSlug(query.trim()); return playerRows .filter(row => roleFilter === 'ALL' || row.player.role === roleFilter) .filter(row => !q || row.haystack.includes(q)) .sort((a, b) => { const aSelected = selectedIds.has(a.player.id) ? 1 : 0; const bSelected = selectedIds.has(b.player.id) ? 1 : 0; if (aSelected !== bSelected) return bSelected - aSelected; return b.player.overall - a.player.overall; }) .slice(0, query.trim() ? 60 : 36); }, [playerRows, query, roleFilter, selectedIds]); function togglePlayer(player) { if (selectedIds.has(player.id)) { setSelected(list => list.filter(p => p.id !== player.id)); return; } if (selectedNames.has(builderSlug(player.name))) return; if (selected.length >= 5) return; setSelected(list => [...list, player]); setFocusedPlayerId(player.id); window.setTimeout(() => setFocusedPlayerId(null), 520); } const canStart = selected.length === 5; const missingCore = selectedProfile.missing.length ? selectedProfile.missing.join(' / ') : 'estrutura completa'; function handleStartMajor() { if (!canStart) return; onComplete(selected, matchFormat); } return (

Laboratório de Lineup

Monte qualquer combinação de jogadores para testar cenários hipotéticos no mesmo Major.

{formats.map(fmt => { const active = matchFormat === fmt.id; return ( ); })}
togglePlayer(player)} onStart={handleStartMajor} />
setQuery(e.target.value)} placeholder="Buscar jogador, time, ano ou país" style={{ width:'100%', height:44, boxSizing:'border-box', background:'var(--bg-1)', border:'1px solid var(--border-2)', borderRadius:'var(--r-md)', color:'var(--text-1)', outline:'none', padding:'0 42px 0 14px', fontFamily:'var(--font-cond)', fontSize:16, fontWeight:800, letterSpacing:'0.02em' }} /> /
{BUILDER_ROLE_FILTERS.map(role => { const active = roleFilter === role; return ( ); })}
{filteredPlayers.length} resultados exibidos {selected.length}/5 selecionados
{filteredPlayers.map(({ player, team }, i) => ( = 5 || selectedNames.has(builderSlug(player.name)))} focused={focusedPlayerId === player.id} delay={i * 18} onToggle={() => togglePlayer(player)} /> ))}
); } function BuilderSelectedPanel({ teamName, selected, profile, canStart, missingCore, matchFormat, onRemove, onStart }) { const isMobile = window.useIsMobileView?.(820) || false; const countries = builderCounts(selected, 'country'); const eras = builderCounts(selected, 'era'); return ( ); } function BuilderMiniMetric({ label, value }) { const color = value >= 90 ? 'var(--accent)' : value >= 82 ? '#8a9cb4' : 'var(--text-3)'; return (
{label} {value || '--'}
); } function BuilderPlayerCard({ player, team, selected, duplicateName = false, disabled, focused, delay, onToggle }) { const [hover, setHover] = React.useState(false); const tier = window.TIER_META[player.tier] || window.TIER_META.GN; const active = selected || hover; const border = selected ? 'rgba(244,165,35,0.55)' : active ? `${tier.color}88` : 'var(--border-2)'; return (
setHover(true)} onMouseLeave={() => setHover(false)}>
); } window.FreeBuilderView = FreeBuilderView;