PokeXGames

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

Widget Discussão

Widget:Test4 (ver código-fonte)

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

827 bytes removidos ,  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 6: Linha 5:
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Seleção de Hunts</title>
     <title>Seleção de Hunts</title>
     <style>  
     <style>
        /* Estilos anteriores mantidos */
         .borda-container {
         .borda-container {
             display: flex;
             display: flex;
Linha 110: Linha 110:
             pointer-events: none;
             pointer-events: none;
         }
         }
 
         .switch-container {
         .switch-container {
             display: flex;
             display: flex;
Linha 138: Linha 138:
         }
         }


.switch-button {
        .switch-button {
    background-color: #f1f1f1;
            background-color: #f1f1f1;
    border: 1px solid #ccc;
            border: 1px solid #ccc;
    padding: 10px;
            padding: 10px;
    border-radius: 5px;
            border-radius: 5px;
    cursor: pointer;
            cursor: pointer;
    display: inline-flex;
            display: inline-flex;
    align-items: center;
            align-items: center;
    gap: 5px;
            gap: 5px;
}
        }


.switch-button.active {
        .switch-button.active {
    background-color: #d586e1;
            background-color: #d586e1;
    border-color: #9d4cea;
            border-color: #9d4cea;
    color: #050000;
            color: #050000;
    font-weight: bolder;
            font-weight: bolder;
}
        }
     </style>
     </style>
</head>
</head>
Linha 165: Linha 165:
                 <option value="NW">NW</option>
                 <option value="NW">NW</option>
             </select>
             </select>
         </div>  
         </div>
<div class="input-group">
 
    <label><b>Mostrar Hunts Neutras:</b></label>
        <div class="input-group">
    <div class="switch-button" id="toggleNeutro">
            <label><b>Mostrar Hunts Neutras:</b></label>
        <span>Desativado</span>
            <div class="switch-button" id="toggleNeutro">
    </div>
                <span>Desativado</span>
</div>
            </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 205: Linha 207:


     <script>
     <script>
         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"], huntTipo: "Elemental", 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" },
Linha 225: Linha 227:
         };
         };


const typeIcons = {
        const typeIcons = {
    "Steel": "https://wiki.pokexgames.com/images/c/c9/Steel.png",
            "Steel": "https://wiki.pokexgames.com/images/c/c9/Steel.png",
    "Dragon": "https://wiki.pokexgames.com/images/c/c7/Dragon.png",
            "Dragon": "https://wiki.pokexgames.com/images/c/c7/Dragon.png",
    "Fairy": "https://wiki.pokexgames.com/images/4/43/Fairy.png",
            "Fairy": "https://wiki.pokexgames.com/images/4/43/Fairy.png",
    "Psychic": "https://wiki.pokexgames.com/images/2/21/Psychic.png",
            "Psychic": "https://wiki.pokexgames.com/images/2/21/Psychic.png",
    "Fighting": "https://wiki.pokexgames.com/images/3/30/Fighting.png",
            "Fighting": "https://wiki.pokexgames.com/images/3/30/Fighting.png",
    "Ice": "https://wiki.pokexgames.com/images/7/77/Ice.png",
            "Ice": "https://wiki.pokexgames.com/images/7/77/Ice.png",
    "Fire": "https://wiki.pokexgames.com/images/3/30/Fire.png",
            "Fire": "https://wiki.pokexgames.com/images/3/30/Fire.png",
    "Rock": "https://wiki.pokexgames.com/images/0/0b/Rock.png",
            "Rock": "https://wiki.pokexgames.com/images/0/0b/Rock.png",
    "Ground": "https://wiki.pokexgames.com/images/8/8f/Ground.png",
            "Ground": "https://wiki.pokexgames.com/images/8/8f/Ground.png",
    "Poison": "https://wiki.pokexgames.com/images/0/03/Poison1.png",
            "Poison": "https://wiki.pokexgames.com/images/0/03/Poison1.png",
    "Electric": "https://wiki.pokexgames.com/images/2/2f/Electric.png",
            "Electric": "https://wiki.pokexgames.com/images/2/2f/Electric.png",
    "Water": "https://wiki.pokexgames.com/images/9/9d/Water.png",
            "Water": "https://wiki.pokexgames.com/images/9/9d/Water.png",
    "Bug": "https://wiki.pokexgames.com/images/7/7d/Bug.png",
            "Bug": "https://wiki.pokexgames.com/images/7/7d/Bug.png",
    "Grass": "https://wiki.pokexgames.com/images/c/c5/Grass.png",
            "Grass": "https://wiki.pokexgames.com/images/c/c5/Grass.png",
    "Flying": "https://wiki.pokexgames.com/images/7/7f/Flying.png",
            "Flying": "https://wiki.pokexgames.com/images/7/7f/Flying.png",
    "Normal": "https://wiki.pokexgames.com/images/e/e8/Normal1.png",
            "Normal": "https://wiki.pokexgames.com/images/e/e8/Normal1.png",
    "Ghost": "https://wiki.pokexgames.com/images/5/59/Ghost1.png",
            "Ghost": "https://wiki.pokexgames.com/images/5/59/Ghost1.png",
    "Dark": "https://wiki.pokexgames.com/images/9/98/Dark1.png",
            "Dark": "https://wiki.pokexgames.com/images/9/98/Dark1.png",
    "Neutral": "https://wiki.pokexgames.com/images/0/08/NeutralICON.png"
            "Neutral": "https://wiki.pokexgames.com/images/0/08/NeutralICON.png"
};
        };
 


         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 259: Linha 259:
             const clanFilter = document.getElementById("clanFilter");
             const clanFilter = document.getElementById("clanFilter");
             const typeFilter = document.getElementById("typeFilter");
             const typeFilter = document.getElementById("typeFilter");
            const toggleNeutro = document.getElementById("toggleNeutro");


             let selectedTags = [];
             let selectedTags = [];
             let selectedTypes = [];
             let selectedTypes = [];
            let showNeutro = false;


             // Inicializa os botões de clãs
             // Inicializa os botões de clãs
