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











// ============================================
// VORTEX INTERACTIVE SYSTEM
// ============================================

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

  // 1. SISTEMA DE CONEXÕES DINÂMICAS
  const nodes = document.querySelectorAll('.guide-node');
  const centralNode = document.querySelector('.central-node');
  const svg = document.querySelector('.connection-lines');
  const toggleBtn = document.getElementById('toggleConnections');
  
  let connectionsVisible = false;
  let connections = [];

  function drawConnections() {
    // Limpa SVG anterior
    svg.innerHTML = `
      <defs>
        <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
          <stop offset="100%" style="stop-color:#3B82F6;stop-opacity:1" />
        </linearGradient>
        <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
          <polygon points="0 0, 10 3.5, 0 7" fill="#8B5CF6"/>
        </marker>
      </defs>
    `;

    if (!connectionsVisible) return;

    const centralRect = centralNode.getBoundingClientRect();
    const containerRect = vortexContainer.getBoundingClientRect();
    
    const centerX = (centralRect.left + centralRect.width/2) - containerRect.left;
    const centerY = (centralRect.top + centralRect.height/2) - containerRect.top;

    nodes.forEach(node => {
      const nodeRect = node.getBoundingClientRect();
      const nodeX = (nodeRect.left + nodeRect.width/2) - containerRect.left;
      const nodeY = (nodeRect.top + nodeRect.height/2) - containerRect.top;

      // Cria linha
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', centerX);
      line.setAttribute('y1', centerY);
      line.setAttribute('x2', nodeX);
      line.setAttribute('y2', nodeY);
      line.setAttribute('stroke', 'url(#lineGradient)');
      line.setAttribute('stroke-width', '2');
      line.setAttribute('stroke-dasharray', '5,5');
      line.setAttribute('marker-end', 'url(#arrowhead)');
      line.classList.add('connection-line');
      
      // Animação de traço
      const length = Math.sqrt(Math.pow(nodeX - centerX, 2) + Math.pow(nodeY - centerY, 2));
      line.style.strokeDashoffset = length