Add actualizacion de jugadores dentro de sala cada 5 segundos

js/buscadorSala.js

@@ -33,22 +33,131 @@ function comprobarSalaUsuario() {
 }
 
 // 2. Cargar únicamente la sala en la que está metido el usuario
+let intervaloSala = null;
+
 function cargarSalaUsuario(idPartida) {
+  // Primera carga completa
+  cargarSalaCompleta(idPartida);
+
+  // Evitamos crear varios intervalos
+  if (intervaloSala) {
+    clearInterval(intervaloSala);
+  }
+
+  intervaloSala = setInterval(() => {
+    actualizarSalaUsuario(idPartida);
+  }, 5000);
+}
+
+function cargarSalaCompleta(idPartida) {
   $.ajax({
     url: "controladores/controladorPartida.php",
     type: "POST",
     dataType: "json",
-    data: { orden: "buscar", idPartida: idPartida },
+    data: {
+      orden: "buscar",
+      idPartida: idPartida,
+    },
+
     success: function (partida) {
       if (partida.error) {
         console.error(partida.error);
         return;
       }
-      $("#contenedorSalas").empty();
+
+      cargarInformacionSalaCompleta(partida);
+    },
+
+    error: function (xhr, status, error) {
+      console.error("Error al obtener la sala:", error);
+    },
+  });
+}
+
+function cargarInformacionSalaCompleta(partida) {
+  $.ajax({
+    url: "controladores/controladorPartida.php",
+    type: "POST",
+    dataType: "json",
+
+    data: {
+      orden: "getEquipos",
+      idPartida: partida.idPartida,
+    },
+
+    success: function (equipos) {
+      $.ajax({
+        url: "controladores/controladorPartida.php",
+        type: "POST",
+        dataType: "json",
+
+        data: {
+          orden: "getJugadores",
+          idPartida: partida.idPartida,
+        },
+
+        success: function (jugadores) {
+          // AQUÍ hacemos la primera construcción completa
+          mostrarSala(partida, equipos, jugadores);
+        },
+
+        error: function (xhr, status, error) {
+          console.error("Error al obtener jugadores:", error);
+        },
+      });
+    },
+
+    error: function (xhr, status, error) {
+      console.error("Error al obtener equipos:", error);
+    },
+  });
+}
+
+function actualizarSalaUsuario(idPartida) {
+  $.ajax({
+    url: "controladores/controladorPartida.php",
+    type: "POST",
+    dataType: "json",
+
+    data: {
+      orden: "buscar",
+      idPartida: idPartida,
+    },
+
+    success: function (partida) {
+      if (partida.error) {
+        console.error(partida.error);
+        return;
+      }
+
       cargarInformacionSala(partida);
     },
+
     error: function (xhr, status, error) {
-      console.error("Error al obtener la sala del usuario:", error);
+      console.error("Error al actualizar la sala:", error);
+    },
+  });
+}
+
+function actualizarSalaUsuario(idPartida) {
+  $.ajax({
+    url: "controladores/controladorPartida.php",
+    type: "POST",
+    dataType: "json",
+    data: {
+      orden: "buscar",
+      idPartida: idPartida,
+    },
+    success: function (partida) {
+      if (partida.error) {
+        console.error(partida.error);
+        return;
+      }
+
+      cargarInformacionSala(partida, true);
+    },
+    error: function (xhr, status, error) {
+      console.error("Error al obtener la sala:", error);
     },
   });
 }
@@ -74,7 +183,7 @@ function cargarSalas() {
       }
 
       partidas.forEach(function (partida) {
-        cargarInformacionSala(partida);
+        cargarInformacionSalaCompleta(partida);
       });
     },
     error: function (xhr, status, error) {
@@ -89,15 +198,21 @@ function cargarInformacionSala(partida) {
     url: "controladores/controladorPartida.php",
     type: "POST",
     dataType: "json",
-    data: { orden: "getEquipos", idPartida: partida.idPartida },
+    data: {
+      orden: "getEquipos",
+      idPartida: partida.idPartida,
+    },
     success: function (equipos) {
       $.ajax({
         url: "controladores/controladorPartida.php",
         type: "POST",
         dataType: "json",
-        data: { orden: "getJugadores", idPartida: partida.idPartida },
+        data: {
+          orden: "getJugadores",
+          idPartida: partida.idPartida,
+        },
         success: function (jugadores) {
-          mostrarSala(partida, equipos, jugadores);
+          mostrarEquipos(partida, equipos, jugadores);
         },
         error: function (xhr, status, error) {
           console.error("Error al obtener jugadores:", error);
@@ -266,7 +381,8 @@ let botonAbandonarReferencia = null;
 $(document).on("click", ".btn-abandonar-sala", function () {
   botonAbandonarReferencia = $(this);
 
-  const esHost = $(this).data("es-host") === true || $(this).data("es-host") === "true";
+  const esHost =
+    $(this).data("es-host") === true || $(this).data("es-host") === "true";
   const titulo = $("#modalAbandonarSalaLabel");
   const mensaje = $("#modalAbandonarSalaMensaje");
   const botonConfirmar = $("#btnConfirmarAbandonar");
@@ -279,9 +395,7 @@ $(document).on("click", ".btn-abandonar-sala", function () {
     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.",
-    );
+    mensaje.text("Si sales de la sala, perderás tu lugar en el equipo.");
     botonConfirmar.text("Sí, salir");
   }
 
@@ -292,7 +406,6 @@ $(document).on("click", ".btn-abandonar-sala", function () {
   modal.show();
 });
 
-
 // B. Al hacer clic en "Sí, salir" dentro del modal Kahoot
 $(document).on("click", "#btnConfirmarAbandonar", function () {
   const modalEl = document.getElementById("modalAbandonarSala");
@@ -433,3 +546,71 @@ $(document).on("input", ".input-kahoot", function () {
   $(this).removeClass("is-invalid");
   $(this).next(".mensaje-error-sala").remove();
 });
+
+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>
+    `;
+  });
+
+  // IMPORTANTE:
+  // Solo modificamos .equipos
+  $("#contenedorSalas .equipos").html(equiposHTML);
+}