// rankings-clans.jsx — Rankings podium/table + Élite del Ranking (clanes) const { useState: useStateR, useEffect: useEffectR } = React; /* ─────────────── Rankings (podium + table) ─────────────── */ function Rankings() { const ref = useReveal(); const [game, setGame] = useStateR('tsbg'); const [phase, setPhase] = useStateR('all'); // RANKINGS-WIRED (2026-05-15): consume el endpoint real /inicio/api/public/data // que devuelve { members: [...] } con rank/kills/phase/avatar/displayName. // Filtramos por phase si seleccionada y mostramos top 10 ordenado por rank. const [allMembers, setAllMembers] = useStateR([]); useEffectR(() => { let cancelled = false; const fetchData = async () => { try { let r = await fetch('api/public/data', { cache: 'no-store' }); if (!r.ok) r = await fetch('/inicio/api/public/data', { cache: 'no-store' }); if (!r.ok) return; const j = await r.json(); if (cancelled) return; const list = Array.isArray(j.members) ? j.members : (Array.isArray(j) ? j : []); setAllMembers(list); } catch (_) { /* empty state se muestra */ } }; fetchData(); const id = setInterval(fetchData, 60_000); return () => { cancelled = true; clearInterval(id); }; }, []); // Filtrar por phase si seleccionada, sortear por rank, tomar top 10 const filtered = allMembers .filter(m => phase === 'all' ? true : String(m.phase) === phase.replace('p', '')) .filter(m => { const r = Number(m.rank); return Number.isFinite(r) && r > 0; }) .sort((a, b) => Number(a.rank) - Number(b.rank)); const top3 = filtered.slice(0, 3).map(m => ({ rank: Number(m.rank), name: m.displayName || m.username || m.nickname || 'Jugador', avatar: m.avatar, elo: m.elo || (Number(m.kills) > 0 ? `${m.kills}` : '—'), phase: m.phase ? `P${m.phase}` : '—', kills: Number(m.kills) || 0, country: m.country || m.region || (m.phase ? `Phase ${m.phase}` : '—'), })); const table = filtered.slice(0, 10).map(m => ({ rank: Number(m.rank), name: m.displayName || m.username || m.nickname || 'Jugador', avatar: m.avatar, elo: m.elo || '—', kills: Number(m.kills) || 0, winrate: m.winrate || m.winRate || '—', phase: m.phase ? `P${m.phase}` : 'P0', d: m.delta || m.trend || '—', })); const phaseColors = { P5: { bg: 'color-mix(in srgb, var(--accent) 16%, transparent)', fg: 'var(--accent)' }, P4: { bg: 'color-mix(in srgb, var(--warn) 16%, transparent)', fg: 'var(--warn)' }, P3: { bg: 'color-mix(in srgb, var(--accent-2) 16%, transparent)', fg: 'var(--accent-2)' }, P2: { bg: 'color-mix(in srgb, #b06b2c 18%, transparent)', fg: '#d18a4a' }, P1: { bg: 'color-mix(in srgb, var(--text-muted) 18%, transparent)', fg: 'var(--text-dim)' }, }; // GAMES-REAL (2026-05-15): solo juegos que OneWay soporta hoy. NO inventar. const games = [ { id: 'tsb', label: 'TSB' }, { id: 'jjs', label: 'JJS' }, ]; // PHASES-REAL: Phase 0/1 = elite, Phase 5 = base. Filtrar por las mas competitivas. const phases = [ { id: 'all', label: 'Todas' }, { id: 'p0', label: 'Phase 0' }, { id: 'p1', label: 'Phase 1' }, { id: 'p2', label: 'Phase 2' }, ]; return (

Compite por la cima.} subtitle="Datos reales del ranking global, actualizado cada vez que un match termina. Sin estimaciones, sin ELO oculto." action={ Ranking completo } /> {/* Filters */}

Temporada · por definir

{/* Podium */} {/* Table */}

