3 Commits

Author SHA1 Message Date
Isaac c8c0792bd7 Más funcionalidades de host 2026-09-29 11:27:18 +02:00
Isaac 534c20a45d Eliminar Sala (Se ejecuta cuando el host abandona la sala)
He modificado salirDeSala() de ClaseEquipoxUsuario.php
2026-09-29 11:25:56 +02:00
Isaac 94bfe480cb Arreglado iconos bootstrap 2026-09-29 10:11:25 +02:00
5 changed files with 207 additions and 79 deletions
+17 -16
View File
@@ -7,6 +7,7 @@
<title>Trivial - Lobby</title> <title>Trivial - Lobby</title>
<link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg"> <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/buscadorSala.css"> <link rel="stylesheet" href="css/buscadorSala.css">
</head> </head>
@@ -77,25 +78,25 @@
</div> </div>
<!--MODAL ABANDONAR SALA --> <!--MODAL ABANDONAR SALA -->
<!-- Modal Confirmar Abandonar Sala --> <!-- Modal Confirmar Abandonar Sala -->
<div class="modal fade" id="modalAbandonarSala" tabindex="-1" aria-labelledby="modalAbandonarSalaLabel" aria-hidden="true"> <div class="modal fade" id="modalAbandonarSala" tabindex="-1" aria-labelledby="modalAbandonarSalaLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content modal-kahoot text-center p-3"> <div class="modal-content modal-kahoot text-center p-3">
<div class="modal-body"> <div class="modal-body">
<div class="mb-3 fs-1">⚠️</div> <div class="mb-3 fs-1">⚠️</div>
<h4 class="modal-title mb-2 fw-bold" id="modalAbandonarSalaLabel">¿Abandonar la sala?</h4> <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> <p class="text-dark-50" id="modalAbandonarSalaMensaje">Si sales de la sala, perderás tu lugar en el equipo.</p>
</div> </div>
<div class="modal-footer justify-content-center border-0 gap-2"> <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"> <button type="button" class="btn btn-secondary px-4 py-2" data-bs-dismiss="modal">
Cancelar Cancelar
</button> </button>
<button type="button" id="btnConfirmarAbandonar" class="btn btn-danger px-4 py-2"> <button type="button" id="btnConfirmarAbandonar" class="btn btn-danger px-4 py-2">
Sí, salir Sí, salir
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-4.0.0.min.js"></script> <script src="js/jquery-4.0.0.min.js"></script>
+159 -37
View File
@@ -60,17 +60,18 @@ class EquipoxUsuario
]; ];
} }
} }
public function obtenerSalaUsuario($idUsuario) public function obtenerSalaUsuario($idUsuario)
{ {
$conexion = conexionBD(); $conexion = conexionBD();
if (is_array($conexion)) { if (is_array($conexion)) {
return $conexion; return $conexion;
} }
try { try {
$sql = " $sql = "
SELECT SELECT
exu.idEquipo, exu.idEquipo,
exp.idPartida exp.idPartida
@@ -84,41 +85,40 @@ class EquipoxUsuario
LIMIT 1 LIMIT 1
"; ";
$consulta = $conexion->prepare($sql); $consulta = $conexion->prepare($sql);
$consulta->bindParam( $consulta->bindParam(
':idUsuario', ':idUsuario',
$idUsuario, $idUsuario,
PDO::PARAM_INT PDO::PARAM_INT
); );
$consulta->execute(); $consulta->execute();
$resultado = $consulta->fetch(PDO::FETCH_ASSOC); $resultado = $consulta->fetch(PDO::FETCH_ASSOC);
if (!$resultado) { if (!$resultado) {
return [
'asociado' => false
];
}
return [ return [
'asociado' => false 'asociado' => true,
'idEquipo' => $resultado['idEquipo'],
'idPartida' => $resultado['idPartida']
];
} catch (PDOException $error) {
return [
'error' => 'Ocurrió un error al obtener la sala del usuario.',
'error_tecnico' => $error->getMessage()
]; ];
} }
return [
'asociado' => true,
'idEquipo' => $resultado['idEquipo'],
'idPartida' => $resultado['idPartida']
];
} catch (PDOException $error) {
return [
'error' => 'Ocurrió un error al obtener la sala del usuario.',
'error_tecnico' => $error->getMessage()
];
} }
}
public static function salirDeSala($idUsuario) public static function salirDeSala($idUsuario)
{ {
$conexion = conexionBD(); $conexion = conexionBD();
@@ -127,21 +127,143 @@ public static function salirDeSala($idUsuario)
} }
try { try {
$sql = "DELETE FROM equipoxusuario WHERE idUsuario = :idUsuario";
// 1. Averiguamos el equipo y la partida del usuario
$sql = "SELECT exu.idEquipo, exp.idPartida, p.idUsuario AS idHost FROM equipoxusuario exu INNER JOIN equipoxpartida exp ON exu.idEquipo = exp.idEquipo INNER JOIN partida p ON exp.idPartida = p.idPartida WHERE exu.idUsuario = :idUsuario LIMIT 1";
$consulta = $conexion->prepare($sql); $consulta = $conexion->prepare($sql);
$consulta->bindParam(':idUsuario', $idUsuario, PDO::PARAM_INT); $consulta->bindParam(':idUsuario',$idUsuario, PDO::PARAM_INT);
$consulta->execute(); $consulta->execute();
$datosSala = $consulta->fetch(PDO::FETCH_ASSOC);
// El usuario no pertenece a ninguna sala
if (!$datosSala) {
return [
'error' => 'No perteneces a ninguna sala.'
];
}
$idEquipo = (int)$datosSala['idEquipo'];
$idPartida = (int)$datosSala['idPartida'];
$idHost = (int)$datosSala['idHost'];
// Comenzamos una transacción
$conexion->beginTransaction();
/*
* 2. Comprobamos si quien abandona es el HOST
*/
if ($idUsuario === $idHost) {
/*
* Obtenemos todos los equipos pertenecientes
* a esta partida.
*/
$sqlEquipos = "SELECT idEquipo FROM equipoxpartida WHERE idPartida = :idPartida";
$consultaEquipos = $conexion->prepare($sqlEquipos);
$consultaEquipos->bindParam(':idPartida', $idPartida, PDO::PARAM_INT);
$consultaEquipos->execute();
$equipos = $consultaEquipos->fetchAll(PDO::FETCH_COLUMN);
/*
* 3. Eliminamos los jugadores de esos equipos
* de la tabla equipoxusuario.
*/
if (!empty($equipos)) {
$placeholders = implode(',', array_fill(0, count($equipos), '?'));
$sqlUsuarios = "DELETE FROM equipoxusuario WHERE idEquipo IN ($placeholders)";
$consultaUsuarios = $conexion->prepare($sqlUsuarios);
$consultaUsuarios->execute($equipos);
}
/*
* 4. Eliminamos las relaciones
* entre equipos y partida.
*/
$sqlEquipoxPartida = "DELETE FROM equipoxpartida WHERE idPartida = :idPartida";
$consultaEquipoxPartida = $conexion->prepare($sqlEquipoxPartida);
$consultaEquipoxPartida->bindParam(':idPartida', $idPartida,PDO::PARAM_INT);
$consultaEquipoxPartida->execute();
/*
* 5. Eliminamos los equipos.
*
* Los equipos ya no tienen relaciones con
* usuarios ni con la partida.
*/
if (!empty($equipos)) {
$placeholders = implode(',', array_fill(0, count($equipos), '?'));
$sqlEliminarEquipos = "DELETE FROM equipo WHERE idEquipo IN ($placeholders)";
$consultaEliminarEquipos = $conexion->prepare($sqlEliminarEquipos);
$consultaEliminarEquipos->execute($equipos);
}
/*
* 6. Eliminamos las relaciones
* entre preguntas y partida.
*/
$sqlPartidaxPregunta = "DELETE FROM partidaxpregunta WHERE idPartida = :idPartida";
$consultaPartidaxPregunta = $conexion->prepare($sqlPartidaxPregunta);
$consultaPartidaxPregunta->bindParam(':idPartida', $idPartida, PDO::PARAM_INT);
$consultaPartidaxPregunta->execute();
/*
* 7. Finalmente eliminamos la partida.
*/
$sqlPartida = "DELETE FROM partida WHERE idPartida = :idPartida";
$consultaPartida = $conexion->prepare($sqlPartida);
$consultaPartida->bindParam(':idPartida', $idPartida, PDO::PARAM_INT);
$consultaPartida->execute();
// Todo ha ido correctamente
$conexion->commit();
return [
'exito' => true,
'salaEliminada' => true,
'mensaje' => 'La sala ha sido eliminada correctamente.'
];
}
/*
* 7. Si NO es el host, simplemente abandona
* su relación con el equipo.
*/
$sqlSalir = "DELETE FROM equipoxusuario WHERE idUsuario = :idUsuario";
$consultaSalir = $conexion->prepare($sqlSalir);
$consultaSalir->bindParam(':idUsuario', $idUsuario, PDO::PARAM_INT);
$consultaSalir->execute();
$conexion->commit();
return [ return [
'exito' => true, 'exito' => true,
'mensaje' => 'Usuario eliminado de la sala correctamente.' 'salaEliminada' => false,
'mensaje' => 'Has abandonado la sala correctamente.'
]; ];
} catch (PDOException $error) { } catch (PDOException $error) {
// Si había una transacción activa, la deshacemos
if ($conexion->inTransaction()) {
$conexion->rollBack();
}
return [ return [
'error' => 'Ocurrió un error al salir de la sala.', 'error' => 'Ocurrió un error al abandonar la sala.',
'error_tecnico' => $error->getMessage() 'error_tecnico' => $error->getMessage()
]; ];
} }
} }
} }
+28 -4
View File
@@ -130,7 +130,7 @@ function mostrarSala(partida, equipos, jugadores) {
esHost ? "jugador-host" : "" esHost ? "jugador-host" : ""
}"> }">
<div> <div>
<span class="avatar">${esHost ? "👑" : "👤"}</span> <span class="avatar">${esHost ? '<i class="bi bi-award-fill"></i>' : '<i class="bi bi-person-fill"></i>'}</span>
${escapeHTML(jugador.nombreUsuario)} ${escapeHTML(jugador.nombreUsuario)}
</div> </div>
@@ -174,14 +174,15 @@ function mostrarSala(partida, equipos, jugadores) {
let accionesSalaHTML = ""; let accionesSalaHTML = "";
if (usuarioYaEstaEnEquipo) { if (usuarioYaEstaEnEquipo) {
const esHost = partida.idUsuario == idUsuarioSesion;
let botonIniciarHTML = ""; let botonIniciarHTML = "";
// Solo el host puede iniciar la partida // Solo el host puede iniciar la partida
if (partida.idUsuario == idUsuarioSesion) { if (esHost) {
botonIniciarHTML = ` botonIniciarHTML = `
<a href="juego.php?idPartida=${partida.idPartida}" <a href="juego.php?idPartida=${partida.idPartida}"
class="btn btn-success btn-lg px-4"> class="btn btn-success btn-lg px-4">
🎮 ¡Iniciar Partida! <i class="bi bi-controller"></i> ¡Iniciar Partida!
</a> </a>
`; `;
} }
@@ -191,7 +192,8 @@ function mostrarSala(partida, equipos, jugadores) {
<button type="button" <button type="button"
class="btn btn-outline-danger btn-abandonar-sala" class="btn btn-outline-danger btn-abandonar-sala"
data-id-partida="${partida.idPartida}"> data-id-partida="${partida.idPartida}"
data-es-host="${esHost}">
Abandonar sala Abandonar sala
</button> </button>
@@ -263,12 +265,34 @@ let botonAbandonarReferencia = null;
// A. Al hacer clic en el botón "Abandonar sala" de la tarjeta, abrimos el modal // A. Al hacer clic en el botón "Abandonar sala" de la tarjeta, abrimos el modal
$(document).on("click", ".btn-abandonar-sala", function () { $(document).on("click", ".btn-abandonar-sala", function () {
botonAbandonarReferencia = $(this); botonAbandonarReferencia = $(this);
const esHost = $(this).data("es-host") === true || $(this).data("es-host") === "true";
const titulo = $("#modalAbandonarSalaLabel");
const mensaje = $("#modalAbandonarSalaMensaje");
const botonConfirmar = $("#btnConfirmarAbandonar");
if (esHost) {
titulo.text("¿Abandonar la sala?");
mensaje.text(
"Si abandonas la sala como anfitrión, la partida terminará para todos los jugadores.",
);
botonConfirmar.text("Sí, abandonar");
} else {
titulo.text("¿Abandonar la sala?");
mensaje.text(
"Si sales de la sala, perderás tu lugar en el equipo.",
);
botonConfirmar.text("Sí, salir");
}
const modal = new bootstrap.Modal( const modal = new bootstrap.Modal(
document.getElementById("modalAbandonarSala"), document.getElementById("modalAbandonarSala"),
); );
modal.show(); modal.show();
}); });
// B. Al hacer clic en "Sí, salir" dentro del modal Kahoot // B. Al hacer clic en "Sí, salir" dentro del modal Kahoot
$(document).on("click", "#btnConfirmarAbandonar", function () { $(document).on("click", "#btnConfirmarAbandonar", function () {
const modalEl = document.getElementById("modalAbandonarSala"); const modalEl = document.getElementById("modalAbandonarSala");
+1 -11
View File
@@ -231,8 +231,6 @@ $("#formCrearPregunta").on("submit", function (e) {
// Volvemos a activar el botón // Volvemos a activar el botón
boton.prop("disabled", false); boton.prop("disabled", false);
boton.text("Crear pregunta"); boton.text("Crear pregunta");
// Toast exito
mostrarToast()
} }
}, },
@@ -245,12 +243,4 @@ $("#formCrearPregunta").on("submit", function (e) {
boton.text("Crear pregunta"); boton.text("Crear pregunta");
}, },
}); });
}); });
function mostrarToast() {
const toastMensaje = document.getElementById("ToastCrearPregunta");
if (toastMensaje) {
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastMensaje);
toastBootstrap.show();
}
}
+2 -11
View File
@@ -174,17 +174,8 @@ $avatarUsuario = htmlspecialchars($_SESSION['avatar'] ?? 'img/avatars/defaultPro
</div> </div>
</div> </div>
<!-- TOAST PREGUNTA CREADA -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="ToastCrearPregunta" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class=" toast-header" style="background-color: #46178f;">
<h5 class="text-white me-auto bi bi-joystick me-2"> Pregunta Creada</h5>
</div>
<div class="fs-6 toast-body">
La pregunta ha sido creada correctamente
</div>
</div>
</div>
<!-- MODAL CREAR PREGUNTA --> <!-- MODAL CREAR PREGUNTA -->
<div class="modal fade" <div class="modal fade"
id="modalCrearPregunta" id="modalCrearPregunta"