/*document.addEventListener("DOMContentLoaded", () => { async function cargarEscudos() { try { const respuesta = await fetch(`mostrar_equipaciones.php?_=${Date.now()}`, { method: 'GET', headers: { 'Cache-Control': 'no-cache, no-store, must-revalidate', 'Pragma': 'no-cache', 'Expires': '0' } }); if (!respuesta.ok) throw new Error('Error en el servidor'); const html = await respuesta.text(); const contenedor = document.getElementById("mostrar_equipaciones"); if (contenedor) { const parser = new DOMParser(); const docNuevo = parser.parseFromString(html, 'text/html'); const canvasNuevos = docNuevo.querySelectorAll(".bandera-viento"); const canvasActuales = contenedor.querySelectorAll(".bandera-viento"); const divsNuevos = docNuevo.querySelectorAll(".equipacion-imagenes"); const divsActuales = contenedor.querySelectorAll(".equipacion-imagenes"); if (canvasActuales.length !== canvasNuevos.length || divsActuales.length !== divsNuevos.length || canvasActuales.length === 0) { contenedor.innerHTML = html; initBanderas(); return; } // FILTRO CRÍTICO: Comprobamos si el orden o los datos han cambiado realmente let hayCambiosReales = false; canvasNuevos.forEach((canvasNuevo, index) => { const canvasActual = canvasActuales[index]; if (canvasActual.getAttribute("data-src") !== canvasNuevo.getAttribute("data-src")) { hayCambiosReales = true; } }); // Si no hay ningún cambio en las posiciones ni en los datos, nos saltamos la animación por completo if (!hayCambiosReales) { return; } // 1. MAPEAMOS LAS COORDENADAS ANTES DEL REFRESCO (Solo si hay cambios reales) const posInicialesCanvas = new Map(); const posInicialesDivs = new Map(); canvasActuales.forEach((canvas) => { const src = canvas.getAttribute("data-src"); if (src) posInicialesCanvas.set(src, canvas.getBoundingClientRect()); }); divsActuales.forEach((div) => { const img = div.querySelector("img"); if (img && img.getAttribute("src")) { posInicialesDivs.set(img.getAttribute("src"), div.getBoundingClientRect()); } }); // 2. ACTUALIZAMOS LOS DATOS DE LAS 16 POSICIONES canvasNuevos.forEach((canvasNuevo, index) => { const canvasActual = canvasActuales[index]; const srcNuevo = canvasNuevo.getAttribute("data-src"); const estiloNuevo = canvasNuevo.getAttribute("style"); if (canvasActual.getAttribute("data-src") !== srcNuevo) { canvasActual.setAttribute("data-src", srcNuevo); canvasActual.removeAttribute("data-animado"); canvasActual.dataset.animado = "false"; } if (canvasActual.getAttribute("style") !== estiloNuevo) { canvasActual.setAttribute("style", estiloNuevo); } }); divsNuevos.forEach((divNuevo, index) => { const divActual = divsActuales[index]; if (divActual && divActual.innerHTML !== divNuevo.innerHTML) { divActual.innerHTML = divNuevo.innerHTML; } }); initBanderas(); // 3. ANIMAMOS LA FLOTACIÓN SÓLO PARA LOS ELEMENTOS QUE CAMBIARON DE LUGAR canvasActuales.forEach((canvas) => { const src = canvas.getAttribute("data-src"); const inicial = posInicialesCanvas.get(src); if (inicial) { const final = canvas.getBoundingClientRect(); const deltaX = inicial.left - final.left; const deltaY = inicial.top - final.top; if (deltaX !== 0 || deltaY !== 0) { canvas.animate([ { transform: `translate(${deltaX}px, ${deltaY}px)` }, { transform: 'translate(0px, 0px)' } ], { duration: 3600,easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)'}); } } }); // 4. ANIMAMOS LOS DIVS DE LAS EQUIPACIONES (Sincronizados por la bandera) divsActuales.forEach((div) => { // Averiguamos en qué número de renglón (0 al 15) está este div de equipación ahora mismo const indexActual = Array.from(divsActuales).indexOf(div); const canvasActual = canvasActuales[indexActual]; if (canvasActual) { const srcBanderaActual = canvasActual.getAttribute("data-src"); // Recuperamos la posición física donde estaba la caja de esta equipación antes del refresco const inicial = posInicialesDivs.get(srcBanderaActual); if (inicial) { const final = div.getBoundingClientRect(); const deltaX = inicial.left - final.left; const deltaY = inicial.top - final.top; // Si el equipo cambió de renglón, deltaY o deltaX no serán 0 if (deltaX !== 0 || deltaY !== 0) { // Forzamos la animación en la caja contenedora externa div.animate([ { transform: `translate(${deltaX}px, ${deltaY}px)`, opacity: '0.7' }, { transform: 'translate(0px, 0px)', opacity: '1' } ], { duration: 3600, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' }); } } } }); } } catch (error) { console.error("Error al cargar escudos:", error); } finally { setTimeout(cargarEscudos, 10000); } } cargarEscudos(); }); */ /*document.addEventListener("DOMContentLoaded", () => { async function cargarEscudos() { try { const respuesta = await fetch(`mostrar_equipaciones.php?_=${Date.now()}`, { method: 'GET', headers: { 'Cache-Control': 'no-cache, no-store, must-revalidate', 'Pragma': 'no-cache', 'Expires': '0' } }); if (!respuesta.ok) throw new Error('Error en el servidor'); const html = await respuesta.text(); const contenedor = document.getElementById("mostrar_equipaciones"); if (contenedor) { const parser = new DOMParser(); const docNuevo = parser.parseFromString(html, 'text/html'); const canvasNuevos = docNuevo.querySelectorAll(".bandera-viento"); const canvasActuales = contenedor.querySelectorAll(".bandera-viento"); const divsNuevos = docNuevo.querySelectorAll(".equipacion-imagenes"); const divsActuales = contenedor.querySelectorAll(".equipacion-imagenes"); if (canvasActuales.length !== canvasNuevos.length || divsActuales.length !== divsNuevos.length || canvasActuales.length === 0) { contenedor.innerHTML = html; initBanderas(); return; } // FILTRO CRÍTICO: Comprobamos si el orden o los datos han cambiado realmente let hayCambiosReales = false; canvasNuevos.forEach((canvasNuevo, index) => { const canvasActual = canvasActuales[index]; if (canvasActual.getAttribute("data-src") !== canvasNuevo.getAttribute("data-src")) { hayCambiosReales = true; } }); // Si no hay ningún cambio en las posiciones ni en los datos, nos saltamos la animación por completo if (!hayCambiosReales) { return; } // 1. MAPEAMOS LAS COORDENADAS ANTES DEL REFRESCO (Solo si hay cambios reales) const posInicialesCanvas = new Map(); const posInicialesDivs = new Map(); canvasActuales.forEach((canvas) => { const src = canvas.getAttribute("data-src"); if (src) posInicialesCanvas.set(src, canvas.getBoundingClientRect()); }); divsActuales.forEach((div) => { const img = div.querySelector("img"); if (img && img.getAttribute("src")) { posInicialesDivs.set(img.getAttribute("src"), div.getBoundingClientRect()); } }); // 2. ACTUALIZAMOS LOS DATOS DE LAS 16 POSICIONES canvasNuevos.forEach((canvasNuevo, index) => { const canvasActual = canvasActuales[index]; const srcNuevo = canvasNuevo.getAttribute("data-src"); const estiloNuevo = canvasNuevo.getAttribute("style"); if (canvasActual.getAttribute("data-src") !== srcNuevo) { canvasActual.setAttribute("data-src", srcNuevo); canvasActual.removeAttribute("data-animado"); canvasActual.dataset.animado = "false"; } if (canvasActual.getAttribute("style") !== estiloNuevo) { canvasActual.setAttribute("style", estiloNuevo); } }); divsNuevos.forEach((divNuevo, index) => { const divActual = divsActuales[index]; if (divActual && divActual.innerHTML !== divNuevo.innerHTML) { divActual.innerHTML = divNuevo.innerHTML; } }); initBanderas(); // 3. ANIMAMOS LA FLOTACIÓN SÓLO PARA LOS ELEMENTOS QUE CAMBIARON DE LUGAR canvasActuales.forEach((canvas) => { const src = canvas.getAttribute("data-src"); const inicial = posInicialesCanvas.get(src); if (inicial) { const final = canvas.getBoundingClientRect(); const deltaX = inicial.left - final.left; const deltaY = inicial.top - final.top; if (deltaX !== 0 || deltaY !== 0) { canvas.animate([ { transform: `translate(${deltaX}px, ${deltaY}px)` }, { transform: 'translate(0px, 0px)' } ], { duration: 3600,easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)'}); } } }); // 4. ANIMAMOS LOS DIVS DE LAS EQUIPACIONES (Sincronizados por la bandera) divsActuales.forEach((div) => { // Averiguamos en qué número de renglón (0 al 15) está este div de equipación ahora mismo const indexActual = Array.from(divsActuales).indexOf(div); const canvasActual = canvasActuales[indexActual]; if (canvasActual) { const srcBanderaActual = canvasActual.getAttribute("data-src"); // Recuperamos la posición física donde estaba la caja de esta equipación antes del refresco const inicial = posInicialesDivs.get(srcBanderaActual); if (inicial) { const final = div.getBoundingClientRect(); const deltaX = inicial.left - final.left; const deltaY = inicial.top - final.top; // Si el equipo cambió de renglón, deltaY o deltaX no serán 0 if (deltaX !== 0 || deltaY !== 0) { // Forzamos la animación en la caja contenedora externa div.animate([ { transform: `translate(${deltaX}px, ${deltaY}px)`, opacity: '0.7' }, { transform: 'translate(0px, 0px)', opacity: '1' } ], { duration: 3600, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' }); } } } }); } } catch (error) { console.error("Error al cargar escudos:", error); } finally { setTimeout(cargarEscudos, 10000); } } cargarEscudos(); }); */

F U T B O L A S P A L M A S . C O M