Widget:Persona.js

(function () {

   const habilidades = {{{habilidades}}};  // Asegúrate de pasar un array de objetos a la plantilla
   const skins = {{{skins}}};              // De igual manera, un array de skins

   const contenedorSkins = document.querySelector("#skins");
   const cuadrosContainer = document.querySelector('.cuadros-container');
   const descripcionContainer = document.querySelector('.descripcion-container');
   const atributosContainer = document.querySelector('.atributos-container');
   const videoContainer = document.querySelector('.video-container');

   contenedorSkins.innerHTML = generarHTMLSkins(skins);

   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 id="video-habilidad" 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);
   });

   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 === "-" ? "-" : parseInt(valor);
                   return `

<span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="

${labels[i]}

">

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

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

                       
                   `;
               }).join()}

       `;
   }

   function generarHTMLSkins(listaSkins) {
       return `

               Skins

                   ${listaSkins.map(skin => `

<span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="${skin.tooltip}">

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

       `;
   }

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

})();