/* ═══════════════════════════════════════════════════════
screens-main · Home, Ranking, Partidas, Mensalistas, Users, Profile
═══════════════════════════════════════════════════════ */
/* ── HOME / DASHBOARD ─────────────────────── */
const HomeScreen = () => {
const s = useStore();
const openMenu = () => update({ drawerOpen: true });
const me = s.allUsers.find(u => u.uid === s.userUid) || {};
const myStats = s.ranking[s.userUid] || { points: 0, partidas: 0, profit: 0, invested: 0 };
const sortedRanking = Object.keys(s.ranking).map(uid => ({ uid, ...s.ranking[uid] })).sort((a, b) => b.points - a.points);
const myRank = sortedRanking.findIndex(r => r.uid === s.userUid);
const top3 = sortedRanking.slice(0, 3);
const openGame = s.games.find(g => g.status === 'open');
const myConfirmed = openGame?.confirmedPlayers?.some(p => p.uid === s.userUid);
return (
update({ sheet: 'share-qr' })}>
}
/>
{/* Open game banner */}
{openGame && (
update({ currentGame: openGame, gameSubTab: 'confirm' })}>
EM ABERTO
{fmtDate(openGame.date).toUpperCase()}{openGame.timeStart ? ' · ' + openGame.timeStart : ''}
{openGame.name}
{openGame.location && (
{openGame.location}
)}
{(openGame.confirmedPlayers || []).slice(0, 5).map((p, i) => (
))}
{(openGame.confirmedPlayers || []).length > 5 && (
+{(openGame.confirmedPlayers || []).length - 5}
)}
Confirmados
{(openGame.confirmedPlayers || []).length}
{openGame.maxPlayers > 0 && / {openGame.maxPlayers}}
{openGame.maxPlayers > 0 && (
)}
)}
{/* My snapshot */}
Sua posição
{myRank >= 0 ? myRank + 1 : '-'}º
de {sortedRanking.length} mensalistas
} color="var(--gold-1)"/>
} color={myStats.profit >= 0 ? 'var(--neon)' : 'var(--red-1)'}/>
}/>
{/* Podium */}
{top3.length > 0 && (
<>
Pódio
{top3[1] &&
}
{top3[0] && }
{top3[2] && }
)}
{/* Prize */}
Prêmio acumulado
{s.prizeSplitFinal}% das retenções -> torneio final
{/* Quick actions */}
);
};
const Podium = ({ rank, entry, height, crown }) => {
if (!entry) return null;
const colors = { 1: 'var(--gold-1)', 2: '#c2c2c2', 3: '#c87030' };
const name = rankKeyDisplay(entry.uid);
return (
{name.split(' ')[0]}
{entry.points} pts
{rank}
);
};
/* ── RANKING ─────────────────────────────── */
const RankingScreen = () => {
const s = useStore();
const rankData = s.currentSeasonId === '__all__' ? s.allTimeRanking : s.ranking;
const sorted = Object.keys(rankData).map(uid => ({ uid, ...rankData[uid] }))
.sort((a, b) => {
if (b.points !== a.points) return b.points - a.points;
const roeA = a.invested > 0 ? a.profit / a.invested * 100 : 0;
const roeB = b.invested > 0 ? b.profit / b.invested * 100 : 0;
if (Math.abs(roeB - roeA) > 0.01) return roeB - roeA;
return (b.invested || 0) - (a.invested || 0);
});
const seasonGames = s.currentSeasonId === '__all__'
? s.games
: s.games.filter(g => (g.seasonId || 'default') === (s.currentSeasonId || 'default'));
const totalP = seasonGames.filter(g => g.status === 'closed').length;
const activeSeason = s.seasons.find(x => x.id === s.currentSeasonId);
return (
update({ drawerOpen: true })}
title="Ranking" subtitle={`${totalP} partida${totalP !== 1 ? 's' : ''} computadas`}
right={isAdmin() && }/>
{activeSeason && (
📅 {activeSeason.info?.label}
{activeSeason.info?.startDate && ` · ${activeSeason.info.startDate}`}
{activeSeason.info?.endDate && ` → ${activeSeason.info.endDate}`}
{activeSeason.info?.status === 'active' && ● Ativa}
)}
} color="var(--gold-1)" icon="trophy"/>
{isAdmin() &&
}
{sorted.length === 0 ? (
Nenhuma partida registrada ainda.
) : (
{sorted.map((p, i) => )}
)}
Pontuação por posição
{PTS.map((p, i) => (
{i + 1}º
{p}
))}
);
};
const RankingRow = ({ entry, rank }) => {
const me = entry.uid === S.userUid;
const top3 = rank <= 3;
const colors = ['var(--gold-1)', '#c2c2c2', '#c87030'];
const medal = rank <= 3 ? ['🥇', '🥈', '🥉'][rank - 1] : `${rank}º`;
const roe = entry.invested > 0 ? (entry.profit / entry.invested) * 100 : 0;
const name = rankKeyDisplay(entry.uid);
return (
{medal}
u.uid === entry.uid))}/>
{name} {me && · você}
= 0 ? 'var(--neon)' : 'var(--red-1)', fontFamily: 'var(--font-mono)' }}>
{roe >= 0 ? '+' : ''}{Math.round(roe)}% ROE
{entry.partidas} jogos
);
};
const RankingSettings = () => {
const s = useStore();
const [r, setR] = useState(s.prizeSplitRanking);
const [f, setF] = useState(s.prizeSplitFinal);
const [acc, setAcc] = useState(s.accumulatedPrize);
const [err, setErr] = useState('');
const saveSplit = () => {
if (r + f !== 100) { setErr('A soma deve ser 100%'); return; }
setErr('');
dbPut(clubPath('/config/prizeSplitRanking.json'), r);
dbPut(clubPath('/config/prizeSplitFinal.json'), f);
S.prizeSplitRanking = r; S.prizeSplitFinal = f; notify();
toast('Distribuição salva');
};
const saveAcc = () => {
dbPut(clubPath('/config/accumulatedPrize.json'), acc);
S.accumulatedPrize = acc; notify();
toast('Prêmio atualizado');
};
return (
);
};
/* ── PARTIDAS LIST ──────────────────────── */
const PartidasScreen = () => {
const s = useStore();
const filteredGames = s.currentSeasonId && s.currentSeasonId !== '__all__'
? s.games.filter(g => (g.seasonId || 'default') === s.currentSeasonId)
: s.games;
return (
update({ drawerOpen: true })}
title="Partidas"
subtitle={s.seasons.length > 0 ? (s.seasons.find(x=>x.id===s.currentSeasonId)?.info?.label || 'Todas') : 'Temporada'}
right={isAdmin() && }
/>
{filteredGames.length === 0 ? (
Nenhuma partida nesta temporada.
{isAdmin() && (
)}
) : filteredGames.map(g => {
const closed = g.status === 'closed';
const players = closed ? toArr(g.closedPlayers) : toArr(g.confirmedPlayers);
const winner = closed && toArr(g.closedPlayers)[0];
return (
update({ currentGame: g, gameSubTab: closed ? 'result' : (isAdmin() ? 'session' : 'confirm') })} className="card" style={{
padding: 0, marginBottom: 10,
borderLeft: closed ? '3px solid var(--border-strong)' : '3px solid var(--neon)',
cursor: 'pointer', overflow: 'hidden',
}}>
{!closed && }
{closed ? 'FECHADA' : 'ABERTA'}
{fmtDate(g.date).toUpperCase()}
{g.name}
{g.timeStart && (<>{g.timeStart})}
{players.length > 0 && (<>{players.length} jogadores)}
{closed && g.prizePool && (
<>
{fmtBRL(g.prizePool)}
)}
{winner && (
{getDisplayName(winner.name)}
+{fmtBRL(winner.profit || 0)}
)}
{isAdmin() && (
e.stopPropagation()}>
)}
);
})}
{isAdmin() && s.games.length > 0 && (
)}
);
};
/* ── NEW / EDIT GAME SHEET ────────────────── */
const NewGameSheet = () => {
const s = useStore();
const editing = s.editGame || null;
const [historical, setHistorical] = useState(false);
const [name, setName] = useState(editing?.name || '');
const [date, setDate] = useState(editing?.date || todayISO());
const [timeStart, setTimeStart] = useState(editing?.timeStart || '20:00');
const [timeEnd, setTimeEnd] = useState(editing?.timeEnd || '');
const [loc, setLoc] = useState(editing?.location || '');
const [buyin, setBuyin] = useState(editing?.buyinValue || BUYIN_DEFAULT);
const [ret, setRet] = useState(editing?.retValue || RET_DEFAULT);
const [maxP, setMaxP] = useState(editing?.maxPlayers || 0);
const [notes, setNotes] = useState(editing?.notes || '');
const [busy, setBusy] = useState(false);
const [err, setErr] = useState('');
const close = () => update({ sheet: null, editGame: null });
const save = async () => {
if (!name.trim()) { setErr('Informe o nome'); return; }
setBusy(true); setErr('');
const payload = {
name: name.trim(), date, timeStart, timeEnd,
location: loc.trim(), buyinValue: Number(buyin) || BUYIN_DEFAULT, retValue: Number(ret) || RET_DEFAULT,
maxPlayers: Number(maxP) || 0, notes: notes.trim(),
status: editing ? editing.status : (historical ? 'closed' : 'open'),
};
try {
if (editing) {
await patchGame(editing.id, payload);
toast('Partida atualizada');
} else {
await createGame(payload);
}
close();
} catch (e) { setErr(e.message || 'Erro'); }
setBusy(false);
};
return (
{!editing && (
)}
setName(e.target.value)} placeholder="Ex: Etapa 7"/>
setDate(e.target.value)}/>
setTimeStart(e.target.value)}/>
setTimeEnd(e.target.value)}/>
setMaxP(e.target.value)}/>
setLoc(e.target.value)} placeholder="Rua, número..."/>
setBuyin(e.target.value)}/>
setRet(e.target.value)}/>
setNotes(e.target.value)}/>
{err &&
⚠ {err}
}
update({ drawerOpen: true })} title="Mensalistas" subtitle="Controle de pagamento"/>
{monthLabel(ym)}
{paid.length} de {list.length} pagaram
} color="var(--neon)" icon="check"/>
} color="var(--red-1)" icon="hourglass"/>
} color="var(--gold-1)" icon="wallet"/>
{isAdmin() &&
}
{pending.length > 0 && (
<>
Pendentes
{pending.length}
{pending.map(n => )}
)}
{paid.length > 0 && (
<>
Pagos
{paid.length}
{paid.map(n => )}
)}
{list.length === 0 && (
Nenhum mensalista cadastrado.
)}
);
};
const MensRow = ({ name, paid, ym, fee }) => {
const toggle = () => setMensalidadePaid(name, ym, !paid).then(() => toast(!paid ? 'Marcado como pago' : 'Pagamento removido'));
return (
{name}
{paid ? 'Pago' : 'Em aberto'}
{isAdmin() ? (
paid
?
:
) : (
{fmtBRL(fee)}
)}
);
};
const MensSettings = () => {
const s = useStore();
const [fee, setFee] = useState(s.monthlyFee);
const [newName, setNewName] = useState('');
const saveFee = () => {
dbPut(clubPath('/config/monthlyFee.json'), Number(fee) || 0);
S.monthlyFee = Number(fee) || 0; notify();
toast('Taxa atualizada');
};
const addMens = () => {
const n = newName.trim(); if (!n) return;
if (S.mensalistasList.indexOf(n) > -1) { toast(n + ' já está na lista', 'error'); return; }
S.mensalistasList.push(n); saveMensalistasList().then(() => { notify(); toast('Adicionado'); });
setNewName('');
};
const removeMens = n => {
if (!confirm('Remover ' + n + '?')) return;
S.mensalistasList = S.mensalistasList.filter(x => x !== n);
saveMensalistasList().then(() => { notify(); toast('Removido'); });
};
return (
);
};
/* ── USUARIOS (admin) ───────────────────── */
const UsersScreen = () => {
const s = useStore();
const [members, setMembers] = useState([]);
useEffect(() => {
// Load members
dbGet(clubPath('/members.json')).then(m => {
if (m && typeof m === 'object') setMembers(Object.keys(m).map(uid => ({ uid, ...m[uid] })));
});
if (isAdmin()) loadPendingMembers();
// Refresh presence while screen is open (every 12s)
const refreshPresence = () => refreshPresenceOnly();
refreshPresence(); // immediate refresh on open
const interval = setInterval(refreshPresence, 12000);
return () => clearInterval(interval);
}, []);
const all = [
...members.filter(m => m.status === 'active'),
{ uid: s.userUid, status: 'active', isMe: true },
];
const uniqUids = [...new Set(all.map(m => m.uid))];
return (
update({ drawerOpen: true })} title="Usuários" subtitle="Membros do clube"/>
{/* Super admin panel */}
{isSuperAdmin() &&
}
{s.pendingMembers.length > 0 && isAdmin() && (
<>
Pendentes
{s.pendingMembers.length}
{s.pendingMembers.map(m => (
{m.displayName || 'Usuário'}
{m.email}
))}
Ativos
{(() => { const n = uniqUids.filter(uid => isOnline(s.allUsers.find(x => x.uid === uid))).length; return n > 0 ? ● {n} online : null; })()}
{uniqUids.length}
{uniqUids.map(uid => {
const u = s.allUsers.find(x => x.uid === uid) || { uid, displayName: '?' };
const admin = s.adminUids.indexOf(uid) > -1;
const superA = getSuperAdminUid() === uid;
const displayN = u.displayName || '';
const resolvedDisplay = resolveAlias(displayN); // "DJ Eder" -> "Eder", "Dario Franz" -> "Dario"
const mens = s.mensalistasList.some(m => {
if (m === displayN) return true; // exact match
if (nameToRankKey(m) === uid) return true; // via UID lookup
if (m === resolvedDisplay) return true; // alias: "DJ Eder" -> "Eder" matches "Eder"
if (resolveAlias(m) === displayN) return true; // reverse alias
const uFirst = displayN.split(' ')[0];
if (uFirst && m === uFirst) return true; // "Dario" matches "Dario Franz"
if (m.split(' ')[0] === displayN) return true; // full name in list vs short user
return false;
});
return (
{u.displayName || (u.email || '').split('@')[0]}
{u.email}
{isOnline(u) ? '● ONLINE' : '○ OFFLINE'}
{uid === s.userUid && Você}
{superA && S.Admin}
{admin && !superA && Admin}
{mens && Mens.}
);
})}
);
};
const AdminsPanel = ({ members }) => {
const s = useStore();
const [busy, setBusy] = useState(null);
const superAdminUid = getSuperAdminUid();
const candidates = members.filter(uid => s.adminUids.indexOf(uid) === -1 && uid !== s.userUid);
const nonSuperAdmins = s.adminUids.filter(uid => uid !== superAdminUid);
return (
Super Admin · Gerenciar admins
{s.adminUids.length > 0 && (
{s.adminUids.map(uid => {
const u = s.allUsers.find(x => x.uid === uid) || { uid, displayName: '?' };
const isSelf = uid === s.userUid;
const isCreator = superAdminUid === uid;
return (
{u.displayName || (u.email||'').split('@')[0]}
{isCreator && · Super admin}
{!isSelf && !isCreator && (
)}
);
})}
)}
{/* Transfer super admin to existing admin */}
{nonSuperAdmins.length > 0 && (
<>
Transferir super admin
{nonSuperAdmins.map(uid => {
const u = s.allUsers.find(x => x.uid === uid) || { uid, displayName: '?' };
return (
{u.displayName || (u.email||'').split('@')[0]}
);
})}
)}
{candidates.length > 0 && (
<>
Promover a admin
{candidates.map(uid => {
const u = s.allUsers.find(x => x.uid === uid) || { uid, displayName: '?' };
return (
{u.displayName || (u.email||'').split('@')[0]}
);
})}
)}
);
};
/* ── Season selector pill ─────────────────── */
const SeasonSelector = ({ onChange }) => {
const s = useStore();
if (!s.seasons || s.seasons.length === 0) return null;
return (
{[{ id: '__all__', info: { label: 'Histórico geral' } }, ...s.seasons].map(season => {
const isActive = season.id === '__all__'
? s.currentSeasonId === '__all__'
: s.currentSeasonId === season.id;
return (
);
})}
);
};
/* ── Seasons admin screen ─────────────────── */
const SeasonsScreen = () => {
const s = useStore();
const [form, setForm] = useState(null); // null | { id?, label, startDate, endDate, status }
const [busy, setBusy] = useState(false);
const empty = { label: '', startDate: '', endDate: '', status: 'active' };
const save = async () => {
if (!form.label) { toast('Informe o nome da temporada', 'error'); return; }
setBusy(true);
try {
if (form.id) await updateSeason(form.id, { label: form.label, startDate: form.startDate, endDate: form.endDate, status: form.status });
else await createSeason({ label: form.label, startDate: form.startDate, endDate: form.endDate, status: form.status });
setForm(null);
} catch (e) { toast('Erro: ' + e.message, 'error'); }
setBusy(false);
};
const statusColors = { active: 'var(--neon)', closed: 'var(--ink-3)' };
const statusLabel = { active: 'Ativa', closed: 'Encerrada' };
return (
update({ route: 'home' })} title="Temporadas" subtitle="Gerenciar temporadas do clube"/>
{/* Season list */}
{s.seasons.length === 0 && (
🏆
Nenhuma temporada cadastrada.
Crie a primeira abaixo.
)}
{s.seasons.map(season => (
{season.info?.label || season.id}
{season.info?.startDate && <>Início: {season.info.startDate}}
{season.info?.startDate && season.info?.endDate && ' · '}
{season.info?.endDate && <>Fim: {season.info.endDate}}
{statusLabel[season.info?.status] || season.info?.status}
{/* Games count + migrate button */}
{(() => {
const cnt = s.games.filter(g => (g.seasonId || 'default') === season.id).length;
const unassigned = s.games.filter(g => !g.seasonId || g.seasonId === 'default').length;
return (
{cnt} partida{cnt !== 1 ? 's' : ''} vinculada{cnt !== 1 ? 's' : ''}
{unassigned > 0 && · {unassigned} sem temporada}
{unassigned > 0 && (
)}
);
})()}
{season.info?.status !== 'active' && (
)}
))}
{/* Add button */}
{!form && isAdmin() && (
)}
{/* Form */}
{form && (
{form.id ? 'Editar temporada' : 'Nova temporada'}
setForm(f => ({ ...f, label: e.target.value }))}/>
{['active', 'closed'].map(st => (
))}
)}
);
};
const ProfileScreen = () => {
const s = useStore();
const me = s.allUsers.find(u => u.uid === s.userUid) || {};
const [name, setName] = useState(me.displayName || '');
const [pw, setPw] = useState('');
const [pw2, setPw2] = useState('');
const [busy, setBusy] = useState(false);
const [info, setInfo] = useState('');
const [err, setErr] = useState('');
const fileRef = useRef(null);
const myStats = s.ranking[s.userUid] || { points: 0, partidas: 0, profit: 0, invested: 0 };
const sorted = Object.keys(s.ranking).map(uid => ({ uid, ...s.ranking[uid] })).sort((a, b) => b.points - a.points);
const rank = sorted.findIndex(r => r.uid === s.userUid);
const roe = myStats.invested > 0 ? (myStats.profit / myStats.invested) * 100 : 0;
// Extended stats from game history
const history = getMyGameHistory();
const totalCashout = history.reduce((acc, h) => acc + (h.player.cashout != null ? h.player.cashout : (h.player.profit || 0) + (h.player.invested || 0)), 0);
const totalInvested = history.reduce((acc, h) => acc + (h.player.invested || (h.player.buyins || 1) * (h.gv.cv)), 0);
const wins = history.filter(h => h.player.position === 1).length;
const positions = history.map(h => h.player.position).filter(Boolean);
const bestPos = positions.length > 0 ? Math.min(...positions) : null;
const profitGames = history.filter(h => (h.player.profit || 0) > 0).length;
const avgBuyins = history.length > 0 ? (history.reduce((a, h) => a + (h.player.buyins || 1), 0) / history.length) : 0;
const profitHistory = history.map(h => h.player.profit || 0);
const pickPhoto = e => {
const f = e.target.files?.[0]; if (!f) return;
if (f.size > 15 * 1024 * 1024) { toast('Imagem muito grande (max 15MB)', 'error'); return; }
showCropModal(f, async dataUrl => {
try {
await updateMyProfile({ avatar: dataUrl });
toast('Foto atualizada');
} catch (e) { toast('Erro ao salvar foto', 'error'); }
});
e.target.value = '';
};
const saveName = async () => {
setBusy(true); setInfo(''); setErr('');
try { await updateMyProfile({ displayName: name.trim() }); setInfo('Salvo'); setTimeout(() => setInfo(''), 2000); }
catch (e) { setErr('Erro ao salvar'); }
setBusy(false);
};
const changePw = async () => {
if (pw.length < 6) { setErr('Mínimo 6 caracteres'); return; }
if (pw !== pw2) { setErr('Senhas não coincidem'); return; }
setBusy(true); setErr('');
try {
await fbChangePw(S.token, pw);
setInfo('Senha alterada'); setPw(''); setPw2(''); setTimeout(() => setInfo(''), 2500);
} catch (e) { setErr(e.message); }
setBusy(false);
};
const removePhoto = async () => {
if (!confirm('Remover foto?')) return;
await updateMyProfile({ avatar: null });
toast('Foto removida');
};
return (
update({ drawerOpen: true })} title="Meu perfil" subtitle="Estatísticas & configurações"/>
{/* Profile card */}
{(me.displayName || (me.email || '').split('@')[0]).toUpperCase()}
{me.email}
{isSuperAdmin() && SUPER ADMIN}
{!isSuperAdmin() && isAdmin() && ADMIN}
{s.mensalistasList.some(m => {
if (m === me.displayName) return true;
if (nameToRankKey(m) === s.userUid) return true;
const meFirst = (me.displayName || '').split(' ')[0];
return meFirst && m === meFirst;
}) && Mensalista}
{/* Top 3 KPIs */}
{rank >= 0 ? rank + 1 + 'º' : '-'}
Ranking
= 0 ? 'var(--neon)' : 'var(--red-1)' }}>
{roe >= 0 ? '+' : ''}{Math.round(roe)}%
ROE
{/* Extended stats */}
{history.length > 0 && (
<>
Estatísticas detalhadas
}
color={myStats.profit >= 0 ? 'var(--neon)' : 'var(--red-1)'}/>
} color="var(--gold-1)"/>
} color="var(--ink-2)"/>
} sub={`${wins} vitória${wins !== 1 ? 's' : ''}`}/>
0 ? Math.round(profitGames / history.length * 100) + '%' : '-'}
color="var(--neon)" sub={`${profitGames} de ${history.length}`}/>
= 0 ? '+' : '') + Math.round(roe) + '%'}
color={roe >= 0 ? 'var(--neon)' : 'var(--red-1)'}/>
{/* Sparkline do lucro por partida */}
{profitHistory.length >= 3 && (
Lucro por partida
= 0 ? 'var(--neon)' : 'var(--red-1)'} width={280} height={40}/>
Última: {history.length > 0 ? (history[history.length-1].player.profit >= 0 ? '+' : '') + fmtBRL(history[history.length-1].player.profit || 0) : '-'}
{history.length} partidas
)}
)}
{/* Edit name */}
Nome de exibição
setName(e.target.value)}/>
{me.avatar && (
)}
{/* Change pw */}
{info &&
✓ {info}
}
{err &&
⚠ {err}
}
);
};
Object.assign(window, {
HomeScreen, RankingScreen, PartidasScreen, NewGameSheet,
MensalistasScreen, UsersScreen, AdminsPanel, ProfileScreen, SeasonsScreen,
SeasonSelector, Podium, RankingRow,
});