// FearlessTracker.jsx — Fearless Draft series tracker.
//
// In Fearless Draft tournaments (Bo3/Bo5), once a champion is played in any
// game, neither team can pick them again for the rest of the series. This
// screen tracks locked champs per game + shows what each crew member still has
// available in their pool.
//
// Persisted under localStorage key 'cozydraft-fearless-v1'.
(() => {
if (document.getElementById('fearless-tracker-css')) return;
const s = document.createElement('style');
s.id = 'fearless-tracker-css';
s.textContent = `
@keyframes ft-lock-pulse {
0%, 100% { box-shadow: 0 0 0 0 #E8555550; }
50% { box-shadow: 0 0 0 6px #E8555500; }
}
@keyframes ft-shimmer-red {
0% { filter: drop-shadow(0 0 0 #E85555a0); }
50% { filter: drop-shadow(0 0 6px #E85555a0); }
100% { filter: drop-shadow(0 0 0 #E85555a0); }
}
@keyframes ft-shake-soft {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
75% { transform: translateX(2px); }
}
@keyframes ft-game-pulse {
0%, 100% { box-shadow: 0 0 0 0 #C4845A40; }
50% { box-shadow: 0 0 0 6px #C4845A00; }
}
@keyframes ft-roll-down {
0% { transform: translateY(-8px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.ft-lock-shimmer { animation: ft-shimmer-red 2.4s ease-in-out infinite; }
.ft-game-pulse { animation: ft-game-pulse 1.8s ease-out infinite; }
.ft-warn-shake { animation: ft-shake-soft 0.7s ease-in-out 2; }
.ft-roll-down { animation: ft-roll-down 0.35s cubic-bezier(0.34, 1.2, 0.64, 1); }
.ft-hex-input {
background: var(--surface-nested); padding: 10px 18px;
border: 2px solid var(--border-emphasis); border-radius: 999px;
font-family: 'Nunito'; font-weight: 800; font-size: 13px;
color: var(--text-primary); outline: none; width: 100%; box-sizing: border-box;
transition: box-shadow 0.18s, border-color 0.18s;
}
.ft-hex-input:focus { box-shadow: 0 0 0 3px var(--border-default); }
.ft-hex-wrap {
position: relative; flex: 1; min-width: 200px;
}
.ft-format-pill {
background: #F7DFA0; padding: 8px 22px;
border: 2px solid var(--border-emphasis); border-radius: 999px;
font-family: 'Nunito'; font-weight: 800; font-size: 12px;
color: var(--text-primary); outline: none; cursor: pointer;
appearance: none; -webkit-appearance: none; text-align: center;
}
.ft-grid-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ft-lane-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1400px) and (min-width: 901px) {
.ft-lane-strip { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
.ft-grid-cards { grid-template-columns: 1fr !important; }
.ft-lane-strip { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
.ft-lane-strip { grid-template-columns: 1fr !important; }
}
`;
document.head.appendChild(s);
})();
const FearlessTrackerNS = (() => {
const { useState, useEffect, useMemo, useRef } = React;
const STORAGE_KEY = 'cozydraft-fearless-v1';
const POSITIONS = ['TOP', 'JUNGLE', 'MID', 'ADC', 'SUPPORT'];
const FORMAT_GAMES = { Bo1: 1, Bo3: 3, Bo5: 5 };
// ── persistence ───────────────────────────────────────────────────────────
function load() {
try {
const raw = localStorage.getItem(STORAGE_KEY);
if (raw) return JSON.parse(raw);
} catch {}
return { currentSeries: null, archivedSeries: [] };
}
function save(state) {
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch {}
}
function newSeries(name = '') {
return {
id: Date.now(),
seriesName: name,
format: 'Bo3',
currentGame: 1,
games: [],
status: 'active',
createdAt: new Date().toISOString(),
};
}
function emptyGamePicks() {
return POSITIONS.map(p => ({ position: p, championId: null }));
}
// ── Tiny champion picker popover ──────────────────────────────────────────
function ChampionPicker({ champions, onPick, onClose, exclude = new Set(), anchorStyle = {} }) {
const [q, setQ] = useState('');
const ref = useRef(null);
useEffect(() => {
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
document.addEventListener('mousedown', h);
return () => document.removeEventListener('mousedown', h);
}, [onClose]);
const list = useMemo(() => {
const arr = Object.values(champions || {});
const f = q.trim().toLowerCase();
return arr
.filter(c => !exclude.has(c.id))
.filter(c => (window.matchesChampionSearch ? window.matchesChampionSearch(c, q) : (!f || c.name.toLowerCase().includes(f))))
.sort((a, b) => a.name.localeCompare(b.name))
.slice(0, 60);
}, [q, champions, exclude]);
return (
setQ(e.target.value)}
placeholder="Search champ…"
style={{
width: '100%', boxSizing: 'border-box',
padding: '6px 10px', borderRadius: 12,
border: '2px solid var(--border-default)', background: 'var(--surface-nested)',
fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
color: 'var(--text-primary)', outline: 'none', marginBottom: 8,
}}
/>
{list.map(c => (
))}
{list.length === 0 && (
No matches 🌱
)}
);
}
// ── Locked champion tile (in a game row) ──────────────────────────────────
function LockedTile({ championId, position, champName, accent = 'sage' }) {
const posColor = window.POSITION_COLORS[position];
const colors = accent === 'sage'
? { ring: '#7CBF8E', glow: '#7CBF8E40' }
: { ring: '#E8A0A0', glow: '#E8A0A040' };
if (!championId) {
return (
—
);
}
return (
{champName || championId}
{position.charAt(0)}
);
}
// ── Game section divider ──────────────────────────────────────────────────
function GameDivider({ gameNumber, accent }) {
return (
);
}
// ── Side card (ours / enemy locked champs) ────────────────────────────────
function LockedCard({ side, games, champions, format, onLogGame, currentGame, status }) {
const isUs = side === 'us';
const accent = isUs ? '#7CBF8E' : '#E8A0A0';
const headColor = isUs ? '#2d6b47' : '#8b3a5a';
const title = isUs ? 'Our Locked Champions 🛡️' : 'Enemy Locked Champions ⚔️';
const subtitle = isUs ? 'champs locked this series' : 'champs they can\'t repeat';
const buttonColor = isUs ? 'terracotta' : 'pink';
const totalLocked = games.reduce(
(n, g) => n + (isUs ? g.ourPicks : g.enemyPicks).filter(p => p.championId).length,
0,
);
const maxGames = FORMAT_GAMES[format] || 3;
const canLogMore = status === 'active' && games.length < maxGames;
return (
{title}
{totalLocked} {subtitle}
{games.length === 0 ? (
No champs locked yet — start logging when Game 1 ends! 🐾
) : (
games.map(g => (
{POSITIONS.map(pos => {
const pick = (isUs ? g.ourPicks : g.enemyPicks).find(p => p.position === pos);
return (
);
})}
))
)}
{canLogMore && (
onLogGame(side)}>
{games.length === 0 ? `+ Log Game 1 picks` : `+ Log Game ${currentGame} picks`}
)}
);
}
// ── One lane mini-card in the availability strip ──────────────────────────
function LaneAvailability({ pos, player, champions, lockedIds, lockedInfo }) {
const posColor = window.POSITION_COLORS[pos];
const labels = window.POSITION_LABELS;
const archetype = window.ARCHETYPE_BY_POSITION[pos];
const allPool = (player?.pool || []).filter(e => e.position === pos);
const total = allPool.length;
const available = allPool.filter(e => !lockedIds.has(e.championId)).length;
const low = total > 0 && available <= 2;
return (
{labels[pos]}
{player?.name || '—'}
{available} of {total} available
{low && (
⚠️ Running low on options!
)}
{allPool.length === 0 && (
No pool yet 🌱
)}
{allPool.map(e => {
const lockInfo = lockedInfo?.[e.championId];
const locked = !!lockInfo;
const name = champions[e.championId]?.name || e.championId;
const tooltip = locked
? `🔒 ${name} — played by ${lockInfo.side === 'us' ? 'our crew' : 'enemy'} in Game ${lockInfo.gameNumber}`
: name;
return (
);
})}
);
}
// ── Quick-add modal for logging a game ────────────────────────────────────
function LogGameModal({ gameNumber, initialOur, initialEnemy, champions, excludeIds, onSave, onClose, defaultSide }) {
const [our, setOur] = useState(initialOur);
const [enemy, setEnemy] = useState(initialEnemy);
const [pickerOpen, setPickerOpen] = useState(null); // { side, pos }
useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', onKey);
const prevOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
document.removeEventListener('keydown', onKey);
document.body.style.overflow = prevOverflow;
};
}, [onClose]);
const setPick = (side, pos, championId) => {
const list = side === 'us' ? our : enemy;
const setter = side === 'us' ? setOur : setEnemy;
setter(list.map(p => p.position === pos ? { ...p, championId } : p));
};
const handleSave = () => {
onSave({
gameNumber,
ourPicks: our,
enemyPicks: enemy,
});
};
const renderColumn = (side, picks, title, accent) => (
{title}
{picks.map(p => {
const posColor = window.POSITION_COLORS[p.position];
return (
{p.position}
{p.championId ? (
<>
{champions[p.championId]?.name || p.championId}
) : (
)}
{pickerOpen && pickerOpen.side === side && pickerOpen.pos === p.position && (
setPickerOpen(null)}
onPick={(id) => setPick(side, p.position, id)}
anchorStyle={{ top: '100%', left: 0, marginTop: 4 }}
/>
)}
);
})}
);
return (
{ if (e.target === e.currentTarget) onClose(); }}
style={{
position: 'fixed', inset: 0, zIndex: 1000,
background: 'rgba(74, 55, 40, 0.5)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
padding: 16,
}}
>
Log Game {gameNumber} Picks 📝
Lock in everything the two teams played this game — they're out of the pool for the rest of the series.
{renderColumn('us', our, 'Our crew 🛡️', '#7CBF8E')}
{renderColumn('enemy', enemy, 'Enemy squad ⚔️', '#E8A0A0')}
Cancel 👋
Save game 🌟
Ready for tournament day? 🐾
Start tracking your Fearless Draft series — never play the same champ twice!
Start a series 🌟
);
}
// ── Top series setup bar ──────────────────────────────────────────────────
function SeriesBar({ series, onUpdate, onEnd, onNew }) {
const max = FORMAT_GAMES[series.format] || 3;
const currentGame = Math.min((series.games || []).length + 1, max);
const isSeriesEnded = !!(series.seriesEnded || series.status === 'ended');
const debouncedSeriesName = window.useDebounceFirebaseUpdate(
series.seriesName || '',
(val) => onUpdate({ seriesName: val })
);
return (
debouncedSeriesName.onChange(e.target.value)}
onBlur={debouncedSeriesName.onBlur}
onFocus={debouncedSeriesName.onFocus}
placeholder="vs Enemy Team — Quarterfinals"
/>
{isSeriesEnded ? (
<>🏁 Series ended
) : (
<>Game {currentGame} of {max}
)}
{!isSeriesEnded && (
End series 🏁
)}
New series 🌱
);
}
// ── Main screen ───────────────────────────────────────────────────────────
function FearlessTracker() {
const {
players, champions, showToast,
fearlessSeries, updateFearlessSeries,
fearlessSeriesHistory, lobbyCode
} = window.useApp();
const hasGlobal = fearlessSeries !== undefined && updateFearlessSeries !== undefined;
const [localState, setLocalState] = useState(() => {
try {
const raw = localStorage.getItem('cozydraft-fearless-v2');
if (raw) return JSON.parse(raw);
} catch {}
return { fearlessSeries: null, fearlessSeriesHistory: {} };
});
const stateSeries = hasGlobal ? fearlessSeries : localState.fearlessSeries;
const stateHistory = hasGlobal ? fearlessSeriesHistory : localState.fearlessSeriesHistory;
const setState = useCallback((updater) => {
if (hasGlobal) {
const prev = fearlessSeries || null;
const next = typeof updater === 'function' ? updater({ fearlessSeries: prev }).fearlessSeries : updater;
updateFearlessSeries(next);
} else {
setLocalState(prev => {
const next = typeof updater === 'function' ? updater(prev) : updater;
try { localStorage.setItem('cozydraft-fearless-v2', JSON.stringify(next)); } catch {}
return next;
});
}
}, [hasGlobal, fearlessSeries, updateFearlessSeries]);
const [modal, setModal] = useState(null); // { gameNumber }
const [confettiKey, setConfettiKey] = useState(0);
const series = stateSeries;
const isSeriesEnded = !!(series?.seriesEnded || series?.status === 'ended');
const startNew = () => {
const db = window.db;
// Archive current series if it has any logged games.
if (series && (series.games || []).length > 0) {
const timestamp = Date.now();
const archivedData = {
...series,
id: series.id || timestamp,
endedAt: new Date().toISOString()
};
if (hasGlobal && db && lobbyCode) {
db.ref(`rooms/${lobbyCode}/state/fearlessSeriesHistory/${timestamp}`).set(archivedData).catch(err => {
console.error("Firebase archive failed:", err);
});
} else {
setLocalState(prev => {
const nextHistory = { ...(prev.fearlessSeriesHistory || {}), [timestamp]: archivedData };
const nextState = { ...prev, fearlessSeriesHistory: nextHistory };
try { localStorage.setItem('cozydraft-fearless-v2', JSON.stringify(nextState)); } catch {}
return nextState;
});
}
}
// Reset active series
const freshSeries = {
seriesName: '',
format: 'Bo3',
currentGame: 1,
games: [],
seriesEnded: false,
createdAt: Date.now()
};
if (hasGlobal && db && lobbyCode) {
db.ref(`rooms/${lobbyCode}/state/fearlessSeries`).set(freshSeries).catch(err => {
console.error("Firebase reset failed:", err);
});
} else {
setState(prev => ({
...prev,
fearlessSeries: freshSeries
}));
}
// Hide the 'Series wrapped' banner & reset any other local states
setConfettiKey(0);
setModal(null);
// Scroll to the top of the page
window.scrollTo({ top: 0, behavior: 'smooth' });
showToast && showToast('New series started 🌱');
};
const updateSeries = (patch) => {
const db = window.db;
if (hasGlobal && db && lobbyCode) {
db.ref(`rooms/${lobbyCode}/state/fearlessSeries`).update(patch).catch(err => {
console.error("Firebase update failed:", err);
});
} else {
setState(prev => ({
...prev,
fearlessSeries: { ...prev.fearlessSeries, ...patch }
}));
}
};
const endSeries = () => {
if (!series) return;
if (!window.confirm('End this series? You can start a new one right after.')) return;
const patch = { seriesEnded: true, status: 'ended', endedAt: new Date().toISOString() };
const db = window.db;
if (hasGlobal && db && lobbyCode) {
db.ref(`rooms/${lobbyCode}/state/fearlessSeries`).update(patch).catch(err => {
console.error("Firebase update failed:", err);
});
} else {
setState(prev => ({
...prev,
fearlessSeries: { ...prev.fearlessSeries, ...patch }
}));
}
setConfettiKey(k => k + 1);
showToast && showToast('Series wrapped — GGs 🏁✦');
};
const openLogModal = () => {
if (!series) return;
const max = FORMAT_GAMES[series.format] || 3;
const gameNumber = Math.min((series.games || []).length + 1, max);
setModal({ gameNumber });
};
const saveGame = (gameData) => {
const cur = series;
if (!cur) return;
const db = window.db;
const existing = (cur.games || []).find(g => g.gameNumber === gameData.gameNumber);
const games = existing
? (cur.games || []).map(g => g.gameNumber === gameData.gameNumber ? gameData : g)
: [...(cur.games || []), gameData].sort((a, b) => a.gameNumber - b.gameNumber);
const max = FORMAT_GAMES[cur.format] || 3;
const isEnded = games.length >= max;
const patch = {
games,
currentGame: Math.min(games.length + 1, max),
seriesEnded: isEnded,
status: isEnded ? 'ended' : 'active'
};
if (hasGlobal && db && lobbyCode) {
db.ref(`rooms/${lobbyCode}/state/fearlessSeries`).update(patch).catch(err => {
console.error("Firebase update failed:", err);
});
} else {
setState(prev => ({
...prev,
fearlessSeries: { ...prev.fearlessSeries, ...patch }
}));
}
setModal(null);
showToast && showToast(`Game ${gameData.gameNumber} locked in 🔒`);
};
// Derive locked-id sets (the union: in Fearless, ANY champion either team
// played is out of the pool for everyone for the rest of the series).
const lockedOurIds = useMemo(() => {
const s = new Set();
series?.games?.forEach(g => g.ourPicks.forEach(p => p.championId && s.add(p.championId)));
return s;
}, [series]);
const lockedEnemyIds = useMemo(() => {
const s = new Set();
series?.games?.forEach(g => g.enemyPicks.forEach(p => p.championId && s.add(p.championId)));
return s;
}, [series]);
const lockedAllIds = useMemo(() => {
return new Set([...lockedOurIds, ...lockedEnemyIds]);
}, [lockedOurIds, lockedEnemyIds]);
// championId → { side: 'us'|'enemy', gameNumber } for tooltips/badges.
const lockedInfo = useMemo(() => {
const map = {};
series?.games?.forEach(g => {
g.ourPicks.forEach(p => {
if (p.championId && !map[p.championId]) map[p.championId] = { side: 'us', gameNumber: g.gameNumber };
});
g.enemyPicks.forEach(p => {
if (p.championId && !map[p.championId]) map[p.championId] = { side: 'enemy', gameNumber: g.gameNumber };
});
});
return map;
}, [series]);
// Stats
const flexRemaining = useMemo(() => {
if (!series) return 0;
return POSITIONS.reduce((n, pos) => {
const player = players.find(p => p.position === pos);
const pool = (player?.pool || []).filter(e => e.position === pos);
return n + pool.filter(e => !lockedAllIds.has(e.championId)).length;
}, 0);
}, [series, players, lockedAllIds]);
const warnings = useMemo(() => {
if (!series) return [];
const out = [];
POSITIONS.forEach(pos => {
const player = players.find(p => p.position === pos);
const pool = (player?.pool || []).filter(e => e.position === pos);
const avail = pool.filter(e => !lockedAllIds.has(e.championId)).length;
if (pool.length > 0 && avail <= 2) {
out.push(`${window.POSITION_LABELS[pos]} lane has only ${avail} left`);
}
});
return out;
}, [series, players, lockedAllIds]);
const archivedList = useMemo(() => {
const history = stateHistory;
if (!history) return [];
const arr = (Array.isArray(history) ? history : Object.values(history)).filter(Boolean);
return arr.sort((a, b) => (b.createdAt || b.id || 0) - (a.createdAt || a.id || 0));
}, [stateHistory]);
if (!series) {
return (
Fearless Tracker 🔒
One champ, one game — no repeats. The crew is locked in.
{archivedList.length > 0 && (
)}
);
}
const totalLocked = (series.games || []).reduce(
(n, g) => n + g.ourPicks.filter(p => p.championId).length + g.enemyPicks.filter(p => p.championId).length, 0,
);
return (
Fearless Tracker 🔒
Tournament day — track everything the two teams have played this series.
{/* Confetti burst on series end */}
{isSeriesEnded && (
)}
{/* Locked champion cards */}
{/* Lane availability strip */}
Our Available Pool by Lane 🌿
Live count after locking in {lockedAllIds.size} champ{lockedAllIds.size !== 1 ? 's' : ''} across both teams
{POSITIONS.map(pos => (
p.position === pos)}
champions={champions}
lockedIds={lockedAllIds}
lockedInfo={lockedInfo}
/>
))}
{/* Series stats */}
{modal && (
setModal(null)}
onSave={saveGame}
/>
)}
);
}
// ── Stat tile + ended banner + archived strip ─────────────────────────────
function StatTile({ emoji, label, value, color = 'var(--text-primary)', hint }) {
return (
{emoji} {label}
{value}
{hint && (
{hint}
)}
);
}
function SeriesEndedBanner({ series, onStartNew }) {
// Simple celebratory hextech sparkle burst
const sparkles = Array.from({ length: 16 }, (_, i) => i);
return (
{sparkles.map(i => {
const left = (i * 73) % 100;
const top = (i * 47) % 90;
const delay = (i * 0.08).toFixed(2);
const colors = ['#C5B4E3', '#F7DFA0', '#AED6F1', '#F2A7C3', '#7CBF8E'];
return (
);
})}
🏁 Series wrapped — GGs!
{(series.games || []).length} game{(series.games || []).length !== 1 ? 's' : ''} logged ·
{' '}{series.seriesName || 'unnamed series'}
Start next series →
);
}
function ArchivedSeriesStrip({ archived, champions }) {
if (!archived || archived.length === 0) return null;
return (
📚 Past series
{archived.slice(0, 5).map(s => (
{s.seriesName || 'Unnamed series'}
· {s.format} · {(s.games || []).length} game{(s.games || []).length !== 1 ? 's' : ''}
))}
);
}
return { FearlessTracker };
})();
Object.assign(window, { FearlessTracker: FearlessTrackerNS.FearlessTracker });