Replace server IP UI with history links

ai/tasks/done/TASK-024-remove-ip-ui-and-add-historic-links.md

@@ -0,0 +1,95 @@
+# TASK-024-remove-ip-ui-and-add-historic-links
+
+## Goal
+Eliminar de la landing toda referencia visible a IP o direccion de servidor y sustituir el boton actual por un boton `Historico` que lleve a la pagina de historial correcta de cada uno de los 2 servidores reales de la comunidad.
+
+## Context
+La UI actual del bloque de servidores sigue mostrando informacion relacionada con IP/direccion y un CTA heredado que ya no encaja con el comportamiento deseado. A partir de ahora no debe mostrarse nada relacionado con IP en la pagina. En su lugar, cada card de servidor debe incluir un boton `Historico` que abra la pagina de historial correspondiente al servidor real de la comunidad.
+
+Los destinos correctos son:
+- Servidor `#01 [ESP] Comunidad Hispana - discord.comunidadhll.es - Spa Onl` -> `https://scoreboard.comunidadhll.es/games`
+- Servidor `#02 [ESP] Comunidad Hispana - discord.comunidadhll.es - Spa Onl` -> `https://scoreboard.comunidadhll.es:5443/games`
+
+La solucion debe usar una asignacion estable basada en la identidad real de cada servidor de la comunidad y no depender de mostrar IP en la UI.
+
+## Steps
+1. Revisar la implementacion actual del bloque de servidores en:
+   - HTML estatico/fallback
+   - renderizado hidratado desde JS
+   - payload y campos expuestos desde backend si afectan a la UI
+2. Eliminar de la UI cualquier referencia visible a:
+   - IP
+   - direccion
+   - host:puerto
+   - textos como `Direccion`
+   - acciones tipo `Copiar IP`
+3. Sustituir el CTA actual de cada card por un boton `Historico`.
+4. Hacer que el boton `Historico` abra el destino correcto segun el servidor:
+   - servidor #01 -> `https://scoreboard.comunidadhll.es/games`
+   - servidor #02 -> `https://scoreboard.comunidadhll.es:5443/games`
+5. Asegurar que la asignacion se basa en la identidad estable del servidor de comunidad y no en una logica fragil o dependiente del orden accidental.
+6. Mantener la compatibilidad entre:
+   - fallback estatico
+   - renderizado dinamico por JS
+7. Si la UI actual necesita un campo alternativo donde antes estaba la IP, reorganizar la card para que siga viendose equilibrada sin exponer datos de red.
+8. Mantener visibles solo los 2 servidores reales de la comunidad.
+9. No reintroducir servidores ficticios ni CTAs rotos.
+10. Verificar que los enlaces abren correctamente las paginas de historico en una nueva pestana o de la forma UX mas segura/coherente con la landing.
+11. Al completar la implementacion:
+   - dejar el repositorio consistente
+   - hacer commit
+   - hacer push al remoto si el entorno lo permite
+
+## Files to Read First
+- AGENTS.md
+- ai/repo-context.md
+- ai/architecture-index.md
+- frontend/index.html
+- frontend/assets/js/main.js
+- frontend/assets/css/styles.css
+- backend/app/payloads.py
+- backend/app/routes.py
+- docs/frontend-backend-contract.md
+
+## Expected Files to Modify
+- frontend/index.html
+- frontend/assets/js/main.js
+- frontend/assets/css/styles.css
+- opcionalmente backend/app/payloads.py si hace falta exponer un identificador mas limpio para mapear cada servidor a su historico
+- opcionalmente documentacion minima si cambia el comportamiento esperado del CTA del panel
+
+## Constraints
+- No mostrar IP, direccion o datos equivalentes en la UI.
+- No dejar botones rotos.
+- No cambiar los 2 servidores reales de la comunidad.
+- No anadir librerias nuevas.
+- No romper el polling ni la hidratacion actual.
+- No romper el fallback estatico.
+- No hacer cambios destructivos.
+- Mantener la solucion visualmente coherente con la landing.
+
+## Validation
+- Ya no aparece ningun dato de IP/direccion en la UI del bloque de servidores.
+- El boton `Copiar IP` desaparece por completo.
+- Cada servidor muestra un boton `Historico`.
+- El boton del servidor #01 abre `https://scoreboard.comunidadhll.es/games`.
+- El boton del servidor #02 abre `https://scoreboard.comunidadhll.es:5443/games`.
+- La asignacion es estable tanto en fallback estatico como en renderizado dinamico.
+- Los cambios quedan committeados y se hace push si el entorno lo permite.
+
+## Change Budget
+- Preferir menos de 5 archivos modificados.
+- Preferir menos de 200 lineas cambiadas.
+
+## Outcome
+- `frontend/index.html` elimina la IP visible del fallback estatico y sustituye el CTA por enlaces `Historico` hacia el scoreboard correcto de cada servidor real.
+- `frontend/assets/js/main.js` deja de renderizar direccion o acciones de copiado y asigna cada enlace de historico mediante `external_server_id` estable.
+- `frontend/assets/css/styles.css` adapta el estilo del CTA para mantener la tarjeta equilibrada sin exponer datos de red.
+
+## Validation Result
+- Validado con `node --check frontend/assets/js/main.js`.
+- Verificado con `rg` que ya no quedan en `frontend/` textos o atributos de `Copiar IP`, `Direccion`, `data-copy-address`, `server-copy-button` ni las IPs de los servidores.
+- Revisado con `git diff --name-only`: el cambio de esta task queda acotado a `frontend/index.html`, `frontend/assets/js/main.js`, `frontend/assets/css/styles.css` y este archivo de task.
+
+## Decision Notes
+- La asignacion del enlace `Historico` en renderizado dinamico se resuelve unicamente con `external_server_id` para evitar dependencia del orden accidental o de datos de red expuestos en UI.

