reformula buscas

pages/projetos.html

@@ -116,6 +116,28 @@ permalink: /projetos/
               </div>
               <hr class="my-3">
 
+              <details>
+                  <summary class="menu-label has-text-weight-bold mb-2 clickable-summary">🥁 Pattern Rítmico</summary>
+                  <div class="filter-header-actions">
+                      <button class="button is-ghost is-small p-0 js-clear-group" data-target="pattern" style="height: auto; font-size: 0.65rem;">
+                          <span class="icon"><i class="fa-solid fa-eraser"></i></span> <span>Limpar</span>
+                      </button>
+                  </div>
+                  <div class="filter-content px-1 pb-2 has-text-centered">
+                      <p class="is-size-7 has-text-grey mb-2">Desenhe o ritmo:</p>
+                      <div id="pattern-search-box" style="display: flex; gap: 4px; justify-content: center; flex-wrap: wrap;">
+                          {% for i in (0..15) %}
+                              {% assign mod = i | modulo: 4 %}
+                              {% if i > 0 and mod == 0 %}<div style="width: 100%; height: 0px; flex-basis: 100%;"></div>{% endif %}
+                              <div class="search-step" data-index="{{i}}" 
+                                   style="width: 22px; height: 35px; background: #eee; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; transition: all 0.1s;">
+                              </div>
+                          {% endfor %}
+                      </div>
+                      <p class="help is-size-7 mt-1 has-text-grey-light">Clique para ativar steps</p>
+                  </div>
+              </details>
+              <hr class="my-3">
               <details open>
                   <summary class="menu-label has-text-weight-bold mb-2 clickable-summary">Gêneros (IA)</summary>
                   <div class="filter-header-actions">
@@ -217,8 +239,37 @@ permalink: /projetos/
               
                 {% assign raw_bpm = page.bpm | append: "" %}
                 {% if raw_bpm == "" or raw_bpm == "N/A" or raw_bpm == "nil" %}{% assign p_bpm = 0 %}{% else %}{% assign p_bpm = raw_bpm | plus: 0 %}{% endif %}
+                
                 {% assign p_insts_array = "" | split: "," %}
-{% for track in page.tracks %}{% if track.instruments %}{% for inst in track.instruments %}{% if inst.instrument_name %}{% assign p_insts_array = p_insts_array | push: inst.instrument_name %}{% endif %}{% endfor %}{% elsif track.instrument_name %}{% assign p_insts_array = p_insts_array | push: track.instrument_name %}{% endif %}{% endfor %}
+                
+                {% assign project_patterns_flat = "" | split: "," %}
+                {% for track in page.tracks %}
+                    {% if track.instruments %}{% for inst in track.instruments %}{% if inst.instrument_name %}{% assign p_insts_array = p_insts_array | push: inst.instrument_name %}{% endif %}
+                        {% if inst.patterns %}
+                            {% for pattern in inst.patterns %}
+                                {% assign pattern_steps = pattern.steps %}
+                                {% if pattern_steps and pattern_steps.size > 0 %}
+                                    {% assign chunk_string = "" %}
+                                    {% assign step_count = 0 %}
+                                    {% for step in pattern_steps %}
+                                        {% if step == true or step == 'true' or step == 1 %}{% assign chunk_string = chunk_string | append: '1' %}{% else %}{% assign chunk_string = chunk_string | append: '0' %}{% endif %}
+                                        {% assign step_count = step_count | plus: 1 %}
+                                        {% if step_count == 4 %}
+                                            {% unless project_patterns_flat contains chunk_string %}
+                                                {% assign project_patterns_flat = project_patterns_flat | push: chunk_string %}
+                                            {% endunless %}
+                                            {% assign chunk_string = "" %}
+                                            {% assign step_count = 0 %}
+                                        {% endif %}
+                                    {% endfor %}
+                                {% endif %}
+                            {% endfor %}
+                        {% endif %}
+                    {% endfor %}
+                    {% elsif track.instrument_name %}{% assign p_insts_array = p_insts_array | push: track.instrument_name %}{% endif %}
+                {% endfor %}
+                
+                {% assign p_patterns_str = project_patterns_flat | join: ',' %}
                 {% assign p_instruments_str = p_insts_array | uniq | join: ',' %}
                 {% assign p_plugins = page.tags.plugin | join: ',' %}
                 {% assign p_bassline = page.tags.bassline | join: ',' %}
