Fix inicia partida todos los usuarios

2026-09-30 10:21:43 +02:00
5 changed files with 70 additions and 131 deletions
@@ -10,12 +10,11 @@
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/buscadorSala.css">
    <script src="js/jquery-4.0.0.min.js"></script>
 </head>
 <body>
-    <header id="cabecera-container"></header> 
+    <?php include_once("cabecera.php"); ?>
    <main class="container py-4">
@@ -23,7 +22,7 @@
        <div class="mb-4">
            <a href="index.php" class="btn btn-outline-secondary d-inline-flex align-items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
-                    <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8" />
+                    <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
                </svg>
                Volver al Inicio
            </a>
@@ -100,11 +99,8 @@
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="js/cabecera.js"></script>
+    <script src="js/jquery-4.0.0.min.js"></script>
    <script src="js/buscadorSala.js"></script>
 </body>
 </html>
@@ -1,96 +0,0 @@
 <!-- cabecera.html -->
 <nav class="navbar navbar-expand-lg navbar-kahoot py-3 mb-4">
    <div class="container">
        <a class="navbar-brand" href="index.php">
            <img src="img/favicon/favicon.svg" alt="TRIVIAGMÁTICO" class="me-2" style="height: 35px;">
            TRIVIAGMÁTICO
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
            <!-- Contenedor dinámico de usuario/botones -->
            <div class="d-flex align-items-center gap-3" id="contenedorUsuarioCabecera"></div>
        </div>
    </div>
 </nav>
 <!-- MODAL DE LOGIN -->
 <div class="modal fade" id="modalLogin" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-dark">
            <div class="modal-header">
                <h1 class="modal-title fs-5 fw-bold" id="loginModalLabel">
                    <i class="fa-solid fa-right-to-bracket text-primary me-2"></i>Iniciar sesión
                </h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <form id="formLogin">
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control border-dark" id="loginEmail" name="email" placeholder="Correo electrónico" required>
                        <label for="loginEmail">Correo electrónico</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="password" class="form-control border-dark" id="loginPassword" name="contrasena" placeholder="Contraseña" required>
                        <label for="loginPassword">Contraseña</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" id="recordar" name="recordar" type="checkbox" />
                        <label for="recordar" class="small">Recuérdeme durante 10 días</label>
                    </div>
                    <input type="hidden" name="orden" value="validar">
                </form>
                <div id="errorLogin" class="text-danger fw-bold mt-2"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary rounded-pill px-3" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary rounded-pill px-4" id="botonAceptarLogin">Entrar</button>
            </div>
        </div>
    </div>
 </div>
 <!-- MODAL DE REGISTRO -->
 <div class="modal fade" id="modalRegistro" tabindex="-1" aria-labelledby="registroModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-dark">
            <div class="modal-header">
                <h1 class="modal-title fs-5 fw-bold" id="registroModalLabel">
                    <i class="fa-solid fa-user-plus text-success me-2"></i>Registrarse
                </h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <form id="formRegistro">
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control border-dark" id="regNombre" name="nombreUsuario" placeholder="Nombre" required>
                        <label for="regNombre">Nombre</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control border-dark" id="regEmail" name="email" placeholder="Correo electrónico" required>
                        <label for="regEmail">Correo electrónico</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="password" class="form-control border-dark" id="regPassword" name="contrasena" placeholder="Contraseña" required>
                        <label for="regPassword">Contraseña</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="password" class="form-control border-dark" id="regPasswordConfirm" name="contrasenaConfirm" placeholder="Confirmar contraseña" required>
                        <label for="regPasswordConfirm">Confirmar contraseña</label>
                    </div>
                    <input type="hidden" name="orden" value="registrar">
                </form>
                <div id="errorRegistro" class="text-danger fw-bold mt-2"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary rounded-pill px-3" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success rounded-pill px-4" id="botonAceptarRegistro">Registrarse</button>
            </div>
        </div>
    </div>
 </div>
@@ -6,19 +6,11 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Triviagmático</title>
    <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome para iconos -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <!-- Google Fonts para estilo Kahoot -->
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-4.0.0.min.js"></script>
 </head>
 <body>
-    <header id="cabecera-container"></header>
+    <?php include 'cabecera.php'; ?>
    <div class="container my-5">
        <div class="row justify-content-center align-items-center g-4">
