Widget:Test4: mudanças entre as edições

Edição atual tal como às 23h16min de 23 de março de 2025

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

<head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Seleção de Hunts</title>
   <style> 
       .borda-container {
           display: flex;
           flex-direction: column;
           padding: .5rem 2rem;
           margin: 0 auto;
           border: 42px solid transparent;
           border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
           border-image-repeat: round;
           width: 100%;
           box-sizing: border-box;
           min-height: 620px;
           overflow: hidden;
       }

       .hidden {
           display: none;
       }

       .input-group {
           margin: 20px 0;
       }

       .maps__select {
           width: 100%;
           padding: 10px;
           font-size: 16px;
           border-radius: 5px;
           border: 1px solid #ccc;
           background-color: #fff;
           margin-top: 15px;
           box-sizing: border-box;
       }

       .image-container {
           display: flex;
           flex-wrap: wrap;
           gap: 10px;
           margin-top: 20px;
       }

       .image-item {
           flex: 1 0 30%;
           text-align: left;
       }

.image-info p {

   margin-bottom: 6px; /* Reduz o espaço entre os parágrafos */
   margin-left: 40px;
   line-height: 1.5;

}

.image-info img {

   vertical-align: middle;
   display: inline-block;
   margin-right: 5px;
   transform: translateY(-3px); /* Sobe a imagem 5px */

}

