PokeXGames

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

Widget Discussão

Widget:Test4 (ver código-fonte)

Edição das 23h16min de 23 de março de 2025

807 bytes removidos ,  23 março
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
 
(48 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pt-BR">
<html lang="pt-BR">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <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 13: Linha 13:
             margin: 0 auto;
             margin: 0 auto;
             border: 42px solid transparent;
             border: 42px solid transparent;
             border-image: url(https://wiki.pokexgames.com/images/3/35/Wiki_Borda_ADV.png) 38;
             border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
             border-image-repeat: round;
             border-image-repeat: round;
             width: 100%;
             width: 100%;
Linha 51: Linha 51:
             text-align: left;
             text-align: left;
         }
         }
.image-info p {
    margin-bottom: 6px; /* Reduz o espaço entre os parágrafos */
    margin-left: 40px;
    line-height: 1.5;
}
.image-info img {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
    transform: translateY(-3px); /* Sobe a imagem 5px */
}
.class-icons img {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
    transform: translateY(-3px); /* Sobe a imagem 5px */
}


        .image-item img {
            max-width: 100%;
            height: auto;
            cursor: pointer;
        }


        .image-info p {
            margin: 5px 0;
        }


         .image-item {
         .image-item {
Linha 72: Linha 84:
             max-width: 400px;
             max-width: 400px;
             width: 100%;
             width: 100%;
            margin-bottom: 35px;
         }
         }


