// draftView.jsx — sorteio (cards ricos) + formação por posições const { useState: useSt } = React; const SLOT_ORDER = ['IGL','AWP','ENT','SUP','FLEX']; // Posições no "campo" tático (% do quadro) const FORMATION = { IGL: { x: 50, y: 20, label: 'In-Game Leader' }, AWP: { x: 19, y: 42, label: 'AWPer' }, SUP: { x: 81, y: 42, label: 'Support' }, ENT: { x: 31, y: 73, label: 'Entry Fragger' }, FLEX: { x: 50, y: 82, label: 'Rifler / Lurker' }, }; const ATTRS = [ ['AIM','aim'], ['ENT','entry'], ['CLU','clutch'], ['UTL','util'], ['MOV','move'], ['AWP','awp'], ['IGL','igl'], ['CON','cons'], ]; function makeDraftRerollRand(seed) { let s = (seed ^ 0x9E3779B9) >>> 0; return () => { s = (Math.imul(1664525, s) + 1013904223) >>> 0; return s / 0x100000000; }; } function rolePrimaryMetric(role) { return role === 'AWP' ? 'awp' : role === 'IGL' ? 'igl' : role === 'ENT' ? 'entry' : role === 'SUP' ? 'util' : role === 'LRK' ? 'clutch' : 'aim'; } function avgMetric(players, key) { if (!players.length) return 0; return Math.round(players.reduce((sum, p) => sum + p.s[key], 0) / players.length); } function avgRoleFit(players) { if (!players.length) return 0; return Math.round(players.reduce((sum, p) => sum + p.s[rolePrimaryMetric(p.role)], 0) / players.length); } function countrySummary(players) { const counts = {}; players.forEach(p => { counts[p.country] = (counts[p.country] || 0) + 1; }); return Object.entries(counts).sort((a, b) => b[1] - a[1]); } function eraSummary(players) { const counts = {}; players.forEach(p => { counts[p.era] = (counts[p.era] || 0) + 1; }); return Object.entries(counts).sort((a, b) => b[1] - a[1]); } function styleProfile(players) { const firepower = avgMetric(players, 'aim'); const aggression = avgMetric(players, 'entry'); const utility = avgMetric(players, 'util'); const clutch = avgMetric(players, 'clutch'); const consistency = avgMetric(players, 'cons'); const awp = avgMetric(players, 'awp'); const igl = avgMetric(players, 'igl'); const roleFit = avgRoleFit(players); const spread = Math.max(firepower, utility, clutch, consistency, roleFit) - Math.min(firepower, utility, clutch, consistency, roleFit); const tags = []; tags.push(spread <= 12 ? 'Equilibrado' : aggression >= 84 ? 'Pressão alta' : 'Ritmo controlado'); tags.push(firepower >= 84 ? 'Rifles como base' : awp >= 84 ? 'AWP como eixo' : 'Apoio como base'); tags.push(utility >= 84 || igl >= 84 ? 'Base tática' : 'Sistema reativo'); tags.push(clutch >= 88 ? 'Clutch forte' : 'Clutch médio'); return { firepower, aggression, utility, clutch, consistency, awp, igl, roleFit, tags }; } function teamOverallBreakdown(players) { const line = window.getLineBreakdown(players); const overall = line.strength; const style = styleProfile(players); return { overall, line, style, metrics: [ { label:'Base individual', value:line.baseOverall, detail:'média simples antes dos ajustes de slot, química e estrelas' }, { label:'Firepower', value:style.firepower, detail:'média de AIM; define duelo seco e troca direta' }, { label:'Encaixe de slot', value:line.roleFit, detail:'métrica principal de cada função escolhida' }, { label:'Estrutura', value:line.tactical, detail:'granadas, IGL e suporte para sustentar rounds longos' }, { label:'Clutch', value:style.clutch, detail:'capacidade de converter round quebrado' }, { label:'Consistência', value:style.consistency, detail:'reduz mapas apagados e mortes em sequência' }, { label:'AWP', value:style.awp, detail:'peso do impacto com sniper no mapa' }, ], }; } // ── Rich draft card ────────────────────────────────────────────────────────── function DraftCard({ player, state, onRecruit, hideRatings = false, compact = false, blockLabel = 'SLOT OCUPADO' }) { const [hov, setHov] = useSt(false); const isBlocked = state === 'blocked'; const isRecruited = state === 'recruited'; const canClick = state === 'available'; const tier = window.TIER_META[player.tier] || window.TIER_META.GN; const border = isRecruited ? 'rgba(244,165,35,0.55)' : hov && canClick ? (hideRatings ? 'var(--border-3)' : tier.color) : 'var(--border-2)'; const bg = isRecruited ? 'rgba(244,165,35,0.06)' : hov && canClick ? 'var(--bg-3)' : 'var(--bg-2)'; if (compact) { const roleColor = window.ROLE_META[player.role]?.color || 'var(--accent)'; const topStats = [ ['AIM', player.s.aim], ['CLT', player.s.clutch], player.role === 'AWP' ? ['AWP', player.s.awp] : ['UTL', player.s.util], ]; return (
canClick && onRecruit(player)} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ position:'relative', minHeight:58, background:bg, border:`1px solid ${border}`, borderRadius:'var(--r-md)', overflow:'hidden', cursor: canClick ? 'pointer' : 'default', opacity: isBlocked ? 0.36 : 1, transform: hov && canClick ? 'translateX(2px)' : 'none', transition:'all 140ms ease', userSelect:'none', display:'grid', gridTemplateColumns:'3px minmax(0,1fr) auto', alignItems:'stretch' }}> {isBlocked && (
{blockLabel}
)}
{player.name} {player.era}
{hideRatings ? ( <> Scout {window.ROLES[player.role] || player.role} - {player.country} ) : ( topStats.map(([label, value]) => ( {label} = 90 ? 'var(--accent)' : 'var(--text-2)' }}>{value} )) )}
{!hideRatings && ( {player.overall} )} {isRecruited ? 'OK' : canClick ? 'Pick' : '-'}
); } return (
canClick && onRecruit(player)} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ position:'relative', background:bg, border:`1px solid ${border}`, borderRadius:'var(--r-lg)', overflow:'hidden', cursor: canClick ? 'pointer' : 'default', opacity: isBlocked ? 0.34 : 1, transform: hov && canClick ? 'translateY(-3px)' : 'none', transition:'all 160ms ease', userSelect:'none', display:'flex', flexDirection:'column' }}> {/* Tier strip is neutral in Scout mode so rank is not leaked. */}
{isBlocked && (
{blockLabel}
)} {/* Header */}
{hideRatings ? 'SCOUT' : player.overall} {hideRatings ? 'sem overall' : 'Overall'}
{!hideRatings && }
{/* Name */}
{player.name}
{player.era}
{hideRatings ? (
{[ ['Time', player.team], ['Função', window.ROLES[player.role] || player.role], ['Era', player.era], ['País', player.country], ].map(([label, value]) => (
{label} {value}
))}
) : (
{ATTRS.map(([label, key]) => { const v = player.s[key]; const pct = Math.round((v / 99) * 100); const c = v >= 90 ? 'var(--accent)' : v >= 78 ? '#8a9cb4' : 'var(--text-3)'; return (
{label}
{v}
); })}
)} {/* Recruit CTA */}
{isRecruited ? '✓ Recrutado' : canClick ? 'Recrutar' : '—'}
); } // ── Formation board ─────────────────────────────────────────────────────────── function FormationBoard({ players, overall, hideRatings = false, summary = false }) { const eras = [...new Set(players.map(p => p.era))]; const isMobile = window.useIsMobileView?.(760) || false; return (
{/* Header */}
Sua Line {players.length}/5 {eras.length > 0 && (
{eras.map(e => ( {e} ))}
)}
{hideRatings ? 'Scout' : 'Overall'} 0 ? 'var(--accent)' : 'var(--text-3)', lineHeight:1 }}> {hideRatings ? '??' : (overall || '—')}
{/* Pitch */}
{/* center divider */}
{SLOT_ORDER.map(slot => { const pos = FORMATION[slot]; const player = players.find(p => window.getLineSlot(p) === slot); return ; })}
); } function PositionNode({ slot, pos, player, hideRatings = false, summary = false, mobile = false }) { const meta = window.ROLE_META[slot] || { color:'var(--text-3)', label:slot }; const filled = !!player; return (
{filled ? (
{hideRatings ? '??' : player.overall}
{player.name}
) : (
{meta.label}
{pos.label}
)}
); } // ── Draft view ──────────────────────────────────────────────────────────────── function MetricRow({ label, value, detail }) { const color = value >= 90 ? 'var(--accent)' : value >= 82 ? '#8a9cb4' : 'var(--text-3)'; return (
{label}
{detail}
{value}
); } function SummaryStatCell({ label, value }) { return (
= 90 ? 'var(--accent)' : 'var(--text-2)', lineHeight:1 }}> {value}
{label}
); } function DraftSummaryView({ players, onStartMajor, teamName = 'Meu Time' }) { const isMobile = window.useIsMobileView?.(760) || false; const breakdown = teamOverallBreakdown(players); const countries = countrySummary(players); const eras = eraSummary(players); const overall = breakdown.overall; function handleStartMajor() { onStartMajor(); } return (

Elenco fechado

{teamName} - revise o rating do time antes de entrar no Major.

Lineup OVR - AIM - ROLE - UTL - CON
{players.map((p, i) => (
{p.name}
{[ ['OVR', p.overall], ['AIM', p.s.aim], ['ROLE', p.s[rolePrimaryMetric(p.role)]], ['UTL', p.s.util], ['CON', p.s.cons], ].map(([label, value]) => ( ))}
))}
); } function RerollControls({ currentTeam, rerollsLeft, maxRerolls, disabled, sameYearAvailable, otherYearAvailable, onReroll }) { const isMobile = window.useIsMobileView?.(760) || false; return (
Reroll de sorteio
{rerollsLeft}/{maxRerolls} restantes · ano atual: {currentTeam.year}
onReroll('same-year')} /> onReroll('other-year')} />
); } function RerollButton({ label, hint, disabled, onClick }) { const [hov, setHov] = useSt(false); const isMobile = window.useIsMobileView?.(760) || false; return ( ); } function DiceIcon({ active }) { const dot = (x, y) => ( ); return ( {dot(4,4)} {dot(13,4)} {dot(8.5,8.5)} {dot(4,13)} {dot(13,13)} ); } function DraftView({ session, onDraftComplete, draftMode = 'scout', defaultMatchFormat = 'MR16', onSummaryStateChange, teamName = 'Meu Time' }) { const isMobile = window.useIsMobileView?.(760) || false; const [round, setRound] = useSt(0); const [drawTeams, setDrawTeams] = useSt(() => session.teams); const [myPlayers, setMyPlayers] = useSt([]); const [slotsTaken, setSlotsTaken] = useSt({}); const [picked, setPicked] = useSt(null); const [animating, setAnimating] = useSt(false); const [complete, setComplete] = useSt(false); const [matchFormat, setMatchFormat] = useSt(defaultMatchFormat || 'MR16'); const [rerollsLeft, setRerollsLeft] = useSt(draftMode === 'scout' ? 1 : 3); const hideRatings = draftMode === 'scout'; React.useEffect(() => { if (!onSummaryStateChange) return; onSummaryStateChange(complete && myPlayers.length === 5); return () => onSummaryStateChange(false); }, [complete, myPlayers.length, onSummaryStateChange]); React.useEffect(() => { window.scrollToTopOnMobile?.(); }, [round, complete]); const currentTeam = drawTeams[round]; const teamPlayers = window.getTeamPlayers(currentTeam.id); const starPlayer = teamPlayers.find(p => p.id === currentTeam.starPlayerId); const iconPlayer = teamPlayers.find(p => p.id === currentTeam.iconPlayerId); const starCount = myPlayers.filter(p => p.overall >= window.DRAFT_STAR_THRESHOLD).length; function isSlotTaken(player) { return !!slotsTaken[window.getLineSlot(player)]; } function isStarSoftBlocked(player, candidates = teamPlayers) { if (player.overall < window.DRAFT_STAR_THRESHOLD || starCount < window.DRAFT_STAR_CAP) return false; return candidates.some(candidate => !isSlotTaken(candidate) && candidate.overall < window.DRAFT_STAR_THRESHOLD ); } function canRecruitPlayer(player, candidates = teamPlayers) { return !isSlotTaken(player) && !isStarSoftBlocked(player, candidates); } function blockReason(player) { if (isSlotTaken(player)) return 'SLOT OCUPADO'; if (isStarSoftBlocked(player)) return 'LIMITE DE ESTRELAS'; return 'BLOQUEADO'; } const hasAvailable = teamPlayers.some(p => canRecruitPlayer(p)); const teamOverall = window.calcTeamOverall(teamPlayers); function handleRecruit(player) { if (!canRecruitPlayer(player) || animating) return; setPicked(player); setAnimating(true); setTimeout(() => { const next = [...myPlayers, player]; setMyPlayers(next); setSlotsTaken({ ...slotsTaken, [window.getLineSlot(player)]: true }); setPicked(null); setAnimating(false); if (next.length === 5) { setComplete(true); } else if (round < drawTeams.length - 1) { setRound(r => r + 1); } }, 460); } function handleSkip() { if (round < drawTeams.length - 1) setRound(r => r + 1); } function rerollCandidates(mode) { const blockedIds = new Set(drawTeams.map(t => t.id)); blockedIds.delete(currentTeam.id); myPlayers.forEach(p => blockedIds.add(p.team)); const pool = session.opponentTeams?.length ? session.opponentTeams : window.DRAFT_TEAMS; const bandPool = currentTeam.draftBand ? pool.filter(t => t.draftBand === currentTeam.draftBand) : pool; const scopedPool = bandPool.length ? bandPool : pool; return scopedPool .filter(t => t.id !== currentTeam.id) .filter(t => !blockedIds.has(t.id)) .filter(t => mode === 'same-year' ? t.year === currentTeam.year : t.year !== currentTeam.year) .filter(t => { const players = window.getTeamPlayers(t.id); return players.some(p => canRecruitPlayer(p, players)); }); } function handleReroll(mode) { if (rerollsLeft <= 0 || animating || picked) return; const candidates = rerollCandidates(mode); if (!candidates.length) return; const seed = (Date.now() + round * 997 + rerollsLeft * 131 + (mode === 'same-year' ? 17 : 41)) % 0xFFFFFF; const nextTeam = candidates[Math.floor(makeDraftRerollRand(seed)() * candidates.length)]; setDrawTeams(teams => teams.map((team, i) => i === round ? nextTeam : team)); setRerollsLeft(n => Math.max(0, n - 1)); } const myOverall = myPlayers.length > 0 ? window.calcTeamOverall(myPlayers) : 0; if (complete && myPlayers.length === 5) { return onDraftComplete(myPlayers, matchFormat)} />; } return (
{/* Top bar */}

Sorteio · Recrutamento

Um lineup histórico por vez - recrute 1 jogador para cada slot da line

{drawTeams.map((_, i) => (
))} {round + 1}/{drawTeams.length}
{/* Team draw header */}
Sorteado
{currentTeam.name} '{String(currentTeam.year).slice(2)} {currentTeam.region.replace(/^\S+\s*/, '')} · {currentTeam.achievement}
{hideRatings ? '??' : teamOverall}
{hideRatings ? 'scout' : 'overall'}
{!isMobile && !hideRatings && (starPlayer || iconPlayer) && (
{starPlayer && ( Estrela: {starPlayer.name} )} {iconPlayer && ( Ícone: {iconPlayer.name} )}
)} 0} otherYearAvailable={rerollCandidates('other-year').length > 0} onReroll={handleReroll} /> {/* All-blocked notice */} {!hasAvailable && (
Todos os slots válidos deste lineup estão ocupados ou travados pelo limite de estrelas. {round < drawTeams.length - 1 && ( )}
)} {/* Player cards */}
{teamPlayers.map((p, i) => (
))}
{/* Formation board */}
); } window.DraftView = DraftView;