Changes to cabecera & sala

buscadorSala.php

@@ -22,7 +22,15 @@
     ?>
 
     <main class="container py-5">
-
+<!-- Botón Volver -->
+    <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"/>
+            </svg>
+            Volver al Inicio
+        </a>
+    </div>
         <div id="contenedorCrearSala" class="text-center mb-5">
 
 

cabecera.php

@@ -1,13 +1,3 @@
-<?php
-if (session_status() === PHP_SESSION_NONE) {
-    session_start();
-}
-
-// Comprobación de sesión
-$isLoggedIn = isset($_SESSION['idUsuario']) && !empty($_SESSION['idUsuario']);
-$username = $isLoggedIn ? $_SESSION['nombreUsuario'] : '';
-?>
-
 <!-- Bootstrap 5 CSS -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 <!-- FontAwesome para iconos -->
@@ -17,7 +7,6 @@ $username = $isLoggedIn ? $_SESSION['nombreUsuario'] : '';
 <link rel="stylesheet" href="css/index.css">
 <script src="js/jquery-4.0.0.min.js"></script>
 
-
 <nav class="navbar navbar-expand-lg navbar-kahoot py-3 mb-4">
     <div class="container">
         <a class="navbar-brand" href="index.php">
@@ -32,44 +21,9 @@ $username = $isLoggedIn ? $_SESSION['nombreUsuario'] : '';
         <div class="collapse navbar-collapse" id="navbarContent">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
 
-            <div class="d-flex align-items-center gap-3">
-                <?php if ($isLoggedIn): ?>
-                    <!-- Menú desplegable cuando la sesión está iniciada -->
-                    <div class="dropdown">
-                        <button class="btn user-dropdown-btn dropdown-toggle d-flex align-items-center gap-2"
-                            type="button"
-                            id="userDropdown"
-                            data-bs-toggle="dropdown"
-                            aria-expanded="false">
-                            <i class="fa-solid fa-circle-user fa-lg text-warning"></i>
-                            <span><?= htmlspecialchars($username) ?></span>
-                        </button>
-                        <ul class="dropdown-menu dropdown-menu-end user-dropdown-menu" aria-labelledby="userDropdown">
-                            <li>
-                                <a class="dropdown-item d-flex align-items-center gap-2" href="perfil.php">
-                                    <i class="fa-solid fa-user text-primary"></i> Perfil
-                                </a>
-                            </li>
-                            <li>
-                                <hr class="dropdown-divider">
-                            </li>
-                            <li>
-                                <a class="dropdown-item logout-item d-flex align-items-center gap-2" href="#" id="botonCerrarSesion">
-                                    <i class="fa-solid fa-right-from-bracket"></i> Cerrar Sesión
-                                </a>
-
-                            </li>
-                        </ul>
-                    </div>
-                <?php else: ?>
-                    <!-- Botones que abren los modales cuando NO hay sesión iniciada -->
-                    <button type="button" class="btn btn-kahoot-login rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalLogin">
-                        <i class="fa-solid fa-right-to-bracket me-1"></i> Iniciar Sesión
-                    </button>
-                    <button type="button" class="btn btn-kahoot-register rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalRegistro">
-                        <i class="fa-solid fa-user-plus me-1"></i> Registrarse
-                    </button>
-                <?php endif; ?>
+            <!-- Adtoy ti pagianan ti botones / dropdown a patulaon ti JS -->
+            <div class="d-flex align-items-center gap-3" id="contenedorUsuarioCabecera">
+                <!-- Ikapit ti JS ti HTML dita -->
             </div>
         </div>
     </div>

clases/ClaseEquipoxUsuario.php

@@ -118,4 +118,35 @@ class EquipoxUsuario
     }
 }
 
+
+
+public static function salirDeSala($idUsuario)
+    {
+        $conexion = conexionBD();
+
+        if (is_array($conexion)) {
+            return $conexion;
         }
+
+        try {
+            $sql = "DELETE FROM equipoxusuario WHERE idUsuario = :idUsuario";
+            $consulta = $conexion->prepare($sql);
+            $consulta->bindParam(':idUsuario', $idUsuario, PDO::PARAM_INT);
+            $consulta->execute();
+
+            return [
+                'exito' => true,
+                'mensaje' => 'Usuario eliminado de la sala correctamente.'
+            ];
+        } catch (PDOException $error) {
+            return [
+                'error' => 'Ocurrió un error al salir de la sala.',
+                'error_tecnico' => $error->getMessage()
+            ];
+        }
+    }
+
+}
+
+
+

controladores/ControladorEquipoxUsuario.php

