diff --git a/buscadorSala.php b/buscadorSala.php index 9bcb92e..22a50b8 100644 --- a/buscadorSala.php +++ b/buscadorSala.php @@ -23,7 +23,8 @@
-
+
+ - -
- - `; - - }); - - const salaHTML = ` - -
- -
- -
- - ${escapeHTML( - partida.nombrePartida - )} - -
- -
- -
- - ${equiposHTML} - -
- -
- -
- -
- - `; - - contenedor.append(salaHTML); - - } - - $(document).on( - 'click', - '.btn-unirse-equipo', - function () { - - const boton = $(this); - - const idPartida = - boton.data('id-partida'); - - const idEquipo = - boton.data('id-equipo'); - - boton.prop('disabled', true); - - boton.text('Uniéndose...'); - - $.ajax({ - - url: - 'controladores/controladorPartida.php', - - type: 'POST', - - dataType: 'json', - - data: { - - orden: 'registrarEquipo', - - idPartida: idPartida, - - idEquipo: idEquipo - - }, - - success: function (respuesta) { - - if (respuesta.error) { - - alert(respuesta.error); - - boton.prop( - 'disabled', - false - ); - - boton.text('Unirse'); - - return; - } - - cargarSalas(); - - }, - - error: function ( - xhr, - status, - error - ) { - - console.error( - 'Error al unirse al equipo:', - error - ); - - alert( - 'No se ha podido unir al equipo.' - ); - - boton.prop( - 'disabled', - false - ); - - boton.text('Unirse'); - - } - - }); - - } - ); - - function escapeHTML(texto) { - - return $('
') - .text(texto ?? '') - .html(); - - } - - $('#btnCrearSala').on('click', function () { - - const nombreSala = - $('#nombreSala').val().trim(); - - const nombreEquipo1 = - $('#nombreEquipo1').val().trim(); - - const nombreEquipo2 = - $('#nombreEquipo2').val().trim(); - - let valido = true; - - $('.mensaje-error-sala').remove(); - - $('.input-kahoot') - .removeClass('is-invalid'); - - if (nombreSala === '') { - - mostrarError( - '#nombreSala', - 'El nombre de la sala es obligatorio.' - ); - - valido = false; - - } else if (nombreSala.length < 3) { - - mostrarError( - '#nombreSala', - 'El nombre de la sala debe tener al menos 3 caracteres.' - ); - - valido = false; - } - - if (nombreEquipo1 === '') { - - mostrarError( - '#nombreEquipo1', - 'El nombre del equipo 1 es obligatorio.' - ); - - valido = false; - - } else if (nombreEquipo1.length < 2) { - - mostrarError( - '#nombreEquipo1', - 'El nombre del equipo debe tener al menos 2 caracteres.' - ); - - valido = false; - } - - if (nombreEquipo2 === '') { - - mostrarError( - '#nombreEquipo2', - 'El nombre del equipo 2 es obligatorio.' - ); - - valido = false; - - } else if (nombreEquipo2.length < 2) { - - mostrarError( - '#nombreEquipo2', - 'El nombre del equipo debe tener al menos 2 caracteres.' - ); - - valido = false; - } - - if ( - nombreEquipo1 !== '' && - nombreEquipo2 !== '' && - nombreEquipo1.toLowerCase() === - nombreEquipo2.toLowerCase() - ) { - - mostrarError( - '#nombreEquipo2', - 'Los dos equipos deben tener nombres diferentes.' - ); - - valido = false; - } - - if (!valido) { return; } - console.log('Datos válidos:'); + if (respuesta.asociado) { - console.log({ - nombreSala: nombreSala, - nombreEquipo1: nombreEquipo1, - nombreEquipo2: nombreEquipo2 + usuarioYaEstaEnEquipo = true; + + $("#contenedorCrearSala").hide(); + + cargarSalaUsuario(respuesta.idPartida); + + } else { + + usuarioYaEstaEnEquipo = false; + + cargarSalas(); + } + }, + + error: function (xhr, status, error) { + + console.error( + "Error al comprobar la sala del usuario:", + error + ); + + usuarioYaEstaEnEquipo = false; + + cargarSalas(); + } +}); + + +} + +function cargarSalaUsuario(idPartida) { + +$.ajax({ + url: "controladores/controladorPartida.php", + type: "POST", + dataType: "json", + + data: { + orden: "buscar", + idPartida: idPartida + }, + + success: function (partida) { + + if (partida.error) { + + console.error(partida.error); + + return; + } + + $("#contenedorSalas").empty(); + + cargarInformacionSala(partida); + }, + + error: function (xhr, status, error) { + + console.error( + "Error al obtener la sala del usuario:", + error + ); + } +}); + + +} + +function cargarSalas() { + +$.ajax({ + url: "controladores/controladorPartida.php", + type: "POST", + dataType: "json", + + data: { + orden: "listar" + }, + + success: function (partidas) { + + const contenedor = $("#contenedorSalas"); + + contenedor.empty(); + + if (!Array.isArray(partidas) || partidas.length === 0) { + + contenedor.html(` +
+