Linha 267: Linha 269:
                 const button = document.createElement("button");
                 const button = document.createElement("button");
                 button.className = "tag-button";
                 button.className = "tag-button";
                 button.innerHTML = `<img src="${icon}" alt="${cls}" class="class-icon" title="${cls}">`;  
                 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");
Linha 280: Linha 282:
                 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="${type}" class="class-icon" title="${type}">`;
                 button.addEventListener("click", () => {
                 button.addEventListener("click", () => {
                     button.classList.toggle("selected");
                     button.classList.toggle("selected");
Linha 306: Linha 308:
             });
             });


        // Atualiza o dropdown de tipo de hunt com base no local selecionado
            // Toggle para Hunts Neutras
        function updateHuntTypeDropdown(location) {
             toggleNeutro.addEventListener("click", () => {
             const huntList = hunts[location];
                showNeutro = !showNeutro;
            huntTipoSelect.innerHTML = '<option value="">Selecione um tipo</option>';
                toggleNeutro.classList.toggle("active");
            difficultySelect.innerHTML = '<option value="">Selecione uma Dificuldade</option>';
                 toggleNeutro.querySelector("span").textContent = showNeutro ? "Ativado" : "Desativado";
 
                 filterHunts();
            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 () {
            // Atualiza o dropdown de dificuldade com base no local selecionado
            const selectedMap = mapTypeSelect.value;
            mapTypeSelect.addEventListener("change", function () {
            const selectedHuntType = huntTipoSelect.value;
                const selectedMap = this.value;
            const huntList = hunts[selectedMap];
                difficultySelect.innerHTML = '<option value="">Selecione uma Dificuldade</option>';
            difficultySelect.innerHTML = '<option value="">Selecione uma Dificuldade</option>';


            if (huntList && selectedHuntType) {
                if (selectedMap && hunts[selectedMap]) {
            const difficulties = new Set();
                    const difficulties = new Set(hunts[selectedMap].map(hunt => hunt.difficulty));
            huntList.forEach(hunt => {
                    difficulties.forEach(difficulty => {
                if (hunt.huntTipo === selectedHuntType && hunt.difficulty) {
                        const option = document.createElement("option");
                difficulties.add(hunt.difficulty); // Pega "Baixa", "Média", etc.
                        option.value = difficulty;
                        option.textContent = difficulty;
                        difficultySelect.appendChild(option);
                    });
                 }
                 }
                filterHunts();
             });
             });
            difficulties.forEach(difficulty => {
                const option = document.createElement("option");
                option.value = difficulty;
                option.textContent = difficulty;
                difficultySelect.appendChild(option);
            });
            difficultySelect.classList.remove("disabled");
            } else {
            difficultySelect.classList.add("disabled");
            }
            filterHunts(); // Filtra as hunts ao mudar o tipo
        });
          // Variável para controlar o estado do toggle
let showNeutro = false;
// Seleciona o toggle button
const toggleNeutro = document.getElementById("toggleNeutro");


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


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


    if (!selectedMap || !selectedDifficulty) return; // Só exibe se Local e Dificuldade estiverem selecionados
                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 = hunt.difficulty === selectedDifficulty;
                    const matchesNeutro = !showNeutro || hunt.huntTipo === "Neutro";


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


        mapTypeSelect.addEventListener("change", function () {
            // Inicializa o dropdown de dificuldade ao carregar a página
    filterHunts();
            mapTypeSelect.dispatchEvent(new Event("change"));
});
        });
 
     </script>
difficultySelect.addEventListener("change", filterHunts);
        // Não exibe nada inicialmente
        imageContainer.innerHTML = "";
     });
 
</script>
</body>
</body>
</html>
</html>
Renee
Administradores
7 895

edições

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