rgonsal/comunidadhll
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refine live killfeed screen and realtime stats

Browse Source
This commit is contained in:
devRaGonSa
2026-05-21 21:51:57 +02:00
parent de2cf726ea
commit 95b5dc4dfc
2 changed files with 167 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
frontend/assets/css/historico.css
View File

@@ -589,43 +589,84 @@
gap: 14px;
}
.current-match-killfeed-screen {
position: relative;
width: min(100%, 760px);
min-height: 180px;
max-height: 520px;
padding: 10px;
overflow: hidden;
border: 1px solid rgba(183, 201, 125, 0.28);
border-radius: 6px;
background:
linear-gradient(180deg, rgba(183, 201, 125, 0.08), transparent 24%),
rgba(5, 8, 6, 0.92);
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.44),
inset 0 18px 48px rgba(0, 0, 0, 0.24);
}
.current-match-killfeed-screen::after {
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
background: repeating-linear-gradient(
180deg,
rgba(255, 255, 255, 0.018) 0,
rgba(255, 255, 255, 0.018) 1px,
transparent 1px,
transparent 5px
);
pointer-events: none;
content: "";
}
.current-match-killfeed {
position: relative;
z-index: 2;
display: grid;
gap: 10px;
max-height: 760px;
padding: 4px 0 0;
gap: 6px;
max-height: 500px;
overflow: hidden;
}
.current-match-killfeed__row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(102px, 150px) minmax(0, 1fr) auto;
grid-template-columns: minmax(0, 1fr) minmax(92px, 124px) minmax(0, 1fr);
align-items: center;
gap: 12px;
min-height: 56px;
padding: 12px 14px;
gap: 8px;
min-height: 48px;
padding: 6px 9px;
overflow: hidden;
border: 1px solid rgba(159, 168, 141, 0.18);
border-left: 3px solid rgba(183, 201, 125, 0.34);
border-radius: 6px;
border: 1px solid rgba(159, 168, 141, 0.12);
border-left: 2px solid rgba(183, 201, 125, 0.46);
border-radius: 3px;
color: var(--text);
background:
linear-gradient(135deg, rgba(183, 201, 125, 0.08), transparent 44%),
rgba(14, 19, 12, 0.84);
linear-gradient(90deg, rgba(183, 201, 125, 0.07), transparent 40%),
rgba(15, 20, 13, 0.68);
animation: current-match-killfeed-enter 180ms ease-out;
}
.current-match-killfeed__row:first-child {
border-color: rgba(183, 201, 125, 0.28);
background:
linear-gradient(90deg, rgba(183, 201, 125, 0.14), transparent 46%),
rgba(20, 27, 17, 0.86);
}
.current-match-killfeed__row.is-teamkill {
border-left-color: rgba(210, 182, 118, 0.64);
background:
linear-gradient(135deg, rgba(210, 182, 118, 0.12), transparent 48%),
rgba(73, 49, 27, 0.42);
linear-gradient(90deg, rgba(210, 182, 118, 0.12), transparent 48%),
rgba(73, 49, 27, 0.32);
}
.current-match-killfeed__player {
min-width: 0;
overflow: hidden;
font-size: 0.94rem;
font-size: 0.88rem;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
@@ -641,35 +682,37 @@
.current-match-killfeed__weapon {
display: grid;
grid-template-rows: 34px;
grid-template-rows: 25px auto;
align-items: center;
justify-content: center;
min-width: 102px;
min-height: 40px;
padding: 2px 8px;
border: 1px solid rgba(183, 201, 125, 0.24);
border-radius: 4px;
gap: 1px;
min-width: 92px;
min-height: 38px;
padding: 2px 5px;
border: 1px solid rgba(183, 201, 125, 0.18);
border-radius: 3px;
color: var(--text);
background: rgba(7, 10, 7, 0.8);
background: rgba(7, 10, 7, 0.72);
}
.current-match-killfeed__weapon-icon {
display: block;
width: min(100%, 116px);
height: 32px;
width: min(100%, 104px);
height: 24px;
object-fit: contain;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}
.current-match-killfeed__weapon-fallback {
display: grid;
width: 32px;
height: 32px;
width: 24px;
height: 24px;
justify-self: center;
place-items: center;
border: 1px solid rgba(210, 182, 118, 0.3);
border-radius: 4px;
border-radius: 3px;
color: var(--accent-warm);
font-size: 1rem;
font-size: 0.82rem;
font-weight: 800;
}
@@ -678,20 +721,22 @@
}
.current-match-killfeed__weapon em {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
display: block;
max-width: 112px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
color: var(--muted);
font-size: 0.58rem;
font-style: normal;
line-height: 1.1;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
border: 0;
}
.current-match-killfeed__teamkill {
display: inline-flex;
align-items: center;
margin-left: 4px;
min-height: 20px;
padding: 0 5px;
border: 1px solid rgba(210, 182, 118, 0.36);
@@ -932,27 +977,39 @@
}
.current-match-killfeed {
max-height: none;
max-height: 500px;
}
.current-match-killfeed__row {
grid-template-columns: minmax(0, 1fr) minmax(96px, 128px) minmax(0, 1fr);
}
.current-match-killfeed__teamkill {
grid-column: 1 / -1;
justify-self: end;
grid-template-columns: minmax(0, 1fr) minmax(86px, 116px) minmax(0, 1fr);
}
}
@media (max-width: 480px) {
.current-match-killfeed__row {
grid-template-columns: 1fr;
gap: 8px;
grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr);
gap: 5px;
padding-inline: 6px;
}
.current-match-killfeed__weapon {
justify-self: start;
min-width: 82px;
padding-inline: 3px;
}
.current-match-killfeed__player {
display: -webkit-box;
overflow: hidden;
font-size: 0.78rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
white-space: normal;
}
.current-match-killfeed__teamkill {
min-height: 16px;
font-size: 0.54rem;
}
}

