Se elimina include en buscadorsala

Subido cabecera.html
index.php actualizado para cargar cabecera sin php
2026-09-30 12:26:33 +02:00 · 2026-09-30 11:17:33 +02:00 · 2026-09-30 11:15:04 +02:00 · 2026-09-30 11:13:54 +02:00
5 changed files with 131 additions and 70 deletions
@@ -10,11 +10,12 @@
    <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>

-    <?php include_once("cabecera.php"); ?>
+    <header id="cabecera-container"></header> 

    <main class="container py-4">

@@ -22,7 +23,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>
@@ -99,8 +100,11 @@
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="js/jquery-4.0.0.min.js"></script>
+    <script src="js/cabecera.js"></script>
    <script src="js/buscadorSala.js"></script>

+
+
 </body>
+
 </html>
@@ -0,0 +1,96 @@
+<!-- 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,11 +6,19 @@
    <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>

-    <?php include 'cabecera.php'; ?>
+    <header id="cabecera-container"></header>

    <div class="container my-5">
        <div class="row justify-content-center align-items-center g-4">
@@ -45,6 +53,7 @@

    <!-- 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,43 +3,6 @@ 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() {
@@ -216,12 +179,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 = `
-  <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>
-`;
+      <a href="juego.php?idPartida=${partida.idPartida}" 
+         class="btn btn-success btn-lg px-4">
+        <i class="bi bi-controller"></i> ¡Iniciar Partida!
+      </a>
+    `;
    }

    accionesSalaHTML = `
@@ -303,8 +266,7 @@ 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");
@@ -317,7 +279,9 @@ $(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");
  }

@@ -328,6 +292,7 @@ $(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");
@@ -438,7 +403,6 @@ $("#btnCrearSala").on("click", function () {

      if (respuesta.exito) {
        $("#modalCrearSala").modal("hide");
-
        location.reload();
      }
    },
@@ -469,22 +433,3 @@ $(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,9 +1,15 @@
 let idUsuarioSesion = null;

+
 $(document).ready(function () {
-  comprobarSesion();
+  // 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>")
@@ -204,3 +210,4 @@ $(document).on("click", "#botonCerrarSesion", function (event) {
  });
 });

+
Author	SHA1	Message	Date
jorge	81fd47ee4b	Se elimina include en buscadorsala	2026-09-30 12:26:33 +02:00
jorge	4bba08fb69	Subido cabecera.html	2026-09-30 11:17:33 +02:00
jorge	a2928d1433	index.php actualizado para cargar cabecera sin php	2026-09-30 11:15:04 +02:00
jorge	fb269fdc28	Actualizar cabecera.js	2026-09-30 11:13:54 +02:00