}
);
return (
);
};
// ── BanStrip — bande de bans au dessus du panel ───────────────────────────────
const BanStrip = ({ bans, isBlue, state, currentStep }) => {
const color = isBlue ? BLUE : RED;
const team = isBlue ? 'blue' : 'red';
const slots = [0,1,2,3,4].map(i => bans[i]||null);
const isCurrentBanSlot = (i) =>
currentStep?.team===team && currentStep?.type==='ban' && bans.length===i;
return (
{slots.map((a,i) => (
);
};
// ── PickStrip — picks en dessous ─────────────────────────────────────────────
const PickStrip = ({ picks, isBlue, state, currentStep }) => {
const color = isBlue ? BLUE : RED;
const team = isBlue ? 'blue' : 'red';
const slots = [0,1,2,3,4].map(i => picks[i]||null);
const isCurrentPickSlot = (i) =>
currentStep?.team===team && currentStep?.type==='pick' && picks.length===i;
return (
{slots.map((a,i) => (
);
};
// ── TeamPanel ────────────────────────────────────────────────────────────────
const TeamPanel = ({ state, team, currentStep }) => {
const isBlue = team==='blue';
const color = isBlue ? BLUE : RED;
const name = isBlue ? state.blueName : state.redName;
const bans = getActions(state, team, 'ban');
const picks = getActions(state, team, 'pick');
return (
{name.toUpperCase()}
— BANS
PICKS
🔍
setSearch(e.target.value)}
placeholder="Rechercher..."
style={{width:'100%',boxSizing:'border-box',padding:'.45rem .5rem .45rem 2rem',
background:'rgba(255,255,255,.06)',border:'1px solid rgba(255,255,255,.12)',
borderRadius:3,fontFamily:'var(--fc)',fontSize:'.8rem',color:'var(--cream)',outline:'none'}}/>
{ROLES.map(r=>(
))}
{filtered.length}/{champs.length}
{fearlessIds && fearlessIds.size > 0 && (
🔒 Mode Fearless — {fearlessIds.size} champion(s) non pickable(s) ce game
)}
{filtered.map(c => {
const usedInGame = usedIds.has(c.id);
const fearLocked = fearlessIds?.has(c.id) && !usedInGame;
const canSelect = canPick && !usedInGame && !(fearLocked && !isBanPhase);
const isHov = hover===c.id;
return (
setHover(c.id)}
onMouseLeave={()=>setHover(null)}
onClick={()=>canSelect&&onSelect(c)}
title={fearLocked ? `${c.name} — Fearless: non pickable` : c.name}
style={{position:'relative',overflow:'hidden',borderRadius:3,
cursor:canSelect?'pointer':usedInGame?'not-allowed':'default',
border:isHov&&canSelect?`2px solid ${actionColor.main}`
:fearLocked?'2px solid rgba(232,150,59,.5)':'2px solid transparent',
transform:isHov&&canSelect?'scale(1.06)':'scale(1)',
transition:'transform .1s,border-color .1s',
boxShadow:isHov&&canSelect?`0 0 10px ${actionColor.main}60`:'none',
}}>
{usedInGame&&(
)}
{fearLocked&&!usedInGame&&(
);
})}
{filtered.length===0&&(
🔒
)}
{isHov&&canSelect&&(
{actionLabel}
)}
Aucun champion trouvé
)}
CRÉER UN DRAFT
{[
{id:'free', label:'Draft libre', sub:'Hors tournoi, noms libres'},
{id:'match', label:'Depuis un match CZF', sub:'Sélectionne un match planifié'},
].map(t=>(
))}
{/* Match picker */}
{mode==='match' && (
{matches.length===0
?
)}
{/* Team names */}
Aucun match planifié
:
{matches.map((m,i)=>(
))}
}
setBlueName(e.target.value)}
placeholder="Nom équipe bleue" style={{...inp,borderColor:BLUE.border}}/>
setRedName(e.target.value)}
placeholder="Nom équipe rouge" style={{...inp,borderColor:RED.border}}/>
setFearless(f=>!f)}>
{error&&MODE FEARLESS
Champions pickés = bloqués aux games suivants
{error}
}
{label}
{links[key]}
DRAFT CRÉÉ ✓ {roomData.fearless&&⚡ FEARLESS}
{row('blue','Lien Équipe Bleue', BLUE)}
{row('red', 'Lien Équipe Rouge', RED)}
{row('spec','Lien Spectateur', {main:GOLD.main,dim:GOLD.dim,border:GOLD.border})}
Chargement...
);
if (!state) return (
Salle introuvable.
);
const currentStep = getCurrentStep(state);
const isMyTurn = currentStep?.team===myTeam && myTeam!=='spectator' && !pending;
const usedIds = new Set((state.actions||[]).map(a=>a.champId));
const fearlessIds = new Set(state.fearless_pool||[]);
const phaseColor = !currentStep ? 'var(--muted)'
: currentStep.type==='ban' ? RED.main : BLUE.main;
const phaseLabel = state.status==='done' ? 'DRAFT TERMINÉ'
: state.status==='waiting' ? 'EN ATTENTE DU LANCEMENT'
: currentStep
? `${(currentStep.team==='blue'?state.blueName:state.redName).toUpperCase()} — ${currentStep.type==='ban'?'BAN':'PICK'}`
: '';
return (
{/* Fearless badge */}
{state.fearless && (
{/* Main layout */}
{/* Actions */}
{state.status==='waiting' && myTeam!=='spectator' && (
)}
{state.status==='waiting' && myTeam==='spectator' && (
)}
{state.status==='done' && (
)}
);
};
// ── DraftPage (main) ──────────────────────────────────────────────────────────
window.DraftPage = function DraftPage() {
const [screen, setScreen] = React.useState('loading');
const [champs, setChamps] = React.useState([]);
const [roles, setRoles] = React.useState({});
const [roomData, setRoomData] = React.useState(null);
const [roomId, setRoomId] = React.useState(null);
const [myTeam, setMyTeam] = React.useState('spectator');
React.useEffect(()=>{
loadChampionData().then(({champs,roles})=>{
setChamps(champs); setRoles(roles);
}).catch(()=>{});
const hash = window.location.hash;
const qi = hash.indexOf('?');
if (qi!==-1) {
const p = new URLSearchParams(hash.slice(qi+1));
const r = p.get('room'), t = p.get('team')||'spectator';
if (r) { setRoomId(r); setMyTeam(t); setScreen('room'); return; }
}
setScreen('menu');
},[]);
const handleCreated = (d) => { setRoomData(d); setScreen('links'); };
const handleEnter = (id,team) => { setRoomId(id); setMyTeam(team); setScreen('room'); };
return (
⚡ MODE FEARLESS — Game {state.game_number||1}
{fearlessIds.size>0&&` — ${fearlessIds.size} champion(s) verrouillé(s)`}
)}
{/* Phase indicator */}
{phaseLabel}
{isMyTurn&&C'est ton tour !
}
{pending&&En cours...
}
VS
{state.step<20?`${state.step}/20`:'FIN'}
En attente du lancement...
)}
{state.status==='active' && (
{isMyTurn
? `Sélectionne un champion à ${currentStep?.type==='ban'?'bannir':'picker'}`
: 'En attente de l\'adversaire...'}
DRAFT TERMINÉ
{state.fearless && myTeam!=='spectator' && (
)}
{/* Header */}
{screen!=='menu' && screen!=='loading' && (
)}
{screen==='loading'&&(
)}
{screen==='create' && }
{screen==='links' && roomData && }
{screen==='room' && roomId && (
)}
);
};
DRAFT CZF
Outil de draft officiel — Clash des Zéros de la Faille
Chargement des champions...
)}
{screen==='menu'&&(
Crée ou rejoins une salle de draft pour ton match CZF.
ou utilise un lien partagé par un capitaine