Widget:C.Skills

<script>

   (function () {
       'use strict';
       const { $, $$, filePathURL, slugify, getLangKey, chooseDescFrom, subBarTemplateCache } = window.__CBase || {};

       const FLAG_ICON_FILES = {
           aggro: 'Enemyaggro-icon.png',
           bridge: 'Bridgemaker-icon.png',
           wall: 'Destroywall-icon.png',
           quickcast: 'Quickcast-icon.png',
           wallpass: 'Passthroughwall-icon.png'
       };

       const iconsBar = $('#skills') ? $('.icon-bar', $('#skills')) : null;
       const descBox = $('#skills') ? $('.desc-box', $('#skills')) : null;
       const videoBox = $('#skills') ? $('.video-container', $('#skills')) : null;
       const skillsRoot = document.getElementById('skills');

       if (!iconsBar || !skillsRoot) return;

       const barStack = [];
       window.__barStack = barStack;

       function getLabels() {
           const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
           const lang = getLangKey ? getLangKey() : 'pt';
           return i18nMap[lang] || i18nMap.pt || {
               cooldown: 'Recarga',
               energy_gain: 'Ganho de energia',
               energy_cost: 'Custo de energia',
               power: 'Poder',
               power_pvp: 'Poder PvP',
               level: 'Nível'
           };
       }

       function renderAttributes(str) {
           const L = getLabels();
           const vals = (str || ).split(',').map(v => v.trim());
           const pve = vals[0] && vals[0] !== '-' ? parseFloat(vals[0]) : NaN;
           const pvp = vals[1] && vals[1] !== '-' ? parseFloat(vals[1]) : NaN;
           const ene = vals[2] && vals[2] !== '-' ? parseFloat(vals[2]) : NaN;
           const cd = vals[3] && vals[3] !== '-' ? parseFloat(vals[3]) : NaN;

           const rows = [];
           if (!isNaN(cd)) rows.push([L.cooldown, cd]);
           if (!isNaN(ene) && ene !== 0) {
               rows.push([ene > 0 ? L.energy_gain : L.energy_cost, Math.abs(ene)]);
           }
           if (!isNaN(pve)) rows.push([L.power, pve]);
           if (!isNaN(pvp)) rows.push([L.power_pvp, pvp]);

           if (!rows.length) return ;

return `

${rows.map(([l, v]) => `

${l}${v}

`).join()}

`;

       }

       function renderFlagsRow(flags) {
           const arr = (flags || []).filter(Boolean);
           if (!arr.length) return ;
           const items = arr.map(k => {
               const url = filePathURL ? filePathURL(FLAG_ICON_FILES[k]) : ;
               return url ? `<img class="skill-flag" data-flag="${k}" alt="" src="${url}">` : ;
           }).join();

return items ? `

${items}

` : ;

       }

       function showVideoForIcon(el) {
           if (!videoBox) return;
           const videoURL = (el.dataset.video || ).trim();
           if (!videoURL) {
               videoBox.style.display = 'none';
               return;
           }

           let video = videoBox.querySelector(`video[data-index="${el.dataset.index}"]`);
           if (!video) {
               video = document.createElement('video');
               video.className = 'skill-video';
               video.dataset.index = el.dataset.index;
               video.setAttribute('controls', );
               video.setAttribute('preload', 'metadata');
               video.setAttribute('playsinline', );
               video.style.width = '100%';
               video.style.height = 'auto';
               video.style.aspectRatio = '16/9';
               video.style.objectFit = 'contain';

               const ext = (videoURL.split('.').pop() || ).toLowerCase().split('?')[0];
               const mimeTypes = {
                   'mp4': 'video/mp4',
                   'm4v': 'video/mp4',
                   'webm': 'video/webm',
                   'ogv': 'video/ogg',
                   'ogg': 'video/ogg',
                   'mov': 'video/quicktime'
               };
               const mimeType = mimeTypes[ext] || 'video/mp4';
               const src = document.createElement('source');
               src.src = videoURL;
               src.type = mimeType;
               video.appendChild(src);
               videoBox.appendChild(video);
           }

           videoBox.querySelectorAll('video').forEach(v => v.style.display = 'none');
           video.style.display = 'block';
           videoBox.style.display = 'block';
           try {
               video.currentTime = 0;
               video.play().catch(() => { });
           } catch (e) { }
       }

       function activateSkill(el, options = {}) {
           const { openSubs = true } = options;
           const L = getLabels();
           const name = el.dataset.nome || el.dataset.name || ;
           const level = (el.dataset.level || ).trim();
           const desc = chooseDescFrom ? chooseDescFrom({
               desc_i18n: {
                   pt: el.dataset.descPt || ,
                   en: el.dataset.descEn || ,
                   es: el.dataset.descEs || ,
                   pl: el.dataset.descPl || 
               },
               desc: el.dataset.desc || 
           }) : (el.dataset.desc || );
           const descHtml = desc.replace(/(.*?)/g, '$1');
           const attrsHTML = el.dataset.atr ? renderAttributes(el.dataset.atr) : ;
           const flagsHTML = el.dataset.flags ? (() => {
               try {
                   const flags = JSON.parse(el.dataset.flags);
                   return renderFlagsRow(flags);
               } catch { return ; }
           })() : ;

           if (descBox) {

descBox.innerHTML = `

${name}

${level ? `

${L.level} ${level}

` : }${attrsHTML}

${descHtml}

`;

           }

           if (videoBox) {
               const oldFlags = videoBox.querySelector('.skill-flags');
               if (oldFlags) oldFlags.remove();
               if (flagsHTML) {
                   videoBox.insertAdjacentHTML('beforeend', flagsHTML);
               }
           }

           $$('.skill-icon', iconsBar).forEach(i => i.classList.remove('active'));
           el.classList.add('active');
           window.__lastActiveSkillIcon = el;

           showVideoForIcon(el);

           const subsRaw = el.dataset.subs || el.getAttribute('data-subs');
           const isBack = el.dataset.back === 'true' || el.dataset.back === 'yes' || el.dataset.back === '1';

           if (isBack && barStack.length) {
               const prev = barStack.pop();
               renderBarFromItems(prev.items);
               return;
           }

           if (openSubs && subsRaw && subsRaw.trim() !== ) {
               if (barStack.length && barStack[barStack.length - 1].parentIcon === el) return;
               try {
                   const subs = JSON.parse(subsRaw);
                   pushSubBarFrom(subs, el);
               } catch { }
           }
       }

       function snapshotCurrentBarItemsFromDOM() {
           return $$('.skill-icon', iconsBar).filter(el => el.dataset.weaponToggle !== '1').map(el => {
               const img = el.querySelector('img');
               const iconURL = img ? img.src : ;
               const subsRaw = el.dataset.subs || el.getAttribute('data-subs') || ;
               let subs = null;
               try {
                   subs = subsRaw ? JSON.parse(subsRaw) : null;
               } catch { subs = null; }

               let flags = null;
               if (el.dataset.flags) {
                   try {
                       flags = JSON.parse(el.dataset.flags);
                   } catch { }
               }

               let weapon = null;
               if (el.dataset.weapon) {
                   try {
                       weapon = JSON.parse(el.dataset.weapon);
                   } catch { }
               }

               return {
                   name: el.dataset.nome || el.dataset.name || ,
                   index: el.dataset.index || ,
                   level: el.dataset.level || ,
                   desc: el.dataset.desc || ,
                   descPt: el.dataset.descPt || ,
                   descEn: el.dataset.descEn || ,
                   descEs: el.dataset.descEs || ,
                   descPl: el.dataset.descPl || ,
                   attrs: el.dataset.atr || ,
                   video: el.dataset.video || ,
                   iconURL,
                   subs,
                   flags,
                   weapon
               };
           });
       }

       function renderBarFromItems(items) {
           iconsBar.innerHTML = ;
           items.forEach((it) => {
               const node = document.createElement('div');
               node.className = 'skill-icon';
               node.dataset.nome = it.name || ;
               if (it.index) node.dataset.index = it.index;
               if (it.level) node.dataset.level = it.level;
               if (it.desc) node.dataset.desc = it.desc;
               if (it.descPt) node.dataset.descPt = it.descPt;
               if (it.descEn) node.dataset.descEn = it.descEn;
               if (it.descEs) node.dataset.descEs = it.descEs;
               if (it.descPl) node.dataset.descPl = it.descPl;
               if (it.attrs) node.dataset.atr = it.attrs;
               if (it.video) node.dataset.video = it.video;
               if (it.subs) node.dataset.subs = JSON.stringify(it.subs);
               if (it.flags) node.dataset.flags = JSON.stringify(it.flags);
               if (it.weapon) node.dataset.weapon = JSON.stringify(it.weapon);
               if (!it.index) node.dataset.nested = '1';

               const img = document.createElement('img');
               img.alt = ;
               img.src = it.iconURL || (it.icon ? (filePathURL ? filePathURL(it.icon) : ) : );
               img.decoding = 'async';
               img.loading = 'lazy';
               node.appendChild(img);
               iconsBar.appendChild(node);
           });

           wireClicksForCurrentBar();
       }

       function pushSubBarFrom(subs, parentIconEl) {
           const parentIndexSnapshot = parentIconEl ? (parentIconEl.dataset.index || ) : ;
           barStack.push({
               items: snapshotCurrentBarItemsFromDOM(),
               parentIcon: parentIconEl,
               parentIndex: parentIndexSnapshot
           });

           const L = getLabels();
           const items = (subs || []).map(s => {
               const name = (s.name || s.n || ).trim();
               const desc = chooseDescFrom ? chooseDescFrom(s) : ;
               return {
                   name,
                   level: (s.level || ).toString().trim(),
                   desc,
                   descPt: (s.desc_i18n && s.desc_i18n.pt) || ,
                   descEn: (s.desc_i18n && s.desc_i18n.en) || ,
                   descEs: (s.desc_i18n && s.desc_i18n.es) || ,
                   descPl: (s.desc_i18n && s.desc_i18n.pl) || ,
                   attrs: ,
                   icon: (s.icon || ),
                   iconURL: (s.icon && s.icon !== 'Nada.png') ? (filePathURL ? filePathURL(s.icon) : ) : ,
                   video: s.video ? (filePathURL ? filePathURL(s.video) : ) : ,
                   subs: Array.isArray(s.subs) ? s.subs : null,
                   flags: Array.isArray(s.flags) ? s.flags : null,
                   back: (s.back === true || s.back === 'true' || s.back === 'yes' || s.back === '1') ? 'true' : null,
                   weapon: s.weapon || null
               };
           });

           renderBarFromItems(items);
       }

       function wireClicksForCurrentBar() {
           $$('.skill-icon', iconsBar).forEach(el => {
               if (el.dataset.weaponToggle === '1') return;
               if (el.dataset.wired) return;
               el.dataset.wired = '1';
               const label = el.dataset.nome || el.dataset.name || ;
               el.setAttribute('aria-label', label);
               el.addEventListener('click', () => {
                   activateSkill(el, { openSubs: true });
               });
           });
       }

       // Initialize
       wireClicksForCurrentBar();
       const firstIcon = $$('.skill-icon', iconsBar)[0];
       if (firstIcon) {
           activateSkill(firstIcon, { openSubs: false });
       }
   })();

</script>