{['#', 'Jugador', 'ELO', 'Kills', 'Win rate', 'Phase', 'Δ'].map((h, i) => ( = 2 && i <= 4 ? 'right' : 'center', }}>{h} ))}

{table.length === 0 && (

Ranking conectando con el bot

Las posiciones se reflejan aquí cuando termine el próximo match verificado. Ejecutá .leaderboard en Discord para ver el ranking en vivo.

)} {table.map((p, i) => { const ph = phaseColors[p.phase] || phaseColors.P1; const wr = (typeof p.winrate === 'number') ? `${p.winrate}%` : (p.winrate || '—'); const dStr = String(p.d || '—'); const dColor = dStr.startsWith('+') ? 'var(--live)' : dStr.startsWith('-') ? 'var(--danger)' : 'var(--text-muted)'; return (

e.currentTarget.style.background = 'var(--surface-2)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}> {String(p.rank).padStart(2, '0')}

{p.avatar ? (

{ e.currentTarget.style.display = 'none'; }}/> ) : (

{(p.name || '?')[0].toUpperCase()}

)} {p.name}

{p.elo} {Number(p.kills || 0).toLocaleString()} {wr} {p.phase} {dStr}

); })}

Ver ranking completo

); } function FilterGroup({ label, value, options, onChange }) { return (

{label}

{options.map(o => { const active = o.id === value; return ( ); })}

); } /* Podium with #1 in center elevated, #2 left, #3 right */ function Podium({ top3 }) { // Sorted to render order: 2, 1, 3 (already in that order) const heights = { 1: 168, 2: 124, 3: 96 }; const medals = { 1: { bg: 'linear-gradient(180deg, #FFE186 0%, #B88930 100%)', glow: '#FFCD61', label: 'Campeón' }, 2: { bg: 'linear-gradient(180deg, #D6D9E3 0%, #7A7F8B 100%)', glow: '#C0C4CE', label: 'Subcampeón' }, 3: { bg: 'linear-gradient(180deg, #E0935A 0%, #7B4220 100%)', glow: '#D08456', label: 'Tercer lugar' }, }; return (

{top3.map((p, i) => { const m = medals[p.rank]; const isFirst = p.rank === 1; return (

{/* Crown for #1 */} {isFirst && ( )} {/* Avatar */} {p.avatar ? (

{ e.currentTarget.style.display = 'none'; }}/> ) : (

{(p.name || '?')[0].toUpperCase()}

)} {/* Name */}

{p.name || 'Jugador'}

{p.country || '—'} · ELO {p.elo || '—'}

{/* Pedestal */}

{/* Medal */}

{p.rank}

{m.label}

{Number(p.kills || 0).toLocaleString()}

kills

{/* Subtle background accent */}

); })}

); } /* ─────────────── Élite del ranking — clanes ─────────────── */ function ClanesElite() { const ref = useReveal(); // CLANS-WIRED: el endpoint /clans/api/clans del wepage container devuelve la // lista enriquecida (con leader info, banner, status). Probamos ese primero // — es el único path que llega al handler local de wepage en producción // (verificado con route-probe.json: /clans/api/clans → 200 + 29KB JSON, // mientras que /inicio/api/public/clans se proxea al bot que devuelve la // versión sin leaders enriquecidos). const [clans, setClans] = useStateR([]); useEffectR(() => { let cancelled = false; const fetchClans = async () => { // Fallback chain — first working URL wins, JSON shape is normalized. const urls = [ '/clans/api/clans', // wepage-local handler (preferred) '/inicio/api/public/clans', // proxied to bot (basic shape) 'api/public/clans', // relative — only works on /inicio/ ]; for (const u of urls) { try { const r = await fetch(u, { cache: 'no-store' }); if (!r.ok) continue; const j = await r.json(); if (cancelled) return; const list = Array.isArray(j) ? j : (Array.isArray(j.clans) ? j.clans : []); if (list.length === 0) continue; setClans(list); return; } catch (_) { /* try next URL */ } } }; fetchClans(); const id = setInterval(fetchClans, 60_000); return () => { cancelled = true; clearInterval(id); }; }, []); // ── Liveness filter ────────────────────────────────────────────────────── // The /clans/api/clans payload retains historical entries after the bot // leaves the guild or the clan disbands. Without filtering, dead clans // keep their stored `rank` field and show up in Elite forever. // // A clan is "live" only when ALL of these are true: // 1. botActive !== false (bot still in guild) // 2. memberCount > 0 when the field is numeric (guild has members) // 3. name does NOT match the stale-marker regex (staff retired marker) // 4. asciiized name not in STALE_CLAN_NAMES (curated blocklist) // 5. id not in STALE_CLAN_IDS (curated blocklist) // // Why a curated list: some clans (e.g. "Los Inservibles") still have // botActive=null/true in the KV but are gone from the OneWay roster. // Staff knows internally but the bot's auto-cleanup hasn't run. The // user/staff can add IDs or asciiized names here as they retire clans. // // asciiize() handles Discord's "fancy" Unicode names (mathematical bold, // double-struck, etc.) — NFKD normalization decomposes them to plain // letters so "𝐋𝐨𝐬 𝐈𝐧𝐬𝐞𝐫𝐯𝐢𝐛𝐥𝐞𝐬" matches "los inservibles". const asciiize = (s) => { if (typeof s !== 'string') return ''; try { return s.normalize('NFKD') .replace(/[̀-ͯ]/g, '') // strip combining diacritics .toLowerCase() .replace(/[^a-z0-9 ]+/g, ' ') // strip everything not ascii alnum/space .replace(/\s+/g, ' ').trim(); } catch (_) { return String(s).toLowerCase(); } }; const STALE_NAME_RE = /\b\((?:merged|disbanded|dead|inactivo|inactive|cerrado)\)|·\s*ex\b|\bex\s*#\d+/i; const STALE_CLAN_NAMES = new Set([ 'los inservibles', // user-reported 2026-05-16: bot ya no en el guild ]); const STALE_CLAN_IDS = new Set([ // Para agregar: id de Discord guild del clan retirado. ]); const isLiveClan = (c) => { if (!c) return false; if (c.botActive === false) return false; if (typeof c.memberCount === 'number' && c.memberCount <= 0) return false; if (typeof c.name === 'string' && STALE_NAME_RE.test(c.name)) return false; if (typeof c.name === 'string' && STALE_CLAN_NAMES.has(asciiize(c.name))) return false; if (c.id && STALE_CLAN_IDS.has(String(c.id))) return false; return true; }; const liveClans = clans.filter(isLiveClan); // Elite ranking strategy: // 1. If any LIVE clan has a real numeric rank, take the ranked ones first // (sorted by rank ascending) and preserve their stored rank as label. // 2. If after the liveness filter we have fewer than 5 ranked clans, // backfill with the largest OFFICIAL clans still alive. This was the // "hueco que falta" reported by the user — Los Inservibles (#4) + // Eclipse merged (#25) got dropped, leaving 4 cards instead of 5. // Backfilled entries are labeled "—" (no real rank, just a featured slot). // 3. If no clan has any rank at all, synthesize ranks 1..5 from the top 5 // official clans by memberCount. const ranked = liveClans .filter(c => Number.isFinite(Number(c.rank)) && Number(c.rank) > 0) .sort((a, b) => Number(a.rank) - Number(b.rank)); const hasRealRanks = ranked.length > 0; let eliteSource; if (hasRealRanks) { const seenIds = new Set(); const out = []; // First pass: ranked LIVE clans for (const c of ranked.slice(0, 5)) { out.push({ ...c, __rank: Number(c.rank), __synthetic: false }); if (c.id) seenIds.add(String(c.id)); if (c.name) seenIds.add(String(c.name)); } // Backfill: largest officials not already in the list if (out.length < 5) { const backfillPool = liveClans .filter(c => (c.status || 'community') === 'official') .filter(c => !seenIds.has(String(c.id)) && !seenIds.has(String(c.name))) .sort((a, b) => (Number(b.memberCount) || 0) - (Number(a.memberCount) || 0)); for (const c of backfillPool) { if (out.length >= 5) break; out.push({ ...c, __rank: null, __synthetic: true }); } } eliteSource = out; } else { eliteSource = liveClans .filter(c => (c.status || 'community') === 'official') .sort((a, b) => (Number(b.memberCount) || 0) - (Number(a.memberCount) || 0)) .slice(0, 5) .map((c, i) => ({ ...c, __rank: i + 1, __synthetic: true })); } // The /clans/api/clans endpoint ships staff in two fields: // · c.leader — the primary leader (string OR {displayName, ...} object) // · c.leaders — array of all directive staff (objects with .displayName, // .username, .avatar, .id) — same shape /clans page uses // // The previous EliteCard only displayed the primary as "Líder · X", which is // wrong when a clan has multiple founders/co-leaders (e.g. Zero Hex: 4.yin, // ijezko, _luar_la_l_). Now we collect ALL display names, dedupe, and pass // an array to the card so it can render the full staff list. const leaderName = (l) => { if (!l) return null; if (typeof l === 'string') return l.trim() || null; return l.displayName || l.username || l.tag || l.name || null; }; const leaderAvatar = (l) => { if (!l || typeof l !== 'object') return null; return l.avatar || l.avatarUrl || null; }; const collectStaff = (c) => { const out = []; const seen = new Set(); const push = (l) => { const name = leaderName(l); if (!name) return; const key = name.toLowerCase(); if (seen.has(key)) return; seen.add(key); out.push({ name, avatar: leaderAvatar(l), id: (l && typeof l === 'object' && l.id) || null }); }; if (Array.isArray(c.leaders)) c.leaders.forEach(push); push(c.leader); return out; }; const eliteWired = eliteSource.map(c => { const staff = collectStaff(c); return { rank: c.__rank, synthetic: Boolean(c.__synthetic), tag: String(c.id || c.name || '?').slice(-3).toUpperCase(), name: c.name || 'Clan', logo: c.logo || c.logoUrl || null, banner: c.banner || c.bannerUrl || null, members: c.memberCount || 0, staff, // [{name, avatar, id}, ...] isChamp: c.__rank === 1, elo: c.averageRank || '—', wr: c.winRate || '—', }; }); // Directory = the rest. If we used member-count-based elite, exclude those // IDs from the directory so the same clan doesn't appear twice. Also runs // through the same liveness filter so dead/merged clans never leak in here. const eliteIds = new Set(eliteSource.map(c => String(c.id || c.name))); const directoryWired = liveClans .filter(c => !eliteIds.has(String(c.id || c.name))) .slice(0, 12) .map(c => ({ id: c.id, tag: String(c.id || c.name || '?').slice(-3).toUpperCase(), name: c.name || 'Clan', logo: c.logo || c.logoUrl || null, members: c.memberCount || 0, status: c.status || 'community', leader: leaderName(c.leader), })); const tr = (window.OW_useT ? window.OW_useT() : (k) => k); return (

{tr('sec.clanes.title.a')} {tr('sec.clanes.title.b')}} subtitle={tr('sec.clanes.sub')} action={ {tr('sec.clanes.register')} } /> {/* Top 5 elite */}