Linha 95: Linha 109:
             align-items: center;
             align-items: center;
             gap: 10px;
             gap: 10px;
    margin-top: -5px; /* Aproxima "Clãs:" do item anterior */
         }
         }


        .class-icons {
            display: flex;
            gap: 5px;
        }


         .type-dropdown {
         .type-dropdown {
Linha 145: Linha 157:
         }
         }


         .toggle-button img {
         .toggle-group {
             width: 24px;
            display: flex;
             height: 24px;
            align-items: center;
            gap: 10px;
        }
 
        .toggle-container {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
 
        .toggle-container img {
             width: 60px;  
             height: 28px;
         }
         }
     </style>
     </style>
</head>
</head>  
 
<body>
<body>
     <div class="borda-container">
     <div class="borda-container">
        <!-- Filtro de Local -->
         <div class="input-group">
         <div class="input-group">
             <label for="mapType"><b>Local da Hunt:</b></label>
             <label for="difficulty"><b>Dificuldade:</b></label>
             <select id="mapType" class="maps__select">
             <select id="difficulty" class="maps__select">
                 <option value="">Selecione um local</option>
                 <option value="">Selecione uma Dificuldade</option>
                <option value="NW">NW</option>
             </select>
             </select>
         </div>
         </div>


        <!-- Toggle Button para Hunts Neutras -->
         <div class="input-group">
         <div class="input-group">
             <label><b>Mostrar Hunts Neutras:</b></label>
             <div class="toggle-group">
            <div class="toggle-button" id="toggleNeutro">
                <label><b>Mostrar Hunts Neutras </b></label>
                <img src="https://wiki.pokexgames.com/images/0/08/NeutralICON.png" alt="Desativado" id="toggleNeutroIcon">
                <div class="toggle-container" id="toggleNeutro">
                 <span id="toggleNeutroText">Desativado</span>
                    <img src="https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png" alt="Desativado"
                        id="toggleNeutroIcon">
                 </div>
             </div>
             </div>
         </div>
         </div>


        <!-- Filtro de Dificuldade -->
        <div class="input-group">
            <label for="difficulty"><b>Dificuldade:</b></label>
            <select id="difficulty" class="maps__select">
                <option value="">Selecione uma Dificuldade</option>
            </select>
        </div>
        <!-- Barra de Busca -->
         <div class="input-group">
         <div class="input-group">
             <label for="search"><b>Buscar por Nome:</b></label>
             <label for="search"><b>Buscar por Nome:</b></label>
             <input type="text" id="search" class="maps__select" placeholder="Digite o nome do local...">
             <input type="text" id="search" class="maps__select" placeholder="Digite o nome...">
         </div>
         </div>


        <!-- Switch Button para alternar entre Clãs e Tipos -->
         <div class="switch-container">
         <div class="switch-container">
             <div class="switch-button" id="switchClans">
             <div class="switch-button" id="switchClans">
Linha 195: Linha 209:
         </div>
         </div>


        <!-- Filtro de Clãs (ícones) -->
         <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>
Linha 201: Linha 214:
         </div>
         </div>


        <!-- Filtro de Tipos (ícones) -->
         <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>
Linha 207: Linha 219:
         </div>
         </div>


        <!-- Container das Hunts -->
         <div id="imageContainer" class="image-container"></div>
         <div id="imageContainer" class="image-container"></div>
     </div>
     </div>


     <script>
     <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: "Neutro", link: "https://exemplo.com/hunt2" }
            ],
        };
         const classIcons = {
         const classIcons = {
             "Volcanic": "https://wiki.pokexgames.com/images/6/64/Volcanic1.png",
             "Volcanic": "https://wiki.pokexgames.com/images/6/64/Volcanic1.png",
Linha 255: Linha 259:


         document.addEventListener("DOMContentLoaded", function () {
         document.addEventListener("DOMContentLoaded", function () {
            const mapTypeSelect = document.getElementById("mapType");
             const difficultySelect = document.getElementById("difficulty");
             const difficultySelect = document.getElementById("difficulty");
             const tagButtonsContainer = document.getElementById("tagButtons");
             const tagButtonsContainer = document.getElementById("tagButtons");
Linha 262: Linha 265:
             const toggleNeutro = document.getElementById("toggleNeutro");
             const toggleNeutro = document.getElementById("toggleNeutro");
             const toggleNeutroIcon = document.getElementById("toggleNeutroIcon");
             const toggleNeutroIcon = document.getElementById("toggleNeutroIcon");
            const toggleNeutroText = document.getElementById("toggleNeutroText");
             const searchInput = document.getElementById("search");
             const searchInput = document.getElementById("search");
             const switchClans = document.getElementById("switchClans");
             const switchClans = document.getElementById("switchClans");
Linha 273: Linha 275:
             let showNeutro = false;
             let showNeutro = false;


             // Inicializa os botões de clãs
             const neutroIconAtivado = "https://wiki.pokexgames.com/images/7/73/Vetor_Toggle_Wiki_On.png";
            const neutroIconDesativado = "https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png";
 
            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]) => {
             Object.entries(classIcons).forEach(([cls, icon]) => {
                 const button = document.createElement("button");
                 const button = document.createElement("button");
Linha 286: Linha 308:
             });
             });


            // Inicializa os botões de tipos
             Object.entries(typeIcons).forEach(([type, icon]) => {
             Object.entries(typeIcons).forEach(([type, icon]) => {
                 const button = document.createElement("button");
                 const button = document.createElement("button");
Linha 299: Linha 320:
             });
             });


             // Alternar entre Clãs e Tipos
             function clearFilters() {
                document.querySelectorAll("#tagButtons .tag-button.selected").forEach(button => {
                    button.classList.remove("selected");
                });
 
                document.querySelectorAll("#typeButtons .tag-button.selected").forEach(button => {
                    button.classList.remove("selected");
                });
                selectedTags = [];
                selectedTypes = [];
 
                filterHunts();
            }
 
             switchClans.addEventListener("click", () => {
             switchClans.addEventListener("click", () => {
                clearFilters();
                 clanFilter.classList.remove("hidden");
                 clanFilter.classList.remove("hidden");
                 typeFilter.classList.add("hidden");
                 typeFilter.classList.add("hidden");
Linha 308: Linha 343:


             switchTypes.addEventListener("click", () => {
             switchTypes.addEventListener("click", () => {
                clearFilters();
                 clanFilter.classList.add("hidden");
                 clanFilter.classList.add("hidden");
                 typeFilter.classList.remove("hidden");
                 typeFilter.classList.remove("hidden");
Linha 314: Linha 350:
             });
             });


            // Toggle para Hunts Neutras
            toggleNeutro.addEventListener("click", () => {
                showNeutro = !showNeutro;
                toggleNeutro.classList.toggle("active");
                toggleNeutroText.textContent = showNeutro ? "Ativado" : "Desativado";
                toggleNeutroIcon.src = showNeutro ? "https://wiki.pokexgames.com/images/0/08/NeutralICON.png" : "https://wiki.pokexgames.com/images/0/08/NeutralICON.png"; // Altere a imagem para o estado ativado
                filterHunts();
            });
            // Barra de busca
             searchInput.addEventListener("input", () => {
             searchInput.addEventListener("input", () => {
                 filterHunts();
                 filterHunts();
             });
             });


            // Atualiza o dropdown de dificuldade com base no local selecionado
            mapTypeSelect.addEventListener("change", function () {
                const selectedMap = this.value;
                difficultySelect.innerHTML = '<option value="">Selecione uma Dificuldade</option>';
                if (selectedMap && hunts[selectedMap]) {
                    const difficulties = new Set(hunts[selectedMap].map(hunt => hunt.difficulty));
                    difficulties.forEach(difficulty => {
                        const option = document.createElement("option");
                        option.value = difficulty;
                        option.textContent = difficulty;
                        difficultySelect.appendChild(option);
                    });
                }
                filterHunts();
            });
            // Filtra as hunts com base nos critérios selecionados
             function filterHunts() {
             function filterHunts() {
                const selectedMap = mapTypeSelect.value;
                 const selectedDifficulty = difficultySelect.value;
                 const selectedDifficulty = difficultySelect.value;
                 const searchTerm = searchInput.value.toLowerCase();
                 const searchTerm = searchInput.value.toLowerCase();
                 imageContainer.innerHTML = "";
                 imageContainer.innerHTML = "";


                 if (!selectedMap) return;
                // Se nenhuma dificuldade for selecionada, não exibe nada
                 if (!selectedDifficulty) {
                    return;
                }


                 const huntList = hunts[selectedMap];
                 const huntList = hunts["NW"]; // Assume que a database é sempre "NW"
                 huntList.forEach(hunt => {
                 huntList.forEach(hunt => {
                     const matchesTags = selectedTags.length === 0 || selectedTags.some(tag => hunt.classes.includes(tag));
                    const hasAllClasses = hunt.classes.includes("Todos");
                     const matchesTypes = selectedTypes.length === 0 || selectedTypes.some(type => hunt.huntTypes.includes(type));
                    const hasAllTypes = hunt.huntTypes.includes("Todos");
                     const matchesDifficulty = selectedDifficulty === "" || hunt.difficulty === selectedDifficulty;
 
                     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 matchesDifficulty = hunt.difficulty === selectedDifficulty;
 
                     const isNeutro = hunt.huntTipo === "Neutro";
                     const isNeutro = hunt.huntTipo === "Neutro";
                     const matchesSearch = hunt.name.toLowerCase().includes(searchTerm);
 
                     const matchesSearch = hunt.name.toLowerCase().includes(searchTerm) || (hunt.altName && hunt.altName.toLowerCase().includes(searchTerm));


                     if (matchesTags && matchesTypes && matchesDifficulty && (!isNeutro || (isNeutro && showNeutro)) && matchesSearch) {
                     if (matchesTags && matchesTypes && matchesDifficulty && (!isNeutro || (isNeutro && showNeutro)) && matchesSearch) {
Linha 368: Linha 385:
                             <div class="image-content">
                             <div class="image-content">
                                 <a href="${hunt.link}" target="_blank">
                                 <a href="${hunt.link}" target="_blank">
                                     <img src="${hunt.imageUrl}" alt="${hunt.name}">
                                     <img src="${hunt.imageUrl}" alt="${hunt.name}" title="Clique para mais informações">
                                 </a>
                                 </a>
                                <div class="image-info">
<div class="image-info">
                                    <p><b>Nome do Local:</b> ${hunt.name}</p>
    <p><b>Resistência: </b> ${Array.isArray(hunt.local) ? hunt.local.join(", ") : hunt.local}</p>
                                    <p><b>Localização:</b> ${hunt.local}</p>
    <p><b>Dificuldade: </b> ${hunt.difficulty}</p>
                                    <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>
                                    ${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.includes("Todos") ? "Todos" : hunt.classes.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" title="${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>
                            </div>
                         `;
                         `;
                         imageContainer.appendChild(imageItem);
                         imageContainer.appendChild(imageItem);
Linha 389: Linha 404:
             }
             }


            // Event listeners para os dropdowns
            mapTypeSelect.addEventListener("change", filterHunts);
             difficultySelect.addEventListener("change", filterHunts);
             difficultySelect.addEventListener("change", filterHunts);


             // Inicializa o dropdown de dificuldade ao carregar a página
             // Preenche as dificuldades disponíveis
             mapTypeSelect.dispatchEvent(new Event("change"));
            const difficulties = new Set(hunts["NW"].map(hunt => hunt.difficulty));
             difficulties.forEach(difficulty => {
                const option = document.createElement("option");
                option.value = difficulty;
                option.textContent = difficulty;
                difficultySelect.appendChild(option);
            });
 
            // Não exibe as hunts inicialmente (só após selecionar uma dificuldade)
            imageContainer.innerHTML = "";
         });
         });
     </script>
     </script>
</body>
</body>
</html>
</html>
Renee
Administradores
7 421

edições

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