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();
+
+        if ($("#mensajeSinSalas").length === 0) {
+          contenedor.append(`
+            <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,18 +192,144 @@ 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(
+    // -----------------------------------------------
+    // JUGADORES DE ESTE EQUIPO
+    // -----------------------------------------------
+
+    const jugadoresEquipo =
+      jugadores.filter(
         function (jugador) {
           return (
             jugador.idEquipo ==
@@ -122,10 +338,12 @@ function mostrarSalaBuscador(
         }
       );
 
+
     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>
   `);
 }

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
-      );
     },
   });
 }
@@ -254,8 +229,7 @@ function mostrarSala(partida, equipos, jugadores) {
 
     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 ${
@@ -308,8 +282,7 @@ function mostrarSala(partida, equipos, jugadores) {
         `;
   });
 
-    const esHost =
+  const esHost = partida.idUsuario == idUsuarioSesion;
-        partida.idUsuario == idUsuarioSesion;
 
   let botonIniciarHTML = "";
 
@@ -353,11 +326,7 @@ function mostrarSala(partida, equipos, jugadores) {
 
                         </button>
 
-                        ${
+                        ${esHost ? botonIniciarHTML : ""}
-                            esHost
-                                ? botonIniciarHTML
-                                : ""
-                        }
 
                     </div>
 
@@ -374,23 +343,17 @@ function mostrarSala(partida, equipos, jugadores) {
   contenedor.html(salaHTML);
 }
 
-
 // =====================================================
 // UNIRSE A UN EQUIPO
 // =====================================================
 
-$(document).on(
+$(document).on("click", ".btn-unirse-equipo", function () {
-  "click",
-  ".btn-unirse-equipo",
-  function () {
   const boton = $(this);
 
   const idEquipo = boton.data("id-equipo");
   const idPartida = boton.data("id-partida");
 
-    boton
+  boton.prop("disabled", true).text("Uniéndose...");
-      .prop("disabled", true)
-      .text("Uniéndose...");
 
   $.ajax({
     url: "controladores/controladorEquipoxUsuario.php",
@@ -406,9 +369,7 @@ $(document).on(
       if (respuesta.error) {
         alert(respuesta.error);
 
-          boton
+        boton.prop("disabled", false).text("Unirse");
-            .prop("disabled", false)
-            .text("Unirse");
 
         return;
       }
@@ -422,97 +383,66 @@ $(document).on(
     },
 
     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",
-  ".btn-abandonar-sala",
-  function () {
   botonAbandonarReferencia = $(this);
 
   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) {
     titulo.text("¿Abandonar la sala?");
 
     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(
+    botonConfirmar.text("Sí, terminar partida");
-        "Sí, terminar partida"
-      );
   } else {
     titulo.text("¿Abandonar la sala?");
 
-      mensaje.text(
+    mensaje.text("Si sales de la sala, perderás tu lugar en el equipo.");
-        "Si sales de la sala, perderás tu lugar en el equipo."
-      );
 
     botonConfirmar.text("Sí, salir");
   }
 
   const modal = new bootstrap.Modal(
-      document.getElementById(
+    document.getElementById("modalAbandonarSala"),
-        "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);
 
-    btnConfirmar
+  btnConfirmar.prop("disabled", true).text("Saliendo...");
-      .prop("disabled", true)
-      .text("Saliendo...");
 
   $.ajax({
     url: "controladores/controladorEquipoxUsuario.php",
@@ -524,9 +454,7 @@ $(document).on(
     },
 
     success: function (respuesta) {
-        btnConfirmar
+      btnConfirmar.prop("disabled", false).text("Sí, salir");
-          .prop("disabled", false)
-          .text("Sí, salir");
 
       if (modalInstance) {
         modalInstance.hide();
@@ -550,26 +478,18 @@ $(document).on(
     },
 
     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) {
         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);
 }