/* Empire Sentry — app principal */
const { useState, useEffect, useLayoutEffect, useMemo, useRef } = React;
/* ───────── i18n (EN / ES) ─────────
* Sistema simple: STRINGS por idioma + función t(key) global. El idioma actual
* vive en window.__es_lang (sync con localStorage). Cualquier cambio fuerza un
* re-render del root vía setLang() del provider. Sin libs, ~50 líneas.
*/
const LANG_KEY = "es_lang";
const SUPPORTED_LANGS = ["en", "es"];
const STRINGS = {
en: {
"nav.rankings": "/EVENT RANKINGS",
"nav.activity": "/CHECK ACTIVITY",
"nav.records": "/HALL OF RECORDS",
"events.inProgress": "/EVENTS IN PROGRESS",
"events.lastFinished": "/LAST FINISHED EVENTS",
"events.live": "● LIVE",
"events.ended": "ENDED",
"events.remaining": "remaining",
"events.timerEnded": "timer ended",
"events.noTimer": "no timer",
"events.final": "FINAL",
"empty.noActive": "No active events right now.",
"empty.noEnded": "No finished events with results.",
"empty.noRecords": "No records available.",
"event.mission": "Mission",
"event.noRanking": "This mission has no public leaderboard — only the event timer is available.",
"ctrl.server": "SERVER",
"ctrl.event": "EVENT",
"ctrl.levels": "LEVELS",
"ctrl.rankingType": "RANKING TYPE",
"ctrl.sortBy": "SORT BY",
"rankType.players": "PLAYERS",
"rankType.alliances": "ALLIANCES",
"level.all": "ALL",
"sort.points": "POINTS",
"sort.gap": "GAP TO NEXT",
"sort.maxHit": "MAX HIT",
"sort.perHour": "SCORE / HOUR",
"sort.atkHour": "ATTACKS / HOUR",
"sort.name": "NAME",
"tbl.search": "Search player or alliance…",
"tbl.searchAct": "Search player or alliance…",
"tbl.searchRec": "Search player, alliance or server…",
"tbl.players": "players",
"tbl.alliances": "alliances",
"tbl.records": "records",
"tbl.noMatch": "No players match",
"tbl.noMatchRec": "No records match",
"tbl.name": "NAME",
"tbl.alliance": "ALLIANCE",
"tbl.points": "POINTS",
"tbl.gap": "GAP ▲",
"tbl.maxHit": "MAX HIT",
"tbl.perHour": "/HOUR",
"tbl.atkHour": "ATK/H",
"tbl.maxAtk": "MAX ATK",
"tbl.spinHour": "SPINS/H",
"tbl.maxSpin": "MAX SPINS",
"tbl.updated": "UPDATED",
"tbl.leader": "LEADER",
"tbl.status": "STATUS",
"tbl.lastSignal": "LAST SIGNAL",
"tbl.server": "SERVER",
"tbl.record": "RECORD",
"tbl.set": "SET",
"tbl.player": "PLAYER",
"page.of": "of",
"panel.ranking": "RANKING",
"panel.left": "LEFT",
"panel.finalResults": "FINAL RESULTS",
"panel.ended": "ENDED",
"panel.live": "LIVE",
"activity.title": "ACTIVITY MONITOR",
"activity.onlineNow": "ONLINE NOW",
"activity.sortedLatest": "sorted by latest signal",
"activity.online": "ONLINE",
"activity.active": "ACTIVE",
"activity.idle": "IDLE",
"activity.asleep": "ASLEEP",
"records.title": "HALL OF RECORDS",
"records.top": "TOP 50 ALL-TIME",
"records.world": "WORLD RECORD",
"records.set": "set",
"records.today": "today",
"records.yesterday": "yesterday",
"detail.player": "PLAYER DETAIL",
"detail.alliance": "ALLIANCE DETAIL",
"detail.selectPlayer": "SELECT A PLAYER",
"detail.selectPlayerHint": "pick anyone in the ranking to inspect their stats and set them as your account",
"detail.points": "POINTS",
"detail.attacks": "ATTACKS",
"detail.spins": "SPINS",
"detail.perMin": "/min",
"detail.perHour": "/hour",
"detail.perDay": "/day",
"detail.totalPoints": "total points",
"detail.pointsPerHour": "POINTS / HOUR",
"detail.groupBy": "GROUP BY",
"detail.5min": "5 MIN",
"detail.hour": "1 H",
"detail.4hours": "4 HOURS",
"detail.day": "1 DAY",
"detail.signalsTitle": "SIGNALS / ACTIVITY",
"detail.signals24h": "SIGNALS · 24H",
"detail.signalsTotal": "SIGNALS · 30D",
"detail.peakHour": "PEAK HOUR",
"detail.today": "TODAY",
"detail.yesterday": "YESTERDAY",
"detail.markYou": "SET AS MY ACCOUNT (YOU)",
"detail.unmarkYou": "THIS IS YOUR ACCOUNT — TAP TO UNSET",
"alerts.title": "ALERTS",
"alerts.soundOn": "🔊 SOUND ON",
"alerts.soundOff": "🔇 SOUND OFF",
"alerts.tone": "TONE",
"alerts.silence": "SILENCE",
"alerts.silenced": "muted — re-arms when alerts clear",
"alerts.watching": "WATCHING",
"alerts.notInRanking": "not in this ranking",
"alerts.youWarn": "Pick a player in the ranking and tap “Set as my account” to enable alerts.",
"alerts.mobile": "📱 Mobile alerts coming soon — get pushed when a rival closes in",
"loader.init": "INITIALIZING",
"loader.loading": "LOADING",
"loader.loadingRanking": "LOADING RANKING",
"loader.scanningActivity": "SCANNING ACTIVITY",
"page.first": "« FIRST",
"page.prev": "‹ PREV",
"page.next": "NEXT ›",
"page.last": "LAST »",
"time.now": "now",
"time.mAgo": "m ago",
"time.hAgo": "h ago",
"time.dAgo": "d ago",
"auth.loginTitle": "MEMBERS ONLY",
"auth.loginSub": "Empire Sentry is private. Sign in with Discord to verify you belong to the community.",
"auth.loginBtn": "LOGIN WITH DISCORD",
"auth.deniedTitle": "YOU ARE NOT A MEMBER OF EMPIRE SENTRY",
"auth.deniedSub": "Your Discord account is not in the community (or lacks the required role). Ask an admin for access.",
"auth.logout": "LOG OUT",
"auth.retry": "TRY ANOTHER ACCOUNT",
"auth.checking": "CHECKING ACCESS",
"auth.error": "Could not reach the server. Retry.",
"col.maxHitTip": "MAX HIT — highest points scored in a single attack this event",
"col.atkHourTip": "ATK/H — attacks launched per hour (raid activity)",
"col.maxAtkTip": "MAX ATK — total attacks launched over the whole event",
"col.spinHourTip": "SPINS/H — wheel spins per hour",
"col.maxSpinTip": "MAX SPINS — total wheel spins over the whole event",
"badge.inactive": "INACTIVE", "badge.inactiveTip": "No activity for over 1.5 days",
"badge.sniper": "SNIPER", "badge.sniperTip": "Event ending & striking far faster than average — last-minute push",
"badge.rising": "RISING", "badge.risingTip": "Scoring well above the field average",
"badge.vulnerable":"VULNERABLE","badge.vulnerableTip":"Barely scoring — exposed to being overtaken",
"alert.proximity.label": "RIVAL PROXIMITY", "alert.proximity.desc": "A player is closing in below you",
"alert.overtaken.label": "OVERTAKEN", "alert.overtaken.desc": "Someone passes you in the ranking",
"alert.rankOut.label": "DROP OUT OF TOP", "alert.rankOut.desc": "You fall below a rank",
"alert.rivalSurge.label":"CHASER SURGING", "alert.rivalSurge.desc":"The player above you sprints past a rate",
"alert.stalled.label": "YOU STALLED", "alert.stalled.desc": "Your gain rate drops to zero",
"alert.ending.label": "EVENT ENDING", "alert.ending.desc": "Countdown under a time",
"alert.ctrl.threshold": "threshold", "alert.ctrl.whenUnder": "when under",
"alert.ctrl.above": "above", "alert.ctrl.within": "within",
"alert.msg.rivalClosing": "RIVAL CLOSING IN",
"alert.msg.ptsBehind": "pts behind", "alert.msg.toPass": "to pass",
"alert.msg.overtaken": "YOU WERE OVERTAKEN", "alert.msg.droppedTo": "Dropped to #",
"alert.msg.outOfTop": "OUT OF TOP", "alert.msg.youAreNow": "You are now #",
"alert.msg.chaserSurging": "CHASER SURGING", "alert.msg.aboveYouAt": "above you at",
"alert.msg.youStalled": "YOU STALLED", "alert.msg.stalledMsg": "0 pts/min — rivals are still moving",
"alert.msg.eventEndingSoon": "EVENT ENDING SOON", "alert.msg.minLeft": "min left",
"time.moAgo": "mo ago", "time.yAgo": "y ago",
"alliance.member": "member", "alliance.members": "members", "alliance.noAlliance": "NO ALLIANCE",
"tag.you": "YOU", "tag.new": "NEW",
"footer.privacy": "Privacy", "footer.terms": "Terms", "footer.ethics": "Ethics", "footer.contact": "Contact",
"footer.note": "Empire Sentry — Community tool. Unofficial. Not affiliated with Stillfront Games.",
},
es: {
"nav.rankings": "/RANKINGS",
"nav.activity": "/ACTIVIDAD",
"nav.records": "/RÉCORDS",
"events.inProgress": "/EVENTOS EN CURSO",
"events.lastFinished": "/ÚLTIMOS EVENTOS TERMINADOS",
"events.live": "● EN CURSO",
"events.ended": "TERMINADOS",
"events.remaining": "restante",
"events.timerEnded": "timer terminado",
"events.noTimer": "sin timer",
"events.final": "FINAL",
"empty.noActive": "No hay eventos activos en este momento.",
"empty.noEnded": "No hay eventos terminados con resultados.",
"empty.noRecords": "No hay récords disponibles.",
"event.mission": "Misión",
"event.noRanking": "Esta misión no publica ranking — solo está disponible el temporizador del evento.",
"ctrl.server": "SERVIDOR",
"ctrl.event": "EVENTO",
"ctrl.levels": "NIVELES",
"ctrl.rankingType": "TIPO DE RANKING",
"ctrl.sortBy": "ORDENAR POR",
"rankType.players": "JUGADORES",
"rankType.alliances": "ALIANZAS",
"level.all": "TODOS",
"sort.points": "PUNTOS",
"sort.gap": "DIFERENCIA",
"sort.maxHit": "MAYOR GOLPE",
"sort.perHour": "PUNTOS / HORA",
"sort.atkHour": "ATAQUES / HORA",
"sort.name": "NOMBRE",
"tbl.search": "Buscar jugador o alianza…",
"tbl.searchAct": "Buscar jugador o alianza…",
"tbl.searchRec": "Buscar jugador, alianza o servidor…",
"tbl.players": "jugadores",
"tbl.alliances": "alianzas",
"tbl.records": "récords",
"tbl.noMatch": "Ningún jugador coincide con",
"tbl.noMatchRec": "Ningún récord coincide con",
"tbl.name": "NOMBRE",
"tbl.alliance": "ALIANZA",
"tbl.points": "PUNTOS",
"tbl.gap": "DIFERENCIA ▲",
"tbl.maxHit": "MAYOR GOLPE",
"tbl.perHour": "/HORA",
"tbl.atkHour": "ATQ/H",
"tbl.maxAtk": "MAX ATQ",
"tbl.spinHour": "GIROS/H",
"tbl.maxSpin": "MAX GIROS",
"tbl.updated": "ACTUALIZADO",
"tbl.leader": "LÍDER",
"tbl.status": "ESTADO",
"tbl.lastSignal": "ÚLTIMA SEÑAL",
"tbl.server": "SERVIDOR",
"tbl.record": "RÉCORD",
"tbl.set": "FECHA",
"tbl.player": "JUGADOR",
"page.of": "de",
"panel.ranking": "RANKING",
"panel.left": "RESTANTE",
"panel.finalResults": "RESULTADOS FINALES",
"panel.ended": "TERMINADO",
"panel.live": "EN VIVO",
"activity.title": "MONITOR DE ACTIVIDAD",
"activity.onlineNow": "EN LÍNEA AHORA",
"activity.sortedLatest": "ordenado por última señal",
"activity.online": "EN LÍNEA",
"activity.active": "ACTIVO",
"activity.idle": "INACTIVO",
"activity.asleep": "DORMIDO",
"records.title": "SALÓN DE RÉCORDS",
"records.top": "TOP 50 HISTÓRICO",
"records.world": "RÉCORD MUNDIAL",
"records.set": "logrado",
"records.today": "hoy",
"records.yesterday": "ayer",
"detail.player": "DETALLE DEL JUGADOR",
"detail.alliance": "DETALLE DE ALIANZA",
"detail.selectPlayer": "SELECCIONA UN JUGADOR",
"detail.selectPlayerHint": "elige a cualquiera del ranking para ver sus estadísticas",
"detail.points": "PUNTOS",
"detail.attacks": "ATAQUES",
"detail.spins": "GIROS",
"detail.perMin": "/min",
"detail.perHour": "/hora",
"detail.perDay": "/día",
"detail.totalPoints": "puntos totales",
"detail.pointsPerHour": "PUNTOS / HORA",
"detail.groupBy": "AGRUPAR POR",
"detail.5min": "5 MIN",
"detail.hour": "1 H",
"detail.4hours": "4 HORAS",
"detail.day": "1 DÍA",
"detail.signalsTitle": "SEÑALES / ACTIVIDAD",
"detail.signals24h": "SEÑALES · 24H",
"detail.signalsTotal": "SEÑALES · 30D",
"detail.peakHour": "HORA PICO",
"detail.today": "HOY",
"detail.yesterday": "AYER",
"detail.markYou": "MARCAR COMO MI CUENTA",
"detail.unmarkYou": "ESTA ES TU CUENTA — TOCA PARA QUITAR",
"alerts.title": "ALERTAS",
"alerts.soundOn": "🔊 SONIDO ON",
"alerts.soundOff": "🔇 SONIDO OFF",
"alerts.tone": "TONO",
"alerts.silence": "SILENCIAR",
"alerts.silenced": "silenciado — se reactivará cuando se limpien",
"alerts.watching": "VIGILANDO",
"alerts.notInRanking": "no está en este ranking",
"alerts.youWarn": "Elige un jugador del ranking y pulsa “Marcar como mi cuenta” para activar las alertas.",
"alerts.mobile": "📱 Alertas móviles próximamente — notificación cuando un rival se acerque",
"loader.init": "INICIANDO",
"loader.loading": "CARGANDO",
"loader.loadingRanking": "CARGANDO RANKING",
"loader.scanningActivity": "ESCANEANDO ACTIVIDAD",
"page.first": "« PRIMERA",
"page.prev": "‹ ANT",
"page.next": "SIG ›",
"page.last": "ÚLTIMA »",
"time.now": "ahora",
"time.mAgo": "m",
"time.hAgo": "h",
"time.dAgo": "d",
"auth.loginTitle": "SOLO MIEMBROS",
"auth.loginSub": "Empire Sentry es privado. Inicia sesión con Discord para verificar que perteneces a la comunidad.",
"auth.loginBtn": "ENTRAR CON DISCORD",
"auth.deniedTitle": "NO ERES MIEMBRO DE EMPIRE SENTRY",
"auth.deniedSub": "Tu cuenta de Discord no está en la comunidad (o no tiene el rol necesario). Pide acceso a un administrador.",
"auth.logout": "CERRAR SESIÓN",
"auth.retry": "PROBAR OTRA CUENTA",
"auth.checking": "COMPROBANDO ACCESO",
"auth.error": "No se pudo contactar con el servidor. Reintenta.",
"col.maxHitTip": "MAYOR GOLPE — mayor puntuación en un solo ataque durante el evento",
"col.atkHourTip": "ATQ/H — ataques lanzados por hora (actividad de saqueo)",
"col.maxAtkTip": "MAX ATQ — total de ataques lanzados durante el evento",
"col.spinHourTip": "GIROS/H — giros de ruleta por hora",
"col.maxSpinTip": "MAX GIROS — total de giros de ruleta durante el evento",
"badge.inactive": "INACTIVO", "badge.inactiveTip": "Sin actividad en más de 1,5 días",
"badge.sniper": "FRANCOTIRADOR", "badge.sniperTip": "Evento acabando y atacando mucho más rápido que la media — empujón final",
"badge.rising": "ESCALANDO", "badge.risingTip": "Puntuando muy por encima de la media",
"badge.vulnerable":"EXPUESTO", "badge.vulnerableTip":"Casi sin puntuar — expuesto a ser superado",
"alert.proximity.label": "RIVAL CERCA", "alert.proximity.desc": "Un jugador se acerca por debajo",
"alert.overtaken.label": "SUPERADO", "alert.overtaken.desc": "Alguien te adelanta en el ranking",
"alert.rankOut.label": "FUERA DEL TOP", "alert.rankOut.desc": "Caes por debajo de un puesto",
"alert.rivalSurge.label":"PERSEGUIDOR ACELERANDO", "alert.rivalSurge.desc":"El jugador por encima de ti supera un ritmo",
"alert.stalled.label": "SIN RITMO", "alert.stalled.desc": "Tu ritmo de puntuación cae a cero",
"alert.ending.label": "EVENTO TERMINANDO", "alert.ending.desc": "Cuenta atrás inferior a un tiempo",
"alert.ctrl.threshold": "límite", "alert.ctrl.whenUnder": "cuando baje de",
"alert.ctrl.above": "por encima de", "alert.ctrl.within": "en un margen de",
"alert.msg.rivalClosing": "RIVAL ACERCÁNDOSE",
"alert.msg.ptsBehind": "pts detrás", "alert.msg.toPass": "para adelantarte",
"alert.msg.overtaken": "HAS SIDO SUPERADO", "alert.msg.droppedTo": "Bajaste al #",
"alert.msg.outOfTop": "FUERA DEL TOP", "alert.msg.youAreNow": "Ahora estás #",
"alert.msg.chaserSurging": "PERSEGUIDOR ACELERANDO", "alert.msg.aboveYouAt": "por encima de ti a",
"alert.msg.youStalled": "SIN RITMO", "alert.msg.stalledMsg": "0 pts/min — los rivales siguen avanzando",
"alert.msg.eventEndingSoon": "EVENTO TERMINANDO", "alert.msg.minLeft": "min restantes",
"time.moAgo": "m", "time.yAgo": "a",
"alliance.member": "miembro", "alliance.members": "miembros", "alliance.noAlliance": "SIN ALIANZA",
"tag.you": "TÚ", "tag.new": "NUEVO",
"footer.privacy": "Privacidad", "footer.terms": "Términos", "footer.ethics": "Ética", "footer.contact": "Contacto",
"footer.note": "Empire Sentry — Herramienta comunitaria. No oficial. No afiliada con Stillfront Games.",
},
};
function detectLang() {
try {
const stored = localStorage.getItem(LANG_KEY);
if (stored && SUPPORTED_LANGS.includes(stored)) return stored;
if (typeof navigator !== "undefined" && navigator.language?.startsWith("es")) return "es";
} catch (e) { /* ignore */ }
return "en";
}
// Global mutable — la actualiza setLang del provider. Permite usar t() fuera de
// componentes (helpers de formato) sin propagar context por toda la app.
window.__es_lang = window.__es_lang || detectLang();
function t(key) {
const s = STRINGS[window.__es_lang];
return (s && s[key]) ?? STRINGS.en[key] ?? key;
}
/* hook: lee el idioma actual y lo cambia (persistido). Re-renderiza al cambiar. */
function useLangState() {
const [lang, setLangState] = useState(window.__es_lang);
const setLang = (l) => {
if (!SUPPORTED_LANGS.includes(l) || l === lang) return;
window.__es_lang = l;
try { localStorage.setItem(LANG_KEY, l); } catch (e) { /* ignore */ }
setLangState(l);
};
return [lang, setLang];
}
/* ───────────── helpers ───────────── */
const fmt = (n) => Math.round(n).toLocaleString("de-DE"); // 46.455.233
const fmtRate = (n) => {
if (n === 0) return "0";
if (n < 1000) return n.toLocaleString("de-DE", { maximumFractionDigits: 1 });
return Math.round(n).toLocaleString("de-DE");
};
function pad(n) { return String(n).padStart(2, "0"); }
function fmtCountdown(ms) {
if (ms <= 0) return t("events.ended");
let s = Math.floor(ms / 1000);
const d = Math.floor(s / 86400); s -= d * 86400;
const h = Math.floor(s / 3600); s -= h * 3600;
const m = Math.floor(s / 60); s -= m * 60;
if (d > 0) return `${d}d ${pad(h)}:${pad(m)}:${pad(s)}`;
return `${pad(h)}:${pad(m)}:${pad(s)}`;
}
function fmtAgo(min) {
if (min < 1) return t("time.now");
if (min < 60) return `${min}${t("time.mAgo")}`;
const h = Math.floor(min / 60);
if (h < 24) return `${h}${t("time.hAgo")}`;
return `${Math.floor(h / 24)}${t("time.dAgo")}`;
}
/* live ticking clock shared across countdowns */
function useNow(intervalMs = 1000) {
const [now, setNow] = useState(() => Date.now());
useEffect(() => {
const id = setInterval(() => setNow(Date.now()), intervalMs);
return () => clearInterval(id);
}, [intervalMs]);
return now;
}
/* ───────────── chrome ───────────── */
function TopNav({ tab, setTab, lang, setLang, user }) {
// Tabs identificados por clave estable (no por el texto traducido) para que
// cambiar de idioma no rompa el estado seleccionado.
const links = [
{ key: "rankings", label: t("nav.rankings") },
{ key: "activity", label: t("nav.activity") },
{ key: "records", label: t("nav.records") },
];
return (
{"EMPIRE SENTRY".split("").map((ch, i) => (
{ch === " " ? "\u00A0" : ch}
))}
v0.9 BETA
{links.map((l, i) => (
{i > 0 && — }
setTab(l.key)}
>{l.label}
))}
{SUPPORTED_LANGS.map((l) => (
setLang(l)}
aria-label={"Switch to " + l.toUpperCase()}
>{l.toUpperCase()}
))}
{user && (
{user.avatar &&
}
{user.username}
⏻
)}
);
}
/* real brand owl (user-provided SVG) */
function OwlMark() {
return
{label && (
{label}. . .
)}
);
}
/* ───────────── control bar ───────────── */
function Dropdown({ label, value, options, onChange, className }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", h);
return () => document.removeEventListener("mousedown", h);
}, []);
const cur = options.find((o) => o.value === value) || options[0];
return (
{label}
setOpen((o) => !o)}>
{cur ? cur.text : ""}
▾
{open && (
{options.map((o) => (
{ onChange(o.value); setOpen(false); }}
>{o.text}
))}
)}
);
}
function ReadoutCell({ label, value }) {
return (
);
}
/* LEVELS cell — stepper when the event has several level-tier rankings */
function LevelStepper({ tiers, index, onChange }) {
const multi = tiers.length > 1;
const go = (d) => onChange((index + d + tiers.length) % tiers.length);
return (
{t("ctrl.levels")}{multi && · {index + 1}/{tiers.length} }
{multi && (
{ e.stopPropagation(); go(-1); }}>‹
)}
{tiers[index]}
{multi && (
{ e.stopPropagation(); go(1); }}>›
)}
);
}
/* generic stepper cell (arrows like LEVELS). Con una sola opción no hay flechas:
el valor queda fijo (no se puede cambiar). */
function OptionStepper({ label, options, index, onChange }) {
const multi = options.length > 1;
const safeIdx = Math.min(index, options.length - 1);
const go = (d) => onChange((safeIdx + d + options.length) % options.length);
return (
{label}
{multi && (
{ e.stopPropagation(); go(-1); }}>‹
)}
{options[safeIdx].label}
{multi && (
{ e.stopPropagation(); go(1); }}>›
)}
);
}
// Las labels se construyen en runtime con t() para que cambiar de idioma las
// re-traduzca. Pasamos getters por lang en vez de constantes estáticas.
function getRankTypes() {
return [
{ key: "players", label: t("rankType.players") },
{ key: "alliances", label: t("rankType.alliances") },
];
}
function getRankTypesByEntity() {
const RT = getRankTypes();
return { players: [RT[0]], alliances: [RT[1]], both: RT };
}
// Alias para mantener compatibilidad en sitios que solo necesitan las CLAVES.
const RANK_TYPE_KEYS = ["players", "alliances"];
/* aggregate a player ranking into an alliance ranking */
function aggregateAlliances(rows) {
const map = {};
for (const p of rows) {
let a = map[p.alliance];
if (!a) a = map[p.alliance] = {
alliance: p.alliance, members: 0, score: 0, perMin: 0, perHour: 0, perDay: 0,
maxHit: 0, atkHour: 0, maxAttacks: 0, updatedMin: Infinity,
hourly: new Array(24).fill(0),
hourlyPrev: new Array(24).fill(0),
};
a.members += 1;
a.score += p.score;
a.perMin += p.perMin;
a.perHour += p.perHour;
a.perDay += p.perDay;
a.maxAttacks += p.maxAttacks || 0;
a.atkHour += p.atkHour;
a.maxHit = Math.max(a.maxHit, p.maxHit);
if (p.updatedMin < a.updatedMin) a.updatedMin = p.updatedMin;
if (p.hourly) for (let h = 0; h < 24; h++) a.hourly[h] += p.hourly[h] || 0;
if (p.hourlyPrev) for (let h = 0; h < 24; h++) a.hourlyPrev[h] += p.hourlyPrev[h] || 0;
}
const arr = Object.values(map).map((a) => ({
id: "all_" + a.alliance,
name: a.alliance,
alliance: a.members + " " + (a.members === 1 ? t("alliance.member") : t("alliance.members")),
score: a.score,
perMin: Math.round(a.perMin * 10) / 10,
perHour: a.perHour,
perDay: a.perDay,
maxHit: a.maxHit,
atkHour: Math.round(a.atkHour),
maxAttacks: a.maxAttacks,
updatedMin: a.updatedMin === Infinity ? 0 : a.updatedMin,
inactive: false,
hourly: a.hourly,
hourlyPrev: a.hourlyPrev,
isAlliance: true,
}));
arr.sort((x, y) => y.score - x.score);
arr.forEach((a, i) => (a.rank = i + 1));
return arr;
}
/* ───────────── events row (top) — LIVE or ENDED ───────────── */
function fmtAgoLong(sec) {
const m = Math.floor(sec / 60);
if (m < 60) return m + t("time.mAgo");
const h = Math.floor(m / 60);
if (h < 24) return h + t("time.hAgo");
return Math.floor(h / 24) + t("time.dAgo");
}
function EventsRow({ events, selected, onSelect, now, style, view, setView }) {
const ended = view === "ended";
return (
{ended ? t("events.lastFinished") : t("events.inProgress")}
setView("live")}>{t("events.live")}
setView("ended")}>{t("events.ended")}
{events.map((ev) => {
const isSel = ev.key === selected;
// noTimer: evento activo sin timer asociado (la API devuelve endsAt null).
const noTimer = !ended && (ev.endsAt == null);
const remaining = ended || noTimer ? 0 : ev.endsAt - now;
const ending = !ended && !noTimer && remaining < 3 * 3600 * 1000;
const total = ended || noTimer || !ev.rs ? 1 : ev.rs * 1000;
const elapsed = ended ? 1 : Math.min(1, Math.max(0, 1 - remaining / total));
return (
onSelect(ev.key)}
>
{ev.icon}
{ev.name}
{ended ? (
{t("events.final")}
{fmtAgoLong(ev.endedAgo)}
) : noTimer ? (
{t("panel.live")}
{t("events.noTimer")}
) : (
{fmtCountdown(remaining)}
{remaining > 0 ? t("events.remaining") : t("events.timerEnded")}
)}
{style === "progress" && !ended && !noTimer && (
)}
);
})}
);
}
/* ───────────── ranking table ───────────── */
// Columnas de métricas: función (no constante) para que t() se evalúe al
// renderizar y cambie con el idioma activo en ese momento.
function getRateCols(live, unit) {
// Eventos de "giros" (ruleta): la métrica de acciones son GIROS, no ataques.
const spins = unit === "spins";
if (live) return [
{ key: "score", label: t("tbl.points"), cls: "num strong", arrow: false },
{ key: "gap", label: t("tbl.gap"), cls: "num gap", arrow: false },
{ key: "maxHit", label: t("tbl.maxHit"), cls: "num maxhit", arrow: false },
{ key: "perHour", label: t("tbl.perHour"), cls: "num", arrow: true },
{ key: "atkHour", label: spins ? t("tbl.spinHour") : t("tbl.atkHour"), cls: "num atk", arrow: false,
tip: spins ? t("col.spinHourTip") : t("col.atkHourTip") },
];
// Eventos terminados: datos ESTÁTICOS del final. Sin ritmo (ATK/H).
return [
{ key: "score", label: t("tbl.points"), cls: "num strong", arrow: false },
{ key: "gap", label: "GAP ▲", cls: "num gap", arrow: false },
{ key: "maxHit", label: t("tbl.maxHit"), cls: "num maxhit", arrow: false,
tip: t("col.maxHitTip") },
{ key: "maxAttacks", label: spins ? t("tbl.maxSpin") : t("tbl.maxAtk"), cls: "num matk", arrow: false,
tip: spins ? t("col.maxSpinTip") : t("col.maxAtkTip") },
];
}
// badges contextuales (uno por jugador, por prioridad)
const INACTIVE_MIN = 1.5 * 24 * 60; // +1,5 días sin actividad
function getBadgeMeta() {
return {
inactive: { label: t("badge.inactive"), icon: "💤", tip: t("badge.inactiveTip") },
sniper: { label: t("badge.sniper"), icon: "🎯", tip: t("badge.sniperTip") },
rising: { label: t("badge.rising"), icon: "▲", tip: t("badge.risingTip") },
vulnerable: { label: t("badge.vulnerable"), icon: "⚠", tip: t("badge.vulnerableTip") },
};
}
function playerBadge(p, stats, endingSoon, live) {
if (!live) return null;
if (p.updatedMin > INACTIVE_MIN || p.inactive) return "inactive";
if (stats.avgPerMin <= 0) return null;
const rising = p.perMin > stats.avgPerMin * 1.8; // muy por encima de la media
const vulnerable = p.perMin > 0 && p.perMin < stats.avgPerMin * 0.2; // casi sin puntuar
// sniper: evento acabando + ritmo muy alto + muchos más ataques que la media
if (endingSoon && rising && p.atkHour > stats.avgAtk * 1.4) return "sniper";
if (rising) return "rising";
if (vulnerable) return "vulnerable";
return null;
}
// Dirección "natural" de cada columna al seleccionarla por primera vez:
// nombre/rank/gap ascendente (A→Z, 1→N, menor hueco primero); el resto
// (score, maxHit, ritmos…) descendente (mayor primero).
const naturalSortDir = (key) =>
(key === "name" || key === "rank" || key === "gap") ? "asc" : "desc";
function RankingTable({ rows, sortBy, setSortBy, selectedPlayer, onPick, density, version, movements, loading, endingSoon, live, showBadges, entity, unit }) {
const [page, setPage] = useState(0);
const [query, setQuery] = useState("");
// Dirección de orden. Se resetea a la natural al cambiar de columna; reclicar
// la MISMA cabecera la alterna asc⇄desc.
const [sortDir, setSortDir] = useState(() => naturalSortDir(sortBy));
useEffect(() => { setSortDir(naturalSortDir(sortBy)); }, [sortBy]);
// medias del ranking (solo jugadores activos) para los badges contextuales
const stats = useMemo(() => {
const active = rows.filter((p) => !p.inactive && p.perMin > 0 && p.updatedMin <= INACTIVE_MIN);
const n = active.length || 1;
return {
avgPerMin: active.reduce((a, p) => a + p.perMin, 0) / n,
avgAtk: active.reduce((a, p) => a + p.atkHour, 0) / n,
};
}, [rows, version]);
// Página fija de 40 filas en todas las tablas (rankings, activity, records).
const tbodyRef = useRef(null);
const PER_PAGE = 40;
// gap por jugador = puntos que le saca el jugador justo por encima (orden por score)
const gapById = useMemo(() => {
const byScore = rows.slice().sort((a, b) => b.score - a.score);
const m = {};
byScore.forEach((p, i) => { m[p.id] = i === 0 ? null : byScore[i - 1].score - p.score; });
return m;
}, [rows, version]);
const sorted = useMemo(() => {
const r = rows.slice();
// Comparador base SIEMPRE ascendente; la dirección se aplica al final.
let cmp;
if (sortBy === "name") cmp = (a, b) => a.name.localeCompare(b.name);
else if (sortBy === "rank") cmp = (a, b) => a.rank - b.rank;
else if (sortBy === "gap") cmp = (a, b) => (gapById[a.id] ?? -1) - (gapById[b.id] ?? -1);
else cmp = (a, b) => (a[sortBy] ?? 0) - (b[sortBy] ?? 0);
r.sort(cmp);
if (sortDir === "desc") r.reverse();
return r;
}, [rows, sortBy, sortDir, version, gapById]);
// filtro de búsqueda (nombre o alianza)
const filtered = useMemo(() => {
const q = query.trim().toLowerCase();
if (!q) return sorted;
return sorted.filter((p) => p.name.toLowerCase().includes(q) || p.alliance.toLowerCase().includes(q));
}, [sorted, query]);
// reset de página solo al cambiar la búsqueda (no en cada poll)
useEffect(() => { setPage(0); }, [query]);
const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
const pageC = Math.min(page, totalPages - 1);
const pageRows = filtered.slice(pageC * PER_PAGE, pageC * PER_PAGE + PER_PAGE);
const fromN = filtered.length === 0 ? 0 : pageC * PER_PAGE + 1;
const toN = Math.min(filtered.length, pageC * PER_PAGE + PER_PAGE);
// FLIP: filas que se deslizan a su nueva posición al reordenarse
const rowEls = useRef(new Map());
const prevTops = useRef(new Map());
useLayoutEffect(() => {
const next = new Map();
rowEls.current.forEach((el, id) => { if (el) next.set(id, el.offsetTop); });
next.forEach((top, id) => {
const prev = prevTops.current.get(id);
const el = rowEls.current.get(id);
if (el && prev != null && prev !== top) {
const dy = prev - top;
el.style.transition = "none";
el.style.transform = "translateY(" + dy + "px)";
el.getBoundingClientRect();
requestAnimationFrame(() => {
el.style.transition = "transform .6s cubic-bezier(.22,.61,.36,1)";
el.style.transform = "";
setTimeout(() => { if (el) el.style.transition = ""; }, 660);
});
}
});
prevTops.current = next;
}, [version, pageC, query]);
const onHeadClick = (key) => {
if (key === sortBy) setSortDir((d) => (d === "asc" ? "desc" : "asc")); // toggle
else setSortBy(key); // el efecto resetea la dirección a la natural de la columna
};
const head = (key, label, cls, tip) => (
onHeadClick(key)}
>
{label}{sortBy === key && {sortDir === "asc" ? "▴" : "▾"} }
{tip && {tip} }
);
return (
{head("rank", "#", "rank")}
{head("name", entity === "alliance" ? t("tbl.alliance") : t("tbl.name"), "name")}
{entity !== "alliance" &&
{t("tbl.alliance")}
}
{getRateCols(live, unit).map((c) =>
{head(c.key, c.label, c.cls, c.tip)} )}
{t("tbl.updated")}
{loading ? (
) : (
{pageRows.length === 0 && (
{t("tbl.noMatch")} "{query}"
)}
{pageRows.map((p) => {
const mv = (movements && movements[p.id]) || 0;
const badge = showBadges ? playerBadge(p, stats, endingSoon, live) : null;
const bm = badge && getBadgeMeta()[badge];
return (
{ if (el) rowEls.current.set(p.id, el); else rowEls.current.delete(p.id); }}
className={
"es-tr" +
(p.isYou ? " you" : "") +
(badge === "sniper" ? " sniper-row" : "") +
(selectedPlayer === p.id ? " picked" : "") +
(p.inactive ? " inactive" : "") +
(mv > 0 ? " moved-up" : mv < 0 ? " moved-down" : "")
}
onClick={() => onPick(p.id)}
>
{p.rank}
{mv > 0 && ▲{mv} }
{mv < 0 && ▼{-mv} }
{p.isYou && {p.name}
{bm && (
{bm.icon} {bm.label}
)}
{entity !== "alliance" &&
{p.alliance}
}
{fmt(p.score)}
{gapById[p.id] == null
? {t("tbl.leader")}
: ▲ {fmt(gapById[p.id])}
{fmt(p.maxHit)}
{live ? (
{p.perHour === 0 ? fmt(0) : ▲ +{fmt(p.perHour)}
) : (
{fmt(p.maxAttacks || 0)}
)}
{/* ATK/H solo en vivo: en eventos terminados no hay ritmo */}
{live &&
{p.atkHour === 0 ? fmt(0) : p.atkHour}
}
{fmtAgo(p.updatedMin)}
);
})}
)}
{!loading && filtered.length > PER_PAGE && (
{fromN}–{toN} {t("page.of")} {filtered.length}
setPage(0)}>{t("page.first")}
setPage(pageC - 1)}>{t("page.prev")}
{pageC + 1} / {totalPages}
= totalPages - 1} onClick={() => setPage(pageC + 1)}>{t("page.next")}
= totalPages - 1} onClick={() => setPage(totalPages - 1)}>{t("page.last")}
)}
);
}
/* ───────────── charts (detalle de jugador) ─────────────
* Tres granularidades compartidas entre el detalle de rankings (puntos) y el de
* CHECK ACTIVITY (señales): 5 min / 1 h / 1 día. El backend envía la SERIE CRUDA
* de subidas del jugador ({ refMs, series:[{t,d}] }, últimos 30 días) y el
* bucketing se hace AQUÍ — así el drill-down (mes → día → hora) recalcula al
* instante sin volver a pedir datos. metric: 'points' suma deltas; 'signals'
* cuenta subidas (más subidas = más activo).
*/
const EMPTY24 = new Array(24).fill(0);
const EMPTY12 = new Array(12).fill(0);
const EMPTY_ACT = { refMs: null, series: [] };
const DAY_MS = 86400000;
// "YYYY-MM-DD" en hora local (clave de día estable)
function localDayKey(d) { return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`; }
// agrega las filas de un bucket según la métrica
function reduceRows(rows, metric) { return metric === "signals" ? rows.length : rows.reduce((a, r) => a + r.d, 0); }
// daily[30]: un valor por día natural terminando en refMs
function computeDaily(series, refMs, metric) {
const map = new Map();
for (const r of series) { const k = localDayKey(new Date(r.t)); (map.get(k) || map.set(k, []).get(k)).push(r); }
const out = [];
for (let i = 29; i >= 0; i--) {
const k = localDayKey(new Date(refMs - i * DAY_MS));
out.push({ date: k, value: reduceRows(map.get(k) || [], metric) });
}
return out;
}
// hourly[24]: las 24 horas de un día concreto
function computeHourly(series, dayKey, metric) {
const b = Array.from({ length: 24 }, () => []);
for (const r of series) { const d = new Date(r.t); if (localDayKey(d) === dayKey) b[d.getHours()].push(r); }
return b.map((rows) => reduceRows(rows, metric));
}
// mins5[12]: 12 tramos de 5 min (alineados al reloj) de un día+hora concretos
function computeMins5(series, dayKey, hour, metric) {
const b = Array.from({ length: 12 }, () => []);
for (const r of series) {
const d = new Date(r.t);
if (localDayKey(d) === dayKey && d.getHours() === hour) b[Math.floor(d.getMinutes() / 5)].push(r);
}
return b.map((rows) => reduceRows(rows, metric));
}
// etiqueta del eje X en la vista 5 min: :00 :15 :30 :45 (tramos de 5, alineados al reloj)
function mins5ClockLabel(i) { const m = i * 5; return m % 15 === 0 ? ":" + pad(m) : ""; }
// meses cortos para heatmap / breadcrumb
const HEAT_MONTHS = { en: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
es: ["ene","feb","mar","abr","may","jun","jul","ago","sep","oct","nov","dic"] };
function fmtHeatDate(key) {
const [, m, d] = key.split("-").map(Number);
const months = HEAT_MONTHS[window.__es_lang] || HEAT_MONTHS.en;
return `${d} ${months[m - 1]}`;
}
// etiqueta de día para el breadcrumb (HOY / AYER / "4 jun")
function dayLabel(key, refKey) {
if (key === refKey) return t("detail.today");
const prev = localDayKey(new Date(new Date(refKey + "T00:00:00").getTime() - DAY_MS));
if (key === prev) return t("detail.yesterday");
return fmtHeatDate(key);
}
/* barras verticales (5 min / 1 h). onPick(i): si se pasa, clicar una barra hace
drill-down al siguiente nivel (1 h → 5 min de esa hora). */
function BarChart({ buckets, labelFn, fmtValue, onPick }) {
const [hover, setHover] = useState(null);
const max = Math.max(1, ...buckets);
const peakIdx = buckets.indexOf(max);
const ticks = 4;
return (
{Array.from({ length: ticks + 1 }, (_, i) => {
const v = (max * (ticks - i)) / ticks;
return {shortNum(v)} ;
})}
{Array.from({ length: ticks + 1 }, (_, i) =>
{buckets.map((v, i) => {
const isPeak = i === peakIdx;
const isHover = hover === i;
return (
setHover(i)} onMouseLeave={() => setHover(null)}
onClick={() => onPick && onPick(i)}>
{(isHover || (isPeak && peakIdx < buckets.length * 0.6)) && v > 0 && (
{fmtValue(v)}
)}
{labelFn(i)}
);
})}
);
}
/* cuadrícula mensual tipo heatmap (vista "1 día"): un cuadrado por día, más
iluminado cuantos más puntos/señales. Hover → total del día en el pie; clic en un
cuadrado → drill-down a la vista 1 h de ese día (onPick). */
function MonthHeatmap({ daily, fmtValue, onPick }) {
const [sel, setSel] = useState(null);
const max = Math.max(1, ...daily.map((d) => d.value));
// padding inicial para alinear por día de la semana (lunes primero)
const lead = daily.length ? (new Date(daily[0].date + "T00:00:00").getDay() + 6) % 7 : 0;
const cur = sel != null ? daily[sel] : null;
return (
{Array.from({ length: lead }, (_, i) => 0 ? " has" : "") + (weekend ? " weekend" : "") + (sel === i ? " sel" : "")}
style={{ "--lvl": lvl.toFixed(3) }}
title={fmtHeatDate(d.date)}
onMouseEnter={() => setSel(i)}
onMouseLeave={() => setSel((s) => (s === i ? null : s))}
onClick={() => onPick && onPick(d.date)}
>
{Number(d.date.slice(8, 10))}
);
})}
{cur && {fmtValue(cur.value)} · {fmtHeatDate(cur.date)}
{[0, 0.3, 0.55, 0.8, 1].map((l, i) =>
);
}
/* reloj circular de 24h (vista "1 h" en CHECK ACTIVITY): barras polares, una por
hora, cuya longitud crece con la actividad. Clic en una hora → drill a 5 min. */
function RadialClock({ hourly, fmtValue, onPick }) {
const [hover, setHover] = useState(null);
const max = Math.max(1, ...hourly);
const peak = hourly.indexOf(Math.max(...hourly));
const size = 232, c = size / 2, r0 = 34, rMax = c - 26;
const polar = (ang, rad) => [c + rad * Math.cos(ang), c + rad * Math.sin(ang)];
const angOf = (h) => (-90 + h * 15) * Math.PI / 180;
return (
0 ? " peak" : "") + (hover === h ? " hover" : "")} />
);
})}
{/* hit-lines invisibles y anchas: facilitan hover/clic sobre cada hora */}
{hourly.map((v, h) => {
const ang = angOf(h);
const [ix, iy] = polar(ang, r0);
const [ox, oy] = polar(ang, rMax);
return (
setHover(h)} onMouseLeave={() => setHover(null)}
onClick={() => onPick && onPick(h)} />
);
})}
{[0, 6, 12, 18].map((h) => {
const [tx, ty] = polar(angOf(h), rMax + 13);
return {pad(h)} ;
})}
{hover != null ? fmtValue(hourly[hover]) : "24h"}
{hover != null && (
{pad(hover)}:00
)}
);
}
/* breadcrumb + sub-gráfica, con DRILL-DOWN (sin combobox; se navega clicando):
* 1 día (heatmap mensual, vista por defecto) → clic en un día → 1 h de ese día
* 1 h (reloj 24h) → clic en una hora → 5 min de esa hora
* Para subir de nivel se usa el breadcrumb. El bucketing se recalcula en cliente
* desde la serie cruda según selDay/selHour. series/refMs: serie del jugador.
* metric: 'points' | 'signals'. Se monta con key={player.id} → al cambiar de
* jugador se reinicia la selección. */
function DetailChart({ series, refMs, groupBy, setGroupBy, metric }) {
const refDate = refMs ? new Date(refMs) : new Date();
const refDayKey = localDayKey(refDate);
const [selDay, setSelDay] = useState(refDayKey);
const [selHour, setSelHour] = useState(refDate.getHours());
// al llegar los datos (null→cargado), centra la selección en el último día/hora
// con datos. No se re-dispara con cada refresco (depende solo de "cargado").
const loaded = refMs != null;
useEffect(() => {
if (refMs != null) { const d = new Date(refMs); setSelDay(localDayKey(d)); setSelHour(d.getHours()); }
}, [loaded]);
const daily = useMemo(() => computeDaily(series, refMs ?? Date.now(), metric), [series, refMs, metric]);
const hourly = useMemo(() => computeHourly(series, selDay, metric), [series, selDay, metric]);
const mins5 = useMemo(() => computeMins5(series, selDay, selHour, metric), [series, selDay, selHour, metric]);
const title = metric === "signals" ? t("detail.signalsTitle") : t("detail.points");
const onPickDay = (dateKey) => { setSelDay(dateKey); setGroupBy("hour"); };
const onPickHour = (h) => { setSelHour(h); setGroupBy("mins5"); };
return (
{title}
{/* breadcrumb del período (clic = subir de nivel); en la vista mes no aplica */}
{groupBy !== "day" && (
setGroupBy("day")}>{t("detail.day")}
›
{groupBy === "mins5" ? (
setGroupBy("hour")}>{dayLabel(selDay, refDayKey)}
›
{pad(selHour)}:00
) : (
{dayLabel(selDay, refDayKey)}
)}
)}
{groupBy === "mins5" && (
);
}
function ActivityPanel({ player, groupBy, setGroupBy, isYou, onToggleYou, canMark, unit }) {
if (!player) {
return (
{t("detail.selectPlayer")}{t("detail.selectPlayerHint")}
);
}
return (
{/* player header */}
#{player.rank}
{player.name}
{isYou && {t("tag.you")} }
{player.alliance}
{fmt(player.score)}
{t("detail.totalPoints")}
{canMark && (
onToggleYou(isYou ? null : player.name)}
>
{isYou
? ✓ {t("detail.unmarkYou")}◎ {t("detail.markYou")}
)}
{t("detail.points")}
{fmtRate(player.perMin)} {t("detail.perMin")}
{fmt(player.perHour)} {t("detail.perHour")}
{fmt(player.perDay)} {t("detail.perDay")}
{unit === "spins" ? t("detail.spins") : t("detail.attacks")}
{fmtRate(Math.round((player.atkHour || 0) / 60 * 10) / 10)} {t("detail.perMin")}
{fmt(player.atkHour || 0)} {t("detail.perHour")}
{fmt((player.atkHour || 0) * 24)} {t("detail.perDay")}
{t("detail.selectPlayer")}{t("detail.selectPlayerHint")}
);
}
const st = signalStatus(player.ago);
const series = data.series || [];
const total30d = series.length; // nº de señales en 30 días
// hora del día (agregada sobre los 30 días) con más señales
const hourAgg = EMPTY24.slice();
for (const r of series) hourAgg[new Date(r.t).getHours()]++;
const peakHour = hourAgg.indexOf(Math.max(...hourAgg));
const hasHourly = series.length > 0;
return (
{/* player header — estado de señal en vez de rank/score */}
{player.name}
{player.alliance}
{st.label}
{fmtSignal(player.ago)}
{t("activity.title")}
{fmt(player.signals24h || 0)} {t("detail.signals24h")}
{fmt(total30d)} {t("detail.signalsTotal")}
{hasHourly ? pad(peakHour) + ":00" : "—"} {t("detail.peakHour")}
{t("alerts.title")}
{ if (!soundOn) audioCtx(); setSoundOn(!soundOn); }}
>{soundOn ? t("alerts.soundOn") : t("alerts.soundOff")}
{youName ? (
{t("alerts.watching")} {youName} {youRow ? " · #" + youRow.rank : " · " + t("alerts.notInRanking")}
×
) : (
◎
{t("alerts.youWarn")}
)}
{youName && (
{t("alerts.tone")}
{SOUND_KEYS.map((k) => (
{ setSoundType(k); previewTone(k); }}
>{SOUND_PRESETS[k].label}
))}
)}
{active.length > 0 && (
{active.map((a) => (
{a.icon}
{a.title}
{a.msg}
))}
{sounding && (
onSilence()}>{t("alerts.silence")}
)}
{soundOn && silenced && (
{t("alerts.silenced")}
)}
)}
{youName && getAlertRules().map((rule) => {
const c = cfg[rule.key];
const isActive = active.some((a) => a.id === rule.key);
return (
setRule(rule.key, { on: !c.on })}>
{rule.icon}
{rule.label}
{rule.desc}
{c.on && rule.ctrl && (
{rule.ctrl.type === "rank" ? t("alert.ctrl.threshold") : rule.ctrl.type === "mins" ? t("alert.ctrl.whenUnder") : rule.ctrl.type === "rate" ? t("alert.ctrl.above") : t("alert.ctrl.within")}
{ctrlLabel(rule.ctrl.type, c[rule.ctrl.type === "gap" ? "gap" : rule.ctrl.type === "rank" ? "rank" : rule.ctrl.type === "rate" ? "rate" : "mins"])}
)}
);
})}
);
}
/* ───────────── check activity (server-wide live activity) ───────────── */
function fmtSignal(sec) {
if (sec < 60) return Math.max(1, Math.floor(sec)) + "s ago";
if (sec < 3600) return Math.floor(sec / 60) + "m ago";
if (sec < 86400) return Math.floor(sec / 3600) + "h ago";
return Math.floor(sec / 86400) + "d ago";
}
function signalStatus(sec) {
if (sec < 120) return { cls: "online", label: t("activity.online") };
if (sec < 1800) return { cls: "active", label: t("activity.active") };
if (sec < 21600) return { cls: "idle", label: t("activity.idle") };
return { cls: "asleep", label: t("activity.asleep") };
}
function ActivityView({ serverId, density, now }) {
const PER_PAGE = 40;
const [page, setPage] = useState(0);
const [query, setQuery] = useState("");
// estado vivo: cada jugador con su timestamp de última señal
const [list, setList] = useState([]);
const [loading, setLoading] = useState(true); // loader hasta la primera carga
const [pinged, setPinged] = useState({}); // id -> true para animación de "nueva señal"
const moveTimer = useRef(null);
const prevSig = useRef({}); // player_id -> signals24h del poll anterior
// jugador seleccionado → detalle de señales (histogramas 5min/1h/1día)
const [picked, setPicked] = useState(null);
const [pickedData, setPickedData] = useState(EMPTY_ACT);
const [actGroupBy, setActGroupBy] = useState("day");
// Carga real + polling de la actividad de saqueo del server (cada 4s).
// El "ping" se enciende solo cuando signals24h sube de verdad entre polls.
useEffect(() => {
let alive = true;
prevSig.current = {};
setLoading(true);
setList([]);
const apply = (players) => {
if (!alive) return;
setLoading(false);
const fresh = {};
const seeded = players.map((p) => {
const before = prevSig.current[p.player_id];
if (before != null && p.signals24h > before) fresh[p.player_id] = true;
prevSig.current[p.player_id] = p.signals24h;
return {
id: String(p.player_id),
name: p.name || "—",
alliance: p.alliance || t("alliance.noAlliance"),
signals24h: p.signals24h,
lastSignalAt: Date.now() - (p.lastSignalSec || 0) * 1000,
isYou: false,
};
});
setList(seeded);
if (Object.keys(fresh).length) {
setPinged(fresh);
clearTimeout(moveTimer.current);
moveTimer.current = setTimeout(() => setPinged({}), 1400);
}
};
const load = () => window.ESApi.getActivity(serverId).then(apply).catch(() => {});
setPage(0);
load();
const id = setInterval(load, 4000);
return () => { alive = false; clearInterval(id); clearTimeout(moveTimer.current); };
}, [serverId]);
// al cambiar de servidor, limpiar selección
useEffect(() => { setPicked(null); }, [serverId]);
// histogramas de señales del jugador elegido (refresco ligero cada 8s)
useEffect(() => {
if (!picked) { setPickedData(EMPTY_ACT); return; }
let alive = true;
const norm = (d) => ({ refMs: d.refMs ?? null, series: d.series || [] });
const load = () => window.ESApi.getActivityPlayer(serverId, picked)
.then((d) => { if (alive) setPickedData(norm(d)); }).catch(() => {});
load();
const id = setInterval(load, 8000);
return () => { alive = false; clearInterval(id); };
}, [picked, serverId]);
const withAgo = list.map((p) => ({ ...p, ago: Math.max(0, (now - p.lastSignalAt) / 1000) }));
withAgo.sort((a, b) => a.ago - b.ago);
const pickedRow = picked ? (withAgo.find((p) => p.id === picked) || null) : null;
const q = query.trim().toLowerCase();
const filtered = q
? withAgo.filter((p) => p.name.toLowerCase().includes(q) || p.alliance.toLowerCase().includes(q))
: withAgo;
const onlineCount = withAgo.filter((p) => p.ago < 120).length;
const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
const pageC = Math.min(page, totalPages - 1);
const pageRows = filtered.slice(pageC * PER_PAGE, pageC * PER_PAGE + PER_PAGE);
const fromN = filtered.length === 0 ? 0 : pageC * PER_PAGE + 1;
const toN = Math.min(filtered.length, pageC * PER_PAGE + PER_PAGE);
return (
📡
{t("activity.title")}
{onlineCount} {t("activity.onlineNow")}
#
{t("tbl.name")}
{t("tbl.alliance")}
{t("tbl.status")}
{t("tbl.lastSignal")}
{loading ? (
) : (
{pageRows.length === 0 &&
{t("tbl.noMatch")} "{query}"
}
{pageRows.map((p, i) => {
const st = signalStatus(p.ago);
const order = pageC * PER_PAGE + i + 1;
return (
setPicked(p.id)}
>
{order}
{p.name}
{p.isYou && {t("tag.you")} }
{p.alliance}
{fmtSignal(p.ago)}
);
})}
)}
{!loading && filtered.length > PER_PAGE && (
{fromN}–{toN} {t("page.of")} {filtered.length}
setPage(pageC - 1)}>{t("page.prev")}
{pageC + 1} / {totalPages}
= totalPages - 1} onClick={() => setPage(pageC + 1)}>{t("page.next")}
)}
);
}
/* ───────────── hall of records (all-time records per event) ───────────── */
function fmtDaysAgo(d) {
if (d <= 0) return t("records.today");
if (d === 1) return t("records.yesterday");
if (d < 30) return d + t("time.dAgo");
if (d < 365) return Math.floor(d / 30) + t("time.moAgo");
return Math.floor(d / 365) + t("time.yAgo");
}
function HallOfRecords({ density }) {
const D = window.ES_DATA;
const events = D.RECORD_EVENTS;
const PER_PAGE = 40;
const [evKey, setEvKey] = useState(events[0].id);
const [entity, setEntity] = useState("players");
const [page, setPage] = useState(0);
const [query, setQuery] = useState("");
const curEv = events.find((e) => e.id === evKey) || events[0];
const isAlliance = entity === "alliances";
// Datos del evento+entidad. RECORDS[key] = { players:[], alliances:[] }.
const bucket = D.RECORDS[evKey] || { players: [], alliances: [] };
const all = bucket[entity] || [];
// Al cambiar de evento: si el nuevo no tiene la entidad actual, cae a la que
// tenga (preferimos jugadores). Evita listas vacías al saltar de chip.
useEffect(() => {
if (entity === "players" && !curEv.hasPlayers && curEv.hasAlliances) setEntity("alliances");
else if (entity === "alliances" && !curEv.hasAlliances && curEv.hasPlayers) setEntity("players");
}, [evKey]);
useEffect(() => { setPage(0); }, [evKey, entity, query]);
const q = query.trim().toLowerCase();
const filtered = q
? all.filter((p) => p.name.toLowerCase().includes(q) || p.alliance.toLowerCase().includes(q) || p.server.toLowerCase().includes(q))
: all;
const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
const pageC = Math.min(page, totalPages - 1);
const pageRows = filtered.slice(pageC * PER_PAGE, pageC * PER_PAGE + PER_PAGE);
const fromN = filtered.length === 0 ? 0 : pageC * PER_PAGE + 1;
const toN = Math.min(filtered.length, pageC * PER_PAGE + PER_PAGE);
const record = all[0];
// ¿Mostrar el toggle JUGADORES/ALIANZAS? Solo si el evento tiene de ambos.
const showEntityToggle = curEv.hasPlayers && curEv.hasAlliances;
return (
🏆
{t("records.title")}
{t("records.top")} · {curEv.name}
{/* event selector */}
{events.map((ev) => (
setEvKey(ev.id)}
>
{ev.icon} {ev.name}
))}
{/* players / alliances toggle (solo eventos con ambos rankings) */}
{showEntityToggle && (
setEntity("players")}
>{t("rankType.players")}
setEntity("alliances")}
>{t("rankType.alliances")}
)}
{/* absolute record banner */}
{record && (
👑
{t("records.world")} · {curEv.name}
{record.name} {record.server}
{fmt(record.score)}
{t("records.set")} {fmtDaysAgo(record.daysAgo)}
)}
#
{isAlliance ? t("tbl.alliance") : t("tbl.name")}
{!isAlliance &&
{t("tbl.alliance")}
}
{t("tbl.server")}
{t("tbl.record")}
{t("tbl.set")}
{pageRows.length === 0 &&
{t("tbl.noMatchRec")} "{query}"
}
{pageRows.map((p) => (
{p.rank}
{p.name}
{p.isNew && {t("tag.new")} }
{!isAlliance &&
{p.alliance}
}
{p.server}
{fmt(p.score)}
{fmtDaysAgo(p.daysAgo)}
))}
{filtered.length > PER_PAGE && (
{fromN}–{toN} {t("page.of")} {filtered.length}
setPage(pageC - 1)}>{t("page.prev")}
{pageC + 1} / {totalPages}
= totalPages - 1} onClick={() => setPage(pageC + 1)}>{t("page.next")}
)}
);
}
/* ───────────── app ───────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"eventStyle": "cards",
"accent": "#7A32E0",
"density": "regular",
"texture": true
}/*EDITMODE-END*/;
/* ───────── adaptadores API → shape que esperan los componentes ───────── */
function adaptRow(r) {
return {
id: String(r.player_id),
rank: r.rank,
name: r.name || "—",
alliance: r.alliance || t("alliance.noAlliance"),
score: r.score,
perMin: r.perMin || 0,
perHour: r.perHour || 0,
perDay: r.perDay || 0,
maxHit: r.maxHit || 0,
atkHour: r.atkHour || 0,
maxAttacks: r.maxAttacks || 0,
updatedMin: r.updatedSec == null ? 0 : Math.round(r.updatedSec / 60),
inactive: !!r.inactive,
gap: r.gap,
hourly: EMPTY24,
hourlyPrev: EMPTY24,
};
}
function adaptEvent(e) {
return {
key: e.key,
name: e.name,
short: e.short,
icon: e.icon,
unit: e.unit,
eid: e.eid,
tiers: e.tiers && e.tiers.length ? e.tiers : [{ lid: null, label: "ALL" }],
hasAlliances: e.hasAlliances,
entities: e.entities || "players", // 'players' | 'alliances' | 'both'
hasData: !!e.hasData,
pet: e.pet ?? null, // tipo de misión vigente (nobleza); null si no aplica
endsAt: e.endsAt ? Date.parse(e.endsAt) : null, // ms o null (sin timer)
rs: e.rs,
endedAgo: e.endedAgoSec,
endedAt: e.endedAt,
};
}
// Tipos de misión de la nobleza (PET = POINT_EVENT_TYPE). El Concurso de la
// Nobleza rota de misión cada día. Algunas misiones —tipo ruleta— NO publican
// un leaderboard consultable por la API del juego (el server reporta el nº de
// participantes pero no sirve la lista); en esos casos solo mostramos el tipo
// de misión, sin tabla de ranking. Ampliable conforme identifiquemos más PETs.
const NOBILITY_PET = {
17: { en: "Spin the Wheel", es: "Girar la ruleta", noRanking: true },
};
function petInfo(pet) {
return (pet != null && NOBILITY_PET[pet]) || null;
}
function petLabel(pet) {
const info = petInfo(pet);
if (!info) return null;
return info[window.__es_lang] || info.en;
}
// ¿Esta misión (PET) se sabe que no tiene ranking público?
function petHasNoRanking(pet) {
const info = petInfo(pet);
return !!(info && info.noRanking);
}
const byEndsAt = (a, b) => {
if (a.endsAt == null && b.endsAt == null) return 0;
if (a.endsAt == null) return 1; // los que no tienen timer, al final
if (b.endsAt == null) return -1;
return a.endsAt - b.endsAt;
};
// Primer evento con datos que mostrar (si no, el primero de la lista).
const firstEventKey = (list) => {
const e = list.find((x) => x.hasData) || list[0];
return e ? e.key : null;
};
function App({ user }) {
const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
// ── catálogos (servidores y eventos) desde la API ──
const [servers, setServers] = useState([]);
const [serverId, setServerId] = useState(null);
const [liveEvents, setLiveEvents] = useState([]);
const [endedEvents, setEndedEvents] = useState([]);
const [view, setView] = useState("live"); // "live" | "ended"
const [eventKey, setEventKey] = useState(null);
const [tierIdx, setTierIdx] = useState(0);
const [sortBy, setSortBy] = useState("score");
const [rankTypeIdx, setRankTypeIdx] = useState(0); // índice dentro de availableRankTypes
const [groupBy, setGroupBy] = useState("day");
const [pickedPlayer, setPickedPlayer] = useState(null);
const [pickedAct, setPickedAct] = useState(EMPTY_ACT);
// filas del ranking actual (datos crudos de la API, ya adaptados)
const [rawRows, setRawRows] = useState([]);
// cuenta marcada como "tú" por servidor (persistida por nombre)
const [youByServer, setYouByServer] = useState(() => {
try { return JSON.parse(localStorage.getItem("es_you") || "{}"); } catch (e) { return {}; }
});
const youName = serverId ? (youByServer[serverId] || null) : null;
const setYou = (name) => {
setYouByServer((prev) => {
const next = { ...prev };
if (name) next[serverId] = name; else delete next[serverId];
try { localStorage.setItem("es_you", JSON.stringify(next)); } catch (e) {}
return next;
});
};
const [tab, setTab] = useState("rankings");
const [lang, setLang] = useLangState();
const [version, setVersion] = useState(0);
const [movements, setMovements] = useState({});
const moveTimer = useRef(null);
const prevRanks = useRef({});
// ── alerts ──
const [alertCfg, setAlertCfg] = useState({
proximity: { on: true, gap: 1500000 },
overtaken: { on: true },
rankOut: { on: false, rank: 3 },
rivalSurge: { on: false, rate: 8000 },
stalled: { on: false },
ending: { on: false, mins: 60 },
});
const setRule = (key, patch) => setAlertCfg((c) => ({ ...c, [key]: { ...c[key], ...patch } }));
const [soundOn, setSoundOn] = useState(false);
const [soundType, setSoundType] = useState("chime");
const [activeAlerts, setActiveAlerts] = useState([]);
const [silenced, setSilenced] = useState(false);
const prevActiveRef = useRef([]);
// loaders del búho
const [booting, setBooting] = useState(true);
const [bootGone, setBootGone] = useState(false);
const [loading, setLoading] = useState(false);
useEffect(() => {
const id = setTimeout(() => setBooting(false), 1600);
const id2 = setTimeout(() => setBootGone(true), 2250);
return () => { clearTimeout(id); clearTimeout(id2); };
}, []);
const now = useNow(1000);
useEffect(() => {
document.body.classList.toggle("net-on", !!tw.texture);
}, [tw.texture]);
// 1) cargar la lista de servidores al inicio
useEffect(() => {
let alive = true;
window.ESApi.getServers()
.then((s) => { if (!alive) return; setServers(s); if (s.length) setServerId((c) => c || s[0].server); })
.catch((e) => console.error("[ES] servers:", e.message));
return () => { alive = false; };
}, []);
// 2) al cambiar de servidor: cargar eventos activos y terminados
useEffect(() => {
if (!serverId) return;
let alive = true;
Promise.all([
window.ESApi.getEvents(serverId, "active"),
window.ESApi.getEvents(serverId, "ended"),
]).then(([act, end]) => {
if (!alive) return;
const live = act.map(adaptEvent).sort(byEndsAt);
const ended = end.map(adaptEvent).sort((a, b) => (a.endedAgo || 0) - (b.endedAgo || 0));
setLiveEvents(live);
setEndedEvents(ended);
const list = view === "live" ? live : ended;
setEventKey((k) => (list.find((e) => e.key === k) ? k : firstEventKey(list)));
}).catch((e) => console.error("[ES] events:", e.message));
return () => { alive = false; };
}, [serverId]);
const events = view === "live" ? liveEvents : endedEvents;
const curEvent = events.find((e) => e.key === eventKey) || events[0] || null;
const activeKey = curEvent ? curEvent.key : null;
const tiers = curEvent ? curEvent.tiers : [{ lid: null, label: "ALL" }];
const safeTier = Math.min(tierIdx, Math.max(0, tiers.length - 1));
const curTier = tiers[safeTier] || { lid: null, label: "ALL" };
// RANKING TYPE limitado a lo que ofrece el evento (jugadores / alianzas / ambos).
// Recalcular con lang en deps para que las labels se re-traduzcan al cambiar idioma.
const availableRankTypes = useMemo(() => {
const map = getRankTypesByEntity();
return (curEvent && map[curEvent.entities]) || getRankTypes();
}, [curEvent, lang]);
const safeRankIdx = Math.min(rankTypeIdx, availableRankTypes.length - 1);
const rankType = availableRankTypes[safeRankIdx].key;
// Las alianzas no se dividen por liga: en esa vista el tier no aplica (lid null).
const isAllianceView = rankType === "alliances";
const tierLid = isAllianceView ? null : curTier.lid;
const levelLabels = isAllianceView ? ["ALL"] : tiers.map((x) => x.label);
const levelIndex = isAllianceView ? 0 : safeTier;
const switchView = (v) => {
if (v === view) return;
setView(v);
const list = v === "live" ? liveEvents : endedEvents;
setEventKey(firstEventKey(list));
setTierIdx(0);
};
// 3) cargar el ranking al cambiar la selección + polling real en vivo (7s)
useEffect(() => {
if (!serverId || !activeKey) { setRawRows([]); return; }
let alive = true;
let timer = null;
const entity = rankType === "alliances" ? "alliances" : "players";
const fetchRanking = (isPoll) => {
window.ESApi.getRanking(serverId, activeKey, { tier: tierLid, entity, ended: view !== "live" })
.then((res) => {
if (!alive) return;
const rows = (res.rows || []).map(adaptRow);
if (isPoll) {
const mv = {};
for (const p of rows) {
const before = prevRanks.current[p.id];
const d = (before == null ? p.rank : before) - p.rank;
if (d !== 0) mv[p.id] = d;
}
setMovements(mv);
clearTimeout(moveTimer.current);
moveTimer.current = setTimeout(() => setMovements({}), 2800);
}
prevRanks.current = {};
rows.forEach((p) => { prevRanks.current[p.id] = p.rank; });
setRawRows(rows);
setVersion((v) => v + 1);
setLoading(false);
})
.catch((e) => { if (alive) { console.error("[ES] ranking:", e.message); setLoading(false); } });
};
setLoading(true);
prevRanks.current = {};
fetchRanking(false);
if (view === "live") timer = setInterval(() => fetchRanking(true), 7000);
return () => { alive = false; if (timer) clearInterval(timer); clearTimeout(moveTimer.current); };
}, [serverId, activeKey, safeTier, rankType, view]);
// marca "tú" derivada por nombre
const rows = useMemo(
() => (youName ? rawRows.map((p) => (p.name === youName ? { ...p, isYou: true } : p)) : rawRows),
[rawRows, youName]
);
const tableRows = rows; // alianzas vienen ya servidas por la API (entity=alliances)
const picked = tableRows.find((p) => p.id === pickedPlayer) || null;
const youRow = youName ? rows.find((p) => p.isYou) : null;
// al cambiar de evento, resetea el tramo
// Al cambiar de evento: arranca en el ÚLTIMO tramo de nivel (jugadores de alto
// nivel, lo más interesante por defecto) y resetea el tipo de ranking.
useEffect(() => {
setTierIdx(curEvent ? Math.max(0, curEvent.tiers.length - 1) : 0);
setRankTypeIdx(0);
}, [activeKey]);
// al cambiar selección, deselecciona jugador
useEffect(() => { setPickedPlayer(null); }, [serverId, activeKey, safeTier, view]);
// auto-selecciona tu cuenta si está en este ranking
useEffect(() => {
if (!youName) return;
const you = rows.find((p) => p.isYou);
if (you) setPickedPlayer((cur) => cur || you.id);
}, [rawRows, youName]);
// 4) serie cruda del jugador elegido (panel de detalle, solo en vivo). El
// bucketing 5 min / 1 h / 1 día + drill-down se hace en DetailChart.
useEffect(() => {
if (!picked || !serverId || !activeKey || view !== "live") {
setPickedAct(EMPTY_ACT);
return;
}
let alive = true;
const entity = rankType === "alliances" ? "alliances" : "players";
window.ESApi.getPlayerActivity(serverId, activeKey, picked.id, { tier: tierLid, entity })
.then((d) => {
if (!alive) return;
setPickedAct({ refMs: d.refMs ?? null, series: d.series || [] });
})
.catch(() => {});
return () => { alive = false; };
}, [pickedPlayer, serverId, activeKey, safeTier, rankType, view]);
const pickedFull = picked
? { ...picked, refMs: pickedAct.refMs, series: pickedAct.series }
: null;
// evaluar alertas en cada refresco (solo en vivo y con cuenta marcada)
useEffect(() => {
if (view !== "live" || !youName || !curEvent) { prevActiveRef.current = []; setActiveAlerts([]); return; }
const next = evalAlerts(rows, movements, curEvent, Date.now(), alertCfg);
if (prevActiveRef.current.length === 0 && next.length > 0) setSilenced(false);
prevActiveRef.current = next;
setActiveAlerts(next);
}, [version, alertCfg, serverId, activeKey, safeTier, view, youName]);
// Sonido constante mientras haya alertas activas y no esté silenciado.
// BUG fixed: antes el effect dependía de `activeAlerts` (referencia nueva en
// cada render → Alarm.start() reiniciaba el bucle y disparaba un beep extra
// p.ej. al mover un slider o al activar un toggle de regla). Ahora dependemos
// de soundingLevel (high/mid/null) Y del conjunto de IDs activos (string
// estable); el effect solo se re-dispara cuando el conjunto cambia de verdad.
const soundingLevel = useMemo(() => {
if (!soundOn || silenced || activeAlerts.length === 0) return null;
return activeAlerts.some((a) => a.level === "high") ? "high" : "mid";
}, [soundOn, silenced, activeAlerts]);
const activeAlertsKey = useMemo(
() => activeAlerts.map((a) => a.id).sort().join("|"),
[activeAlerts]
);
useEffect(() => {
if (soundingLevel) Alarm.start(soundingLevel, soundType);
else Alarm.stop();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [soundingLevel, soundType, activeAlertsKey]);
const serverOpts = servers.map((s) => ({ value: s.server, text: s.label }));
// sortOpts depende de `lang` para retraducir labels al cambiar idioma.
const sortOpts = useMemo(() => [
{ value: "score", text: t("sort.points") },
{ value: "gap", text: t("sort.gap") },
{ value: "maxHit", text: t("sort.maxHit") },
{ value: "perHour", text: t("sort.perHour") },
{ value: "atkHour", text: t("sort.atkHour") },
{ value: "name", text: t("sort.name") },
], [lang]);
const liveSub = curEvent
? (curEvent.endsAt ? `${t("panel.ranking")} · ${fmtCountdown(curEvent.endsAt - now)} ${t("panel.left")}` : `${t("panel.ranking")} · ${t("panel.live")}`)
: "";
// Tipo de misión vigente (nobleza). Algunas misiones (tipo ruleta) no publican
// leaderboard: mostramos el tipo + un aviso en vez de una tabla vacía.
const missionLabel = curEvent ? petLabel(curEvent.pet) : null;
const noLeaderboard = view === "live" && !!curEvent && !curEvent.hasData
&& (petHasNoRanking(curEvent.pet) || (!loading && tableRows.length === 0));
return (
{!bootGone && (
EMPIRE SENTRY
{t("loader.init")}. . .
)}
{tab === "rankings" && (
{curEvent.icon}
{curEvent.name}
{missionLabel && (
{t("event.mission")}: {missionLabel}
)}
{view === "live" ? (
{liveSub}
) : (
{t("panel.finalResults")}
{t("panel.ended")} · {fmtAgoLong(curEvent.endedAgo || 0)}
)}
{noLeaderboard ? (
{curEvent.icon}
{missionLabel && (
{t("event.mission")}: {missionLabel}
)}
{t("event.noRanking")}
) : (
0 && (curEvent.endsAt - now) < 3 * 3600 * 1000}
live={view === "live"}
showBadges={view === "live" && rankType === "players"}
entity={rankType === "alliances" ? "alliance" : "player"}
unit={curEvent.unit}
/>
)}
) : (
{view === "live" ? t("empty.noActive") : t("empty.noEnded")}
)}
)}
{tab === "activity" && serverId && (
{/* compact: el wrapper no estira las cajas a ancho completo cuando hay una sola */}
)}
{tab === "records" && (
window.ES_DATA.RECORD_EVENTS.length
?
:
{t("empty.noRecords")}
)}
setTweak("eventStyle", v)}
/>
setTweak("accent", v)}
/>
setTweak("texture", v)} />
setTweak("density", v)}
/>
{t("auth.checking")}. . .
{t("auth.error")}
check.current()}>↻
;
}
if (status === "denied") {
return
{t("auth.deniedTitle")}
{t("auth.deniedSub")}
{t("auth.retry")}
;
}
// anon
return
{t("auth.loginTitle")}
{t("auth.loginSub")}
;
}
ReactDOM.createRoot(document.getElementById("root")).render( 
;
}
/* owl loading spinner — used full-screen on boot and inline per section */
function OwlLoader({ label, full, minHeight }) {
return (