diff --git a/buscadorSala.php b/buscadorSala.php new file mode 100644 index 0000000..a8705e3 --- /dev/null +++ b/buscadorSala.php @@ -0,0 +1,141 @@ + + + + + + + + Trivial - Lobby + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+
+ + + + + + + + + + \ No newline at end of file diff --git a/cabecera.php b/cabecera.php new file mode 100644 index 0000000..0bf9863 --- /dev/null +++ b/cabecera.php @@ -0,0 +1,310 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/css/buscadorSala.css b/css/buscadorSala.css new file mode 100644 index 0000000..8b7d207 --- /dev/null +++ b/css/buscadorSala.css @@ -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); +} diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..3f37d81 --- /dev/null +++ b/css/index.css @@ -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; +} diff --git a/css/perfil.css b/css/perfil.css new file mode 100644 index 0000000..f04d14f --- /dev/null +++ b/css/perfil.css @@ -0,0 +1,403 @@ +/* ========================================= */ +/* PERFIL */ +/* ========================================= */ + +.perfil-container { + width: 100%; + max-width: 1050px; + + margin: 0 auto; + + padding: 40px 20px; +} + + +/* ========================================= */ +/* TARJETA DEL PERFIL */ +/* ========================================= */ + +.perfil-card { + background-color: #fff; + + border-radius: 20px; + + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.08); + + overflow: hidden; +} + + +/* ========================================= */ +/* CABECERA DEL PERFIL */ +/* ========================================= */ + +.perfil-header { + background-color: var(--kahoot-purple); + + color: white; + + padding: 20px; + + text-align: center; + + font-size: 2rem; + + font-weight: 700; + + text-shadow: + 2px 2px 0 rgba(0, 0, 0, 0.2); +} + + +/* ========================================= */ +/* CONTENIDO */ +/* ========================================= */ + +.perfil-content { + padding: 45px; +} + + +/* ========================================= */ +/* NOMBRE */ +/* ========================================= */ + +.nombre { + color: var(--kahoot-purple); + + font-size: 2.5rem; + + font-weight: 700; + + margin-bottom: 25px; +} + + +/* ========================================= */ +/* FOTO */ +/* ========================================= */ + +.foto-container { + position: relative; + + display: inline-block; +} + + +.avatar { + width: 180px; + height: 180px; + + object-fit: cover; + + border: 6px solid white; + + box-shadow: + 0 5px 15px rgba(0, 0, 0, 0.2); +} + + +/* ========================================= */ +/* BOTÓN CAMBIAR FOTO */ +/* ========================================= */ + +.btn-foto { + position: absolute; + + right: -5px; + bottom: 5px; + + width: 52px; + height: 52px; + + border: none; + + border-radius: 50%; + + background-color: var(--kahoot-blue); + + color: white; + + border-bottom: 5px solid #0c4891; + + font-size: 24px; + + display: flex; + + align-items: center; + justify-content: center; + + cursor: pointer; + + transition: all 0.2s ease; +} + + +.btn-foto:hover { + background-color: #0f56ab; + + color: white; + + transform: translateY(-3px); + + box-shadow: + 0 5px 10px rgba(0, 0, 0, 0.2); +} + + +.btn-foto:active { + transform: translateY(3px); + + border-bottom: 2px solid #0c4891; +} + + +/* ========================================= */ +/* FORMULARIO NOMBRE */ +/* ========================================= */ + +.formulario-nombre { + background-color: #f2f2f2; + + border-radius: 20px; + + padding: 20px; + + max-width: 400px; + + margin: 25px auto 0; + + box-shadow: + 0 5px 12px rgba(0, 0, 0, 0.08); +} + + +.formulario-nombre label { + color: var(--kahoot-purple); + + font-weight: 600; +} + + +/* ========================================= */ +/* INPUT */ +/* ========================================= */ + +.formulario-nombre .form-control { + border-radius: 12px; + + padding: 11px 15px; + + border: 2px solid #ddd; +} + + +.formulario-nombre .form-control:focus { + border-color: var(--kahoot-blue); + + box-shadow: + 0 0 0 3px rgba(19, 104, 206, 0.15); +} + + +/* ========================================= */ +/* BOTÓN CAMBIAR NOMBRE */ +/* ========================================= */ + +.btn-perfil-cambiar { + background-color: var(--kahoot-green); + + color: white; + + font-weight: 700; + + border: none; + + border-bottom: 5px solid var(--kahoot-green-hover); + + border-radius: 12px; + + padding: 10px 18px; + + transition: all 0.15s ease; +} + + +.btn-perfil-cambiar:hover { + background-color: #2bb00f; + + color: white; + + transform: translateY(-2px); +} + + +.btn-perfil-cambiar:active { + transform: translateY(3px); + + border-bottom-width: 2px; +} + + +/* ========================================= */ +/* BOTÓN BORRAR */ +/* ========================================= */ + +.btn-perfil-borrar { + background-color: var(--kahoot-red); + + color: white; + + font-weight: 700; + + border: none; + + border-bottom: 5px solid #a9142d; + + border-radius: 12px; + + padding: 10px 18px; + + transition: all 0.15s ease; +} + + +.btn-perfil-borrar:hover { + background-color: #c91635; + + color: white; + + transform: translateY(-2px); +} + + +.btn-perfil-borrar:active { + transform: translateY(3px); + + border-bottom-width: 2px; +} + + +/* ========================================= */ +/* ESTADÍSTICAS */ +/* ========================================= */ + +.estadisticas { + background-color: var(--kahoot-purple); + + color: white; + + border-radius: 20px; + + padding: 30px; + + min-height: 350px; + + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.15); +} + + +.estadisticas h2 { + font-size: 2rem; + + font-weight: 700; + + text-align: center; + + margin-bottom: 30px; + + text-shadow: + 2px 2px 0 rgba(0, 0, 0, 0.2); +} + + +/* ========================================= */ +/* ESTADÍSTICAS INDIVIDUALES */ +/* ========================================= */ + +.estadistica { + display: flex; + + justify-content: space-between; + + align-items: center; + + border-radius: 12px; + + padding: 15px; + + margin-bottom: 15px; + + font-size: 1.2rem; + + font-weight: 600; + + box-shadow: + 0 4px 8px rgba(0, 0, 0, 0.15); +} + + +.estadistica-victorias { + background-color: var(--kahoot-green); +} + + +.estadistica-derrotas { + background-color: var(--kahoot-red); +} + + +.estadistica-aciertos { + background-color: var(--kahoot-yellow); + + color: #333; +} + + +/* ========================================= */ +/* RESPONSIVE */ +/* ========================================= */ + +@media (max-width: 768px) { + + .perfil-container { + padding: 25px 15px; + } + + + .perfil-content { + padding: 30px 20px; + } + + + .nombre { + font-size: 2rem; + } + + + .avatar { + width: 150px; + height: 150px; + } + + + .estadisticas { + margin-top: 10px; + } + + + .formulario-nombre { + max-width: 100%; + } + + + .btn-perfil-cambiar, + .btn-perfil-borrar { + padding: 9px 12px; + + font-size: 0.9rem; + } + +} diff --git a/index.php b/index.php index a47b9e7..e8ffac5 100644 --- a/index.php +++ b/index.php @@ -1,11 +1,59 @@ + + - + - Proyecto Trivial + Triviagmático - + +
+
+ + + +
+ + + ¡JUGAR! + +
+ + + +
+
+
+

RANKING GLOBAL DE JUGADORES

+
+
+ +
+ +

Cargando clasificación...

+

Los mejores equipos y jugadores aparecerán aquí pronto.

+
+
+
+
+ +
+
+ + + + \ No newline at end of file diff --git a/js/buscadorSala.js b/js/buscadorSala.js new file mode 100644 index 0000000..eae602d --- /dev/null +++ b/js/buscadorSala.js @@ -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(); + } + }); +} diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..e69de29 diff --git a/js/lobbyDummy.js b/js/lobbyDummy.js new file mode 100644 index 0000000..df3a10a --- /dev/null +++ b/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 = ` + +
+ +
+ ${sala.nombre} +
+ + +
+ +
+ + ${crearEquipo(sala, sala.equipos[0])} + + ${crearEquipo(sala, sala.equipos[1])} + +
+ +
+ +
+ + `; + + contenedor.appendChild(columna); + }); +} + + + +// ============================================ +// CREAR EQUIPO +// ============================================ + +function crearEquipo(sala, equipo) { + + let jugadoresHTML = ""; + + equipo.jugadores.forEach(jugador => { + + jugadoresHTML += ` +
+ 👤 + ${jugador} +
+ `; + }); + + + return ` + +
+ +
+ ${equipo.nombre} +
+ +
+ + ${jugadoresHTML} + +
+ + + +
+ + `; +} + +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); diff --git a/js/perfil.js b/js/perfil.js new file mode 100644 index 0000000..edfca78 --- /dev/null +++ b/js/perfil.js @@ -0,0 +1,74 @@ +// ========================= +// CAMBIAR NOMBRE +// ========================= + +function cambiarNombre() { + + const input = document.getElementById("nuevoNombre"); + const nombre = document.getElementById("nombre"); + + const nuevoNombre = input.value.trim(); + + if (nuevoNombre !== "") { + + nombre.textContent = nuevoNombre; + + input.value = ""; + } +} + + +// ========================= +// BORRAR NOMBRE +// ========================= + +function borrarNombre() { + + document.getElementById("nuevoNombre").value = ""; + +} + + +// ========================= +// ABRIR SELECTOR DE IMAGEN +// ========================= + +function seleccionarFoto() { + + document.getElementById("inputFoto").click(); + +} + + +// ========================= +// CAMBIAR FOTO +// ========================= + +document.getElementById("inputFoto").addEventListener( + "change", + function(event) { + + const archivo = event.target.files[0]; + + if (archivo) { + + // Comprobamos que sea una imagen + if (!archivo.type.startsWith("image/")) { + + alert("Por favor, selecciona una imagen."); + + return; + } + + + // Creamos una URL temporal + const imagenURL = URL.createObjectURL(archivo); + + + // Cambiamos la foto + document.getElementById("fotoPerfil").src = imagenURL; + + } + + } +); diff --git a/perfil.php b/perfil.php new file mode 100644 index 0000000..5cf6b78 --- /dev/null +++ b/perfil.php @@ -0,0 +1,236 @@ + + + + + + + + Perfil + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + +
+ + Mi perfil +
+ + +
+ +
+ + + + + + +
+ + + +

+ tuNombre +

+ + + + + + +
+ + Foto de perfil + + + + + + + + + + + +
+ + + + + + +
+ + + + + + + +
+ + + + + + +
+ +
+ +
+ + + + + + +
+ +
+ +

+ + Estadísticas +

+ + +
+ + +   Victorias: + + + 0 + + +
+ + +
+ + +   Derrotas: + + + 0 + + +
+ + +
+ + +   Aciertos: + + + 0 + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + + + + + + + + + diff --git a/requisitos.md b/requisitos.md new file mode 100644 index 0000000..30c79fe --- /dev/null +++ b/requisitos.md @@ -0,0 +1,29 @@ +REQUISITOS CONTROLADORES + +registrarUsuario(nombre, email, password) inserta un usuario en la bbdd, hay que comprobar que en la tabla usuario no hay una cuenta con el correo electronico + +comprobarUsuario(email, password) comprueba si el usuario introducido se encuentra en la bbdd para poder iniciar sesion, hay que actualizar las variables de sesion para guardar su email y su id de la bbdd. + +Orden “RankingGlobal“ + +rankingGlobal() recupera los 5 usuarios con mas puntos ordenados por el maximo de puntos + +crearSala(nombreSala, nombreEquipo1, nombreEquipo2) inserta en la bbdd una sala y asigna al usuario que la crea a equipo 1 + +Orden “BuscarSalas“ + +buscarSala() recupera todas las salas activas a las que el usuario se puede unir, devuelve nombre de sala, nombre de equipo, **id equipo**(todos los equipos), nombre usuarios. + +Orden “AsignarUsuario“ + +asignarUsuario(**id equipo**, id usuario(variable de sesion)) cuando el usuario pulsa el boton de unirse asigna al equipo dicho usuario + +buscarSalaUsuarioActivo(**id equipo)** recarga la pagina para solo mostrar la sala en la que se encuentra el usuario + +cargarPreguntasyRespuestas() recupera todas las preguntas de la partida (10 preguntas por partida), devuelve un json con las preguntas, las 4 respuestas + +Orden ”ComprobarRespuesta” + +comprobarRespuesta(idRespuesta, idUsuario, tiempo) comprueba si el usuario ha pulsado sobre la respuesta correcta o incorrecta, devuelve si es correcta o incorrecta + +comprobarEquipoGanador() comprueba cual de los dos equipos gana, devuelve un json con la puntuacion global, nombre de equipos, nombre de usuarios y puntuacion de cada usuario, actualiza el ranking global de usuarios \ No newline at end of file