)}
);
}
/* Bloco Ranking de afiliados: quem mais trouxe gente para o Reino. A função do
banco devolve só o código e o total de cadastros; a própria conta aparece marcada. */
function RankingWidget({ onClose, ir, meuCodigo }) {
const [estado, setEstado] = React.useState({ carregando: true, linhas: null });
React.useEffect(() => {
let vivo = true;
const A = window.ReinoAfiliados;
(A && A.ranking ? A.ranking(5) : Promise.resolve(null)).then((linhas) => { if (vivo) setEstado({ carregando: false, linhas }); });
return () => { vivo = false; };
}, []);
const { carregando, linhas } = estado;
return (
{carregando ?
{linhas ? "O ranking aparece quando houver cadastros." : "O ranking não carregou agora. Tente de novo em instantes."}
}
);
}
/* Lista que ocupa a altura livre do painel: renderiza todas as linhas, mede quantas cabem
inteiras e mostra só essas (nada cortado ao meio, sem espaço enorme entre linhas). Onde o
painel não estica (telas estreitas) a lista não é limitada e mostra tudo. */
function ListaQueEnche({ itens, tag = "ul", className = "hg-list" }) {
const ref = React.useRef(null);
const [n, setN] = React.useState(null);
React.useEffect(() => {
const el = ref.current;
if (!el || typeof ResizeObserver === "undefined") return undefined;
let t = 0, ultimo = Math.round(el.clientHeight);
const ro = new ResizeObserver(() => {
const h = Math.round(el.clientHeight);
if (h === ultimo) return;
ultimo = h; clearTimeout(t); t = setTimeout(() => setN(null), 80);
});
ro.observe(el);
return () => { ro.disconnect(); clearTimeout(t); };
}, []);
React.useLayoutEffect(() => {
if (n !== null) return;
const el = ref.current;
if (!el) return;
const fim = el.getBoundingClientRect().bottom + 1;
let cabem = 0;
for (const f of el.children) { if (f.getBoundingClientRect().bottom <= fim) cabem++; else break; }
setN(Math.max(1, cabem));
}, [n, itens.length]);
const Tag = tag;
return {n === null ? itens : itens.slice(0, n)};
}
/* Distribuição dos painéis nas três colunas, sem buraco no fim de nenhuma delas.
Cada painel tem uma altura estimada (o mapa conta a altura que ele cresce até ocupar a
sobra). O desenho padrão já fica equilibrado; se alguém ocultar painéis, o último painel da
coluna mais alta passa para a mais baixa enquanto isso deixar as colunas mais parecidas.
O último painel de cada coluna estica até o fim da grade (app-shell.css). */
const ALTURA_PAINEL = { social: 465, conquistas: 392, chat: 440, mapa: 620, musica: 367, assistente: 239, noticias: 246, ranking: 372, match: 620 };
const COLUNAS_PADRAO = { esquerda: ["social", "musica", "chat"], centro: ["mapa", "conquistas", "assistente"], direita: ["noticias", "ranking", "match"] };
const ZONAS = ["esquerda", "centro", "direita"];
/* quem se adapta melhor à folga do fim da coluna (lista que se distribui): fica por último */
const ESTICA = { match: 9, chat: 8, ranking: 7, musica: 5, social: 4, conquistas: 3, assistente: 2, noticias: 1, mapa: 0 };
function distribuirPaineis(visivel) {
const cols = {};
ZONAS.forEach((z) => { cols[z] = COLUNAS_PADRAO[z].filter(visivel); });
const alt = (ids) => ids.reduce((t, id) => t + ALTURA_PAINEL[id], 0) + Math.max(0, ids.length - 1) * 13;
for (let i = 0; i < 8; i++) {
const ordem = ZONAS.slice().sort((a, b) => alt(cols[b]) - alt(cols[a]));
const alta = ordem[0], baixa = ordem[2];
const movivel = cols[alta].filter((id) => id !== "mapa");
if (!movivel.length) break;
const mover = movivel[movivel.length - 1];
if (alt(cols[alta]) - alt(cols[baixa]) <= ALTURA_PAINEL[mover] + 13) break;
cols[alta] = cols[alta].filter((id) => id !== mover);
cols[baixa] = cols[baixa].concat(mover);
}
ZONAS.forEach((z) => {
const ids = cols[z];
if (ids.length < 2 || ids.indexOf("mapa") >= 0) return; // na coluna do mapa, é o mapa que absorve a folga
const melhor = ids.reduce((a, b) => (ESTICA[b] > ESTICA[a] ? b : a));
cols[z] = ids.filter((id) => id !== melhor).concat(melhor);
});
return cols;
}
const SUGESTOES_MUSICA_MINI = ["samba", "lo-fi para trabalhar", "sertanejo"];
/* Bloco Música: mini player com um único