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

/* =======================================================
   BOTAO SUBIR TOPO DA PAGINA
   ======================================================= */
$(function() {
    var $button = $('<button id="back-to-top" title="Voltar ao Topo">↑ Topo</button>');
    $('body').append($button);

    $(window).scroll(function() {
        // Verifica se a posição atual + altura da janela é maior que o tamanho total - 100px
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $button.fadeIn();
        } else {
            $button.fadeOut();
        }
    });

    $button.click(function() {
        $('html, body').animate({scrollTop: 0}, 'slow');
        return false;
    });
});


/* =======================================================
   clases testee
   ======================================================= */
document.addEventListener('DOMContentLoaded', function() {
    const cells = document.querySelectorAll('.ragnarok-tree td[class^="evo-"]');

    cells.forEach(cell => {
        // 1. Tornar a célula inteira clicável (redirecionar para o link de texto)
        const link = cell.querySelector('a');
        if (link) {
            cell.style.cursor = 'pointer';
            cell.addEventListener('click', () => { window.location.href = link.href; });
        }

        // 2. Lógica de Hover (Conexão Hierárquica)
        cell.addEventListener('mouseenter', function() {
            const familyClass = Array.from(this.classList).find(c => c.startsWith('evo-')); // ex: evo-sw
            if (!familyClass || familyClass === 'evo-all') return;

            const myPos = this.getAttribute('data-pos'); // Pega 0, 1 ou 2
            const isClass1 = this.closest('table').previousElementSibling?.innerText.includes('Classe 1');
            const isClass2 = this.closest('table').previousElementSibling?.innerText.includes('Classe 2');

            if (isClass1) {
                // Passou no Espadachim: Acende Cav/Temp e Lorde/Paladino
                document.querySelectorAll(`.${familyClass}`).forEach(el => el.classList.add('highlight-active'));
            } else if (isClass2) {
                // Passou no Cavaleiro (pos 0): Acende ele mesmo e o Lorde (pos 0 na Trans)
                this.classList.add('highlight-active'); // Acende si mesmo
                const transRelated = document.querySelector('table:nth-of-type(3)').querySelectorAll(`.${familyClass}`);
                
                // Procura na Transclasse quem tem a mesma posição
                transRelated.forEach(el => {
                    if(el.getAttribute('data-pos') === myPos) {
                        el.classList.add('highlight-active');
                    }
                });
            } else {
                // Passou na Trans: Acende apenas ela mesma
                this.classList.add('highlight-active');
            }
        });

        cell.addEventListener('mouseleave', function() {
            document.querySelectorAll('.highlight-active').forEach(el => el.classList.remove('highlight-active'));
        });
    });
});