// ============================================
// ONLINE LOBBY — rooms list with streaks + bets
// ============================================
function OnlineLobby({ navigate }) {
const { GAME_MODES, TABLES, REGION_NAMES } = window.MastershotData;
const [filter, setFilter] = React.useState("all");
const [region, setRegion] = React.useState("all");
const [currency, setCurrency] = React.useState("all");
const [search, setSearch] = React.useState("");
const [rooms, setRooms] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(null);
const [supabaseOn, setSupabaseOn] = React.useState(false);
// Carrega lobby + subscribe realtime
React.useEffect(() => {
const Lobby = window.MastershotLobby;
if (!Lobby) {
// Lobby ESM ainda não montou — espera evento e re-renderiza
const onReady = () => setSupabaseOn(prev => !prev);
window.addEventListener("mastershot:lobby-ready", onReady, { once: true });
return () => window.removeEventListener("mastershot:lobby-ready", onReady);
}
setSupabaseOn(Lobby.isSupabaseConfigured());
let mounted = true;
Lobby.listOpenRooms()
.then(list => { if (mounted) { setRooms(list); setLoading(false); } })
.catch(err => { if (mounted) { setError(err.message); setLoading(false); } });
const unsub = Lobby.subscribeToRooms(({ event, room }) => {
setRooms(prev => {
if (event === "DELETE") return prev.filter(r => r.id !== room.id);
if (event === "INSERT") {
if (room.status !== "open") return prev;
return [room, ...prev.filter(r => r.id !== room.id)];
}
if (event === "UPDATE") {
if (room.status === "cancelled" || room.status === "ended") {
return prev.filter(r => r.id !== room.id);
}
return prev.map(r => r.id === room.id ? { ...r, ...room } : r);
}
return prev;
});
});
return () => { mounted = false; unsub(); };
}, []);
// Normaliza schema do DB (snake_case) pro shape esperado pela RoomRow.
const filtered = rooms
.map(r => ({
...r,
// aliases compat com o componente legado
name: r.name || r.host_nick + "'s Room",
host: r.host || r.host_nick,
avatar: r.avatar || r.host_avatar || (r.host_nick || "?").slice(0, 2).toUpperCase(),
level: r.level || 1,
table: r.table || r.table_id,
streak: r.streak || 0,
ping: r.ping || 35,
players: r.players || "1/2",
chips: r.chips || false,
}))
.filter(r => {
if (filter !== "all" && r.mode !== filter) return false;
if (region !== "all" && r.region !== region && r.region !== "ALL") return false;
if (currency === "coins" && r.chips) return false;
if (currency === "chips" && !r.chips) return false;
if (search && !r.name.toLowerCase().includes(search.toLowerCase()) && !r.host.toLowerCase().includes(search.toLowerCase())) return false;
return true;
});
return (
navigate("menu")}>
Menu
{/* Header */}
Modo Online
Salões Ativos
navigate("waiting")}>
Partida Rápida
navigate("createRoom")}>
Criar Sala
{/* Filter bar */}
[m.id,m.name])]}/>
{filtered.length} salas · ● 28.451 online
{/* Table header */}
Sala
Modo
Mesa
Host
Streak
Aposta
Ping
Vagas
{/* Rooms list */}
{loading && (
Carregando salas…
)}
{!loading && error && (
Erro: {error}
)}
{!loading && !error && filtered.map((r, i) => (
))}
{!loading && !error && filtered.length === 0 && (
{supabaseOn
? "Nenhuma sala aberta no momento — clique em \"Criar Sala\" pra começar."
: "Modo online indisponível (Supabase não configurado). Mostrando salas de exemplo."}
)}
);
}
function RoomRow({ room, index, navigate }) {
const { GAME_MODES, TABLES } = window.MastershotData;
const mode = GAME_MODES.find(m => m.id === room.mode);
const table = TABLES.find(t => t.id === room.table);
const statusColor = {
open: "var(--win-bright)",
playing: "var(--fire-bright)",
locked: "var(--ink-400)",
tourney: "var(--gold-400)",
}[room.status];
const statusLabel = {
open: "Aberta",
playing: "Em jogo",
locked: "Privada",
tourney: "Torneio",
}[room.status];
return (
{/* Sala */}
{room.name}
{room.status === "locked" &&
{statusLabel} · {room.region}
{/* Modo */}
{/* Mesa */}
{/* Host */}
{room.host}
Nv. {room.level}
{/* Streak */}
{/* Aposta */}
{/* Ping */}
{/* Vagas */}
{room.players}
{/* Join */}
{room.status === "playing" ? (
navigate("waiting", { roomId: room.id, spectate: true })}>
Assistir
) : room.status === "locked" ? (
Senha
) : (
{
const Lobby = window.MastershotLobby;
if (!Lobby) return navigate("waiting", { roomId: room.id });
try {
await Lobby.joinRoom(room.id);
navigate("waiting", { roomId: room.id });
} catch (err) {
alert("Não foi possível entrar: " + err.message);
}
}}>
Entrar
)}
{label}:
onChange(e.target.value)}
style={{ padding: "6px 28px 6px 10px", fontSize: 12, height: 30, width: "auto", background: "var(--ink-950)" }}>
{options.map(([v,l]) => {l} )}
);
}
Object.assign(window, { OnlineLobby, RoomRow });