Add se actualizan las salas automaticamente

js/buscadorSala.js

@@ -1,8 +1,47 @@
+// =====================================================
+// VARIABLES
+// =====================================================
+
+let intervaloBuscadorSalas = null;
+let cargandoSalas = false;
+
+
+// =====================================================
+// INICIAR ACTUALIZACIÓN AUTOMÁTICA
+// =====================================================
+
+function iniciarActualizacionSalas() {
+  // Evitar crear varios intervalos
+  if (intervaloBuscadorSalas) {
+    clearInterval(intervaloBuscadorSalas);
+  }
+
+  // Primera carga
+  cargarSalas();
+
+  // Actualizar cada 5 segundos
+  intervaloBuscadorSalas = setInterval(function () {
+    // Si el usuario está dentro de una sala,
+    // no necesitamos actualizar el buscador.
+    if (!usuarioYaEstaEnEquipo) {
+      cargarSalas();
+    }
+  }, 5000);
+}
+
+
 // =====================================================
 // CARGAR LISTA DE SALAS
 // =====================================================
 
 function cargarSalas() {
+  // Evitar peticiones simultáneas
+  if (cargandoSalas) {
+    return;
+  }
+
+  cargandoSalas = true;
+
   $.ajax({
     url: "controladores/controladorPartida.php",
     type: "POST",
@@ -15,24 +54,71 @@ function cargarSalas() {
     success: function (partidas) {
       const contenedor = $("#contenedorSalas");
 
-      contenedor.empty();
+      // =================================================
+      // NO HAY SALAS
+      // =================================================
 
       if (
         !Array.isArray(partidas) ||
         partidas.length === 0
       ) {
-        contenedor.html(`
+        // Ocultamos/eliminamos únicamente las salas
-          <div class="col-12 text-center">
+        $(".sala-item").remove();
-            <p class="text-muted">
+
-              No hay salas disponibles actualmente.
+        if ($("#mensajeSinSalas").length === 0) {
-            </p>
+          contenedor.append(`
-          </div>
+            <div
-        `);
+              id="mensajeSinSalas"
+              class="col-12 text-center">
+
+              <p class="text-muted">
+                No hay salas disponibles actualmente.
+              </p>
+
+            </div>
+          `);
+        }
 
         return;
       }
 
-      // Cargar cada sala individualmente
+
+      // =================================================
+      // HAY SALAS
+      // =================================================
+
+      // Eliminar mensaje de "no hay salas"
+      $("#mensajeSinSalas").remove();
+
+
+      // =================================================
+      // OBTENER IDS DE LAS SALAS ACTUALES
+      // =================================================
+
+      const idsPartidas = partidas.map(function (partida) {
+        return String(partida.idPartida);
+      });
+
+
+      // =================================================
+      // ELIMINAR SALAS QUE YA NO EXISTEN
+      // =================================================
+
+      $(".sala-item").each(function () {
+        const idPartida = String(
+          $(this).data("id-partida")
+        );
+
+        if (!idsPartidas.includes(idPartida)) {
+          $(this).remove();
+        }
+      });
+
+
+      // =================================================
+      // ACTUALIZAR / CREAR CADA SALA
+      // =================================================
+
       partidas.forEach(function (partida) {
         cargarSalaBuscador(partida);
       });
@@ -44,12 +130,16 @@ function cargarSalas() {
         error
       );
     },
+
+    complete: function () {
+      cargandoSalas = false;
+    },
   });
 }
 
 
 // =====================================================