@@ -226,7 +277,7 @@ permalink: /projetos/
                 {% assign p_samples = page.tags.sample | join: ',' %}
                 {% assign p_name = page.title | default: page.name | downcase %}
 
-<div class="column is-12-mobile is-6-tablet is-4-desktop is-4-widescreen project-item" data-name="{{ p_name }}" data-title="{{ page.title | escape }}" data-bpm="{{ p_bpm }}" data-plugins="{{ p_plugins }}" data-bassline="{{ p_bassline }}" data-automation="{{ p_automation }}" data-instruments="{{ p_instruments_str }}" data-samples="{{ p_samples }}">
+                <div class="column is-12-mobile is-6-tablet is-4-desktop is-4-widescreen project-item" data-name="{{ p_name }}" data-title="{{ page.title | escape }}" data-bpm="{{ p_bpm }}" data-plugins="{{ p_plugins }}" data-bassline="{{ p_bassline }}" data-automation="{{ p_automation }}" data-instruments="{{ p_instruments_str }}" data-samples="{{ p_samples }}" data-patterns="{{ p_patterns_str }}">
 
 <div class="card project-card" data-title="{{ page.title | escape }}" style="height: 100%; background-color: #f0f8ff; border: 1px solid #cfe8fc; border-radius: 12px; display: flex; flex-direction: column; position: relative;">
 
@@ -394,6 +445,11 @@ permalink: /projetos/
     input[type="range"]::-moz-range-thumb {
         pointer-events: all; width: 16px; height: 16px; background-color: #3273dc; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
     }
+    /* Estilo Steps */
+    .search-step.is-active {
+        background-color: #3273dc !important;
+        border-color: #205081 !important;
+    }
 </style>
 
 <script>
