Merge remote-tracking branch 'origin/fix/match-detail-visual-polish'

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

@@ -1,34 +1,155 @@
-.historical-scoreboard-detail {
+.historical-summary-grid:has(.historical-scoreboard-layout) {
+  display: block;
+}
+
+.historical-panel__note:empty {
+  display: none;
+}
+
+#match-detail-timeline-section[hidden] {
+  display: none !important;
+}
+
+.historical-scoreboard-layout {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px) minmax(0, 1fr);
+  gap: 18px;
-  align-items: stretch;
+  margin-bottom: 18px;
-  gap: 14px;
+}
-  margin-bottom: 14px;
+
-  padding: 18px;
+.historical-scoreboard-layout__main {
-  border: 1px solid rgba(210, 182, 118, 0.24);
+  display: grid;
-  border-radius: 22px;
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) minmax(0, 1fr);
+  align-items: center;
+  gap: 22px;
+  padding: 24px 28px;
+  border: 1px solid rgba(210, 182, 118, 0.2);
+  border-radius: 24px;
   background:
-    radial-gradient(circle at top center, rgba(210, 182, 118, 0.14), transparent 44%),
+    radial-gradient(circle at 50% 10%, rgba(210, 182, 118, 0.1), transparent 44%),
-    linear-gradient(180deg, rgba(29, 34, 24, 0.96), rgba(11, 14, 10, 0.98));
+    linear-gradient(180deg, rgba(11, 14, 10, 0.72), rgba(11, 14, 10, 0.94));
   box-shadow: var(--shadow-soft);
 }
 
