diff --git a/css/buscadorSala.css b/css/buscadorSala.css index 8b7d207..6faae8c 100644 --- a/css/buscadorSala.css +++ b/css/buscadorSala.css @@ -105,3 +105,11 @@ 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; +} diff --git a/img/avatars/avatar_11.jpg b/img/avatars/avatar_11.jpg new file mode 100644 index 0000000..b0107ec Binary files /dev/null and b/img/avatars/avatar_11.jpg differ diff --git a/js/buscadorSala.js b/js/buscadorSala.js index 1cb5ee8..f55349f 100644 --- a/js/buscadorSala.js +++ b/js/buscadorSala.js @@ -123,12 +123,24 @@ function mostrarSala(partida, equipos, jugadores) { let jugadoresHTML = ""; if (jugadoresEquipo.length > 0) { jugadoresEquipo.forEach(function (jugador) { + const esHost = jugador.idUsuario == partida.idUsuario; + jugadoresHTML += ` -
- 👤 - ${escapeHTML(jugador.nombreUsuario)} -
- `; +
+
+ ${esHost ? "👑" : "👤"} + ${escapeHTML(jugador.nombreUsuario)} +
+ + ${ + esHost + ? `HOST` + : "" + } +
+ `; }); } else { jugadoresHTML = `
Sin jugadores
`; @@ -157,19 +169,36 @@ 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) { - accionesSalaHTML = ` -
- - - 🎮 ¡Iniciar Partida! - -
+ let botonIniciarHTML = ""; + + // Solo el host puede iniciar la partida + if (partida.idUsuario == idUsuarioSesion) { + botonIniciarHTML = ` + + 🎮 ¡Iniciar Partida! + `; + } + + accionesSalaHTML = ` +
+ + + + ${botonIniciarHTML} + +
+ `; } const salaHTML = ` @@ -234,13 +263,15 @@ 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); @@ -253,7 +284,7 @@ $(document).on("click", "#btnConfirmarAbandonar", function () { data: { orden: "salirDeSala" }, success: function (respuesta) { btnConfirmar.prop("disabled", false).text("Sí, salir"); - + if (modalInstance) { modalInstance.hide(); } @@ -275,7 +306,7 @@ $(document).on("click", "#btnConfirmarAbandonar", function () { if (modalInstance) { modalInstance.hide(); } - } + }, }); }); // 8. Evento: Crear Sala diff --git a/js/cabecera.js b/js/cabecera.js index 90a35ea..2ce7f4e 100644 --- a/js/cabecera.js +++ b/js/cabecera.js @@ -1,3 +1,5 @@ +let idUsuarioSesion = null; + $(document).ready(function () { // Comprobar la sesión activa al cargar la página comprobarEstadoSesion(); @@ -36,6 +38,7 @@ function comprobarEstadoSesion() { data: { orden: 'comprobarSesion' }, success: function (respuesta) { if (respuesta.activa) { + idUsuarioSesion = respuesta.usuario.idUsuario; renderizarCabeceraConSesion(respuesta.usuario); $('#colBotonJugar').removeClass('d-none'); } else {