main.js

import ShaderSlider, { EFFECTS } from './ShaderSlider.js';

// ─── Данные слайдов ───────────────────────────────────────────────────────────
const SLIDES = [
  { src: 'img/1.jpg', title: 'Slide One',   sub: '2021 · Marvel Studios' },
  { src: 'img/2.jpg', title: 'Slide Two',   sub: '2021 · Marvel Studios' },
  { src: 'img/3.jpg', title: 'Slide Three', sub: '2021 · Marvel Studios' },
  { src: 'img/4.jpg', title: 'Slide Four',  sub: '2021 · Marvel Studios' },
  { src: 'img/5.jpg', title: 'Slide Five',  sub: '2021 · Marvel Studios' },
  { src: 'img/6.jpg', title: 'Slide Six',   sub: '2021 · Marvel Studios' },
];

// ─── Инициализация библиотеки ─────────────────────────────────────────────────
const slider = new ShaderSlider({
  container : document.getElementById('slider'),
  images    : SLIDES.map(s => s.src),
  effect    : 'wind',
  duration  : 900,
  autoplay  : 4000,
  loop      : true,
  onChange  : (index) => updateUI(index),
});

// ─── UI ───────────────────────────────────────────────────────────────────────
const lblEl     = document.getElementById('lbl');
const ttlEl     = document.getElementById('ttl');
const subEl     = document.getElementById('sub');
const contentEl = document.getElementById('slide-content');
const dotsEl    = document.getElementById('dots');
const pickerEl  = document.getElementById('picker');

// Dots
SLIDES.forEach((_, i) => {
  const d = document.createElement('div');
  d.className = 'dot' + (i === 0 ? ' active' : '');
  d.addEventListener('click', () => slider.goTo(i));
  dotsEl.appendChild(d);
});

function updateUI(index) {
  const slide = SLIDES[index];
  lblEl.textContent = `${String(index + 1).padStart(2,'0')} / ${String(SLIDES.length).padStart(2,'0')}`;
  ttlEl.textContent = slide.title;
  subEl.textContent = slide.sub;

  // fade анимация контента
  contentEl.classList.add('fade');
  setTimeout(() => contentEl.classList.remove('fade'), 50);

  document.querySelectorAll('.dot').forEach((d, i) =>
    d.classList.toggle('active', i === index));
}

// Первоначальный рендер UI
updateUI(0);

// Nav
document.getElementById('prev').addEventListener('click', () => slider.prev());
document.getElementById('next').addEventListener('click', () => slider.next());

// Keyboard
window.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight') slider.next();
  if (e.key === 'ArrowLeft')  slider.prev();
});

// Touch
let tx0 = null;
document.getElementById('slider').addEventListener('touchstart', e => {
  tx0 = e.touches[0].clientX;
}, { passive: true });
document.getElementById('slider').addEventListener('touchend', e => {
  if (tx0 === null) return;
  const dx = e.changedTouches[0].clientX - tx0;
  if (Math.abs(dx) > 40) dx < 0 ? slider.next() : slider.prev();
  tx0 = null;
}, { passive: true });

// Pause autoplay on hover
const el = document.getElementById('slider');
el.addEventListener('mouseenter', () => slider.pauseAutoplay());
el.addEventListener('mouseleave', () => slider.resumeAutoplay());

// Shader picker — перебираем все встроенные эффекты
Object.keys(EFFECTS).forEach(name => {
  const btn = document.createElement('button');
  btn.textContent = name;
  if (name === 'wind') btn.classList.add('active');
  btn.addEventListener('click', () => {
    slider.setEffect(name);
    document.querySelectorAll('#picker button').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
  });
  pickerEl.appendChild(btn);
});

// ─── Пример: свой кастомный эффект прямо здесь ───────────────────────────────
// Любой GLSL можно передать напрямую без правки библиотеки:
//
// const myEffect = `
//   void main() {
//     float x = smoothstep(0.0, 1.0, progress * 2.0 + vUv.x - 1.0);
//     gl_FragColor = mix(texture2D(tA, vUv), texture2D(tB, vUv), x);
//   }
// `;
// slider.setEffect(myEffect);