Mudanças entre as edições de "Widget:Droflax"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 78: Linha 78:
     .personagem.hancock {
     .personagem.hancock {
       background-size: 115%;
       background-size: 115%;
    }
    .personagem.daddy {
      background-size: 100%;
      background-position: top;
     }
     }


Linha 225: Linha 230:
     <!-- aokiji -->
     <!-- aokiji -->
     <div class="personagem-box tier-diamante cortante especialista tanque fruta ponte parede">
     <div class="personagem-box tier-diamante cortante especialista tanque fruta ponte parede">
       <div class="personagem" data-static="https://i.postimg.cc/0NMJrvjJ/fundoaokiji.png"
       <div class="personagem" data-static="https://i.postimg.cc/0NMJrvjJ/fundoaokiji.png" data-gif="https://i.postimg.cc/nzKrQhJM/aokijiemotecard2.gif">
        data-gif="https://i.postimg.cc/nzKrQhJM/aokijiemotecard2.gif">
         <span>Aokiji</span>
         <span>Aokiji</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
Linha 338: Linha 342:
     <!-- luffy -->
     <!-- luffy -->
     <div class="personagem-box tier-diamante dps lutador fruta parede">
     <div class="personagem-box tier-diamante dps lutador fruta parede">
       <div class="personagem luffy" data-static="https://i.postimg.cc/L8hJ0Sz0/luffycard.png"
       <div class="personagem luffy" data-static="https://i.postimg.cc/L8hJ0Sz0/luffycard.png" data-gif="https://i.postimg.cc/G2n92s6Z/luffytsemotecard.gif">
        data-gif="https://i.postimg.cc/G2n92s6Z/luffytsemotecard.gif">
         <span>Monkey D. Luffy (TS)</span>
         <span>Monkey D. Luffy (TS)</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
Linha 347: Linha 350:
     <!-- nami ts -->
     <!-- nami ts -->
     <div class="personagem-box tier-diamante dps especialista">
     <div class="personagem-box tier-diamante dps especialista">
       <div class="personagem" data-static="https://i.postimg.cc/bvRMyPQ0/namits.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/CLnPG8Bz/namits2.png" data-gif="">
         <span>Nami (TS)</span>
         <span>Nami (TS)</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
Linha 380: Linha 383:
     <!-- sabo -->
     <!-- sabo -->
     <div class="personagem-box tier-diamante dps especialista lutador fruta parede">
     <div class="personagem-box tier-diamante dps especialista lutador fruta parede">
       <div class="personagem" data-static="https://i.postimg.cc/rmsL7svR/sabo.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/1tTQpXZP/sabo2.png" data-gif="">
         <span>Sabo</span>
         <span>Sabo</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
Linha 405: Linha 408:
     <!-- usopp ts -->
     <!-- usopp ts -->
     <div class="personagem-box tier-diamante dps atirador parede">
     <div class="personagem-box tier-diamante dps atirador parede">
       <div class="personagem" data-static="https://i.postimg.cc/Hx9B09SQ/usoppts.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/tCVbsY9z/usoppts2.png" data-gif="">
         <span>Usopp (TS)</span>
         <span>Usopp (TS)</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
Linha 469: Linha 472:
     <!-- Bonney -->
     <!-- Bonney -->
     <div class="personagem-box tier-gold suporte lutador fruta">
     <div class="personagem-box tier-gold suporte lutador fruta">
       <div class="personagem" data-static="https://i.postimg.cc/k4D2NM1c/bonney.png" data-gif="">
       <div class="personagem hancock" data-static="https://i.postimg.cc/mD8LyqnN/bonney4.png" data-gif="">
         <span>Jewelry Bonney</span>
         <span>Jewelry Bonney</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
Linha 557: Linha 560:
     <!-- kid -->
     <!-- kid -->
     <div class="personagem-box tier-gold atirador tanque fruta ponte parede">
     <div class="personagem-box tier-gold atirador tanque fruta ponte parede">
       <div class="personagem" data-static="https://i.postimg.cc/wMq0QGRH/kclass.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/wMq0QGRH/kid.png" data-gif="">
         <span>Eustass Kclass</span>
         <span>Eustass Kid</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
       </div>
       </div>
Linha 597: Linha 600:
     <!-- nami pré -->
     <!-- nami pré -->
     <div class="personagem-box tier-gold dps especialista parede">
     <div class="personagem-box tier-gold dps especialista parede">
       <div class="personagem" data-static="https://i.postimg.cc/dQh6Rp1s/namipre2.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/Jn7YZdZL/nami3.png" data-gif="">
         <span>Nami</span>
         <span>Nami</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