frontend/assets/css/styles.css

@@ -579,7 +579,7 @@ h2 {
   justify-content: flex-end;
 }
 
-.server-copy-button {
+.server-action-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -604,18 +604,13 @@ h2 {
     opacity 160ms ease;
 }
 
-.server-copy-button:hover,
+.server-action-link:hover,
-.server-copy-button:focus-visible {
+.server-action-link:focus-visible {
   transform: translateY(-1px);
   border-color: rgba(210, 182, 118, 0.52);
   background: linear-gradient(180deg, rgba(210, 182, 118, 0.2), rgba(142, 160, 98, 0.26));
 }
 
-.server-copy-button:disabled {
-  opacity: 0.78;
-  cursor: default;
-}
-
 .server-state {
   display: inline-flex;
   align-items: center;

frontend/assets/js/main.js

@@ -1,5 +1,9 @@
 // Progressive enhancement for local frontend-backend checks.
 const DEFAULT_SERVER_POLL_INTERVAL_MS = 120 * 1000;
+const SERVER_HISTORY_URLS = Object.freeze({
+  "comunidad-hispana-01": "https://scoreboard.comunidadhll.es/games",
+  "comunidad-hispana-02": "https://scoreboard.comunidadhll.es:5443/games",
+});
 
 document.addEventListener("DOMContentLoaded", () => {
   console.info("HLL Vietnam frontend ready");
@@ -18,7 +22,6 @@ document.addEventListener("DOMContentLoaded", () => {
 
   updateBackendStatus(statusNode, "Backend comprobando", "status-chip--idle");
   setServersDataState(serversBadge, { timestampLabel: "" });
-  bindCopyAddressActions();
 
   let serverRefreshInFlight = false;
   const refreshServers = async () => {
@@ -172,13 +175,11 @@ function renderServerStatsCard(server) {
   const region = server.region || "Region pendiente";
   const players = Number.isFinite(server.players) ? server.players : 0;
   const maxPlayers = Number.isFinite(server.max_players) ? server.max_players : 0;
-  const address = getServerAddress(server);
   const actionMarkup = renderServerAction(server);
   const cardVariantClass = isRealSnapshot ? "server-card--real" : "server-card--reference";
   const quickFacts = renderQuickFacts([
     { label: "Mapa", value: currentMap },
     { label: "Region", value: region },
-    { label: "Direccion", value: address || "No disponible" },
   ]);
 
   return `
@@ -208,21 +209,21 @@ function renderServerSections(latestItems) {
 }
 
 function renderServerAction(server) {
-  const address = getServerAddress(server);
+  const historyUrl = getServerHistoryUrl(server);
-  if (!address) {
+  if (!historyUrl) {
     return "";
   }
 
   return `
     <div class="server-card__actions">
-      <button
+      <a
-        class="server-copy-button"
+        class="server-action-link"
-        type="button"
+        href="${escapeHtml(historyUrl)}"
-        data-copy-address="${escapeHtml(address)}"
+        target="_blank"
-        data-default-label="Copiar IP"
+        rel="noreferrer"
       >
-        Copiar IP
+        Historico
-      </button>
+      </a>
     </div>
   `;
 }
@@ -244,66 +245,16 @@ function renderQuickFacts(items) {
   `;
 }
 
-function bindCopyAddressActions() {
+function getServerHistoryUrl(server) {
-  document.addEventListener("click", async (event) => {
+  const externalServerId =
-    const button = event.target.closest("[data-copy-address]");
+    typeof server?.external_server_id === "string"
-    if (!(button instanceof HTMLButtonElement)) {
+      ? server.external_server_id.trim()
-      return;
+      : "";
-    }
+  if (!externalServerId) {
-
-    const address = button.dataset.copyAddress || "";
-    if (!address) {
-      return;
-    }
-
-    const defaultLabel = button.dataset.defaultLabel || "Copiar IP";
-    button.disabled = true;
-
-    try {
-      await copyText(address);
-      button.textContent = "IP copiada";
-    } catch (error) {
-      console.warn("Could not copy server address", error);
-      button.textContent = "Copia manual";
-    } finally {
-      window.setTimeout(() => {
-        button.textContent = defaultLabel;
-        button.disabled = false;
-      }, 1800);
-    }
-  });
-}
-
-async function copyText(value) {
-  if (navigator.clipboard?.writeText) {
-    await navigator.clipboard.writeText(value);
-    return;
-  }
-
-  const textarea = document.createElement("textarea");
-  textarea.value = value;
-  textarea.setAttribute("readonly", "");
-  textarea.style.position = "absolute";
-  textarea.style.left = "-9999px";
-  document.body.append(textarea);
-  textarea.select();
-
-  const copied = document.execCommand("copy");
-  textarea.remove();
-
-  if (!copied) {
-    throw new Error("Clipboard copy command failed");
-  }
-}
-
-function getServerAddress(server) {
-  const host = typeof server?.host === "string" ? server.host.trim() : "";
-  const gamePort = Number(server?.game_port);
-  if (!host || !Number.isInteger(gamePort) || gamePort <= 0) {
     return "";
   }
 
-  return `${host}:${gamePort}`;
+  return SERVER_HISTORY_URLS[externalServerId] || "";
 }
 
 function selectPrimaryServerItems(items) {

frontend/index.html

@@ -96,14 +96,14 @@
                     <span class="server-state server-state--online">Online</span>
                     <p class="server-card__population">74 / 100</p>
                     <div class="server-card__actions">
-                      <button
+                      <a
-                        class="server-copy-button"
+                        class="server-action-link"
-                        type="button"
+                        href="https://scoreboard.comunidadhll.es/games"
-                        data-copy-address="152.114.195.174:7777"
+                        target="_blank"
-                        data-default-label="Copiar IP"
+                        rel="noreferrer"
                       >
-                        Copiar IP
+                        Historico
-                      </button>
+                      </a>
                     </div>
                   </div>
                 </div>
@@ -116,10 +116,6 @@
                     <p>Region</p>
                     <strong>ES</strong>
                   </article>
-                  <article class="server-card__quickfact">
-                    <p>Direccion</p>
-                    <strong>152.114.195.174:7777</strong>
-                  </article>
                 </div>
               </article>
               <article class="server-card server-card--stats server-card--real">
@@ -132,14 +128,14 @@
                     <span class="server-state server-state--offline">Offline</span>
                     <p class="server-card__population">0 / 100</p>
                     <div class="server-card__actions">
-                      <button
+                      <a
-                        class="server-copy-button"
+                        class="server-action-link"
-                        type="button"
+                        href="https://scoreboard.comunidadhll.es:5443/games"
-                        data-copy-address="152.114.195.150:7877"
+                        target="_blank"
-                        data-default-label="Copiar IP"
+                        rel="noreferrer"
                       >
-                        Copiar IP
+                        Historico
-                      </button>
+                      </a>
                     </div>
                   </div>
                 </div>
@@ -152,10 +148,6 @@
                     <p>Region</p>
                     <strong>ES</strong>
                   </article>
-                  <article class="server-card__quickfact">
-                    <p>Direccion</p>
-                    <strong>152.114.195.150:7877</strong>
-                  </article>
                 </div>
               </article>
             </div>