MediaWiki:Common.js: mudanças entre as edições

/* =======================================================
   CARROSSEL UNIFICADO - WIKI EVERLIGHT
   ======================================================= */
mw.loader.using(['jquery', 'mediawiki.util'], function () {
    $(function() {
        const $wrapper = $('.carousel-wrapper');
        const $items = $('.carousel-item');
        const $next = $('.right-btn');
        const $prev = $('.left-btn');
        
        if (!$wrapper.length) return; // Só executa se o carrossel existir na página

        let current = 0;
        let autoPlayTimer;

        function updateCarousel() {
            // Atualiza a classe ativa para o efeito visual de destaque
            $items.removeClass('active').eq(current).addClass('active');

            const activeItem = $items.get(current);
            const scrollPosition = 
                activeItem.offsetLeft - 
                ($wrapper.width() / 2) + 
                ($(activeItem).outerWidth() / 2);

            $wrapper.stop().animate({
                scrollLeft: scrollPosition
            }, 500);
        }

        // Funções de Navegação
        function moveNext() {
            current = (current + 1) % $items.length;
            updateCarousel();
        }

        function movePrev() {
            current = (current - 1 + $items.length) % $items.length;
            updateCarousel();
        }

        // Eventos de Clique
        $next.on('click', function() {
            stopAutoPlay();
            moveNext();
        });

        $prev.on('click', function() {
            stopAutoPlay();
            movePrev();
        });

        // Auto-Play (4 segundos)
        function startAutoPlay() {
            autoPlayTimer = setInterval(moveNext, 4000);
        }

        function stopAutoPlay() {
            clearInterval(autoPlayTimer);
        }

        // Inicialização
        updateCarousel();
        startAutoPlay();

        // Pausa o carrossel se o mouse estiver em cima
        $wrapper.hover(stopAutoPlay, startAutoPlay);
    });
});


/* =======================================================
   ARVORE HABILIDADE - WIKI EVERLIGHT
   ======================================================= */


document.addEventListener('DOMContentLoaded', () => {
    const cards = document.querySelectorAll('.skill-card');

    cards.forEach(card => {
        card.addEventListener('click', () => {
            const skillName = card.querySelector('.skill-name').innerText;
            console.log(`Habilidade clicada: ${skillName}`);
            
            // Exemplo de efeito visual simples
            card.style.filter = "brightness(1.2)";
            setTimeout(() => {
                card.style.filter = "brightness(1)";
            }, 150);
        });
    });
});

document.querySelectorAll('.carousel-track').forEach(track => {
  track.addEventListener('mouseenter', () => {
    track.querySelectorAll('.carousel-item').forEach(item => {
      item.style.animationPlayState = 'paused';
    });
  });
  track.addEventListener('mouseleave', () => {
    track.querySelectorAll('.carousel-item').forEach(item => {
      item.style.animationPlayState = 'running';
    });
  });
});








// =========================
// FUNCIONALIDADE DOS BOTÕES
// =========================