@@ -53,7 +45,6 @@
    <!-- JS de Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/cabecera.js"></script>
    <script src="js/index.js"></script>
 </body>
@@ -3,6 +3,43 @@ let usuarioYaEstaEnEquipo = false;
 $(document).ready(function () {
  comprobarSalaUsuario();
 });
 // ==========================================================================
 // DETECTOR DE INICIO DE PARTIDA PARA JUGADORES INVITADOS (1 VS 1)
 // ==========================================================================
 $(document).ready(function () {
  // Solo activamos el vigilante si estamos en la página del buscador de salas
  if (window.location.pathname.includes("buscadorSala.php")) {
    setInterval(function () {
      // 1. Preguntamos al servidor en qué partida está metido el usuario actual
      $.ajax({
        url: "controladores/controladorEquipoxUsuario.php",
        type: "POST",
        dataType: "json",
        data: { orden: "obtenerSalaUsuario" },
        success: function (sala) {
          // Si el usuario está metido en una sala/partida activa...
          if (sala.asociado && sala.idPartida) {
            // 2. Comprobamos si el anfitrión ya ha iniciado esa partida concreta
            $.ajax({
              url: "controladores/controladorPartida.php",
              type: "POST",
              dataType: "json",
              data: { orden: "buscar", idPartida: sala.idPartida },
              success: function (partida) {
                // Si 'fechaInicio' ya no es null, significa que el host le dio a "Jugar"
                if (partida && partida.fechaInicio !== null) {
                  // Redirigimos instantáneamente al invitado a la pantalla del juego
                  window.location.href =
                    "juego.php?idPartida=" + sala.idPartida;
                }
              },
            });
          }
        },
      });
    }, 2000); // Comprueba el estado de la partida automáticamente cada 2 segundos
  }
 });
 // 1. Comprobar si el usuario actual ya pertenece a una sala
 function comprobarSalaUsuario() {
@@ -179,12 +216,12 @@ function mostrarSala(partida, equipos, jugadores) {
    // Solo el host puede iniciar la partida
    if (esHost) {
      // Así debe renderizarse el botón del host dentro de tu función mostrarSala() para que el AJAX funcione:
      botonIniciarHTML = `
-      <a href="juego.php?idPartida=${partida.idPartida}" 
+  <button type="button" id="btnInicioJuego" data-id-partida="${partida.idPartida}" class="btn btn-success btn-lg px-4">
         class="btn btn-success btn-lg px-4">
    <i class="bi bi-controller"></i> ¡Iniciar Partida!
-      </a>
+  </button>
-    `;
+`;
    }
    accionesSalaHTML = `
@@ -266,7 +303,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 +317,7 @@ $(document).on("click", ".btn-abandonar-sala", function () {
    botonConfirmar.text("Sí, abandonar");
  } 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");
  }
@@ -292,7 +328,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");
@@ -403,6 +438,7 @@ $("#btnCrearSala").on("click", function () {
      if (respuesta.exito) {
        $("#modalCrearSala").modal("hide");
        location.reload();
      }
    },
@@ -433,3 +469,22 @@ $(document).on("input", ".input-kahoot", function () {
  $(this).removeClass("is-invalid");
  $(this).next(".mensaje-error-sala").remove();
 });
 $(document).on("click", "#btnInicioJuego", function () {
  // 1. Capturamos el id de la partida de forma dinámica desde el botón que se ha pulsado
  const idPartida = $(this).data("id-partida");
  // 2. Enviamos la petición AJAX adecuada con TODOS los datos que el controlador espera recibir
  $.ajax({
    url: "controladores/controladorPartida.php",
    type: "POST",
    dataType: "json",
    data: {
      orden: "iniciar",
      idPartida: idPartida,
    },
    error: function (error) {
      console.error("Error al iniciar el juego por AJAX:", error);
    },
  });
 });
@@ -1,15 +1,9 @@
 let idUsuarioSesion = null;
 $(document).ready(function () {
  // Carga la cabecera html
  $("#cabecera-container").load("cabecera.html", function () {
    // Después de cargar cabecera comprobamos sesión
  comprobarSesion();
  });
 });
 // Función auxiliar para escapar texto HTML
 function escapeHTML(str) {
  return $("<div>")
@@ -210,4 +204,3 @@ $(document).on("click", "#botonCerrarSesion", function (event) {
  });
 });