PokeXGames

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

Widget Discussão

Widget:Test4 (ver código-fonte)

Edição das 02h18min de 19 de março de 2025

1 858 bytes adicionados ,  19 março
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pt-BR">
<html lang="pt-BR">
Linha 136: Linha 137:
             height: 24px;
             height: 24px;
         }
         }
.switch-button {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.switch-button.active {
    background-color: #d586e1;
    border-color: #9d4cea;
    color: #050000;
    font-weight: bolder;
}
     </style>
     </style>
</head>
</head>
Linha 147: Linha 166:
             </select>
             </select>
         </div>  
         </div>  
 
<div class="input-group">
    <label><b>Mostrar Hunts Neutras:</b></label>
    <div class="switch-button" id="toggleNeutro">
        <span>Desativado</span>
    </div>
</div>
         <div class="input-group">
         <div class="input-group">
             <label for="difficulty"><b>Dificuldade:</b></label>
             <label for="difficulty"><b>Dificuldade:</b></label>
Linha 183: Linha 207:
         const hunts = {  
         const hunts = {  
             "NW": [
             "NW": [
                 { name: "Grimer", difficulty: "Baixa", local: "Cinnabar", classes: ["Orebound", "Psycraft"], imageUrl: "https://wiki.pokexgames.com/images/e/ee/Banner_Hunts_-_NW_Grimer.png", hasType: true, huntTypes: ["Poison"], link: "https://wiki.pokexgames.com/index.php/Cosmic_Quest_-_Boss_Solrock" },
                 { name: "Grimer", difficulty: "Baixa", local: "Cinnabar", classes: ["Orebound", "Psycraft"], imageUrl: "https://wiki.pokexgames.com/images/e/ee/Banner_Hunts_-_NW_Grimer.png", hasType: true, huntTypes: ["Poison"], huntTipo: "Elemental", link: "https://wiki.pokexgames.com/index.php/Cosmic_Quest_-_Boss_Solrock" },
                 { name: "Petilil", difficulty: "ssss", local: "Fuchsia", classes: ["Volcanic", "Naturia", "Malefic", "Seavell", "Wingeon"], imageUrl: "https://wiki.pokexgames.com/images/7/70/Nightmare_Hunt_Petilil.png", hasType: true, huntTypes: ["Grass"], link: "https://exemplo.com/hunt2" }
                 { name: "Petilil", difficulty: "ssss", local: "Fuchsia", classes: ["Volcanic", "Naturia", "Malefic", "Seavell", "Wingeon"], imageUrl: "https://wiki.pokexgames.com/images/7/70/Nightmare_Hunt_Petilil.png", hasType: true, huntTypes: ["Grass"], huntTipo: "Neutro", link: "https://exemplo.com/hunt2" }
             ],
             ],
         };
         };
Linha 225: Linha 249:


         document.addEventListener("DOMContentLoaded", function () {
         document.addEventListener("DOMContentLoaded", function () {
             const mapTypeSelect = document.getElementById("mapType");  
             const mapTypeSelect = document.getElementById("mapType");
            const huntTipoSelect = document.getElementById("huntTipo");
             const difficultySelect = document.getElementById("difficulty");
             const difficultySelect = document.getElementById("difficulty");
             const tagButtonsContainer = document.getElementById("tagButtons");
             const tagButtonsContainer = document.getElementById("tagButtons");
Linha 280: Linha 305:
                 filterHunts();
                 filterHunts();
             });
             });
 
         mapTypeSelect.addEventListener("change", function () {
         // Atualiza o dropdown de tipo de hunt com base no local selecionado
        function updateHuntTypeDropdown(location) {
            const huntList = hunts[location];
            huntTipoSelect.innerHTML = '<option value="">Selecione um tipo</option>';
            difficultySelect.innerHTML = '<option value="">Selecione uma Dificuldade</option>';
 
            if (huntList) {
            const types = new Set();
            huntList.forEach(hunt => {
                if (hunt.huntTipo) {
                types.add(hunt.huntTipo); // Pega "Elemental", "Legendary", etc.
                }
            });
            types.forEach(type => {
                const option = document.createElement("option");
                option.value = type;
                option.textContent = type;
                huntTipoSelect.appendChild(option);
            });
            huntTipoSelect.classList.remove("disabled");
            } else {
            huntTipoSelect.classList.add("disabled");
            }
        }
 
        huntTipoSelect.addEventListener("change", function () {
             const selectedMap = mapTypeSelect.value;
             const selectedMap = mapTypeSelect.value;
            const selectedHuntType = huntTipoSelect.value;
             const huntList = hunts[selectedMap];
             const huntList = hunts[selectedMap];
             difficultySelect.innerHTML = '<option value="">Selecione uma Dificuldade</option>';
             difficultySelect.innerHTML = '<option value="">Selecione uma Dificuldade</option>';


             if (huntList) {
             if (huntList && selectedHuntType) {
             const difficulties = new Set();
             const difficulties = new Set();
             huntList.forEach(hunt => {
             huntList.forEach(hunt => {
                 if (hunt.mapType === selectedMap && hunt.difficulty) {
                 if (hunt.huntTipo === selectedHuntType && hunt.difficulty) {
                 difficulties.add(hunt.difficulty); // Pega "Baixa", "Média", etc.
                 difficulties.add(hunt.difficulty); // Pega "Baixa", "Média", etc.
                 }
                 }
Linha 306: Linha 357:
         });
         });


            // Filtra as hunts com base nos critérios selecionados
          // Variável para controlar o estado do toggle
            function filterHunts() {
let showNeutro = false;
                const selectedMap = mapTypeSelect.value;  
 
                const selectedDifficulty = difficultySelect.value;
// Seleciona o toggle button
                imageContainer.innerHTML = "";
const toggleNeutro = document.getElementById("toggleNeutro");
 
// Adiciona um evento de clique ao toggle button
toggleNeutro.addEventListener("click", () => {
    showNeutro = !showNeutro; // Alterna o estado
    toggleNeutro.classList.toggle("active"); // Adiciona/remove a classe "active"
    toggleNeutro.querySelector("span").textContent = showNeutro ? "Ativado" : "Desativado"; // Atualiza o texto
    filterHunts(); // Filtra as hunts
});


                if (!selectedMap) return;
// Função para filtrar as hunts
function filterHunts() {
    const selectedMap = mapTypeSelect.value;
    const selectedDifficulty = difficultySelect.value;
    imageContainer.innerHTML = "";


                const huntList = hunts[selectedMap];
    if (!selectedMap || !selectedDifficulty) return; // Só exibe se Local e Dificuldade estiverem selecionados
                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;


                    if (matchesTags && matchesTypes && matchesHuntType && matchesDifficulty) {
    const huntList = hunts[selectedMap];
                        const imageItem = document.createElement("div");
    huntList.forEach(hunt => {
                        imageItem.className = "image-item";
        const matchesTags = selectedTags.length === 0 || selectedTags.some(tag => hunt.classes.includes(tag));
                        imageItem.innerHTML = `
        const matchesTypes = selectedTypes.length === 0 || selectedTypes.some(type => hunt.huntTypes.includes(type));
                            <div class="image-content">
        const matchesDifficulty = hunt.difficulty === selectedDifficulty;
                                <a href="${hunt.link}" target="_blank">
        const matchesNeutro = !showNeutro || hunt.huntTipo === "Neutro"; // Filtra por "Neutro" se o toggle estiver ativado
                                    <img src="${hunt.imageUrl}" alt="${hunt.name}">
 
                                </a>
        if (matchesTags && matchesTypes && matchesDifficulty && matchesNeutro) {
                                <div class="image-info">
            const imageItem = document.createElement("div");
                                    <p><b>Nome do Local:</b> ${hunt.name}</p>
            imageItem.className = "image-item";
                                    <p><b>Localização:</b> ${hunt.local}</p>
            imageItem.innerHTML = `
                                    <p><b>Dificuldade:</b> ${hunt.difficulty}</p>
                <div class="image-content">
                                    ${hunt.hasType ? `<p><b>Dano da Hunt:</b> ${hunt.huntTypes.join(", ")}</p>` : ""}
                    <a href="${hunt.link}" target="_blank">
                                    <div class="class-container">
                        <img src="${hunt.imageUrl}" alt="${hunt.name}">
                                        <p><b>Clãs:</b></p>
                    </a>
                                        <div class="class-icons">
                    <div class="image-info">
                                            ${hunt.classes.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" class="class-icon">`).join("")}
                        <p><b>Nome do Local:</b> ${hunt.name}</p>
                                        </div>
                        <p><b>Localização:</b> ${hunt.local}</p>
                                    </div>
                        <p><b>Dificuldade:</b> ${hunt.difficulty}</p>
                                </div>
                        ${hunt.hasType ? `<p><b>Dano da Hunt:</b> ${hunt.huntTypes.join(", ")}</p>` : ""}
                        <div class="class-container">
                            <p><b>Clãs:</b></p>
                            <div class="class-icons">
                                ${hunt.classes.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" class="class-icon">`).join("")}
                             </div>
                             </div>
                         `;
                         </div>
                        imageContainer.appendChild(imageItem);
                    </div>
                    }
                </div>
                });
            `;
            }
            imageContainer.appendChild(imageItem);
        }
    });
}


            // Event listeners para os dropdowns
        mapTypeSelect.addEventListener("change", function () {
            mapTypeSelect.addEventListener("change", function () {
    filterHunts();
                updateHuntTypeDropdown(this.value);
});
                filterHunts();
            });
            difficultySelect.addEventListener("change", filterHunts);


difficultySelect.addEventListener("change", filterHunts);
         // Não exibe nada inicialmente
         // Não exibe nada inicialmente
         imageContainer.innerHTML = "";
         imageContainer.innerHTML = "";
Renee
Administradores
7 895

edições

Disponível em “https://wiki.pokexgames.com/index.php/Especial:MobileDiff/98289”