MediaWiki:Common.js

Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.

• Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
• Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
• Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
• Opera: Pressione Ctrl-F5.

/* =======================================================
   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';
    });
  });
});









// =========================
// INTERATIVIDADE DOS GUIAS
// =========================

document.addEventListener('DOMContentLoaded', function() {
  const guidesWrapper = document.querySelector('.ragnarok-guides-wrapper');
  if (!guidesWrapper) return;

  // 1. Sistema de Busca em Tempo Real
  const searchInput = document.querySelector('.guide-search-input');
  const searchButton = document.querySelector('.search-button');
  const guideCards = document.querySelectorAll('.ragnarok-guide-card');

  function filterGuides() {
    const searchTerm = searchInput.value.toLowerCase().trim();
    
    guideCards.forEach(card => {
      const title = card.querySelector('.card-title').textContent.toLowerCase();
      const desc = card.querySelector('.card-desc').textContent.toLowerCase();
      
      if (searchTerm === '' || title.includes(searchTerm) || desc.includes(searchTerm)) {
        card.style.display = 'flex';
        card.style.animation = 'fadeInUp 0.3s ease';
      } else {
        card.style.display = 'none';
      }
    });
  }

  searchInput.addEventListener('input', filterGuides);
  searchButton.addEventListener('click', filterGuides);

  // 2. Efeito de Hover com Partículas
  guideCards.forEach(card => {
    card.addEventListener('mouseenter', function(e) {
      // Adiciona partículas no hover
      for (let i = 0; i < 8; i++) {
        createParticle(e, this);
      }
      
      // Efeito de brilho
      const shine = document.createElement('div');
      shine.className = 'card-shine';
      shine.style.cssText = `
        position: absolute;
        top: ${e.offsetY}px;
        left: ${e.offsetX}px;
        width: 0;
        height: 0;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
        transform: translate(-50%, -50%);
        pointer-events: none;
        animation: expandShine 0.6s forwards;
        z-index: 1;
      `;
      
      this.style.position = 'relative';
      this.appendChild(shine);
      
      setTimeout(() => {
        if (shine.parentNode) shine.parentNode.removeChild(shine);
      }, 600);
    });
  });

  // 3. Criar partículas decorativas
  function createParticles() {
    const particleCount = 15;
    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.className = 'guide-particle';
      
      // Posição aleatória
      const left = Math.random() * 100;
      const delay = Math.random() * 15;
      const duration = 15 + Math.random() * 10;
      
      particle.style.cssText = `
        left: ${left}%;
        top: 100%;
        animation-delay: ${delay}s;
        animation-duration: ${duration}s;
      `;
      
      guidesWrapper.appendChild(particle);
    }
  }

  // 4. Efeito de partícula no clique
  function createParticle(e, parent) {
    const particle = document.createElement('div');
    particle.className = 'click-particle';
    
    const colors = ['#8B5CF6', '#3B82F6', '#EC4899', '#10B981'];
    const color = colors[Math.floor(Math.random() * colors.length)];
    
    particle.style.cssText = `
      position: absolute;
      width: 8px;
      height: 8px;
      background: ${color};
      border-radius: 50%;
      pointer-events: none;
      z-index: 100;
      left: ${e.offsetX}px;
      top: ${e.offsetY}px;
    `;
    
    parent.appendChild(particle);
    
    // Animação da partícula
    const angle = Math.random() * Math.PI * 2;
    const speed = 2 + Math.random() * 3;
    const vx = Math.cos(angle) * speed;
    const vy = Math.sin(angle) * speed;
    
    let x = e.offsetX;
    let y = e.offsetY;
    let opacity = 1;
    
    function animate() {
      x += vx;
      y += vy;
      opacity -= 0.02;
      
      particle.style.left = x + 'px';
      particle.style.top = y + 'px';
      particle.style.opacity = opacity;
      
      if (opacity > 0) {
        requestAnimationFrame(animate);
      } else {
        particle.remove();
      }
    }
    
    animate();
  }

  // 5. Adicionar estilo CSS dinâmico para animações
  const style = document.createElement('style');
  style.textContent = `
    @keyframes expandShine {
      0% {
        width: 0;
        height: 0;
        opacity: 0.6;
      }
      100% {
        width: 300px;
        height: 300px;
        opacity: 0;
      }
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  `;
  document.head.appendChild(style);

  // 6. Inicializar partículas
  createParticles();

  // 7. Contador de guias (opcional)
  const guideCount = guideCards.length;
  const countElement = document.createElement('div');
  countElement.className = 'guide-count';
  countElement.innerHTML = `
    <div style="
      text-align: center;
      margin-top: 20px;
      padding: 10px;
      background: rgba(139, 92, 246, 0.1);
      border-radius: 10px;
      color: #8B5CF6;
      font-weight: 600;
    ">
      🎮 Total de ${guideCount} guias disponíveis
    </div>
  `;
  
  const searchBox = document.querySelector('.ragnarok-search-box');
  if (searchBox) {
    searchBox.parentNode.insertBefore(countElement, searchBox.nextSibling);
  }
});