From 713810fbfa6a2aa2ab141fe327b6d781a44e26ea Mon Sep 17 00:00:00 2001 From: devRaGonSa <97627393+devRaGonSa@users.noreply.github.com> Date: Wed, 20 May 2026 09:41:17 +0200 Subject: [PATCH 1/2] fix: polish match detail scoreboard structure --- frontend/assets/js/historico-partida.js | 118 ++++++++++++++++++++---- 1 file changed, 101 insertions(+), 17 deletions(-) diff --git a/frontend/assets/js/historico-partida.js b/frontend/assets/js/historico-partida.js index ae353dc..616d4cb 100644 --- a/frontend/assets/js/historico-partida.js +++ b/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 ` -
-
- Bando aliado - Aliados - ${isAlliedWinner ? "Ganador" : ""} +
+
+ ${renderScoreboardSide({ + sideClass: "historical-scoreboard-side--allied", + emblem: factions.allied.emblem, + sideLabel: "Aliados", + factionLabel: factions.allied.label, + isWinner: isAlliedWinner, + })} +
+ ${escapeHtml(formatDuration(item.duration_seconds))} + ${escapeHtml(alliedScore)} : ${escapeHtml(axisScore)} + ${escapeHtml(mapName)} + ${escapeHtml(formatGameMode(item.game_mode || item.gamestate?.game_mode))} + ${escapeHtml(formatWinner(winner))} +
+ ${renderScoreboardSide({ + sideClass: "historical-scoreboard-side--axis", + emblem: factions.axis.emblem, + sideLabel: "Eje", + factionLabel: factions.axis.label, + isWinner: isAxisWinner, + })}
-
- Marcador - ${escapeHtml(alliedScore)} - ${escapeHtml(axisScore)} - ${escapeHtml(formatWinner(winner))} -
-
- Bando eje - Eje - ${isAxisWinner ? "Ganador" : ""} +
+ ${metadata.map(([label, value]) => renderCompactMeta(label, value)).join("")}
-
- ${metadata.map(([label, value]) => renderCompactMeta(label, value)).join("")} -
+ `; +} + +function renderScoreboardSide({ sideClass, emblem, sideLabel, factionLabel, isWinner }) { + return ` +
+ ${escapeHtml(factionLabel)} +
+ ${escapeHtml(sideLabel)} + ${escapeHtml(factionLabel)} + ${isWinner ? "Ganador" : ""} +
+
`; } @@ -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"; From 4670c45dbf2c435523ab2e2d0cf2fa33cf9a4ec7 Mon Sep 17 00:00:00 2001 From: devRaGonSa <97627393+devRaGonSa@users.noreply.github.com> Date: Wed, 20 May 2026 09:42:01 +0200 Subject: [PATCH 2/2] fix: align match detail with scoreboard layout --- .../css/historico-scoreboard-detail.css | 240 ++++++++++++------ 1 file changed, 158 insertions(+), 82 deletions(-) diff --git a/frontend/assets/css/historico-scoreboard-detail.css b/frontend/assets/css/historico-scoreboard-detail.css index 709992f..075836f 100644 --- a/frontend/assets/css/historico-scoreboard-detail.css +++ b/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); - align-items: stretch; - gap: 14px; - margin-bottom: 14px; - padding: 18px; - border: 1px solid rgba(210, 182, 118, 0.24); - border-radius: 22px; + gap: 18px; + margin-bottom: 18px; +} + +.historical-scoreboard-layout__main { + display: grid; + 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%), - linear-gradient(180deg, rgba(29, 34, 24, 0.96), rgba(11, 14, 10, 0.98)); + radial-gradient(circle at 50% 10%, rgba(210, 182, 118, 0.1), transparent 44%), + 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-detail__score { +.historical-scoreboard-side { + 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; - padding: 18px; - border: 1px solid rgba(159, 168, 141, 0.14); - border-radius: 18px; - background: rgba(13, 17, 12, 0.48); + gap: 6px; text-align: center; } -.historical-scoreboard-detail__side span, -.historical-scoreboard-detail__score span, -.historical-match-compact-meta span { +.historical-scoreboard-center__timer { + color: var(--text-soft); + 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 { - 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 { +.historical-scoreboard-layout__meta strong { display: block; color: var(--text); font-size: 1rem; line-height: 1.35; } -@media (max-width: 720px) { - .historical-scoreboard-detail { +@media (max-width: 920px) { + .historical-scoreboard-layout__main { grid-template-columns: 1fr; - padding: 14px; + padding: 20px; } - .historical-scoreboard-detail__side, - .historical-scoreboard-detail__score { - min-height: 112px; - } - - .historical-scoreboard-detail__score { + .historical-scoreboard-center { 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; + } }