Merge pull request 'Css' (#23) from css into main

Reviewed-on: #23

buscadorSala.php

@@ -71,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>

css/buscadorSala.css

@@ -77,8 +77,9 @@
 }
 
 .btn-unirse:hover {
-    background-color: #0f56ab;
+    background-color: #1f6f09;
     color: white;
+    transform: translateY(-2px);
 }
 
 .modal-kahoot {

css/perfil.css

@@ -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;
+}

js/buscadorSala.js

@@ -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(

js/index.js

@@ -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" 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> Vic</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> Der</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> Aciertos</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: 10%;"><i class="fa-solid fa-percent text-info me-1"></i> % Vic</th>
+                        <th scope="col" style="width: 15%;"><i class="fa-solid fa-medal text-info me-1"></i> <br> Efectividad</th>
                     </tr>
                 </thead>
                 <tbody>

js/juego.js

@@ -18,8 +18,6 @@ let preguntas = [];
 let indice = 0; // pregunta que se está mostrando
 let bloqueado = false; // true mientras se envía una respuesta o se ve el feedback
 let numeroAciertos = 0; // número de aciertos del jugador
-let tiempoRespuesta = 0;
-let intervaloTiempo;
 
 $(document).ready(function () {
 
@@ -83,11 +81,6 @@ function cargarPreguntas() {
 
 // 2. Pintar la pregunta actual y sus respuestas
 function mostrarPregunta() {
-  console.log("entro en mostrarPregunta");
-  tiempoRespuesta = 0;
-  intervaloTiempo = setInterval(function () {
-    tiempoRespuesta++;
-  }, 100);
   const pregunta = preguntas[indice];
 
   bloqueado = false;
@@ -118,9 +111,6 @@ function mostrarPregunta() {
 
 // 3. El usuario pulsa una respuesta: se guarda y se enseña si ha acertado
 function responder($botonPulsado) {
-  console.log("entro en responder");
-  clearInterval(intervaloTiempo);
-  console.log("Tiempo de respuesta: " + tiempoRespuesta /10 + " segundos");
   if (bloqueado) {
     return;
   }
@@ -140,8 +130,7 @@ function responder($botonPulsado) {
       orden: "responder",
       idPartida: idPartida,
       idPartidaxPregunta: pregunta.idPartidaxPregunta,
-      idRespuesta: idRespuesta, 
+      idRespuesta: idRespuesta,
-      tiempoRespuesta: tiempoRespuesta,
     },
     success: function (datos) {
       if (datos.error) {

perfil.php

@@ -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>

resultados.php

@@ -1,156 +1,156 @@
-<?php
+<?php
-session_start();
+session_start();
-require_once 'includes/conexionBD.php';
+require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/conexionBD.php';
-
+
-$idPartida = intval($_GET['idPartida'] ?? 0);
+$idPartida = intval($_GET['idPartida'] ?? 0);
-if ($idPartida <= 0) {
+if ($idPartida <= 0) {
-    die("Partida no válida.");
+    die("Partida no válida.");
-}
+}
-
+
-$conexion = conexionBD();
+$conexion = conexionBD();
-if (is_array($conexion)) {
+if (is_array($conexion)) {
-    die("Error de conexión a la base de datos.");
+    die("Error de conexión a la base de datos.");
-}
+}
-
+
-// Obtener listado de jugadores y sus equipos en esta partida
+// Obtener listado de jugadores y sus equipos en esta partida
-$stmt = $conexion->prepare("
+$stmt = $conexion->prepare("
-    SELECT u.idUsuario, u.nombreUsuario, e.idEquipo, e.nombreEquipo
+    SELECT u.idUsuario, u.nombreUsuario, e.idEquipo, e.nombreEquipo
-    FROM equipoxpartida exp
+    FROM equipoxpartida exp
-    INNER JOIN equipoxusuario exu ON exp.idEquipo = exu.idEquipo
+    INNER JOIN equipoxusuario exu ON exp.idEquipo = exu.idEquipo
-    INNER JOIN usuario u ON exu.idUsuario = u.idUsuario
+    INNER JOIN usuario u ON exu.idUsuario = u.idUsuario
-    INNER JOIN equipo e ON exu.idEquipo = e.idEquipo
+    INNER JOIN equipo e ON exu.idEquipo = e.idEquipo
-    WHERE exp.idPartida = :idPartida
+    WHERE exp.idPartida = :idPartida
-");
+");
-$stmt->execute([':idPartida' => $idPartida]);
+$stmt->execute([':idPartida' => $idPartida]);
-$listaJugadoresRaw = $stmt->fetchAll(PDO::FETCH_ASSOC);
+$listaJugadoresRaw = $stmt->fetchAll(PDO::FETCH_ASSOC);
-
+
-$primerosEnAcertar = $_SESSION['primeros_en_acertar'][$idPartida] ?? [];
+$primerosEnAcertar = $_SESSION['primeros_en_acertar'][$idPartida] ?? [];
-
+
-$jugadoresFinales = [];
+$jugadoresFinales = [];
-$equiposFinales = [];
+$equiposFinales = [];
-
+
-// Respuestas de velocidad (+2 o +1)
+// Respuestas de velocidad (+2 o +1)
-foreach ($listaJugadoresRaw as $jugador) {
+foreach ($listaJugadoresRaw as $jugador) {
-    $idU = (int)$jugador['idUsuario'];
+    $idU = (int)$jugador['idUsuario'];
-    $idE = (int)$jugador['idEquipo'];
+    $idE = (int)$jugador['idEquipo'];
-
+
-    $stmtRespuestas = $conexion->prepare("
+    $stmtRespuestas = $conexion->prepare("
-        SELECT ra.idPartidaxPregunta, r.correcta
+        SELECT ra.idPartidaxPregunta, r.correcta
-        FROM respuestaalmacenada ra
+        FROM respuestaalmacenada ra
-        INNER JOIN respuesta r ON ra.idRespuesta = r.idRespuesta
+        INNER JOIN respuesta r ON ra.idRespuesta = r.idRespuesta
-        INNER JOIN partidaxpregunta pxp ON ra.idPartidaxPregunta = pxp.idPartidaxPregunta
+        INNER JOIN partidaxpregunta pxp ON ra.idPartidaxPregunta = pxp.idPartidaxPregunta
-        WHERE pxp.idPartida = :idPartida AND ra.idUsuario = :idUsuario
+        WHERE pxp.idPartida = :idPartida AND ra.idUsuario = :idUsuario
-    ");
+    ");
-    $stmtRespuestas->execute([':idPartida' => $idPartida, ':idUsuario' => $idU]);
+    $stmtRespuestas->execute([':idPartida' => $idPartida, ':idUsuario' => $idU]);
-    $respuestasUsuario = $stmtRespuestas->fetchAll(PDO::FETCH_ASSOC);
+    $respuestasUsuario = $stmtRespuestas->fetchAll(PDO::FETCH_ASSOC);
-
+
-    $aciertos = 0;
+    $aciertos = 0;
-    $puntosTotalesJugador = 0;
+    $puntosTotalesJugador = 0;
-
+
-    foreach ($respuestasUsuario as $resp) {
+    foreach ($respuestasUsuario as $resp) {
-        if ((int)$resp['correcta'] === 1) {
+        if ((int)$resp['correcta'] === 1) {
-            $aciertos++;
+            $aciertos++;
-            $idPxp = $resp['idPartidaxPregunta'];
+            $idPxp = $resp['idPartidaxPregunta'];
-            
+            
-            // Si el ID de usuario coincide con el primero guardado de esa pregunta se lleva 2 puntos
+            // Si el ID de usuario coincide con el primero guardado de esa pregunta se lleva 2 puntos
-            if (isset($primerosEnAcertar[$idPxp]) && $primerosEnAcertar[$idPxp] === $idU) {
+            if (isset($primerosEnAcertar[$idPxp]) && $primerosEnAcertar[$idPxp] === $idU) {
-                $puntosTotalesJugador += 2;
+                $puntosTotalesJugador += 2;
-            } else {
+            } else {
-                $puntosTotalesJugador += 1;
+                $puntosTotalesJugador += 1;
-            }
+            }
-        }
+        }
-    }
+    }
-
+
-    $jugadoresFinales[] = [
+    $jugadoresFinales[] = [
-        'nombre' => $jugador['nombreUsuario'],
+        'nombre' => $jugador['nombreUsuario'],
-        'equipo' => $jugador['nombreEquipo'],
+        'equipo' => $jugador['nombreEquipo'],
-        'aciertos' => $aciertos,
+        'aciertos' => $aciertos,
-        'puntos' => $puntosTotalesJugador
+        'puntos' => $puntosTotalesJugador
-    ];
+    ];
-
+
-    if (!isset($equiposFinales[$idE])) {
+    if (!isset($equiposFinales[$idE])) {
-        $equiposFinales[$idE] = [
+        $equiposFinales[$idE] = [
-            'nombre' => $jugador['nombreEquipo'],
+            'nombre' => $jugador['nombreEquipo'],
-            'puntos' => 0
+            'puntos' => 0
-        ];
+        ];
-    }
+    }
-    $equiposFinales[$idE]['puntos'] += $puntosTotalesJugador;
+    $equiposFinales[$idE]['puntos'] += $puntosTotalesJugador;
-}
+}
-
+
-// Ordenar según la puntuación final de mayor a menor
+// Ordenar según la puntuación final de mayor a menor
-usort($jugadoresFinales, function($a, $b) { return $b['puntos'] <=> $a['puntos']; });
+usort($jugadoresFinales, function($a, $b) { return $b['puntos'] <=> $a['puntos']; });
-usort($equiposFinales, function($a, $b) { return $b['puntos'] <=> $a['puntos']; });
+usort($equiposFinales, function($a, $b) { return $b['puntos'] <=> $a['puntos']; });
-?>
+?>
-
+
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html lang="es">
+<html lang="es">
-<head>
+<head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Resultados - Trivial</title>
+    <title>Resultados - Trivial</title>
-    <link rel="stylesheet" href="css/resultados.css">
+    <link rel="stylesheet" href="css/resultados.css">
-    <script src="https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.min.js"></script>
-</head>
+</head>
-<body data-id-partida="<?php echo $idPartida; ?>">
+<body data-id-partida="<?php echo $idPartida; ?>">
-
+
-    <div id="pantalla-espera" class="contenedor">
+    <div id="pantalla-espera" class="contenedor">
-        <h2>⌛ Esperando a que todos los jugadores terminen...</h2>
+        <h2>⌛ Esperando a que todos los jugadores terminen...</h2>
-        <p>Calculando estadísticas de velocidad y actualizando perfiles históricos en el servidor.</p>
+        <p>Calculando estadísticas de velocidad y actualizando perfiles históricos en el servidor.</p>
-        <div class="loader"></div>
+        <div class="loader"></div>
-    </div>
+    </div>
-
+
-    <div id="pantalla-resultados" class="contenedor" style="display:none;">
+    <div id="pantalla-resultados" class="contenedor" style="display:none;">
-        <h1>🏆 Resultados de la Partida 🏆</h1>
+        <h1>🏆 Resultados de la Partida 🏆</h1>
-        
+        
-        <h2>Clasificación por Equipos</h2>
+        <h2>Clasificación por Equipos</h2>
-        <table class="tabla-ranking">
+        <table class="tabla-ranking">
-            <thead>
+            <thead>
-                <tr>
+                <tr>
-                    <th>Posición</th>
+                    <th>Posición</th>
-                    <th>Equipo</th>
+                    <th>Equipo</th>
-                    <th>Puntos Totales</th>
+                    <th>Puntos Totales</th>
-                </tr>
+                </tr>
-            </thead>
+            </thead>
-            <tbody>
+            <tbody>
-                <?php foreach ($equiposFinales as $index => $eq): ?>
+                <?php foreach ($equiposFinales as $index => $eq): ?>
-                <tr class="<?php echo $index === 0 ? 'top-team' : ''; ?>">
+                <tr class="<?php echo $index === 0 ? 'top-team' : ''; ?>">
-                    <td>#<?php echo $index + 1; ?></td>
+                    <td>#<?php echo $index + 1; ?></td>
-                    <td><?php echo htmlspecialchars($eq['nombre']); ?></td>
+                    <td><?php echo htmlspecialchars($eq['nombre']); ?></td>
-                    <td><strong><?php echo $eq['puntos']; ?> pts</strong></td>
+                    <td><strong><?php echo $eq['puntos']; ?> pts</strong></td>
-                </tr>
+                </tr>
-                <?php endforeach; ?>
+                <?php endforeach; ?>
-            </tbody>
+            </tbody>
-        </table>
+        </table>
-
+
-        <h2>Rendimiento Individual</h2>
+        <h2>Rendimiento Individual</h2>
-        <table class="tabla-ranking">
+        <table class="tabla-ranking">
-            <thead>
+            <thead>
-                <tr>
+                <tr>
-                    <th>Posición</th>
+                    <th>Posición</th>
-                    <th>Jugador</th>
+                    <th>Jugador</th>
-                    <th>Equipo</th>
+                    <th>Equipo</th>
-                    <th>Aciertos</th>
+                    <th>Aciertos</th>
-                    <th>Puntos Logrados</th>
+                    <th>Puntos Logrados</th>
-                </tr>
+                </tr>
-            </thead>
+            </thead>
-            <tbody>
+            <tbody>
-                <?php foreach ($jugadoresFinales as $index => $jug): ?>
+                <?php foreach ($jugadoresFinales as $index => $jug): ?>
-                <tr class="<?php echo $index === 0 ? 'top-player' : ''; ?>">
+                <tr class="<?php echo $index === 0 ? 'top-player' : ''; ?>">
-                    <td>#<?php echo $index + 1; ?></td>
+                    <td>#<?php echo $index + 1; ?></td>
-                    <td><?php echo htmlspecialchars($jug['nombre']); ?></td>
+                    <td><?php echo htmlspecialchars($jug['nombre']); ?></td>
-                    <td><?php echo htmlspecialchars($jug['equipo']); ?></td>
+                    <td><?php echo htmlspecialchars($jug['equipo']); ?></td>
-                    <td><?php echo $jug['aciertos']; ?> / 10</td>
+                    <td><?php echo $jug['aciertos']; ?> / 10</td>
-                    <td><strong><?php echo $jug['puntos']; ?> pts</strong></td>
+                    <td><strong><?php echo $jug['puntos']; ?> pts</strong></td>
-                </tr>
+                </tr>
-                <?php endforeach; ?>
+                <?php endforeach; ?>
-            </tbody>
+            </tbody>
-        </table>
+        </table>
-
+
-        <div class="contenedor-boton">
+        <div class="contenedor-boton">
-            <a href="/triviagmatico/buscadorSala.php" class="btn-inicio">Volver al Inicio 🏠</a>
+            <a href="/triviagmatico/buscadorSala.php" class="btn-inicio">Volver al Inicio 🏠</a>
-        </div>
+        </div>
-    </div>
+    </div>
-
+
-    <script src="js/resultados.js"></script>
+    <script src="js/resultados.js"></script>
-</body>
+</body>
 </html>