Linha 605: Linha 608:
     <!-- perona -->
     <!-- perona -->
     <div class="personagem-box tier-gold suporte especialista fruta parede">
     <div class="personagem-box tier-gold suporte especialista fruta parede">
       <div class="personagem perona" data-static="https://i.postimg.cc/138VbhkX/perona2.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/BQfYC6xp/perona3.png" data-gif="">
         <span>Perona</span>
         <span>Perona</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
Linha 774: Linha 777:
     <div class="personagem-box tier-prata bruiser lutador parede">
     <div class="personagem-box tier-prata bruiser lutador parede">
       <div class="personagem" data-static="https://i.postimg.cc/j2LQcgrJ/arlong.png" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/j2LQcgrJ/arlong.png" data-gif="">
         <span>Arlong </span>
         <span>Arlong</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
       </div>
       </div>
Linha 805: Linha 808:
     <!-- daddy -->
     <!-- daddy -->
     <div class="personagem-box tier-prata dps atirador">
     <div class="personagem-box tier-prata dps atirador">
       <div class="personagem" data-static="https://i.postimg.cc/Vvmdg40W/buggy.png" data-gif="">
       <div class="personagem daddy" data-static="https://i.postimg.cc/X7mfYHVX/daddy3.png" data-gif="">
         <span>Daddy Materson</span>
         <span>Daddy Materson</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
Linha 875: Linha 878:
     </div>
     </div>


     <!-- alvclassa -->
     <!-- alvida -->
     <div class="personagem-box tier-bronze suporte lutador fruta">
     <div class="personagem-box tier-bronze suporte lutador fruta">
       <div class="personagem" data-static="https://i.postimg.cc/yxGC7jXm/Alvclassa-Slime.webp" data-gif="">
       <div class="personagem" data-static="https://i.postimg.cc/yxGC7jXm/Alvida-Slime.webp" data-gif="">
         <span>Alvclassa</span>
         <span>Alvida</span>
         <div class="gif-overlay"></div>
         <div class="gif-overlay"></div>
       </div>
       </div>

Edição das 05h33min de 19 de junho de 2025

<!DOCTYPE html> <html lang="pt-BR">

<head> 

 <meta charset="UTF-8">
 <title>Teste GIF Hover</title>
 <style>
   body {
     margin: 0;
     font-family: sans-serif;
     color: white;
   }

   .search-bar {
     text-align: right;
     padding: 20px;
   }

   .search-bar input {
     padding: 8px;
     width: 250px;
     border-radius: 5px;
     border: 1px solid #ccc;
   }

   .container {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     justify-content: center;
     padding-bottom: 40px;
   }

   .personagem {
     width: 250px;
     height: 115px;
     border-radius: 10px;
     background-size: 150%;
     background-position: center -30px;
     transition: transform 0.3s;
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
     padding: 5px;
     font-weight: bold;
     color: white;
     text-shadow: 1px 1px 4px #000, 0 0 20px #000;
     position: relative;
     cursor: pointer;
     border: 2px solid #58aaff;
     overflow: hidden;
     text-decoration: none;
   }

   .personagem span {
     z-index: 2;
   }

   .gif-overlay {
     position: absolute;
     inset: 0;
     background-repeat: no-repeat;
     background-size: 150%;
     background-position: center -30px;
     opacity: 0;
     z-index: 1;
     pointer-events: none;
   }

   .personagem:hover .gif-overlay {
     opacity: 1;
   }

   .personagem.luffy .gif-overlay {
     background-position: center 0px;
   }

   .personagem.hancock {
     background-size: 115%;
   }

   .personagem.daddy {
     background-size: 100%;
     background-position: top;
   }

   .personagem.kizaru {
     background-position: center -20px;
   }

   .personagem.luffypre {
     background-position: center;
   }

   .personagem.perona {
     background-position: center -80px;
   }

   .personagem.sanjipre {
     background-position: center -50px;
   }

   .personagem.cabaji {
     background-size: 240%;
     background-position: center -80px;
   }

   .personagem.gin {
     background-position: center -120px;
   }

   .personagem.jango {
     background-position: left -40px top -20px;
     background-size: 180%;
   }

   /* --------- Tiers ----------- */
   .tier-diamante .personagem {
     background-color: #414c5c;
   }

   .tier-gold .personagem {
     background-color: #d4af37;
   }

   .tier-prata .personagem {
     background-color: #c0c0c0;
   }

   .tier-bronze .personagem {
     background-color: #7e4f20;
   }

   .filtros button {
     padding: 8px 14px;
     margin: 0 4px;
     border: none;
     border-radius: 5px;
     background-color: #58aaff;
     color: white;
     font-weight: bold;
     cursor: pointer;
     transition: background-color 0.3s;
   }

   .filtros button:hover {
     background-color: #307ac2;
   }

   .filtros button.ativo {
     background-color: #006eff;
     color: white;
     border-color: #2672d4;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
     transform: scale(1.05);
   }

   .classe-icon-wrapper {
     position: absolute;
     top: 5px;
     right: 5px;
     display: flex;
     gap: 1px;
     z-index: 10;
     pointer-events: none;
     transition: transform 0.4s ease;
   }

   .classe-icon {
     width: 32px;
     height: 32px;
     user-select: none;
     pointer-events: none;
     opacity: 1;
     transition: opacity 0.3s ease-in-out;
   }

   .personagem-box {
     position: relative;
     transition: transform 0.4s ease;
     transform-origin: center center;
   }

   .personagem-box:hover {
     transform: scale(1.05);
   }

   .personagem-box:hover .classe-icon {
     opacity: 0.8;
   }
 </style>