-// CARGAR INFORMACIÓN DE UNA SALA DEL BUSCADOR
+// CARGAR INFORMACIÓN DE UNA SALA
 // =====================================================
 
 function cargarSalaBuscador(partida) {
@@ -75,7 +165,7 @@ function cargarSalaBuscador(partida) {
         },
 
         success: function (jugadores) {
-          mostrarSalaBuscador(
+          actualizarSalaBuscador(
             partida,
             equipos,
             jugadores
@@ -102,30 +192,158 @@ function cargarSalaBuscador(partida) {
 
 
 // =====================================================
-// MOSTRAR UNA SALA EN EL BUSCADOR
+// ACTUALIZAR UNA SALA
 // =====================================================
 
-function mostrarSalaBuscador(
+function actualizarSalaBuscador(
+  partida,
+  equipos,
+  jugadores
+) {
+  const selectorSala =
+    `.sala-item[data-id-partida="${partida.idPartida}"]`;
+
+  const salaExistente = $(selectorSala);
+
+
+  // ===================================================
+  // SI LA SALA NO EXISTE → CREARLA
+  // ===================================================
+
+  if (salaExistente.length === 0) {
+    crearSalaBuscador(
+      partida,
+      equipos,
+      jugadores
+    );
+
+    return;
+  }
+
+
+  // ===================================================
+  // LA SALA YA EXISTE
+  // ===================================================
+  //
+  // NO TOCAMOS LA TARJETA COMPLETA.
+  //
+  // Solo actualizamos .equipos
+  //
+
+
+  const equiposHTML =
+    generarEquiposHTML(
+      partida,
+      equipos,
+      jugadores
+    );
+
+
+  salaExistente
+    .find(".equipos")
+    .html(equiposHTML);
+}
+
+
+// =====================================================
+// CREAR UNA SALA NUEVA
+// =====================================================
+
+function crearSalaBuscador(
+  partida,
+  equipos,
+  jugadores
+) {
+  const equiposHTML =
+    generarEquiposHTML(
+      partida,
+      equipos,
+      jugadores
+    );
+
+
+  const salaHTML = `
+    <div
+      class="col-12 col-md-10 col-lg-8 sala-item"
+      data-id-partida="${partida.idPartida}">
+
+      <div class="sala card p-3 shadow-sm mb-4">
+
+        <!-- =========================================
+             CABECERA
+        ========================================== -->
+
+        <div
+          class="sala-header h4 text-center mb-3 text-white">
+
+          ${escapeHTML(
+            partida.nombrePartida
+          )}
+
+        </div>
+
+
+        <!-- =========================================
+             CUERPO
+        ========================================== -->
+
+        <div class="sala-body">
+
+          <!-- ESTA ES LA PARTE QUE SE ACTUALIZA -->
+
+          <div class="equipos d-flex justify-content-around">
+
+            ${equiposHTML}
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+  `;
+
+
+  $("#contenedorSalas").append(
+    salaHTML
+  );
+}
+
+
+// =====================================================
+// GENERAR HTML DE EQUIPOS Y JUGADORES
+// =====================================================
+
+function generarEquiposHTML(
   partida,
   equipos,
   jugadores
 ) {
   let equiposHTML = "";
 
+
   equipos.forEach(function (equipo) {
-    const jugadoresEquipo = jugadores.filter(
+    // -----------------------------------------------
-      function (jugador) {
+    // JUGADORES DE ESTE EQUIPO
-        return (
+    // -----------------------------------------------
-          jugador.idEquipo ==
+
-          equipo.idEquipo
+    const jugadoresEquipo =
-        );
+      jugadores.filter(
-      }
+        function (jugador) {
-    );
+          return (
+            jugador.idEquipo ==
+            equipo.idEquipo
+          );
+        }
+      );
+
 
     let jugadoresHTML = "";
 
+
     // -----------------------------------------------
-    // JUGADORES DEL EQUIPO
+    // MOSTRAR JUGADORES
     // -----------------------------------------------
 
     if (jugadoresEquipo.length > 0) {
@@ -135,28 +353,38 @@ function mostrarSalaBuscador(
             jugador.idUsuario ==
             partida.idUsuario;
 
+
           jugadoresHTML += `
-            <div class="jugador border border-2 d-flex align-items-center justify-content-between">
+            <div
+              class="jugador border border-2 d-flex align-items-center justify-content-between">
 
               <div>
+
                 <span class="avatar">
+
                   ${
                     esHost
                       ? '<i class="bi bi-award-fill"></i>'
                       : '<i class="bi bi-person-fill"></i>'
                   }
+
                 </span>
 
                 ${escapeHTML(
                   jugador.nombreUsuario
                 )}
+
               </div>
 
+
               ${
                 esHost
                   ? `
-                    <span class="badge bg-warning text-dark ms-2">
+                    <span
+                      class="badge bg-warning text-dark ms-2">
+
                       HOST
+
                     </span>
                   `
                   : ""
@@ -174,18 +402,22 @@ function mostrarSalaBuscador(
       `;
     }
 
+
     // -----------------------------------------------
     // BOTÓN UNIRSE
     // -----------------------------------------------
 
     let botonUnirseHTML = "";
 
+
     if (!usuarioYaEstaEnEquipo) {
       botonUnirseHTML = `
         <button
           type="button"
           class="btn-unirse w-100 btn-unirse-equipo mt-2"
+
           data-id-partida="${partida.idPartida}"
+
           data-id-equipo="${equipo.idEquipo}">
 
           Unirse
@@ -194,12 +426,14 @@ function mostrarSalaBuscador(
       `;
     }
 
+
     // -----------------------------------------------
     // EQUIPO
     // -----------------------------------------------
 
     equiposHTML += `
-      <div class="equipo me-2 ms-2 p-3 border rounded">
+      <div
+        class="equipo me-2 ms-2 p-3 border rounded">
 
         <h6>
           ${escapeHTML(
@@ -208,7 +442,9 @@ function mostrarSalaBuscador(
         </h6>
 
         <div class="jugadores mb-2">
+
           ${jugadoresHTML}
+
         </div>
 
         ${botonUnirseHTML}
@@ -218,48 +454,7 @@ function mostrarSalaBuscador(
   });
 
 
-  // =================================================
+  return equiposHTML;
-  // TARJETA DE LA SALA
-  // =================================================
-
-  const salaHTML = `
-    <div class="col-12 col-md-10 col-lg-8">
-
-      <div class="sala card p-3 shadow-sm mb-4">
-
-        <div class="sala-header h4 text-center mb-3 text-white">
-          ${escapeHTML(
-            partida.nombrePartida
-          )}
-        </div>
-
-        <div class="sala-body">
-
-          <div class="equipos d-flex justify-content-around">
-            ${equiposHTML}
-          </div>
-
-        </div>
-
-      </div>
-
-    </div>
-  `;
-
-
-  // =================================================
-  // IMPORTANTE
-  // =================================================
-  //
-  // NO usamos .html() aquí porque eso eliminaría
-  // las salas que ya se hayan mostrado.
-  //
-  // Usamos .append() para añadir cada nueva sala.
-  //
-
-  $("#contenedorSalas").append(
-    salaHTML
-  );
 }
 
 
@@ -279,9 +474,14 @@ $("#btnCrearSala").on(
     const nombreEquipo2 =
       $("#nombreEquipo2").val().trim();
 
+
     let valido = true;
 
-    // Limpiar errores anteriores
+
+    // -----------------------------------------------
+    // LIMPIAR ERRORES
+    // -----------------------------------------------
+
     $(".mensaje-error-sala").remove();
 
     $(".input-kahoot")
@@ -340,7 +540,7 @@ $("#btnCrearSala").on(
 
 
     // -----------------------------------------------
-    // LOS EQUIPOS NO PUEDEN TENER EL MISMO NOMBRE
+    // COMPROBAR NOMBRES IGUALES
     // -----------------------------------------------
 
     if (
@@ -358,14 +558,17 @@ $("#btnCrearSala").on(
     }
 
 
-    // Si hay errores, no continuar
+    // -----------------------------------------------
+    // SI HAY ERRORES
+    // -----------------------------------------------
+
     if (!valido) {
       return;
     }
 
 
     // -----------------------------------------------
-    // DESACTIVAR BOTÓN
+    // BOTÓN
     // -----------------------------------------------
 
     const boton = $("#btnCrearSala");
@@ -376,7 +579,7 @@ $("#btnCrearSala").on(
 
 
     // -----------------------------------------------
-    // CREAR SALA
+    // PETICIÓN
     // -----------------------------------------------
 
     $.ajax({
@@ -386,8 +589,11 @@ $("#btnCrearSala").on(
 
       data: {
         orden: "crear",
+
         nombrePartida: nombreSala,
+
         nombreEquipo1: nombreEquipo1,
+
         nombreEquipo2: nombreEquipo2,
       },
 
@@ -432,7 +638,7 @@ $("#btnCrearSala").on(
 
 
 // =====================================================
-// MOSTRAR ERROR DE VALIDACIÓN
+// MOSTRAR ERROR
 // =====================================================
 
 function mostrarError(
@@ -444,8 +650,11 @@ function mostrarError(
   input.addClass("is-invalid");
 
   input.after(`
-    <div class="mensaje-error-sala text-danger mt-1 small">
+    <div
+      class="mensaje-error-sala text-danger mt-1 small">
+
       ${mensaje}
+
     </div>
   `);
 }
@@ -466,4 +675,4 @@ $(document).on(
       .next(".mensaje-error-sala")
       .remove();
   }
-);
+);

js/sala.js

@@ -27,7 +27,7 @@ function comprobarSalaUsuario() {
 
         $("#contenedorCrearSala").show();
 
-        cargarSalas();
+        iniciarActualizacionSalas();
       } else {
         usuarioYaEstaEnEquipo = true;
 
@@ -38,10 +38,7 @@ function comprobarSalaUsuario() {
     },
 
     error: function (xhr, status, error) {
-      console.error(
+      console.error("Error al comprobar la sala del usuario:", error);
-        "Error al comprobar la sala del usuario:",
-        error
-      );
 
       usuarioYaEstaEnEquipo = false;
 
@@ -95,10 +92,7 @@ function cargarSalaCompleta(idPartida) {
     },
 
     error: function (xhr, status, error) {
-      console.error(
+      console.error("Error al obtener la sala:", error);
-        "Error al obtener la sala:",
-        error
-      );
     },
   });
 }
@@ -134,19 +128,13 @@ function cargarInformacionSalaCompleta(partida) {
         },
 
         error: function (xhr, status, error) {
-          console.error(
+          console.error("Error al obtener jugadores:", error);
-            "Error al obtener jugadores:",
-            error
-          );
         },
       });
     },
 
     error: function (xhr, status, error) {
-      console.error(
+      console.error("Error al obtener equipos:", error);
-        "Error al obtener equipos:",
-        error
-      );
     },
   });
 }
@@ -176,10 +164,7 @@ function actualizarSalaUsuario(idPartida) {
     },
 
     error: function (xhr, status, error) {
-      console.error(
+      console.error("Error al actualizar la sala:", error);
-        "Error al actualizar la sala:",
-        error
-      );
     },
   });
 }
@@ -211,27 +196,17 @@ function cargarInformacionSala(partida) {
         },
 
         success: function (jugadores) {
-          mostrarEquipos(
+          mostrarEquipos(partida, equipos, jugadores);
-            partida,
-            equipos,
-            jugadores
-          );
         },
 
         error: function (xhr, status, error) {
-          console.error(
+          console.error("Error al obtener jugadores:", error);
-            "Error al obtener jugadores:",
-            error
-          );
         },
       });
     },
 
     error: function (xhr, status, error) {
-      console.error(
+      console.error("Error al obtener equipos:", error);
-        "Error al obtener equipos:",
-        error
-      );
     },
   });
 }
@@ -241,33 +216,32 @@ function cargarInformacionSala(partida) {
 // =====================================================
 
 function mostrarSala(partida, equipos, jugadores) {
-    const contenedor = $("#contenedorSalas");
+  const contenedor = $("#contenedorSalas");
 
-    let equiposHTML = "";
+  let equiposHTML = "";
 
-    equipos.forEach(function (equipo) {
+  equipos.forEach(function (equipo) {
-        const jugadoresEquipo = jugadores.filter(function (jugador) {
+    const jugadoresEquipo = jugadores.filter(function (jugador) {
-            return jugador.idEquipo == equipo.idEquipo;
+      return jugador.idEquipo == equipo.idEquipo;
-        });
+    });
 
-        let jugadoresHTML = "";
+    let jugadoresHTML = "";
 
-        if (jugadoresEquipo.length > 0) {
+    if (jugadoresEquipo.length > 0) {
-            jugadoresEquipo.forEach(function (jugador) {
+      jugadoresEquipo.forEach(function (jugador) {
-                const esHost =
+        const esHost = jugador.idUsuario == partida.idUsuario;
-                    jugador.idUsuario == partida.idUsuario;
 
-                jugadoresHTML += `
+        jugadoresHTML += `
                     <div class="jugador border border-2 d-flex align-items-center justify-content-between ${
-                        esHost ? "jugador-host" : ""
+                      esHost ? "jugador-host" : ""
                     }">
 
                         <div>
                             <span class="avatar">
                                 ${
-                                    esHost
+                                  esHost
-                                        ? '<i class="bi bi-award-fill"></i>'
+                                    ? '<i class="bi bi-award-fill"></i>'
-                                        : '<i class="bi bi-person-fill"></i>'
+                                    : '<i class="bi bi-person-fill"></i>'
                                 }
                             </span>
 
@@ -275,25 +249,25 @@ function mostrarSala(partida, equipos, jugadores) {
                         </div>
 
                         ${
-                            esHost
+                          esHost
-                                ? `<span class="badge bg-warning text-dark ms-2">
+                            ? `<span class="badge bg-warning text-dark ms-2">
                                     HOST
                                    </span>`
-                                : ""
+                            : ""
                         }
 
                     </div>
                 `;
-            });
+      });
-        } else {
+    } else {
-            jugadoresHTML = `
+      jugadoresHTML = `
                 <div class="text-muted small">
                     Sin jugadores
                 </div>
             `;
-        }
+    }
 
-        equiposHTML += `
+    equiposHTML += `
             <div class="equipo me-2 ms-2 p-3 border rounded">
 
                 <h6>
@@ -306,15 +280,14 @@ function mostrarSala(partida, equipos, jugadores) {
 
             </div>
         `;
-    });
+  });
 
-    const esHost =
+  const esHost = partida.idUsuario == idUsuarioSesion;
-        partida.idUsuario == idUsuarioSesion;
 
-    let botonIniciarHTML = "";
+  let botonIniciarHTML = "";
 
-    if (esHost) {
+  if (esHost) {
-        botonIniciarHTML = `
+    botonIniciarHTML = `
             <a
                 href="juego.php?idPartida=${partida.idPartida}"
                 class="btn btn-success btn-lg px-4">
@@ -324,9 +297,9 @@ function mostrarSala(partida, equipos, jugadores) {
 
             </a>
         `;
-    }
+  }
 
-    const salaHTML = `
+  const salaHTML = `
         <div class="col-12 col-md-10 col-lg-8">
 
             <div class="sala card p-3 shadow-sm mb-4">
@@ -353,11 +326,7 @@ function mostrarSala(partida, equipos, jugadores) {
 
                         </button>
 
-                        ${
+                        ${esHost ? botonIniciarHTML : ""}
-                            esHost
-                                ? botonIniciarHTML
-                                : ""
-                        }
 
                     </div>
 
@@ -368,208 +337,159 @@ function mostrarSala(partida, equipos, jugadores) {
         </div>
     `;
 
-    // IMPORTANTE:
+  // IMPORTANTE:
-    // El usuario está dentro de una única sala.
+  // El usuario está dentro de una única sala.
-    // Por eso aquí SÍ queremos reemplazar.
+  // Por eso aquí SÍ queremos reemplazar.
-    contenedor.html(salaHTML);
+  contenedor.html(salaHTML);
 }
 
-
 // =====================================================
 // UNIRSE A UN EQUIPO
 // =====================================================
 
-$(document).on(
+$(document).on("click", ".btn-unirse-equipo", function () {
-  "click",
+  const boton = $(this);
-  ".btn-unirse-equipo",
-  function () {
-    const boton = $(this);
 
-    const idEquipo = boton.data("id-equipo");
+  const idEquipo = boton.data("id-equipo");
-    const idPartida = boton.data("id-partida");
+  const idPartida = boton.data("id-partida");
 
-    boton
+  boton.prop("disabled", true).text("Uniéndose...");
-      .prop("disabled", true)
-      .text("Uniéndose...");
 
-    $.ajax({
+  $.ajax({
-      url: "controladores/controladorEquipoxUsuario.php",
+    url: "controladores/controladorEquipoxUsuario.php",
-      type: "POST",
+    type: "POST",
-      dataType: "json",
+    dataType: "json",
 
-      data: {
+    data: {
-        orden: "registrarUsuarioEnEquipo",
+      orden: "registrarUsuarioEnEquipo",
-        idEquipo: idEquipo,
+      idEquipo: idEquipo,
-      },
+    },
 
-      success: function (respuesta) {
+    success: function (respuesta) {
-        if (respuesta.error) {
+      if (respuesta.error) {
-          alert(respuesta.error);
+        alert(respuesta.error);
 
-          boton
+        boton.prop("disabled", false).text("Unirse");
-            .prop("disabled", false)
-            .text("Unirse");
 
-          return;
+        return;
-        }
+      }
 
-        usuarioYaEstaEnEquipo = true;
+      usuarioYaEstaEnEquipo = true;
 
-        $("#contenedorCrearSala").hide();
+      $("#contenedorCrearSala").hide();
-        $("#contenedorSalas").empty();
+      $("#contenedorSalas").empty();
 
-        cargarSalaUsuario(idPartida);
+      cargarSalaUsuario(idPartida);
-      },
+    },
 
-      error: function (xhr, status, error) {
+    error: function (xhr, status, error) {
-        console.error(
+      console.error("Error al unirse al equipo:", error);
-          "Error al unirse al equipo:",
-          error
-        );
 
-        alert(
+      alert("No se ha podido unir al equipo.");
-          "No se ha podido unir al equipo."
-        );
 
-        boton
+      boton.prop("disabled", false).text("Unirse");
-          .prop("disabled", false)
+    },
-          .text("Unirse");
+  });
-      },
+});
-    });
-  }
-);
 
 // =====================================================
 // ABANDONAR SALA - ABRIR MODAL
 // =====================================================
 
-$(document).on(
+$(document).on("click", ".btn-abandonar-sala", function () {
-  "click",
+  botonAbandonarReferencia = $(this);
-  ".btn-abandonar-sala",
-  function () {
-    botonAbandonarReferencia = $(this);
 
-    const esHost =
+  const esHost =
-      $(this).data("es-host") === true ||
+    $(this).data("es-host") === true || $(this).data("es-host") === "true";
-      $(this).data("es-host") === "true";
 
-    const titulo =
+  const titulo = $("#modalAbandonarSalaLabel");
-      $("#modalAbandonarSalaLabel");
 
-    const mensaje =
+  const mensaje = $("#modalAbandonarSalaMensaje");
-      $("#modalAbandonarSalaMensaje");
 
-    const botonConfirmar =
+  const botonConfirmar = $("#btnConfirmarAbandonar");
-      $("#btnConfirmarAbandonar");
 
-    if (esHost) {
+  if (esHost) {
-      titulo.text("¿Abandonar la sala?");
+    titulo.text("¿Abandonar la sala?");
 
-      mensaje.text(
+    mensaje.text(
-        "Si abandonas la sala como anfitrión, la partida terminará para todos los jugadores."
+      "Si abandonas la sala como anfitrión, la partida terminará para todos los jugadores.",
-      );
-
-      botonConfirmar.text(
-        "Sí, terminar partida"
-      );
-    } else {
-      titulo.text("¿Abandonar la sala?");
-
-      mensaje.text(
-        "Si sales de la sala, perderás tu lugar en el equipo."
-      );
-
-      botonConfirmar.text("Sí, salir");
-    }
-
-    const modal = new bootstrap.Modal(
-      document.getElementById(
-        "modalAbandonarSala"
-      )
     );
 
-    modal.show();
+    botonConfirmar.text("Sí, terminar partida");
+  } else {
+    titulo.text("¿Abandonar la sala?");
+
+    mensaje.text("Si sales de la sala, perderás tu lugar en el equipo.");
+
+    botonConfirmar.text("Sí, salir");
   }
-);
+
+  const modal = new bootstrap.Modal(
+    document.getElementById("modalAbandonarSala"),
+  );
+
+  modal.show();
+});
 
 // =====================================================
 // CONFIRMAR ABANDONAR SALA
 // =====================================================
 
-$(document).on(
+$(document).on("click", "#btnConfirmarAbandonar", function () {
-  "click",
+  const modalEl = document.getElementById("modalAbandonarSala");
-  "#btnConfirmarAbandonar",
-  function () {
-    const modalEl =
-      document.getElementById(
-        "modalAbandonarSala"
-      );
 
-    const modalInstance =
+  const modalInstance = bootstrap.Modal.getInstance(modalEl);
-      bootstrap.Modal.getInstance(modalEl);
 
-    const btnConfirmar = $(this);
+  const btnConfirmar = $(this);
 
-    btnConfirmar
+  btnConfirmar.prop("disabled", true).text("Saliendo...");
-      .prop("disabled", true)
-      .text("Saliendo...");
 
-    $.ajax({
+  $.ajax({
-      url: "controladores/controladorEquipoxUsuario.php",
+    url: "controladores/controladorEquipoxUsuario.php",
-      type: "POST",
+    type: "POST",
-      dataType: "json",
+    dataType: "json",
 
-      data: {
+    data: {
-        orden: "salirDeSala",
+      orden: "salirDeSala",
-      },
+    },
 
-      success: function (respuesta) {
+    success: function (respuesta) {
-        btnConfirmar
+      btnConfirmar.prop("disabled", false).text("Sí, salir");
-          .prop("disabled", false)
-          .text("Sí, salir");
 
-        if (modalInstance) {
+      if (modalInstance) {
-          modalInstance.hide();
+        modalInstance.hide();
-        }
+      }
 
-        if (respuesta.error) {
+      if (respuesta.error) {
-          alert(respuesta.error);
+        alert(respuesta.error);
-          return;
+        return;
-        }
+      }
 
-        usuarioYaEstaEnEquipo = false;
+      usuarioYaEstaEnEquipo = false;
 
-        if (intervaloSala) {
+      if (intervaloSala) {
-          clearInterval(intervaloSala);
+        clearInterval(intervaloSala);
-          intervaloSala = null;
+        intervaloSala = null;
-        }
+      }
 
-        $("#contenedorCrearSala").show();
+      $("#contenedorCrearSala").show();
 
-        cargarSalas();
+      cargarSalas();
-      },
+    },
 
-      error: function (xhr, status, error) {
+    error: function (xhr, status, error) {
-        console.error(
+      console.error("Error al salir de la sala:", error);
-          "Error al salir de la sala:",
-          error
-        );
 
-        alert(
+      alert("No se pudo salir de la sala.");
-          "No se pudo salir de la sala."
-        );
 
-        btnConfirmar
+      btnConfirmar.prop("disabled", false).text("Sí, salir");
-          .prop("disabled", false)
-          .text("Sí, salir");
 
-        if (modalInstance) {
+      if (modalInstance) {
-          modalInstance.hide();
+        modalInstance.hide();
-        }
+      }
-      },
+    },
-    });
+  });
-  }
+});
-);
 
 // =====================================================
 // AUXILIARES
@@ -581,29 +501,19 @@ function escapeHTML(texto) {
     .html();
 }
 
-function mostrarEquipos(
+function mostrarEquipos(partida, equipos, jugadores) {
-  partida,
-  equipos,
-  jugadores
-) {
   let equiposHTML = "";
 
   equipos.forEach(function (equipo) {
-    const jugadoresEquipo =
+    const jugadoresEquipo = jugadores.filter(function (jugador) {
-      jugadores.filter(function (jugador) {
+      return jugador.idEquipo == equipo.idEquipo;
-        return (
+    });
-          jugador.idEquipo ==
-          equipo.idEquipo
-        );
-      });
 
     let jugadoresHTML = "";
 
     if (jugadoresEquipo.length > 0) {
       jugadoresEquipo.forEach(function (jugador) {
-        const esHost =
+        const esHost = jugador.idUsuario == partida.idUsuario;
-          jugador.idUsuario ==
-          partida.idUsuario;
 
         jugadoresHTML += `
           <div class="jugador border border-2 d-flex align-items-center justify-content-between ${
@@ -619,9 +529,7 @@ function mostrarEquipos(
                 }
               </span>
 
-              ${escapeHTML(
+              ${escapeHTML(jugador.nombreUsuario)}
-                jugador.nombreUsuario
-              )}
             </div>
 
             ${
@@ -647,9 +555,7 @@ function mostrarEquipos(
       <div class="equipo me-2 ms-2 p-3 border rounded">
 
         <h6>
-          ${escapeHTML(
+          ${escapeHTML(equipo.nombreEquipo)}
-            equipo.nombreEquipo
-          )}
         </h6>
 
         <div class="jugadores mb-2">
@@ -660,6 +566,5 @@ function mostrarEquipos(
     `;
   });
 
-  $("#contenedorSalas .equipos")
+  $("#contenedorSalas .equipos").html(equiposHTML);
-    .html(equiposHTML);
 }