---
layout: default
title: MMPSearch - Projetos
permalink: /projetos/
---

{% assign list_plugins = "" %}{% assign list_instruments = "" %} {% for p in
site.data.all %}{% for item in p.tags.plugin %}{% assign list_plugins =
list_plugins | append: item | append: "|||" %}{% endfor %}{% endfor %} {% assign
unique_plugins = list_plugins | split: "|||" | uniq | sort %}

<div class="publication">
  <div class="container is-fluid">
    <br />
    <div class="tabs is-centered is-boxed is-medium mb-5">
      {% include sidebar.html %}
    </div>

    <div class="columns is-vcentered mb-4">
      <div class="column">
        <h1 class="title is-3 has-text-grey-dark">📁 Projetos Disponíveis</h1>
      </div>
      <div class="column is-narrow">
        <div class="field is-grouped">
          <div class="control">
            <div class="select is-small is-rounded">
              <select id="sort-select">
                <option value="default">Ordem Alfabética</option>
                <option value="bpm_desc">BPM (Rápido)</option>
              </select>
            </div>
          </div>
          <div class="control">
            <button
              id="reset-all-filters"
              class="button is-danger is-light is-small"
            >
              Limpar Tudo
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="columns">
      <div class="column is-3">
        <div class="box p-3" style="background: #fcfcfc">
          <div class="field mb-5">
            <label class="label is-size-7">BUSCA TEXTUAL</label>
            <div class="control has-icons-left">
              <input
                class="input is-small"
                type="text"
                id="search-input"
                placeholder="Nome, plugin..."
              /><span class="icon is-small is-left"
                ><i class="fa-solid fa-magnifying-glass"></i
              ></span>
            </div>
          </div>
          <hr />
          <details open>
            <summary
              class="menu-label has-text-weight-bold mb-2"
              style="cursor: pointer"
            >
              🥁 Pattern Rítmico
            </summary>
            <div
              id="pattern-search-box"
              style="
                display: flex;
                gap: 4px;
                flex-wrap: wrap;
                justify-content: center;
              "
            >
              ${Array.from({length: 16}).map((_, i) => `
              <div
                class="search-step"
                data-index="${i}"
                style="
                  width: 22px;
                  height: 35px;
                  background: #eee;
                  border: 1px solid #ccc;
                  border-radius: 3px;
                  cursor: pointer;
                "
              ></div>
              `).join('')}
            </div>
          </details>
          <hr />
          <label class="label is-size-7">BPM RANGE</label>
          <div class="columns is-mobile is-variable is-1">
            <div class="column">
              <input
                class="input is-small"
                type="number"
                id="bpm-min"
                value="0"
              />
            </div>
            <div class="column">
              <input
                class="input is-small"
                type="number"
                id="bpm-max"
                value="300"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="column is-9">
        <div class="notification is-info is-light mb-4" id="results-count-bar">
          Encontrados <span id="visible-count">0</span> projetos.
        </div>
        <div id="project-list" class="columns is-multiline"></div>
        <div id="no-results" class="has-text-centered is-hidden mt-6">
          <p class="subtitle has-text-grey">Nenhum projeto encontrado.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .search-step.is-active {
    background-color: #3273dc !important;
    border-color: #205081 !important;
  }
  .project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(50, 115, 220, 0.15);
    border-color: #3273dc !important;
    transition: 0.3s;
  }
  .pattern-mini-grid {
    display: inline-flex;
    gap: 1px;
    padding: 2px;
    border: 1px solid #deeaf6;
    border-radius: 2px;
    background: #fff;
    margin-right: 2px;
  }
  .mini-step {
    width: 3px;
    height: 6px;
    border-radius: 1px;
  }
  .mini-step.active {
    background-color: #3273dc;
  }
  .mini-step.inactive {
    background-color: #eee;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const projectList = document.getElementById("project-list");
    const searchInput = document.getElementById("search-input");
    const bpmMin = document.getElementById("bpm-min");
    const bpmMax = document.getElementById("bpm-max");
    const countSpan = document.getElementById("visible-count");
    const searchSteps = document.querySelectorAll(".search-step");

    let allData = [];
    let activePatternChunks = [];

    // 1. Carregar Dados
    fetch(
      '{{ "/mmpSearch/src_mmpSearch/saida_analises/db_final_completo.json" | relative_url }}',
    )
      .then((r) => r.json())
      .then((data) => {
        allData = data;
        renderCards(allData);
        applyFilters();
      });

    // 2. Função de Renderização de Cards
    function renderCards(data) {
      projectList.innerHTML = data
        .map((p) => {
          const pBpm = p.bpm || 0;
          // Extração de chunks para o filtro de pattern (lógica idêntica ao original)
          let chunks = [];
          p.tracks?.forEach((t) => {
            (t.instruments || [t]).forEach((inst) => {
              inst.patterns?.forEach((pat) => {
                for (let i = 0; i < (pat.steps?.length || 0); i += 4) {
                  const chunk = pat.steps
                    .slice(i, i + 4)
                    .map((s) => (s ? "1" : "0"))
                    .join("");
                  if (chunk !== "0000" && !chunks.includes(chunk))
                    chunks.push(chunk);
                }
              });
            });
          });

          return `
                <div class="column is-4 project-item" 
                     data-name="${p.file.toLowerCase()}" 
                     data-bpm="${pBpm}" 
                     data-patterns="${chunks.join(",")}">
                    <div class="card project-card" style="height: 100%; border-radius: 12px; border: 1px solid #cfe8fc; display: flex; flex-direction: column;">
                        <a href="{{ '/projeto/?id=' | relative_url }}${p.file}" style="text-decoration: none; flex: 1;">
                            <div class="card-content has-text-centered p-4">
                                <div style="width: 50px; height: 50px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px;">
                                    <span class="icon" style="color: #3273dc;"><i class="fa-solid fa-music fa-lg"></i></span>
                                </div>
                                <p class="title is-6 mb-2" style="color: #205081;">${p.file.replace(".html", "")}</p>
                                <div class="bpm-tag mb-3">
                                    <span class="tag is-dark is-rounded is-light">🎵 ${pBpm} BPM</span>
                                </div>
                                <div class="patterns-preview" style="min-height: 20px;">
                                    ${chunks
                                      .slice(0, 5)
                                      .map(
                                        (c) => `
                                        <div class="pattern-mini-grid">
                                            ${c
                                              .split("")
                                              .map(
                                                (b) =>
                                                  `<div class="mini-step ${b === "1" ? "active" : "inactive"}"></div>`,
                                              )
                                              .join("")}
                                        </div>
                                    `,
                                      )
                                      .join("")}
                                </div>
                            </div>
                        </a>
                        <footer class="card-footer" style="border-top: 1px solid #cfe8fc;">
                            <a href="{{ '/projeto/?id=' | relative_url }}${p.file}" class="card-footer-item" style="font-size: 0.8rem; font-weight: 600;">Ver Detalhes</a>
                        </footer>
                    </div>
                </div>`;
        })
        .join("");
    }

    // 3. Lógica de Filtro
    function applyFilters() {
      const text = searchInput.value.toLowerCase();
      const min = parseInt(bpmMin.value) || 0;
      const max = parseInt(bpmMax.value) || 999;
      let count = 0;

      document.querySelectorAll(".project-item").forEach((item) => {
        const name = item.dataset.name;
        const bpm = parseInt(item.dataset.bpm);
        const pPatterns = item.dataset.patterns.split(",");

        const matchText = name.includes(text);
        const matchBpm = bpm >= min && bpm <= max;
        const matchPattern =
          activePatternChunks.length === 0 ||
          activePatternChunks.every((c) => pPatterns.includes(c));

        if (matchText && matchBpm && matchPattern) {
          item.style.display = "block";
          count++;
        } else {
          item.style.display = "none";
        }
      });
      countSpan.textContent = count;
    }

    // 4. Event Listeners
    searchInput.addEventListener("input", applyFilters);
    bpmMin.addEventListener("input", applyFilters);
    bpmMax.addEventListener("input", applyFilters);

    searchSteps.forEach((step) => {
      step.addEventListener("click", function () {
        this.classList.toggle("is-active");
        updatePatternChunks();
        applyFilters();
      });
    });

    function updatePatternChunks() {
      let full = Array.from(searchSteps)
        .map((s) => (s.classList.contains("is-active") ? "1" : "0"))
        .join("");
      activePatternChunks = (full.match(/.{1,4}/g) || []).filter(
        (c) => c !== "0000",
      );
    }

    document
      .getElementById("reset-all-filters")
      .addEventListener("click", () => {
        searchInput.value = "";
        bpmMin.value = 0;
        bpmMax.value = 300;
        searchSteps.forEach((s) => s.classList.remove("is-active"));
        activePatternChunks = [];
        applyFilters();
      });
  });
</script>