Widget:Character.WeaponToggle

<script>

   (() => {
       // ---------- WEAPON TOGGLE SYSTEM ----------
       const applyWeaponState = (enabled) => {
           // Update global state
           if (window.__setGlobalWeaponEnabled) {
               window.__setGlobalWeaponEnabled(enabled);
           }

           // Mark button as active/inactive
           document.querySelectorAll('.char-weapon-toggle').forEach(b => {
               b.classList.toggle('active', enabled);
           });

           // Save to localStorage
           try {
               localStorage.setItem('glaWeaponEnabled', enabled ? '1' : '0');
           } catch (e) { }

           // Re-click last active skill to refresh display
           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);
           }
       };

       // ---------- BOOT ----------
       const boot = () => {
           // Button click handler
           document.addEventListener('click', (ev) => {
               const btn = ev.target.closest('.char-weapon-toggle');
               if (!btn) return;
               ev.preventDefault();
               const currentState = btn.classList.contains('active');
               applyWeaponState(!currentState);
           });

           // Load initial state from localStorage
           let initialEnabled = false;
           try {
               const saved = localStorage.getItem('glaWeaponEnabled');
               if (saved === '1') initialEnabled = true;
           } catch (e) { }

           applyWeaponState(initialEnabled);
       };

       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', boot);
       } else {
           boot();
       }

       // Expose setter for Skills widget
       window.__setGlobalWeaponEnabled = (enabled) => {
           if (typeof enabled === 'boolean') {
               // This will be set by Widget_Character.Skills.html
           }
       };
   })();

</script>

   <button class="char-weapon-toggle" title="Equipar/Desequipar Armas" aria-label="Equipar/Desequipar Armas">
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M6.5 6.5l11 11" />
           <path d="M21 3l-6 6" />
           <path d="M21 3l-3.5 10.5" />
           <circle cx="4" cy="20" r="2" />
       </svg>
   </button>

<style>

   .char-weapon-toggle-wrapper {
       position: absolute;
       top: 8px;
       left: 8px;
       z-index: 10;
       background: rgba(0, 0, 0, .35);
       padding: 4px;
       border-radius: 8px;
       border: 1px solid rgba(255, 255, 255, .15);
       backdrop-filter: blur(2px);
       -webkit-backdrop-filter: blur(2px);
       box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
   }

   .char-weapon-toggle {
       width: 32px;
       height: 24px;
       padding: 0;
       border-radius: 6px;
       border: 1px solid rgba(255, 255, 255, .18);
       background: rgba(255, 255, 255, .06);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       overflow: hidden;
       transition: transform .08s ease, border-color .15s ease, background .15s ease, outline-color .15s ease;
       outline: 2px solid transparent;
       color: rgba(255, 255, 255, 0.7);
   }

   .char-weapon-toggle:hover {
       border-color: rgba(255, 200, 100, .4);
       transform: translateY(-1px);
       color: rgba(255, 200, 100, 0.9);
   }

   .char-weapon-toggle:focus-visible {
       outline-color: #ffcc00;
       outline-offset: 2px;
   }

   .char-weapon-toggle svg {
       pointer-events: none;
   }

   /* ATIVO em DOURADO */
   .char-weapon-toggle.active {
       outline-color: #ffcc00;
       background: rgba(255, 200, 0, 0.15);
       border-color: rgba(255, 200, 0, 0.5);
       color: #ffcc00;
   }

   .char-weapon-toggle.active:hover {
       color: #ffd700;
   }

   @media (max-width: 600px) {
       .char-weapon-toggle-wrapper {
           top: 6px;
           left: 6px;
           padding: 3px;
       }

       .char-weapon-toggle {
           width: 28px;
           height: 20px;
           border-radius: 5px;
       }
   }

</style>