Add se actualizan las salas sin pestañeo

js/buscadorSala.js

@@ -1,41 +1,21 @@
-// =====================================================
-// 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;
   }
@@ -46,7 +26,6 @@ function cargarSalas() {
     url: "controladores/controladorPartida.php",
     type: "POST",
     dataType: "json",
-
     data: {
       orden: "listar",
     },
@@ -54,15 +33,7 @@ function cargarSalas() {
     success: function (partidas) {
       const contenedor = $("#contenedorSalas");
 
-      // =================================================
+      if (!Array.isArray(partidas) || partidas.length === 0) {
-      // NO HAY SALAS
-      // =================================================
-
-      if (
-        !Array.isArray(partidas) ||
-        partidas.length === 0
-      ) {
-        // Ocultamos/eliminamos únicamente las salas
         $(".sala-item").remove();
 
         if ($("#mensajeSinSalas").length === 0) {
@@ -82,43 +53,20 @@ function cargarSalas() {
         return;
       }
 
-
-      // =================================================
-      // 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(
+        const idPartida = String($(this).data("id-partida"));
-          $(this).data("id-partida")
-        );
 
         if (!idsPartidas.includes(idPartida)) {
           $(this).remove();
         }
       });
 
-
-      // =================================================
-      // ACTUALIZAR / CREAR CADA SALA
-      // =================================================
-
       partidas.forEach(function (partida) {
         cargarSalaBuscador(partida);
       });
@@ -137,17 +85,11 @@ function cargarSalas() {
   });
 }
 
-
-// =====================================================
-// CARGAR INFORMACIÓN DE UNA SALA
-// =====================================================
-
 function cargarSalaBuscador(partida) {
   $.ajax({
     url: "controladores/controladorPartida.php",
     type: "POST",
     dataType: "json",
-
     data: {
       orden: "getEquipos",
       idPartida: partida.idPartida,
@@ -158,13 +100,25 @@ function cargarSalaBuscador(partida) {
         url: "controladores/controladorPartida.php",
         type: "POST",
         dataType: "json",
-
         data: {
           orden: "getJugadores",
           idPartida: partida.idPartida,
         },
 
         success: function (jugadores) {
+          if (
+            !Array.isArray(jugadores) ||
+            jugadores.length === 0
+          ) {
+            $(
+              `.sala-item[data-id-partida="${partida.idPartida}"]`
+            ).remove();
+
+            comprobarSiNoHaySalas();
+
+            return;
+          }
+
           actualizarSalaBuscador(
             partida,
             equipos,
@@ -190,26 +144,36 @@ function cargarSalaBuscador(partida) {
   });
 }
 
+function comprobarSiNoHaySalas() {
+  if ($(".sala-item").length === 0) {
+    if ($("#mensajeSinSalas").length === 0) {
+      $("#contenedorSalas").append(`
+        <div
+          id="mensajeSinSalas"
+          class="col-12 text-center">
 
-// =====================================================
+          <p class="text-muted">
-// ACTUALIZAR UNA SALA
+            No hay salas disponibles actualmente.
-// =====================================================
+          </p>
+
+        </div>
+      `);
+    }
+  }
+}
 
 function actualizarSalaBuscador(
   partida,
   equipos,
   jugadores
 ) {
+  $("#mensajeSinSalas").remove();
+
   const selectorSala =
     `.sala-item[data-id-partida="${partida.idPartida}"]`;
 
   const salaExistente = $(selectorSala);
 
-
-  // ===================================================
-  // SI LA SALA NO EXISTE → CREARLA
-  // ===================================================
-
   if (salaExistente.length === 0) {
     crearSalaBuscador(
       partida,
@@ -220,17 +184,6 @@ function actualizarSalaBuscador(
     return;
   }
 
-
-  // ===================================================
-  // LA SALA YA EXISTE
-  // ===================================================
-  //
-  // NO TOCAMOS LA TARJETA COMPLETA.
-  //
-  // Solo actualizamos .equipos
-  //
-
-
   const equiposHTML =
     generarEquiposHTML(
       partida,
@@ -238,22 +191,18 @@ function actualizarSalaBuscador(
       jugadores
     );
 
-
   salaExistente
     .find(".equipos")
     .html(equiposHTML);
 }
 
-
-// =====================================================
-// CREAR UNA SALA NUEVA
-// =====================================================
-
 function crearSalaBuscador(
   partida,
   equipos,
   jugadores
 ) {
+  $("#mensajeSinSalas").remove();
+
   const equiposHTML =
     generarEquiposHTML(
       partida,
@@ -261,7 +210,6 @@ function crearSalaBuscador(
       jugadores
     );
 
-
   const salaHTML = `
     <div
       class="col-12 col-md-10 col-lg-8 sala-item"
@@ -269,28 +217,15 @@ function crearSalaBuscador(
 
       <div class="sala card p-3 shadow-sm mb-4">
 
-        <!-- =========================================
-             CABECERA
-        ========================================== -->
-
         <div
           class="sala-header h4 text-center mb-3 text-white">
 
-          ${escapeHTML(
+          ${escapeHTML(partida.nombrePartida)}
-            partida.nombrePartida
-          )}
 
         </div>
 
-
-        <!-- =========================================
-             CUERPO
-        ========================================== -->
-
         <div class="sala-body">
 
-          <!-- ESTA ES LA PARTE QUE SE ACTUALIZA -->
-
           <div class="equipos d-flex justify-content-around">
 
             ${equiposHTML}
@@ -304,17 +239,9 @@ function crearSalaBuscador(
     </div>
   `;
 
-
+  $("#contenedorSalas").append(salaHTML);
-  $("#contenedorSalas").append(
-    salaHTML
-  );
 }
 
-
-// =====================================================
-// GENERAR HTML DE EQUIPOS Y JUGADORES
-// =====================================================
-
 function generarEquiposHTML(
   partida,
   equipos,
@@ -322,78 +249,61 @@ function generarEquiposHTML(
 ) {
   let equiposHTML = "";
 
-
   equipos.forEach(function (equipo) {
-    // -----------------------------------------------
-    // JUGADORES DE ESTE EQUIPO
-    // -----------------------------------------------
-
     const jugadoresEquipo =
-      jugadores.filter(
+      jugadores.filter(function (jugador) {
-        function (jugador) {
+        return (
-          return (
+          jugador.idEquipo ==
-            jugador.idEquipo ==
+          equipo.idEquipo
-            equipo.idEquipo
+        );
-          );
+      });
-        }
-      );
-
 
     let jugadoresHTML = "";
 
-
-    // -----------------------------------------------
-    // MOSTRAR JUGADORES
-    // -----------------------------------------------
-
     if (jugadoresEquipo.length > 0) {
-      jugadoresEquipo.forEach(
+      jugadoresEquipo.forEach(function (jugador) {
-        function (jugador) {
+        const esHost =
-          const esHost =
+          jugador.idUsuario ==
-            jugador.idUsuario ==
+          partida.idUsuario;
-            partida.idUsuario;
 
+        jugadoresHTML += `
+          <div
+            class="jugador border border-2 d-flex align-items-center justify-content-between">
 
-          jugadoresHTML += `
+            <div>
-            <div
-              class="jugador border border-2 d-flex align-items-center justify-content-between">
 
-              <div>
+              <span class="avatar">
 
-                <span class="avatar">
+                ${
+                  esHost
+                    ? '<i class="bi bi-award-fill"></i>'
+                    : '<i class="bi bi-person-fill"></i>'
+                }
 
-                  ${
+              </span>
-                    esHost
-                      ? '<i class="bi bi-award-fill"></i>'
-                      : '<i class="bi bi-person-fill"></i>'
-                  }
 
-                </span>
+              ${escapeHTML(
-
+                jugador.nombreUsuario
-                ${escapeHTML(
+              )}
-                  jugador.nombreUsuario
-                )}
-
-              </div>
-
-
-              ${
-                esHost
-                  ? `
-                    <span
-                      class="badge bg-warning text-dark ms-2">
-
-                      HOST
-
-                    </span>
-                  `
-                  : ""
-              }
 
             </div>
-          `;
+
-        }
+            ${
-      );
+              esHost
+                ? `
+                  <span
+                    class="badge bg-warning text-dark ms-2">
+
+                    HOST
+
+                  </span>
+                `
+                : ""
+            }
+
+          </div>
+        `;
+      });
     } else {
       jugadoresHTML = `
         <div class="text-muted small">
@@ -402,22 +312,14 @@ function generarEquiposHTML(
       `;
     }
 
-
-    // -----------------------------------------------
-    // 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
@@ -426,11 +328,6 @@ function generarEquiposHTML(
       `;
     }
 
-
-    // -----------------------------------------------
-    // EQUIPO
-    // -----------------------------------------------
-
     equiposHTML += `
       <div
         class="equipo me-2 ms-2 p-3 border rounded">
@@ -453,193 +350,132 @@ function generarEquiposHTML(
     `;
   });
 
-
   return equiposHTML;
 }
 
+$("#btnCrearSala").on("click", function () {
+  const nombreSala =
+    $("#nombreSala").val().trim();
 
-// =====================================================
+  const nombreEquipo1 =
-// CREAR SALA
+    $("#nombreEquipo1").val().trim();
-// =====================================================
 
-$("#btnCrearSala").on(
+  const nombreEquipo2 =
-  "click",
+    $("#nombreEquipo2").val().trim();
-  function () {
-    const nombreSala =
-      $("#nombreSala").val().trim();
 
-    const nombreEquipo1 =
+  let valido = true;
-      $("#nombreEquipo1").val().trim();
 
-    const nombreEquipo2 =
+  $(".mensaje-error-sala").remove();
-      $("#nombreEquipo2").val().trim();
 
+  $(".input-kahoot")
+    .removeClass("is-invalid");
 
-    let valido = true;
+  if (
+    nombreSala === "" ||
+    nombreSala.length < 3
+  ) {
+    mostrarError(
+      "#nombreSala",
+      "El nombre de la sala debe tener al menos 3 caracteres."
+    );
 
+    valido = false;
+  }
 
-    // -----------------------------------------------
+  if (
-    // LIMPIAR ERRORES
+    nombreEquipo1 === "" ||
-    // -----------------------------------------------
+    nombreEquipo1.length < 2
+  ) {
+    mostrarError(
+      "#nombreEquipo1",
+      "El nombre del equipo debe tener al menos 2 caracteres."
+    );
 
-    $(".mensaje-error-sala").remove();
+    valido = false;
+  }
 
-    $(".input-kahoot")
+  if (
-      .removeClass("is-invalid");
+    nombreEquipo2 === "" ||
+    nombreEquipo2.length < 2
+  ) {
+    mostrarError(
+      "#nombreEquipo2",
+      "El nombre del equipo debe tener al menos 2 caracteres."
+    );
 
+    valido = false;
+  }
 
-    // -----------------------------------------------
+  if (
-    // VALIDAR NOMBRE DE SALA
+    nombreEquipo1 !== "" &&
-    // -----------------------------------------------
+    nombreEquipo2 !== "" &&
+    nombreEquipo1.toLowerCase() ===
+      nombreEquipo2.toLowerCase()
+  ) {
+    mostrarError(
+      "#nombreEquipo2",
+      "Los dos equipos deben tener nombres diferentes."
+    );
 
-    if (
+    valido = false;
-      nombreSala === "" ||
+  }
-      nombreSala.length < 3
-    ) {
-      mostrarError(
-        "#nombreSala",
-        "El nombre de la sala debe tener al menos 3 caracteres."
-      );
 
-      valido = false;
+  if (!valido) {
-    }
+    return;
+  }
 
+  const boton = $("#btnCrearSala");
 
-    // -----------------------------------------------
+  boton
-    // VALIDAR EQUIPO 1
+    .prop("disabled", true)
-    // -----------------------------------------------
+    .text("Creando sala...");
 
-    if (
+  $.ajax({
-      nombreEquipo1 === "" ||
+    url: "controladores/controladorPartida.php",
-      nombreEquipo1.length < 2
+    type: "POST",
-    ) {
+    dataType: "json",
-      mostrarError(
-        "#nombreEquipo1",
-        "El nombre del equipo debe tener al menos 2 caracteres."
-      );
 
-      valido = false;
+    data: {
-    }
+      orden: "crear",
+      nombrePartida: nombreSala,
+      nombreEquipo1: nombreEquipo1,
+      nombreEquipo2: nombreEquipo2,
+    },
 
-
+    success: function (respuesta) {
-    // -----------------------------------------------
+      if (respuesta.error) {
-    // VALIDAR EQUIPO 2
+        alert(respuesta.error);
-    // -----------------------------------------------
-
-    if (
-      nombreEquipo2 === "" ||
-      nombreEquipo2.length < 2
-    ) {
-      mostrarError(
-        "#nombreEquipo2",
-        "El nombre del equipo debe tener al menos 2 caracteres."
-      );
-
-      valido = false;
-    }
-
-
-    // -----------------------------------------------
-    // COMPROBAR NOMBRES IGUALES
-    // -----------------------------------------------
-
-    if (
-      nombreEquipo1 !== "" &&
-      nombreEquipo2 !== "" &&
-      nombreEquipo1.toLowerCase() ===
-        nombreEquipo2.toLowerCase()
-    ) {
-      mostrarError(
-        "#nombreEquipo2",
-        "Los dos equipos deben tener nombres diferentes."
-      );
-
-      valido = false;
-    }
-
-
-    // -----------------------------------------------
-    // SI HAY ERRORES
-    // -----------------------------------------------
-
-    if (!valido) {
-      return;
-    }
-
-
-    // -----------------------------------------------
-    // BOTÓN
-    // -----------------------------------------------
-
-    const boton = $("#btnCrearSala");
-
-    boton
-      .prop("disabled", true)
-      .text("Creando sala...");
-
-
-    // -----------------------------------------------
-    // PETICIÓN
-    // -----------------------------------------------
-
-    $.ajax({
-      url: "controladores/controladorPartida.php",
-      type: "POST",
-      dataType: "json",
-
-      data: {
-        orden: "crear",
-
-        nombrePartida: nombreSala,
-
-        nombreEquipo1: nombreEquipo1,
-
-        nombreEquipo2: nombreEquipo2,
-      },
-
-      success: function (respuesta) {
-        if (respuesta.error) {
-          alert(respuesta.error);
-
-          boton
-            .prop("disabled", false)
-            .text("Crear sala");
-
-          return;
-        }
-
-
-        if (respuesta.exito) {
-          $("#modalCrearSala").modal(
-            "hide"
-          );
-
-          location.reload();
-        }
-      },
-
-      error: function (xhr, status, error) {
-        console.error(
-          "Error al crear la sala:",
-          error
-        );
-
-        alert(
-          "No se ha podido crear la sala."
-        );
 
         boton
           .prop("disabled", false)
           .text("Crear sala");
-      },
-    });
-  }
-);
 
+        return;
+      }
 
-// =====================================================
+      if (respuesta.exito) {
-// MOSTRAR ERROR
+        $("#modalCrearSala").modal("hide");
-// =====================================================
+
+        location.reload();
+      }
+    },
+
+    error: function (xhr, status, error) {
+      console.error(
+        "Error al crear la sala:",
+        error
+      );
+
+      alert(
+        "No se ha podido crear la sala."
+      );
+
+      boton
+        .prop("disabled", false)
+        .text("Crear sala");
+    },
+  });
+});
 
 function mostrarError(
   selector,
@@ -659,11 +495,6 @@ function mostrarError(
   `);
 }
 
-
-// =====================================================
-// LIMPIAR ERRORES AL ESCRIBIR
-// =====================================================
-
 $(document).on(
   "input",
   ".input-kahoot",

js/sala.js

@@ -6,10 +6,6 @@ $(document).ready(function () {
   comprobarSalaUsuario();
 });
 
-// =====================================================
-// COMPROBAR SI EL USUARIO YA ESTÁ EN UNA SALA
-// =====================================================
-
 function comprobarSalaUsuario() {
   $("#cargandoSalas").remove();
 
@@ -38,26 +34,25 @@ function comprobarSalaUsuario() {
     },
 
     error: function (xhr, status, error) {
-      console.error("Error al comprobar la sala del usuario:", error);
-
       usuarioYaEstaEnEquipo = false;
 
+      if (intervaloSala) {
+        clearInterval(intervaloSala);
+        intervaloSala = null;
+      }
+
+      $("#contenedorSalas").empty();
+
       $("#contenedorCrearSala").show();
 
-      cargarSalas();
+      iniciarActualizacionSalas();
     },
   });
 }
 
-// =====================================================
-// CARGAR SALA DEL USUARIO
-// =====================================================
-
 function cargarSalaUsuario(idPartida) {
-  // Primera carga completa
   cargarSalaCompleta(idPartida);
 
-  // Evitar intervalos duplicados
   if (intervaloSala) {
     clearInterval(intervaloSala);
   }
@@ -67,10 +62,6 @@ function cargarSalaUsuario(idPartida) {
   }, 5000);
 }
 
-// =====================================================
-// CARGA COMPLETA DE LA SALA
-// =====================================================
-
 function cargarSalaCompleta(idPartida) {
   $.ajax({
     url: "controladores/controladorPartida.php",
@@ -97,10 +88,6 @@ function cargarSalaCompleta(idPartida) {
   });
 }
 
-// =====================================================
-// OBTENER EQUIPOS Y JUGADORES
-// =====================================================
-
 function cargarInformacionSalaCompleta(partida) {
   $.ajax({
     url: "controladores/controladorPartida.php",
@@ -139,10 +126,6 @@ function cargarInformacionSalaCompleta(partida) {
   });
 }
 
-// =====================================================
-// ACTUALIZAR SALA CADA 5 SEGUNDOS
-// =====================================================
-
 function actualizarSalaUsuario(idPartida) {
   $.ajax({
     url: "controladores/controladorPartida.php",
@@ -169,10 +152,6 @@ function actualizarSalaUsuario(idPartida) {
   });
 }
 
-// =====================================================
-// OBTENER INFORMACIÓN PARA ACTUALIZACIÓN
-// =====================================================
-
 function cargarInformacionSala(partida) {
   $.ajax({
     url: "controladores/controladorPartida.php",
@@ -211,299 +190,11 @@ function cargarInformacionSala(partida) {
   });
 }
 
-// =====================================================
-// MOSTRAR SALA COMPLETA
-// =====================================================
-
 function mostrarSala(partida, equipos, jugadores) {
   const contenedor = $("#contenedorSalas");
 
   let equiposHTML = "";
 
-  equipos.forEach(function (equipo) {
-    const jugadoresEquipo = jugadores.filter(function (jugador) {
-      return jugador.idEquipo == equipo.idEquipo;
-    });
-
-    let jugadoresHTML = "";
-
-    if (jugadoresEquipo.length > 0) {
-      jugadoresEquipo.forEach(function (jugador) {
-        const esHost = jugador.idUsuario == partida.idUsuario;
-
-        jugadoresHTML += `
-                    <div class="jugador border border-2 d-flex align-items-center justify-content-between ${
-                      esHost ? "jugador-host" : ""
-                    }">
-
-                        <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">
-                                    HOST
-                                   </span>`
-                            : ""
-                        }
-
-                    </div>
-                `;
-      });
-    } else {
-      jugadoresHTML = `
-                <div class="text-muted small">
-                    Sin jugadores
-                </div>
-            `;
-    }
-
-    equiposHTML += `
-            <div class="equipo me-2 ms-2 p-3 border rounded">
-
-                <h6>
-                    ${escapeHTML(equipo.nombreEquipo)}
-                </h6>
-
-                <div class="jugadores mb-2">
-                    ${jugadoresHTML}
-                </div>
-
-            </div>
-        `;
-  });
-
-  const esHost = partida.idUsuario == idUsuarioSesion;
-
-  let botonIniciarHTML = "";
-
-  if (esHost) {
-    botonIniciarHTML = `
-            <a
-                href="juego.php?idPartida=${partida.idPartida}"
-                class="btn btn-success btn-lg px-4">
-
-                <i class="bi bi-controller"></i>
-                ¡Iniciar Partida!
-
-            </a>
-        `;
-  }
-
-  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 class="sala-acciones text-center mt-4 pt-3 border-top d-flex justify-content-center gap-3">
-
-                        <button
-                            type="button"
-                            class="btn btn-outline-danger btn-abandonar-sala"
-                            data-id-partida="${partida.idPartida}"
-                            data-es-host="${esHost}">
-
-                            Abandonar sala
-
-                        </button>
-
-                        ${esHost ? botonIniciarHTML : ""}
-
-                    </div>
-
-                </div>
-
-            </div>
-
-        </div>
-    `;
-
-  // IMPORTANTE:
-  // El usuario está dentro de una única sala.
-  // Por eso aquí SÍ queremos reemplazar.
-  contenedor.html(salaHTML);
-}
-
-// =====================================================
-// UNIRSE A UN EQUIPO
-// =====================================================
-
-$(document).on("click", ".btn-unirse-equipo", function () {
-  const boton = $(this);
-
-  const idEquipo = boton.data("id-equipo");
-  const idPartida = boton.data("id-partida");
-
-  boton.prop("disabled", true).text("Uniéndose...");
-
-  $.ajax({
-    url: "controladores/controladorEquipoxUsuario.php",
-    type: "POST",
-    dataType: "json",
-
-    data: {
-      orden: "registrarUsuarioEnEquipo",
-      idEquipo: idEquipo,
-    },
-
-    success: function (respuesta) {
-      if (respuesta.error) {
-        alert(respuesta.error);
-
-        boton.prop("disabled", false).text("Unirse");
-
-        return;
-      }
-
-      usuarioYaEstaEnEquipo = true;
-
-      $("#contenedorCrearSala").hide();
-      $("#contenedorSalas").empty();
-
-      cargarSalaUsuario(idPartida);
-    },
-
-    error: function (xhr, status, error) {
-      console.error("Error al unirse al equipo:", error);
-
-      alert("No se ha podido unir al equipo.");
-
-      boton.prop("disabled", false).text("Unirse");
-    },
-  });
-});
-
-// =====================================================
-// ABANDONAR SALA - ABRIR MODAL
-// =====================================================
-
-$(document).on("click", ".btn-abandonar-sala", function () {
-  botonAbandonarReferencia = $(this);
-
-  const esHost =
-    $(this).data("es-host") === true || $(this).data("es-host") === "true";
-
-  const titulo = $("#modalAbandonarSalaLabel");
-
-  const mensaje = $("#modalAbandonarSalaMensaje");
-
-  const botonConfirmar = $("#btnConfirmarAbandonar");
-
-  if (esHost) {
-    titulo.text("¿Abandonar la sala?");
-
-    mensaje.text(
-      "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();
-});
-
-// =====================================================
-// CONFIRMAR ABANDONAR SALA
-// =====================================================
-
-$(document).on("click", "#btnConfirmarAbandonar", function () {
-  const modalEl = document.getElementById("modalAbandonarSala");
-
-  const modalInstance = bootstrap.Modal.getInstance(modalEl);
-
-  const btnConfirmar = $(this);
-
-  btnConfirmar.prop("disabled", true).text("Saliendo...");
-
-  $.ajax({
-    url: "controladores/controladorEquipoxUsuario.php",
-    type: "POST",
-    dataType: "json",
-
-    data: {
-      orden: "salirDeSala",
-    },
-
-    success: function (respuesta) {
-      btnConfirmar.prop("disabled", false).text("Sí, salir");
-
-      if (modalInstance) {
-        modalInstance.hide();
-      }
-
-      if (respuesta.error) {
-        alert(respuesta.error);
-        return;
-      }
-
-      usuarioYaEstaEnEquipo = false;
-
-      if (intervaloSala) {
-        clearInterval(intervaloSala);
-        intervaloSala = null;
-      }
-
-      $("#contenedorCrearSala").show();
-
-      cargarSalas();
-    },
-
-    error: function (xhr, status, error) {
-      console.error("Error al salir de la sala:", error);
-
-      alert("No se pudo salir de la sala.");
-
-      btnConfirmar.prop("disabled", false).text("Sí, salir");
-
-      if (modalInstance) {
-        modalInstance.hide();
-      }
-    },
-  });
-});
-
-// =====================================================
-// AUXILIARES
-// =====================================================
-
-function escapeHTML(texto) {
-  return $("<div>")
-    .text(texto ?? "")
-    .html();
-}
-
-function mostrarEquipos(partida, equipos, jugadores) {
-  let equiposHTML = "";
-
   equipos.forEach(function (equipo) {
     const jugadoresEquipo = jugadores.filter(function (jugador) {
       return jugador.idEquipo == equipo.idEquipo;
@@ -566,5 +257,294 @@ function mostrarEquipos(partida, equipos, jugadores) {
     `;
   });
 
-  $("#contenedorSalas .equipos").html(equiposHTML);
+  const esHost = partida.idUsuario == idUsuarioSesion;
+
+  let botonIniciarHTML = "";
+
+  if (esHost) {
+    botonIniciarHTML = `
+      <a
+        href="juego.php?idPartida=${partida.idPartida}"
+        class="btn btn-success btn-lg px-4">
+
+        <i class="bi bi-controller"></i>
+        ¡Iniciar Partida!
+
+      </a>
+    `;
+  }
+
+  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 class="sala-acciones text-center mt-4 pt-3 border-top d-flex justify-content-center gap-3">
+
+            <button
+              type="button"
+              class="btn btn-outline-danger btn-abandonar-sala"
+              data-id-partida="${partida.idPartida}"
+              data-es-host="${esHost}">
+
+              Abandonar sala
+
+            </button>
+
+            ${esHost ? botonIniciarHTML : ""}
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+  `;
+
+  contenedor.html(salaHTML);
 }
+
+$(document).on("click", ".btn-unirse-equipo", function () {
+  const boton = $(this);
+
+  const idEquipo = boton.data("id-equipo");
+  const idPartida = boton.data("id-partida");
+
+  boton.prop("disabled", true).text("Uniéndose...");
+
+  $.ajax({
+    url: "controladores/controladorEquipoxUsuario.php",
+    type: "POST",
+    dataType: "json",
+
+    data: {
+      orden: "registrarUsuarioEnEquipo",
+      idEquipo: idEquipo,
+    },
+
+    success: function (respuesta) {
+      if (respuesta.error) {
+        alert(respuesta.error);
+
+        boton.prop("disabled", false).text("Unirse");
+
+        return;
+      }
+
+      usuarioYaEstaEnEquipo = true;
+
+      $("#contenedorCrearSala").hide();
+      $("#contenedorSalas").empty();
+
+      cargarSalaUsuario(idPartida);
+    },
+
+    error: function (xhr, status, error) {
+      console.error("Error al unirse al equipo:", error);
+
+      alert("No se ha podido unir al equipo.");
+
+      boton.prop("disabled", false).text("Unirse");
+    },
+  });
+});
+
+$(document).on("click", ".btn-abandonar-sala", function () {
+  botonAbandonarReferencia = $(this);
+
+  const esHost =
+    $(this).data("es-host") === true ||
+    $(this).data("es-host") === "true";
+
+  const titulo = $("#modalAbandonarSalaLabel");
+
+  const mensaje = $("#modalAbandonarSalaMensaje");
+
+  const botonConfirmar = $("#btnConfirmarAbandonar");
+
+  if (esHost) {
+    titulo.text("¿Abandonar la sala?");
+
+    mensaje.text(
+      "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();
+});
+
+$(document).on("click", "#btnConfirmarAbandonar", function () {
+  const modalEl =
+    document.getElementById("modalAbandonarSala");
+
+  const modalInstance =
+    bootstrap.Modal.getInstance(modalEl);
+
+  const btnConfirmar = $(this);
+
+  btnConfirmar
+    .prop("disabled", true)
+    .text("Saliendo...");
+
+  $.ajax({
+    url: "controladores/controladorEquipoxUsuario.php",
+    type: "POST",
+    dataType: "json",
+
+    data: {
+      orden: "salirDeSala",
+    },
+
+    success: function (respuesta) {
+      btnConfirmar
+        .prop("disabled", false)
+        .text("Sí, salir");
+
+      if (modalInstance) {
+        modalInstance.hide();
+      }
+
+      if (respuesta.error) {
+        alert(respuesta.error);
+        return;
+      }
+
+      usuarioYaEstaEnEquipo = false;
+
+      if (intervaloSala) {
+        clearInterval(intervaloSala);
+        intervaloSala = null;
+      }
+
+      $("#contenedorSalas").empty();
+
+      $("#contenedorCrearSala").show();
+
+      iniciarActualizacionSalas();
+    },
+
+    error: function (xhr, status, error) {
+      console.error(
+        "Error al salir de la sala:",
+        error
+      );
+
+      alert("No se pudo salir de la sala.");
+
+      btnConfirmar
+        .prop("disabled", false)
+        .text("Sí, salir");
+
+      if (modalInstance) {
+        modalInstance.hide();
+      }
+    },
+  });
+});
+
+function escapeHTML(texto) {
+  return $("<div>")
+    .text(texto ?? "")
+    .html();
+}
+
+function mostrarEquipos(
+  partida,
+  equipos,
+  jugadores
+) {
+  let equiposHTML = "";
+
+  equipos.forEach(function (equipo) {
+    const jugadoresEquipo =
+      jugadores.filter(function (jugador) {
+        return jugador.idEquipo == equipo.idEquipo;
+      });
+
+    let jugadoresHTML = "";
+
+    if (jugadoresEquipo.length > 0) {
+      jugadoresEquipo.forEach(function (jugador) {
+        const esHost =
+          jugador.idUsuario == partida.idUsuario;
+
+        jugadoresHTML += `
+          <div class="jugador border border-2 d-flex align-items-center justify-content-between ${
+            esHost ? "jugador-host" : ""
+          }">
+
+            <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">
+                    HOST
+                   </span>`
+                : ""
+            }
+
+          </div>
+        `;
+      });
+    } else {
+      jugadoresHTML = `
+        <div class="text-muted small">
+          Sin jugadores
+        </div>
+      `;
+    }
+
+    equiposHTML += `
+      <div class="equipo me-2 ms-2 p-3 border rounded">
+
+        <h6>
+          ${escapeHTML(equipo.nombreEquipo)}
+        </h6>
+
+        <div class="jugadores mb-2">
+          ${jugadoresHTML}
+        </div>
+
+      </div>
+    `;
+  });
+
+  $("#contenedorSalas .equipos").html(equiposHTML);
+}