Fix match detail faction assets

ai/tasks/done/TASK-135-fix-rcon-match-detail-faction-assets.md

@@ -1,7 +1,7 @@
 ---
 id: TASK-135
 title: Fix RCON match detail faction assets and icon display
-status: pending
+status: done
 type: frontend
 team: Frontend Senior
 supporting_teams:
@@ -133,11 +133,30 @@ Then hard refresh with `Ctrl+F5` and verify:
 
 ## Outcome
 
-To be completed by AI Platform Run / Codex CLI.
+- Updated `frontend/assets/js/historico-partida.js` to use the required local `.webp` faction paths for USA, Germany, Soviets and Britain.
+- Renamed the user-provided faction assets in `frontend/assets/img/factions/` from short names to the required contract names: `germany.webp`, `soviets.webp` and `britain.webp`.
+- Removed visible long faction subtitles from the scoreboard side blocks while preserving the main `Aliados` and `Eje` labels and the subtle winner marker.
+- Increased faction emblem sizing in `frontend/assets/css/historico-scoreboard-detail.css` and added a silent missing-image fallback class so a broken image does not show a visible broken icon.
+- Event timeline, confidence/source/base cards, snapshot wording, Elo/MVP blocks and Comunidad Hispana #03 were not reintroduced.
 
 ## Validation Result
 
-To be completed by AI Platform Run / Codex CLI.
+- PASS: `node --check frontend/assets/js/historico-partida.js`
+- PASS: `node --check frontend/assets/js/historico.js`
+- PASS: `node --check frontend/assets/js/historico-recent-live.js`
+- PASS: `python -m compileall backend/app`
+- PASS: `powershell -ExecutionPolicy Bypass -File scripts/run-integration-tests.ps1`
+- PASS: `powershell -ExecutionPolicy Bypass -File scripts/run-rcon-data-pipeline-tests.ps1`
+  - Note: the script completed successfully but emitted existing `ResourceWarning` messages from backend unittest sqlite connections.
+- PASS: `docker compose up -d --build backend frontend`
+- PASS: `Invoke-WebRequest "http://localhost:8000/health" | Select-Object -ExpandProperty Content`
+- PASS after stopping already-running advanced historical workers: `Invoke-WebRequest "http://localhost:8000/api/historical/recent-matches?server=all-servers&limit=10" | Select-Object -ExpandProperty Content`
+  - The first attempt failed because the backend could not set SQLite journal mode while the historical worker services were active against the mounted DB. `docker compose stop historical-runner rcon-historical-worker` cleared the validation conflict.
+- Manual/rendered verification: Browser plugin was listed, but the required Node runtime tool was not exposed in this session; used local Chrome headless fallback.
+  - Verified DOM contains `3 : 2`, `Ganador: Aliados`, `Carentan`, `1 h 30 min`, `AntonioPruna`, `M1 GARAND`, `us.webp` and `germany.webp`.
+  - Verified long faction descriptions are absent from rendered DOM.
+  - Verified timeline section remains hidden.
+  - Captured desktop and mobile screenshots outside the repository at `C:\Temp\task-135-match-detail.png` and `C:\Temp\task-135-match-detail-mobile.png`.
 
 ## Change Budget
 

frontend/assets/css/historico-scoreboard-detail.css

@@ -32,14 +32,14 @@
 
 .historical-scoreboard-side {
   display: grid;
-  grid-template-columns: 76px minmax(0, 1fr);
+  grid-template-columns: 112px minmax(0, 1fr);
   align-items: center;
   gap: 18px;
-  min-height: 116px;
+  min-height: 136px;
 }
 
 .historical-scoreboard-side--axis {
-  grid-template-columns: minmax(0, 1fr) 76px;
+  grid-template-columns: minmax(0, 1fr) 112px;
   text-align: right;
 }
 
@@ -51,12 +51,17 @@
   order: 1;
 }
 
