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

Edição das 01h26min de 20 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>
       /* Estilos anteriores mantidos */
       .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/35/Wiki_Borda_ADV.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-item img {
           max-width: 100%;
           height: auto;
           cursor: pointer;
       }

       .image-info p {
           margin: 5px 0;
       }

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

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

       .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;
       }

       .class-icons {
           display: flex;
           gap: 5px;
       }

       .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; /* Alinha os elementos horizontalmente */
   align-items: center; /* Centraliza verticalmente */
   gap: 10px; /* Espaçamento entre o label e o toggle */

}

.toggle-container {

   display: flex; /* Alinha os elementos horizontalmente */
   align-items: center; /* Centraliza verticalmente */
   cursor: pointer; /* Mostra que o elemento é clicável */

}

.toggle-container img {

   width: 60px; /* Tamanho da imagem */
   height: 28px;

}

   </style>

</head> <body>

           <label for="mapType">Local da Hunt:</label>
           <select id="mapType" class="maps__select">
               <option value="">Selecione um local</option>
               <option value="NW">NW</option>
           </select>

           <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 do local...">

               <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 hunts = {
           "NW": [
               { name: "Grimer", altName: "Trindade, Koffing, Bomba", difficulty: "Baixa", local: ["Cinnabar", "Pallet"], classes: ["Orebound", "Psycraft"], imageUrl: "https://wiki.pokexgames.com/images/e/ee/Banner_Hunts_-_NW_Grimer.png", huntTypes: ["Poison"], huntTipo: "Elemental", link: "https://wiki.pokexgames.com/index.php/Cosmic_Quest_-_Boss_Solrock" },
               { name: "Petilil", difficulty: "Baixa", local: "Fuchsia", classes: ["Volcanic", "Naturia", "Malefic", "Seavell", "Wingeon"], imageUrl: "https://wiki.pokexgames.com/images/7/70/Nightmare_Hunt_Petilil.png", huntTypes: ["Grass"], huntTipo: "Neutro", link: "https://exemplo.com/hunt2" }
           ],
       };

       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 mapTypeSelect = document.getElementById("mapType");
           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;

           // Inicializa os botões de clãs
           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);
           });

           // Inicializa os botões de tipos
           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);
           });

           // Alternar entre Clãs e Tipos
           switchClans.addEventListener("click", () => {
               clanFilter.classList.remove("hidden");
               typeFilter.classList.add("hidden");
               switchClans.classList.add("active");
               switchTypes.classList.remove("active");
           });

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

// Seleciona o toggle

const toggleNeutro = document.getElementById("toggleNeutro"); const toggleNeutroIcon = document.getElementById("toggleNeutroIcon");

// Verifica se os elementos existem if (!toggleNeutro || !toggleNeutroIcon) {

   console.error("Elementos do toggle não encontrados!");
   return;

}

// URLs das imagens para os estados "Ativado" e "Desativado" 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";

let showNeutro = false; // Variável compartilhada

// Adiciona o evento de clique ao toggle toggleNeutro.addEventListener("click", () => {

   console.log("Toggle clicado!"); // Debug
   showNeutro = !showNeutro;
   toggleNeutro.classList.toggle("active");

   // Altera a imagem com base no estado
   if (showNeutro) {
       toggleNeutroIcon.src = neutroIconAtivado; // Imagem para estado "Ativado"
   } else {
       toggleNeutroIcon.src = neutroIconDesativado; // Imagem para estado "Desativado"
   }

   // Filtra as hunts
   filterHunts();

});

           // Barra de busca
           searchInput.addEventListener("input", () => {
               filterHunts();
           });

           // Atualiza o dropdown de dificuldade com base no local selecionado
           mapTypeSelect.addEventListener("change", function () {
               const selectedMap = this.value;
               difficultySelect.innerHTML = '<option value="">Selecione uma Dificuldade</option>';

               if (selectedMap && hunts[selectedMap]) {
                   const difficulties = new Set(hunts[selectedMap].map(hunt => hunt.difficulty));
                   difficulties.forEach(difficulty => {
                       const option = document.createElement("option");
                       option.value = difficulty;
                       option.textContent = difficulty;
                       difficultySelect.appendChild(option);
                   });
               }
               filterHunts();
           });

           // Filtra as hunts com base nos critérios selecionados

function filterHunts() {

   const selectedMap = mapTypeSelect.value;
   const selectedDifficulty = difficultySelect.value;
   const searchTerm = searchInput.value.toLowerCase();
   imageContainer.innerHTML = "";

   if (!selectedMap) return;

   const huntList = hunts[selectedMap];
   huntList.forEach(hunt => {
       const matchesTags = selectedTags.length === 0 || selectedTags.some(tag => hunt.classes.includes(tag));
       const matchesTypes = selectedTypes.length === 0 || selectedTypes.some(type => hunt.huntTypes.includes(type));
       const matchesDifficulty = selectedDifficulty === "" || hunt.difficulty === selectedDifficulty;
       const isNeutro = hunt.huntTipo === "Neutro";
       const matchesSearch = hunt.name.toLowerCase().includes(searchTerm) || hunt.altName.toLowerCase().includes(searchTerm);

       // Filtra as hunts com base no estado do toggle
       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}">
                   </a>

Nome do Local: ${hunt.name}

Localização: ${hunt.local.join(", ")}

Dificuldade: ${hunt.difficulty}

Dano da Hunt: ${hunt.huntTypes.join(", ")}

Clãs:

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

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

}

           // Event listeners para os dropdowns
           mapTypeSelect.addEventListener("change", filterHunts);
           difficultySelect.addEventListener("change", filterHunts);

           // Inicializa o dropdown de dificuldade ao carregar a página
           mapTypeSelect.dispatchEvent(new Event("change"));
       });
   </script>

</body> </html>

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

Edição das 01h26min de 20 de março de 2025

Menu de navegação

Pesquisa