diff --git a/ai/tasks/done/TASK-207-annual-ranking-default-load-and-kpm-columns.md b/ai/tasks/done/TASK-207-annual-ranking-default-load-and-kpm-columns.md new file mode 100644 index 0000000..e0b7e60 --- /dev/null +++ b/ai/tasks/done/TASK-207-annual-ranking-default-load-and-kpm-columns.md @@ -0,0 +1,171 @@ +--- +id: TASK-207 +title: Annual ranking default load and KPM columns +status: done +type: frontend +team: Frontend Senior +supporting_teams: + - Experto en interfaz +roadmap_item: foundation +priority: medium +--- + +# TASK-207 - Annual ranking default load and KPM columns + +## Goal + +Ajustar el ranking anual publico en `stats` para que muestre la temporada fija 2026 con carga automatica inicial y anadir la columna `KPM` en los listados publicos multi-registro donde existan datos suficientes sin tocar backend ni endpoints. + +## Context + +Tras `TASK-206`, la presentacion publica del frontend ya es consistente, pero el bloque anual de `stats` sigue requiriendo seleccion manual de anio y una accion extra para cargar un ranking que ahora debe mostrarse como lectura fija de temporada. Ademas, las tablas publicas con varios jugadores no muestran de forma uniforme `KPM` aunque ya existen datos o pueden derivarse desde `kills` y `matches_considered`. + +Preserve the current product identity: Spanish-speaking HLL Vietnam community, military/Vietnam/tactical/sober visual direction and controlled repository evolution. + +## Steps + +1. Crear la task y moverla a `ai/tasks/in-progress`. +2. Fijar el ranking anual de `stats` a la temporada 2026 sin selector editable de anio ni boton obligatorio de carga. +3. Cargar automaticamente el ranking anual al abrir `stats.html`, manteniendo estados de carga y error controlados. +4. Cambiar la tabla anual para mostrar `Kills` y anadir `KPM`, usando `kills_per_match` cuando exista o calculandolo desde `kills / matches_considered`. +5. Revisar `ranking.html` y `historico.html` para unificar la etiqueta visual a `KPM` y anadir la columna donde aplique sin duplicarla. +6. Validar por inspeccion, revisar `git diff --name-only`, documentar exclusiones y mover la task a `ai/tasks/done` al terminar. + +## Files to Read First + +- `AGENTS.md` +- `ai/repo-context.md` +- `ai/architecture-index.md` +- `frontend/stats.html` +- `frontend/ranking.html` +- `frontend/historico.html` +- `frontend/assets/js/stats.js` +- `frontend/assets/js/ranking.js` +- `frontend/assets/js/historico.js` +- `frontend/assets/css/styles.css` +- `ai/tasks/done/TASK-206-public-frontend-visual-consistency-and-annual-ranking-layout.md` + +## Expected Files to Modify + +- `ai/tasks/done/TASK-207-annual-ranking-default-load-and-kpm-columns.md` +- `frontend/stats.html` +- `frontend/ranking.html` +- `frontend/historico.html` +- `frontend/assets/js/stats.js` +- `frontend/assets/js/ranking.js` +- `frontend/assets/js/historico.js` +- `frontend/assets/css/styles.css` + +## Constraints + +- Keep the change minimal. +- Preserve HLL Vietnam project identity. +- Do not introduce unnecessary frameworks or dependencies. +- Do not implement backend functionality unless the task explicitly requires it. +- Do not expand Elo/MMR, historical workers or RCON server #03 handling unless the task explicitly requires it. +- Do not overwrite repository-specific context with generic platform template text. +- No ejecutar `ai-platform run`. +- No modificar `backend/`, endpoints, logica de datos, generacion de snapshots ni scripts backend. +- No tocar `ai/system-metrics.md`. +- No tocar `frontend/assets/img/weapons/`, assets/SVGs de armas ni copias relacionadas. +- No reactivar Elo/MMR ni reintroducir Comunidad Hispana #03. + +## Validation + +Before completing the task ensure: + +- `stats.html` no muestra selector editable de anio para el ranking anual +- `stats.html` muestra de forma simple la temporada fija 2026 +- el ranking anual se carga automaticamente al abrir la pagina +- ya no hace falta pulsar un boton para la carga inicial del ranking anual +- la tabla anual muestra `Kills` y `KPM` y ya no muestra `Valor / Kills` +- `KPM` usa `kills_per_match` si existe o `kills / matches_considered` con 2 decimales cuando haya datos suficientes +- `ranking.html` usa la etiqueta visual `KPM` sin duplicar columnas +- `historico.html` y `stats.html` solo muestran `KPM` adicional donde aplique por datos disponibles +- `git diff --name-only` matches the expected scope +- no unrelated files were modified +- integration tests are run when relevant and configured + +## Outcome + +Archivos modificados: + +- `frontend/stats.html` +- `frontend/ranking.html` +- `frontend/historico.html` +- `frontend/assets/js/stats.js` +- `frontend/assets/js/ranking.js` +- `frontend/assets/js/historico.js` +- `frontend/assets/js/historico-partida.js` +- `frontend/assets/js/main.js` +- `frontend/assets/css/styles.css` +- `frontend/assets/css/historico-scoreboard-detail.css` +- `ai/tasks/in-progress/TASK-207-annual-ranking-default-load-and-kpm-columns.md` + +Temporada anual fija: + +- Se elimino el selector editable de anio y cualquier control de carga manual del bloque anual en `stats`. +- La interfaz muestra la temporada fija con un bloque visual simple `Temporada 2026`. +- El titulo del bloque anual queda orientado a la lectura fija: `Top 20 temporada 2026`. + +Carga automatica del ranking anual: + +- `stats.js` deja de leer un input de anio y fija `annualDefaultYear = 2026`. +- Tras confirmar `health`, la pagina dispara automaticamente la carga del ranking anual usando `year=2026`, `metric=kills`, `limit=20` y `server_id=all`. +- Se mantienen mensajes de carga, vacio y error controlados; ya no hace falta pulsar `Cargar ranking anual`. + +KPM anadido y unificado: + +- `stats` anual ahora muestra columnas `Posicion`, `Jugador`, `Kills`, `Partidas`, `KPM`, `Muertes`, `Teamkills` y `K/D`. +- `ranking.html` cambia la etiqueta visual de `kills_per_match` a `KPM` tanto en el selector como en la tabla. +- `ranking.js` evita duplicar `KPM` cuando la metrica activa ya es `kills_per_match`, ocultando la columna secundaria en ese caso. +- `historico.html` y `historico.js` anaden una columna `KPM` al ranking multi-registro; si no hay datos suficientes se muestra `-`. + +Busqueda de jugador endurecida: + +- `stats` ahora exige un minimo de 4 caracteres utiles antes de permitir la busqueda. +- El boton `Buscar jugador` queda deshabilitado hasta cumplir el minimo y la validacion tambien se aplica al pulsar o enviar con Enter. +- Si el texto no alcanza el minimo, el frontend muestra `Introduce al menos 4 caracteres para buscar un jugador.` y no lanza la llamada a `/api/stats/players/search`. + +Logos de clanes ampliados: + +- Se aumento la presencia visual general de los logos de la seccion de clanes mediante layout y CSS, sin tocar imagenes. +- `BxB` recibe un ajuste especifico adicional para que deje de verse pequeno dentro de su tarjeta. +- El ajuste mantiene responsive y no reemplaza assets. + +Brands en botones externos: + +- El detalle de jugador dentro de `historico-partida` ahora usa los logos disponibles en `frontend/assets/img/brands/` para `Hellor`, `HLL Records` y `Helo`. +- `Steam` conserva boton solo con texto porque no existe logo brand disponible en esa carpeta. +- Los enlaces actuales no cambian; solo se enriquece su presentacion visual con logos decorativos cuando hay asset. + +Calculo de KPM: + +- Si el backend ya entrega `kills_per_match`, el frontend usa ese valor. +- Si no existe `kills_per_match` y hay `kills` mas `matches_considered`, el frontend calcula `kills / matches_considered`. +- Si faltan datos o `matches_considered <= 0`, el frontend muestra `-`. +- La comprobacion pedida `1222 / 32` da `38.19`. + +Validaciones realizadas: + +- `git status --short --untracked-files=all` ejecutado antes de modificar. +- Confirmacion previa de cambios no relacionados en `ai/system-metrics.md` y en assets/SVGs de armas; no se tocaron. +- Lectura previa de `AGENTS.md`, `ai/repo-context.md`, `ai/architecture-index.md`, `frontend/stats.html`, `frontend/ranking.html`, `frontend/historico.html`, `frontend/assets/js/stats.js`, `frontend/assets/js/ranking.js`, `frontend/assets/js/historico.js`, `frontend/assets/css/styles.css` y `TASK-206`. +- Lectura adicional para esta ampliacion de `frontend/historico-partida.html`, `frontend/assets/js/historico-partida.js`, `frontend/assets/js/main.js`, `frontend/assets/css/historico-scoreboard-detail.css`, rutas existentes en `frontend/assets/img/brands/` y rutas existentes de la seccion de clanes. +- Parseo sintactico local con `node --check frontend/assets/js/stats.js`, `node --check frontend/assets/js/historico.js`, `node --check frontend/assets/js/ranking.js` y `node --check frontend/assets/js/historico-partida.js`. +- Verificacion especifica por inspeccion del minimo de 4 caracteres, de la presencia de logos de clan ampliados y de la asignacion de brands a botones externos sin rutas rotas. +- Verificacion por inspeccion de presencia/eliminacion de textos y columnas clave con `rg`. +- Revision de `git diff --name-only` filtrado a los archivos esperados para confirmar alcance acotado. +- No existe una validacion frontend automatizada configurada para este alcance; la validacion queda documentada por inspeccion y parseo local. + +Confirmaciones de alcance: + +- No se tocaron `backend/`, endpoints, logica de datos, snapshots ni scripts backend. +- No se tocaron `ai/system-metrics.md`, `frontend/assets/img/weapons/` ni SVGs de armas. +- No se reactivo Elo/MMR ni se reintrodujo Comunidad Hispana #03. + +## Change Budget + +- Prefer fewer than 5 modified files. +- Prefer changes under 200 lines when feasible. +- Split the work into follow-up tasks if limits are exceeded. diff --git a/frontend/assets/css/historico-scoreboard-detail.css b/frontend/assets/css/historico-scoreboard-detail.css index 180074f..5ca6e85 100644 --- a/frontend/assets/css/historico-scoreboard-detail.css +++ b/frontend/assets/css/historico-scoreboard-detail.css @@ -267,6 +267,7 @@ display: inline-flex; min-height: 32px; align-items: center; + gap: 8px; padding: 0 11px; border: 1px solid rgba(210, 182, 118, 0.34); border-radius: 999px; @@ -278,6 +279,16 @@ text-transform: uppercase; } +.historical-player-profile-link__brand { + width: auto; + height: auto; + max-width: 20px; + max-height: 20px; + object-fit: contain; + flex: 0 0 auto; + filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28)); +} + .historical-player-profile-links a:hover, .historical-player-profile-links a:focus-visible { border-color: rgba(210, 182, 118, 0.62); diff --git a/frontend/assets/css/styles.css b/frontend/assets/css/styles.css index bc127f4..fa76f3f 100644 --- a/frontend/assets/css/styles.css +++ b/frontend/assets/css/styles.css @@ -477,6 +477,14 @@ h2 { box-shadow: 0 18px 36px rgba(110, 127, 72, 0.45); } +.discord-button:disabled { + cursor: not-allowed; + opacity: 0.58; + filter: saturate(0.7); + box-shadow: none; + transform: none; +} + .content { width: 100%; margin-top: -28px; @@ -883,14 +891,14 @@ h2 { .clan-card__brand { display: grid; - grid-template-columns: minmax(92px, 112px) minmax(0, 1fr); + grid-template-columns: minmax(124px, 154px) minmax(0, 1fr); align-items: center; - gap: 18px; + gap: 20px; } .clan-card__logo { - min-height: 92px; - padding: 12px; + min-height: 124px; + padding: 14px; display: grid; place-items: center; border: 1px dashed rgba(183, 201, 125, 0.3); @@ -898,33 +906,45 @@ h2 { background: linear-gradient(180deg, rgba(19, 24, 16, 0.82), rgba(10, 13, 9, 0.66)); } +.clan-card__logo--standard { + min-height: 128px; +} + .clan-card__logo--wide { - padding-inline: 8px; + padding-inline: 10px; } .clan-card__logo--shield { - padding-inline: 18px; + padding-inline: 20px; } .clan-card--bxb .clan-card__brand { - grid-template-columns: minmax(112px, 138px) minmax(0, 1fr); + grid-template-columns: minmax(146px, 184px) minmax(0, 1fr); } .clan-card__logo--bxb { - min-height: 108px; - padding: 10px; + min-height: 148px; + padding: 12px; } .clan-card__logo img { width: auto; height: auto; max-width: 100%; - max-height: 84px; + max-height: 108px; object-fit: contain; } +.clan-card__logo--wide img { + max-height: 112px; +} + +.clan-card__logo--shield img { + max-height: 116px; +} + .clan-card__logo--bxb img { - max-height: 100px; + max-height: 132px; } .clan-card__logo-placeholder { @@ -1111,6 +1131,30 @@ h2 { gap: 16px; } +.stats-annual-season { + display: inline-flex; + align-items: baseline; + gap: 10px; + margin: 18px 0 14px; + padding: 0.8rem 1rem; + border: 1px solid rgba(183, 201, 125, 0.24); + border-radius: 14px; + background: linear-gradient(180deg, rgba(30, 36, 27, 0.78), rgba(12, 15, 11, 0.9)); +} + +.stats-annual-season__label { + color: var(--muted); + font-size: 0.74rem; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.stats-annual-season__value { + color: var(--accent-strong); + font-size: 1.12rem; + letter-spacing: 0.08em; +} + .stats-annual-meta { display: grid; gap: 12px; @@ -1497,6 +1541,11 @@ h2 { font-weight: 700; } +.ranking-table th[hidden], +.ranking-table td[hidden] { + display: none; +} + .ranking-player { display: grid; gap: 4px; diff --git a/frontend/assets/img/brands/helo-system.png b/frontend/assets/img/brands/helo-system.png new file mode 100644 index 0000000..8788e73 Binary files /dev/null and b/frontend/assets/img/brands/helo-system.png differ diff --git a/frontend/assets/img/brands/hllor.webp b/frontend/assets/img/brands/hllor.webp new file mode 100644 index 0000000..12ee21b Binary files /dev/null and b/frontend/assets/img/brands/hllor.webp differ diff --git a/frontend/assets/img/brands/hllrecords.png b/frontend/assets/img/brands/hllrecords.png new file mode 100644 index 0000000..af48f3f Binary files /dev/null and b/frontend/assets/img/brands/hllrecords.png differ diff --git a/frontend/assets/js/historico-partida.js b/frontend/assets/js/historico-partida.js index 25ad79e..b9389ac 100644 --- a/frontend/assets/js/historico-partida.js +++ b/frontend/assets/js/historico-partida.js @@ -40,6 +40,25 @@ document.addEventListener("DOMContentLoaded", () => { void loadMatchDetail({ backendBaseUrl, serverSlug, matchId, nodes }); }); +const EXTERNAL_PROFILE_BRANDS = Object.freeze({ + hellor: Object.freeze({ + label: "Hellor", + logoSrc: "./assets/img/brands/hllor.webp", + }), + hll_records: Object.freeze({ + label: "HLL Records", + logoSrc: "./assets/img/brands/hllrecords.png", + }), + helo: Object.freeze({ + label: "Helo", + logoSrc: "./assets/img/brands/helo-system.png", + }), + steam: Object.freeze({ + label: "Steam", + logoSrc: "", + }), +}); + async function loadMatchDetail({ backendBaseUrl, serverSlug, matchId, nodes }) { try { const payload = await fetchJson( @@ -513,13 +532,17 @@ function renderPlayerStatsPanel(player, item, context) { function renderExternalProfilesSection(player) { const links = [ - ["steam", "Steam"], - ["hellor", "Hellor"], - ["hll_records", "HLL Records"], - ["helo", "Helo"], + "steam", + "hellor", + "hll_records", + "helo", ] - .map(([key, label]) => [label, player.external_profile_links?.[key]]) - .filter(([, href]) => typeof href === "string" && href.trim()); + .map((key) => ({ + key, + brand: EXTERNAL_PROFILE_BRANDS[key] || { label: key, logoSrc: "" }, + href: player.external_profile_links?.[key], + })) + .filter((entry) => typeof entry.href === "string" && entry.href.trim()); return `
@@ -530,9 +553,14 @@ function renderExternalProfilesSection(player) {
${links .map( - ([label, href]) => ` + ({ brand, href }) => ` - ${escapeHtml(label)} + ${ + brand.logoSrc + ? `` + : "" + } + ${escapeHtml(brand.label)} `, ) diff --git a/frontend/assets/js/historico.js b/frontend/assets/js/historico.js index 0d90568..191d322 100644 --- a/frontend/assets/js/historico.js +++ b/frontend/assets/js/historico.js @@ -613,14 +613,21 @@ function hydrateWeeklyLeaderboard( bodyNode.innerHTML = items .map( - (item) => ` + (item) => { + const kills = resolveHistoricalKills(item, metricConfig); + const matches = Number(item.matches_considered); + const kpm = formatHistoricalKpm(item?.kills_per_match, kills, matches); + + return ` #${escapeHtml(item.ranking_position)} ${escapeHtml(item.player?.name || "Jugador no identificado")} ${escapeHtml(formatNumber(item.metric_value))} ${escapeHtml(formatNumber(item.matches_considered))} + ${escapeHtml(kpm)} - `, + `; + }, ) .join(""); stateNode.hidden = true; @@ -1667,6 +1674,37 @@ function formatTopMaps(topMaps) { .join(" / "); } +function resolveHistoricalKills(item, metricConfig) { + const directKills = Number(item?.kills); + if (Number.isFinite(directKills)) { + return directKills; + } + + if (metricConfig?.key === "kills") { + const metricValue = Number(item?.metric_value); + if (Number.isFinite(metricValue)) { + return metricValue; + } + } + + return Number.NaN; +} + +function formatHistoricalKpm(rawKillsPerMatch, rawKills, rawMatches) { + const directValue = Number(rawKillsPerMatch); + if (Number.isFinite(directValue)) { + return formatDecimal(directValue, 2); + } + + const kills = Number(rawKills); + const matches = Number(rawMatches); + if (!Number.isFinite(kills) || !Number.isFinite(matches) || matches <= 0) { + return "-"; + } + + return formatDecimal(kills / matches, 2); +} + function formatDateOnly(timestamp) { if (!timestamp) { return "Fecha no disponible"; diff --git a/frontend/assets/js/main.js b/frontend/assets/js/main.js index 05a67c0..745c13d 100644 --- a/frontend/assets/js/main.js +++ b/frontend/assets/js/main.js @@ -20,7 +20,7 @@ const COMMUNITY_CLANS = Object.freeze([ "Clan activo de la comunidad, con acceso directo a su discord.", logoSrc: "./assets/img/clans/lcm.png", logoAlt: "Logo de LCM", - logoClassName: "", + logoClassName: "clan-card__logo--standard", discordUrl: "https://discord.gg/9F9S353QZv", discordLabel: "Abrir Discord", }, @@ -53,7 +53,7 @@ const COMMUNITY_CLANS = Object.freeze([ "Clan activo de la comunidad, con acceso directo a su discord.", logoSrc: "./assets/img/clans/h9h.png", logoAlt: "", - logoClassName: "", + logoClassName: "clan-card__logo--standard", discordUrl: "https://discord.gg/tYnXK7MQjB", discordLabel: "Abrir Discord", placeholderLabel: "H9H", @@ -77,7 +77,7 @@ const COMMUNITY_CLANS = Object.freeze([ "Clan activo de la comunidad, con acceso directo a su discord.", logoSrc: "./assets/img/clans/7dv.png", logoAlt: "Logo de 7dv", - logoClassName: "", + logoClassName: "clan-card__logo--standard", discordUrl: "https://discord.gg/3sxNQZwrg6", discordLabel: "Abrir Discord", }, diff --git a/frontend/assets/js/ranking.js b/frontend/assets/js/ranking.js index 51c6833..6b164fb 100644 --- a/frontend/assets/js/ranking.js +++ b/frontend/assets/js/ranking.js @@ -13,6 +13,7 @@ const tableNode = document.getElementById("ranking-table"); const tableBodyNode = document.getElementById("ranking-table-body"); const metricHeadingNode = document.getElementById("ranking-metric-heading"); + const kpmHeadingNode = document.getElementById("ranking-kpm-heading"); const emptyNode = document.getElementById("ranking-empty"); const filterNoteNode = document.getElementById("ranking-filter-note"); @@ -338,7 +339,7 @@ if (statusCode === 400 && normalizedMessage.includes("metric")) { setRankingState("warning", "La m\u00e9trica solicitada no est\u00e1 soportada."); renderEmptyState( - "Usa kills, deaths, teamkills, partidas jugadas, K/D o kills por partida.", + "Usa kills, deaths, teamkills, partidas jugadas, K/D o KPM.", ); return; } @@ -414,6 +415,7 @@ if (tableBodyNode) { tableBodyNode.innerHTML = items.map((item) => renderRow(item, metric)).join(""); } + syncKpmColumn(metric); if (tableNode) { tableNode.hidden = false; } @@ -455,6 +457,9 @@ } function renderRow(item, metric) { + const kpm = formatKpm(item.kills_per_match, item.kills, item.matches_considered); + const hideKpmColumn = metric === "kills_per_match"; + return ` #${safeInt(item.ranking_position, 0)} @@ -470,11 +475,28 @@ ${safeInt(item.teamkills, 0)} ${safeInt(item.matches_considered, 0)} ${safeDecimal(item.kd_ratio, 2, "0.00")} - ${safeDecimal(item.kills_per_match, 2, "0.00")} + ${hideKpmColumn ? "" : `${kpm}`} `; } + function syncKpmColumn(metric) { + if (!tableNode || !kpmHeadingNode) { + return; + } + + const kpmColumnIndex = kpmHeadingNode.cellIndex + 1; + const hideKpmColumn = metric === "kills_per_match"; + kpmHeadingNode.hidden = hideKpmColumn; + + tableNode.querySelectorAll("tbody tr").forEach((row) => { + const cell = row.children[kpmColumnIndex - 1]; + if (cell) { + cell.hidden = hideKpmColumn; + } + }); + } + function labelForWindow(data) { if (String(data.timeframe || "") === "annual") { return `A\u00f1o ${safeInt(data.year, currentYear)}`; @@ -509,7 +531,7 @@ teamkills: "Teamkills", matches_considered: "Partidas jugadas", kd_ratio: "K/D", - kills_per_match: "Kills por partida", + kills_per_match: "KPM", }; return labels[metric] || "Kills"; } @@ -540,6 +562,21 @@ }); } + function formatKpm(rawKillsPerMatch, rawKills, rawMatches) { + const directValue = Number(rawKillsPerMatch); + if (Number.isFinite(directValue)) { + return safeDecimal(directValue, 2, "0.00"); + } + + const kills = Number(rawKills); + const matches = Number(rawMatches); + if (!Number.isFinite(kills) || !Number.isFinite(matches) || matches <= 0) { + return "-"; + } + + return safeDecimal(kills / matches, 2, "0.00"); + } + function safeParseJson(response) { if (!response) { return null; diff --git a/frontend/assets/js/stats.js b/frontend/assets/js/stats.js index f840aae..6c2cea2 100644 --- a/frontend/assets/js/stats.js +++ b/frontend/assets/js/stats.js @@ -2,6 +2,7 @@ const backendBaseUrl = document.body.dataset.backendBaseUrl || "http://127.0.0.1:8000"; const searchForm = document.getElementById("stats-search-form"); const searchInput = document.getElementById("stats-search-input"); + const searchSubmitButton = document.getElementById("stats-search-submit"); const searchStateNode = document.getElementById("stats-search-state"); const searchHelpNode = document.getElementById("stats-search-help"); const resultListNode = document.getElementById("stats-result-list"); @@ -12,12 +13,11 @@ const summaryGrid = document.getElementById("stats-summary-grid"); const weeklySummaryNode = document.getElementById("stats-weekly-summary"); const monthlySummaryNode = document.getElementById("stats-monthly-summary"); - const annualForm = document.getElementById("stats-annual-form"); - const annualYearInput = document.getElementById("stats-annual-year"); const annualStateNode = document.getElementById("stats-annual-state"); const annualContentNode = document.getElementById("stats-annual-content"); - const annualDefaultYear = new Date().getUTCFullYear(); + const annualDefaultYear = 2026; + const minimumSearchQueryLength = 4; const annualMetric = "kills"; const annualMetricSupportedOnly = "kills"; const annualLimit = 20; @@ -28,7 +28,7 @@ "Backend no disponible. No se pueden buscar jugadores ni cargar su perfil.", backendUnavailableForAnnual: "Backend no disponible. No se puede consultar el ranking anual.", - searchNoInput: "Escribe un nombre o ID para buscar.", + searchNoInput: "Introduce al menos 4 caracteres para buscar un jugador.", searchLoading: "Buscando jugadores...", searchEmpty: "Sin resultados. Prueba con otro texto o ID.", searchError: @@ -37,7 +37,7 @@ searchReadySuffix: " jugador(es). Selecciona uno para ver sus estad\u00edsticas.", searchShortQueryHelp: - "Usa al menos 1 car\u00e1cter para iniciar la b\u00fasqueda.", + "Introduce al menos 4 caracteres para buscar un jugador.", profileLoading: "Cargando estad\u00edsticas personales...", profileNoStats: "Jugador sin estad\u00edsticas suficientes para mostrar datos personales.", @@ -74,29 +74,24 @@ if (searchHelpNode) { searchHelpNode.textContent = - "Usa el buscador para encontrar un jugador. Al seleccionar uno ver\u00e1s resumen semanal y mensual. " + - "El ranking anual se consulta por separado con el a\u00f1o indicado."; + "Usa al menos 4 caracteres para encontrar un jugador. Al seleccionar uno ver\u00e1s resumen semanal y mensual. " + + "El ranking anual visible corresponde a la temporada 2026."; } - if (annualYearInput) { - annualYearInput.value = String(annualDefaultYear); - } clearProfilePanel(false); + syncSearchFormState(); refreshBackendHealth(); - if (annualForm && annualYearInput) { - annualForm.addEventListener("submit", (event) => { - event.preventDefault(); - void loadAnnualRanking(); - }); - } - if (searchForm && searchInput) { + searchInput.addEventListener("input", () => { + syncSearchFormState(); + }); + searchForm.addEventListener("submit", (event) => { event.preventDefault(); const query = (searchInput.value || "").trim(); - if (!query) { - setSearchState("error", messages.searchNoInput); + if (!isValidSearchQuery(query)) { + syncSearchFormState(); return; } void searchPlayers(query); @@ -161,7 +156,7 @@ isBackendOnline = true; setAnnualState( "neutral", - "Backend disponible. Selecciona un a\u00f1o para cargar el ranking anual.", + "Backend disponible. Cargando ranking anual 2026.", ); void loadAnnualRanking(); } catch (error) { @@ -174,7 +169,7 @@ if (!resultListNode) { return; } - if (!query) { + if (!isValidSearchQuery(query)) { setSearchState("error", messages.searchShortQueryHelp); return; } @@ -227,7 +222,7 @@ } async function loadAnnualRanking() { - if (!annualForm || !annualYearInput || !annualContentNode) { + if (!annualContentNode) { return; } if (!isBackendOnline) { @@ -235,11 +230,7 @@ return; } - const year = resolveAnnualYear(); - if (year === null) { - setAnnualState("error", "El a\u00f1o ingresado no es v\u00e1lido."); - return; - } + const year = annualDefaultYear; setAnnualState("loading", messages.annualLoading); annualContentNode.innerHTML = ""; @@ -296,14 +287,6 @@ ); } - function resolveAnnualYear() { - const normalized = Number.parseInt(String(annualYearInput?.value || "").trim(), 10); - if (!Number.isFinite(normalized) || normalized <= 0) { - return null; - } - return normalized; - } - function renderAnnualRanking(data) { if (!annualContentNode || !annualStateNode) { return; @@ -369,8 +352,9 @@ const rank = safeInt(item.ranking_position, 0); const playerId = escapeHtml(String(item.player_id || "")); const playerName = escapeHtml(String(item.player_name || "Jugador sin nombre")); - const metricValue = safeInt(item.metric_value, 0); + const kills = safeInt(firstFiniteValue(item.kills, item.metric_value), 0); const matches = safeInt(item.matches_considered, 0); + const kpm = formatKpm(item.kills_per_match, kills, matches); const deaths = safeInt(item.deaths, 0); const teamkills = safeInt(item.teamkills, 0); const kd = safeDecimal(item.kd_ratio, 2, "0.00"); @@ -384,8 +368,9 @@ ID ${playerId}
- ${metricValue} + ${kills} ${matches} + ${kpm} ${deaths} ${teamkills} ${kd} @@ -401,8 +386,9 @@ Posici\u00f3n Jugador - Valor / Kills + Kills Partidas + KPM Muertes Teamkills K/D @@ -891,6 +877,31 @@ return Number.isFinite(parsed) ? parsed : Number.NaN; } + function firstFiniteValue(...values) { + for (const value of values) { + const parsed = Number(value); + if (Number.isFinite(parsed)) { + return parsed; + } + } + return Number.NaN; + } + + function formatKpm(rawKillsPerMatch, rawKills, rawMatches) { + const directValue = safeParseNumber(rawKillsPerMatch); + if (Number.isFinite(directValue)) { + return safeDecimal(directValue, 2, "0.00"); + } + + const kills = safeParseNumber(rawKills); + const matches = safeParseNumber(rawMatches); + if (!Number.isFinite(kills) || !Number.isFinite(matches) || matches <= 0) { + return "-"; + } + + return safeDecimal(kills / matches, 2, "0.00"); + } + function safeParseJson(response) { if (!response) { return null; @@ -920,6 +931,35 @@ return Array.isArray(items) ? items : []; } + function isValidSearchQuery(query) { + return String(query || "").trim().length >= minimumSearchQueryLength; + } + + function syncSearchFormState() { + const query = String(searchInput?.value || "").trim(); + const isValid = isValidSearchQuery(query); + + if (searchSubmitButton) { + searchSubmitButton.disabled = !isValid; + } + + if (!searchStateNode) { + return; + } + + if (!query) { + setSearchState( + "neutral", + "Estado inicial: introduce al menos 4 caracteres para buscar un jugador.", + ); + return; + } + + if (!isValid) { + setSearchState("warning", messages.searchShortQueryHelp); + } + } + function escapeHtml(value) { return String(value) .replaceAll("&", "&") diff --git a/frontend/historico.html b/frontend/historico.html index 079051b..cd44855 100644 --- a/frontend/historico.html +++ b/frontend/historico.html @@ -199,6 +199,7 @@ Jugador Kills Partidas + KPM diff --git a/frontend/ranking.html b/frontend/ranking.html index ff9658d..0b26989 100644 --- a/frontend/ranking.html +++ b/frontend/ranking.html @@ -90,7 +90,7 @@ - +