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

sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 166: Linha 166:
         }
         }
     </style>
     </style>
</head>
</head>  


<body>
<body>
     <div class="borda-container">  
     <div class="borda-container">
         <div class="input-group">
         <div class="input-group">
             <label for="difficulty"><b>Dificuldade:</b></label>
             <label for="difficulty"><b>Dificuldade:</b></label>
Linha 176: Linha 176:
             </select>
             </select>
         </div>
         </div>
 
         <div class="input-group">
         <div class="input-group">
             <div class="toggle-group">
             <div class="toggle-group">
Linha 186: Linha 186:
             </div>
             </div>
         </div>
         </div>
 
         <div class="input-group">
         <div class="input-group">
             <label for="search"><b>Buscar por Nome:</b></label>
             <label for="search"><b>Buscar por Nome:</b></label>
             <input type="text" id="search" class="maps__select" placeholder="Digite o nome...">
             <input type="text" id="search" class="maps__select" placeholder="Digite o nome...">
         </div>
         </div>
 
         <div class="switch-container">
         <div class="switch-container">
             <div class="switch-button" id="switchClans">
             <div class="switch-button" id="switchClans">
Linha 200: Linha 200:
             </div>
             </div>
         </div>
         </div>
 
         <div id="clanFilter" class="input-group">
         <div id="clanFilter" class="input-group">
             <label><b>Filtro de Clãs do Jogador:</b></label>
             <label><b>Filtro de Clãs do Jogador:</b></label>
             <div id="tagButtons"></div>
             <div id="tagButtons"></div>
         </div>
         </div>
 
         <div id="typeFilter" class="input-group hidden">
         <div id="typeFilter" class="input-group hidden">
             <label><b>Filtro de dano causado pelo Pokémon selvagem:</b></label>
             <label><b>Filtro de dano causado pelo Pokémon selvagem:</b></label>
             <div id="typeButtons"></div>
             <div id="typeButtons"></div>
         </div>
         </div>
 
         <div id="imageContainer" class="image-container"></div>
         <div id="imageContainer" class="image-container"></div>
     </div>
     </div>


     <script>
     <script>
         const classIcons = {
         const classIcons = {
             "Volcanic": "https://wiki.pokexgames.com/images/6/64/Volcanic1.png",
             "Volcanic": "https://wiki.pokexgames.com/images/6/64/Volcanic1.png",
Linha 266: Linha 266:
             let selectedTypes = [];
             let selectedTypes = [];
             let showNeutro = false;
             let showNeutro = false;
 
             const neutroIconAtivado = "https://wiki.pokexgames.com/images/7/73/Vetor_Toggle_Wiki_On.png";
             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";
             const neutroIconDesativado = "https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png";
 
             if (!toggleNeutro || !toggleNeutroIcon) {
             if (!toggleNeutro || !toggleNeutroIcon) {
                 console.error("Elementos do toggle não encontrados!");
                 console.error("Elementos do toggle não encontrados!");
                 return;
                 return;
             }
             }
 
             toggleNeutro.addEventListener("click", () => {  
             toggleNeutro.addEventListener("click", () => {
                 showNeutro = !showNeutro;
                 showNeutro = !showNeutro;
                 toggleNeutro.classList.toggle("active");
                 toggleNeutro.classList.toggle("active");
 
                 if (showNeutro) {
                 if (showNeutro) {
                     toggleNeutroIcon.src = neutroIconAtivado;
                     toggleNeutroIcon.src = neutroIconAtivado;
                 } else {
                 } else {
                     toggleNeutroIcon.src = neutroIconDesativado;
                     toggleNeutroIcon.src = neutroIconDesativado;
                 }
                 }
 
                 filterHunts();
                 filterHunts();
             });
             });
 
             Object.entries(classIcons).forEach(([cls, icon]) => {
             Object.entries(classIcons).forEach(([cls, icon]) => {
                 const button = document.createElement("button");
                 const button = document.createElement("button");
Linha 299: Linha 299:
                 tagButtonsContainer.appendChild(button);
                 tagButtonsContainer.appendChild(button);
             });
             });
 
             Object.entries(typeIcons).forEach(([type, icon]) => {
             Object.entries(typeIcons).forEach(([type, icon]) => {
                 const button = document.createElement("button");
                 const button = document.createElement("button");
Linha 324: Linha 324:


                 filterHunts();
                 filterHunts();
             }  
             }
 
             switchClans.addEventListener("click", () => {
             switchClans.addEventListener("click", () => {
                 clearFilters();
                 clearFilters();
Linha 340: Linha 341:
                 switchTypes.classList.add("active");
                 switchTypes.classList.add("active");
             });
             });
 
             searchInput.addEventListener("input", () => {
             searchInput.addEventListener("input", () => {
                 filterHunts();
                 filterHunts();
             });
             });
 
             function filterHunts() {
             function filterHunts() {
                 const selectedDifficulty = difficultySelect.value;
                 const selectedDifficulty = difficultySelect.value;
                 const searchTerm = searchInput.value.toLowerCase();
                 const searchTerm = searchInput.value.toLowerCase();
                 imageContainer.innerHTML = "";
                 imageContainer.innerHTML = "";
                // Se nenhuma dificuldade for selecionada, não exibe nada
                if (!selectedDifficulty) {
                    return;
                }


                 const huntList = hunts["NW"]; // Assume que a database é sempre "NW"
                 const huntList = hunts["NW"]; // Assume que a database é sempre "NW"
                 huntList.forEach(hunt => {  
                 huntList.forEach(hunt => {
                     const hasAllClasses = hunt.classes.includes("Todos");
                     const hasAllClasses = hunt.classes.includes("Todos");
                     const hasAllTypes = hunt.huntTypes.includes("Todos");
                     const hasAllTypes = hunt.huntTypes.includes("Todos");
 
                     const matchesTags = hasAllClasses || selectedTags.length === 0 || selectedTags.some(tag => hunt.classes.includes(tag));
                     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 matchesTypes = hasAllTypes || selectedTypes.length === 0 || selectedTypes.some(type => hunt.huntTypes.includes(type));
 
                     const matchesDifficulty = selectedDifficulty === "" || hunt.difficulty === selectedDifficulty;
                     const matchesDifficulty = hunt.difficulty === selectedDifficulty;
 
                     const isNeutro = hunt.huntTipo === "Neutro";
                     const isNeutro = hunt.huntTipo === "Neutro";
 
                     const matchesSearch = hunt.name.toLowerCase().includes(searchTerm) || (hunt.altName && hunt.altName.toLowerCase().includes(searchTerm));
                     const matchesSearch = hunt.name.toLowerCase().includes(searchTerm) || (hunt.altName && hunt.altName.toLowerCase().includes(searchTerm));
 
                     if (matchesTags && matchesTypes && matchesDifficulty && (!isNeutro || (isNeutro && showNeutro)) && matchesSearch) {
                     if (matchesTags && matchesTypes && matchesDifficulty && (!isNeutro || (isNeutro && showNeutro)) && matchesSearch) {
                         const imageItem = document.createElement("div");
                         const imageItem = document.createElement("div");
                         imageItem.className = "image-item";
                         imageItem.className = "image-item";
                         imageItem.innerHTML = `
                         imageItem.innerHTML = `
                <div class="image-content">
                            <div class="image-content">
                    <a href="${hunt.link}" target="_blank">
                                <a href="${hunt.link}" target="_blank">
                        <img src="${hunt.imageUrl}" alt="${hunt.name}" title="Clique para mais informações">
                                    <img src="${hunt.imageUrl}" alt="${hunt.name}" title="Clique para mais informações">
                    </a>
                                </a>
                    <div class="image-info">
                                <div class="image-info">
                        <p><b>Resistência:</b> ${Array.isArray(hunt.local) ? hunt.local.join(", ") : hunt.local}</p>
                                    <p><b>Resistência:</b> ${Array.isArray(hunt.local) ? hunt.local.join(", ") : hunt.local}</p>
                        <p><b>Dificuldade:</b> ${hunt.difficulty}</p>
                                    <p><b>Dificuldade:</b> ${hunt.difficulty}</p>
                        <p><b>Dano da Hunt:</b> ${hunt.huntTypes.includes("Todos") ? "Todos" : hunt.huntTypes.join(", ")}</p>
                                    <p><b>Dano da Hunt:</b> ${hunt.huntTypes.includes("Todos") ? "Todos" : hunt.huntTypes.join(", ")}</p>
                        <div class="class-container">
                                    <div class="class-container">
                            <p><b>Clãs:</b></p>
                                        <p><b>Clãs:</b></p>
                            <div class="class-icons">
                                        <div class="class-icons">
                                ${hunt.classes.includes("Todos") ? "Todos" : hunt.classes.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" class="class-icon">`).join("")}
                                            ${hunt.classes.includes("Todos") ? "Todos" : hunt.classes.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" class="class-icon">`).join("")}
                                        </div>
                                    </div>
                                </div>
                             </div>
                             </div>
                         </div>
                         `;
                    </div>
                </div>
            `;
                         imageContainer.appendChild(imageItem);
                         imageContainer.appendChild(imageItem);
                     }
                     }
                 });
                 });
             }
             }
 
             difficultySelect.addEventListener("change", filterHunts);  
             difficultySelect.addEventListener("change", filterHunts);


             // Preenche as dificuldades disponíveis
             // Preenche as dificuldades disponíveis
Linha 402: Linha 408:
             });
             });


             filterHunts(); // Filtra as hunts ao carregar a página
             // Não exibe as hunts inicialmente (só após selecionar uma dificuldade)
            imageContainer.innerHTML = "";
         });
         });
     </script>
     </script>
7 752

edições