archivo .env + conexionBD

buscadorSala.php

@@ -82,8 +82,8 @@
         <div class="modal-content modal-kahoot text-center p-3">
             <div class="modal-body">
                 <div class="mb-3 fs-1">⚠️</div>
-                <h4 class="modal-title mb-2 fw-bold" id="modalAbandonarSalaLabel">¿Abandonar la sala?</h4>
-                <p class="text-dark-50">Si sales de la sala, perderás tu lugar en el equipo.</p>
+                <h4 class="modal-title mb-2 fw-bold text-white" id="modalAbandonarSalaLabel">¿Abandonar la sala?</h4>
+                <p class="text-white-50">Si sales de la sala, perderás tu lugar en el equipo.</p>
             </div>
             <div class="modal-footer justify-content-center border-0 gap-2">
                 <button type="button" class="btn btn-secondary px-4 py-2" data-bs-dismiss="modal">

cabecera.php

@@ -21,8 +21,9 @@
         <div class="collapse navbar-collapse" id="navbarContent">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
 
-            <!-- Contenedor dinámico cargado por js/cabecera.js -->
+            <!-- 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>
@@ -48,6 +49,11 @@
                         <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>
@@ -87,14 +93,7 @@
                         <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>
-                    
-                    <!-- Checkbox Recuérdame -->
-                    <div class="form-check mb-3">
-                        <input class="form-check-input border-dark" type="checkbox" value="" id="recuerdameCheck">
-                        <label class="form-check-label fw-semibold" for="recuerdameCheck">
-                            Recuérdame en 10 días
-                        </label>
-                    </div>
+                    <input type="hidden" name="orden" value="registrar">
                 </form>
                 <div id="errorRegistro" class="text-danger fw-bold mt-2"></div>
             </div>

clases/ClaseCategoria.php

@@ -12,6 +12,40 @@ class Categoria{
         $this->nombreCategoria = $nombreCategoria;
     }
 
+
+    function crear(){
+        $conexion = conexionBD();
+
+        if(is_array($conexion)){
+            return $conexion;
+        }else{
+            try{
+                $consulta = $conexion->prepare("INSERT INTO categoria (nombreCategoria) VALUES (:nombreCategoria)");
+
+                $consulta->bindParam(':nombreCategoria', $this->nombreCategoria);
+
+                $consulta->execute();
+
+                $respuesta = [
+                    'exito' => 'Categoría creada correctamente',
+                    'exito_tecnico' => $this->nombreCategoria
+                ];
+
+                return $respuesta;
+
+            }catch(PDOException $error){
+                $respuesta = [
+                    'error' => 'Ocurrió un error al guardar la categoría.',
+                    'error_tecnico' => $error->getMessage()
+                ];
+
+                $conexion = null;
+                return $respuesta;
+            }
+        }
+    }
+
+
     function listar(){
         $conexion = conexionBD();
 
@@ -39,6 +73,77 @@ class Categoria{
             }
         }
     }
+
+
+    function buscar(){
+        $conexion = conexionBD();
+
+        if(is_array($conexion)){
+            return $conexion;
+        }else{
+            try{
+                $consulta = $conexion->prepare("SELECT * FROM categoria WHERE idCategoria = :idCategoria");
+
+                $consulta->bindParam(':idCategoria', $this->idCategoria);
+
+                $consulta->execute();
+
+                $resultado = $consulta->fetch(PDO::FETCH_ASSOC);
+
+                return $resultado;
+
+            }catch(PDOException $error){
+                $respuesta = [
+                    'error' => 'Ocurrió un error al buscar la categoría.',
+                    'error_tecnico' => $error->getMessage()
+                ];
+
+                $conexion = null;
+                return $respuesta;
+            }
+        }
+    }
+
+
+    function borrar(){
+        $conexion = conexionBD();
+
+        if(is_array($conexion)){
+            return $conexion;
+        }else{
+            try{
+                $consulta = $conexion->prepare("DELETE FROM categoria WHERE idCategoria = :idCategoria");
+
+                $consulta->bindParam(':idCategoria', $this->idCategoria);
+
+                $consulta->execute();
+
+                if($consulta->rowCount() > 0){
+                    $respuesta = [
+                        'exito' => 'Se eliminó correctamente la categoría',
+                        'exito_tecnico' => $this->idCategoria
+                    ];
+                }else{
+                    $respuesta = [
+                        'error' => 'No existe ninguna categoría con ese ID.',
+                        'error_tecnico' => $this->idCategoria
+                    ];
+                }
+
+                return $respuesta;
+
+            }catch(PDOException $error){
+                $respuesta = [
+                    'error' => 'Ocurrió un error al eliminar la categoría.',
+                    'error_tecnico' => $error->getMessage()
+                ];
+
+                $conexion = null;
+                return $respuesta;
+            }
+        }
+    }
+
 }
 
 ?>

clases/ClasePartida.php

@@ -1,4 +1,3 @@
-
 <?php
 require_once __DIR__ . '/../includes/conexionBD.php';
 
@@ -467,25 +466,4 @@ class Partida
             ];
         }
     }
-
-    public function contar()
-    {
-        $conexion = conexionBD();
-        if (is_array($conexion)) {
-            return $conexion;
-        }
-        try {
-            $sql="SELECT COUNT(*) AS total FROM partida";
-            $consulta = $conexion->prepare($sql);
-            $consulta->execute();
-            return (int) $consulta->fetchColumn();
-        } catch (PDOException $error) {
-            return [
-                "error" => "Ocurrió un error al obtener el listado.",
-                'error_tecnico' => $error->getMessage()
-            ];
-        }
-    }
-
-
 }

clases/ClasePregunta.php

@@ -1,4 +1,3 @@
-
 <?php
 require_once __DIR__ . '/../includes/conexionBD.php';
 
@@ -57,23 +56,56 @@ class Pregunta {
         }
     }
 
