Teste de filtros de projetos

pages/projetos.md

@@ -348,10 +348,9 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   function enrichCards(data) {
-    // 1. Cria um mapa para busca rápida (O(N))
+    // 1. Cria um mapa para busca rápida
     const mapDados = {};
     data.forEach(item => {
-        // Mapeia tanto pelo nome do arquivo quanto pelo título do projeto
         const keyArquivo = normalizarChaveJS(item.arquivo.replace('.wav','').replace('.mp3',''));
         mapDados[keyArquivo] = item;
         
@@ -363,41 +362,42 @@ document.addEventListener('DOMContentLoaded', () => {
 
     cards.forEach(card => {
       const cardKey = normalizarChaveJS(card.dataset.title);
-      // 2. Busca instantânea (O(1))
+      // 2. Busca instantânea
-      const info = mapDados[cardKey]; // <--- A variável foi definida aqui como 'info'
+      const info = mapDados[cardKey]; 
       
       if (info) {
-        // 1. Salvar Metadados nos atributos HTML
+        // --- 1. Metadados para Filtros ---
         card.dataset.genre = (info.analise_ia && info.analise_ia.genero_macro) ? info.analise_ia.genero_macro : "Unknown";
         card.dataset.intensity = (info.analise_tecnica && info.analise_tecnica.intensidade_db) ? parseFloat(info.analise_tecnica.intensidade_db) : 0;
         card.dataset.bpm_real = (info.analise_tecnica && info.analise_tecnica.bpm) ? parseFloat(info.analise_tecnica.bpm) : 0;
 
-        // 2. Injetar Etiquetas Visuais no Card
+        // --- 2. Lógica das Estrelas ---
-        const bpmContainer = card.querySelector('.bpm-container');
-        
-        // CORREÇÃO AQUI: Verificamos se 'info' tem complexidade antes de tentar ler, para não quebrar o código
         let numeroEstrelas = 0;
-        if (info.analise_tecnica.complexidade && info.analise_tecnica.complexidade.estrelas) {
+        // Verifica se existe o objeto complexidade e o valor estrelas
+        if (info.analise_tecnica && info.analise_tecnica.complexidade && info.analise_tecnica.complexidade.estrelas) {
             numeroEstrelas = info.analise_tecnica.complexidade.estrelas;
         }
-        
-        // Agora usamos a variável correta e o valor seguro
         const estrelasHTML = gerarEstrelas(numeroEstrelas);
+
+        // --- 3. Injeção Visual (HTML) ---
+        const bpmContainer = card.querySelector('.bpm-container');
         
-        // Se achou o container do BPM, insere as novas tags logo após
         if (bpmContainer) {
+            // Cria container para as novas tags
             const iaTagsDiv = document.createElement('div');
             iaTagsDiv.className = "tags is-centered mt-1 mb-3";
             iaTagsDiv.style.opacity = "0.9";
+            iaTagsDiv.style.flexDirection = "column"; // Organiza em linhas (estrelas em cima, tags em baixo)
+
+            let htmlFinal = '';
+
+            // A) Adiciona as Estrelas
+            htmlFinal += `<div class="mb-1" style="font-size: 0.8rem;">${estrelasHTML}</div>`;
             
-            // CRIAÇÃO DO HTML FINAL
+            // Container para as tags (Genero + Tom)
-            let tagsHtml = '';
+            htmlFinal += '<div class="tags is-centered">';
 
-            // 1. INJETAR AS ESTRELAS (Esta é a parte que faltava)
+            // B) Tag de Gênero IA
-            // Adicionamos uma verificação: só mostra se tiver estrelas > 0 ou se você quiser mostrar as vazias
-            tagsHtml += `<div style="width: 100%; margin-bottom: 4px;">${estrelasHTML}</div>`;
-
-            // 2. Tag de Gênero IA
             if (info.analise_ia.genero_macro && info.analise_ia.genero_macro !== "Unknown") {
                 const genero = info.analise_ia.genero_macro;
                 let colorClass = 'is-primary'; 
@@ -405,25 +405,27 @@ document.addEventListener('DOMContentLoaded', () => {
                 if(genero === 'Hip Hop') colorClass = 'is-warning';
                 if(genero === 'Rock') colorClass = 'is-danger';
 
-                tagsHtml += `<span class="tag ${colorClass} is-light is-rounded" style="font-size: 0.65rem; border: 1px solid transparent;" title="Gênero detectado por IA">
+                htmlFinal += `<span class="tag ${colorClass} is-light is-rounded mr-1" style="font-size: 0.65rem;" title="Gênero IA">
                                 🤖 ${genero}
                              </span>`;
             }
 
-            // Tag de Tom (Musical Key)
+            // C) Tag de Tom (Musical Key)
-            if (info.analise_tecnica.tom && info.analise_tecnica.escala) {
+            if (info.analise_tecnica.tom) {
                 const nota = info.analise_tecnica.tom;
-                const escala = info.analise_tecnica.escala === 'minor' ? 'm' : ''; // 'm' para menor, nada para maior
+                const escala = info.analise_tecnica.escala === 'minor' ? 'm' : ''; 
-                tagsHtml += `<span class="tag is-white is-rounded" style="font-size: 0.65rem; border: 1px solid #ddd; color: #555;">
+                htmlFinal += `<span class="tag is-white is-rounded" style="font-size: 0.65rem; border: 1px solid #ddd; color: #555;">
                                 🎹 ${nota}${escala}
                              </span>`;
             }
+            
+            htmlFinal += '</div>'; // Fecha container tags
 
-            iaTagsDiv.innerHTML = tagsHtml;
+            iaTagsDiv.innerHTML = htmlFinal;
             bpmContainer.appendChild(iaTagsDiv);
         }
       } else {
-          // Se não achou dados, marca como desconhecido para filtros
+          // Se não achou dados
           card.dataset.genre = "Outros";
           card.dataset.intensity = -1;
       }