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

Edição das 00h32min de 21 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...">

               <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": [

           ],
       };

       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;

           // 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";

           // Verifica se os elementos do toggle existem
           if (!toggleNeutro || !toggleNeutroIcon) {
               console.error("Elementos do toggle não encontrados!");
               return;
           }

           // Toggle para Hunts Neutras
           toggleNeutro.addEventListener("click", () => {
               console.log("Toggle clicado!"); // Log de depuração
               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();
           });

           // 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);
           });

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();

}

           // Alternar entre Clãs e Tipos
           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");
           });

           // 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 && 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 00h32min de 21 de março de 2025

Menu de navegação

Pesquisa