+    public function cargarRespuestas() {
+        if ($this->idPregunta === null) return;
 
-
-    
-
-    public static function getTodosIds()//devuelve solamente los id de todas las preguntas
-    {
         $conexion = conexionBD();
+
         if (is_array($conexion)) {
             return $conexion;
         }
+
         try {
-            $consulta = $conexion->prepare("SELECT idPregunta FROM pregunta");
-            $consulta->execute();
-            return $consulta->fetchAll(PDO::FETCH_COLUMN);
+            $sql = "SELECT idRespuesta, nombreRespuesta, correcta FROM respuesta WHERE idPregunta = :idPreg";
+            $stmt = $conexion->prepare($sql);
+            $stmt->execute([':idPreg' => $this->idPregunta]);
+            
+            $this->respuestas = $stmt->fetchAll(PDO::FETCH_ASSOC);
+
         } catch (PDOException $error) {
             return [
-                "error" => "Ocurrió un error al obtener el listado.",
+                'error' => 'Ocurrió un error al cargar las respuestas.',
+                'error_tecnico' => $error->getMessage()
+            ];
+        }
+    }
+
+    public static function obtenerPorCategoria(int $idCategoria, int $limite = 10) {
+        $conexion = conexionBD();
+
+        if (is_array($conexion)) {
+            return $conexion;
+        }
+
+        try {
+            $sql = "SELECT * FROM pregunta WHERE idCategoria = :idCat ORDER BY RAND() LIMIT :limite";
+            $stmt = $conexion->prepare($sql);
+            
+            $stmt->bindValue(':idCat', $idCategoria, PDO::PARAM_INT);
+            $stmt->bindValue(':limite', $limite, PDO::PARAM_INT);
+            $stmt->execute();
+
+            $preguntas = [];
+            while ($datos = $stmt->fetch(PDO::FETCH_ASSOC)) {
+                $preg = new Pregunta((int)$datos['idCategoria'], $datos['nombrePregunta'], (int)$datos['idPregunta']);
+                $preg->cargarRespuestas();
+                $preguntas[] = $preg;
+            }
+            return $preguntas;
+
+        } catch (PDOException $error) {
+            return [
+                'error' => 'Ocurrió un error al obtener las preguntas aleatorias.',
                 'error_tecnico' => $error->getMessage()
             ];
         }

clases/ClaseRespuesta.php

@@ -40,6 +40,130 @@ class Respuesta{
             }
         }
     }//fin método insertar
+ 
+    public function listar(){
+        $conexion = conexionBD();
+        if(is_array($conexion)){
+            return $conexion;
+        }else{
+            try{
+                $consulta = $conexion->prepare("SELECT * FROM respuesta");
+                $consulta->execute();
+                return $consulta->fetchAll(PDO::FETCH_ASSOC);
+            }catch(PDOException $error){
+                $respuesta = [
+                    'error' => 'Ocurrió un error al obtener el listado.',
+                    'error_tecnico' => $error->getMessage()
+                ];
+                $conexion = null;
+                return $respuesta;
+            }
+        }
+    }//fin método listar
+ 
+    public function eliminar(){
+        $conexion = conexionBD();
+        if(is_array($conexion)){
+            return $conexion;
+        }else{
+            try{
+                $consulta = $conexion->prepare("DELETE FROM respuesta WHERE idRespuesta=:idRespuesta");
+                $consulta->bindParam(':idRespuesta', $this->idRespuesta);
+                $consulta->execute();
+                $respuesta = [
+                    'exito' => 'La respuesta se eliminó correctamente.',
+                    'exito_tecnico' => $this->idRespuesta
+                ];
+                return $respuesta;
+            }catch(PDOException $error){
+                $respuesta = [
+                    'error' => 'No se pudo eliminar la respuesta.',
+                    'error_tecnico' => $error->getMessage()
+                ];
+                $conexion = null;
+                return $respuesta;
+            }
+        }
+    }//fin método eliminar
+ 
+    public function editar(){
+        $conexion = conexionBD();
+        if(is_array($conexion)){
+            return $conexion;
+        }else{
+            try{
+                $consulta = $conexion->prepare("UPDATE respuesta SET idPregunta=:idPregunta, nombreRespuesta=:nombreRespuesta, correcta=:correcta WHERE idRespuesta=:idRespuesta");
+                $consulta->bindParam(':idRespuesta', $this->idRespuesta);
+                $consulta->bindParam(':idPregunta', $this->idPregunta);
+                $consulta->bindParam(':nombreRespuesta', $this->nombreRespuesta);
+                $consulta->bindParam(':correcta', $this->correcta);
+                $consulta->execute();
+                $respuesta = [
+                    'exito' => 'La respuesta se editó correctamente.',
+                    'exito_tecnico' => $this->idRespuesta
+                ];
+                return $respuesta;
+            }catch(PDOException $error){
+                $respuesta = [
+                    'error' => 'Ocurrió un error al editar la respuesta.',
+                    'error_tecnico' => $error->getMessage()
+                ];
+                $conexion = null;
+                return $respuesta;
+            }
+        }
+    }//fin método editar
+ 
+    public function buscar(){
+        $conexion = conexionBD();
+        if(is_array($conexion)){
+            return $conexion;
+        }else{
+            try{
+                $consulta = $conexion->prepare("SELECT * FROM respuesta WHERE idRespuesta=:idRespuesta");
+                $consulta->bindParam(':idRespuesta', $this->idRespuesta);
+                $consulta->execute();
+                return $consulta->fetchAll(PDO::FETCH_ASSOC);
+            }catch(PDOException $error){
+                $respuesta = [
+                    'error' => 'Ocurrió un error al buscar la respuesta.',
+                    'error_tecnico' => $error->getMessage()
+                ];
+                $conexion = null;
+                return $respuesta;
+            }
+        }
+    }//fin método buscar
+ 
+    public function listarPorPregunta(){//trae todas las respuestas posibles de una pregunta
+        $conexion = conexionBD();
+        if(is_array($conexion)){
+            return $conexion;
+        }else{
+            try{
+                $consulta = $conexion->prepare("SELECT * FROM respuesta WHERE idPregunta=:idPregunta");
+                $consulta->bindParam(':idPregunta', $this->idPregunta);
+                $consulta->execute();
+                $resultado = $consulta->fetchAll(PDO::FETCH_ASSOC);
+                if(!isset($resultado[0])){
+                    $respuesta = [
+                        'error' => 'La pregunta no tiene respuestas.'
+                    ];
+                    return $respuesta;
+                }else{
+                    return $resultado;
+                }
+            }catch(PDOException $error){
+                $respuesta = [
+                    'error' => 'Ocurrió un error al obtener las respuestas de la pregunta.',
+                    'error_tecnico' => $error->getMessage()
+                ];
+                $conexion = null;
+                return $respuesta;
+            }
+        }
+    }//fin método listarPorPregunta
+ 
 }//fin clase
  
 ?>