</head>

<body> 

   <input type="text" id="search" placeholder="Pesquisar personagem...">



     <button class="tipo-btn" data-tipo="all">Todos</button>
     <button class="tipo-btn" data-tipo="lutador">Lutador</button>
     <button class="tipo-btn" data-tipo="atirador">Atirador</button>
     <button class="tipo-btn" data-tipo="cortante">Cortante</button>
     <button class="tipo-btn" data-tipo="especialista">Especialista</button>
     <button class="tipo-btn" data-tipo="tanque">Tanque</button>
     <button class="tipo-btn" data-tipo="dps">DPS</button>
     <button class="tipo-btn" data-tipo="suporte">Suporte</button>
     <button class="tipo-btn" data-tipo="bruiser">Bruiser</button>
     <button class="tipo-btn" data-tipo="parede">Parede</button>
     <button class="tipo-btn" data-tipo="ponte">Ponte</button>

     <button class="tier-btn" data-tier="all">Todos</button>
     <button class="tier-btn" data-tier="tier-diamante">💎 Diamante</button>
     <button class="tier-btn" data-tier="tier-gold">⭐ Ouro</button>
     <button class="tier-btn" data-tier="tier-prata">🥈 Prata</button>
     <button class="tier-btn" data-tier="tier-bronze">🥉 Bronze</button>

       Aokiji

       Bartholomew Kuma

       Boa Hancock

       Borsalino Kizaru

       Brook (TS)

       Chopper (TS)

       Donquixote Doflamingo

       Dracule Mihawk

       Emporio Ivankov

       Enel

       Franky (TS)

       Jinbe

       Marshall D. Teach

       Marco

       Monkey D. Luffy (TS)

       Nami (TS)

       Portgas D. Ace

       Nico Robin (TS)



       Roronoa Zoro (TS)

       Sabo



       Sakazuki (Akainu)

       Shanks

       Usopp (TS)

       Uta

       Sanji (TS)

       Baby 5

       Bartolomeo

       Basil Hawkins

       Bastille

       Bellamy

       Jewelry Bonney

       Brook

       Capone Gang Bege

       Carrot

       Chopper

       Sir Crocodile

       Dalmatian

       Franky

       Gecko Moria

       Hina

       Jesus Burgess

       Eustass Kid

       Killer

       Koala

       Leo & Mansherry

       Monkey D. Luffy

       Nami

       Perona

       Rebecca

       Robin

       Zoro

       Ryuma

       Scratchmen Apoo

       Smoker

       Trafalgar D. Water Law

       Urouge

       Usopp

       Van Augur

       Vinsmoke Ichiji

       Vinsmoke Niji

       Vinsmoke Reiju

       Vinsmoke Sanji

       Vinsmoke Yonji

       X Drake

       Satori

       Gedatsu

       Ohm

       Shura

       Arlong

       Bepo

       Bon Clay

       Buggy

       Daddy Materson

       Daz Bones

       Zala

       Don Krieg

       Kuro

       Galdino

       Tashigi

       Nefitari Vivi

       Wapol

       Alvida

       Buchi & Sham

       Cabaji

       Chew

       Eric

       Gin

       Golden Week

       Hatchan

       Jango

       Kuroobi

       Mohji

       Morgan

       Babe & Drophy

       Gem & Mikita

       Pearl

 <script>
   const cards = document.querySelectorAll('.personagem');

   // Define as imagens estáticas e gifs, além do reset ao sair
   cards.forEach(card => {
     const staticImg = card.getAttribute('data-static');
     const gifImg = card.getAttribute('data-gif');
     const overlay = card.querySelector('.gif-overlay');
     card.style.backgroundImage = `url('${staticImg}')`;

     card.addEventListener('mouseenter', () => {
       const uniqueGifUrl = `${gifImg}?t=${new Date().getTime()}`; // Força reset
       overlay.style.backgroundImage = `url('${uniqueGifUrl}')`;
     });

     card.addEventListener('mouseleave', () => {
       overlay.style.backgroundImage = ;
     });
   });

   // Filtragem por nome no campo de busca
   document.getElementById('search').addEventListener('input', function () {
     const term = this.value.toLowerCase();
     cards.forEach(card => {
       const name = card.querySelector('span').textContent.toLowerCase();
       const wrapper = card.parentElement;
       const tierBox = wrapper.parentElement;
       tierBox.style.display = name.includes(term) ? 'block' : 'none';
     });
   });



   //  Links dos personagens
   const personagemLinks = {
     "Aokiji": "https://wiki.gla.com.br/index.php/Aokiji",
     "Bartholomew Kuma": "https://wiki.gla.com.br/index.php/Kuma",
     "Boa Hancock": "https://wiki.gla.com.br/index.php/Boa_Hancock",
     "Borsalino Kizaru": "https://wiki.gla.com.br/index.php/Kizaru",
     "Brook (TS)": "https://wiki.gla.com.br/index.php/Brook_(Timeskip)",
     "Chopper (TS)": "https://wiki.gla.com.br/index.php/Chopper_(Timeskip)",
     "Donquixote Doflamingo": "https://wiki.gla.com.br/index.php/Doflamingo",
     "Dracule Mihawk": "https://wiki.gla.com.br/index.php/Mihawk",
     "Emporio Ivankov": "https://wiki.gla.com.br/index.php/Ivankov",
     "Enel": "https://wiki.gla.com.br/index.php/Enel",
     "Franky (TS)": "https://wiki.gla.com.br/index.php/Franky_(Timeskip)",
     "Jinbe": "https://wiki.gla.com.br/index.php/Jinbe",
     "Marshall D. Teach": "https://wiki.gla.com.br/index.php/Marshall_D._Teach",
     "Marco": "https://wiki.gla.com.br/index.php/Marco",
     "Monkey D. Luffy (TS)": "https://wiki.gla.com.br/index.php/Luffy_(Timeskip)",
     "Nami (TS)": "https://wiki.gla.com.br/index.php/Nami_(Timeskip)",
     "Portgas D. Ace": "https://wiki.gla.com.br/index.php/Ace",
     "Nico Robin (TS)": "https://wiki.gla.com.br/index.php/Robin_(Timeskip)",
     "Roronoa Zoro (TS)": "https://wiki.gla.com.br/index.php/Zoro_(Timeskip)",
     "Sabo": "https://wiki.gla.com.br/index.php/Sabo",
     "Sakazuki (Akainu)": "https://wiki.gla.com.br/index.php/Akainu",
     "Shanks": "https://wiki.gla.com.br/index.php/Shanks",
     "Usopp (TS)": "https://wiki.gla.com.br/index.php/Usopp_(Timeskip)",
     "Uta": "https://wiki.gla.com.br/index.php/Uta",
     "Sanji (TS)": "https://wiki.gla.com.br/index.php/Sanji_(Timeskip)",
     "Capone Gang Bege": "https://wiki.gla.com.br/index.php/Capone_Bege",
     "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
     "Alvida (Slime)": "https://wiki.gla.com.br/index.php/Alvida",
     "Baby 5": "https://wiki.gla.com.br/index.php/Baby_5",
     "Bartolomeo": "https://wiki.gla.com.br/index.php/Bartolomeo",
     "Basil Hawkins": "https://wiki.gla.com.br/index.php/Basil_Hawkins",
     "Bastille": "https://wiki.gla.com.br/index.php/Bastille",
     "Bellamy": "https://wiki.gla.com.br/index.php/Bellamy",
     "Jewelry Bonney": "https://wiki.gla.com.br/index.php/Bonney",
     "Brook": "https://wiki.gla.com.br/index.php/Brook",
     "Carrot": "https://wiki.gla.com.br/index.php/Carrot",
     "Chopper": "https://wiki.gla.com.br/index.php/Chopper",
     "Sir Crocodile": "https://wiki.gla.com.br/index.php/Crocodile",
     "Dalmatian": "https://wiki.gla.com.br/index.php/Dalmatian",
     "Franky": "https://wiki.gla.com.br/index.php/Franky",
     "Gecko Moria": "https://wiki.gla.com.br/index.php/Gecko_Moria",
     "Hina": "https://wiki.gla.com.br/index.php/Hina",
     "Jesus Burgess": "https://wiki.gla.com.br/index.php/Jesus_Burgess",
     "Eustass Kid": "https://wiki.gla.com.br/index.php/Kid",
     "Killer": "https://wiki.gla.com.br/index.php/Killer",
     "Koala": "https://wiki.gla.com.br/index.php/Koala",
     "Leo & Mansherry": "https://wiki.gla.com.br/index.php/Leo",
     "Monkey D. Luffy": "https://wiki.gla.com.br/index.php/Luffy",
     "Nami": "https://wiki.gla.com.br/index.php/Nami",
     "Perona": "https://wiki.gla.com.br/index.php/Perona",
     "Rebecca": "https://wiki.gla.com.br/index.php/Rebecca",
     "Robin": "https://wiki.gla.com.br/index.php/Robin",
     "Zoro": "https://wiki.gla.com.br/index.php/Zoro",
     "Ryuma": "https://wiki.gla.com.br/index.php/Ryuma",
     "Scratchmen Apoo": "https://wiki.gla.com.br/index.php/Apoo",
     "Smoker": "https://wiki.gla.com.br/index.php/Smoker",
     "Trafalgar D. Water Law": "https://wiki.gla.com.br/index.php/Law",
     "Urouge": "https://wiki.gla.com.br/index.php/Urouge",
     "X Drake": "https://wiki.gla.com.br/index.php/X_Drake",
     "Usopp": "https://wiki.gla.com.br/index.php/Usopp",
     "Van Augur": "https://wiki.gla.com.br/index.php/Van_Augur",
     "Vinsmoke Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
     "Vinsmoke Niji": "https://wiki.gla.com.br/index.php/Niji",
     "Vinsmoke Reiju": "https://wiki.gla.com.br/index.php/Reiju",
     "Vinsmoke Sanji": "https://wiki.gla.com.br/index.php/Sanji",
     "Vinsmoke Yonji": "https://wiki.gla.com.br/index.php/Yonji",
     "Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
     "Satori": "https://wiki.gla.com.br/index.php/Satori",
     "Gedatsu": "https://wiki.gla.com.br/index.php/Gedatsu",
     "Ohm": "https://wiki.gla.com.br/index.php/Ohm",
     "Shura": "https://wiki.gla.com.br/index.php/Shura",
     "Arlong": "https://wiki.gla.com.br/index.php/Arlong",
     "Bepo": "https://wiki.gla.com.br/index.php/Bepo",
     "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
     "Buggy": "https://wiki.gla.com.br/index.php/Buggy",
     "Daddy Materson": "https://wiki.gla.com.br/index.php/Daddy_Masterson",
     "Daz Bones": "https://wiki.gla.com.br/index.php/Mr.1",
     "Zala": "https://wiki.gla.com.br/index.php/Miss_Doublefinger",
     "Don Krieg": "https://wiki.gla.com.br/index.php/Don_Krieg",
     "Kuro": "https://wiki.gla.com.br/index.php/Kuro",
     "Mohji": "https://wiki.gla.com.br/index.php/Mohji",
     "Galdino": "https://wiki.gla.com.br/index.php/Mr.3",
     "Tashigi": "https://wiki.gla.com.br/index.php/Tashigi",
     "Nefitari Vivi": "https://wiki.gla.com.br/index.php/Vivi",
     "Wapol": "https://wiki.gla.com.br/index.php/Wapol",
     "Alvida": "https://wiki.gla.com.br/index.php/Alvida",
     "Buchi & Sham": "https://wiki.gla.com.br/index.php/Buchi",
     "Cabaji": "https://wiki.gla.com.br/index.php/Cabaji",
     "Chew": "https://wiki.gla.com.br/index.php/Chew",
     "Eric": "https://wiki.gla.com.br/index.php/Eric",
     "Gin": "https://wiki.gla.com.br/index.php/Gin",
     "Golden Week": "https://wiki.gla.com.br/index.php/Goldenweek",
     "Hatchan": "https://wiki.gla.com.br/index.php/Hatchan",
     "Jango": "https://wiki.gla.com.br/index.php/Jango",
     "Kuroobi": "https://wiki.gla.com.br/index.php/Kuroobi",
     "Morgan": "https://wiki.gla.com.br/index.php/Morgan",
     "Babe & Drophy": "https://wiki.gla.com.br/index.php/Mr.4",
     "Gem & Mikita": "https://wiki.gla.com.br/index.php/Mr.5",
     "Pearl": "https://wiki.gla.com.br/index.php/Pearl"
   };

   // Envolve as boxes com <a> e aplica links clicáveis
   cards.forEach(card => {
     const span = card.querySelector('span');
     const nomePersonagem = span?.textContent.trim();
     const link = personagemLinks[nomePersonagem];
     if (link) {
       const wrapper = document.createElement('a');
       wrapper.href = link;
       wrapper.target = "_blank";
       wrapper.style.display = "flex";
       wrapper.style.textDecoration = "none";
       wrapper.style.flex = "0 1 auto";
       wrapper.style.alignItems = "stretch";
       card.parentElement.replaceChild(wrapper, card);
       wrapper.appendChild(card);
     }
   });

   const tierButtons = document.querySelectorAll('.tier-btn');
   const tipoButtons = document.querySelectorAll('.tipo-btn');
   const personagemBoxes = document.querySelectorAll('.personagem-box');

   let activeTier = 'all';
   let activeTipos = new Set();

   const iconesClasse = {
     lutador: 'https://wiki.gla.com.br/images/e/e6/Fighter.png',
     especialista: 'https://wiki.gla.com.br/images/f/f6/Especialist.png',
     tanque: 'https://wiki.gla.com.br/images/9/9d/Tank.png',
     suporte: 'https://wiki.gla.com.br/images/a/ab/Support.png',
     bruiser: 'https://wiki.gla.com.br/images/e/e4/Bruiser.png',
     atirador: 'https://wiki.gla.com.br/images/e/ed/Shooter.png',
     dps: 'https://wiki.gla.com.br/images/6/60/Dps.png',
     cortante: 'https://wiki.gla.com.br/images/9/9a/Slasher.png',
     fruta: 'https://wiki.gla.com.br/images/e/e4/Devil-fruit.png',
   };


