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,38 +249,23 @@ function generarEquiposHTML(
 ) {
   let equiposHTML = "";
 
-
   equipos.forEach(function (equipo) {
-    // -----------------------------------------------
-    // JUGADORES DE ESTE EQUIPO
-    // -----------------------------------------------
-
     const jugadoresEquipo =
-      jugadores.filter(
+      jugadores.filter(function (jugador) {
-        function (jugador) {
         return (
           jugador.idEquipo ==
           equipo.idEquipo
         );
-        }
+      });
-      );
-
 
     let jugadoresHTML = "";
 
-
-    // -----------------------------------------------
-    // MOSTRAR JUGADORES
-    // -----------------------------------------------
-
     if (jugadoresEquipo.length > 0) {
-      jugadoresEquipo.forEach(
+      jugadoresEquipo.forEach(function (jugador) {
-        function (jugador) {
         const esHost =
           jugador.idUsuario ==
           partida.idUsuario;
 
-
         jugadoresHTML += `
           <div
             class="jugador border border-2 d-flex align-items-center justify-content-between">
@@ -376,7 +288,6 @@ function generarEquiposHTML(
 
             </div>
 
-
             ${
               esHost
                 ? `
@@ -392,8 +303,7 @@ function generarEquiposHTML(
 
           </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,18 +350,10 @@ function generarEquiposHTML(
     `;
   });
 
-
   return equiposHTML;
 }
 
-
+$("#btnCrearSala").on("click", function () {
-// =====================================================
-// CREAR SALA
-// =====================================================
-
-$("#btnCrearSala").on(
-  "click",
-  function () {
   const nombreSala =
     $("#nombreSala").val().trim();
 
@@ -474,24 +363,13 @@ $("#btnCrearSala").on(
   const nombreEquipo2 =
     $("#nombreEquipo2").val().trim();
 
-
   let valido = true;
 
-
-    // -----------------------------------------------
-    // LIMPIAR ERRORES
-    // -----------------------------------------------
-
   $(".mensaje-error-sala").remove();
 
   $(".input-kahoot")
     .removeClass("is-invalid");
 
-
-    // -----------------------------------------------
-    // VALIDAR NOMBRE DE SALA
-    // -----------------------------------------------
-
   if (
     nombreSala === "" ||
     nombreSala.length < 3
@@ -504,11 +382,6 @@ $("#btnCrearSala").on(
     valido = false;
   }
 
-
-    // -----------------------------------------------
-    // VALIDAR EQUIPO 1
-    // -----------------------------------------------
-
   if (
     nombreEquipo1 === "" ||
     nombreEquipo1.length < 2
@@ -521,11 +394,6 @@ $("#btnCrearSala").on(
     valido = false;
   }
 
-
-    // -----------------------------------------------
-    // VALIDAR EQUIPO 2
-    // -----------------------------------------------
-
   if (
     nombreEquipo2 === "" ||
     nombreEquipo2.length < 2
@@ -538,11 +406,6 @@ $("#btnCrearSala").on(
     valido = false;
   }
 
-
-    // -----------------------------------------------
-    // COMPROBAR NOMBRES IGUALES
-    // -----------------------------------------------
-
   if (
     nombreEquipo1 !== "" &&
     nombreEquipo2 !== "" &&
@@ -557,31 +420,16 @@ $("#btnCrearSala").on(
     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",
@@ -589,11 +437,8 @@ $("#btnCrearSala").on(
 
     data: {
       orden: "crear",
-
       nombrePartida: nombreSala,
-
       nombreEquipo1: nombreEquipo1,
-
       nombreEquipo2: nombreEquipo2,
     },
 
@@ -608,11 +453,8 @@ $("#btnCrearSala").on(
         return;
       }
 
-
       if (respuesta.exito) {
-          $("#modalCrearSala").modal(
+        $("#modalCrearSala").modal("hide");
-            "hide"
-          );
 
         location.reload();
       }
@@ -633,13 +475,7 @@ $("#btnCrearSala").on(
         .text("Crear sala");
     },
   });
-  }
+});
-);
-
-
-// =====================================================
-// MOSTRAR ERROR
-// =====================================================
 
 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,10 +190,6 @@ function cargarInformacionSala(partida) {
   });
 }
 
-// =====================================================
-// MOSTRAR SALA COMPLETA
-// =====================================================
-
 function mostrarSala(partida, equipos, jugadores) {
   const contenedor = $("#contenedorSalas");
 
@@ -337,16 +312,9 @@ function mostrarSala(partida, equipos, jugadores) {
     </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);
 
@@ -392,15 +360,12 @@ $(document).on("click", ".btn-unirse-equipo", function () {
   });
 });
 
-// =====================================================
-// 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";
+    $(this).data("es-host") === true ||
+    $(this).data("es-host") === "true";
 
   const titulo = $("#modalAbandonarSalaLabel");
 
@@ -419,7 +384,9 @@ $(document).on("click", ".btn-abandonar-sala", function () {
   } else {
     titulo.text("¿Abandonar la sala?");
 
-    mensaje.text("Si sales de la sala, perderás tu lugar en el equipo.");
+    mensaje.text(
+      "Si sales de la sala, perderás tu lugar en el equipo.",
+    );
 
     botonConfirmar.text("Sí, salir");
   }
@@ -431,18 +398,18 @@ $(document).on("click", ".btn-abandonar-sala", function () {
   modal.show();
 });
 
-// =====================================================
-// CONFIRMAR ABANDONAR SALA
-// =====================================================
-
 $(document).on("click", "#btnConfirmarAbandonar", function () {
-  const modalEl = document.getElementById("modalAbandonarSala");
+  const modalEl =
+    document.getElementById("modalAbandonarSala");
 
-  const modalInstance = bootstrap.Modal.getInstance(modalEl);
+  const modalInstance =
+    bootstrap.Modal.getInstance(modalEl);
 
   const btnConfirmar = $(this);
 
-  btnConfirmar.prop("disabled", true).text("Saliendo...");
+  btnConfirmar
+    .prop("disabled", true)
+    .text("Saliendo...");
 
   $.ajax({
     url: "controladores/controladorEquipoxUsuario.php",
@@ -454,7 +421,9 @@ $(document).on("click", "#btnConfirmarAbandonar", function () {
     },
 
     success: function (respuesta) {
-      btnConfirmar.prop("disabled", false).text("Sí, salir");
+      btnConfirmar
+        .prop("disabled", false)
+        .text("Sí, salir");
 
       if (modalInstance) {
         modalInstance.hide();
@@ -472,17 +441,24 @@ $(document).on("click", "#btnConfirmarAbandonar", function () {
         intervaloSala = null;
       }
 
+      $("#contenedorSalas").empty();
+
       $("#contenedorCrearSala").show();
 
-      cargarSalas();
+      iniciarActualizacionSalas();
     },
 
     error: function (xhr, status, error) {
-      console.error("Error al salir de la sala:", 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");
+      btnConfirmar
+        .prop("disabled", false)
+        .text("Sí, salir");
 
       if (modalInstance) {
         modalInstance.hide();
@@ -491,21 +467,22 @@ $(document).on("click", "#btnConfirmarAbandonar", function () {
   });
 });
 
-// =====================================================
-// AUXILIARES
-// =====================================================
-
 function escapeHTML(texto) {
   return $("<div>")
     .text(texto ?? "")
     .html();
 }
 
-function mostrarEquipos(partida, equipos, jugadores) {
+function mostrarEquipos(
+  partida,
+  equipos,
+  jugadores
+) {
   let equiposHTML = "";
 
   equipos.forEach(function (equipo) {
-    const jugadoresEquipo = jugadores.filter(function (jugador) {
+    const jugadoresEquipo =
+      jugadores.filter(function (jugador) {
         return jugador.idEquipo == equipo.idEquipo;
       });
 
@@ -513,7 +490,8 @@ function mostrarEquipos(partida, equipos, jugadores) {
 
     if (jugadoresEquipo.length > 0) {
       jugadoresEquipo.forEach(function (jugador) {
-        const esHost = jugador.idUsuario == partida.idUsuario;
+        const esHost =
+          jugador.idUsuario == partida.idUsuario;
 
         jugadoresHTML += `
           <div class="jugador border border-2 d-flex align-items-center justify-content-between ${
@@ -529,7 +507,9 @@ function mostrarEquipos(partida, equipos, jugadores) {
                 }
               </span>
 
-              ${escapeHTML(jugador.nombreUsuario)}
+              ${escapeHTML(
+                jugador.nombreUsuario
+              )}
             </div>
 
             ${