@@ -410,6 +466,10 @@ document.addEventListener('DOMContentLoaded', function () {
     const inputMax = document.getElementById('bpm-max');
     const sliderTrack = document.getElementById('slider-track');
     
+    // Pattern Search
+    const searchSteps = document.querySelectorAll('.search-step');
+    let activePatternChunks = [];
+
     // Controles Gerais
     const resetBtn = document.getElementById('reset-all-filters');
     const countBar = document.getElementById('results-count-bar');
@@ -460,6 +520,24 @@ document.addEventListener('DOMContentLoaded', function () {
     });
     fillSlider(defMin, defMax); // Init
 
+    // --- 2.5 LÓGICA DO PATTERN SEARCH ---
+    searchSteps.forEach(step => {
+        step.addEventListener('click', function() {
+            this.classList.toggle('is-active');
+            updatePatternChunks();
+            applyGlobalFilters();
+        });
+    });
+
+    function updatePatternChunks() {
+        let fullPattern = "";
+        searchSteps.forEach(step => {
+            fullPattern += step.classList.contains('is-active') ? "1" : "0";
+        });
+        const rawChunks = fullPattern.match(/.{1,4}/g) || [];
+        activePatternChunks = rawChunks.filter(c => c !== "0000");
+    }
+
     // --- 3. ENRIQUECIMENTO DOS CARDS COM JSON ---
     const JSON_URL = '/mmpSearch/src_mmpSearch/saida_analises/db_final_completo.json';
 
@@ -469,7 +547,7 @@ document.addEventListener('DOMContentLoaded', function () {
             enrichCards(data);
             createGenreCheckboxes(data);
             
-            // Recalcula limites de BPM com base nos dados reais (Opcional, mas ajusta o maximo)
+            // Recalcula limites de BPM
             const bpms = data.map(i => parseFloat(i.analise_tecnica?.bpm || 0)).filter(b => b > 0);
             if(bpms.length > 0) {
                  const maxData = Math.ceil(Math.max(...bpms));
@@ -541,22 +619,17 @@ document.addEventListener('DOMContentLoaded', function () {
             item.setAttribute('data-intensity', intensidade);
             item.setAttribute('data-key', tomRaw);
             
-            // Se o JSON tiver um BPM real, usamos ele (sobrescrevendo o do Liquid se precisar)
-            // Se o projeto for 0, mas o JSON tiver valor, atualizamos.
             if(bpm > 0) {
                 item.setAttribute('data-bpm-real', bpm);
-                // Atualiza o atributo usado no filtro se o liquid falhou
                 if(item.getAttribute('data-bpm') == "0") item.setAttribute('data-bpm', Math.round(bpm));
             }
 
             const bpmContainer = card.querySelector('.bpm-container');
             if(bpmContainer) {
-                // Mantém o BPM original se existir, ou o novo do JSON
                 let bpmDisplay = "";
                 if(bpm > 0) {
                      bpmDisplay = `<span class="tag is-dark is-rounded is-light" style="font-size: 0.7rem; font-weight: bold; border: 1px solid #ccc;">🎵 ${Math.round(bpm)} BPM</span>`;
                 } else if (item.getAttribute('data-bpm') != "0") {
-                     // Mantém o que veio do Liquid se for válido
                      bpmDisplay = bpmContainer.innerHTML;
                 } else {
                      bpmDisplay = `<span class="tag is-white is-rounded border-tag" style="font-size: 0.65rem; color: #999;">⚠️ BPM N/A</span>`;
@@ -635,7 +708,6 @@ document.addEventListener('DOMContentLoaded', function () {
         
         document.querySelectorAll('.project-item').forEach(item => {
             const pName = item.getAttribute('data-name') || "";
-            // Garante que é número. Se "0" ou "NaN", vira 0.
             let pBpm = parseInt(item.getAttribute('data-bpm'));
             if(isNaN(pBpm)) pBpm = 0;
 
@@ -645,6 +717,10 @@ document.addEventListener('DOMContentLoaded', function () {
             const pBassline = (item.getAttribute('data-bassline') || "").split(',');
             const pAutomation = (item.getAttribute('data-automation') || "").split(',');
             
+            // PATTERN SEARCH
+            const pPatternsStr = item.getAttribute('data-patterns') || "";
+            const pPatterns = pPatternsStr.split(',');
+            
             const pGenre = (item.getAttribute('data-genre') || "").toLowerCase();
             const pSubs = (item.getAttribute('data-subgenres') || "").toLowerCase();
             const pTagsIA = pGenre + "," + pSubs;
@@ -666,11 +742,14 @@ document.addEventListener('DOMContentLoaded', function () {
             const fullMeta = [pName, pBpm, pInsts, pPlugins, pTagsIA].join(' ').toLowerCase();
             const matchText = searchText === "" || fullMeta.includes(searchText);
 
-            if (matchInst && matchPlugin && matchSample && matchBassline && matchAuto && matchBpm && matchText && matchGenres && matchKeys && matchStars) {
+            // MATCH PATTERN: Projeto deve ter TODOS os chunks desenhados
+            const matchPattern = activePatternChunks.length === 0 || activePatternChunks.every(chunk => pPatterns.includes(chunk));
+
+            if (matchInst && matchPlugin && matchSample && matchBassline && matchAuto && matchBpm && matchText && matchGenres && matchKeys && matchStars && matchPattern) {
                 item.style.display = 'block';
                 visibleCount++;
                 
-                // Highlight
+                // Highlight Logic
                 const clickableTags = item.querySelectorAll('.clickable-tag');
                 clickableTags.forEach(t => t.classList.remove('is-matched-tag'));
 
@@ -729,6 +808,10 @@ document.addEventListener('DOMContentLoaded', function () {
             const target = btn.dataset.target;
             if(target === 'bpm') {
                 sliderMin.value = sliderMin.min; sliderMax.value = sliderMax.max; updateSlider();
+            } else if (target === 'pattern') {
+                searchSteps.forEach(s => s.classList.remove('is-active'));
+                updatePatternChunks();
+                applyGlobalFilters();
             } else {
                 document.querySelectorAll(`.filter-checkbox[data-category="${target}"]`).forEach(cb => {
                     cb.checked = false;
@@ -742,6 +825,8 @@ document.addEventListener('DOMContentLoaded', function () {
     resetBtn.addEventListener('click', () => {
         document.querySelectorAll('.filter-checkbox').forEach(cb => { cb.checked = false; cb.parentElement.classList.remove('is-checked'); });
         searchInput.value = ""; searchText = "";
+        searchSteps.forEach(s => s.classList.remove('is-active'));
+        updatePatternChunks();
         sliderMin.value = sliderMin.min; sliderMax.value = sliderMax.max; updateSlider();
         starFilterSelect.value = 'all'; currentMinStars = 'all'; sortSelect.value = 'default';
         updateActiveSidebar();