Arreglado CSS modal crear pregunta en perfil

Ajustes a la tabla para dejarla buena, bonita y barata
Ajuste texto para host
2026-09-30 13:15:52 +02:00 · 2026-09-30 13:08:04 +02:00 · 2026-09-30 12:48:38 +02:00 · 2026-09-30 12:41:50 +02:00 · 2026-09-30 12:31:50 +02:00 · 2026-09-30 12:25:22 +02:00
14 changed files with 170 additions and 1070 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>
@@ -72,7 +71,7 @@
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
-                    <button type="button" class="btn btn-kahoot-login" id="btnCrearSala">Crear sala</button>
+                    <button type="button" class="btn btn-kahoot-register" id="btnCrearSala">Crear sala</button>
                </div>
            </div>
        </div>
@@ -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>
@@ -1,79 +1,118 @@
 <?php

 session_start();
-
 require_once '../clases/claseJuego.php';
-
 header('Content-Type: application/json; charset=utf-8');

-// Hay que estar logueado y decir de qué partida se trata
+// Comprobamos que haya un usuario conectado
+
 if (!isset($_SESSION['idUsuario'])) {
-    echo json_encode(['error' => 'Debes iniciar sesión para jugar.']);
+    echo json_encode([
+        'error' => 'Debes iniciar sesión para jugar.'
+    ]);
+
    exit;
 }

-$idUsuario = (int)$_SESSION['idUsuario'];
-$idPartida = intval($_POST['idPartida'] ?? 0);
+$idUsuario = (int) $_SESSION['idUsuario'];
+
+// Comprobamos que se haya indicado la partida
+
+if (!isset($_POST['idPartida'])) {
+    echo json_encode([
+        'error' => 'No se ha indicado la partida.'
+    ]);
+
+    exit;
+}
+
+$idPartida = intval($_POST['idPartida']);

 if ($idPartida <= 0) {
-    echo json_encode(['error' => 'No se ha indicado la partida.']);
+    echo json_encode([
+        'error' => 'La partida indicada no es válida.'
+    ]);
+
    exit;
 }

-// Solo pueden jugar los usuarios que están en uno de los equipos de la partida
-$perteneceAPartida = Juego::usuarioEnPartida($idPartida, $idUsuario);
+// Comprobamos que el usuario pertenezca a la partida
+
+$perteneceAPartida = Juego::usuarioEnPartida($idPartida,$idUsuario);

 if (is_array($perteneceAPartida)) {
    echo json_encode($perteneceAPartida);
+
    exit;
 }

+
 if (!$perteneceAPartida) {
-    echo json_encode(['error' => 'No formas parte de esta partida.']);
+    echo json_encode([
+        'error' => 'No formas parte de esta partida.'
+    ]);
+
    exit;
 }

+// Comprobamos la orden

-switch ($_POST['orden'] ?? '') {
+$orden = $_POST['orden'] ?? '';
+
+switch ($orden) {
+
+    // CARGAR LAS PREGUNTAS DE LA PARTIDA

-    // Devuelve las 10 preguntas con sus respuestas (sin marcar la correcta)
    case 'cargarPreguntas':

-        echo json_encode(Juego::cargarPreguntas($idPartida, $idUsuario));
+        $resultado = Juego::cargarPreguntas($idPartida, $idUsuario);
+        echo json_encode($resultado);

-        break;
+    break;

+    // REGISTRAR RESPUESTA

-    // Guarda la respuesta del usuario y dice si ha acertado
    case 'responder':

-        $idPartidaxPregunta = intval($_POST['idPartidaxPregunta'] ?? 0);
-        $idRespuesta = intval($_POST['idRespuesta'] ?? 0);
-
-        if ($idPartidaxPregunta <= 0 || $idRespuesta <= 0) {
-            echo json_encode(['error' => 'Faltan datos para registrar la respuesta.']);
-            break;
-        }
-
-        echo json_encode(
-            Juego::registrarRespuesta(
-                $idPartida,
-                $idUsuario,
-                $idPartidaxPregunta,
-                $idRespuesta
-            )
-        );
+        if (!isset($_POST['idPartidaxPregunta']) || !isset($_POST['idRespuesta'])){
+            echo json_encode([
+                'error' => 'Faltan datos para registrar la respuesta.'
+            ]);

        break;
+        }

+        $idPartidaxPregunta = intval($_POST['idPartidaxPregunta']);
+
+        $idRespuesta = intval($_POST['idRespuesta']);
+
+        if ($idPartidaxPregunta <= 0 || $idRespuesta <= 0){
+
+            echo json_encode([
+                'error' => 'Los datos de la respuesta no son válidos.'
+            ]);
+
+        break;
+        }
+
+        // Registramos la respuesta del usuario
+
+        $resultado = Juego::registrarRespuesta($idPartida, $idUsuario, $idPartidaxPregunta, $idRespuesta);
+
+        echo json_encode($resultado);
+
+    break;
+
+    // Finalizar la partida y registrar los aciertos del usuario

-    // Recibe los aciertos del jugador al terminar sus 10 preguntas,
-    // para que resultados.php los pueda usar al montar la hoja de resultados
    case 'finalizarPartida':

        $aciertos = intval($_POST['aciertos'] ?? 0);

+        // Guardamos los aciertos en la sesión
+
        if (!isset($_SESSION['aciertosPorPartida'])) {
+
            $_SESSION['aciertosPorPartida'] = [];
        }

@@ -81,16 +120,21 @@ switch ($_POST['orden'] ?? '') {

        echo json_encode([
            'exito' => 'Aciertos registrados correctamente.',
+
            'idPartida' => $idPartida,
+
            'aciertos' => $aciertos
        ]);

-        break;
-
+    break;

    default:

-        echo json_encode(['error' => 'La orden indicada no existe.']);
+        echo json_encode([
+            'error' => 'La orden indicada no existe.'
+        ]);

-        break;
-}
+    break;
+}
+
+?>
@@ -77,8 +77,9 @@
 }

 .btn-unirse:hover {
-    background-color: #0f56ab;
+    background-color: #1f6f09;
    color: white;
+    transform: translateY(-2px);
 }

 .modal-kahoot {
@@ -401,3 +401,18 @@
    }

 }
