Connect annual ranking snapshot to Stats frontend

This commit is contained in:
devRaGonSa
2026-06-08 14:33:22 +02:00
parent c8ba141a4f
commit 5e8dcabd16
4 changed files with 326 additions and 10 deletions

View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Consulta estadísticas personales de jugadores en el panel Stats de HLL Vietnam."
content="Consulta estadisticas personales de jugadores en el panel Stats de HLL Vietnam."
/>
<title>Stats - HLL Vietnam</title>
<link rel="stylesheet" href="./assets/css/styles.css" />
@@ -16,7 +16,7 @@
<div class="hero__overlay"></div>
<div class="hero__content">
<div class="hero__copy">
<p class="eyebrow eyebrow--section">Sección Stats</p>
<p class="eyebrow eyebrow--section">Seccion Stats</p>
<h1 class="hero__title">
Estadisticas
<span class="hero__title-accent">Personales</span>
@@ -48,7 +48,7 @@
<h2>Buscar por nombre o ID</h2>
</div>
<p class="panel__intro panel__intro--tight" id="stats-search-help">
Usa minimo 1 carácter para comenzar la consulta.
Usa minimo 1 caracter para comenzar la consulta.
</p>
<form class="stats-search-form" id="stats-search-form">
<label class="stats-search-form__label" for="stats-search-input">
@@ -102,15 +102,31 @@
<div class="panel__shell">
<div class="panel__header">
<p class="eyebrow eyebrow--section">Ranking anual</p>
<h2>Top 20 anual - Proximo despliegue</h2>
<h2>Top 20 anual</h2>
</div>
<p class="panel__intro panel__intro--tight">
Se reservará este bloque para integrar ranking anual snapshot cuando el endpoint esté activo.
El ranking anual consume snapshots precomputados de backend para evitar recalculo en cada vista.
</p>
<article class="stats-summary-card stats-summary-card--placeholder">
<p>Top 20 anual (futuro)</p>
<p>La implementación real de ranking anual se conectara en una siguiente tarea.</p>
</article>
<form class="stats-annual-form" id="stats-annual-form">
<label class="stats-search-form__label" for="stats-annual-year">Ano</label>
<div class="stats-search-form__fields">
<input
class="stats-search-input"
id="stats-annual-year"
type="number"
min="2019"
value=""
aria-describedby="stats-annual-state"
/>
<button class="discord-button" type="submit">
Cargar ranking
</button>
</div>
</form>
<p class="stats-state stats-state--neutral" id="stats-annual-state" role="status" aria-live="polite">
Esperando ano para cargar ranking anual.
</p>
<div class="stats-annual-table-wrap" id="stats-annual-content" aria-live="polite"></div>
</div>
</section>
</main>