photobooth/frontend/js/effects.js

/* Module effets - Filtres, overlays et fond vert */

let filtreActuel = 'original';
let overlayActuel = null;
let fondActuel = null;

async function chargerFiltres() {
  const filtres = await apiGet('/api/filtres');
  const barre = document.getElementById('barre-filtres');
  barre.innerHTML = '';

  for (const [id, nom] of Object.entries(filtres)) {
    const btn = document.createElement('button');
    btn.className = 'btn-filtre' + (id === 'original' ? ' actif' : '');
    btn.textContent = nom;
    btn.addEventListener('click', () => appliquerFiltreUI(id, btn));
    barre.appendChild(btn);
  }
}

async function appliquerFiltreUI(filtre, btn) {
  document.querySelectorAll('.btn-filtre').forEach(b => b.classList.remove('actif'));
  btn.classList.add('actif');
  filtreActuel = filtre;

  if (filtre === 'original') {
    const chemin = '/data/photos/' + photosSession[0];
    document.getElementById('photo-resultat').src = chemin;
    document.getElementById('photo-partage').src = chemin;
    photoFinale = photosSession[0];
    return;
  }

  const resultat = await apiPost('/api/filtre', {
    photo: photosSession[0],
    filtre: filtre,
  });

  if (resultat.nom) {
    photoFinale = resultat.nom;
    document.getElementById('photo-resultat').src = '/data/exports/' + resultat.nom;
    document.getElementById('photo-partage').src = '/data/exports/' + resultat.nom;
  }
}

async function chargerOverlays() {
  const overlays = await apiGet('/api/overlays');
  const barre = document.getElementById('barre-overlays');

  if (overlays.length === 0) {
    barre.classList.add('cache');
    return;
  }

  barre.classList.remove('cache');
  barre.innerHTML = '';

  const btnAucun = document.createElement('button');
  btnAucun.className = 'btn-overlay actif';
  btnAucun.textContent = 'Sans cadre';
  btnAucun.addEventListener('click', () => retirerOverlay(btnAucun));
  barre.appendChild(btnAucun);

  for (const nom of overlays) {
    const btn = document.createElement('button');
    btn.className = 'btn-overlay';
    btn.textContent = nom.replace('.png', '');
    btn.addEventListener('click', () => appliquerOverlayUI(nom, btn));
    barre.appendChild(btn);
  }
}

async function appliquerOverlayUI(nom, btn) {
  document.querySelectorAll('.btn-overlay').forEach(b => b.classList.remove('actif'));
  btn.classList.add('actif');
  overlayActuel = nom;

  const photo = photosSession[0];
  const resultat = await apiPost('/api/overlay', { photo, overlay: nom });

  if (resultat.nom) {
    photoFinale = resultat.nom;
    document.getElementById('photo-resultat').src = '/data/exports/' + resultat.nom;
    document.getElementById('photo-partage').src = '/data/exports/' + resultat.nom;
  }
}

function retirerOverlay(btn) {
  document.querySelectorAll('.btn-overlay').forEach(b => b.classList.remove('actif'));
  btn.classList.add('actif');
  overlayActuel = null;

  if (filtreActuel !== 'original') {
    appliquerFiltreUI(filtreActuel, document.querySelector('.btn-filtre.actif'));
  } else {
    const chemin = '/data/photos/' + photosSession[0];
    document.getElementById('photo-resultat').src = chemin;
    document.getElementById('photo-partage').src = chemin;
    photoFinale = photosSession[0];
  }
}

// === Fond vert (chroma key) ===

async function chargerFonds() {
  const fonds = await apiGet('/api/fonds');
  const barre = document.getElementById('barre-fonds');

  if (!config.fonctionnalites?.chroma_key || fonds.length === 0) {
    barre.classList.add('cache');
    return;
  }

  barre.classList.remove('cache');
  barre.innerHTML = '';
  fondActuel = null;

  // Bouton "original" (pas de chroma key)
  const btnOriginal = document.createElement('button');
  btnOriginal.className = 'btn-fond actif';
  btnOriginal.innerHTML = '<span style="font-size:0.7rem;color:var(--texte-secondaire)">Original</span>';
  btnOriginal.addEventListener('click', () => retirerFond(btnOriginal));
  barre.appendChild(btnOriginal);

  for (const nom of fonds) {
    const btn = document.createElement('button');
    btn.className = 'btn-fond';
    const img = document.createElement('img');
    img.src = `/assets/backgrounds/${nom}`;
    img.alt = nom;
    btn.appendChild(img);
    btn.addEventListener('click', () => appliquerFondUI(nom, btn));
    barre.appendChild(btn);
  }
}

async function appliquerFondUI(nom, btn) {
  document.querySelectorAll('.btn-fond').forEach(b => b.classList.remove('actif'));
  btn.classList.add('actif');
  fondActuel = nom;

  const photo = photosSession[0];
  const resultat = await apiPost('/api/chroma', { photo, fond: nom });

  if (resultat.nom) {
    photoFinale = resultat.nom;
    document.getElementById('photo-resultat').src = '/data/exports/' + resultat.nom;
    document.getElementById('photo-partage').src = '/data/exports/' + resultat.nom;
  }
}

function retirerFond(btn) {
  document.querySelectorAll('.btn-fond').forEach(b => b.classList.remove('actif'));
  btn.classList.add('actif');
  fondActuel = null;

  // Revenir a la photo originale ou avec filtre
  if (filtreActuel !== 'original') {
    appliquerFiltreUI(filtreActuel, document.querySelector('.btn-filtre.actif'));
  } else {
    const chemin = '/data/photos/' + photosSession[0];
    document.getElementById('photo-resultat').src = chemin;
    document.getElementById('photo-partage').src = chemin;
    photoFinale = photosSession[0];
  }
}