+.historical-scoreboard-side.is-emblem-missing,
+.historical-scoreboard-side--axis.is-emblem-missing {
+  grid-template-columns: minmax(0, 1fr);
+}
+
 .historical-scoreboard-side__emblem {
-  width: 76px;
+  width: 112px;
-  height: 76px;
+  height: 112px;
   border-radius: 999px;
   object-fit: contain;
-  padding: 8px;
+  padding: 10px;
   border: 1px solid rgba(210, 182, 118, 0.26);
   background:
     radial-gradient(circle at center, rgba(210, 182, 118, 0.15), transparent 60%),
@@ -75,12 +80,6 @@
   text-transform: uppercase;
 }
 
-.historical-scoreboard-side__text span {
-  color: var(--text-soft);
-  font-size: 0.86rem;
-  letter-spacing: 0.04em;
-}
-
 .historical-scoreboard-side__text em {
   color: var(--accent-strong);
   font-style: normal;
@@ -176,7 +175,7 @@
 
   .historical-scoreboard-side,
   .historical-scoreboard-side--axis {
-    grid-template-columns: 70px minmax(0, 1fr);
+    grid-template-columns: 96px minmax(0, 1fr);
     text-align: left;
   }
 
@@ -184,4 +183,9 @@
   .historical-scoreboard-side--axis .historical-scoreboard-side__text {
     order: initial;
   }
+
+  .historical-scoreboard-side__emblem {
+    width: 96px;
+    height: 96px;
+  }
 }

frontend/assets/js/historico-partida.js

@@ -130,20 +130,21 @@ function renderScoreboardDetail(item, { mapName, serverName }) {
 }
 
 function renderScoreboardSide({ sideClass, emblem, sideLabel, factionLabel, isWinner }) {
+  const fallbackLabel = factionLabel || sideLabel;
   return `
     <div class="historical-scoreboard-side ${sideClass} ${isWinner ? "is-winner" : ""}">
       <img
         class="historical-scoreboard-side__emblem"
         src="${escapeHtml(emblem)}"
-        alt="${escapeHtml(factionLabel)}"
+        alt="${escapeHtml(fallbackLabel)}"
-        width="96"
+        width="128"
-        height="96"
+        height="128"
         loading="lazy"
         decoding="async"
+        onerror="this.hidden = true; this.closest('.historical-scoreboard-side').classList.add('is-emblem-missing');"
       />
       <div class="historical-scoreboard-side__text">
         <strong>${escapeHtml(sideLabel)}</strong>
-        <span>${escapeHtml(factionLabel)}</span>
         ${isWinner ? "<em>Ganador</em>" : ""}
       </div>
     </div>
@@ -235,12 +236,12 @@ function resolveMatchFactions(item, mapName) {
   if (/(kursk|stalingrad|kharkov)/.test(normalizedMap)) {
     return {
       allied: {
-        label: "Ejercito sovietico",
+        label: "Sovieticos",
-        emblem: "./assets/img/factions/soviets.svg",
+        emblem: "./assets/img/factions/soviets.webp",
       },
       axis: {
-        label: "Ejercito aleman",
+        label: "Eje",
-        emblem: "./assets/img/factions/germany.svg",
+        emblem: "./assets/img/factions/germany.webp",
       },
     };
   }
@@ -248,26 +249,26 @@ function resolveMatchFactions(item, mapName) {
   if (/(driel|elalamein|el alamein|tobruk)/.test(normalizedMap)) {
     return {
       allied: {
-        label: "Fuerzas britanicas",
+        label: "Britanicos",
-        emblem: "./assets/img/factions/britain.svg",
+        emblem: "./assets/img/factions/britain.webp",
       },
       axis: {
         label: normalizedMap.includes("tobruk") || normalizedMap.includes("elalamein")
           ? "Afrika Korps"
-          : "Ejercito aleman",
+          : "Eje",
-        emblem: "./assets/img/factions/germany.svg",
+        emblem: "./assets/img/factions/germany.webp",
       },
     };
   }
 
   return {
     allied: {
-      label: "Fuerzas estadounidenses",
+      label: "USA",
-      emblem: "./assets/img/factions/us.svg",
+      emblem: "./assets/img/factions/us.webp",
     },
     axis: {
-      label: "Ejercito aleman",
+      label: "Eje",
-      emblem: "./assets/img/factions/germany.svg",
+      emblem: "./assets/img/factions/germany.webp",
     },
   };
 }