363 lines
14 KiB
JavaScript
363 lines
14 KiB
JavaScript
(() => {
|
|
const RECENT_MATCHES_ENDPOINT = "/api/historical/recent-matches";
|
|
const REFRESH_DELAYS_MS = [150, 1000, 3000, 6000];
|
|
const RECENT_MATCHES_LIMIT = 100;
|
|
const DEFAULT_RECENT_MATCHES_PAGE_SIZE = 10;
|
|
const RECENT_MATCHES_PAGE_SIZES = Object.freeze([10, 25, 50, 100]);
|
|
const LIVE_PAGINATION_ID = "recent-matches-live-pagination";
|
|
const LEGACY_PAGINATION_ID = "recent-matches-pagination";
|
|
|
|
const recentMatchesState = {
|
|
items: [],
|
|
serverSlug: "all-servers",
|
|
page: 1,
|
|
pageSize: DEFAULT_RECENT_MATCHES_PAGE_SIZE,
|
|
activeRequestId: 0,
|
|
rendering: false,
|
|
observerReady: false,
|
|
};
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
ensureDynamicPaginationControls();
|
|
setupRecentMatchesOwnershipObserver();
|
|
|
|
REFRESH_DELAYS_MS.forEach((delay) => {
|
|
window.setTimeout(() => {
|
|
void refreshDynamicRecentMatches();
|
|
}, delay);
|
|
});
|
|
|
|
document.querySelectorAll("[data-server-slug]").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
REFRESH_DELAYS_MS.forEach((delay) => {
|
|
window.setTimeout(() => {
|
|
void refreshDynamicRecentMatches(button.dataset.serverSlug);
|
|
}, delay);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
async function refreshDynamicRecentMatches(forcedServerSlug) {
|
|
const listNode = document.getElementById("recent-matches-list");
|
|
const stateNode = document.getElementById("recent-matches-state");
|
|
const metaNode = document.getElementById("recent-matches-snapshot-meta");
|
|
const noteNode = document.getElementById("recent-matches-note");
|
|
|
|
if (!listNode || !stateNode || !metaNode) return;
|
|
|
|
const backendBaseUrl = document.body.dataset.backendBaseUrl || "http://127.0.0.1:8000";
|
|
const serverSlug = normalizeDynamicServerSlug(forcedServerSlug || readServerFromUrl());
|
|
const shouldResetPage = serverSlug !== recentMatchesState.serverSlug;
|
|
const requestId = recentMatchesState.activeRequestId + 1;
|
|
recentMatchesState.activeRequestId = requestId;
|
|
recentMatchesState.serverSlug = serverSlug;
|
|
|
|
try {
|
|
const response = await fetch(`${backendBaseUrl}${RECENT_MATCHES_ENDPOINT}?server=${encodeURIComponent(serverSlug)}&limit=${RECENT_MATCHES_LIMIT}`, { cache: "no-store" });
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
|
|
const payload = await response.json();
|
|
if (requestId !== recentMatchesState.activeRequestId || serverSlug !== recentMatchesState.serverSlug) {
|
|
return;
|
|
}
|
|
const data = payload?.data || {};
|
|
const items = Array.isArray(data.items) ? data.items : [];
|
|
|
|
recentMatchesState.items = items;
|
|
if (shouldResetPage) {
|
|
recentMatchesState.page = 1;
|
|
}
|
|
|
|
if (!items.length) {
|
|
recentMatchesState.page = 1;
|
|
setDynamicState(stateNode, "No hay partidas recientes disponibles para este alcance.");
|
|
renderOwnedList(listNode, "");
|
|
metaNode.textContent = "Datos recientes sin partidas disponibles.";
|
|
renderDynamicPagination();
|
|
return;
|
|
}
|
|
|
|
stateNode.hidden = true;
|
|
if (noteNode) noteNode.textContent = "Lista dinámica de partidas registradas.";
|
|
metaNode.textContent = buildDynamicRecentMeta(items);
|
|
renderDynamicRecentMatchesPage();
|
|
} catch (error) {
|
|
if (requestId !== recentMatchesState.activeRequestId || serverSlug !== recentMatchesState.serverSlug) {
|
|
return;
|
|
}
|
|
recentMatchesState.items = [];
|
|
recentMatchesState.page = 1;
|
|
setDynamicState(stateNode, "No se pudieron cargar las partidas recientes dinámicas.", true);
|
|
metaNode.textContent = "Error al leer las partidas recientes dinámicas.";
|
|
renderDynamicPagination();
|
|
}
|
|
}
|
|
|
|
function renderDynamicRecentMatchesPage() {
|
|
const listNode = document.getElementById("recent-matches-list");
|
|
const stateNode = document.getElementById("recent-matches-state");
|
|
if (!listNode || !stateNode) return;
|
|
|
|
const totalItems = recentMatchesState.items.length;
|
|
const totalPages = getDynamicTotalPages();
|
|
recentMatchesState.page = clampDynamicPage(recentMatchesState.page, totalPages);
|
|
|
|
if (!totalItems) {
|
|
renderOwnedList(listNode, "");
|
|
setDynamicState(stateNode, "No hay partidas recientes disponibles para este alcance.");
|
|
renderDynamicPagination();
|
|
return;
|
|
}
|
|
|
|
const startIndex = (recentMatchesState.page - 1) * recentMatchesState.pageSize;
|
|
const pageItems = recentMatchesState.items.slice(startIndex, startIndex + recentMatchesState.pageSize);
|
|
renderOwnedList(listNode, pageItems.map((item) => renderDynamicRecentMatchCard(item)).join(""));
|
|
stateNode.hidden = true;
|
|
renderDynamicPagination();
|
|
}
|
|
|
|
function renderOwnedList(listNode, html) {
|
|
recentMatchesState.rendering = true;
|
|
listNode.innerHTML = html;
|
|
window.queueMicrotask(() => {
|
|
recentMatchesState.rendering = false;
|
|
});
|
|
}
|
|
|
|
function setupRecentMatchesOwnershipObserver() {
|
|
const listNode = document.getElementById("recent-matches-list");
|
|
if (!listNode || recentMatchesState.observerReady || typeof MutationObserver === "undefined") return;
|
|
|
|
recentMatchesState.observerReady = true;
|
|
const observer = new MutationObserver(() => {
|
|
if (recentMatchesState.rendering || !recentMatchesState.items.length) return;
|
|
window.setTimeout(() => {
|
|
if (!recentMatchesState.rendering && recentMatchesState.items.length) {
|
|
renderDynamicRecentMatchesPage();
|
|
}
|
|
}, 0);
|
|
});
|
|
observer.observe(listNode, { childList: true });
|
|
}
|
|
|
|
function ensureDynamicPaginationControls() {
|
|
const listNode = document.getElementById("recent-matches-list");
|
|
if (!listNode || document.getElementById(LIVE_PAGINATION_ID)) return;
|
|
|
|
const paginationNode = document.createElement("div");
|
|
paginationNode.className = "historical-pagination";
|
|
paginationNode.id = LIVE_PAGINATION_ID;
|
|
paginationNode.hidden = true;
|
|
|
|
const sizeLabel = document.createElement("label");
|
|
sizeLabel.className = "historical-pagination__size";
|
|
sizeLabel.append("Mostrar ");
|
|
|
|
const pageSizeSelect = document.createElement("select");
|
|
pageSizeSelect.id = "recent-matches-live-page-size";
|
|
pageSizeSelect.setAttribute("aria-label", "Partidas por pagina");
|
|
RECENT_MATCHES_PAGE_SIZES.forEach((size) => {
|
|
const option = document.createElement("option");
|
|
option.value = String(size);
|
|
option.textContent = String(size);
|
|
option.selected = size === DEFAULT_RECENT_MATCHES_PAGE_SIZE;
|
|
pageSizeSelect.append(option);
|
|
});
|
|
sizeLabel.append(pageSizeSelect);
|
|
|
|
const navNode = document.createElement("div");
|
|
navNode.className = "historical-pagination__nav";
|
|
navNode.setAttribute("aria-label", "Paginacion de partidas recientes");
|
|
|
|
const prevButton = document.createElement("button");
|
|
prevButton.className = "historical-tab";
|
|
prevButton.type = "button";
|
|
prevButton.id = "recent-matches-live-prev";
|
|
prevButton.textContent = "Anterior";
|
|
|
|
const pageLabel = document.createElement("p");
|
|
pageLabel.id = "recent-matches-live-page-label";
|
|
pageLabel.textContent = "Pagina 1 de 1";
|
|
|
|
const nextButton = document.createElement("button");
|
|
nextButton.className = "historical-tab";
|
|
nextButton.type = "button";
|
|
nextButton.id = "recent-matches-live-next";
|
|
nextButton.textContent = "Siguiente";
|
|
|
|
navNode.append(prevButton, pageLabel, nextButton);
|
|
paginationNode.append(sizeLabel, navNode);
|
|
listNode.insertAdjacentElement("afterend", paginationNode);
|
|
|
|
pageSizeSelect.addEventListener("change", () => {
|
|
const nextPageSize = Number(pageSizeSelect.value);
|
|
recentMatchesState.pageSize = RECENT_MATCHES_PAGE_SIZES.includes(nextPageSize) ? nextPageSize : DEFAULT_RECENT_MATCHES_PAGE_SIZE;
|
|
recentMatchesState.page = 1;
|
|
renderDynamicRecentMatchesPage();
|
|
});
|
|
prevButton.addEventListener("click", () => {
|
|
recentMatchesState.page -= 1;
|
|
renderDynamicRecentMatchesPage();
|
|
});
|
|
nextButton.addEventListener("click", () => {
|
|
recentMatchesState.page += 1;
|
|
renderDynamicRecentMatchesPage();
|
|
});
|
|
}
|
|
|
|
function hideLegacyPagination() {
|
|
const legacyPagination = document.getElementById(LEGACY_PAGINATION_ID);
|
|
if (legacyPagination) {
|
|
legacyPagination.hidden = true;
|
|
}
|
|
}
|
|
|
|
function renderDynamicPagination() {
|
|
ensureDynamicPaginationControls();
|
|
hideLegacyPagination();
|
|
|
|
const paginationNode = document.getElementById(LIVE_PAGINATION_ID);
|
|
const pageSizeSelect = document.getElementById("recent-matches-live-page-size");
|
|
const prevButton = document.getElementById("recent-matches-live-prev");
|
|
const nextButton = document.getElementById("recent-matches-live-next");
|
|
const pageLabel = document.getElementById("recent-matches-live-page-label");
|
|
if (!paginationNode || !pageSizeSelect || !prevButton || !nextButton || !pageLabel) return;
|
|
|
|
const totalItems = recentMatchesState.items.length;
|
|
const totalPages = getDynamicTotalPages();
|
|
recentMatchesState.page = clampDynamicPage(recentMatchesState.page, totalPages);
|
|
paginationNode.hidden = totalItems <= recentMatchesState.pageSize;
|
|
pageSizeSelect.value = String(recentMatchesState.pageSize);
|
|
prevButton.disabled = recentMatchesState.page <= 1;
|
|
nextButton.disabled = recentMatchesState.page >= totalPages;
|
|
pageLabel.textContent = `Pagina ${recentMatchesState.page} de ${totalPages}`;
|
|
}
|
|
|
|
function getDynamicTotalPages() {
|
|
return Math.max(1, Math.ceil(recentMatchesState.items.length / recentMatchesState.pageSize));
|
|
}
|
|
|
|
function clampDynamicPage(page, totalPages) {
|
|
const numericPage = Number(page);
|
|
if (!Number.isFinite(numericPage)) return 1;
|
|
return Math.min(Math.max(1, Math.trunc(numericPage)), totalPages);
|
|
}
|
|
|
|
function renderDynamicRecentMatchCard(item) {
|
|
const mapName = item?.map?.pretty_name || item?.map?.name || "Mapa no disponible";
|
|
const serverName = item?.server?.name || "Servidor no disponible";
|
|
const closedAt = item?.closed_at || item?.ended_at || item?.started_at;
|
|
const detailUrl = buildDynamicInternalMatchDetailUrl(item);
|
|
const actionLinks = [`<span class="historical-match-card__result">${escapeDynamicHtml(formatDynamicResultLabel(item?.result))}</span>`, detailUrl ? `<a class="historical-match-card__link" href="${escapeDynamicHtml(detailUrl)}">Ver detalles</a>` : ""].join("");
|
|
|
|
return `
|
|
<article class="historical-match-card historical-match-card--clean">
|
|
<div class="historical-match-card__top historical-match-card__top--clean">
|
|
<h3 class="historical-match-card__title">${escapeDynamicHtml(mapName)}</h3>
|
|
</div>
|
|
|
|
<div class="historical-match-meta historical-match-meta--clean">
|
|
<article>
|
|
<p class="historical-match-meta__label">Servidor</p>
|
|
<strong>${escapeDynamicHtml(serverName)}</strong>
|
|
</article>
|
|
|
|
<article>
|
|
<p class="historical-match-meta__label">Cierre</p>
|
|
<strong>${escapeDynamicHtml(formatDynamicTimestamp(closedAt))}</strong>
|
|
</article>
|
|
|
|
<article>
|
|
<p class="historical-match-meta__label">Jugadores</p>
|
|
<strong>${escapeDynamicHtml(formatDynamicNumber(item?.player_count))}</strong>
|
|
</article>
|
|
|
|
<article>
|
|
<p class="historical-match-meta__label">Marcador</p>
|
|
<strong>${escapeDynamicHtml(formatDynamicScore(item?.result))}</strong>
|
|
</article>
|
|
|
|
<article class="historical-match-card__actions-cell" aria-label="Acciones de la partida">
|
|
<div class="historical-match-card__actions">
|
|
${actionLinks}
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</article>
|
|
`;
|
|
}
|
|
|
|
function readServerFromUrl() {
|
|
return new URLSearchParams(window.location.search).get("server") || "all-servers";
|
|
}
|
|
|
|
function normalizeDynamicServerSlug(value) {
|
|
const normalized = String(value || "").trim();
|
|
if (["comunidad-hispana-01", "comunidad-hispana-02", "all-servers"].includes(normalized)) return normalized;
|
|
return "all-servers";
|
|
}
|
|
|
|
function buildDynamicRecentMeta(items) {
|
|
const newest = items[0]?.closed_at || items[0]?.ended_at || items[0]?.started_at;
|
|
return newest ? `Actualizado: ${formatDynamicTimestamp(newest)}` : "Actualizado recientemente";
|
|
}
|
|
|
|
function setDynamicState(node, message, isError = false) {
|
|
node.textContent = message;
|
|
node.hidden = false;
|
|
node.classList.toggle("is-error", Boolean(isError));
|
|
}
|
|
|
|
function formatDynamicTimestamp(value) {
|
|
if (!value) return "Fecha no disponible";
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return String(value);
|
|
return new Intl.DateTimeFormat("es-ES", { day: "numeric", month: "numeric", year: "2-digit", hour: "2-digit", minute: "2-digit" }).format(date);
|
|
}
|
|
|
|
function formatDynamicNumber(value) {
|
|
const number = Number(value);
|
|
return Number.isFinite(number) ? new Intl.NumberFormat("es-ES").format(number) : "0";
|
|
}
|
|
|
|
function formatDynamicScore(result) {
|
|
const allied = result?.allied_score;
|
|
const axis = result?.axis_score;
|
|
if (Number.isFinite(Number(allied)) && Number.isFinite(Number(axis))) return `${allied} - ${axis}`;
|
|
return "- - -";
|
|
}
|
|
|
|
function formatDynamicResultLabel(result) {
|
|
const winner = String(result?.winner || "").toLowerCase();
|
|
if (winner === "allies" || winner === "allied") return "Victoria aliada";
|
|
if (winner === "axis") return "Victoria axis";
|
|
return "Empate";
|
|
}
|
|
|
|
function buildDynamicInternalMatchDetailUrl(item) {
|
|
const serverSlug = item?.server?.slug;
|
|
const matchId = item?.internal_detail_match_id || item?.match_id;
|
|
if (!serverSlug || matchId === undefined || matchId === null) return "";
|
|
return `./historico-partida.html?server=${encodeURIComponent(String(serverSlug))}&match=${encodeURIComponent(String(matchId))}`;
|
|
}
|
|
|
|
function normalizeDynamicExternalMatchUrl(value) {
|
|
if (typeof value !== "string" || !value.trim()) return "";
|
|
try {
|
|
const url = new URL(value.trim());
|
|
return ["http:", "https:"].includes(url.protocol) ? url.href : "";
|
|
} catch (error) {
|
|
return "";
|
|
}
|
|
}
|
|
|
|
function escapeDynamicHtml(value) {
|
|
return String(value ?? "")
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """)
|
|
.replaceAll("'", "'");
|
|
}
|
|
})(); |