triviagmatico/js/buscadorSala.js

let intervaloBuscadorSalas = null;
let cargandoSalas = false;

function iniciarActualizacionSalas() {
  if (intervaloBuscadorSalas) {
    clearInterval(intervaloBuscadorSalas);
  }

  cargarSalas();

  intervaloBuscadorSalas = setInterval(function () {
    if (!usuarioYaEstaEnEquipo) {
      cargarSalas();
    }
  }, 5000);
}

function cargarSalas() {
  if (cargandoSalas) {
    return;
  }

  cargandoSalas = true;

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

    success: function (partidas) {
      const contenedor = $("#contenedorSalas");

      if (!Array.isArray(partidas) || partidas.length === 0) {
        $(".sala-item").remove();

        if ($("#mensajeSinSalas").length === 0) {
          contenedor.append(`
            <div
              id="mensajeSinSalas"
              class="col-12 text-center">

              <p class="text-muted">
                No hay salas disponibles actualmente.
              </p>

            </div>
          `);
        }

        return;
      }

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

      const idsPartidas = partidas.map(function (partida) {
        return String(partida.idPartida);
      });

      $(".sala-item").each(function () {
        const idPartida = String($(this).data("id-partida"));

        if (!idsPartidas.includes(idPartida)) {
          $(this).remove();
        }
      });

      partidas.forEach(function (partida) {
        cargarSalaBuscador(partida);
      });
    },

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

    complete: function () {
      cargandoSalas = false;
    },
  });
}

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) {
          if (
            !Array.isArray(jugadores) ||
            jugadores.length === 0
          ) {
            $(
              `.sala-item[data-id-partida="${partida.idPartida}"]`
            ).remove();

            comprobarSiNoHaySalas();

            return;
          }

          actualizarSalaBuscador(
            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 comprobarSiNoHaySalas() {
  if ($(".sala-item").length === 0) {
    if ($("#mensajeSinSalas").length === 0) {
      $("#contenedorSalas").append(`
        <div
          id="mensajeSinSalas"
          class="col-12 text-center">

          <p class="text-muted">
            No hay salas disponibles actualmente.
          </p>

        </div>
      `);
    }
  }
}

function actualizarSalaBuscador(
  partida,
  equipos,
  jugadores
) {
  $("#mensajeSinSalas").remove();

  const selectorSala =
    `.sala-item[data-id-partida="${partida.idPartida}"]`;

  const salaExistente = $(selectorSala);

  if (salaExistente.length === 0) {
    crearSalaBuscador(
      partida,
      equipos,
      jugadores
    );

    return;
  }

  const equiposHTML =
    generarEquiposHTML(
      partida,
      equipos,
      jugadores
    );

  salaExistente
    .find(".equipos")
    .html(equiposHTML);
}

function crearSalaBuscador(
  partida,
  equipos,
  jugadores
) {
  $("#mensajeSinSalas").remove();

  const equiposHTML =
    generarEquiposHTML(
      partida,
      equipos,
      jugadores
    );

  const salaHTML = `
    <div
      class="col-12 col-md-10 col-lg-8 sala-item"
      data-id-partida="${partida.idPartida}">

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

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

function generarEquiposHTML(
  partida,
  equipos,
  jugadores
) {
  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) {
        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>
      `;
    }

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

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

  return equiposHTML;
}

$("#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 === "" ||
    nombreSala.length < 3
  ) {
    mostrarError(
      "#nombreSala",
      "El nombre de la sala debe tener al menos 3 caracteres."
    );

    valido = false;
  }

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

    valido = false;
  }

  if (
    nombreEquipo2 === "" ||
    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;
  }

  const boton = $("#btnCrearSala");

  boton
    .prop("disabled", true)
    .text("Creando 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");
    },
  });
});

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

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

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