Widget:Character.WeaponToggle

De Wiki Gla
Revisão de 16h47min de 27 de novembro de 2025 por Gurren1 (discussão | contribs)
Ir para navegação Ir para pesquisar

<script> 

   (() => {
       // ---------- WEAPON TOGGLE SYSTEM ----------
       const applyWeaponState = (enabled) => {
           // Update global state in Skills widget
           if (typeof window.__setGlobalWeaponEnabled === 'function') {
               window.__setGlobalWeaponEnabled(enabled);
           }

           // Mark button as active/inactive
           document.querySelectorAll('.char-weapon-btn').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);
           }
       };

       const showPopup = () => {
           const modal = document.getElementById('weapon-info-modal');
           if (modal) {
               modal.classList.add('show');
           }
       };

       const hidePopup = () => {
           const modal = document.getElementById('weapon-info-modal');
           if (modal) {
               modal.classList.remove('show');
           }
       };

       // ---------- BOOT ----------
       const boot = () => {
           // Add weapon toggle BELOW translator
           const translator = document.querySelector('.char-translator');
           if (translator) {
               const weaponToggle = document.createElement('div');
               weaponToggle.className = 'char-weapon-toggle';
               weaponToggle.innerHTML = `
                   <button class="char-weapon-btn" title="Visualizar com Arma" aria-label="Visualizar com Arma">
                       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                           <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                           <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                       </svg>
                       Arma Equipada
                   </button>
               `;
               translator.parentElement.insertBefore(weaponToggle, translator.nextSibling);
           }

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

Visualização com Arma Especial

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

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

Nem todas as habilidades são alteradas pela arma. As habilidades que possuem modificações são marcadas com um badge dourado.

Você pode visualizar as alterações da mesma forma que o personagem normal: clicando nas habilidades marcadas.

                       <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(modal);

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

                   // Show popup on first activation
                   if (newState) {
                       try {
                           const dontShow = localStorage.getItem('glaWeaponPopupDismissed');
                           if (dontShow !== '1') {
                               showPopup();
                           }
                       } catch (e) {
                           showPopup();
                       }
                   }
                   return;
               }

               // Close modal
               if (ev.target.closest('.weapon-modal-close') || ev.target.closest('.weapon-modal-btn')) {
                   const checkbox = document.getElementById('weapon-dont-show');
                   if (checkbox && checkbox.checked) {
                       try {
                           localStorage.setItem('glaWeaponPopupDismissed', '1');
                       } catch (e) { }
                   }
                   hidePopup();
                   return;
               }

               // Close on overlay click
               if (ev.target.classList.contains('weapon-modal-overlay')) {
                   hidePopup();
               }
           });

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

           setTimeout(() => applyWeaponState(initialEnabled), 100);
       };

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

</script>

<style> 

   /* Toggle abaixo do translator */
   .char-weapon-toggle {
       position: absolute;
       top: 44px;
       right: 8px;
       z-index: 10;
       background: rgba(0, 0, 0, .35);
       padding: 6px 10px;
       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-btn {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 4px 8px;
       border-radius: 6px;
       border: 1px solid rgba(255, 255, 255, .18);
       background: rgba(255, 255, 255, .06);
       cursor: pointer;
       transition: all .15s ease;
       color: rgba(255, 255, 255, 0.75);
       font-size: 12px;
       font-weight: 500;
       white-space: nowrap;
   }

   .char-weapon-btn svg {
       flex-shrink: 0;
   }

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

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

   .char-weapon-btn.active:hover {
       border-color: rgba(255, 215, 0, 0.6);
       color: #ffd700;
   }

   /* Modal Popup */
   .weapon-modal {
       position: fixed;
       inset: 0;
       z-index: 9999;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.3s ease;
   }

   .weapon-modal.show {
       opacity: 1;
       pointer-events: all;
   }

   .weapon-modal-overlay {
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0.7);
       backdrop-filter: blur(4px);
   }

   .weapon-modal-content {
       position: relative;
       background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
       border: 1px solid rgba(255, 200, 0, 0.3);
       border-radius: 12px;
       max-width: 480px;
       width: 90%;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 200, 0, 0.1);
       animation: modalSlideIn 0.3s ease;
   }

   @keyframes modalSlideIn {
       from {
           transform: translateY(-20px) scale(0.95);
           opacity: 0;
       }

       to {
           transform: translateY(0) scale(1);
           opacity: 1;
       }
   }

   .weapon-modal-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 20px 24px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }

   .weapon-modal-header h3 {
       margin: 0;
       font-size: 18px;
       font-weight: 600;
       color: #ffcc00;
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .weapon-modal-close {
       background: transparent;
       border: none;
       color: rgba(255, 255, 255, 0.6);
       font-size: 28px;
       line-height: 1;
       cursor: pointer;
       padding: 0;
       width: 32px;
       height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 4px;
       transition: all 0.2s ease;
   }

   .weapon-modal-close:hover {
       background: rgba(255, 255, 255, 0.1);
       color: rgba(255, 255, 255, 0.9);
   }

   .weapon-modal-body {
       padding: 24px;
       color: rgba(255, 255, 255, 0.85);
       line-height: 1.6;
   }

   .weapon-modal-body p {
       margin: 0 0 16px 0;
   }

   .weapon-modal-body p:last-child {
       margin-bottom: 0;
   }

   .weapon-badge-example {
       display: inline-block;
       width: 14px;
       height: 14px;
       background: #ffcc00;
       border-radius: 3px;
       box-shadow: 0 0 8px rgba(255, 200, 0, 0.6);
       vertical-align: middle;
   }

   .weapon-modal-footer {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 16px 24px;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       gap: 16px;
   }

   .weapon-modal-checkbox {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       color: rgba(255, 255, 255, 0.7);
       cursor: pointer;
       user-select: none;
   }

   .weapon-modal-checkbox input {
       cursor: pointer;
   }

   .weapon-modal-btn {
       background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%);
       border: none;
       color: #1a1a2e;
       padding: 10px 24px;
       border-radius: 6px;
       font-weight: 600;
       font-size: 14px;
       cursor: pointer;
       transition: all 0.2s ease;
       box-shadow: 0 4px 12px rgba(255, 200, 0, 0.3);
   }

   .weapon-modal-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 16px rgba(255, 200, 0, 0.4);
   }

   .weapon-modal-btn:active {
       transform: translateY(0);
   }

   @media (max-width: 600px) {
       .char-weapon-toggle {
           top: 38px;
           right: 6px;
           padding: 5px 8px;
       }

       .weapon-label {
           display: none;
       }

       .char-weapon-btn {
           padding: 4px;
       }

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

       .weapon-modal-header {
           padding: 16px;
       }

       .weapon-modal-header h3 {
           font-size: 16px;
       }

       .weapon-modal-body {
           padding: 16px;
           font-size: 14px;
       }

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

       .weapon-modal-checkbox {
           justify-content: center;
       }
   }

</style>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Character.WeaponToggle&oldid=40863”