document.addEventListener('DOMContentLoaded', function() {
  const guideItems = document.querySelectorAll('.hr-guide-item');
  const filterButtons = document.querySelectorAll('.filter-btn');
  const searchInput = document.querySelector('.search-input');
  const searchClear = document.querySelector('.search-clear');
  const controlButtons = {
    shuffle: document.getElementById('shuffleGuides'),
    expand: document.getElementById('expandAll'),
    collapse: document.getElementById('collapseAll'),
    popular: document.getElementById('showPopular'),
    icons: document.getElementById('toggleIcons')
  };
  const pageButtons = document.querySelectorAll('.page-btn, .page-number');

  // 1. FILTRAGEM
  filterButtons.forEach(button => {
    button.addEventListener('click', function() {
      // Remove active de todos
      filterButtons.forEach(btn => btn.classList.remove('active'));
      // Adiciona active no clicado
      this.classList.add('active');
      
      const filter = this.dataset.filter;
      filterGuides(filter);
    });
  });

  function filterGuides(filter) {
    guideItems.forEach(item => {
      const category = item.dataset.category;
      const isPopular = item.dataset.popular === 'true';
      const isUpdated = item.dataset.updated === 'true';
      
      let shouldShow = true;
      
      switch(filter) {
        case 'all':
          shouldShow = true;
          break;
        case 'progression':
          shouldShow = category === 'progression';
          break;
        case 'systems':
          shouldShow = category === 'systems';
          break;
        case 'economy':
          shouldShow = category === 'economy';
          break;
        case 'content':
          shouldShow = category === 'content';
          break;
        case 'popular':
          shouldShow = isPopular;
          break;
        case 'updated':
          shouldShow = isUpdated;
          break;
      }
      
      if (shouldShow) {
        item.classList.remove('hidden');
        setTimeout(() => {
          item.classList.add('highlighted');
          setTimeout(() => item.classList.remove('highlighted'), 300);
        }, 100);
      } else {
        item.classList.add('hidden');
      }
    });
  }

  // 2. BUSCA EM TEMPO REAL
  searchInput.addEventListener('input', function() {
    const term = this.value.toLowerCase().trim();
    
    guideItems.forEach(item => {
      const link = item.querySelector('.guide-link');
      const text = link.textContent.toLowerCase();
      
      if (term === '' || text.includes(term)) {
        item.classList.remove('hidden');
        if (term !== '') {
          item.classList.add('highlighted');
        } else {
          item.classList.remove('highlighted');
        }
      } else {
        item.classList.add('hidden');
        item.classList.remove('highlighted');
      }
    });
  });

  searchClear.addEventListener('click', function() {
    searchInput.value = '';
    searchInput.dispatchEvent(new Event('input'));
  });

  // 3. EMBARALHAR GUIAS
  controlButtons.shuffle.addEventListener('click', function() {
    const grid = document.querySelector('.hr-guides-grid');
    const items = Array.from(guideItems);
    
    // Embaralha array
    for (let i = items.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [items[i], items[j]] = [items[j], items[i]];
    }
    
    // Remove e readiciona em ordem embaralhada
    items.forEach(item => {
      grid.appendChild(item);
      item.classList.add('highlighted');
      setTimeout(() => item.classList.remove('highlighted'), 500);
    });
    
    // Efeito visual
    this.classList.add('shuffling');
    setTimeout(() => this.classList.remove('shuffling'), 1000);
  });

  // 4. MOSTRAR POPULARES
  controlButtons.popular.addEventListener('click', function() {
    filterButtons.forEach(btn => btn.classList.remove('active'));
    document.querySelector('[data-filter="popular"]').classList.add('active');
    filterGuides('popular');
  });

  // 5. TOGGLE ÍCONES
  controlButtons.icons.addEventListener('click', function() {
    const icons = document.querySelectorAll('.hr-icon');
    const areHidden = icons[0].style.opacity === '0';
    
    icons.forEach(icon => {
      icon.style.opacity = areHidden ? '1' : '0';
      icon.style.transform = areHidden ? 'scale(1)' : 'scale(0)';
    });
    
    this.querySelector('.control-icon').textContent = areHidden ? '👁️' : '👁️‍🗨️';
  });

  // 6. PAGINAÇÃO (exemplo básico)
  pageButtons.forEach(button => {
    button.addEventListener('click', function() {
      if (this.classList.contains('active') || this.disabled) return;
      
      // Atualiza página ativa
      document.querySelectorAll('.page-number.active').forEach(el => {
        el.classList.remove('active');
      });
      
      if (this.classList.contains('page-number')) {
        this.classList.add('active');
      }
      
      // Aqui você implementaria a lógica de paginação real
      // Por enquanto apenas efeito visual
      guideItems.forEach(item => {
        item.classList.add('hidden');
        setTimeout(() => item.classList.remove('hidden'), 300);
      });
    });
  });

  // 7. CONTADOR DINÂMICO
  function updateGuideCount() {
    const visibleGuides = Array.from(guideItems).filter(item => 
      !item.classList.contains('hidden')
    ).length;
    
    document.querySelector('.stat-count').textContent = visibleGuides;
  }

  // Atualiza contador em todas as interações
  const observer = new MutationObserver(updateGuideCount);
  guideItems.forEach(item => {
    observer.observe(item, { 
      attributes: true, 
      attributeFilter: ['class'] 
    });
  });

  // Inicialização
  updateGuideCount();
});