);
}
// Chemistry line overlay
function ChemistryLines({ formation, picks, pitchWidth, pitchHeight }) {
const posById = {};
formation.positions.forEach(p => { posById[p.id] = p; });
return (
);
}
function PitchView({ year, formationKey, picks, activePos, onPosClick, onSwap, onBack, onFinish }) {
const T = window.T;
const f = FORMATIONS[formationKey];
const filled = Object.keys(picks).length;
const PITCH_W = 353, PITCH_H = 460;
const pitchRef = React.useRef(null);
const [drag, setDrag] = React.useState(null);
// drag = { fromId, startX, startY, x, y, longPressTimer, moved, suppressTap }
const dragRef = React.useRef(null);
const [hoverSlotId, setHoverSlotId] = React.useState(null);
// swapPair = { aId, bId } — triggers the scale-down/up animation for both
const [swapPair, setSwapPair] = React.useState(null);
const LONG_PRESS_MS = 220;
const MOVE_TOLERANCE = 6; // pixels before long-press is cancelled
const slotById = React.useMemo(() => {
const map = {};
f.positions.forEach(p => { map[p.id] = p; });
return map;
}, [f]);
const getPitchPoint = (clientX, clientY) => {
const rect = pitchRef.current?.getBoundingClientRect();
if (!rect) return { x: clientX, y: clientY };
return { x: clientX - rect.left, y: clientY - rect.top, rect };
};
// Find which filled slot the pointer is currently over
const findSlotAtPoint = (clientX, clientY) => {
const rect = pitchRef.current?.getBoundingClientRect();
if (!rect) return null;
const localX = clientX - rect.left;
const localY = clientY - rect.top;
let closest = null;
let closestDist = Infinity;
for (const slot of f.positions) {
if (!picks[slot.id]) continue;
const sx = (slot.x / 100) * rect.width;
const sy = (slot.y / 100) * rect.height;
const dx = localX - sx;
const dy = localY - sy;
const dist = Math.sqrt(dx*dx + dy*dy);
if (dist < 40 && dist < closestDist) {
closest = slot;
closestDist = dist;
}
}
return closest;
};
const clientXY = (e) => {
if (e.touches && e.touches[0]) return { x: e.touches[0].clientX, y: e.touches[0].clientY };
if (e.changedTouches && e.changedTouches[0]) return { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY };
return { x: e.clientX, y: e.clientY };
};
const onPointerDown = (e, posId) => {
// Only filled slots can start a drag
if (!picks[posId]) return;
const { x, y } = clientXY(e);
const pt = getPitchPoint(x, y);
const state = {
fromId: posId,
startX: x, startY: y,
x: pt.x, y: pt.y,
moved: false,
suppressTap: false,
longPressTimer: null,
active: false,
};
dragRef.current = state;
state.longPressTimer = setTimeout(() => {
if (dragRef.current === state) {
state.active = true;
state.suppressTap = true;
if (navigator.vibrate) navigator.vibrate(30);
setDrag({ ...state });
}
}, LONG_PRESS_MS);
};
const onPointerMove = (e) => {
const state = dragRef.current;
if (!state) return;
const { x, y } = clientXY(e);
const dx = x - state.startX;
const dy = y - state.startY;
// Cancel long-press if user moved before it triggered
if (!state.active && Math.sqrt(dx*dx + dy*dy) > MOVE_TOLERANCE) {
clearTimeout(state.longPressTimer);
dragRef.current = null;
return;
}
if (state.active) {
if (e.cancelable) e.preventDefault();
const pt = getPitchPoint(x, y);
state.x = pt.x;
state.y = pt.y;
state.moved = true;
setDrag({ ...state });
const hovered = findSlotAtPoint(x, y);
setHoverSlotId(hovered && hovered.id !== state.fromId ? hovered.id : null);
}
};
const onPointerUp = (e) => {
const state = dragRef.current;
if (!state) return;
clearTimeout(state.longPressTimer);
if (state.active && state.moved) {
const { x, y } = clientXY(e);
const target = findSlotAtPoint(x, y);
if (target && target.id !== state.fromId && picks[target.id]) {
// Trigger the swap animation
setSwapPair({ aId: state.fromId, bId: target.id });
// After the scale-down, do the swap, then scale back up
setTimeout(() => {
onSwap(state.fromId, target.id);
}, 180);
setTimeout(() => {
setSwapPair(null);
}, 420);
}
}
dragRef.current = null;
setDrag(null);
setHoverSlotId(null);
};
const onPointerCancel = () => {
const state = dragRef.current;
if (state) clearTimeout(state.longPressTimer);
dragRef.current = null;
setDrag(null);
setHoverSlotId(null);
};
// Prevent browser scroll while dragging
React.useEffect(() => {
if (drag?.active) {
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = prev; };
}
}, [drag?.active]);
return (
{filled === 11 && (
)}
{f.positions.map(p=>{
const pick = picks[p.id];
const active = activePos === p.id;
const isDragging = drag?.active && drag?.fromId === p.id;
const isHoverTarget = hoverSlotId === p.id;
const isInSwap = swapPair && (swapPair.aId === p.id || swapPair.bId === p.id);
const label = pick ? (pick.short_name || '').split(' ').slice(-1)[0].slice(0,6).toUpperCase() : p.label;
let bg, border, boxShadow, color;
if (pick) {
bg = 'linear-gradient(180deg, #F5C842, #C99A10)';
color = '#1A1200';
if (isHoverTarget) {
border = '2px solid #fff';
boxShadow = '0 0 0 3px rgba(245,200,66,0.5), 0 0 24px rgba(245,200,66,0.8)';
} else {
border = '2px solid rgba(255,255,255,0.5)';
boxShadow = active ? '0 0 24px rgba(245,200,66,0.6)' : 'none';
}
} else {
bg = active ? T.gold400 : 'rgba(255,255,255,0.18)';
color = 'rgba(255,255,255,0.95)';
border = '2px solid rgba(255,255,255,0.4)';
boxShadow = active ? '0 0 24px rgba(245,200,66,0.6)' : 'none';
}
// Swap animation: scale down briefly, then back up after swap happens
let scaleTransform = 'translate(-50%,-50%)';
if (isInSwap) {
scaleTransform = 'translate(-50%,-50%) scale(0.2)';
} else if (isHoverTarget) {
scaleTransform = 'translate(-50%,-50%) scale(1.12)';
}
return (
);
})}
{/* Ghost card that follows the drag */}
{drag?.active && (() => {
const pick = picks[drag.fromId];
if (!pick) return null;
const label = (pick.short_name || '').split(' ').slice(-1)[0].slice(0,6).toUpperCase();
return (
{label}
);
})()}
Tap an empty slot to pick. Long-press a player to drag them to another spot.
{filled >= 2 && (
)}
);
}
function LegendItem({ color, label }) {
const T = window.T;
return (
);
}
function PlayerSheet({ posLabel, players, loading, error, onPick, onClose }) {
const T = window.T;
return (
Select {posLabel}
{loading ? 'Loading players…' : error ? 'Error loading players' : 'Choose one of these players'}
{loading &&
Loading…
}
{error &&
{String(error)}
}
{!loading && !error && (
{players.map((p,i)=>{
const primaryPos = (p.player_positions||'').split(',')[0].trim().toUpperCase();
const lastName = (p.short_name || p.long_name || '').split(' ').slice(-1)[0];
return (
);
})}
)}
Match leagues, nations, or teams for better chemistry!
);
}
function computeChemistry(formationKey, picks) {
const f = FORMATIONS[formationKey];
if (!f || !f.adj) return 0;
let raw = 0;
f.adj.forEach(([a,b])=>{
const type = linkType(picks[a], picks[b]);
if (type === 'club') raw += 3;
else if (type === 'duo') raw += 3; // league + nation = as strong as club
else if (type === 'league') raw += 2;
else if (type === 'nation') raw += 1;
});
const max = f.adj.length * 3;
return Math.round((raw / max) * 100);
}
function DraftResult({ year, formationKey, picks, onDone }) {
const T = window.T;
const arr = Object.values(picks);
const avg = Math.round(arr.reduce((a,b)=>a+(b.overall||0),0) / (arr.length||1));
const chem = computeChemistry(formationKey, picks);
const combined = avg + chem;
return (
{year} DRAFT COMPLETE
FINAL SQUAD
{/* Combined score — headline */}
{/* Rating + Chemistry — breakdown */}
YOUR XI
{Object.entries(picks).map(([k,p])=>(
{p._posLabel || (p.player_positions||'').split(',')[0]}
{p.short_name}
{p.club_name}
{p.overall}
))}
);
}
function DraftFlow({ onExit }) {
const [stage, setStage] = React.useState('landing');
const [version, setVersion] = React.useState(null);
const [year, setYear] = React.useState(null);
const [formationKey, setFormationKey] = React.useState(null);
const [picks, setPicks] = React.useState({});
const [activePos, setActivePos] = React.useState(null);
const [sheetPlayers, setSheetPlayers] = React.useState([]);
const [sheetLoading, setSheetLoading] = React.useState(false);
const [sheetError, setSheetError] = React.useState(null);
const [lowerTierSlots, setLowerTierSlots] = React.useState(new Set());
const [tokens, setTokens] = React.useState(null);
const [tokenError, setTokenError] = React.useState(false);
const sessionIdRef = React.useRef(null);
const GAME_COST = 2;
React.useEffect(() => {
let mounted = true;
window.isSignedIn().then(signedIn => {
if (!signedIn || !mounted) return;
window.fetchTokens()
.then(t => { if (mounted) setTokens(t?.balance ?? 0); })
.catch(() => {});
});
return () => { mounted = false; };
}, []);
const start = async () => {
const signedIn = await window.isSignedIn();
if (signedIn) {
// Check + deduct tokens before starting
try {
const newBalance = await window.spendTokens(GAME_COST);
setTokens(newBalance);
} catch (e) {
if (e.message === 'insufficient_tokens') { setTokenError(true); return; }
console.error('Token deduct failed:', e);
return;
}
}
const v = 15 + Math.floor(Math.random() * 10);
setVersion(v);
setYear(2000 + v);
setStage('era');
trackPage('/play/draft/era', 'Draft Era');
if (signedIn) {
try {
const sess = await window.createGameSession('draft', { fifa_version: v, year: 2000 + v });
sessionIdRef.current = sess.id;
} catch (e) {
console.error('Failed to create draft session:', e);
}
}
};
const pickFormation = (k) => {
setFormationKey(k);
// Pick 2-3 random slots to be lower-tier (overall 80-84 range)
const allSlots = FORMATIONS[k].positions.map(p => p.id);
const count = 1 + Math.floor(Math.random() * 2); // 1 or 2
const shuffled = [...allSlots].sort(() => Math.random() - 0.5);
setLowerTierSlots(new Set(shuffled.slice(0, count)));
setStage('pitch');
};
const onPosClick = async (p) => {
setActivePos(p);
setSheetPlayers([]); setSheetError(null); setSheetLoading(true);
try {
const excludeIds = Object.values(picks).map(pl => pl.player_id).filter(Boolean);
const minTier = lowerTierSlots.has(p.id) ? 80 : 85;
const rows = await window.fetchPlayersFor(version, p.label, excludeIds, minTier);
setSheetPlayers(rows);
} catch (e) {
setSheetError(e.message || 'Failed to load');
} finally {
setSheetLoading(false);
}
};
const onSwap = (fromId, toId) => {
// Swap the two picks, updating each player's _posLabel to match their new slot
const formation = FORMATIONS[formationKey];
const slotFrom = formation.positions.find(pos => pos.id === fromId);
const slotTo = formation.positions.find(pos => pos.id === toId);
if (!slotFrom || !slotTo) return;
setPicks(prev => {
if (!prev[fromId] || !prev[toId]) return prev;
const next = { ...prev };
next[fromId] = { ...prev[toId], _posLabel: slotFrom.label };
next[toId] = { ...prev[fromId], _posLabel: slotTo.label };
return next;
});
};
const onPickPlayer = (player) => {
setPicks(prev => ({ ...prev, [activePos.id]: { ...player, _posLabel: activePos.label } }));
setActivePos(null);
setSheetPlayers([]);
};
const finishDraft = async () => {
// Finalize session with results
const arr = Object.values(picks);
const avg = arr.length > 0 ? Math.round(arr.reduce((a,b)=>a+(b.overall||0),0) / arr.length) : 0;
const chem = computeChemistry(formationKey, picks);
const combined = avg + chem;
// Capture the draft picks in a slim format for Rank detail view
const picksSnapshot = Object.entries(picks).map(([slotId, p]) => ({
slot_id: slotId,
position: p._posLabel || (p.player_positions || '').split(',')[0],
short_name: p.short_name,
long_name: p.long_name,
overall: p.overall,
club: p.club_name,
league: p.league_name,
nation: p.nationality_name,
}));
const id = sessionIdRef.current;
if (id) {
try {
await window.endGameSession(id, {
fifa_version: version,
year,
formation: formationKey,
average_rating: avg,
chemistry: chem,
combined_score: combined,
picks_count: arr.length,
picks: picksSnapshot,
}, true);
} catch (e) {
console.error('Failed to end draft session:', e);
}
}
setStage('result');
// Fire GA4 event for funnel tracking
if (typeof window.trackEvent === 'function') {
window.trackEvent('draft_completed', {
year, formation: formationKey,
rating: avg, chemistry: chem, combined_score: combined,
signed_in: !!sessionIdRef.current,
});
}
// Award tokens for performance and check achievements (only if signed in)
(async () => {
if (!await window.isSignedIn()) return;
try {
const all = await window.fetchMySessions();
const latest = all[0];
const tokenBonus = window.DRAFT_GAME_TOKENS ? window.DRAFT_GAME_TOKENS(latest) : 3;
await window.awardTokens(tokenBonus);
const newlyUnlocked = await window.checkAchievements(all);
if (newlyUnlocked.length > 0) {
window._pendingAchievements = (window._pendingAchievements || []).concat(newlyUnlocked);
}
} catch (e) {
console.error('Post-game awards failed:', e);
}
})();
};
// Not enough tokens
if (tokenError) {
const T = window.T;
return (
⬡
NOT ENOUGH TOKENS
You need {GAME_COST} tokens to play.
Earn more by completing games
and unlocking achievements.
);
}
if (stage === 'landing') return
;
if (stage === 'era') return setStage('formation')}/>;
if (stage === 'formation') return setStage('era')} onPick={pickFormation}/>;
if (stage === 'pitch') {
return (
<>
setStage('formation')} onFinish={finishDraft}/>
{activePos && (
{setActivePos(null); setSheetPlayers([]);}}/>
)}
);
}
if (stage === 'result') return ;
return null;
}
window.DraftFlow = DraftFlow;