Élite del ranking

{eliteWired.length === 0 ? (

Ranking aún en formación

Los 5 clanes top aparecen acá cuando completen su primera temporada verificada. Mientras tanto, registrá tu clan con .clan register en Discord.

) : (

{eliteWired.map(c => )}

)}

{/* Global directory */}

Directorio global de clanes

{directoryWired.length === 0 ? (

El directorio público se llena con los clanes verificados manualmente. Pasá por oneway.lat/clans para ver el listado vivo.

) : ( <>

{directoryWired.map(c => )}

Ver los {clans.length} clanes registrados

)}

); } /* EliteCard simplificada: usa c.logo real del CDN Discord + name + rank + members. Si c.synthetic, el slot es un backfill (no tiene rank real, lo mostramos como "Destacado" en var(--accent-2) sin badge dorado de champion). */ function EliteCard({ c }) { const rankColors = { 1: 'var(--warn)', 2: 'var(--text-dim)', 3: '#FF7340', 4: 'var(--accent)', 5: 'var(--accent-2)' }; const rankColor = c.synthetic ? 'var(--accent-2)' : (rankColors[c.rank] || 'var(--accent)'); const isChamp = !c.synthetic && (c.isChamp || c.rank === 1); const labelText = isChamp ? 'Campeón' : (c.synthetic || !Number.isFinite(Number(c.rank)) ? 'Destacado' : `Rank #${c.rank}`); return (

{ e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; e.currentTarget.style.borderColor = isChamp ? 'var(--warn)' : 'var(--border-strong)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = isChamp ? `color-mix(in srgb, var(--warn) 40%, var(--border))` : 'var(--border)'; }}> {/* Banner layer. Priority: explicit guild banner -> logo-as-backdrop (blurred + dimmed, same trick /clans uses) -> last-resort gradient with subtle warm/cool variant for champion vs. others. Avoids the flat blue plate that everyone complained about. */}

{/* Backdrop layer (z=0): banner if provided, else logo-as-banner, else gradient */} {c.banner ? ( { e.currentTarget.style.display = 'none'; }} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.78) saturate(1.05)', zIndex: 0, }}/> ) : c.logo ? ( { e.currentTarget.style.display = 'none'; }} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transform: 'scale(1.18)', filter: 'blur(18px) brightness(0.5) saturate(1.1)', zIndex: 0, }}/> ) : (

)} {/* Overlay (z=1): legibility scrim, slightly warmer on champion */}

{/* Foreground logo or tag (z=2) */} {c.logo ? (

{ e.currentTarget.style.display = 'none'; }}/> ) : (

{c.tag}

)}

