correccion atleta vista

public/js/atleta.js

@@ -84,8 +84,8 @@ function logout() {
   window.location.href = "../index.html";
 }
 
-function verSimulador(rutinaId, index) {
-  window.location.href = `simulador.html?routineId=${rutinaId}&formationIndex=${index}`;
+function verSimuladorCompleto(rutinaId) {
+  window.location.href = `simulador.html?routineId=${rutinaId}`;
 }
 
 async function cargarAsignaciones() {
@@ -107,29 +107,48 @@ async function cargarAsignaciones() {
       return;
     }
 
-    contenedor.innerHTML = '';
+    // Agrupar por rutinaId
+    const grupos = {};
     formaciones.forEach(f => {
+      if (!grupos[f.rutinaId]) {
+        grupos[f.rutinaId] = {
+          nombre: f.rutinaNombre,
+          formaciones: []
+        };
+      }
+      grupos[f.rutinaId].formaciones.push(f);
+    });
+
+    contenedor.innerHTML = '';
+
+    Object.entries(grupos).forEach(([rutinaId, grupo]) => {
       const card = document.createElement("div");
       card.className = "card text-start my-3 shadow-sm";
 
+      const formacionesHTML = grupo.formaciones.map(f => `
+        <div class="mb-2">
+          <strong>${traducciones[langActual].formacion}:</strong> ${f.nombreColoquial || "—"}<br>
+          <strong>${traducciones[langActual].duracion}:</strong> ${f.duracion || "?"}s<br>
+          <strong>${traducciones[langActual].notas}:</strong> ${f.notasTacticas || "—"}<br>
+          <strong>${traducciones[langActual].rol}:</strong> ${f.atleta.rol || "—"} |
+          <strong>${traducciones[langActual].id}:</strong> ${f.atleta.idPersonalizado || "—"} |
+          <strong>${traducciones[langActual].figura}:</strong> ${f.atleta.figura || "—"}
+        </div>
+      `).join('');
+
       card.innerHTML = `
         <div class="card-body">
-          <h5 class="card-title text-primary fw-bold">${f.rutinaNombre || traducciones[langActual].rutinaSinNombre}</h5>
-          <h6 class="card-subtitle mb-2 text-muted">${traducciones[langActual].formacion}: ${f.nombreColoquial || "(sin nombre)"}</h6>
-          <p class="card-text small mb-1">
-            <strong>${traducciones[langActual].duracion}:</strong> ${f.duracion || "?"}s<br>
-            <strong>${traducciones[langActual].notas}:</strong> ${f.notasTacticas || "—"}<br>
-            <strong>${traducciones[langActual].rol}:</strong> ${f.atleta.rol || "N/A"} |
-            <strong>${traducciones[langActual].id}:</strong> ${f.atleta.idPersonalizado || "N/A"} |
-            <strong>${traducciones[langActual].figura}:</strong> ${f.atleta.figura || "—"}
-          </p>
-          <button class="btn btn-sm btn-outline-success" onclick="verSimulador('${f.rutinaId}', ${f.index})">
+          <h5 class="card-title text-primary fw-bold">${grupo.nombre || traducciones[langActual].rutinaSinNombre}</h5>
+          ${formacionesHTML}
+          <button class="btn btn-sm btn-outline-success mt-2" onclick="verSimuladorCompleto('${rutinaId}')">
             ${traducciones[langActual].verSimulacion}
           </button>
         </div>
       `;
+
       contenedor.appendChild(card);
     });
+
   } catch (err) {
     console.error("❌ Error al obtener formaciones:", err);
     contenedor.innerHTML = `<p>${traducciones[langActual].errorCarga}</p>`;

public/js/piscina.js

@@ -610,26 +610,30 @@ function animarTransicion(nuevaFormacion) {
   return a;
 });
 
-    const body = {
-      nombreColoquial: nombre,
-      notasTacticas: notas,
-      duracion: duracion || 0,
-      atletas: formacionActual.map(a => ({
-        atletaId: a.atletaId,
-        idPersonalizado: a.idPersonalizado,
-        x: a.x,
-        y: a.y,
-        rol: a.rol,
-        grupo: a.grupo,
-        direccion: a.direccion,
-        figura: a.figura,
-        tipoElemento: a.tipoElemento,
-        codigoElemento: a.codigoElemento,
-        tipoPiscina: tipoPiscinaSelect.value,
+      const body = {
+        nombreColoquial: nombre,
+        notasTacticas: notas,
+        duracion: duracion || 0,
+        atletas: formacionActual.map(a => ({
+          atletaId: a.atletaId,
+          idPersonalizado: a.idPersonalizado,
+          x: a.x,
+          y: a.y,
+          rol: a.rol,
+          grupo: a.grupo,
+          direccion: a.direccion,
+          figura: a.figura,
+          tipoElemento: a.tipoElemento,
+          codigoElemento: a.codigoElemento,
+          tipoPiscina: tipoPiscinaSelect.value,
+        }))
+      };
 
-        
-      }))
-    };
+          // Validación extra: asegura que se esté usando bien el ID de rutina
+if (!rutinaId) {
+  alert('No se puede guardar porque falta el ID de rutina.');
+  return;
+}
 
     const method = editIndex === null ? 'POST' : 'PUT';
     const endpoint = editIndex === null

public/js/simulador.js

@@ -66,7 +66,8 @@ document.getElementById('langSelector')?.addEventListener('change', async (e) =>
 
 document.addEventListener("DOMContentLoaded", async () => {
   const rutinaId = new URLSearchParams(window.location.search).get("routineId");
-  const formationIndex = parseInt(new URLSearchParams(window.location.search).get("formationIndex"));
+  const formationIndexParam = new URLSearchParams(window.location.search).get("formationIndex");
+  const formationIndex = formationIndexParam !== null ? parseInt(formationIndexParam) : 0;
 
   const userId = sessionStorage.getItem("userId");
   if (userId) {
@@ -87,8 +88,8 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   translateStatic();
 
-  if (!rutinaId || isNaN(formationIndex)) {
-    return alert("No se proporcionó ID de rutina o índice de formación.");
+  if (!rutinaId) {
+    return alert("No se proporcionó ID de rutina.");
   }
 
   const tituloRutina = document.getElementById("tituloRutina");
@@ -221,19 +222,36 @@ document.addEventListener("DOMContentLoaded", async () => {
   }
 
   const formaciones = await fetch(`/api/rutinas/${rutinaId}/formations`).then(res => res.json());
-  const formacion = formaciones[formationIndex];
 
-  if (!formacion) {
-    alert("La formación solicitada no existe.");
+  if (!Array.isArray(formaciones) || formaciones.length === 0) {
+    alert("La rutina no tiene formaciones.");
     return;
   }
 
-  formacion.atletas.forEach(dibujarAtleta);
+  // Crear botones de la línea de tiempo
+  formaciones.forEach((f, i) => {
+    const block = document.createElement("button");
+    block.className = "btn btn-outline-primary btn-sm me-2 step";
+    block.textContent = `${f.nombreColoquial || `Formación ${i + 1}`} (${f.duracion || '?'}s)`;
+    block.dataset.index = i;
+    block.title = f.notasTacticas || '';
+    timeline.appendChild(block);
+  });
 
-  const block = document.createElement("button");
-  block.className = "btn btn-outline-primary btn-sm me-2 step";
-  block.textContent = `${formacion.nombreColoquial || `Formación ${formationIndex + 1}`} (${formacion.duracion || '?'}s)`;
-  block.dataset.index = formationIndex;
-  block.title = formacion.notasTacticas || '';
-  timeline.appendChild(block);
+  function renderFormacion(index) {
+    const formacion = formaciones[index];
+    if (!formacion) return;
+
+    layer.destroyChildren();
+    dibujarCuadricula(layer, piscinaWidth, piscinaHeight);
+    formacion.atletas.forEach(dibujarAtleta);
+  }
+
+  renderFormacion(formationIndex);
+
+  timeline.addEventListener('click', (e) => {
+    if (!e.target.classList.contains('step')) return;
+    const index = parseInt(e.target.dataset.index);
+    renderFormacion(index);
+  });
 });