Widget:Character.WeaponToggle

<script>

   (() => {
       let drawer = null;
       let skillsTabBtn = null;

       const applyWeaponState = (enabled) => {
           // Atualizar flag global
           if (typeof window.__setGlobalWeaponEnabled === 'function') {
               window.__setGlobalWeaponEnabled(enabled);
           }

           // Atualizar visual da gaveta
           if (drawer) {
               drawer.classList.toggle('active', enabled);
           }

           // Salvar preferência
           try {
               localStorage.setItem('glaWeaponEnabled', enabled ? '1' : '0');
           } catch (x) { }

           // Aplicar/remover classe e indicador visual em TODAS as skills com arma
           document.querySelectorAll('.skill-icon[data-weapon]').forEach(el => {
               if (enabled) {
                   el.classList.add('has-weapon-available');
                   let ind = el.querySelector('.weapon-indicator');
                   if (!ind) {
                       ind = document.createElement('div');
                       ind.className = 'weapon-indicator';
                       el.appendChild(ind);
                   }
               } else {
                   el.classList.remove('has-weapon-available');
                   el.classList.remove('weapon-equipped');
                   el.style.removeProperty('--weapon-badge-url');
                   const ind = el.querySelector('.weapon-indicator');
                   if (ind) ind.remove();
               }
           });

           // 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 updateDrawerVisibility = () => {
           if (!drawer || !skillsTabBtn) return;
           const isSkillsActive = skillsTabBtn.classList.contains('active');
           drawer.style.display = isSkillsActive ? 'block' : 'none';
       };

       const boot = () => {
           // Verificar se existe alguma skill com arma
           const hasAnyWeapon = document.querySelectorAll('.skill-icon[data-weapon]').length > 0;
           if (!hasAnyWeapon) return;

           // Encontrar o botão da aba "Habilidades"
           skillsTabBtn = document.querySelector('.tab-btn[data-tab="skills"]');
           if (!skillsTabBtn) return;

           // Criar wrapper relativo ao redor do botão (sem mudar visual)
           const wrapper = document.createElement('div');
           wrapper.className = 'weapon-drawer-wrapper';
           skillsTabBtn.parentElement.insertBefore(wrapper, skillsTabBtn);
           wrapper.appendChild(skillsTabBtn);

           // Criar a gaveta que sai por trás do botão
           drawer = document.createElement('button');
           drawer.className = 'weapon-drawer';
           drawer.title = 'Visualizar com Arma';
           drawer.textContent = 'Arma';
           wrapper.appendChild(drawer);

           // Criar modal informativo
           const m = document.createElement('div');
           m.id = 'weapon-info-modal';
           m.className = 'weapon-modal';
           m.innerHTML = `

Visualização com Arma Especial

                   <button class="weapon-modal-close">×</button>

Este modo ativa a visualização do personagem equipado com sua arma especial.

As habilidades melhoradas ficam destacadas com borda e brilho azul, mesmo quando não selecionadas.

                   <label class="weapon-modal-checkbox">
                       <input type="checkbox" id="weapon-dont-show">
                       Não mostrar novamente
                   </label>
                   <button class="weapon-modal-btn">Entendi</button>

       `;
           document.body.appendChild(m);

           // Tentar exibir link da arma, se houver name no JSON
           try {
               const firstWithWeapon = document.querySelector('.skill-icon[data-weapon]');
               if (firstWithWeapon) {
                   const raw = firstWithWeapon.getAttribute('data-weapon');
                   const obj = JSON.parse(raw || '{}');
                   const nm = (obj && obj.name) ? String(obj.name).trim() : ;
                   if (nm) {
                       const linkHost = (window.mw && mw.util && typeof mw.util.getUrl === 'function') ? mw.util.getUrl(nm) : ('/index.php?title=' + encodeURIComponent(nm));
                       const holder = m.querySelector('.weapon-info-link');
                       if (holder) {
                           holder.style.display = 'block';
                           holder.innerHTML = `<a href="${linkHost}" style="color:#6BB3FF;text-decoration:none;font-weight:600">Ver página da arma: ${nm}</a>`;
                       }
                   }
               }
           } catch (_) { }

           // Event listeners
           drawer.addEventListener('click', (ev) => {
               ev.preventDefault();
               ev.stopPropagation();
               const cur = drawer.classList.contains('active');
               applyWeaponState(!cur);
               if (!cur) {
                   try {
                       if (localStorage.getItem('glaWeaponPopupDismissed') !== '1') showPopup();
                   } catch (x) { showPopup(); }
               }
           });

           document.addEventListener('click', (ev) => {
               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
           const tabBtns = document.querySelectorAll('.tab-btn');
           tabBtns.forEach(btn => {
               btn.addEventListener('click', () => {
                   setTimeout(updateDrawerVisibility, 150);
               });
           });

           // Visibilidade inicial
           setTimeout(updateDrawerVisibility, 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>

   /* Wrapper que envolve o botão da aba sem alterar nada nele */
   .weapon-drawer-wrapper {
       position: relative;
       display: inline-block;
       overflow: visible !important;
   }

   /* Garantir que containers pais não cortem a gaveta */
   .character-tabs,
   .character-header,
   .character-topbar,
   .character-box {
       overflow: visible !important;
   }

   /* Gaveta que sai por trás do botão */
   .weapon-drawer {
       position: absolute;
       top: 100%;
       left: 50%;
       transform: translateX(-50%);
       z-index: 1;
       margin-top: -2px;
       padding: 6px 14px 8px;
       background: #333;
       color: #ccc;
       border: none;
       border-radius: 0 0 8px 8px;
       font-size: 12px;
       font-weight: 600;
       cursor: pointer;
       transition: background .15s, color .15s;
       white-space: nowrap;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   }

   .weapon-drawer:hover {
       background: #444;
       color: #fff;
   }

   .weapon-drawer.active {
       background: #156bc7;
       color: #fff;
   }

   /* 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;
   }

   .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) {
       .weapon-drawer {
           display: none;
       }

       .weapon-modal-content {
           width: 95%;
       }

       .weapon-modal-header,
       .weapon-modal-body,
       .weapon-modal-footer {
           padding: 12px 16px;
       }

       .weapon-modal-footer {
           flex-direction: column;
       }
   }

</style>