@@ -75,4 +75,16 @@ switch ($_POST['orden']) {
 
     break;
 
+    case 'salirDeSala':
+    if (!isset($_SESSION['idUsuario'])) {
+        echo json_encode(['error' => 'Usuario no autenticado']);
+        exit;
+    }
+
+    $idUsuario = $_SESSION['idUsuario'];
+    $respuesta = EquipoxUsuario::salirDeSala($idUsuario);
+
+    echo json_encode($respuesta);
+    break;
+
 }

controladores/ControladorUsuario.php

@@ -55,6 +55,12 @@ switch ($_POST['orden']) {
 
         if ($resultado instanceof Usuario) {
 
+            // === AÑADIR ESTAS LÍNEAS PARA GUARDAR EN SESIÓN ===
+            $_SESSION['idUsuario'] = $resultado->getIdUsuario();
+            $_SESSION['nombreUsuario'] = $resultado->getNombreUsuario();
+            $_SESSION['email'] = $resultado->getEmail();
+            // =================================================
+
             echo json_encode([
                 'exito' => 'Login correcto',
                 'idUsuario' => $resultado->getIdUsuario(),
@@ -229,4 +235,18 @@ switch ($_POST['orden']) {
         'ranking' => $ranking
     ]);
     break;
+
+    case 'comprobarSesion':
+    if (isset($_SESSION['idUsuario']) && !empty($_SESSION['idUsuario'])) {
+        echo json_encode([
+            'activa' => true,
+            'usuario' => [
+                'idUsuario' => $_SESSION['idUsuario'],
+                'nombreUsuario' => $_SESSION['nombreUsuario'] ?? ''
+            ]
+        ]);
+    } else {
+        echo json_encode(['activa' => false]);
+    }
+    break;
 }

index.php

@@ -1,5 +1,4 @@
 <?php
-
 include 'cabecera.php';
 ?>
 
@@ -12,7 +11,6 @@ include 'cabecera.php';
     <title>Triviagmático</title>
     <script src="js/jquery-4.0.0.min.js"></script>
     <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
-
 </head>
 
 <body>
@@ -20,18 +18,16 @@ include 'cabecera.php';
     <div class="container my-5">
         <div class="row justify-content-center align-items-center g-4">
 
-            <!-- Botón Jugar (solo se muestra si está logueado) -->
-            <?php if ($isLoggedIn): ?>
-                <div class="col-12 col-lg-5 col-xl-4">
+            <!-- Botón Jugar (oculto por defecto, JS lo muestra si hay sesión) -->
+            <div class="col-12 col-lg-5 col-xl-4 d-none" id="colBotonJugar">
                 <a href="buscadorSala.php" class="btn btn-play-kahoot" id="btnJugar">
                     <i class="fa-solid fa-play"></i>
                     <span>¡JUGAR!</span>
                 </a>
             </div>
-            <?php endif; ?>
 
             <!-- Ranking -->
-            <div class="col-12 <?= $isLoggedIn ? 'col-lg-7 col-xl-8' : 'col-lg-8' ?>">
+            <div class="col-12 col-lg-8" id="colRanking">
                 <div class="card ranking-card">
                     <div class="ranking-header">
                         <h3 class="m-0"><i class="fa-solid fa-trophy me-2"></i> RANKING GLOBAL DE JUGADORES</h3>

js/buscadorSala.js

@@ -210,114 +210,88 @@ $.ajax({
 function mostrarSala(partida, equipos, jugadores) {
 
     const contenedor = $("#contenedorSalas");
-
     let equiposHTML = "";
 
     equipos.forEach(function (equipo) {
 
         const jugadoresEquipo = jugadores.filter(function (jugador) {
-
             return jugador.idEquipo == equipo.idEquipo;
-
         });
 
         let jugadoresHTML = "";
 
         if (jugadoresEquipo.length > 0) {
-
             jugadoresEquipo.forEach(function (jugador) {
-
                 jugadoresHTML += `
                     <div class="jugador">
-
-                    <span class="avatar">
-                        👤
-                    </span>
-
+                        <span class="avatar">👤</span>
                         ${escapeHTML(jugador.nombreUsuario)}
-
                     </div>
                 `;
             });
-
         } else {
-
             jugadoresHTML = `
-            <div class="text-muted small">
-                Sin jugadores
-            </div>
+                <div class="text-muted small">Sin jugadores</div>
             `;
         }
 
-
         let botonUnirseHTML = "";
 
         if (!usuarioYaEstaEnEquipo) {
-
             botonUnirseHTML = `
                 <button
                     type="button"
-                class="btn btn-unirse w-100 btn-unirse-equipo"
+                    class="btn btn-unirse w-100 btn-unirse-equipo mt-2"
                     data-id-partida="${partida.idPartida}"
                     data-id-equipo="${equipo.idEquipo}">
-
                     Unirse
-
                 </button>
             `;
         }
 
-
         equiposHTML += `
-        <div class="equipo">
-
-            <h6>
-                ${escapeHTML(equipo.nombreEquipo)}
-            </h6>
-
-            <div class="jugadores">
-
+            <div class="equipo me-2 ms-2 p-3 border rounded">
+                <h6>${escapeHTML(equipo.nombreEquipo)}</h6>
+                <div class="jugadores mb-2">
                     ${jugadoresHTML}
-
                 </div>
-
                 ${botonUnirseHTML}
-
             </div>
         `;
     });
 
+    // Zona de acciones adicionales si el usuario YA está dentro de esta sala
+    let accionesSalaHTML = "";
+    if (usuarioYaEstaEnEquipo) {
+        accionesSalaHTML = `
+            <div class="sala-acciones text-center mt-4 pt-3 border-top d-flex justify-content-center gap-3">
+                <button type="button" class="btn btn-outline-danger btn-abandonar-sala" data-id-partida="${partida.idPartida}">
+                    Abandonar sala
+                </button>
+                <a href="juego.php?idPartida=${partida.idPartida}" class="btn btn-success btn-lg px-4">
+                    🎮 ¡Iniciar Partida!
+                </a>
+            </div>
+        `;
+    }
 
     const salaHTML = `
         <div class="col-12 col-md-10 col-lg-8">
-
-        <div class="sala">
-
-            <div class="sala-header">
-
+            <div class="sala card p-3 shadow-sm">
+                <div class="sala-header h4 text-center mb-3">
                     ${escapeHTML(partida.nombrePartida)}
-
                 </div>
-
                 <div class="sala-body">
-
-                <div class="equipos">
-
+                    <div class="equipos d-flex justify-content-around">
                         ${equiposHTML}
-
                     </div>
-
+                    ${accionesSalaHTML}
                 </div>
-
             </div>
-
         </div>
     `;
 
-
     contenedor.append(salaHTML);
-
-
 }
 
 // ======================================================
@@ -632,3 +606,42 @@ function () {
 
 
 );
+
+
+// ======================================================
+// ABANDONAR SALA
+// ======================================================
+$(document).on("click", ".btn-abandonar-sala", function () {
+    if (!confirm("¿Estás seguro de que deseas salir de esta sala?")) {
+        return;
+    }
+
+    const boton = $(this);
+    boton.prop("disabled", true).text("Saliendo...");
+
+    $.ajax({
+        url: "controladores/ControladorEquipoxUsuario.php",
+        type: "POST",
+        dataType: "json",
+        data: {
+            orden: "salirDeSala" // Asegúrate de procesar esta 'orden' en tu PHP
+        },
+        success: function (respuesta) {
+            if (respuesta.error) {
+                alert(respuesta.error);
+                boton.prop("disabled", false).text("Abandonar sala");
+                return;
+            }
+
+            // Restablecemos el estado y recargamos la lista completa de salas
+            usuarioYaEstaEnEquipo = false;
+            $("#contenedorCrearSala").show();
+            cargarSalas();
+        },
+        error: function (xhr, status, error) {
+            console.error("Error al salir de la sala:", error);
+            alert("No se pudo salir de la sala.");
+            boton.prop("disabled", false).text("Abandonar sala");
+        }
+    });
+});

js/cabecera.js

@@ -1,26 +1,99 @@
+// Función de escape colocada arriba para evitar el ReferenceError
+function escapeHTML(str) {
+  return $("<div>").text(str ?? "").html();
+}
+
+// Comprobar estado de sesión al cargar la página
+$(document).ready(function () {
+  comprobarSesion();
+});
+
+
+// Comprobar estado de sesión al cargar la página
+function comprobarSesion() {
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: { orden: "comprobarSesion" },
+  }).done(function (respuesta) {
+    try {
+      if (typeof respuesta === "string") {
+        respuesta = JSON.parse(respuesta);
+      }
+      
+      const contenedor = $("#contenedorUsuarioCabecera");
+      contenedor.empty();
+
+      if (respuesta.activa && respuesta.usuario) {
+        // 1. Renderizar Menú de Usuario en la Cabecera
+        const htmlUsuario = `
+          <div class="dropdown">
+            <button class="btn user-dropdown-btn dropdown-toggle d-flex align-items-center gap-2"
+                    type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="fa-solid fa-circle-user fa-lg text-warning"></i>
+              <span>${escapeHTML(respuesta.usuario.nombreUsuario)}</span>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end user-dropdown-menu" aria-labelledby="userDropdown">
+              <li>
+                <a class="dropdown-item d-flex align-items-center gap-2" href="perfil.php">
+                  <i class="fa-solid fa-user text-primary"></i> Perfil
+                </a>
+              </li>
+              <li><hr class="dropdown-divider"></li>
+              <li>
+                <a class="dropdown-item logout-item d-flex align-items-center gap-2" href="#" id="botonCerrarSesion">
+                  <i class="fa-solid fa-right-from-bracket"></i> Cerrar Sesión
+                </a>
+              </li>
+            </ul>
+          </div>
+        `;
+        contenedor.html(htmlUsuario);
+
+        // 2. Muestra el botón JUGAR y ajusta columnas
+        $("#colBotonJugar").removeClass("d-none");
+        $("#colRanking").removeClass("col-lg-8").addClass("col-lg-7 col-xl-8");
+
+      } else {
+        // 1. Renderizar Botones de Invitado
+        const htmlInvitado = `
+          <button type="button" class="btn btn-kahoot-login rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalLogin">
+            <i class="fa-solid fa-right-to-bracket me-1"></i> Iniciar Sesión
+          </button>
+          <button type="button" class="btn btn-kahoot-register rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalRegistro">
+            <i class="fa-solid fa-user-plus me-1"></i> Registrarse
+          </button>
+        `;
+        contenedor.html(htmlInvitado);
+
+        // 2. Ocultar el botón JUGAR y expandir ranking
+        $("#colBotonJugar").addClass("d-none");
+        $("#colRanking").removeClass("col-lg-7 col-xl-8").addClass("col-lg-8");
+      }
+    } catch (e) {
+      console.error("Error al procesar la respuesta de la sesión:", e);
+    }
+  });
+}
+
 // Registro
 $("#botonAceptarRegistro").click(function (event) {
   event.preventDefault();
-  console.log("hola");
   let nombreUsuario = $("#regNombre").val().trim();
   let email = $("#regEmail").val().trim();
   let contrasena = $("#regPassword").val();
   let contrasenaConfirmacion = $("#regPasswordConfirm").val();
 
-  // Limpiamos errores anteriores
   $("#regNombre").removeClass("is-invalid");
   $("#regEmail").removeClass("is-invalid");
   $("#regPassword").removeClass("is-invalid");
   $("#regPasswordConfirm").removeClass("is-invalid");
   $("#errorRegistro").text("");
 
-  // Comprobamos que las contraseñas coincidan
   if (contrasena !== contrasenaConfirmacion) {
     $("#regPassword").addClass("is-invalid");
     $("#regPasswordConfirm").addClass("is-invalid");
-
     $("#errorRegistro").text("Las contraseñas no coinciden.");
-
     return;
   }
 
@@ -34,30 +107,25 @@ $("#botonAceptarRegistro").click(function (event) {
       orden: "registrarUsuario",
     },
   }).done(function (respuesta) {
-    //console.log(respuesta);
-    respuesta = JSON.parse(respuesta);
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
     if (respuesta.error) {
       $("#errorRegistro").text(respuesta.error);
-
-      // Marcamos los campos si hay error
       $("#regNombre").addClass("is-invalid");
       $("#regEmail").addClass("is-invalid");
     } else {
-      // Registro correcto
       $("#errorRegistro")
         .removeClass("text-danger")
         .addClass("text-success")
         .text(respuesta.exito);
 
-      // Limpiamos formulario
       $("#formRegistro")[0].reset();
 
-      // Cerramos modal después de un segundo
       setTimeout(function () {
         location.reload();
       }, 1000);
     }
-  }); // Fin función ajax
+  });
 });
 
 // Login
