jorge/triviagmatico
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add buscadorSala

Browse Source
This commit is contained in:
daniel
2026-09-23 13:12:42 +02:00
parent 050d5e49c4
commit d65b7fcb91
8 changed files with 677 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
buscadorSala.php
+138
View File
@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trivial - Lobby</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/buscadorSala.css">
</head>
<body>
<?php
include_once("cabecera.php");
?>
<main class="container py-5">
<div class="text-center mb-5">
<button
type="button"
class="btn btn-play-kahoot btn-crear-sala"
data-bs-toggle="modal"
data-bs-target="#modalCrearSala">
<span>+</span>
Crear sala
</button>
</div>
<div
id="contenedorSalas"
class="row justify-content-center g-4">
</div>
</main>
<div
class="modal fade"
id="modalCrearSala"
tabindex="-1"
aria-labelledby="modalCrearSalaLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content modal-kahoot">
<div class="modal-header modal-kahoot-header">
<h5
class="modal-title"
id="modalCrearSalaLabel">
Crear sala
</h5>
<button
type="button"
class="btn-close btn-close-white"
data-bs-dismiss="modal"
aria-label="Cerrar">
</button>
</div>
<div class="modal-body p-4">
<div class="mb-3">
<label
for="nombreSala"
class="form-label">
Nombre de la sala
</label>
<input
type="text"
id="nombreSala"
class="form-control input-kahoot"
placeholder="Ej. Noche de Trivial">
</div>
<div class="mb-3">
<label
for="nombreEquipo1"
class="form-label">
Nombre del equipo 1
</label>
<input
type="text"
id="nombreEquipo1"
class="form-control input-kahoot"
placeholder="Ej. Los cerebritos">
</div>
<div class="mb-3">
<label
for="nombreEquipo2"
class="form-label">
Nombre del equipo 2
</label>
<input
type="text"
id="nombreEquipo2"
class="form-control input-kahoot"
placeholder="Ej. Los campeones">
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">
Cancelar
</button>
<button
type="button"
class="btn btn-kahoot-login"
id="btnCrearSala">
Crear sala
</button>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
<script src="js/lobbyDummy.js"></script>
<script src="js/buscadorSala.js"></script>
</body>
</html>
cabecera.php
+1 -142
View File
@@ -14,150 +14,9 @@ $username = $isLoggedIn ? $_SESSION['usuario'] : '';
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- Google Fonts para estilo Kahoot -->
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/index.css">
<style>
:root {
--kahoot-purple: #46178f;
--kahoot-blue: #1368ce;
--kahoot-red: #e21b3c;
--kahoot-yellow: #ffa602;
--kahoot-green: #26890c;
--kahoot-green-hover: #1f6f09;
}
body {
font-family: 'Fredoka', sans-serif;
background-color: #f2f2f2;
min-height: 100vh;
}
.navbar-kahoot {
background-color: var(--kahoot-purple);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.navbar-brand {
font-weight: 700;
font-size: 1.8rem;
color: #fff !important;
letter-spacing: 1px;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}
.btn-kahoot-login {
background-color: var(--kahoot-blue);
color: white;
font-weight: 600;
border: none;
border-bottom: 4px solid #0c4891;
transition: all 0.2s ease;
}
.btn-kahoot-login:hover {
background-color: #0f56ab;
color: white;
transform: translateY(-2px);
}
/* Estilos del Dropdown de usuario */
.user-dropdown-btn {
background: rgba(255, 255, 255, 0.15);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 8px 18px;
font-weight: 600;
transition: all 0.2s ease;
}
.user-dropdown-btn:hover,
.user-dropdown-btn:focus,
.user-dropdown-btn.show {
background: rgba(255, 255, 255, 0.3);
color: white;
border-color: #fff;
box-shadow: none;
}
.user-dropdown-menu {
border-radius: 15px;
border: none;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
padding: 10px;
min-width: 200px;
margin-top: 10px !important;
}
.user-dropdown-menu .dropdown-item {
border-radius: 10px;
font-weight: 600;
padding: 10px 15px;
transition: all 0.15s ease;
}
.user-dropdown-menu .dropdown-item:hover {
background-color: #f0eafb;
color: var(--kahoot-purple);
}
.user-dropdown-menu .dropdown-item.logout-item {
color: var(--kahoot-red);
}
.user-dropdown-menu .dropdown-item.logout-item:hover {
background-color: #fde8ea;
color: var(--kahoot-red);
}
.btn-play-kahoot {
background-color: var(--kahoot-green);
color: white;
font-size: 2.2rem;
font-weight: 700;
width: 100%;
padding: 30px 20px;
border-radius: 20px;
border: none;
border-bottom: 8px solid var(--kahoot-green-hover);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
transition: all 0.1s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.btn-play-kahoot:hover {
background-color: #2bb00f;
color: white;
transform: translateY(-3px);
box-shadow: 0 12px 20px rgba(0,0,0,0.25);
}
.btn-play-kahoot:active {
transform: translateY(4px);
border-bottom: 2px solid var(--kahoot-green-hover);
}
.ranking-card {
border-radius: 20px;
border: none;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
overflow: hidden;
}
.ranking-header {
background-color: var(--kahoot-yellow);
color: #333;
padding: 15px 20px;
font-weight: 700;
}
.trophy-icon {
font-size: 3rem;
color: var(--kahoot-yellow);
margin-bottom: 10px;
}
</style>
<nav class="navbar navbar-expand-lg navbar-kahoot py-3 mb-4">
cs/index.css
View File
css/buscadorSala.css
+107
View File
@@ -0,0 +1,107 @@
.btn-crear-sala {
width: auto;
min-width: 280px;
padding: 18px 35px;
font-size: 1.6rem;
border-radius: 15px;
}
.sala {
background-color: white;
border-radius: 20px;
border: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
height: 100%;
}
.sala-header {
background-color: var(--kahoot-purple);
color: white;
padding: 15px 20px;
font-weight: 700;
font-size: 1.2rem;
text-align: center;
}
.sala-body {
padding: 20px;
}
.equipos {
display: flex;
gap: 15px;
}
.equipo {
width: 50%;
padding: 15px;
border-radius: 15px;
background-color: #f7f7f7;
display: flex;
flex-direction: column;
}
.equipo h6 {
text-align: center;
font-weight: 700;
margin-bottom: 15px;
}
.jugadores {
flex-grow: 1;
min-height: 80px;
}
.jugador {
background-color: white;
border-radius: 10px;
padding: 7px 10px;
margin-bottom: 6px;
font-size: 0.9rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.avatar {
margin-right: 5px;
}
.btn-unirse {
border: none;
border-bottom: 3px solid #0c4891;
background-color: var(--kahoot-blue);
color: white;
font-weight: 600;
border-radius: 8px;
margin-top: 10px;
}
.btn-unirse:hover {
background-color: #0f56ab;
color: white;
}
.modal-kahoot {
border: none;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}
.modal-kahoot-header {
background-color: var(--kahoot-purple);
color: white;
border-bottom: none;
}
.input-kahoot {
border: 2px solid #ddd;
border-radius: 10px;
padding: 10px 12px;
font-weight: 500;
}
.input-kahoot:focus {
border-color: var(--kahoot-purple);
box-shadow: 0 0 0 3px rgba(70, 23, 143, 0.15);
}
css/index.css
+142
View File
@@ -0,0 +1,142 @@
:root {
--kahoot-purple: #46178f;
--kahoot-blue: #1368ce;
--kahoot-red: #e21b3c;
--kahoot-yellow: #ffa602;
--kahoot-green: #26890c;
--kahoot-green-hover: #1f6f09;
}
body {
font-family: "Fredoka", sans-serif;
background-color: #f2f2f2;
min-height: 100vh;
}
.navbar-kahoot {
background-color: var(--kahoot-purple);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.navbar-brand {
font-weight: 700;
font-size: 1.8rem;
color: #fff !important;
letter-spacing: 1px;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}
.btn-kahoot-login {
background-color: var(--kahoot-blue);
color: white;
font-weight: 600;
border: none;
border-bottom: 4px solid #0c4891;
transition: all 0.2s ease;
}
.btn-kahoot-login:hover {
background-color: #0f56ab;
color: white;
transform: translateY(-2px);
}
/* Estilos del Dropdown de usuario */
.user-dropdown-btn {
background: rgba(255, 255, 255, 0.15);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 8px 18px;
font-weight: 600;
transition: all 0.2s ease;
}
.user-dropdown-btn:hover,
.user-dropdown-btn:focus,
.user-dropdown-btn.show {
background: rgba(255, 255, 255, 0.3);
color: white;
border-color: #fff;
box-shadow: none;
}
.user-dropdown-menu {
border-radius: 15px;
border: none;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
padding: 10px;
min-width: 200px;
margin-top: 10px !important;
}
.user-dropdown-menu .dropdown-item {
border-radius: 10px;
font-weight: 600;
padding: 10px 15px;
transition: all 0.15s ease;
}
.user-dropdown-menu .dropdown-item:hover {
background-color: #f0eafb;
color: var(--kahoot-purple);
}
.user-dropdown-menu .dropdown-item.logout-item {
color: var(--kahoot-red);
}
.user-dropdown-menu .dropdown-item.logout-item:hover {
background-color: #fde8ea;
color: var(--kahoot-red);
}
.btn-play-kahoot {
background-color: var(--kahoot-green);
color: white;
font-size: 2.2rem;
font-weight: 700;
width: 100%;
padding: 30px 20px;
border-radius: 20px;
border: none;
border-bottom: 8px solid var(--kahoot-green-hover);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
transition: all 0.1s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.btn-play-kahoot:hover {
background-color: #2bb00f;
color: white;
transform: translateY(-3px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
}
.btn-play-kahoot:active {
transform: translateY(4px);
border-bottom: 2px solid var(--kahoot-green-hover);
}
.ranking-card {
border-radius: 20px;
border: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.ranking-header {
background-color: var(--kahoot-yellow);
color: #333;
padding: 15px 20px;
font-weight: 700;
}
.trophy-icon {
font-size: 3rem;
color: var(--kahoot-yellow);
margin-bottom: 10px;
}
js/buscadorSala.js
+79
View File
@@ -0,0 +1,79 @@
const btnCrearSala = document.getElementById("btnCrearSala");
const nombreSala = document.getElementById("nombreSala");
const nombreEquipo1 = document.getElementById("nombreEquipo1");
const nombreEquipo2 = document.getElementById("nombreEquipo2");
btnCrearSala.addEventListener("click", function () {
limpiarErrores();
const sala = nombreSala.value.trim();
const equipo1 = nombreEquipo1.value.trim();
const equipo2 = nombreEquipo2.value.trim();
let formularioValido = true;
if (sala === "") {
mostrarError(nombreSala, "El nombre de la sala es obligatorio.");
formularioValido = false;
}
if (equipo1 === "") {
mostrarError(nombreEquipo1, "El nombre del equipo 1 es obligatorio.");
formularioValido = false;
}
if (equipo2 === "") {
mostrarError(nombreEquipo2, "El nombre del equipo 2 es obligatorio.");
formularioValido = false;
}
if (!formularioValido) {
return;
}
console.log("Sala:", sala);
console.log("Equipo 1:", equipo1);
console.log("Equipo 2:", equipo2);
const idSala = 1;
//TODO aqui va la peticion ayax en el futuro para crear la sala en la bbdd
window.location.href = "sala.html?id=" + idSala;
});
function mostrarError(input, mensaje) {
input.classList.add("is-invalid");
// Comprobamos si ya existe un mensaje
let mensajeError = input.parentElement.querySelector(".invalid-feedback");
if (!mensajeError) {
mensajeError = document.createElement("div");
mensajeError.classList.add("invalid-feedback");
input.parentElement.appendChild(mensajeError);
}
mensajeError.textContent = mensaje;
}
function limpiarErrores() {
const inputs = [nombreSala, nombreEquipo1, nombreEquipo2];
inputs.forEach((input) => {
input.classList.remove("is-invalid");
const mensajeError = input.parentElement.querySelector(".invalid-feedback");
if (mensajeError) {
mensajeError.remove();
}
});
}
js/lobbyDummy.js
+210
View File
@@ -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);
lobby.php
-96
View File
@@ -1,96 +0,0 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trivial</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container py-4">
<!-- BOTÓN CREAR SALA -->
<div class="text-center mb-4">
<button class="btn btn-dark"
data-bs-toggle="modal"
data-bs-target="#modalCrearSala">
Crear sala
</button>
</div>
<!-- CONTENEDOR DE SALAS -->
<div id="contenedorSalas"
class="row justify-content-center g-4">
</div>
</main>
<!-- MODAL CREAR SALA -->
<div class="modal fade" id="modalCrearSala" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Crear sala</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<label for="nombreSala" class="form-label">
Nombre de la sala
</label>
<input type="text"
id="nombreSala"
class="form-control"
placeholder="Introduce un nombre">
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">
Cancelar
</button>
<button type="button"
class="btn btn-primary"
id="btnCrearSala">
Crear sala
</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Nuestro JS -->
<script src="script.js"></script>
</body>
</html>