Widget:Test3

De PokeXGames
Ir para navegação Ir para pesquisar

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

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Busca de Imagens por Nome</title>
   <style>
       .hidden {
           display: none;
       }
       .dropdown {
           border: 1px solid #ccc;
           max-height: 150px;
           overflow-y: auto;
           position: absolute;
           background: white;
           width: 100%;
           z-index: 1000;
       }
       .dropdown-item {
           padding: 8px;
           cursor: pointer;
           display: flex;
           align-items: center;
       }
       .dropdown-item img {
           margin-right: 10px;
           width: 30px;
           height: 30px;
       }
       .dropdown-item.active {
           background-color: #f0f0f0;
       }
       .image-container {
           margin-top: 20px;
       }
       .wikitable {
           border-collapse: collapse;
           margin: 10px 0;
       }
       .wikitable th, .wikitable td {
           border: 1px solid #ccc;
           padding: 8px;
       }
   </style>

</head> <body> 

   <form id="imageForm">

           <input type="text" id="imageSearch" placeholder="Digite o nome do Pokémon" autocomplete="off">

   </form>

   <script>
       // Função para gerar a URL da imagem no padrão da wiki
       function generateWikiImageUrl(imageName) {
           return `https://wiki.pokexgames.com/index.php?title=Especial:Redirecionar/file&wpvalue=${imageName}`;
       }

       // Dados dos Pokémon
       const imageList = {
           "Bulbasaur": {
               "imageUrl": generateWikiImageUrl("001-Bulbasaur.png"),
               "speed": "220",
               "Balls":  ["Poke", "Great", "Super", "Ultra"],
               "Special": ["Janguru"],
               "MasterBall": "Nao"
           },
           "Dugtrio": {
               "imageUrl": generateWikiImageUrl("051-Dugtrio.png"),
               "speed": "350",
               "Fast": "Sim",
               "Balls": ["Poke", "Great", "Super", "Ultra"],
               "Special": ["Fast","Magu"],
               "MasterBall": "Sim",
               "MasterBoost": "50"
           },
   "Piplup": {
       "imageUrl": generateWikiImageUrl("393-Piplup.png"),
       "speed": "220",
       "Balls": [
           "Poke",
           "Great",
           "Super",
           "Ultra"
       ],
       "MasterBall": "Nao",
       "Special": []
   },
   "Electrode": {
       "imageUrl": generateWikiImageUrl("101-Electrode.png"),
       "speed": "260",
       "Balls":  ["Timer"],
       "MasterBall": "Sim",
       "MasterBoost": "50"
   },
       };

       const imageSearch = document.getElementById('imageSearch');
       const dropdown = document.getElementById('dropdown');
       const imageContainer = document.getElementById('imageContainer');

       // Evento de input no campo de busca
       imageSearch.addEventListener('input', function () {
           const searchValue = this.value.trim().toLowerCase();
           dropdown.innerHTML = ;

           if (searchValue) {
               Object.keys(imageList).forEach(imageName => {
                   if (imageName.toLowerCase().includes(searchValue)) {
                       const dropdownItem = document.createElement('div');
                       dropdownItem.classList.add('dropdown-item');

                       const imgElement = document.createElement('img');
                       imgElement.src = imageList[imageName].imageUrl;
                       imgElement.alt = imageName;

                       dropdownItem.appendChild(imgElement);
                       dropdownItem.appendChild(document.createTextNode(imageName));

                       dropdownItem.addEventListener('click', function () {
                           showImageInfo(imageName);
                           dropdown.classList.add('hidden');
                       });
                       dropdown.appendChild(dropdownItem);
                   }
               });

               dropdown.classList.remove('hidden');
           } else {
               dropdown.classList.add('hidden');
           }
       });

       // Navegação no dropdown com teclado
       document.addEventListener('keydown', function (event) {
           if (dropdown.classList.contains('hidden') || !dropdown.childNodes.length) {
               return; // Sai da função se o dropdown estiver escondido ou vazio
           }

           const allItems = dropdown.querySelectorAll('.dropdown-item');
           let activeItem = document.querySelector('.dropdown-item.active');

           if (event.key === 'ArrowDown') {
               allItems.forEach(item => item.classList.remove('active')); // Remove 'active'

               if (activeItem) {
                   const nextItem = activeItem.nextElementSibling || allItems[0];
                   nextItem.classList.add('active');
                   nextItem.scrollIntoView({ block: "nearest" });
               } else {
                   allItems[0].classList.add('active');
                   allItems[0].scrollIntoView({ block: "nearest" });
               }
               event.preventDefault();
           } else if (event.key === 'ArrowUp') {
               allItems.forEach(item => item.classList.remove('active')); // Remove 'active'

               if (activeItem) {
                   const previousItem = activeItem.previousElementSibling || allItems[allItems.length - 1];
                   previousItem.classList.add('active');
                   previousItem.scrollIntoView({ block: "nearest" });
               } else {
                   allItems[allItems.length - 1].classList.add('active');
                   allItems[allItems.length - 1].scrollIntoView({ block: "nearest" });
               }
               event.preventDefault();
           } else if (event.key === 'Enter') {
               if (activeItem) {
                   activeItem.click();
               }
               event.preventDefault();
           }
       });

       // Eventos de mouse no dropdown
       dropdown.addEventListener('mouseover', function (event) {
           if (event.target.classList.contains('dropdown-item')) {
               const allItems = dropdown.querySelectorAll('.dropdown-item');
               allItems.forEach(item => item.classList.remove('active')); // Remove 'active'
               event.target.classList.add('active'); // Adiciona 'active' ao item do mouse
           }
       });

       dropdown.addEventListener('mouseout', function () {
           const allItems = dropdown.querySelectorAll('.dropdown-item');
           allItems.forEach(item => item.classList.remove('active')); // Remove 'active'
       });

       // Fechar dropdown ao clicar fora
       document.addEventListener('click', function (event) {
           if (!imageSearch.contains(event.target)) {
               dropdown.classList.add('hidden');
           }
       });

