Widget:Droflax

De Wiki Gla
Revisão de 15h57min de 20 de julho de 2025 por Droflax (discussão | contribs)
Ir para navegação Ir para pesquisar

(function() { 

   'use strict';

   // Añadir CSS dinámicamente
   const style = document.createElement('style');
   style.textContent = `
       .personaje-box { 
           padding: 16px; 
           color: #000; 
           font-family: 'Segoe UI', sans-serif; 
           width: 90%; 
           margin: auto; 
           position: relative; 
           user-select: none; 
           background-color: #f5f5f5;
           border-radius: 10px;
           box-shadow: 0 4px 8px rgba(0,0,0,0.1);
       }
       
       .personaje-header { 
           background: linear-gradient(145deg, #e6e6e6, #ffffff);
           padding: 15px;
           border-radius: 8px;
           margin-bottom: 20px;
           position: relative;
       }
       
       .personaje-topbar { 
           display: flex; 
           flex-direction: column; 
           align-items: flex-start; 
           padding: 8px 16px; 
       }
       
       .topbar-icon {
           width: 90px;
           height: 90px;
           object-fit: contain;
           border-radius: 50%;
           background: #60dae2;
           border: 3px solid #fff;
           box-shadow: 0 2px 5px rgba(0,0,0,0.2);
       }
       
       .nome {
           font-size: 2.5rem;
           font-family: 'Orbitron', sans-serif;
           font-weight: 900;
           color: #333;
           text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
       }
       
       .classes {
           font-size: 1.2rem;
           color: #666;
           font-style: italic;
       }
       
       .tab-btn {
           padding: 8px 20px;
           background: #444;
           color: white;
           border: none;
           border-radius: 8px;
           font-size: 16px;
           cursor: pointer;
           transition: all 0.3s ease;
       }
       
       .tab-btn:hover {
           background: #555;
       }
       
       .tab-btn.active {
           background: #156bc7;
           font-weight: bold;
           transform: translateY(-2px);
       }
       
       .cuadros-container {
           display: flex;
           gap: 10px;
           padding: 10px 0;
           overflow-x: auto;
           scrollbar-width: thin;
       }
       
       .cuadro {
           width: 50px;
           height: 50px;
           border-radius: 8px;
           cursor: pointer;
           transition: all 0.2s ease;
           border: 2px solid transparent;
       }
       
       .cuadro:hover {
           transform: scale(1.05);
       }
       
       .cuadro.activo {
           border-color: #ffcc00;
           box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
       }
       
       .habilidades-container {
           display: flex;
           gap: 20px;
           margin-top: 15px;
       }
       
       .descripcion-container {
           background: #fff;
           border-radius: 8px;
           padding: 15px;
           box-shadow: 0 2px 5px rgba(0,0,0,0.1);
           flex: 1;
       }
       
       .video-container {
           width: 45%;
           background: #000;
           border-radius: 8px;
           overflow: hidden;
       }
       
       .skins-carousel-wrapper {
           position: relative;
           margin: 20px 0;
       }
       
       .skins-carousel {
           display: flex;
           gap: 15px;
           overflow-x: auto;
           scroll-snap-type: x mandatory;
           scroll-behavior: smooth;
           -webkit-overflow-scrolling: touch;
           padding: 10px 0;
       }
       
       .skin-card {
           scroll-snap-align: start;
           flex: 0 0 auto;
           width: 200px;
           position: relative;
       }
       
       .skins-arrow {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
           background: rgba(0,0,0,0.5);
           color: white;
           border: none;
           width: 40px;
           height: 40px;
           border-radius: 50%;
           font-size: 18px;
           cursor: pointer;
           z-index: 2;
           transition: all 0.3s ease;
       }
       
       .skins-arrow:hover {
           background: rgba(0,0,0,0.8);
       }
       
       .skins-arrow.left {
           left: 10px;
       }
       
       .skins-arrow.right {
           right: 10px;
       }
       
       /* Estilos para los tiers */
       .tier-bronze .personaje-header {
           background: linear-gradient(145deg, #cd7f32, #e0a040);
       }
       
       .tier-silver .personaje-header {
           background: linear-gradient(145deg, #c0c0c0, #e0e0e0);
       }
       
       .tier-gold .personaje-header {
           background: linear-gradient(145deg, #ffd700, #ffec80);
       }
       
       .tier-diamond .personaje-header {
           background: linear-gradient(145deg, #b9f2ff, #e0f7ff);
       }
       
       /* Tooltips */
       .simple-tooltip-popup {
           position: absolute;
           background: #222;
           color: #fff;
           padding: 8px 12px;
           border-radius: 4px;
           font-size: 14px;
           pointer-events: none;
           z-index: 1000;
           max-width: 250px;
           box-shadow: 0 3px 10px rgba(0,0,0,0.3);
       }
       
       /* Responsive */
       @media (max-width: 768px) {
           .habilidades-container {
               flex-direction: column;
           }
           
           .video-container {
               width: 100%;
               margin-top: 15px;
           }
           
           .nome {
               font-size: 1.8rem;
           }
       }
   `;
   document.head.appendChild(style);
   
   // Buscar todos los contenedores de personaje
   const personajeBoxes = document.querySelectorAll('.personaje-box');
   
   personajeBoxes.forEach(initPersonaje);
   
   function initPersonaje(personajeBox) {
       // Obtener el nombre del personaje del ID
       const personajeId = personajeBox.id;
       if (!personajeId) return;
       
       const nome = personajeId.replace('personaje-', );
       const dataScript = document.getElementById(`personaje-data-${nome}`);
       
       if (!dataScript) {
           console.error(`No se encontraron datos para el personaje: ${nome}`);
           return;
       }
       
       let data;
       try {
           data = JSON.parse(dataScript.textContent);
       } catch (e) {
           console.error('Error al parsear datos del personaje:', e);
           return;
       }
       
       // Inicializar tabs
       initTabs(personajeBox);
       
       // Inicializar habilidades
       initHabilidades(personajeBox, data.habilidades);
       
       // Inicializar skins carousel
       initSkinsCarousel(personajeBox);
       
       // Remover el script de datos
       dataScript.remove();
   }
   
   function initTabs(container) {
       const buttons = container.querySelectorAll('.tab-btn');
       const contents = container.querySelectorAll('.tab-content');
       
       buttons.forEach(btn => {
           btn.addEventListener('click', () => {
               buttons.forEach(b => b.classList.remove('active'));
               contents.forEach(c => c.classList.remove('active'));
               
               btn.classList.add('active');
               const tabId = btn.dataset.tab;
               const targetContent = container.querySelector(`#${tabId}`);
               if (targetContent) {
                   targetContent.classList.add('active');
               }
           });
       });
   }
   
   function initHabilidades(container, habilidades) {
       const cuadrosContainer = container.querySelector('.cuadros-container');
       const descripcionContainer = container.querySelector('.descripcion-container');
       const videoContainer = container.querySelector('.video-container');
       
       if (!cuadrosContainer || !descripcionContainer || !videoContainer) return;
       
       const cuadros = cuadrosContainer.querySelectorAll('.cuadro');
       
       cuadros.forEach((cuadro, index) => {
           cuadro.addEventListener('click', () => {
               const hab = habilidades[index];
               if (!hab) return;
               
               // Formatear descripción
               const descripcionFormateada = hab.desc.replace(/(.*?)/g, '$1');
               
               // Generar HTML de la descripción
               descripcionContainer.innerHTML = `

${hab.nome}

                           <button class="info-btn">i</button>
                           
                               Información adicional sobre la habilidad, consejos o efectos especiales.
                           

                   ${generarHTMLAtributos(hab.atr)}
${descripcionFormateada}
               `;
               
               // Mostrar video si existe
               videoContainer.innerHTML = hab.video ? `
                   <video width="100%" controls playsinline>
                       <source src="${hab.video}" type="video/webm">
                       Tu navegador no soporta el elemento video.
                   </video>
               ` : ;
               
               // Actualizar estado activo
               cuadros.forEach(c => c.classList.remove('activo'));
               cuadro.classList.add('activo');
           });
       });
       
       // Scroll horizontal con rueda del mouse
       cuadrosContainer.addEventListener('wheel', e => {
           if (e.deltaY) {
               e.preventDefault();
               cuadrosContainer.scrollLeft += e.deltaY;
           }
       });
       
       // Activar primera habilidad por defecto
       if (cuadros.length > 0) {
           cuadros[0].click();
       }
   }
   
   function generarHTMLAtributos(atributos) {
       if (!atributos) return ;
       
       const vals = atributos.split(',').map(v => v.trim());
       const labels = ['Poder PVE', 'Poder PVP', 'Energía', 'Recarga'];
       const icons = [
           '/images/7/7a/Icon-pve.png',
           '/images/5/5f/Icon-pvp.png',
           '/images/3/38/Icon-energy.png',
           '/images/b/b1/Icon-cooldown.png'
       ];
       
       return `

               ${vals.map((v, i) => {
                   let valor = v === '-' ? '-' : parseInt(v);
                   if (i === 1 && !isNaN(valor)) {
                       valor = (valor > 0 ? '+' : ) + valor;
                   }
                   return `
                       

                               <img src="${icons[i]}" class="cardAttribute--icon">

${valor}${i === 0 && valor !== '-' ? ' seg' : }

                       
                   `;
               }).join()}

       `;
   }
   
   function initSkinsCarousel(container) {
       const carousel = container.querySelector('.skins-carousel');
       const wrapper = container.querySelector('.skins-carousel-wrapper');
       const leftBtn = container.querySelector('.skins-arrow.left');
       const rightBtn = container.querySelector('.skins-arrow.right');
       
       if (!carousel || !wrapper || !leftBtn || !rightBtn) return;
       
       let isPredictingScroll = false;
       
       const getScrollAmount = () => carousel.clientWidth * 0.6;
       
       const hideArrow = btn => {
           if (!btn.classList.contains('desapareciendo') && btn.style.display !== 'none') {
               btn.classList.add('desapareciendo');
               setTimeout(() => {
                   btn.style.display = 'none';
                   btn.classList.remove('desapareciendo');
               }, 300);
           }
       };
       
       const showArrow = btn => {
           if (btn.style.display === 'none') {
               btn.style.display = 'inline-block';
               void btn.offsetWidth; // Force reflow
           }
           btn.classList.remove('desapareciendo');
       };
       
       const setArrowsState = scrollLeft => {
           const maxScroll = carousel.scrollWidth - carousel.clientWidth;
           const hasLeft = scrollLeft > 5;
           const hasRight = scrollLeft < maxScroll - 5;
           
           if (hasLeft) showArrow(leftBtn);
           else hideArrow(leftBtn);
           
           if (hasRight) showArrow(rightBtn);
           else hideArrow(rightBtn);
           
           wrapper.classList.toggle('has-left', hasLeft);
           wrapper.classList.toggle('has-right', hasRight);
       };
       
       const handleArrowClick = direction => {
           isPredictingScroll = true;
           const scrollLeft = carousel.scrollLeft;
           const maxScroll = carousel.scrollWidth - carousel.clientWidth;
           
           const nextScroll = direction === 'left' 
               ? Math.max(0, scrollLeft - getScrollAmount())
               : Math.min(maxScroll, scrollLeft + getScrollAmount());
           
           setArrowsState(nextScroll);
           carousel.scrollTo({ left: nextScroll, behavior: 'smooth' });
           
           // Esperar a que termine el scroll
           let lastPosition = -1;
           let stillCount = 0;
           const checkScroll = setInterval(() => {
               const currentPosition = Math.round(carousel.scrollLeft);
               if (currentPosition === lastPosition) {
                   if (++stillCount >= 2) {
                       clearInterval(checkScroll);
                       isPredictingScroll = false;
                       setArrowsState(currentPosition);
                   }
               } else {
                   lastPosition = currentPosition;
                   stillCount = 0;
               }
           }, 50);
       };
       
       // Event listeners
       carousel.addEventListener('scroll', () => {
           if (!isPredictingScroll) {
               setArrowsState(carousel.scrollLeft);
           }
       });
       
       // Resize observer para recalcular cuando cambie el tamaño
       if (window.ResizeObserver) {
           new ResizeObserver(() => {
               if (!isPredictingScroll) {
                   setArrowsState(carousel.scrollLeft);
               }
           }).observe(carousel);
       }
       
       leftBtn.addEventListener('click', () => handleArrowClick('left'));
       rightBtn.addEventListener('click', () => handleArrowClick('right'));
       
       // Estado inicial
       setArrowsState(carousel.scrollLeft);
   }
   
   // Inicializar tooltips simples
   function initSimpleTooltips() {
       const tooltipElements = document.querySelectorAll('[data-tooltip]');
       
       tooltipElements.forEach(element => {
           element.addEventListener('mouseenter', (e) => {
               const tooltip = document.createElement('div');
               tooltip.className = 'simple-tooltip-popup';
               tooltip.innerHTML = e.target.dataset.tooltip;
               document.body.appendChild(tooltip);
               
               const rect = e.target.getBoundingClientRect();
               tooltip.style.position = 'absolute';
               tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
               tooltip.style.top = rect.top - tooltip.offsetHeight - 8 + 'px';
               tooltip.style.zIndex = '9999';
               tooltip.style.background = '#222';
               tooltip.style.color = '#fff';
               tooltip.style.padding = '8px 10px';
               tooltip.style.borderRadius = '4px';
               tooltip.style.fontSize = '12px';
               tooltip.style.whiteSpace = 'nowrap';
               tooltip.style.boxShadow = '0 2px 10px rgba(0,0,0,0.5)';
               tooltip.style.pointerEvents = 'none';
           });
           
           element.addEventListener('mouseleave', () => {
               const tooltips = document.querySelectorAll('.simple-tooltip-popup');
               tooltips.forEach(tooltip => tooltip.remove());
           });
       });
   }
   
   // Inicializar tooltips después de que se cargue el contenido
   setTimeout(initSimpleTooltips, 100);

})();

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Droflax&oldid=37148”