.class-icons img {

   vertical-align: middle;
   display: inline-block;
   margin-right: 5px;
   transform: translateY(-3px); /* Sobe a imagem 5px */

}

       .image-item {
           display: flex;
           justify-content: center;
           width: 100%;
       }

       .image-content {
           text-align: left;
           max-width: 400px;
           width: 100%;
           margin-bottom: 35px;

       .tag-button {
           display: inline-flex;
           color: #333;
           padding: 5px 12px;
           margin: 5px;
           border-radius: 20px;
           cursor: pointer;
           font-size: 16px;
       }

       .tag-button.selected {
           background-color: #d586e1;
           color: #050000;
           border: #9d4cea solid 2px;
           font-weight: bolder;
       }

       .class-container {
           display: flex;
           align-items: center;
           gap: 10px;
   margin-top: -5px; /* Aproxima "Clãs:" do item anterior */
       }

       .type-dropdown {
           margin-top: 10px;
       }

       .disabled {
           opacity: 0.5;
           pointer-events: none;
       }

       .switch-container {
           display: flex;
           gap: 10px;
           margin: 20px 0;
       }

       .switch-button {
           background-color: #f1f1f1;
           border: 1px solid #ccc;
           padding: 10px;
           border-radius: 5px;
           cursor: pointer;
           display: flex;
           align-items: center;
           gap: 5px;
       }

       .switch-button.active {
           background-color: #d586e1;
           border-color: #9d4cea;
       }

       .icon-filter {
           width: 24px;
           height: 24px;
       }

       .toggle-button {
           display: flex;
           align-items: center;
           gap: 5px;
           cursor: pointer;
       }

       .toggle-group {
           display: flex; 
           align-items: center; 
           gap: 10px; 
       }

       .toggle-container {
           display: flex; 
           align-items: center; 
           cursor: pointer; 
       }

       .toggle-container img {
           width: 60px; 
           height: 28px;
       }
   </style>

</head>

<body>

           <label for="difficulty">Dificuldade:</label>
           <select id="difficulty" class="maps__select">
               <option value="">Selecione uma Dificuldade</option>
           </select>

               <label>Mostrar Hunts Neutras </label>

                   <img src="https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png" alt="Desativado"
                       id="toggleNeutroIcon">

           <label for="search">Buscar por Nome:</label>
           <input type="text" id="search" class="maps__select" placeholder="Digite o nome...">

               <img src="https://wiki.pokexgames.com/images/6/64/Volcanic1.png" alt="Clãs" class="icon-filter">

               <img src="https://wiki.pokexgames.com/images/c/c9/Steel.png" alt="Dano Recebido" class="icon-filter">

           <label>Filtro de Clãs do Jogador:</label>

           <label>Filtro de dano causado pelo Pokémon selvagem:</label>

   <script>
       const classIcons = {
           "Volcanic": "https://wiki.pokexgames.com/images/6/64/Volcanic1.png",
           "Raibolt": "https://wiki.pokexgames.com/images/b/b4/Raibol1t.png",
           "Orebound": "https://wiki.pokexgames.com/images/e/e2/Orebound1.png",
           "Naturia": "https://wiki.pokexgames.com/images/3/30/Naturia1.png",
           "Gardestrike": "https://wiki.pokexgames.com/images/3/39/Gardestrike1.png",
           "Ironhard": "https://wiki.pokexgames.com/images/9/9a/Ironhard1.png",
           "Wingeon": "https://wiki.pokexgames.com/images/0/0c/Wingeon1.png",
           "Psycraft": "https://wiki.pokexgames.com/images/5/59/Psycraft1.png",
           "Seavell": "https://wiki.pokexgames.com/images/2/2c/Seave1ll.png",
           "Malefic": "https://wiki.pokexgames.com/images/5/56/Malefi1c.png"
       };

       const typeIcons = {
           "Steel": "https://wiki.pokexgames.com/images/c/c9/Steel.png",
           "Dragon": "https://wiki.pokexgames.com/images/c/c7/Dragon.png",
           "Fairy": "https://wiki.pokexgames.com/images/4/43/Fairy.png",
           "Psychic": "https://wiki.pokexgames.com/images/2/21/Psychic.png",
           "Fighting": "https://wiki.pokexgames.com/images/3/30/Fighting.png",
           "Ice": "https://wiki.pokexgames.com/images/7/77/Ice.png",
           "Fire": "https://wiki.pokexgames.com/images/3/30/Fire.png",
           "Rock": "https://wiki.pokexgames.com/images/0/0b/Rock.png",
           "Ground": "https://wiki.pokexgames.com/images/8/8f/Ground.png",
           "Poison": "https://wiki.pokexgames.com/images/0/03/Poison1.png",
           "Electric": "https://wiki.pokexgames.com/images/2/2f/Electric.png",
           "Water": "https://wiki.pokexgames.com/images/9/9d/Water.png",
           "Bug": "https://wiki.pokexgames.com/images/7/7d/Bug.png",
           "Grass": "https://wiki.pokexgames.com/images/c/c5/Grass.png",
           "Flying": "https://wiki.pokexgames.com/images/7/7f/Flying.png",
           "Normal": "https://wiki.pokexgames.com/images/e/e8/Normal1.png",
           "Ghost": "https://wiki.pokexgames.com/images/5/59/Ghost1.png",
           "Dark": "https://wiki.pokexgames.com/images/9/98/Dark1.png",
           "Neutral": "https://wiki.pokexgames.com/images/0/08/NeutralICON.png"
       };

       document.addEventListener("DOMContentLoaded", function () {
           const difficultySelect = document.getElementById("difficulty");
           const tagButtonsContainer = document.getElementById("tagButtons");
           const typeButtonsContainer = document.getElementById("typeButtons");
           const imageContainer = document.getElementById("imageContainer");
           const toggleNeutro = document.getElementById("toggleNeutro");
           const toggleNeutroIcon = document.getElementById("toggleNeutroIcon");
           const searchInput = document.getElementById("search");
           const switchClans = document.getElementById("switchClans");
           const switchTypes = document.getElementById("switchTypes");
           const clanFilter = document.getElementById("clanFilter");
           const typeFilter = document.getElementById("typeFilter");

           let selectedTags = [];
           let selectedTypes = [];
           let showNeutro = false;

           const neutroIconAtivado = "https://wiki.pokexgames.com/images/7/73/Vetor_Toggle_Wiki_On.png";
           const neutroIconDesativado = "https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png";

           if (!toggleNeutro || !toggleNeutroIcon) {
               console.error("Elementos do toggle não encontrados!");
               return;
           }

           toggleNeutro.addEventListener("click", () => {
               showNeutro = !showNeutro;
               toggleNeutro.classList.toggle("active");

               if (showNeutro) {
                   toggleNeutroIcon.src = neutroIconAtivado;
               } else {
                   toggleNeutroIcon.src = neutroIconDesativado;
               }

               filterHunts();
           });

           Object.entries(classIcons).forEach(([cls, icon]) => {
               const button = document.createElement("button");
               button.className = "tag-button";
               button.innerHTML = `<img src="${icon}" alt="${cls}" class="class-icon" title="${cls}">`;
               button.addEventListener("click", () => {
                   button.classList.toggle("selected");
                   selectedTags.includes(cls) ? selectedTags.splice(selectedTags.indexOf(cls), 1) : selectedTags.push(cls);
                   filterHunts();
               });
               tagButtonsContainer.appendChild(button);
           });

           Object.entries(typeIcons).forEach(([type, icon]) => {
               const button = document.createElement("button");
               button.className = "tag-button";
               button.innerHTML = `<img src="${icon}" alt="${type}" class="class-icon" title="${type}">`;
               button.addEventListener("click", () => {
                   button.classList.toggle("selected");
                   selectedTypes.includes(type) ? selectedTypes.splice(selectedTypes.indexOf(type), 1) : selectedTypes.push(type);
                   filterHunts();
               });
               typeButtonsContainer.appendChild(button);
           });

           function clearFilters() {
               document.querySelectorAll("#tagButtons .tag-button.selected").forEach(button => {
                   button.classList.remove("selected");
               });

               document.querySelectorAll("#typeButtons .tag-button.selected").forEach(button => {
                   button.classList.remove("selected");
               });
               selectedTags = [];
               selectedTypes = [];

               filterHunts();
           }

           switchClans.addEventListener("click", () => {
               clearFilters();
               clanFilter.classList.remove("hidden");
               typeFilter.classList.add("hidden");
               switchClans.classList.add("active");
               switchTypes.classList.remove("active");
           });

           switchTypes.addEventListener("click", () => {
               clearFilters();
               clanFilter.classList.add("hidden");
               typeFilter.classList.remove("hidden");
               switchClans.classList.remove("active");
               switchTypes.classList.add("active");
           });

           searchInput.addEventListener("input", () => {
               filterHunts();
           });

           function filterHunts() {
               const selectedDifficulty = difficultySelect.value;
               const searchTerm = searchInput.value.toLowerCase();
               imageContainer.innerHTML = "";

               // Se nenhuma dificuldade for selecionada, não exibe nada
               if (!selectedDifficulty) {
                   return;
               }

               const huntList = hunts["NW"]; // Assume que a database é sempre "NW"
               huntList.forEach(hunt => {
                   const hasAllClasses = hunt.classes.includes("Todos");
                   const hasAllTypes = hunt.huntTypes.includes("Todos");

                   const matchesTags = hasAllClasses || selectedTags.length === 0 || selectedTags.some(tag => hunt.classes.includes(tag));

                   const matchesTypes = hasAllTypes || selectedTypes.length === 0 || selectedTypes.some(type => hunt.huntTypes.includes(type));

                   const matchesDifficulty = hunt.difficulty === selectedDifficulty;

                   const isNeutro = hunt.huntTipo === "Neutro";

                   const matchesSearch = hunt.name.toLowerCase().includes(searchTerm) || (hunt.altName && hunt.altName.toLowerCase().includes(searchTerm));

                   if (matchesTags && matchesTypes && matchesDifficulty && (!isNeutro || (isNeutro && showNeutro)) && matchesSearch) {
                       const imageItem = document.createElement("div");
                       imageItem.className = "image-item";
                       imageItem.innerHTML = `

                               <a href="${hunt.link}" target="_blank">
                                   <img src="${hunt.imageUrl}" alt="${hunt.name}" title="Clique para mais informações">
                               </a>

Resistência: ${Array.isArray(hunt.local) ? hunt.local.join(", ") : hunt.local}

Dificuldade: ${hunt.difficulty}

Dano: ${hunt.huntTypes.includes("Todos") ? "Todos" : hunt.huntTypes.map(type => `<img src="${typeIcons[type]}" alt="${type}" title="${type}" class="class-icon">`).join(" ")}

Clãs:

           ${hunt.classes.includes("Todos") ? "Todos" : hunt.classes.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" title="${cls}" class="class-icon">`).join("")}

                       `;
                       imageContainer.appendChild(imageItem);
                   }
               });
           }

           difficultySelect.addEventListener("change", filterHunts);

           // Preenche as dificuldades disponíveis
           const difficulties = new Set(hunts["NW"].map(hunt => hunt.difficulty));
           difficulties.forEach(difficulty => {
               const option = document.createElement("option");
               option.value = difficulty;
               option.textContent = difficulty;
               difficultySelect.appendChild(option);
           });

           // Não exibe as hunts inicialmente (só após selecionar uma dificuldade)
           imageContainer.innerHTML = "";
       });
   </script>

</body>

</html>

Widget:Test4: mudanças entre as edições

Edição atual tal como às 23h16min de 23 de março de 2025

Menu de navegação

Pesquisa