triviagmatico/js/buscadorSala.js

// =====================================================
// CARGAR LISTA DE SALAS
// =====================================================

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 actualmente.
            </p>
          </div>
        `);

        return;
      }

      // Cargar cada sala individualmente
      partidas.forEach(function (partida) {
        cargarSalaBuscador(partida);
      });
    },

    error: function (xhr, status, error) {
      console.error(
        "Error al obtener las partidas:",
        error
      );
    },
  });
}


// =====================================================
// CARGAR INFORMACIÓN DE UNA SALA DEL BUSCADOR
// =====================================================

function cargarSalaBuscador(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) {
          mostrarSalaBuscador(
            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
      );
    },
  });
}


// =====================================================
// MOSTRAR UNA SALA EN EL BUSCADOR
// =====================================================

function mostrarSalaBuscador(
  partida,
  equipos,
  jugadores
) {
  let equiposHTML = "";

  equipos.forEach(function (equipo) {
    const jugadoresEquipo = jugadores.filter(
      function (jugador) {
        return (
          jugador.idEquipo ==
          equipo.idEquipo
        );
      }
    );

    let jugadoresHTML = "";

    // -----------------------------------------------
    // JUGADORES DEL EQUIPO
    // -----------------------------------------------

    if (jugadoresEquipo.length > 0) {
      jugadoresEquipo.forEach(
        function (jugador) {
          const esHost =
            jugador.idUsuario ==
            partida.idUsuario;

          jugadoresHTML += `
            <div class="jugador border border-2 d-flex align-items-center justify-content-between">

              <div>
                <span class="avatar">
                  ${
                    esHost
                      ? '<i class="bi bi-award-fill"></i>'
                      : '<i class="bi bi-person-fill"></i>'
                  }
                </span>

                ${escapeHTML(
                  jugador.nombreUsuario
                )}
              </div>

              ${
                esHost
                  ? `
                    <span class="badge bg-warning text-dark ms-2">
                      HOST
                    </span>
                  `
                  : ""
              }

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

    // -----------------------------------------------
    // BOTÓN UNIRSE
    // -----------------------------------------------

    let botonUnirseHTML = "";

    if (!usuarioYaEstaEnEquipo) {
      botonUnirseHTML = `
        <button
          type="button"
          class="btn-unirse w-100 btn-unirse-equipo mt-2"
          data-id-partida="${partida.idPartida}"
          data-id-equipo="${equipo.idEquipo}">

          Unirse

        </button>
      `;
    }

    // -----------------------------------------------
    // EQUIPO
    // -----------------------------------------------

    equiposHTML += `
      <div class="equipo me-2 ms-2 p-3 border rounded">

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

        <div class="jugadores mb-2">
          ${jugadoresHTML}
        </div>

        ${botonUnirseHTML}

      </div>
    `;
  });


  // =================================================
  // TARJETA DE LA SALA
  // =================================================

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

      <div class="sala card p-3 shadow-sm mb-4">

        <div class="sala-header h4 text-center mb-3 text-white">
          ${escapeHTML(
            partida.nombrePartida
          )}
        </div>

        <div class="sala-body">

          <div class="equipos d-flex justify-content-around">
            ${equiposHTML}
          </div>

        </div>

      </div>

    </div>
  `;


  // =================================================
  // IMPORTANTE
  // =================================================
  //
  // NO usamos .html() aquí porque eso eliminaría
  // las salas que ya se hayan mostrado.
  //
  // Usamos .append() para añadir cada nueva sala.
  //

  $("#contenedorSalas").append(
    salaHTML
  );
}


// =====================================================
// CREAR SALA
// =====================================================

$("#btnCrearSala").on(
  "click",
  function () {
    const nombreSala =
      $("#nombreSala").val().trim();

    const nombreEquipo1 =
      $("#nombreEquipo1").val().trim();

    const nombreEquipo2 =
      $("#nombreEquipo2").val().trim();

    let valido = true;

    // Limpiar errores anteriores
    $(".mensaje-error-sala").remove();

    $(".input-kahoot")
      .removeClass("is-invalid");


    // -----------------------------------------------
    // VALIDAR NOMBRE DE SALA
    // -----------------------------------------------

    if (
      nombreSala === "" ||
      nombreSala.length < 3
    ) {
      mostrarError(
        "#nombreSala",
        "El nombre de la sala debe tener al menos 3 caracteres."
      );

      valido = false;
    }


    // -----------------------------------------------
    // VALIDAR EQUIPO 1
    // -----------------------------------------------

    if (
      nombreEquipo1 === "" ||
      nombreEquipo1.length < 2
    ) {
      mostrarError(
        "#nombreEquipo1",
        "El nombre del equipo debe tener al menos 2 caracteres."
      );

      valido = false;
    }


    // -----------------------------------------------
    // VALIDAR EQUIPO 2
    // -----------------------------------------------

    if (
      nombreEquipo2 === "" ||
      nombreEquipo2.length < 2
    ) {
      mostrarError(
        "#nombreEquipo2",
        "El nombre del equipo debe tener al menos 2 caracteres."
      );

      valido = false;
    }


    // -----------------------------------------------
    // LOS EQUIPOS NO PUEDEN TENER EL MISMO NOMBRE
    // -----------------------------------------------

    if (
      nombreEquipo1 !== "" &&
      nombreEquipo2 !== "" &&
      nombreEquipo1.toLowerCase() ===
        nombreEquipo2.toLowerCase()
    ) {
      mostrarError(
        "#nombreEquipo2",
        "Los dos equipos deben tener nombres diferentes."
      );

      valido = false;
    }


    // Si hay errores, no continuar
    if (!valido) {
      return;
    }


    // -----------------------------------------------
    // DESACTIVAR BOTÓN
    // -----------------------------------------------

    const boton = $("#btnCrearSala");

    boton
      .prop("disabled", true)
      .text("Creando sala...");


    // -----------------------------------------------
    // CREAR SALA
    // -----------------------------------------------

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

      data: {
        orden: "crear",
        nombrePartida: nombreSala,
        nombreEquipo1: nombreEquipo1,
        nombreEquipo2: nombreEquipo2,
      },

      success: function (respuesta) {
        if (respuesta.error) {
          alert(respuesta.error);

          boton
            .prop("disabled", false)
            .text("Crear sala");

          return;
        }


        if (respuesta.exito) {
          $("#modalCrearSala").modal(
            "hide"
          );

          location.reload();
        }
      },

      error: function (xhr, status, error) {
        console.error(
          "Error al crear la sala:",
          error
        );

        alert(
          "No se ha podido crear la sala."
        );

        boton
          .prop("disabled", false)
          .text("Crear sala");
      },
    });
  }
);


// =====================================================
// MOSTRAR ERROR DE VALIDACIÓN
// =====================================================

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>
  `);
}


// =====================================================
// LIMPIAR ERRORES AL ESCRIBIR
// =====================================================

$(document).on(
  "input",
  ".input-kahoot",
  function () {
    $(this)
      .removeClass("is-invalid");

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