script.js

let allData = [];

// Génère iframe Bandcamp dynamique
function createPlayer(albumId) {
  return `
    <iframe 
      src="https://bandcamp.com/EmbeddedPlayer/album=${albumId}/size=large/bgcol=111111/linkcol=ffffff/minimal=true/transparent=true/"
      loading="lazy"
      seamless>
    </iframe>
  `;
}

// Render des cards
function render(data) {
  const grid = document.getElementById("grid");

  grid.innerHTML = data.map(item => `
    <div class="card">

      ${createPlayer(item.album)}

      <div class="meta">
        <h3>${item.title}</h3>
        <p class="artist">${item.artist}</p>

        <p class="favorite">
          <span>★</span> ${item.favorite || ""}
        </p>
      </div>

    </div>
  `).join("");
}

// Filtre par genre
function filter(genre) {
  if (genre === "all") {
    render(allData);
  } else {
    render(allData.filter(item => item.genre === genre));
  }
}

function generateFilters(data) {
  const focusBar = document.querySelector(".focus-bar");

  // récupérer tous les genres uniques
  const genres = [...new Set(data.map(item => item.genre))];

  // bouton "all"
  focusBar.innerHTML = `<button onclick="filter('all')" class="active">all</button>`;

  // générer les autres boutons
  genres.forEach(genre => {
    focusBar.innerHTML += `
      <button onclick="filter('${genre}')">${genre}</button>
    `;
  });
}

// Charger les données
fetch("data.json")
  .then(res => res.json())
  .then(data => {
    allData = data;
    generateFilters(data);
    render(data);
  });