7 752
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 166: | Linha 166: | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
<div class="borda-container"> | <div class="borda-container"> | ||
<div class="input-group"> | <div class="input-group"> | ||
<label for="difficulty"><b>Dificuldade:</b></label> | <label for="difficulty"><b>Dificuldade:</b></label> | ||
Linha 176: | Linha 176: | ||
</select> | </select> | ||
</div> | </div> | ||
<div class="input-group"> | <div class="input-group"> | ||
<div class="toggle-group"> | <div class="toggle-group"> | ||
Linha 186: | Linha 186: | ||
</div> | </div> | ||
</div> | </div> | ||
<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..."> | <input type="text" id="search" class="maps__select" placeholder="Digite o nome..."> | ||
</div> | </div> | ||
<div class="switch-container"> | <div class="switch-container"> | ||
<div class="switch-button" id="switchClans"> | <div class="switch-button" id="switchClans"> | ||
Linha 200: | Linha 200: | ||
</div> | </div> | ||
</div> | </div> | ||
<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> | ||
<div id="tagButtons"></div> | <div id="tagButtons"></div> | ||
</div> | </div> | ||
<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> | ||
<div id="typeButtons"></div> | <div id="typeButtons"></div> | ||
</div> | </div> | ||
<div id="imageContainer" class="image-container"></div> | <div id="imageContainer" class="image-container"></div> | ||
</div> | </div> | ||
<script> | <script> | ||
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 266: | Linha 266: | ||
let selectedTypes = []; | let selectedTypes = []; | ||
let showNeutro = false; | let showNeutro = false; | ||
const neutroIconAtivado = "https://wiki.pokexgames.com/images/7/73/Vetor_Toggle_Wiki_On.png"; | 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"; | const neutroIconDesativado = "https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png"; | ||
if (!toggleNeutro || !toggleNeutroIcon) { | if (!toggleNeutro || !toggleNeutroIcon) { | ||
console.error("Elementos do toggle não encontrados!"); | console.error("Elementos do toggle não encontrados!"); | ||
return; | return; | ||
} | } | ||
toggleNeutro.addEventListener("click", () => { | toggleNeutro.addEventListener("click", () => { | ||
showNeutro = !showNeutro; | showNeutro = !showNeutro; | ||
toggleNeutro.classList.toggle("active"); | toggleNeutro.classList.toggle("active"); | ||
if (showNeutro) { | if (showNeutro) { | ||
toggleNeutroIcon.src = neutroIconAtivado; | toggleNeutroIcon.src = neutroIconAtivado; | ||
} else { | } else { | ||
toggleNeutroIcon.src = neutroIconDesativado; | toggleNeutroIcon.src = neutroIconDesativado; | ||
} | } | ||
filterHunts(); | filterHunts(); | ||
}); | }); | ||
Object.entries(classIcons).forEach(([cls, icon]) => { | Object.entries(classIcons).forEach(([cls, icon]) => { | ||
const button = document.createElement("button"); | const button = document.createElement("button"); | ||
Linha 299: | Linha 299: | ||
tagButtonsContainer.appendChild(button); | tagButtonsContainer.appendChild(button); | ||
}); | }); | ||
Object.entries(typeIcons).forEach(([type, icon]) => { | Object.entries(typeIcons).forEach(([type, icon]) => { | ||
const button = document.createElement("button"); | const button = document.createElement("button"); | ||
Linha 324: | Linha 324: | ||
filterHunts(); | filterHunts(); | ||
} | } | ||
switchClans.addEventListener("click", () => { | switchClans.addEventListener("click", () => { | ||
clearFilters(); | clearFilters(); | ||
Linha 340: | Linha 341: | ||
switchTypes.classList.add("active"); | switchTypes.classList.add("active"); | ||
}); | }); | ||
searchInput.addEventListener("input", () => { | searchInput.addEventListener("input", () => { | ||
filterHunts(); | filterHunts(); | ||
}); | }); | ||
function filterHunts() { | function filterHunts() { | ||
const selectedDifficulty = difficultySelect.value; | const selectedDifficulty = difficultySelect.value; | ||
const searchTerm = searchInput.value.toLowerCase(); | const searchTerm = searchInput.value.toLowerCase(); | ||
imageContainer.innerHTML = ""; | imageContainer.innerHTML = ""; | ||
// Se nenhuma dificuldade for selecionada, não exibe nada | |||
if (!selectedDifficulty) { | |||
return; | |||
} | |||
const huntList = hunts["NW"]; // Assume que a database é sempre "NW" | const huntList = hunts["NW"]; // Assume que a database é sempre "NW" | ||
huntList.forEach(hunt => { | huntList.forEach(hunt => { | ||
const hasAllClasses = hunt.classes.includes("Todos"); | const hasAllClasses = hunt.classes.includes("Todos"); | ||
const hasAllTypes = hunt.huntTypes.includes("Todos"); | const hasAllTypes = hunt.huntTypes.includes("Todos"); | ||
const matchesTags = hasAllClasses || selectedTags.length === 0 || selectedTags.some(tag => hunt.classes.includes(tag)); | 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 matchesTypes = hasAllTypes || selectedTypes.length === 0 || selectedTypes.some(type => hunt.huntTypes.includes(type)); | ||
const matchesDifficulty = | const matchesDifficulty = hunt.difficulty === selectedDifficulty; | ||
const isNeutro = hunt.huntTipo === "Neutro"; | const isNeutro = hunt.huntTipo === "Neutro"; | ||
const matchesSearch = hunt.name.toLowerCase().includes(searchTerm) || (hunt.altName && hunt.altName.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) { | ||
const imageItem = document.createElement("div"); | const imageItem = document.createElement("div"); | ||
imageItem.className = "image-item"; | imageItem.className = "image-item"; | ||
imageItem.innerHTML = ` | imageItem.innerHTML = ` | ||
<div class="image-content"> | |||
<a href="${hunt.link}" target="_blank"> | |||
<img src="${hunt.imageUrl}" alt="${hunt.name}" title="Clique para mais informações"> | |||
</a> | |||
<div class="image-info"> | |||
<p><b>Resistência:</b> ${Array.isArray(hunt.local) ? hunt.local.join(", ") : hunt.local}</p> | |||
<p><b>Dificuldade:</b> ${hunt.difficulty}</p> | |||
<p><b>Dano da Hunt:</b> ${hunt.huntTypes.includes("Todos") ? "Todos" : hunt.huntTypes.join(", ")}</p> | |||
<div class="class-container"> | |||
<p><b>Clãs:</b></p> | |||
<div class="class-icons"> | |||
${hunt.classes.includes("Todos") ? "Todos" : hunt.classes.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" class="class-icon">`).join("")} | |||
</div> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
`; | |||
imageContainer.appendChild(imageItem); | imageContainer.appendChild(imageItem); | ||
} | } | ||
}); | }); | ||
} | } | ||
difficultySelect.addEventListener("change", filterHunts); | difficultySelect.addEventListener("change", filterHunts); | ||
// Preenche as dificuldades disponíveis | // Preenche as dificuldades disponíveis | ||
Linha 402: | Linha 408: | ||
}); | }); | ||
// Não exibe as hunts inicialmente (só após selecionar uma dificuldade) | |||
imageContainer.innerHTML = ""; | |||
}); | }); | ||
</script> | </script> |