function updateFiltros() { 

 personagemBoxes.forEach(box => {
   const matchesTier = activeTier === 'all' || box.classList.contains(activeTier);
   const matchesTipo =
     activeTipos.size === 0 ||
     [...activeTipos].every(tipo => box.classList.contains(tipo));

   box.style.display = (matchesTier && matchesTipo) ? 'block' : 'none';
 });

}

tierButtons.forEach(button => { 

 button.addEventListener('click', () => {
   const selectedTier = button.dataset.tier;
   if (selectedTier === activeTier || selectedTier === 'all') {
     activeTier = 'all';
     tierButtons.forEach(btn => btn.classList.remove('ativo'));
   } else {
     activeTier = selectedTier;
     tierButtons.forEach(btn => btn.classList.remove('ativo'));
     button.classList.add('ativo');
   }
   updateFiltros();
 });

});

tipoButtons.forEach(button => { 

 button.addEventListener('click', () => {
   const selectedTipo = button.dataset.tipo;
   if (selectedTipo === 'all') {
     activeTipos.clear();
     tipoButtons.forEach(btn => btn.classList.remove('ativo'));
   } else {
     if (activeTipos.has(selectedTipo)) {
       activeTipos.delete(selectedTipo);
       button.classList.remove('ativo');
     } else {
       activeTipos.add(selectedTipo);
       button.classList.add('ativo');
     }
     tipoButtons.forEach(btn => {
       if (btn.dataset.tipo === 'all') btn.classList.remove('ativo');
     });
   }
   updateFiltros();
 });

}); 


   document.querySelectorAll('.personagem-box').forEach(box => {
     const classes = box.className.split(/\s+/);
     const icones = classes
       .filter(classe => iconesClasse.hasOwnProperty(classe))
       .map(classe => {
         const img = document.createElement('img');
         img.src = iconesClasse[classe];
         img.alt = classe;
         img.className = 'classe-icon';
         return img;
       });

     if (icones.length > 0) {
       const wrapper = document.createElement('div');
       wrapper.className = 'classe-icon-wrapper';
       icones.forEach(icon => wrapper.appendChild(icon));
       box.appendChild(wrapper);
     }
   });

 </script>

</body>

</html>

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