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
Sem resumo de edição
Linha 6: Linha 6:
     <title>Seleção de Mapas</title>
     <title>Seleção de Mapas</title>
     <style>
     <style>
         .mw-body-content {
         /* Seus estilos CSS permanecem os mesmos */
            display: flex;
        }
        .mw-parser-output {
            display: inline-block;
            padding: .5rem 2rem;
            margin: 0 auto;
            border: 42px solid transparent;
            border-image: url(https://wiki.pokexgames.com/images/3/35/Wiki_Borda_ADV.png) 38;
            width: 100%;
            border-image-repeat: round;
            min-height: 620px;
        }
        .hidden {
            display: none;
        }
        .input-group {
            margin: 20px 0;
        }
        .maps__select {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            background-color: #fff;
            margin-top: 15px;
            box-sizing: border-box;
        }
        .image-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        .image-item {
            flex: 1 0 30%;
            text-align: left;
        }
        .image-item img {
            max-width: 100%;
            height: auto;
            cursor: pointer;
        }
        .image-info p {
          margin: 5px 0;
        }
.image-info {
    width: 100%;
    text-align: left; /* Garante que o texto fique à esquerda */
    margin-top: 10px;
}
        .tag-button {
            display: inline-block;
            color: #333;
            padding: 5px 12px;
            margin: 5px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 16px;
        }
        .tag-button.selected {
            background-color: #d586e1;
            color: #050000;
            border: #9d4cea solid 2px;
            font-weight: bolder;
        }
        .class-icon {
            margin-right: 5px;
        }
.class-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
 
.class-icons {
    display: flex;
    gap: 5px; /* Espaçamento entre os ícones */
}
        .type-dropdown {
            margin-top: 10px;
        }
        .disabled {
            opacity: 0.5;
            pointer-events: none;
        }
     </style>
     </style>
</head>
</head>
Linha 112: Linha 26:
     </div>
     </div>


<div id="tagButtons">
    <div id="tagButtons">
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/6/64/Volcanic1.png" alt="Volcanic" class="class-icon"></button>
        <!-- Seus botões de tag permanecem os mesmos -->
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/b/b4/Raibol1t.png" alt="Raibolt" class="class-icon"></button>
     </div>  
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/e/e2/Orebound1.png" alt="Orebound" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/3/30/Naturia1.png" alt="Naturia" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/3/39/Gardestrike1.png" alt="Gardestrike" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/9/9a/Ironhard1.png" alt="Ironhard" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/0/0c/Wingeon1.png" alt="Wingeon" class="class-icon"></button>
     <button class="tag-button"><img src="https://wiki.pokexgames.com/images/5/59/Psycraft1.png" alt="Psycraft" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/2/2c/Seave1ll.png" alt="Seavell" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/5/56/Malefi1c.png" alt="Malefic" class="class-icon"></button>
</div>  
     <div id="imageContainer" class="image-container"></div>
     <div id="imageContainer" class="image-container"></div>


Linha 129: Linha 34:
         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" },
                 { 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" },
                 { 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" }
                 { 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" }
Linha 136: Linha 39:
         };
         };


const classIcons = {
        const classIcons = {
    "Volcanic": "https://wiki.pokexgames.com/images/6/64/Volcanic1.png",
            "Volcanic": "https://wiki.pokexgames.com/images/6/64/Volcanic1.png",
    "Raibolt": "https://wiki.pokexgames.com/images/b/b4/Raibol1t.png",
            "Raibolt": "https://wiki.pokexgames.com/images/b/b4/Raibol1t.png",
    "Orebound": "https://wiki.pokexgames.com/images/e/e2/Orebound1.png",
            "Orebound": "https://wiki.pokexgames.com/images/e/e2/Orebound1.png",
    "Naturia": "https://wiki.pokexgames.com/images/3/30/Naturia1.png",
            "Naturia": "https://wiki.pokexgames.com/images/3/30/Naturia1.png",
    "Gardestrike": "https://wiki.pokexgames.com/images/3/39/Gardestrike1.png",
            "Gardestrike": "https://wiki.pokexgames.com/images/3/39/Gardestrike1.png",
    "Ironhard": "https://wiki.pokexgames.com/images/9/9a/Ironhard1.png",
            "Ironhard": "https://wiki.pokexgames.com/images/9/9a/Ironhard1.png",
    "Wingeon": "https://wiki.pokexgames.com/images/0/0c/Wingeon1.png",
            "Wingeon": "https://wiki.pokexgames.com/images/0/0c/Wingeon1.png",
    "Psycraft": "https://wiki.pokexgames.com/images/5/59/Psycraft1.png",
            "Psycraft": "https://wiki.pokexgames.com/images/5/59/Psycraft1.png",
    "Seavell": "https://wiki.pokexgames.com/images/2/2c/Seave1ll.png",
            "Seavell": "https://wiki.pokexgames.com/images/2/2c/Seave1ll.png",
    "Malefic": "https://wiki.pokexgames.com/images/5/56/Malefi1c.png"
            "Malefic": "https://wiki.pokexgames.com/images/5/56/Malefi1c.png"
};
        };
 


         document.addEventListener("DOMContentLoaded", function() {
         document.addEventListener("DOMContentLoaded", function() {
             const mapTypeSelect = document.getElementById("mapType");
             const mapTypeSelect = document.getElementById("mapType");
             const huntTypeSelect = document.getElementById("huntType");
             const huntTipoSelect = document.getElementById("huntTipo"); // Corrigido para huntTipo
             const tagButtons = document.querySelectorAll(".tag-button");
             const tagButtons = document.querySelectorAll(".tag-button");
             const imageContainer = document.getElementById("imageContainer");
             const imageContainer = document.getElementById("imageContainer");
Linha 158: Linha 60:


             // Atualiza o dropdown de tipo de hunt com base no local selecionado
             // Atualiza o dropdown de tipo de hunt com base no local selecionado
function updateHuntTypeDropdown(location) {
            function updateHuntTypeDropdown(location) {
    const huntList = hunts[location];
                const huntList = hunts[location];
    huntTypeSelect.innerHTML = '<option value="">Selecione um tipo</option>';
                huntTipoSelect.innerHTML = '<option value="">Selecione um tipo</option>';


    if (huntList) {
                if (huntList) {
        const types = new Set();
                    const types = new Set();
        huntList.forEach(hunt => {
                    huntList.forEach(hunt => {
            if (hunt.huntTipo) {
                        if (hunt.huntTipo) {
                types.add(hunt.huntTipo); // Pega "Elemental", "Legendary", etc.
                            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");
                }
             }
             }
        });
        types.forEach(type => {
            const option = document.createElement("option");
            option.value = type;
            option.textContent = type;
            huntTypeSelect.appendChild(option);
        });
        huntTypeSelect.classList.remove("disabled");
    } else {
        huntTypeSelect.classList.add("disabled");
    }
}


             // Filtra e exibe as hunts
             // Filtra e exibe as hunts
             function filterHunts() {
             function filterHunts() {
                 const selectedMap = mapTypeSelect.value;
                 const selectedMap = mapTypeSelect.value;
                 const selectedHuntType = huntTypeSelect.value;
                 const selectedHuntType = huntTipoSelect.value;
                 imageContainer.innerHTML = "";
                 imageContainer.innerHTML = "";


Linha 208: Linha 108:
                                 <p><b>Dificuldade:</b> ${hunt.difficulty}</p>
                                 <p><b>Dificuldade:</b> ${hunt.difficulty}</p>
                                 ${hunt.hasType ? `<p><b>Dano da Hunt:</b> ${hunt.huntTypes.join(", ")}</p>` : ""}
                                 ${hunt.hasType ? `<p><b>Dano da Hunt:</b> ${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.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" class="class-icon">`).join("")}
                                        ${hunt.classes.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" class="class-icon">`).join("")}
        </div>
                                    </div>
    </div>
                                </div>
</div>
                            </div>
                         `;
                         `;
                         imageContainer.appendChild(imageItem);
                         imageContainer.appendChild(imageItem);
Linha 230: Linha 130:
             });
             });


             huntTypeSelect.addEventListener("change", filterHunts);
             huntTipoSelect.addEventListener("change", filterHunts);


             tagButtons.forEach(button => {
             tagButtons.forEach(button => {
7 894

edições

Menu de navegação