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");
 
-      // =================================================
-      // NO HAY SALAS
-      // =================================================
-
-      if (
-        !Array.isArray(partidas) ||
-        partidas.length === 0
-      ) {
-        // Ocultamos/eliminamos únicamente las salas
+      if (!Array.isArray(partidas) || partidas.length === 0) {
         $(".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(
-          $(this).data("id-partida")
-        );
+        const idPartida = String($(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">
 
-// =====================================================
-// ACTUALIZAR UNA SALA
-// =====================================================
+          <p class="text-muted">
+            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(
-            partida.nombrePartida
-          )}
+          ${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}
@@ -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(
-        function (jugador) {
-          return (
-            jugador.idEquipo ==
-            equipo.idEquipo
-          );
-        }
-      );
-
+      jugadores.filter(function (jugador) {
+        return (
+          jugador.idEquipo ==
+          equipo.idEquipo
+        );
+      });
 
     let jugadoresHTML = "";
 
-
-    // -----------------------------------------------
-    // MOSTRAR JUGADORES
-    // -----------------------------------------------
-
     if (jugadoresEquipo.length > 0) {
-      jugadoresEquipo.forEach(
-        function (jugador) {
-          const esHost =
-            jugador.idUsuario ==
-            partida.idUsuario;
+      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">
 
-          jugadoresHTML += `
-            <div
-              class="jugador border border-2 d-flex align-items-center justify-content-between">
+            <div>
 
-              <div>
+              <span class="avatar">
 
-                <span class="avatar">
+                ${
+                  esHost
+                    ? '<i class="bi bi-award-fill"></i>'
+                    : '<i class="bi bi-person-fill"></i>'
+                }
 
-                  ${
-                    esHost
-                      ? '<i class="bi bi-award-fill"></i>'
-                      : '<i class="bi bi-person-fill"></i>'
-                  }
+              </span>
 
-                </span>
-
-                ${escapeHTML(
-                  jugador.nombreUsuario
-                )}
-
-              </div>
-
-
-              ${
-                esHost
-                  ? `
-                    <span
-                      class="badge bg-warning text-dark ms-2">
-
-                      HOST
-
-                    </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">
@@ -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();
 
-// =====================================================
-// CREAR SALA
-// =====================================================
+  const nombreEquipo1 =
+    $("#nombreEquipo1").val().trim();
 
-$("#btnCrearSala").on(
-  "click",
-  function () {
-    const nombreSala =
-      $("#nombreSala").val().trim();
+  const nombreEquipo2 =
+    $("#nombreEquipo2").val().trim();
 
-    const nombreEquipo1 =
-      $("#nombreEquipo1").val().trim();
+  let valido = true;
 
-    const nombreEquipo2 =
-      $("#nombreEquipo2").val().trim();
+  $(".mensaje-error-sala").remove();
 
+  $(".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;
+  }
 
-    // -----------------------------------------------
-    // LIMPIAR ERRORES
-    // -----------------------------------------------
+  if (
+    nombreEquipo1 === "" ||
+    nombreEquipo1.length < 2
+  ) {
+    mostrarError(
+      "#nombreEquipo1",
+      "El nombre del equipo debe tener al menos 2 caracteres."
+    );
 
-    $(".mensaje-error-sala").remove();
+    valido = false;
+  }
 
-    $(".input-kahoot")
-      .removeClass("is-invalid");
+  if (
+    nombreEquipo2 === "" ||
+    nombreEquipo2.length < 2
+  ) {
+    mostrarError(
+      "#nombreEquipo2",
+      "El nombre del equipo debe tener al menos 2 caracteres."
+    );
 
+    valido = false;
+  }
 
-    // -----------------------------------------------
-    // VALIDAR NOMBRE DE SALA
-    // -----------------------------------------------
+  if (
+    nombreEquipo1 !== "" &&
+    nombreEquipo2 !== "" &&
+    nombreEquipo1.toLowerCase() ===
+      nombreEquipo2.toLowerCase()
+  ) {
+    mostrarError(
+      "#nombreEquipo2",
+      "Los dos equipos deben tener nombres diferentes."
+    );
 
-    if (
-      nombreSala === "" ||
-      nombreSala.length < 3
-    ) {
-      mostrarError(
-        "#nombreSala",
-        "El nombre de la sala debe tener al menos 3 caracteres."
-      );
+    valido = false;
+  }
 
-      valido = false;
-    }
+  if (!valido) {
+    return;
+  }
 
+  const boton = $("#btnCrearSala");
 
-    // -----------------------------------------------
-    // VALIDAR EQUIPO 1
-    // -----------------------------------------------
+  boton
+    .prop("disabled", true)
+    .text("Creando sala...");
 
-    if (
-      nombreEquipo1 === "" ||
-      nombreEquipo1.length < 2
-    ) {
-      mostrarError(
-        "#nombreEquipo1",
-        "El nombre del equipo debe tener al menos 2 caracteres."
-      );
+  $.ajax({
+    url: "controladores/controladorPartida.php",
+    type: "POST",
+    dataType: "json",
 
-      valido = false;
-    }
+    data: {
+      orden: "crear",
+      nombrePartida: nombreSala,
+      nombreEquipo1: nombreEquipo1,
+      nombreEquipo2: nombreEquipo2,
+    },
 
-
-    // -----------------------------------------------
-    // VALIDAR EQUIPO 2
-    // -----------------------------------------------
-
-    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."
-        );
+    success: function (respuesta) {
+      if (respuesta.error) {
+        alert(respuesta.error);
 
         boton
           .prop("disabled", false)
           .text("Crear sala");
-      },
-    });
-  }
-);
 
+        return;
+      }
 
-// =====================================================
-// MOSTRAR ERROR
-// =====================================================
+      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");
+    },
+  });
+});
 
 function mostrarError(
   selector,
@@ -659,11 +495,6 @@ function mostrarError(
   `);
 }
 
-
-// =====================================================
-// LIMPIAR ERRORES AL ESCRIBIR
-// =====================================================
-
 $(document).on(
   "input",
   ".input-kahoot",