+ No hay salas disponibles. +

+
+ `); + + return; + } + + partidas.forEach(function (partida) { + + cargarInformacionSala(partida); + + }); + }, + + error: function (xhr, status, error) { + + console.error( + "Error al obtener las partidas:", + error + ); + } +}); + + +} + +function cargarInformacionSala(partida) { + +$.ajax({ + url: "controladores/controladorPartida.php", + type: "POST", + dataType: "json", + + data: { + orden: "getEquipos", + idPartida: partida.idPartida + }, + + success: function (equipos) { + + $.ajax({ + url: "controladores/controladorPartida.php", + type: "POST", + dataType: "json", + + data: { + orden: "getJugadores", + idPartida: partida.idPartida + }, + + success: function (jugadores) { + + mostrarSala( + partida, + equipos, + jugadores + ); + }, + + error: function (xhr, status, error) { + + console.error( + "Error al obtener jugadores:", + error + ); + } + }); + }, + + error: function (xhr, status, error) { + + console.error( + "Error al obtener equipos:", + error + ); + } +}); + + +} + +function mostrarSala(partida, equipos, jugadores) { + +const contenedor = $("#contenedorSalas"); + +let equiposHTML = ""; + +equipos.forEach(function (equipo) { + + const jugadoresEquipo = jugadores.filter(function (jugador) { + + return jugador.idEquipo == equipo.idEquipo; + + }); + + let jugadoresHTML = ""; + + if (jugadoresEquipo.length > 0) { + + jugadoresEquipo.forEach(function (jugador) { + + jugadoresHTML += ` +
+ + + 👤 + + + ${escapeHTML(jugador.nombreUsuario)} + +
+ `; }); - }); + } else { - function mostrarError(selector, mensaje) { - - const input = $(selector); - - input.addClass('is-invalid'); - - input.after(` -
- ${mensaje} + jugadoresHTML = ` +
+ Sin jugadores
- `); + `; } - $('.input-kahoot').on('input', function () { - $(this).removeClass('is-invalid'); + let botonUnirseHTML = ""; - $(this) - .next('.mensaje-error-sala') - .remove(); + if (!usuarioYaEstaEnEquipo) { - }); + botonUnirseHTML = ` + + `; + } + + + equiposHTML += ` +
+ +
+ ${escapeHTML(equipo.nombreEquipo)} +
+ +
+ + ${jugadoresHTML} + +
+ + ${botonUnirseHTML} + +
+ `; }); + + +const salaHTML = ` +
+ +
+ +
+ + ${escapeHTML(partida.nombrePartida)} + +
+ +
+ +
+ + ${equiposHTML} + +
+ +
+ +
+ +
+`; + + +contenedor.append(salaHTML); + + +} + +// ====================================================== +// UNIRSE A UN EQUIPO +// ====================================================== + +$(document).on( +"click", +".btn-unirse-equipo", +function () { + + const boton = $(this); + + const idEquipo = boton.data("id-equipo"); + + const idPartida = boton.data("id-partida"); + + + boton.prop("disabled", true); + + boton.text("Uniéndose..."); + + + $.ajax({ + + url: "controladores/ControladorEquipoxUsuario.php", + + type: "POST", + + dataType: "json", + + data: { + orden: "registrarUsuarioEnEquipo", + idEquipo: idEquipo + }, + + + success: function (respuesta) { + + console.log( + "Respuesta al unirse:", + respuesta + ); + + + if (respuesta.error) { + + alert(respuesta.error); + + boton.prop("disabled", false); + + boton.text("Unirse"); + + return; + } + + + // ========================================== + // UNIÓN CORRECTA + // ========================================== + + usuarioYaEstaEnEquipo = true; + + + // Ocultamos el botón "Crear sala" + + $("#contenedorCrearSala").hide(); + + + // Eliminamos las salas actuales + + $("#contenedorSalas").empty(); + + + // Cargamos directamente la sala + // donde acaba de entrar el usuario + + cargarSalaUsuario(idPartida); + }, + + + error: function (xhr, status, error) { + + console.error( + "Error al unirse al equipo:", + error + ); + + console.error( + "Respuesta del servidor:", + xhr.responseText + ); + + + alert( + "No se ha podido unir al equipo." + ); + + + boton.prop("disabled", false); + + boton.text("Unirse"); + } + }); +} + + +); + +// ====================================================== +// ESCAPAR HTML +// ====================================================== + +function escapeHTML(texto) { + +return $("
") + .text(texto ?? "") + .html(); + + +} + +// ====================================================== +// CREAR SALA +// ====================================================== + +$("#btnCrearSala").on( +"click", +function () { + + const nombreSala = + $("#nombreSala").val().trim(); + + const nombreEquipo1 = + $("#nombreEquipo1").val().trim(); + + const nombreEquipo2 = + $("#nombreEquipo2").val().trim(); + + + let valido = true; + + + $(".mensaje-error-sala").remove(); + + $(".input-kahoot").removeClass( + "is-invalid" + ); + + + if (nombreSala === "") { + + mostrarError( + "#nombreSala", + "El nombre de la sala es obligatorio." + ); + + valido = false; + + } else if (nombreSala.length < 3) { + + mostrarError( + "#nombreSala", + "El nombre de la sala debe tener al menos 3 caracteres." + ); + + valido = false; + } + + + if (nombreEquipo1 === "") { + + mostrarError( + "#nombreEquipo1", + "El nombre del equipo 1 es obligatorio." + ); + + valido = false; + + } else if (nombreEquipo1.length < 2) { + + mostrarError( + "#nombreEquipo1", + "El nombre del equipo debe tener al menos 2 caracteres." + ); + + valido = false; + } + + + if (nombreEquipo2 === "") { + + mostrarError( + "#nombreEquipo2", + "El nombre del equipo 2 es obligatorio." + ); + + valido = false; + + } else if (nombreEquipo2.length < 2) { + + mostrarError( + "#nombreEquipo2", + "El nombre del equipo debe tener al menos 2 caracteres." + ); + + valido = false; + } + + + if ( + nombreEquipo1 !== "" && + nombreEquipo2 !== "" && + nombreEquipo1.toLowerCase() === + nombreEquipo2.toLowerCase() + ) { + + mostrarError( + "#nombreEquipo2", + "Los dos equipos deben tener nombres diferentes." + ); + + valido = false; + } + + + if (!valido) { + + return; + } + + + console.log("Datos válidos:"); + + console.log({ + nombreSala: nombreSala, + nombreEquipo1: nombreEquipo1, + nombreEquipo2: nombreEquipo2 + }); +} + + +); + +// ====================================================== +// MOSTRAR ERROR +// ====================================================== + +function mostrarError(selector, mensaje) { + +const input = $(selector); + +input.addClass("is-invalid"); + + +input.after(` +
+ + ${mensaje} + +
+`); + + +} + +// ====================================================== +// QUITAR ERROR AL ESCRIBIR +// ====================================================== + +$(".input-kahoot").on( +"input", +function () { + + $(this).removeClass( + "is-invalid" + ); + + $(this) + .next(".mensaje-error-sala") + .remove(); +} + + +); \ No newline at end of file