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

Ir para navegação Ir para pesquisar
sem sumário de edição
Sem resumo de edição
Etiqueta: Revertido
Sem resumo de edição
Etiqueta: Reversão manual
Linha 184: Linha 184:
             </select>
             </select>
         </div>
         </div>


         <div class="input-group">
         <div class="input-group">
             <div class="toggle-group">
             <div class="toggle-group">
                 <label><b>Mostrar locais de caça neutros: </b></label>
                 <label><b>Mostrar hunts neutras </b></label>
                 <label class="toggle-container">
                 <div class="toggle-container" id="toggleNeutro">
                     <input type="checkbox" id="toggleNeutro">
                     <img src="https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png" alt="Desativado"
                 </label>
                        id="toggleNeutroIcon">
                 </div>
             </div>
             </div>
         </div>
         </div>
Linha 209: Linha 209:
         </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="tagCheckboxes"></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="typeCheckboxes"></div>
            <div id="typeButtons"></div>
</div>
        </div>


         <div id="imageContainer" class="image-container"></div>
         <div id="imageContainer" class="image-container"></div>
Linha 261: Linha 260:
         document.addEventListener("DOMContentLoaded", function () {
         document.addEventListener("DOMContentLoaded", function () {
             const difficultySelect = document.getElementById("difficulty");
             const difficultySelect = document.getElementById("difficulty");
const tagCheckboxesContainer = document.getElementById("tagCheckboxes");
            const tagButtonsContainer = document.getElementById("tagButtons");
const typeCheckboxesContainer = document.getElementById("typeCheckboxes");
            const typeButtonsContainer = document.getElementById("typeButtons");
             const imageContainer = document.getElementById("imageContainer");
             const imageContainer = document.getElementById("imageContainer");
             const toggleNeutro = document.getElementById("toggleNeutro");  
             const toggleNeutro = document.getElementById("toggleNeutro");
            const toggleNeutroIcon = document.getElementById("toggleNeutroIcon");
             const searchInput = document.getElementById("search");
             const searchInput = document.getElementById("search");
             const switchClans = document.getElementById("switchClans");
             const switchClans = document.getElementById("switchClans");
Linha 274: Linha 274:
             let selectedTypes = [];
             let selectedTypes = [];
             let showNeutro = false;
             let showNeutro = false;
 


toggleNeutro.addEventListener("change", () => {
            const neutroIconAtivado = "https://wiki.pokexgames.com/images/7/73/Vetor_Toggle_Wiki_On.png";
    showNeutro = toggleNeutro.checked;
            const neutroIconDesativado = "https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png";
    filterHunts();
 
});
            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);
            });


// E depois atualize todas as referências no código
            Object.entries(typeIcons).forEach(([type, icon]) => {
Object.entries(classIcons).forEach(([cls, icon]) => {
                const button = document.createElement("button");
    const button = document.createElement("button");
                button.className = "tag-button";
    button.className = "tag-button";
                button.innerHTML = `<img src="${icon}" alt="${type}" class="class-icon" title="${type}">`;
    button.innerHTML = `<img src="${icon}" alt="${cls}" class="class-icon" title="${cls}">`;
                button.addEventListener("click", () => {
    button.addEventListener("click", () => {
                    button.classList.toggle("selected");
        button.classList.toggle("selected");
                    selectedTypes.includes(type) ? selectedTypes.splice(selectedTypes.indexOf(type), 1) : selectedTypes.push(type);
        selectedTags.includes(cls) ? selectedTags.splice(selectedTags.indexOf(cls), 1) : selectedTags.push(cls);
                    filterHunts();
        filterHunts();
                });
    });
                typeButtonsContainer.appendChild(button);
    tagCheckboxesContainer.appendChild(button); // Aqui usamos tagCheckboxesContainer
            });
});


Object.entries(typeIcons).forEach(([type, icon]) => {
            function clearFilters() {
    const button = document.createElement("button");
                document.querySelectorAll("#tagButtons .tag-button.selected").forEach(button => {
    button.className = "tag-button";
                    button.classList.remove("selected");
    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();
    });
    typeCheckboxesContainer.appendChild(button);  // Aqui usamos typeCheckboxesContainer
});


function clearFilters() {
                document.querySelectorAll("#typeButtons .tag-button.selected").forEach(button => {
    tagCheckboxesContainer.querySelectorAll("input[type='checkbox']").forEach(cb => cb.checked = false);
                    button.classList.remove("selected");
    typeCheckboxesContainer.querySelectorAll("input[type='checkbox']").forEach(cb => cb.checked = false);
                });
    selectedTags = [];
                selectedTags = [];
    selectedTypes = [];
                selectedTypes = [];
    filterHunts();
}


                filterHunts();
            }


             switchClans.addEventListener("click", () => {
             switchClans.addEventListener("click", () => {
Linha 336: Linha 354:
             });
             });


function getSelectedValues(container) {
            function filterHunts() {
    return Array.from(container.querySelectorAll("input[type='checkbox']:checked"))
                const selectedDifficulty = difficultySelect.value;
                 .map(input => input.value);
                const searchTerm = searchInput.value.toLowerCase();
}
                 imageContainer.innerHTML = "";


function filterHunts() {
                // Se nenhuma dificuldade for selecionada, não exibe nada
    const selectedDifficulty = difficultySelect.value;
                if (!selectedDifficulty) {
    const searchTerm = searchInput.value.toLowerCase();
                    return;
    selectedTags = getSelectedValues(tagCheckboxesContainer);
                }
    selectedTypes = getSelectedValues(typeCheckboxesContainer);
   
    imageContainer.innerHTML = "";


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


             difficultySelect.addEventListener("change", filterHunts);
             difficultySelect.addEventListener("change", filterHunts);
7 894

edições

Menu de navegação