controladores/ControladorCategoria.php

@@ -6,6 +6,22 @@ require_once '../clases/ClaseCategoria.php';
 
 switch ($_POST['orden']) {
 
+    case 'crearCategoria':
+
+        $nombreCategoria = trim($_POST['nombreCategoria'] ?? '');
+
+        if ($nombreCategoria == '') {
+            echo json_encode(['error' => 'El nombre de la categoría es obligatorio']);
+            break;
+        }
+
+        $categoria = new Categoria(null, $nombreCategoria);
+        $resultado = $categoria->crear();
+
+        echo json_encode($resultado);
+        break;
+
+
     case 'listarCategorias':
 
         $categoria = new Categoria();
@@ -13,4 +29,27 @@ switch ($_POST['orden']) {
 
         echo json_encode($resultado);
         break;
+
+
+    case 'buscarCategoria':
+
+        $idCategoria = intval($_POST['idCategoria'] ?? 0);
+
+        $categoria = new Categoria($idCategoria);
+        $resultado = $categoria->buscar();
+
+        echo json_encode($resultado);
+        break;
+
+
+    case 'borrarCategoria':
+
+        $idCategoria = intval($_POST['idCategoria'] ?? 0);
+
+        $categoria = new Categoria($idCategoria);
+        $resultado = $categoria->borrar();
+
+        echo json_encode($resultado);
+        break;
+
 }

controladores/ControladorEquipo.php

@@ -0,0 +1,55 @@
+<?php
+
+session_start();
+
+require_once '../clases/ClaseEquipo.php';
+
+switch ($_POST['orden']) {
+
+    case 'crearEquipo':
+
+        $nombreEquipo = trim($_POST['nombreEquipo'] ?? '');
+
+        if ($nombreEquipo == '') {
+            echo json_encode(['error' => 'El nombre del equipo es obligatorio']);
+            break;
+        }
+
+        $equipo = new Equipo(null, $nombreEquipo);
+        $resultado = $equipo->crear();
+
+        echo json_encode($resultado);
+        break;
+
+
+    case 'listarEquipos':
+
+        $equipo = new Equipo();
+        $resultado = $equipo->listar();
+
+        echo json_encode($resultado);
+        break;
+
+
+    case 'buscarEquipo':
+
+        $idEquipo = intval($_POST['idEquipo'] ?? 0);
+
+        $equipo = new Equipo($idEquipo);
+        $resultado = $equipo->buscar();
+
+        echo json_encode($resultado);
+        break;
+
+
+    case 'borrarEquipo':
+
+        $idEquipo = intval($_POST['idEquipo'] ?? 0);
+
+        $equipo = new Equipo($idEquipo);
+        $resultado = $equipo->borrar();
+
+        echo json_encode($resultado);
+        break;
+
+}

controladores/ControladorPartida.php

@@ -6,7 +6,6 @@ require_once '../clases/ClasePartida.php';
 require_once '../clases/ClaseEquipo.php';
 require_once '../clases/ClaseEquipoxUsuario.php';
 require_once '../clases/ClaseEquipoxPartida.php';
-require_once '../clases/ClasePregunta.php';
 
 
 switch ($_POST['orden']) {
@@ -120,7 +119,6 @@ switch ($_POST['orden']) {
         }
 
         $idPartida = (int)$resultadoPartida['exito_tecnico'];
-        $partida->idPartida = $idPartida;
 
 
         /*
@@ -213,42 +211,6 @@ switch ($_POST['orden']) {
         }
 
 
-
-
-        /*
-     * ==========================================
-     * 5. ASIGNAMOS 10 PREGUNTAS ALEATORIAS A LA PARTIDA
-     * ==========================================
-     */
-       
-        // Obtenemos todos los IDs de las preguntas
-        
-        $listaPreguntas = Pregunta::getTodosIds();
-
-        $totalPreguntas = count($listaPreguntas);
-
-        // Guardamos las preguntas que ya hemos asignado
-        $preguntasAsignadas = [];
-
-        // Generamos 10 posiciones aleatorias sin repetir
-        while (count($preguntasAsignadas) < 10) {
-
-            // Generamos una posición aleatoria del array
-            $posicionAleatoria = rand(0, $totalPreguntas - 1);
-
-            // Obtenemos el ID real de la pregunta
-            $idPreguntaAleatoria = $listaPreguntas[$posicionAleatoria];
-
-            // Comprobamos que esa pregunta no haya sido asignada ya
-            if (!in_array($idPreguntaAleatoria, $preguntasAsignadas)) {
-                $preguntasAsignadas[] = $idPreguntaAleatoria;
-
-                // Asignamos el ID real de la pregunta a la partida
-                $partida->asignarPregunta($idPreguntaAleatoria);
-            }
-        }//fin shile
-
-
         /*
      * ==========================================
      * TODO CORRECTO
@@ -256,7 +218,7 @@ switch ($_POST['orden']) {
      */
 
         echo json_encode([
-            'exito' => 'Sala creada correctamente. Preguntas preparadas.',
+            'exito' => 'Sala creada correctamente.',
             'idPartida' => $resultadoPartida['exito_tecnico'],
             'idEquipo1' => $equipo1->idEquipo,
             'idEquipo2' => $equipo2->idEquipo

controladores/ControladorPregunta.php

@@ -121,4 +121,33 @@ switch ($_POST['orden']) {
         ]);
 
         break;
+
+
+
+    case 'obtenerPreguntasPorCategoria':
+
+        $idCategoria = intval($_POST['idCategoria'] ?? 0);
+        $limite = intval($_POST['limite'] ?? 10);
+
+        $preguntas = Pregunta::obtenerPorCategoria($idCategoria, $limite);
+
+        // Si ha devuelto un array de errores (formato ['error'=>...]) lo mandamos tal cual
+        if (isset($preguntas['error'])) {
+            echo json_encode($preguntas);
+            break;
+        }
+
+        // Convertimos cada objeto Pregunta en un array simple para poder mandarlo en JSON
+        $listado = [];
+        foreach ($preguntas as $p) {
+            $listado[] = [
+                'idPregunta' => $p->getIdPregunta(),
+                'idCategoria' => $p->getIdCategoria(),
+                'nombrePregunta' => $p->getNombrePregunta(),
+                'respuestas' => $p->getRespuestas()
+            ];
+        }
+
+        echo json_encode($listado);
+        break;
 }

controladores/ControladorRespuesta.php

@@ -0,0 +1,71 @@
+<?php
+
+session_start();
+
+require_once '../clases/ClaseRespuesta.php';
+
+switch ($_POST['orden']) {
+
+    case 'crearRespuesta':
+
+        $idPregunta = intval($_POST['idPregunta'] ?? 0);
+        $nombreRespuesta = trim($_POST['nombreRespuesta'] ?? '');
+        $correcta = intval($_POST['correcta'] ?? 0);
+
+        if ($idPregunta <= 0 || $nombreRespuesta == '') {
+            echo json_encode(['error' => 'La pregunta y el texto de la respuesta son obligatorios']);
+            break;
+        }
+
+        $respuesta = new Respuesta(null, $idPregunta, $nombreRespuesta, $correcta);
+        $resultado = $respuesta->insertar();
+
+        echo json_encode($resultado);
+        break;
+
+
+    case 'listarRespuestas':
+
+        $respuesta = new Respuesta();
+        $resultado = $respuesta->listar();
+
+        echo json_encode($resultado);
+        break;
+
+
+    case 'listarRespuestasPorPregunta':
+
+        $idPregunta = intval($_POST['idPregunta'] ?? 0);
+
+        $respuesta = new Respuesta(null, $idPregunta);
+        $resultado = $respuesta->listarPorPregunta();
+
+        echo json_encode($resultado);
+        break;
+
+
+    case 'editarRespuesta':
+
+        $idRespuesta = intval($_POST['idRespuesta'] ?? 0);
+        $idPregunta = intval($_POST['idPregunta'] ?? 0);
+        $nombreRespuesta = trim($_POST['nombreRespuesta'] ?? '');
+        $correcta = intval($_POST['correcta'] ?? 0);
+
+        $respuesta = new Respuesta($idRespuesta, $idPregunta, $nombreRespuesta, $correcta);
+        $resultado = $respuesta->editar();
+
+        echo json_encode($resultado);
+        break;
+
+
+    case 'borrarRespuesta':
+
+        $idRespuesta = intval($_POST['idRespuesta'] ?? 0);
+
+        $respuesta = new Respuesta($idRespuesta);
+        $resultado = $respuesta->eliminar();
+
+        echo json_encode($resultado);
+        break;
+
+}

controladores/ControladorUsuario.php

@@ -55,11 +55,10 @@ switch ($_POST['orden']) {
 
         if ($resultado instanceof Usuario) {
 
-            // === GUARDAR EN SESIÓN (incluido avatar)===
+            // === AÑADIR ESTAS LÍNEAS PARA GUARDAR EN SESIÓN ===
             $_SESSION['idUsuario'] = $resultado->getIdUsuario();
             $_SESSION['nombreUsuario'] = $resultado->getNombreUsuario();
             $_SESSION['email'] = $resultado->getEmail();
-            $_SESSION['avatar'] = $resultado->getAvatar(); 
             // =================================================
 
             echo json_encode([
@@ -84,7 +83,6 @@ switch ($_POST['orden']) {
         unset($_SESSION['idUsuario']);
         unset($_SESSION['email']);
         unset($_SESSION['nombreUsuario']);
-        unset($_SESSION['avatar']); 
 
         // Destruimos la sesión
         session_destroy();
@@ -94,6 +92,7 @@ switch ($_POST['orden']) {
         ]);
 
         break;
+
     case 'mostrarEstadisticas':
 
         $usuario = Usuario::buscarPorId($_SESSION['idUsuario']);
@@ -243,8 +242,7 @@ switch ($_POST['orden']) {
             'activa' => true,
             'usuario' => [
                 'idUsuario' => $_SESSION['idUsuario'],
-                    'nombreUsuario' => $_SESSION['nombreUsuario'] ?? '',
-                    'avatar' => $_SESSION['avatar'] ?? '' 
+                'nombreUsuario' => $_SESSION['nombreUsuario'] ?? ''
             ]
         ]);
     } else {

css/buscadorSala.css

@@ -68,8 +68,8 @@
 
 .btn-unirse {
     border: none;
-    border-bottom: 3px solid #1f6f09;
-    background-color: #26890c;
+    border-bottom: 3px solid #0c4891;
+    background-color: var(--kahoot-blue);
     color: white;
     font-weight: 600;
     border-radius: 8px;
@@ -105,11 +105,3 @@
     border-color: var(--kahoot-purple);
     box-shadow: 0 0 0 3px rgba(70, 23, 143, 0.15);
 }
-
-.jugador-host {
-    background-color: #fff3cd;
-    border: 1px solid #ffc107;
-    border-radius: 8px;
-    padding: 6px 10px;
-    font-weight: 600;
-}

includes/conexionBD.php

@@ -1,29 +1,26 @@
 <?php
+//CARGA DE ARCHIVOS .ENV CON PHPDOTENV
+require('c:/laragon/vendor/autoload.php');//Se carga el módulo instalado con composer
+$dotenv = Dotenv\Dotenv::createImmutable('c:/laragon/', 'triviagmatico.env');//leemos el archivo. El primer parámetro es la ruta para llegar y el segundo el nombre del archivo .env
+$dotenv->load();
 
 function conexionBD (){
-    // Configuración para Laragon
-    $servidor = "localhost";
-    $bd       = "triviagmatico"; // Asegúrate de que este sea el nombre de tu BD en HeidiSQL / phpMyAdmin
-    $usuario  = "root";
-    $pass     = "";            // Laragon deja la contraseña de root vacía por defecto
-    $puerto   = "3306";
-
     try{
-        $dsn = "mysql:host=$servidor;port=$puerto;dbname=$bd;charset=utf8mb4";
-
-        $opciones = [
+        $servidor = 'mysql:host='.$_ENV['bDatosServer'].';dbname='.$_ENV['bDatos'];
+        $user=$_ENV['bDatosUser'];
+        $password=$_ENV['bDatosPass'];
+        $options=array(
             PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
-            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
-            PDO::ATTR_EMULATE_PREPARES   => false,
-        ];
-
-        return new PDO($dsn, $usuario, $pass, $opciones);
-
-    } catch (PDOException $error) {
-        return [
-            'error'         => 'No se pudo conectar a la base de datos.',
-            'error_tecnico' => $error->getMessage()
-        ];
+            PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"
+        );
+        //Creamos la conexión PDO a la base de datos
+        $pdo = new PDO($servidor, $user, $password, $options);
     }
+    catch(PDOException $e){
+        //$resultado = ['error' => $e->getMessage()];
+        $resultado = ['error' => 'Error Temporal: No se puede conectar con la base de datos.'];
+        return $resultado;
+    }
+    
+    return $pdo;
 }
-?>

index.php

@@ -1,3 +1,7 @@
+<?php
+include 'cabecera.php';
+?>
+
 <!DOCTYPE html>
 <html lang="es-ES">
 
@@ -5,17 +9,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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>
 
-    <?php include 'cabecera.php'; ?>
-
     <div class="container my-5">
         <div class="row justify-content-center align-items-center g-4">
 
-            <!-- Botón Jugar (oculto por defecto, JS lo muestra si hay sesión activa) -->
+            <!-- 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>

js/buscadorSala.js

@@ -123,23 +123,11 @@ function mostrarSala(partida, equipos, jugadores) {
     let jugadoresHTML = "";
     if (jugadoresEquipo.length > 0) {
       jugadoresEquipo.forEach(function (jugador) {
-        const esHost = jugador.idUsuario == partida.idUsuario;
-
         jugadoresHTML += `
-    <div class="jugador border border-2 d-flex align-items-center justify-content-between ${
-      esHost ? "jugador-host" : ""
-    }">
-      <div>
-        <span class="avatar">${esHost ? "👑" : "👤"}</span>
+          <div class="jugador">
+            <span class="avatar">👤</span>
             ${escapeHTML(jugador.nombreUsuario)}
           </div>
-
-      ${
-        esHost
-          ? `<span class="badge bg-warning text-dark ms-2">HOST</span>`
-          : ""
-      }
-    </div>
         `;
       });
     } else {
@@ -150,7 +138,7 @@ function mostrarSala(partida, equipos, jugadores) {
     let botonUnirseHTML = "";
     if (!usuarioYaEstaEnEquipo) {
       botonUnirseHTML = `
-        <button type="button" class="btn-unirse w-100 btn-unirse-equipo mt-2"
+        <button type="button" class="btn btn-unirse w-100 btn-unirse-equipo mt-2"
                 data-id-partida="${partida.idPartida}"
                 data-id-equipo="${equipo.idEquipo}">
           Unirse
@@ -169,34 +157,17 @@ function mostrarSala(partida, equipos, jugadores) {
     `;
   });
 
-  // Acciones disponibles si el usuario YA ESTÁ dentro de esta sala
   // Acciones disponibles si el usuario YA ESTÁ dentro de esta sala
   let accionesSalaHTML = "";
-
   if (usuarioYaEstaEnEquipo) {
-    let botonIniciarHTML = "";
-
-    // Solo el host puede iniciar la partida
-    if (partida.idUsuario == idUsuarioSesion) {
-      botonIniciarHTML = `
-      <a href="juego.php?idPartida=${partida.idPartida}" 
-         class="btn btn-success btn-lg px-4">
-        🎮 ¡Iniciar Partida!
-      </a>
-    `;
-    }
-
     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}">
+        <button type="button" class="btn btn-outline-danger btn-abandonar-sala" data-id-partida="${partida.idPartida}">
           Abandonar sala
         </button>
-
-      ${botonIniciarHTML}
-
+        <a href="juego.php?idPartida=${partida.idPartida}" class="btn btn-success btn-lg px-4">
+          🎮 ¡Iniciar Partida!
+        </a>
       </div>
     `;
   }
@@ -204,7 +175,7 @@ function mostrarSala(partida, equipos, jugadores) {
   const salaHTML = `
     <div class="col-12 col-md-10 col-lg-8">
       <div class="sala card p-3 shadow-sm mb-4">
-        <div class="sala-header h4 text-center mb-3 text-white">
+        <div class="sala-header h4 text-center mb-3">
           ${escapeHTML(partida.nombrePartida)}
         </div>
         <div class="sala-body">
@@ -263,15 +234,13 @@ let botonAbandonarReferencia = null;
 // A. Al hacer clic en el botón "Abandonar sala" de la tarjeta, abrimos el modal
 $(document).on("click", ".btn-abandonar-sala", function () {
   botonAbandonarReferencia = $(this);
-  const modal = new bootstrap.Modal(
-    document.getElementById("modalAbandonarSala"),
-  );
+  const modal = new bootstrap.Modal(document.getElementById('modalAbandonarSala'));
   modal.show();
 });
 
 // B. Al hacer clic en "Sí, salir" dentro del modal Kahoot
 $(document).on("click", "#btnConfirmarAbandonar", function () {
-  const modalEl = document.getElementById("modalAbandonarSala");
+  const modalEl = document.getElementById('modalAbandonarSala');
   const modalInstance = bootstrap.Modal.getInstance(modalEl);
 
   const btnConfirmar = $(this);
@@ -306,7 +275,7 @@ $(document).on("click", "#btnConfirmarAbandonar", function () {
       if (modalInstance) {
         modalInstance.hide();
       }
-    },
+    }
   });
 });
 // 8. Evento: Crear Sala

js/cabecera.js

@@ -1,217 +1,275 @@
-let idUsuarioSesion = null;
-
 $(document).ready(function () {
-    // Comprobar la sesión activa al cargar la página
-    comprobarEstadoSesion();
-
-    // Evento Click: Login
-    $('#botonAceptarLogin').on('click', function () {
-        ejecutarLogin();
+  comprobarSesion();
 });
 
-    // Permitir Submit con tecla Enter en el formulario de Login
-    $('#formLogin').on('submit', function (e) {
-        e.preventDefault();
-        ejecutarLogin();
-    });
+// Función auxiliar para escapar texto HTML y evitar XSS
+function escapeHTML(str) {
+  return $("<div>").text(str ?? "").html();
+}
 
-    // Evento Click: Registro
-    $('#botonAceptarRegistro').on('click', function () {
-        ejecutarRegistro();
-    });
-
-    // Permitir Submit con tecla Enter en el formulario de Registro
-    $('#formRegistro').on('submit', function (e) {
-        e.preventDefault();
-        ejecutarRegistro();
-    });
-});
-
-/**
- * Comprueba con el servidor si existe una sesión PHP
- */
-function comprobarEstadoSesion() {
+// Comprobar estado de sesión al cargar la página
+function comprobarSesion() {
   $.ajax({
-        url: 'controladores/controladorUsuario.php',
-        type: 'POST',
-        dataType: 'json',
-        data: { orden: 'comprobarSesion' },
-        success: function (respuesta) {
-            if (respuesta.activa) {
-                idUsuarioSesion = respuesta.usuario.idUsuario;
-                renderizarCabeceraConSesion(respuesta.usuario);
-                $('#colBotonJugar').removeClass('d-none');
-            } else {
-                renderizarCabeceraSinSesion();
-                $('#colBotonJugar').addClass('d-none');
-            }
-        },
-        error: function () {
-            renderizarCabeceraSinSesion();
-        }
-    });
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: { orden: "comprobarSesion" },
+  }).done(function (respuesta) {
+    try {
+      if (typeof respuesta === "string") {
+        respuesta = JSON.parse(respuesta);
       }
 
-/**
- * Petición AJAX para iniciar sesión
- */
-function ejecutarLogin() {
-    let email = $('#loginEmail').val().trim();
-    let contrasena = $('#loginPassword').val().trim();
-    $('#errorLogin').text('');
+      const contenedor = $("#contenedorUsuarioCabecera");
+      contenedor.empty();
 
-    if (email === '' || contrasena === '') {
-        $('#errorLogin').text('Por favor, rellena todos los campos.');
-        return;
-    }
-
-    $.ajax({
-        url: 'controladores/controladorUsuario.php',
-        type: 'POST',
-        dataType: 'json',
-        data: {
-            orden: 'comprobarUsuario',
-            email: email,
-            contrasena: contrasena
-        },
-        success: function (respuesta) {
-            if (respuesta.error) {
-                $('#errorLogin').text(respuesta.error);
-            } else if (respuesta.exito) {
-                $('#modalLogin').modal('hide');
-                $('#formLogin')[0].reset();
-
-                // Cargar datos de la sesión actualizados 
-                comprobarEstadoSesion();
-            }
-        },
-        error: function () {
-            $('#errorLogin').text('Error al conectar con el servidor.');
-        }
-    });
-}
-
-/**
- * Petición AJAX para registrar un usuario
- */
-function ejecutarRegistro() {
-    let nombre = $('#regNombre').val().trim();
-    let email = $('#regEmail').val().trim();
-    let pass = $('#regPassword').val().trim();
-    let passConfirm = $('#regPasswordConfirm').val().trim();
-
-    $('#errorRegistro').text('');
-
-    if (nombre === '' || email === '' || pass === '') {
-        $('#errorRegistro').text('Todos los campos son obligatorios.');
-        return;
-    }
-
-    if (pass !== passConfirm) {
-        $('#errorRegistro').text('Las contraseñas no coinciden.');
-        return;
-    }
-
-    $.ajax({
-        url: 'controladores/controladorUsuario.php',
-        type: 'POST',
-        dataType: 'json',
-        data: {
-            orden: 'registrarUsuario',
-            nombreUsuario: nombre,
-            email: email,
-            contrasena: pass
-        },
-        success: function (respuesta) {
-            if (respuesta.error) {
-                $('#errorRegistro').text(respuesta.error);
-            } else {
-                $('#modalRegistro').modal('hide');
-                $('#formRegistro')[0].reset();
-
-                // Autologin tras registrarse
-                $('#loginEmail').val(email);
-                $('#loginPassword').val(pass);
-                ejecutarLogin();
-            }
-        },
-        error: function () {
-            $('#errorRegistro').text('Error al procesar el registro.');
-        }
-    });
-}
-
-/**
- * Petición AJAX para cerrar la sesión
- */
-function cerrarSesion() {
-    $.ajax({
-        url: 'controladores/controladorUsuario.php',
-        type: 'POST',
-        dataType: 'json',
-        data: { orden: 'cerrarSesion' },
-        success: function () {
-            renderizarCabeceraSinSesion();
-            $('#colBotonJugar').addClass('d-none');
-
-            if (window.location.pathname.includes('perfil.php') || window.location.pathname.includes('buscadorSala.php')) {
-                window.location.href = 'index.php';
-            }
-        }
-    });
-}
-
-/**
- * Renderiza la cabecera cuando HAY sesión iniciada 
- */
-function renderizarCabeceraConSesion(usuario) {
-    //Mete el avatar en cabecera
-    let avatarImg = (usuario.avatar && usuario.avatar !== '') 
-        ? usuario.avatar 
-        : 'img/avatars/defaultProfile.jpeg';
-
-    // Refrescar avatar si se cambia
-    let avatarConCacheBuster = avatarImg + '?v=' + new Date().getTime();
-
-    let html = `
+      if (respuesta.activa && respuesta.usuario) {
+        // Usuario autenticado: Mostrar Menú Dropdown
+        const htmlUsuario = `
           <div class="dropdown">
-            <button class="btn btn-outline-light dropdown-toggle d-flex align-items-center gap-2 rounded-pill px-3 py-1 fw-bold" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
-                <img src="${avatarConCacheBuster}" alt="Avatar" class="rounded-circle border" style="width: 32px; height: 32px; object-fit: cover;">
-                <span>${escapeHtml(usuario.nombreUsuario)}</span>
+            <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 shadow border-0 mt-2" aria-labelledby="userMenu">
+            <ul class="dropdown-menu dropdown-menu-end user-dropdown-menu" aria-labelledby="userDropdown">
               <li>
-                    <a class="dropdown-item py-2 fw-semibold" href="perfil.php">
-                        <i class="fa-solid fa-user me-2 text-primary"></i>Mi Perfil
+                <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>
-                    <button class="dropdown-item py-2 fw-semibold text-danger" onclick="cerrarSesion()">
-                        <i class="fa-solid fa-right-from-bracket me-2"></i>Cerrar Sesión
-                    </button>
+                <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>
         `;
-    $('#contenedorUsuarioCabecera').html(html);
+        contenedor.html(htmlUsuario);
+
+        // Si estamos en la página principal, mostramos el botón JUGAR
+        if ($("#colBotonJugar").length) {
+          $("#colBotonJugar").removeClass("d-none");
+          $("#colRanking").removeClass("col-lg-8").addClass("col-lg-7 col-xl-8");
         }
 
-/**
- * Renderiza los botones en la cabecera cuando NO hay sesión (Iniciar sesión azul)
- */
-function renderizarCabeceraSinSesion() {
-    let html = `
-        <button class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalLogin">
-            <i class="fa-solid fa-right-to-bracket me-1"></i> Iniciar sesión
+      } else {
+        // No hay sesión: Mostrar botones de Login y Registro
+        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 class="btn btn-success rounded-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalRegistro">
+          <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>
         `;
-    $('#contenedorUsuarioCabecera').html(html);
+        contenedor.html(htmlInvitado);
+
+        // Si estamos en la página principal, ocultamos el botón JUGAR
+        if ($("#colBotonJugar").length) {
+          $("#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);
+    }
+  });
 }
 
-function escapeHtml(texto) {
-    return $('<div>').text(texto).html();
+// Evento 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);
+    }
+  });
+});
+
+// Evento 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();
+    }
+  });
+});
+
+// Evento Cerrar sesión (usa delegación de eventos por crearse 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";
+    }
+  });
+});
+
+// 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: { 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";
+    }
+  });
+});

js/lobbyDummy.js

@@ -0,0 +1,210 @@
+// ============================================
+// DATOS DE PRUEBA
+// ============================================
+
+const salas = [
+    {
+        id: 1,
+        nombre: "Sala Principal",
+        equipos: [
+            {
+                id: 1,
+                nombre: "Equipo 1",
+                jugadores: [
+                    "Carlos",
+                    "María"
+                ]
+            },
+            {
+                id: 2,
+                nombre: "Equipo 2",
+                jugadores: [
+                    "Jorge"
+                ]
+            }
+        ]
+    },
+
+    {
+        id: 2,
+        nombre: "Los Trivialeros",
+        equipos: [
+            {
+                id: 3,
+                nombre: "Equipo Rojo",
+                jugadores: [
+                    "Ana",
+                    "Pedro",
+                    "Lucía"
+                ]
+            },
+            {
+                id: 4,
+                nombre: "Equipo Azul",
+                jugadores: [
+                    "David",
+                    "Laura"
+                ]
+            }
+        ]
+    },
+
+    {
+        id: 3,
+        nombre: "Partida rápida",
+        equipos: [
+            {
+                id: 5,
+                nombre: "Equipo 1",
+                jugadores: [
+                    "Miguel"
+                ]
+            },
+            {
+                id: 6,
+                nombre: "Equipo 2",
+                jugadores: []
+            }
+        ]
+    },
+
+    {
+        id: 4,
+        nombre: "Noche de Trivial",
+        equipos: [
+            {
+                id: 7,
+                nombre: "Los quesitos",
+                jugadores: [
+                    "Pablo",
+                    "Sara"
+                ]
+            },
+            {
+                id: 8,
+                nombre: "Los cerebritos",
+                jugadores: [
+                    "Mario",
+                    "Elena",
+                    "Álvaro"
+                ]
+            }
+        ]
+    }
+];
+
+
+// ============================================
+// MOSTRAR SALAS
+// ============================================
+
+function mostrarSalas(salas) {
+
+    const contenedor = document.getElementById("contenedorSalas");
+
+    contenedor.innerHTML = "";
+
+    salas.forEach(sala => {
+
+        const columna = document.createElement("div");
+
+        columna.className = "col-12 col-md-6 col-xl-5";
+
+
+        columna.innerHTML = `
+
+            <div class="sala">
+
+                <div class="sala-header">
+                    ${sala.nombre}
+                </div>
+
+
+                <div class="sala-body">
+
+                    <div class="equipos">
+
+                        ${crearEquipo(sala, sala.equipos[0])}
+
+                        ${crearEquipo(sala, sala.equipos[1])}
+
+                    </div>
+
+                </div>
+
+            </div>
+
+        `;
+
+        contenedor.appendChild(columna);
+    });
+}
+
+
+
+// ============================================
+// CREAR EQUIPO
+// ============================================
+
+function crearEquipo(sala, equipo) {
+
+    let jugadoresHTML = "";
+
+    equipo.jugadores.forEach(jugador => {
+
+        jugadoresHTML += `
+            <div class="jugador">
+                <span class="avatar">👤</span>
+                ${jugador}
+            </div>
+        `;
+    });
+
+
+    return `
+
+        <div class="equipo">
+
+            <h6>
+                ${equipo.nombre}
+            </h6>
+
+            <div class="jugadores">
+
+                ${jugadoresHTML}
+
+            </div>
+
+            <button
+                type="button"
+                class="btn btn-unirse"
+                onclick="unirseEquipo(${sala.id}, ${equipo.id})">
+
+                Unirse
+
+            </button>
+
+        </div>
+
+    `;
+}
+
+function unirseEquipo(idSala, idEquipo) {
+
+    console.log("Sala:", idSala);
+    console.log("Equipo:", idEquipo);
+
+    alert(
+        "Has pulsado unirse al equipo " +
+        idEquipo +
+        " de la sala " +
+        idSala
+    );
+}
+
+
+// ============================================
+// CARGAR DATOS DE PRUEBA
+// ============================================
+
+mostrarSalas(salas);

js/perfil.js

@@ -26,10 +26,6 @@ $.ajax({
 function cambiarNombre() {
   let nuevoNombre = $("#nuevoNombre").val().trim();
 
-  if (nuevoNombre === "") {
-    return;
-  }
-
   $.ajax({
     method: "POST",
     url: "controladores/controladorUsuario.php",
@@ -46,13 +42,8 @@ function cambiarNombre() {
       // Actualizamos el nombre mostrado en la página
       $("#nombre").text(respuesta.nombreUsuario);
 
-      
+      // Limpiamos el input
       $("#nuevoNombre").val("");
-
-    
-      if (typeof comprobarEstadoSesion === "function") {
-        comprobarEstadoSesion();
-      }
     }
   });
 }
@@ -83,11 +74,14 @@ $("#inputFoto").change(function () {
   // Comprobamos que sea una imagen
   if (!archivo.type.startsWith("image/")) {
     alert("El archivo seleccionado no es una imagen.");
+
     $("#inputFoto").val("");
+
     return;
   }
 
   let datos = new FormData();
+
   datos.append("avatar", archivo);
   datos.append("orden", "cambiarAvatar");
 
@@ -103,23 +97,18 @@ $("#inputFoto").change(function () {
     if (respuesta.error) {
       alert(respuesta.error);
     } else {
-      // Actualizamos la imagen en la página de perfil sin recargar
+      // Actualizamos la imagen sin recargar la página
       $("#fotoPerfil").attr(
         "src",
-        respuesta.avatar + "?t=" + new Date().getTime()
+        respuesta.avatar + "?t=" + new Date().getTime(),
       );
-
-      // Actualizamos también el avatar superior en la cabecera 
-      if (typeof comprobarEstadoSesion === "function") {
-        comprobarEstadoSesion();
-      }
     }
   });
 });
 
 // =========================
 // RECOGER CATEGORIAS
-// =========================
+// ====
 
 $("#modalCrearPregunta").on("show.bs.modal", function () {
   const selectCategoria = $("#idCategoria");
@@ -152,14 +141,16 @@ $("#modalCrearPregunta").on("show.bs.modal", function () {
           $("<option>", {
             value: categoria.idCategoria,
             text: categoria.nombreCategoria,
-          })
+          }),
         );
       });
     },
 
     error: function (xhr, status, error) {
       console.error("Error al cargar las categorías:", error);
+
       console.error("Respuesta del servidor:", xhr.responseText);
+
       alert("No se han podido cargar las categorías.");
     },
   });
@@ -167,7 +158,7 @@ $("#modalCrearPregunta").on("show.bs.modal", function () {
 
 // =========================
 // CREAR PREGUNTA
-// =========================
+// ====
 
 $("#formCrearPregunta").on("submit", function (e) {
   e.preventDefault();
@@ -197,15 +188,24 @@ $("#formCrearPregunta").on("submit", function (e) {
 
   $.ajax({
     url: "controladores/controladorPregunta.php",
+
     type: "POST",
+
     dataType: "json",
+
     data: {
       orden: "crearPregunta",
+
       idCategoria: $("#idCategoria").val(),
+
       nombrePregunta: pregunta,
+
       respuestaCorrecta: respuestaCorrecta,
+
       respuestaIncorrecta1: respuestaIncorrecta1,
+
       respuestaIncorrecta2: respuestaIncorrecta2,
+
       respuestaIncorrecta3: respuestaIncorrecta3,
     },
 
@@ -214,8 +214,10 @@ $("#formCrearPregunta").on("submit", function (e) {
 
       if (respuesta.error) {
         alert(respuesta.error);
+
         boton.prop("disabled", false);
         boton.text("Crear pregunta");
+
         return;
       }
 
@@ -231,12 +233,17 @@ $("#formCrearPregunta").on("submit", function (e) {
         // Volvemos a activar el botón
         boton.prop("disabled", false);
         boton.text("Crear pregunta");
+
+        // Si tienes que actualizar la lista de preguntas:
+        // cargarPreguntas();
       }
     },
 
     error: function (xhr, status, error) {
       console.error("Error al crear la pregunta:", error);
+
       console.error("Respuesta del servidor:", xhr.responseText);
+
       alert("No se ha podido crear la pregunta.");
 
       boton.prop("disabled", false);

triviagmatico.env

@@ -0,0 +1,6 @@
+bDatosServer="localhost"
+bDatos="triviagmatico"
+bDatosUser="root"
+bDatosPass=""
+urlBase="http://triviagmatico.test"
+dirBase="C:/laragon/www/triviagmatico"