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

         /* Seus estilos CSS permanecem os mesmos */

    <div id="tagButtons">

        <!-- Seus botões de tag permanecem os mesmos -->

     </div>  

    <script>

        const hunts = {

             "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: "Petilil", difficulty: "Baixa", 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:"Elemental", link: "https://exemplo.com/hunt2" }

            ],   

        };

        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"

        };

        document.addEventListener("DOMContentLoaded", function() {

            const mapTypeSelect = document.getElementById("mapType");

            const huntTipoSelect = document.getElementById("huntTipo"); // Corrigido para huntTipo

            const tagButtons = document.querySelectorAll(".tag-button");

            const imageContainer = document.getElementById("imageContainer");

            let selectedTags = [];

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

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

            // Filtra e exibe as hunts

            function filterHunts() {

                const selectedMap = mapTypeSelect.value;

                const selectedHuntType = huntTipoSelect.value;

                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 matchesHuntType = !hunt.hasType || (selectedHuntType && hunt.huntTypes.includes(selectedHuntType));

                    if (matchesTags && matchesHuntType) {

                        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>

                            <div class="image-info">

                                <p><b>Nome do Local:</b> ${hunt.name}</p>

                                <p><b>Localização:</b> ${hunt.local}</p>

                                <p><b>Dificuldade:</b> ${hunt.difficulty}</p>

                                ${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("")}

                         `;

                        imageContainer.appendChild(imageItem);

 

            huntTipoSelect.addEventListener("change", filterHunts);

            tagButtons.forEach(button => {

                button.addEventListener("click", function() {

                    button.classList.toggle("selected");

                    const tag = button.querySelector("img").alt;

                    selectedTags.includes(tag) ? selectedTags.splice(selectedTags.indexOf(tag), 1) : selectedTags.push(tag);

                    filterHunts();

                });