Mudanças entre as edições de "Widget:Character.WeaponToggle"

De Wiki Gla
Ir para navegação Ir para pesquisar
(Criou página com '<script> (() => { // ---------- WEAPON TOGGLE SYSTEM ---------- const applyWeaponState = (enabled) => { // Update global state if (...')
 
m
Linha 3: Linha 3:
         // ---------- WEAPON TOGGLE SYSTEM ----------
         // ---------- WEAPON TOGGLE SYSTEM ----------
         const applyWeaponState = (enabled) => {
         const applyWeaponState = (enabled) => {
             // Update global state
             // Update global state in Skills widget
             if (window.__setGlobalWeaponEnabled) {
             if (typeof window.__setGlobalWeaponEnabled === 'function') {
                 window.__setGlobalWeaponEnabled(enabled);
                 window.__setGlobalWeaponEnabled(enabled);
             }
             }
Linha 31: Linha 31:
         // ---------- BOOT ----------
         // ---------- BOOT ----------
         const boot = () => {
         const boot = () => {
            // Add button to translator (ao lado das bandeiras)
            const translator = document.querySelector('.char-translator');
            if (translator) {
                const btn = document.createElement('button');
                btn.className = 'char-flag char-weapon-toggle';
                btn.title = 'Equipar/Desequipar Armas';
                btn.setAttribute('aria-label', 'Equipar/Desequipar Armas');
                btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>`;
                translator.appendChild(btn);
            }
             // Button click handler
             // Button click handler
             document.addEventListener('click', (ev) => {
             document.addEventListener('click', (ev) => {
Linha 47: Linha 63:
             } catch (e) { }
             } catch (e) { }


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


Linha 55: Linha 71:
             boot();
             boot();
         }
         }
        // Expose setter for Skills widget
        window.__setGlobalWeaponEnabled = (enabled) => {
            if (typeof enabled === 'boolean') {
                // This will be set by Widget_Character.Skills.html
            }
        };
     })();
     })();
</script>
</script>
<div id="char-weapon-toggle" class="char-weapon-toggle-wrapper" role="group" aria-label="Weapon toggle">
    <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>
</div>


<style>
<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 {
     .char-weapon-toggle svg {
         pointer-events: none;
         pointer-events: none;
        width: 18px;
        height: 18px;
     }
     }


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


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


     @media (max-width: 600px) {
     .char-weapon-toggle:not(.active) {
        .char-weapon-toggle-wrapper {
        color: rgba(255, 255, 255, 0.7);
            top: 6px;
    }
            left: 6px;
            padding: 3px;
        }


        .char-weapon-toggle {
    .char-weapon-toggle:not(.active):hover {
            width: 28px;
        color: rgba(255, 200, 100, 0.9);
            height: 20px;
        border-color: rgba(255, 200, 100, .4);
            border-radius: 5px;
        }
     }
     }
</style>
</style>

Edição das 02h09min de 27 de novembro de 2025

<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-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 = () => {
           // Add button to translator (ao lado das bandeiras)
           const translator = document.querySelector('.char-translator');
           if (translator) {
               const btn = document.createElement('button');
               btn.className = 'char-flag char-weapon-toggle';
               btn.title = 'Equipar/Desequipar Armas';
               btn.setAttribute('aria-label', 'Equipar/Desequipar Armas');
               btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>`;
               translator.appendChild(btn);
           }
           // 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) { }
           setTimeout(() => applyWeaponState(initialEnabled), 100);
       };
       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', boot);
       } else {
           boot();
       }
   })();

</script>

<style>

   .char-weapon-toggle svg {
       pointer-events: none;
       width: 18px;
       height: 18px;
   }
   /* ATIVO em DOURADO */
   .char-weapon-toggle.active {
       outline-color: #ffcc00 !important;
       background: rgba(255, 200, 0, 0.15) !important;
       border-color: rgba(255, 200, 0, 0.5) !important;
       color: #ffcc00 !important;
   }
   .char-weapon-toggle.active:hover {
       color: #ffd700 !important;
       border-color: rgba(255, 215, 0, 0.6) !important;
   }
   .char-weapon-toggle:not(.active) {
       color: rgba(255, 255, 255, 0.7);
   }
   .char-weapon-toggle:not(.active):hover {
       color: rgba(255, 200, 100, 0.9);
       border-color: rgba(255, 200, 100, .4);
   }

</style>