-.historical-scoreboard-detail__side,
+.historical-scoreboard-side {
-.historical-scoreboard-detail__score {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr);
+  align-items: center;
+  gap: 18px;
+  min-height: 116px;
+}
+
+.historical-scoreboard-side--axis {
+  grid-template-columns: minmax(0, 1fr) 76px;
+  text-align: right;
+}
+
+.historical-scoreboard-side--axis .historical-scoreboard-side__emblem {
+  order: 2;
+}
+
+.historical-scoreboard-side--axis .historical-scoreboard-side__text {
+  order: 1;
+}
+
+.historical-scoreboard-side__emblem {
+  width: 76px;
+  height: 76px;
+  border-radius: 999px;
+  object-fit: contain;
+  padding: 8px;
+  border: 1px solid rgba(210, 182, 118, 0.26);
+  background:
+    radial-gradient(circle at center, rgba(210, 182, 118, 0.15), transparent 60%),
+    rgba(7, 9, 7, 0.72);
+}
+
+.historical-scoreboard-side__text {
+  display: grid;
+  gap: 5px;
+}
+
+.historical-scoreboard-side__text strong {
+  color: var(--text);
+  font-size: clamp(1.8rem, 4vw, 3.1rem);
+  line-height: 0.95;
+  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;
+  font-size: 0.78rem;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.historical-scoreboard-side.is-winner .historical-scoreboard-side__emblem {
+  border-color: rgba(210, 182, 118, 0.62);
+  box-shadow: 0 0 26px rgba(210, 182, 118, 0.14);
+}
+
+.historical-scoreboard-center {
   display: grid;
-  align-content: center;
   justify-items: center;
-  min-height: 142px;
+  gap: 6px;
-  padding: 18px;
-  border: 1px solid rgba(159, 168, 141, 0.14);
-  border-radius: 18px;
-  background: rgba(13, 17, 12, 0.48);
   text-align: center;
 }
 
-.historical-scoreboard-detail__side span,
+.historical-scoreboard-center__timer {
-.historical-scoreboard-detail__score span,
+  color: var(--text-soft);
-.historical-match-compact-meta span {
+  font-size: 0.86rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.historical-scoreboard-center__score {
+  color: var(--text);
+  font-size: clamp(4rem, 8vw, 7rem);
+  line-height: 0.9;
+  letter-spacing: 0.02em;
+}
+
+.historical-scoreboard-center__map {
+  color: var(--text);
+  font-size: 1.05rem;
+  font-weight: 800;
+}
+
+.historical-scoreboard-center__mode,
+.historical-scoreboard-center__winner {
+  color: var(--text-soft);
+  font-size: 0.86rem;
+}
+
+.historical-scoreboard-center__winner {
+  color: var(--accent-strong);
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.historical-scoreboard-layout__meta {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
+  gap: 12px;
+}
+
+.historical-scoreboard-layout__meta article {
+  padding: 13px 14px;
+  border: 1px solid rgba(159, 168, 141, 0.14);
+  border-radius: 16px;
+  background: rgba(13, 17, 12, 0.44);
+}
+
+.historical-scoreboard-layout__meta span {
+  display: block;
   margin-bottom: 7px;
   color: var(--muted);
   font-size: 0.72rem;
@@ -36,76 +157,31 @@
   text-transform: uppercase;
 }
 
-.historical-scoreboard-detail__side strong {
+.historical-scoreboard-layout__meta strong {
-  color: var(--text);
-  font-size: clamp(1.35rem, 2.8vw, 2.6rem);
-  line-height: 1;
-}
-
-.historical-scoreboard-detail__side em,
-.historical-scoreboard-detail__score em {
-  min-height: 1.2em;
-  margin-top: 10px;
-  color: var(--accent-strong);
-  font-style: normal;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.historical-scoreboard-detail__side.is-winner {
-  border-color: rgba(210, 182, 118, 0.42);
-  background:
-    radial-gradient(circle at top, rgba(210, 182, 118, 0.14), transparent 55%),
-    rgba(25, 24, 16, 0.7);
-}
-
-.historical-scoreboard-detail__score {
-  border-color: rgba(210, 182, 118, 0.36);
-  background:
-    radial-gradient(circle at center, rgba(210, 182, 118, 0.18), transparent 62%),
-    rgba(11, 14, 10, 0.72);
-}
-
-.historical-scoreboard-detail__score strong {
-  color: var(--text);
-  font-size: clamp(3.4rem, 7vw, 6.2rem);
-  line-height: 0.95;
-  letter-spacing: 0.02em;
-}
-
-.historical-match-compact-meta {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
-  gap: 12px;
-}
-
-.historical-match-compact-meta article {
-  padding: 13px 14px;
-  border: 1px solid rgba(159, 168, 141, 0.14);
-  border-radius: 16px;
-  background: rgba(13, 17, 12, 0.44);
-}
-
-.historical-match-compact-meta strong {
   display: block;
   color: var(--text);
   font-size: 1rem;
   line-height: 1.35;
 }
 
-@media (max-width: 720px) {
+@media (max-width: 920px) {
-  .historical-scoreboard-detail {
+  .historical-scoreboard-layout__main {
     grid-template-columns: 1fr;
-    padding: 14px;
+    padding: 20px;
   }
 
-  .historical-scoreboard-detail__side,
+  .historical-scoreboard-center {
-  .historical-scoreboard-detail__score {
-    min-height: 112px;
-  }
-
-  .historical-scoreboard-detail__score {
     order: -1;
   }
+
+  .historical-scoreboard-side,
+  .historical-scoreboard-side--axis {
+    grid-template-columns: 70px minmax(0, 1fr);
+    text-align: left;
+  }
+
+  .historical-scoreboard-side--axis .historical-scoreboard-side__emblem,
+  .historical-scoreboard-side--axis .historical-scoreboard-side__text {
+    order: initial;
+  }
 }

frontend/assets/js/historico-partida.js

@@ -85,6 +85,7 @@ function renderScoreboardDetail(item, { mapName, serverName }) {
   const winner = String(item.winner || result.winner || "").toLowerCase();
   const isAlliedWinner = winner === "allies" || winner === "allied";
   const isAxisWinner = winner === "axis";
+  const factions = resolveMatchFactions(item, mapName);
   const metadata = [
     ["Servidor", serverName],
     ["Mapa", mapName],
@@ -97,26 +98,55 @@ function renderScoreboardDetail(item, { mapName, serverName }) {
   }
 
   return `
-    <section class="historical-scoreboard-detail" aria-label="Marcador de la partida">
+    <section class="historical-scoreboard-layout" aria-label="Resumen de marcador de la partida">
-      <div class="historical-scoreboard-detail__side ${isAlliedWinner ? "is-winner" : ""}">
+      <div class="historical-scoreboard-layout__main">
-        <span>Bando aliado</span>
+        ${renderScoreboardSide({
-        <strong>Aliados</strong>
+          sideClass: "historical-scoreboard-side--allied",
-        <em>${isAlliedWinner ? "Ganador" : ""}</em>
+          emblem: factions.allied.emblem,
+          sideLabel: "Aliados",
+          factionLabel: factions.allied.label,
+          isWinner: isAlliedWinner,
+        })}
+        <div class="historical-scoreboard-center">
+          <span class="historical-scoreboard-center__timer">${escapeHtml(formatDuration(item.duration_seconds))}</span>
+          <strong class="historical-scoreboard-center__score">${escapeHtml(alliedScore)} : ${escapeHtml(axisScore)}</strong>
+          <span class="historical-scoreboard-center__map">${escapeHtml(mapName)}</span>
+          <span class="historical-scoreboard-center__mode">${escapeHtml(formatGameMode(item.game_mode || item.gamestate?.game_mode))}</span>
+          <span class="historical-scoreboard-center__winner">${escapeHtml(formatWinner(winner))}</span>
+        </div>
+        ${renderScoreboardSide({
+          sideClass: "historical-scoreboard-side--axis",
+          emblem: factions.axis.emblem,
+          sideLabel: "Eje",
+          factionLabel: factions.axis.label,
+          isWinner: isAxisWinner,
+        })}
       </div>
-      <div class="historical-scoreboard-detail__score">
+      <div class="historical-scoreboard-layout__meta">
-        <span>Marcador</span>
+        ${metadata.map(([label, value]) => renderCompactMeta(label, value)).join("")}
-        <strong>${escapeHtml(alliedScore)} - ${escapeHtml(axisScore)}</strong>
-        <em>${escapeHtml(formatWinner(winner))}</em>
-      </div>
-      <div class="historical-scoreboard-detail__side historical-scoreboard-detail__side--axis ${isAxisWinner ? "is-winner" : ""}">
-        <span>Bando eje</span>
-        <strong>Eje</strong>
-        <em>${isAxisWinner ? "Ganador" : ""}</em>
       </div>
     </section>
-    <section class="historical-match-compact-meta" aria-label="Datos principales de la partida">
+  `;
-      ${metadata.map(([label, value]) => renderCompactMeta(label, value)).join("")}
+}
-    </section>
+
+function renderScoreboardSide({ sideClass, emblem, sideLabel, factionLabel, isWinner }) {
+  return `
+    <div class="historical-scoreboard-side ${sideClass} ${isWinner ? "is-winner" : ""}">
+      <img
+        class="historical-scoreboard-side__emblem"
+        src="${escapeHtml(emblem)}"
+        alt="${escapeHtml(factionLabel)}"
+        width="96"
+        height="96"
+        loading="lazy"
+        decoding="async"
+      />
+      <div class="historical-scoreboard-side__text">
+        <strong>${escapeHtml(sideLabel)}</strong>
+        <span>${escapeHtml(factionLabel)}</span>
+        ${isWinner ? "<em>Ganador</em>" : ""}
+      </div>
+    </div>
   `;
 }
 
@@ -197,6 +227,60 @@ function renderActions(item, actionsNode) {
   actionsNode.hidden = false;
 }
 
+function resolveMatchFactions(item, mapName) {
+  const normalizedMap = normalizeLookupText(
+    `${item.map?.name || ""} ${item.map?.pretty_name || ""} ${mapName || ""}`,
+  );
+
+  if (/(kursk|stalingrad|kharkov)/.test(normalizedMap)) {
+    return {
+      allied: {
+        label: "Ejercito sovietico",
+        emblem: "./assets/img/factions/soviets.svg",
+      },
+      axis: {
+        label: "Ejercito aleman",
+        emblem: "./assets/img/factions/germany.svg",
+      },
+    };
+  }
+
+  if (/(driel|elalamein|el alamein|tobruk)/.test(normalizedMap)) {
+    return {
+      allied: {
+        label: "Fuerzas britanicas",
+        emblem: "./assets/img/factions/britain.svg",
+      },
+      axis: {
+        label: normalizedMap.includes("tobruk") || normalizedMap.includes("elalamein")
+          ? "Afrika Korps"
+          : "Ejercito aleman",
+        emblem: "./assets/img/factions/germany.svg",
+      },
+    };
+  }
+
+  return {
+    allied: {
+      label: "Fuerzas estadounidenses",
+      emblem: "./assets/img/factions/us.svg",
+    },
+    axis: {
+      label: "Ejercito aleman",
+      emblem: "./assets/img/factions/germany.svg",
+    },
+  };
+}
+
+function normalizeLookupText(value) {
+  return String(value || "")
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, " ")
+    .trim();
+}
+
 function formatDetailSubtitle(item) {
   if (item.capture_basis === "rcon-materialized-admin-log") {
     return "Partida RCON materializada";