314 lines
11 KiB
HTML
Executable File
314 lines
11 KiB
HTML
Executable File
---
|
|
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>
|