Add sincronizacion de jugadores en partida

js/sala.js

@@ -263,15 +263,16 @@ function mostrarSala(partida, equipos, jugadores) {
 
   if (esHost) {
     botonIniciarHTML = `
-      <a
-        href="juego.php?idPartida=${partida.idPartida}"
-        class="btn btn-success btn-lg px-4">
+    <button
+      type="button"
+      class="btn btn-success btn-lg px-4 btn-iniciar-partida"
+      data-id-partida="${partida.idPartida}">
 
-        <i class="bi bi-controller"></i>
-        ¡Iniciar Partida!
+      <i class="bi bi-controller"></i>
+      ¡Iniciar Partida!
 
-      </a>
-    `;
+    </button>
+  `;
   }
 
   const salaHTML = `
@@ -313,8 +314,98 @@ function mostrarSala(partida, equipos, jugadores) {
   `;
 
   contenedor.html(salaHTML);
+  if (!partida.fechaInicio) {
+    iniciarComprobacionPartida(partida.idPartida);
+  }
 }
 
+let intervaloComprobarPartida = null;
+
+function iniciarComprobacionPartida(idPartida) {
+  if (intervaloComprobarPartida) {
+    clearInterval(intervaloComprobarPartida);
+  }
+
+  intervaloComprobarPartida = setInterval(function () {
+    $.ajax({
+      url: "controladores/controladorPartida.php",
+
+      type: "POST",
+
+      dataType: "json",
+
+      data: {
+        orden: "comprobarInicio",
+        idPartida: idPartida,
+      },
+
+      success: function (respuesta) {
+        if (respuesta.iniciada) {
+          clearInterval(intervaloComprobarPartida);
+
+          window.location.href = "juego.php?idPartida=" + idPartida;
+        }
+      },
+    });
+  }, 1000);
+}
+
+$(document).on("click", ".btn-iniciar-partida", function () {
+  const boton = $(this);
+
+  const idPartida = boton.data("id-partida");
+
+  boton.prop("disabled", true);
+
+  boton.html(`
+    <span class="spinner-border spinner-border-sm"></span>
+    Iniciando...
+  `);
+
+  $.ajax({
+    url: "controladores/controladorPartida.php",
+
+    type: "POST",
+
+    dataType: "json",
+
+    data: {
+      orden: "iniciar",
+
+      idPartida: idPartida,
+    },
+
+    success: function (respuesta) {
+      if (respuesta.error) {
+        alert(respuesta.error);
+
+        boton.prop("disabled", false);
+
+        boton.html(`
+          <i class="bi bi-controller"></i>
+          ¡Iniciar Partida!
+        `);
+
+        return;
+      }
+
+      // El host entra directamente
+      window.location.href = "juego.php?idPartida=" + idPartida;
+    },
+
+    error: function () {
+      alert("Ocurrió un error al iniciar la partida.");
+
+      boton.prop("disabled", false);
+
+      boton.html(`
+        <i class="bi bi-controller"></i>
+        ¡Iniciar Partida!
+      `);
+    },
+  });
+});
+
 $(document).on("click", ".btn-unirse-equipo", function () {
   const boton = $(this);
 
@@ -364,8 +455,7 @@ $(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");
 
@@ -384,9 +474,7 @@ $(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");
   }
@@ -399,17 +487,13 @@ $(document).on("click", ".btn-abandonar-sala", function () {
 });
 
 $(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",
@@ -421,9 +505,7 @@ $(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();
@@ -449,16 +531,11 @@ $(document).on("click", "#btnConfirmarAbandonar", function () {
     },
 
     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();
@@ -473,25 +550,19 @@ function escapeHTML(texto) {
     .html();
 }
 
-function mostrarEquipos(
-  partida,
-  equipos,
-  jugadores
-) {
+function mostrarEquipos(partida, equipos, jugadores) {
   let equiposHTML = "";
 
   equipos.forEach(function (equipo) {
-    const jugadoresEquipo =
-      jugadores.filter(function (jugador) {
-        return jugador.idEquipo == equipo.idEquipo;
-      });
+    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;
+        const esHost = jugador.idUsuario == partida.idUsuario;
 
         jugadoresHTML += `
           <div class="jugador border border-2 d-flex align-items-center justify-content-between ${
@@ -507,9 +578,7 @@ function mostrarEquipos(
                 }
               </span>
 
-              ${escapeHTML(
-                jugador.nombreUsuario
-              )}
+              ${escapeHTML(jugador.nombreUsuario)}
             </div>
 
             ${
@@ -547,4 +616,4 @@ function mostrarEquipos(
   });
 
   $("#contenedorSalas .equipos").html(equiposHTML);
-}
+}