{isChamp && } {!isChamp && c.synthetic && } {labelText}

{c.name}

{/* Member counter */}

{Number(c.members || 0).toLocaleString()} miembros

{/* Staff directivo — same data /clans page uses for STAFF DIRECTIVO chips */} {Array.isArray(c.staff) && c.staff.length > 0 && (

Staff directivo

{c.staff.slice(0, 3).map((s, idx) => (

{s.avatar ? (

{ e.currentTarget.style.visibility = 'hidden'; }}/> ) : (

{(s.name || '?')[0].toUpperCase()}

)} {s.name}

))} {c.staff.length > 3 && (

+ {c.staff.length - 3} más

)}

)}

); } function DirCard({ c }) { const statusColors = { official: { bg: 'color-mix(in srgb, var(--accent) 14%, transparent)', fg: 'var(--accent)', label: 'OFICIAL' }, community: { bg: 'color-mix(in srgb, var(--text-muted) 14%, transparent)', fg: 'var(--text-dim)', label: 'COMUNIDAD' }, allied: { bg: 'color-mix(in srgb, var(--live) 14%, transparent)', fg: 'var(--live)', label: 'ALIADO' }, }; const s = statusColors[c.status] || statusColors.community; return (

{ e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = 'var(--border-strong)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--border)'; }}>

{c.logo ? (

{ e.currentTarget.style.display = 'none'; }}/> ) : (

{c.tag}

)}

{c.name}

{c.leader ? `Líder · ${c.leader}` : '—'}

{s.label} {Number(c.members || 0).toLocaleString()} mbr

); } Object.assign(window, { Rankings, ClanesElite });