90
frontend/assets/js/partida-actual.js
View File

@@ -1,5 +1,6 @@
const CURRENT_MATCH_POLL_INTERVAL_MS = 30 * 1000;
const CURRENT_MATCH_KILL_FEED_POLL_INTERVAL_MS = 1500;
const CURRENT_MATCH_PLAYER_STATS_POLL_INTERVAL_MS = 3000;
const CURRENT_MATCH_SERVERS = Object.freeze({
"comunidad-hispana-01": "Comunidad Hispana #01",
"comunidad-hispana-02": "Comunidad Hispana #02",
@@ -13,10 +14,30 @@ const CURRENT_MATCH_WEAPONS = Object.freeze({
"m1 garand": { label: "M1 Garand", icon: "m1_garand.PNG" },
mp40: { label: "MP40", icon: "mp40.PNG" },
"m1a1 thompson": { label: "M1A1 Thompson", icon: "thompson.PNG" },
"m1a1": { label: "M1A1 Thompson", icon: "thompson.PNG" },
thompson: { label: "M1A1 Thompson", icon: "thompson.PNG" },
"gewehr 43": { label: "Gewehr 43", icon: "gewehr.PNG" },
"gewehr43": { label: "Gewehr 43", icon: "gewehr.PNG" },
g43: { label: "Gewehr 43", icon: "gewehr.PNG" },
mg42: { label: "MG42", icon: "mg42.PNG" },
kar98k: { label: "Kar98k", icon: "kar98k.PNG" },
kar98: { label: "Kar98k", icon: "kar98k.PNG" },
stg44: { label: "StG 44", icon: "stg44.PNG" },
"stg 44": { label: "StG 44", icon: "stg44.PNG" },
bar: { label: "BAR", icon: "" },
"m1919": { label: "M1919", icon: "browing_m1919.PNG" },
"m1919 browning": { label: "M1919", icon: "browing_m1919.PNG" },
"browning m1919": { label: "M1919", icon: "browing_m1919.PNG" },
"m1 carbine": { label: "M1 Carbine", icon: "m1_carabine.PNG" },
"m1 carabine": { label: "M1 Carbine", icon: "m1_carabine.PNG" },
luger: { label: "Luger", icon: "luger_p08.PNG" },
"luger p08": { label: "Luger", icon: "luger_p08.PNG" },
colt: { label: "Colt", icon: "colt_1911.PNG" },
"colt 1911": { label: "Colt", icon: "colt_1911.PNG" },
"colt m1911": { label: "Colt", icon: "colt_1911.PNG" },
"frag grenade": { label: "Frag Grenade", icon: "" },
grenade: { label: "Frag Grenade", icon: "" },
"smoke grenade": { label: "Smoke Grenade", icon: "" },
unknown: { label: "Arma desconocida", icon: "" },
});
@@ -48,19 +69,16 @@ document.addEventListener("DOMContentLoaded", () => {
nodes.history.href = `./historico.html?server=${encodeURIComponent(serverSlug)}`;
const killFeedState = initializeKillFeed(nodes);
const playerStatsState = initializePlayerStats(nodes);
let matchRefreshInFlight = false;
const refreshMatchPanels = async () => {
if (matchRefreshInFlight) {
let currentMatchRefreshInFlight = false;
const refreshCurrentMatch = async () => {
if (currentMatchRefreshInFlight) {
return;
}
matchRefreshInFlight = true;
currentMatchRefreshInFlight = true;
try {
await Promise.allSettled([
loadCurrentMatch({ backendBaseUrl, serverSlug, nodes }),
loadPlayerStats({ backendBaseUrl, serverSlug, nodes, playerStatsState }),
]);
await loadCurrentMatch({ backendBaseUrl, serverSlug, nodes });
} finally {
matchRefreshInFlight = false;
currentMatchRefreshInFlight = false;
}
};
@@ -77,14 +95,31 @@ document.addEventListener("DOMContentLoaded", () => {
}
};
void refreshMatchPanels();
let playerStatsRefreshInFlight = false;
const refreshPlayerStats = async () => {
if (playerStatsRefreshInFlight) {
return;
}
playerStatsRefreshInFlight = true;
try {
await loadPlayerStats({ backendBaseUrl, serverSlug, nodes, playerStatsState });
} finally {
playerStatsRefreshInFlight = false;
}
};
void refreshCurrentMatch();
void refreshKillFeed();
void refreshPlayerStats();
window.setInterval(() => {
void refreshMatchPanels();
void refreshCurrentMatch();
}, CURRENT_MATCH_POLL_INTERVAL_MS);
window.setInterval(() => {
void refreshKillFeed();
}, CURRENT_MATCH_KILL_FEED_POLL_INTERVAL_MS);
window.setInterval(() => {
void refreshPlayerStats();
}, CURRENT_MATCH_PLAYER_STATS_POLL_INTERVAL_MS);
});
async function loadCurrentMatch({ backendBaseUrl, serverSlug, nodes }) {
@@ -120,7 +155,11 @@ async function loadPlayerStats({ backendBaseUrl, serverSlug, nodes, playerStatsS
);
renderPlayerStats(payload?.data || {}, nodes, playerStatsState);
} catch (error) {
setState(nodes.playerStatsState, "No se pudieron actualizar las estadisticas en vivo.", true);
setState(
nodes.playerStatsState,
"Todavía no hay estadísticas fiables de jugadores para esta partida.",
true,
);
}
}
@@ -162,11 +201,9 @@ function initializeKillFeed(nodes) {
<p class="historical-state" id="current-match-feed-state" aria-live="polite">
Cargando feed de combate...
</p>
<section
class="current-match-killfeed"
id="current-match-feed-list"
aria-label="Bajas recientes en la partida actual"
></section>
<section class="current-match-killfeed-screen" aria-label="Bajas recientes en la partida actual">
<div class="current-match-killfeed" id="current-match-feed-list"></div>
</section>
`,
);
}
@@ -218,10 +255,10 @@ function renderKillFeed(data, nodes, state) {
if (events.length === 0) {
nodes.feedList.innerHTML = "";
state.visibleSignature = "";
setState(nodes.feedState, formatKillFeedCoverage(data.scope));
setState(nodes.feedState, "Todavía no se han detectado bajas en esta partida.");
return;
}
const visualEvents = [...events].reverse();
const visualEvents = events;
const visibleSignature = visualEvents.map((event) => event.event_id).join("|");
if (visibleSignature !== state.visibleSignature) {
nodes.feedList.innerHTML = visualEvents.map(renderKillFeedRow).join("");
@@ -246,9 +283,13 @@ function renderKillFeedRow(event) {
? '<span class="current-match-killfeed__teamkill">TK</span>'
: "";
return `
<article class="current-match-killfeed__row${event.is_teamkill ? " is-teamkill" : ""}">
<strong class="current-match-killfeed__player current-match-killfeed__player--killer">
<article
class="current-match-killfeed__row${event.is_teamkill ? " is-teamkill" : ""}"
data-event-id="${escapeHtml(event.event_id || "")}"
>
<strong class="current-match-killfeed__player current-match-killfeed__player--killer" title="${escapeHtml(event.killer_name || "Jugador no disponible")}">
${escapeHtml(event.killer_name || "Jugador no disponible")}
${teamkillBadge}
</strong>
<span
class="current-match-killfeed__weapon"
@@ -261,7 +302,6 @@ function renderKillFeedRow(event) {
<span class="current-match-killfeed__player current-match-killfeed__player--victim">
${escapeHtml(event.victim_name || "Objetivo no disponible")}
</span>
${teamkillBadge}
</article>
`;
}
@@ -301,7 +341,7 @@ function renderPlayerStats(data, nodes, state) {
nodes.playerStatsShell.hidden = true;
setState(
nodes.playerStatsState,
"Todavia no hay estadisticas fiables de jugadores para esta partida.",
"Todavía no hay estadísticas fiables de jugadores para esta partida.",
);
return;
}
@@ -618,9 +658,9 @@ function formatKillFeedCoverage(scope) {
return "Cobertura parcial desde AdminLog reciente.";
}
if (scope === "no-current-match-events") {
return "Sin bajas recientes asociadas a la partida actual.";
return "Todavía no se han detectado bajas en esta partida.";
}
return "Todavia no se han detectado bajas en esta partida.";
return "Todavía no se han detectado bajas en esta partida.";
}
function normalizeLookupText(value) {