@@ -67,23 +135,14 @@ $("#botonAceptarLogin").click(function (event) {
   let email = $("#loginEmail").val().trim();
   let contrasena = $("#loginPassword").val();
 
-  // Limpiamos errores anteriores
   $("#loginEmail").removeClass("is-invalid");
   $("#loginPassword").removeClass("is-invalid");
   $("#errorLogin").text("");
 
-  // Comprobación básica
   if (email === "" || contrasena === "") {
     $("#errorLogin").text("Todos los campos son obligatorios.");
-
-    if (email === "") {
-      $("#loginEmail").addClass("is-invalid");
-    }
-
-    if (contrasena === "") {
-      $("#loginPassword").addClass("is-invalid");
-    }
-
+    if (email === "") $("#loginEmail").addClass("is-invalid");
+    if (contrasena === "") $("#loginPassword").addClass("is-invalid");
     return;
   }
 
@@ -96,38 +155,145 @@ $("#botonAceptarLogin").click(function (event) {
       orden: "comprobarUsuario",
     },
   }).done(function (respuesta) {
-    //console.log(respuesta);
-    respuesta = JSON.parse(respuesta);
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
     if (respuesta.error) {
       $("#loginEmail").addClass("is-invalid");
       $("#loginPassword").addClass("is-invalid");
-
       $("#errorLogin").text(respuesta.error);
     } else {
       location.reload();
     }
-  }); // Fin función ajax
+  });
 });
 
 // Cerrar sesión