// Função para exibir as informações do Pokémon function showImageInfo(imageName) { 

   const imageInfo = imageList[imageName];
   let imagesHtml = `

           <img src="${imageInfo.imageUrl}" alt="${imageName}" style="vertical-align: middle;">
Pokébolas Recomendadas 
   `;

   // Adiciona as Pokébolas Recomendadas
   imageInfo.Balls.forEach(ball => {
       imagesHtml += `
           <img src="${generateWikiImageUrl(`${ball}-ball(1).png`)}" alt="${ball} Ball" style="vertical-align: middle;"> ${ball} Ball 

       `;
   });

   imagesHtml += `

   `;

   // Adiciona a tabela de Pokébolas Especiais apenas se houver Pokébolas Especiais
   if (imageInfo.Special && imageInfo.Special.length > 0) {
       imagesHtml += `
Pokébolas Especiais 
       `;

       // Adiciona as Pokébolas Especiais (agora suporta múltiplas)
       imageInfo.Special.forEach(specialBall => {
           imagesHtml += `
               <img src="${generateWikiImageUrl(`${specialBall}-ball.png`)}" alt="${specialBall} Ball" style="vertical-align: middle;"> ${specialBall} Ball 

           `;
       });

       imagesHtml += `

       `;
   }

   imagesHtml += `

   `;

   // Adiciona a informação sobre a Master Ball
   if (imageInfo.MasterBall === "Sim") {
       imagesHtml += `

É possível jogar a <img src="${generateWikiImageUrl('Master-ball(1).png')}" alt="Master Ball" style="vertical-align: middle;"> Master Ball no <img src="${imageInfo.imageUrl}" alt="${imageName}" style="vertical-align: middle;"> ${imageName}. Após a captura, o boost será ${imageInfo.MasterBoost}.

       `;
   } else if (imageInfo.MasterBall === "Nao") {
       imagesHtml += `

Não é possível jogar a <img src="${generateWikiImageUrl('Master-ball(1).png')}" alt="Master Ball" style="vertical-align: middle;"> Master Ball no <img src="${imageInfo.imageUrl}" alt="${imageName}" style="vertical-align: middle;"> ${imageName}. 

       `;
   }
imagesHtml += `

`; 

   imageContainer.innerHTML = imagesHtml;
   imageContainer.classList.remove('hidden');

} 

   </script>

</body> </html>

Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:Test3&oldid=96568”