Widget:Character.WeaponToggle
Ir para navegação
Ir para pesquisar
<script>
(() => {
let toggleContainer = null;
const applyWeaponState = (enabled) => {
// Atualizar flag global
if (typeof window.__setGlobalWeaponEnabled === 'function') {
window.__setGlobalWeaponEnabled(enabled);
}
// Atualizar visual do botão
document.querySelectorAll('.char-weapon-btn').forEach(b => {
b.classList.toggle('active', enabled);
});
// Salvar preferência
try {
localStorage.setItem('glaWeaponEnabled', enabled ? '1' : '0');
} catch (x) { }
// Aplicar/remover classe em TODAS as skills com arma
document.querySelectorAll('.skill-icon[data-weapon]').forEach(el => {
if (enabled) {
el.classList.add('has-weapon-available');
} else {
el.classList.remove('has-weapon-available');
el.classList.remove('weapon-equipped');
el.style.removeProperty('--weapon-badge-url');
}
});
// Reatualizar o ícone ativo para aplicar/remover efeitos
const lastIcon = window.__lastActiveSkillIcon;
if (lastIcon && typeof lastIcon.click === 'function') {
document.body.dataset.suppressSkillPlay = '1';
setTimeout(() => {
lastIcon.click();
setTimeout(() => delete document.body.dataset.suppressSkillPlay, 100);
}, 10);
}
};
const showPopup = () => {
const m = document.getElementById('weapon-info-modal');
if (m) m.classList.add('show');
};
const hidePopup = () => {
const m = document.getElementById('weapon-info-modal');
if (m) m.classList.remove('show');
};
const updateToggleVisibility = () => {
if (!toggleContainer) return;
// Usar seletor robusto: verificar qual aba está ativa pelo botão
const activeTabBtn = document.querySelector('.tab-btn.active');
const isSkillsActive = activeTabBtn && activeTabBtn.getAttribute('data-tab') === 'skills';
toggleContainer.style.display = isSkillsActive ? 'flex' : 'none';
};
const boot = () => {
// Verificar se existe alguma skill com arma
const hasAnyWeapon = document.querySelectorAll('.skill-icon[data-weapon]').length > 0;
if (!hasAnyWeapon) return;
// Encontrar posição: logo após .character-tabs
const characterTabs = document.querySelector('.character-tabs');
if (!characterTabs) return;
// Criar container do toggle
toggleContainer = document.createElement('div');
toggleContainer.className = 'char-weapon-toggle';
toggleContainer.innerHTML = `
<button class="char-weapon-btn" title="Visualizar com Arma">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14.5 17.5L3 6V3h3l11.5 11.5"/>
<path d="M13 19l6-6"/>
<path d="M16 16l4 4"/>
<path d="M19 21l2-2"/>
</svg>
Arma
</button>
`;
characterTabs.parentElement.insertBefore(toggleContainer, characterTabs.nextSibling);
// Criar modal informativo
const m = document.createElement('div');
m.id = 'weapon-info-modal';
m.className = 'weapon-modal';
m.innerHTML = `
`;
document.body.appendChild(m);
// Event listeners para o toggle
document.addEventListener('click', (ev) => {
const btn = ev.target.closest('.char-weapon-btn');
if (btn) {
ev.preventDefault();
const cur = btn.classList.contains('active');
applyWeaponState(!cur);
if (!cur) {
try {
if (localStorage.getItem('glaWeaponPopupDismissed') !== '1') showPopup();
} catch (x) { showPopup(); }
}
return;
}
if (ev.target.closest('.weapon-modal-close') || ev.target.closest('.weapon-modal-btn')) {
const c = document.getElementById('weapon-dont-show');
if (c && c.checked) {
try { localStorage.setItem('glaWeaponPopupDismissed', '1'); } catch (x) { }
}
hidePopup();
return;
}
if (ev.target.classList.contains('weapon-modal-overlay')) {
hidePopup();
}
});
// Observar mudanças de aba para mostrar/ocultar toggle
const tabBtns = document.querySelectorAll('.tab-btn');
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Delay maior para garantir que a classe active foi atualizada
setTimeout(updateToggleVisibility, 150);
});
});
// Visibilidade inicial (com delay para garantir que o DOM está pronto)
setTimeout(updateToggleVisibility, 100);
// Estado inicial do toggle
let init = false;
try {
if (localStorage.getItem('glaWeaponEnabled') === '1') init = true;
} catch (x) { }
setTimeout(() => applyWeaponState(init), 150);
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', boot);
} else {
boot();
}
})();
</script> <style>
/* Toggle posicionado abaixo das abas, alinhado com elas */
.char-weapon-toggle {
display: flex;
justify-content: flex-start;
align-items: center;
margin: 0 0 6px 8px;
z-index: 10;
}
/* Botão mais visível, similar ao estilo das abas */
.char-weapon-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 8px;
border: 2px solid transparent;
background: #333;
cursor: pointer;
transition: background .15s, border-color .15s;
color: #fff;
font-size: 14px;
font-weight: 600;
}
.char-weapon-btn svg {
flex-shrink: 0;
}
.char-weapon-btn:hover {
background: #444;
}
.char-weapon-btn.active {
background: #156bc7;
border-color: #156bc7;
}
/* Modal com cores neutras */
.weapon-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
.weapon-modal.show {
opacity: 1;
pointer-events: all;
}
.weapon-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .75);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.weapon-modal-content {
position: relative;
background: linear-gradient(135deg, #1f1f1f, #2a2a2a);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 12px;
max-width: 420px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
animation: modalIn .3s;
}
@keyframes modalIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.weapon-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.weapon-modal-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #fff;
}
.weapon-modal-close {
background: transparent;
border: none;
color: rgba(255, 255, 255, .5);
font-size: 24px;
cursor: pointer;
padding: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background .15s, color .15s;
}
.weapon-modal-close:hover {
background: rgba(255, 255, 255, .1);
color: #fff;
}
.weapon-modal-body {
padding: 20px;
color: rgba(255, 255, 255, .8);
line-height: 1.6;
font-size: 14px;
}
.weapon-modal-body p {
margin: 0 0 12px;
}
.weapon-modal-body p:last-child {
margin: 0;
}
.weapon-modal-body strong {
color: #6BB3FF;
}
.weapon-modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-top: 1px solid rgba(255, 255, 255, .08);
gap: 12px;
}
.weapon-modal-checkbox {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: rgba(255, 255, 255, .6);
cursor: pointer;
}
.weapon-modal-checkbox input[type="checkbox"] {
accent-color: #4A9EFF;
}
/* Botão sem efeito de movimento */
.weapon-modal-btn {
background: #4A9EFF;
border: none;
color: #fff;
padding: 10px 24px;
border-radius: 6px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background .15s;
}
.weapon-modal-btn:hover {
background: #3A8EEF;
}
@media (max-width: 600px) {
.char-weapon-toggle {
margin: 0 0 4px 6px;
}
.weapon-label {
display: none;
}
.char-weapon-btn {
padding: 5px 8px;
}
.weapon-modal-content {
width: 95%;
}
.weapon-modal-header,
.weapon-modal-body,
.weapon-modal-footer {
padding: 12px 16px;
}
.weapon-modal-footer {
flex-direction: column;
}
}
</style>