-$("#botonCerrarSesion").click(function (event) {
+$(document).on("click", "#botonCerrarSesion", function (event) {
   event.preventDefault();
 
   $.ajax({
     method: "POST",
     url: "controladores/controladorUsuario.php",
-    data: {
-      orden: "cerrarSesion",
-    },
+    data: { orden: "cerrarSesion" },
   }).done(function (respuesta) {
-    //console.log(respuesta);
-    respuesta = JSON.parse(respuesta);
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
     if (respuesta.error) {
       console.log(respuesta.error);
     } else {
-      // Sesión cerrada correctamente
-      window.location.href = 'index.php';
-
+      window.location.href = "index.php";
     }
-  }); // Fin función ajax
-}); // Fin función click
+  });
+});
+
+// Registro
+$("#botonAceptarRegistro").click(function (event) {
+  event.preventDefault();
+  let nombreUsuario = $("#regNombre").val().trim();
+  let email = $("#regEmail").val().trim();
+  let contrasena = $("#regPassword").val();
+  let contrasenaConfirmacion = $("#regPasswordConfirm").val();
+
+  $("#regNombre").removeClass("is-invalid");
+  $("#regEmail").removeClass("is-invalid");
+  $("#regPassword").removeClass("is-invalid");
+  $("#regPasswordConfirm").removeClass("is-invalid");
+  $("#errorRegistro").text("");
+
+  if (contrasena !== contrasenaConfirmacion) {
+    $("#regPassword").addClass("is-invalid");
+    $("#regPasswordConfirm").addClass("is-invalid");
+    $("#errorRegistro").text("Las contraseñas no coinciden.");
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      nombreUsuario: nombreUsuario,
+      email: email,
+      contrasena: contrasena,
+      orden: "registrarUsuario",
+    },
+  }).done(function (respuesta) {
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
+    if (respuesta.error) {
+      $("#errorRegistro").text(respuesta.error);
+      $("#regNombre").addClass("is-invalid");
+      $("#regEmail").addClass("is-invalid");
+    } else {
+      $("#errorRegistro")
+        .removeClass("text-danger")
+        .addClass("text-success")
+        .text(respuesta.exito);
+
+      $("#formRegistro")[0].reset();
+
+      setTimeout(function () {
+        location.reload();
+      }, 1000);
+    }
+  });
+});
+
+// Login
+$("#botonAceptarLogin").click(function (event) {
+  event.preventDefault();
+
+  let email = $("#loginEmail").val().trim();
+  let contrasena = $("#loginPassword").val();
+
+  $("#loginEmail").removeClass("is-invalid");
+  $("#loginPassword").removeClass("is-invalid");
+  $("#errorLogin").text("");
+
+  if (email === "" || contrasena === "") {
+    $("#errorLogin").text("Todos los campos son obligatorios.");
+    if (email === "") $("#loginEmail").addClass("is-invalid");
+    if (contrasena === "") $("#loginPassword").addClass("is-invalid");
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      email: email,
+      contrasena: contrasena,
+      orden: "comprobarUsuario",
+    },
+  }).done(function (respuesta) {
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
+    if (respuesta.error) {
+      $("#loginEmail").addClass("is-invalid");
+      $("#loginPassword").addClass("is-invalid");
+      $("#errorLogin").text(respuesta.error);
+    } else {
+      location.reload();
+    }
+  });
+});
+
+// Cerrar sesión (Usa delegación de eventos por si el botón se crea dinámicamente)
+$(document).on("click", "#botonCerrarSesion", function (event) {
+  event.preventDefault();
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: { orden: "cerrarSesion" },
+  }).done(function (respuesta) {
+    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+
+    if (respuesta.error) {
+      console.log(respuesta.error);
+    } else {
+      window.location.href = "index.php";
+    }
+  });
+});
+
+