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}" 
-         class="btn btn-success btn-lg px-4">
-        <i class="bi bi-controller"></i> ¡Iniciar Partida!
-      </a>
-    `;
+  <button type="button" id="btnInicioJuego" data-id-partida="${partida.idPartida}" class="btn btn-success btn-lg px-4">
+    <i class="bi bi-controller"></i> ¡Iniciar Partida!
+  </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(
-      "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 +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();
-  });
+  comprobarSesion();
 });

-
 // Función auxiliar para escapar texto HTML
 function escapeHTML(str) {
  return $("<div>")
@@ -210,4 +204,3 @@ $(document).on("click", "#botonCerrarSesion", function (event) {
  });
 });

-