Widget:Droflax

<widget>

 <script type="text/javascript">
   (function () {
     const nombre = '${nombre}';
     const tier = '${tier}';
     const clase = '${clase}';
     const imagen = '${imagen}';
     const habilidades = JSON.parse('${habilidades}');
     const skins = JSON.parse('${skins}');

     // Crear la estructura básica
     document.write(`

${nombre}

Tier: ${tier}

Clase: ${clase}

           <img src="${imagen}" alt="Arte del personaje">

             <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
             <button class="tab-btn" data-tab="skins">Skins</button>

     `);

     // Activar tabs
     setTimeout(() => {
       const buttons = document.querySelectorAll(".tab-btn");
       const contents = document.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");
           document.getElementById(btn.getAttribute("data-tab")).classList.add("active");
         });
       });

       // Renderizar habilidades
       const cuadrosContainer = document.querySelector('.cuadros-container');
       const descripcionContainer = document.querySelector('.descripcion-container');
       const atributosContainer = document.querySelector('.atributos-container');
       const videoContainer = document.querySelector('.video-container');
       const cuadros = [];

       habilidades.forEach((hab, index) => {
         const div = document.createElement('div');
         div.classList.add('cuadro');
         div.innerHTML = `<img src="${hab.icon}" alt="${hab.nombre}" style="width: 100%; height: 100%; object-fit: cover;">`;
         div.title = hab.nombre;
         div.addEventListener('click', () => {
           descripcionContainer.innerHTML = `

${hab.nombre}

Level: ${hab.level}

${hab.descripcion}

`;

           atributosContainer.innerHTML = generarHTMLAtributos(hab.atributos);
           videoContainer.innerHTML = `<video width="100%" height="250" controls loop playsinline>
             <source src="${hab.video}" type="video/webm">
             Tu navegador no soporta este video.
           </video>`;
           cuadros.forEach(c => c.classList.remove('activo'));
           div.classList.add('activo');
         });
         cuadros.push(div);
         cuadrosContainer.appendChild(div);
       });

       if (cuadros.length > 0) cuadros[0].click();

       function generarHTMLAtributos(valoresStr) {
         const valores = valoresStr.split(',').map(v => v.trim());
         const labels = ["Recarga", "Energía", "Poder PVE", "Poder PVP"];
         const icons = [
           "/images/b/b1/Icon-cooldown.png",
           "/images/3/38/Icon-energy.png",
           "/images/7/7a/Icon-pve.png",
           "/images/5/5f/Icon-pvp.png"
         ];
         return `

Atributos

             ${valores.map((valor, i) => {
               let formatted = valor === '-' ? '-' : (i === 1 ? ((parseInt(valor) > 0 ? '+' : ) + valor) : valor);
               return `
                 

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

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

                 `;
             }).join()}

`;

       }

       // Renderizar skins
       const contenedorSkins = document.querySelector('#skins');
       contenedorSkins.innerHTML = `

           Skins

             ${skins.map(skin => `
               
                 <img class="skins--imageSkin" src="${skin.imagen}" alt="">
               `).join()}

`;

     }, 0);
   })();
 </script>

</widget>