+
+
+
+.modal-kahoot {
+    border: none;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
+}
+
+.modal-kahoot-header {
+    background-color: var(--kahoot-purple);
+    color: white;
+    border-bottom: none;
+}
@@ -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>

@@ -276,7 +276,7 @@ $(document).on("click", ".btn-abandonar-sala", function () {
    mensaje.text(
      "Si abandonas la sala como anfitrión, la partida terminará para todos los jugadores.",
    );
-    botonConfirmar.text("Sí, abandonar");
+    botonConfirmar.text("Sí, terminar partida");
  } else {
    titulo.text("¿Abandonar la sala?");
    mensaje.text(
@@ -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) {
  });
 });

-
@@ -36,11 +36,11 @@ function renderizarTablaRanking(jugadores) {
                <thead class="table-dark">
                    <tr>
                        <th scope="col" style="width: 10%;">#</th>
-                        <th scope="col" class="text-start" style="width: 35%;">Jugador</th>
-                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-trophy text-warning me-1"></i> Vic</th>
-                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-xmark text-danger me-1"></i> Der</th>
-                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-bullseye text-success me-1"></i> Aciertos</th>
-                        <th scope="col" style="width: 10%;"><i class="fa-solid fa-percent text-info me-1"></i> % Vic</th>
+                        <th scope="col" class="text-start" style="width: 30%;"><i class="fa-solid fa-user"></i> <br> Jugador</th>
+                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-trophy text-warning me-1"></i> <br> Victorias</th>
+                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-xmark text-danger me-1"></i> <br> Derrotas</th>
+                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-bullseye text-success me-1"></i> <br> Aciertos</th>
+                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-medal text-info me-1"></i> <br> Efectividad</th>
                    </tr>
                </thead>
                <tbody>
@@ -20,7 +20,18 @@ let bloqueado = false; // true mientras se envía una respuesta o se ve el feedb
 let numeroAciertos = 0; // número de aciertos del jugador

 $(document).ready(function () {
-  idPartida = parseInt($("body").data("id-partida"), 10);
+
+  // Obtenemos el idPartida de la URL
+  // Ejemplo: juego.php?idPartida=3
+
+  const parametros = new URLSearchParams(window.location.search);
+
+  idPartida = parseInt(parametros.get("idPartida"), 10);
+
+  if (!idPartida || idPartida < 1) {
+    mostrarError("La partida indicada no es válida.");
+    return;
+  }

  // Un solo listener para todos los botones de respuesta
  $("#respuestas").on("click", ".btn-answer", function () {
@@ -103,6 +114,7 @@ function responder($botonPulsado) {
  if (bloqueado) {
    return;
  }
+
  bloqueado = true;

  const pregunta = preguntas[indice];
@@ -216,4 +228,4 @@ function mostrarError(mensaje) {
  $("#feedback").html(
    '<a href="buscadorSala.php">Volver al buscador de salas</a>',
  );
-}
+}
@@ -1,22 +1,6 @@
-<?php
-session_start();
-
-// Hay que estar logueado para jugar
-if (!isset($_SESSION['idUsuario'])) {
-    header('Location: index.php');
-    exit;
-}
-
-// La partida llega por la URL: juego.php?idPartida=3
-$idPartida = filter_input(INPUT_GET, 'idPartida', FILTER_VALIDATE_INT);
-
-if (!$idPartida || $idPartida < 1) {
-    header('Location: buscadorSala.php');
-    exit;
-}
-?>
 <!DOCTYPE html>
 <html lang="es">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -24,28 +8,48 @@ if (!$idPartida || $idPartida < 1) {
    <title>Proyecto Trivial</title>
    <link rel="stylesheet" href="css/juego.css">
    <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
+
 </head>
-<body data-id-partida="<?= (int)$idPartida ?>">

-    <!-- Progreso: "Pregunta 3 de 10" + barra -->
+<body>
+
+    <!-- CABECERA Y PROGRESO -->
+
    <div class="game-header">
-        <span id="contadorPregunta">Cargando…</span>
+
+        <span id="contadorPregunta">
+            Cargando…
+        </span>
+
    </div>
+
    <div class="progress-track">
+
        <div class="progress-fill" id="barraProgreso"></div>
+
    </div>

-    <!-- Contenedor de la Pregunta (lo rellena js/juego.js) -->
+    <!-- PREGUNTA -->
+
    <div class="question-container">
-        <div id="textoPregunta">Cargando preguntas…</div>
+
+        <div id="textoPregunta">
+            Cargando preguntas…
+        </div>
+
        <div id="feedback" class="feedback" aria-live="polite"></div>
+
    </div>

-    <!-- Contenedor de Respuestas (Estilo Kahoot, lo rellena js/juego.js) -->
+    <!-- RESPUESTAS -->
+
    <div class="answers-grid" id="respuestas"></div>

+    <!-- JAVASCRIPT -->
+
    <script src="js/jquery-4.0.0.min.js"></script>
    <script src="js/juego.js"></script>

 </body>
+
 </html>
@@ -293,7 +293,7 @@ $avatarUsuario = htmlspecialchars($_SESSION['avatar'] ?? 'img/avatars/defaultPro
                        Cancelar
                    </button>

-                    <button type="submit" form="formCrearPregunta" class="btn btn-kahoot-login" id="btnCrearPregunta">
+                    <button type="submit" form="formCrearPregunta" class="btn btn-kahoot-register" id="btnCrearPregunta">
                        <i class="bi bi-check-lg me-1"></i>
                        Crear pregunta
                    </button>
@@ -89,7 +89,7 @@ usort($equiposFinales, function($a, $b) { return $b['puntos'] <=> $a['puntos'];
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resultados - Trivial</title>
    <link rel="stylesheet" href="css/resultados.css">
-    <script src="https://jquery.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.min.js"></script>
 </head>
 <body data-id-partida="<?php echo $idPartida; ?>">
Author	SHA1	Message	Date
Isaac	7e1344a395	Arreglado CSS modal crear pregunta en perfil	2026-09-30 13:15:52 +02:00
Isaac	db5061ec7f	Ajustes a la tabla para dejarla buena, bonita y barata	2026-09-30 13:08:04 +02:00
Isaac	737b76e83b	Ajuste texto para host	2026-09-30 12:48:38 +02:00
Isaac	3705a9ea9e	Ajuste CSS más acorde	2026-09-30 12:41:50 +02:00
Isaac	72134b405c	Arreglado CSS botón "Unirse"	2026-09-30 12:31:50 +02:00
profesor	91056a05d9	Merge pull request 'carga jquery desde CDN, no iba' (#22 ) from corrigiendo_rutas into main Reviewed-on: #22	2026-09-30 12:25:22 +02:00
profesor	18a56e0bbd	Merge pull request 'MVC juego.php' (#20 ) from MVC_juego.php into main Reviewed-on: #20	2026-09-30 12:13:38 +02:00
Juanjo	ed7067161a	MVC juego.php	2026-09-30 11:30:30 +02:00
jorge	d3e523ad73	Merge pull request 'Preguntas y respuestas duplicadas eliminadas' (#19 ) from preguntas_victor into main Reviewed-on: #19	2026-09-30 11:06:25 +02:00
v.rodriguezcamacho	77249ba51b	Preguntas y respuestas duplicadas eliminadas	2026-09-30 11:00:21 +02:00
profesor	95f7d8dad6	carga jquery desde CDN, no iba	2026-09-30 09:57:00 +02:00