Widget:C.Skills
Ir para navegação
Ir para pesquisar
<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>