triviagmatico/js/buscadorSala.js

let usuarioYaEstaEnEquipo = false;

$(document).ready(function () {
comprobarSalaUsuario();
});

function comprobarSalaUsuario() {

$("#cargandoSalas").remove();

$.ajax({
    url: "controladores/ControladorEquipoxUsuario.php",
    type: "POST",
    dataType: "json",

    data: {
        orden: "obtenerSalaUsuario"
    },

    success: function (respuesta) {

        console.log("Sala del usuario:", respuesta);

        if (respuesta.error) {

            console.error(respuesta.error);

            usuarioYaEstaEnEquipo = false;

            cargarSalas();

            return;
        }

        if (respuesta.asociado) {

            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(`
                <div class="col-12 text-center">
                    <p class="text-muted">
                        No hay salas disponibles.
                    </p>
                </div>
            `);

            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 += `
                <div class="jugador">

                    <span class="avatar">
                        👤
                    </span>

                    ${escapeHTML(jugador.nombreUsuario)}

                </div>
            `;
        });

    } else {

        jugadoresHTML = `
            <div class="text-muted small">
                Sin jugadores
            </div>
        `;
    }


    let botonUnirseHTML = "";

    if (!usuarioYaEstaEnEquipo) {

        botonUnirseHTML = `
            <button
                type="button"
                class="btn btn-unirse w-100 btn-unirse-equipo"
                data-id-partida="${partida.idPartida}"
                data-id-equipo="${equipo.idEquipo}">

                Unirse

            </button>
        `;
    }


    equiposHTML += `
        <div class="equipo">

            <h6>
                ${escapeHTML(equipo.nombreEquipo)}
            </h6>

            <div class="jugadores">

                ${jugadoresHTML}

            </div>

            ${botonUnirseHTML}

        </div>
    `;
});


const salaHTML = `
    <div class="col-12 col-md-10 col-lg-8">

        <div class="sala">

            <div class="sala-header">

                ${escapeHTML(partida.nombrePartida)}

            </div>

            <div class="sala-body">

                <div class="equipos">

                    ${equiposHTML}

                </div>

            </div>

        </div>

    </div>
`;


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 $("<div>")
    .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(`
    <div class="mensaje-error-sala text-danger mt-1 small">

        ${mensaje}

    </div>
`);


}

// ======================================================
// QUITAR ERROR AL ESCRIBIR
// ======================================================

$(".input-kahoot").on(
"input",
function () {

    $(this).removeClass(
        "is-invalid"
    );

    $(this)
        .next(".mensaje-error-sala")
        .remove();
}


);