Widget:Test4
Ir para navegação
Ir para pesquisar
<!DOCTYPE html> <html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seleção de Hunts</title>
<style>
.borda-container {
display: flex;
flex-direction: column;
padding: .5rem 2rem;
margin: 0 auto;
border: 42px solid transparent;
border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
border-image-repeat: round;
width: 100%;
box-sizing: border-box;
min-height: 620px;
overflow: hidden;
}
.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;
margin-top: 6px;
margin-bottom: 6px;
}
.image-info p {
margin: 5px 0;
}
.image-item {
display: flex;
justify-content: center;
width: 100%;
}
.image-content {
text-align: left;
max-width: 400px;
width: 100%;
}
.tag-button {
display: inline-flex;
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-container {
display: flex;
align-items: center;
gap: 10px;
}
.class-icons {
display: flex;
gap: 5px;
}
.type-dropdown {
margin-top: 10px;
}
.disabled {
opacity: 0.5;
pointer-events: none;
}
.switch-container {
display: flex;
gap: 10px;
margin: 20px 0;
}
.switch-button {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
}
.switch-button.active {
background-color: #d586e1;
border-color: #9d4cea;
}
.icon-filter {
width: 24px;
height: 24px;
}
.toggle-button {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
.toggle-group {
display: flex;
align-items: center;
gap: 10px;
}
.toggle-container {
display: flex;
align-items: center;
cursor: pointer;
}
.toggle-container img {
width: 60px;
height: 28px;
}
</style>
</head>
<body>
<label for="mapType">Local da Hunt:</label>
<select id="mapType" class="maps__select">
<option value="">Selecione um local</option>
<option value="NW">NW</option>
</select>
<label for="difficulty">Dificuldade:</label>
<select id="difficulty" class="maps__select">
<option value="">Selecione uma Dificuldade</option>
</select>
<label>Mostrar Hunts Neutras </label>
<img src="https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png" alt="Desativado" id="toggleNeutroIcon">
<label for="search">Buscar por Nome:</label>
<input type="text" id="search" class="maps__select" placeholder="Digite o nome...">
<label>Filtro de Clãs do Jogador:</label>
<script>
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"
};
const typeIcons = {
"Steel": "https://wiki.pokexgames.com/images/c/c9/Steel.png",
"Dragon": "https://wiki.pokexgames.com/images/c/c7/Dragon.png",
"Fairy": "https://wiki.pokexgames.com/images/4/43/Fairy.png",
"Psychic": "https://wiki.pokexgames.com/images/2/21/Psychic.png",
"Fighting": "https://wiki.pokexgames.com/images/3/30/Fighting.png",
"Ice": "https://wiki.pokexgames.com/images/7/77/Ice.png",
"Fire": "https://wiki.pokexgames.com/images/3/30/Fire.png",
"Rock": "https://wiki.pokexgames.com/images/0/0b/Rock.png",
"Ground": "https://wiki.pokexgames.com/images/8/8f/Ground.png",
"Poison": "https://wiki.pokexgames.com/images/0/03/Poison1.png",
"Electric": "https://wiki.pokexgames.com/images/2/2f/Electric.png",
"Water": "https://wiki.pokexgames.com/images/9/9d/Water.png",
"Bug": "https://wiki.pokexgames.com/images/7/7d/Bug.png",
"Grass": "https://wiki.pokexgames.com/images/c/c5/Grass.png",
"Flying": "https://wiki.pokexgames.com/images/7/7f/Flying.png",
"Normal": "https://wiki.pokexgames.com/images/e/e8/Normal1.png",
"Ghost": "https://wiki.pokexgames.com/images/5/59/Ghost1.png",
"Dark": "https://wiki.pokexgames.com/images/9/98/Dark1.png",
"Neutral": "https://wiki.pokexgames.com/images/0/08/NeutralICON.png"
};
document.addEventListener("DOMContentLoaded", function () {
const mapTypeSelect = document.getElementById("mapType");
const difficultySelect = document.getElementById("difficulty");
const tagButtonsContainer = document.getElementById("tagButtons");
const typeButtonsContainer = document.getElementById("typeButtons");
const imageContainer = document.getElementById("imageContainer");
const toggleNeutro = document.getElementById("toggleNeutro");
const toggleNeutroIcon = document.getElementById("toggleNeutroIcon");
const searchInput = document.getElementById("search");
const switchClans = document.getElementById("switchClans");
const switchTypes = document.getElementById("switchTypes");
const clanFilter = document.getElementById("clanFilter");
const typeFilter = document.getElementById("typeFilter");
let selectedTags = [];
let selectedTypes = [];
let showNeutro = false;
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]) => {
const button = document.createElement("button");
button.className = "tag-button";
button.innerHTML = `<img src="${icon}" alt="${cls}" class="class-icon" title="${cls}">`;
button.addEventListener("click", () => {
button.classList.toggle("selected");
selectedTags.includes(cls) ? selectedTags.splice(selectedTags.indexOf(cls), 1) : selectedTags.push(cls);
filterHunts();
});
tagButtonsContainer.appendChild(button);
});
Object.entries(typeIcons).forEach(([type, icon]) => {
const button = document.createElement("button");
button.className = "tag-button";
button.innerHTML = `<img src="${icon}" alt="${type}" class="class-icon" title="${type}">`;
button.addEventListener("click", () => {
button.classList.toggle("selected");
selectedTypes.includes(type) ? selectedTypes.splice(selectedTypes.indexOf(type), 1) : selectedTypes.push(type);
filterHunts();
});
typeButtonsContainer.appendChild(button);
});
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", () => {
clearFilters();
clanFilter.classList.remove("hidden");
typeFilter.classList.add("hidden");
switchClans.classList.add("active");
switchTypes.classList.remove("active");
});
switchTypes.addEventListener("click", () => {
clearFilters();
clanFilter.classList.add("hidden");
typeFilter.classList.remove("hidden");
switchClans.classList.remove("active");
switchTypes.classList.add("active");
});
searchInput.addEventListener("input", () => {
filterHunts();
});
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();
});
function filterHunts() {
const selectedMap = mapTypeSelect.value;
const selectedDifficulty = difficultySelect.value;
const searchTerm = searchInput.value.toLowerCase();
imageContainer.innerHTML = "";
if (!selectedMap) return;
const huntList = hunts[selectedMap];
huntList.forEach(hunt => {
const hasAllClasses = hunt.classes.includes("Todos");
const hasAllTypes = hunt.huntTypes.includes("Todos");
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 = selectedDifficulty === "" || hunt.difficulty === selectedDifficulty;
const isNeutro = hunt.huntTipo === "Neutro";
const matchesSearch = hunt.name.toLowerCase().includes(searchTerm) || (hunt.altName && hunt.altName.toLowerCase().includes(searchTerm));
if (matchesTags && matchesTypes && matchesDifficulty && (!isNeutro || (isNeutro && showNeutro)) && matchesSearch) {
const imageItem = document.createElement("div");
imageItem.className = "image-item";
imageItem.innerHTML = `
<a href="${hunt.link}" target="_blank">
<img src="${hunt.imageUrl}" alt="${hunt.name}" title="Clique para mais informações">
</a>
Nome do Local: ${hunt.name}
Localização: ${Array.isArray(hunt.local) ? hunt.local.join(", ") : hunt.local}
Dificuldade: ${hunt.difficulty}
Dano da Hunt: ${hunt.huntTypes.includes("Todos") ? "Todos" : hunt.huntTypes.join(", ")}
Clãs:
`;
imageContainer.appendChild(imageItem);
}
});
}
mapTypeSelect.addEventListener("change", filterHunts);
difficultySelect.addEventListener("change", filterHunts);
mapTypeSelect.dispatchEvent(new Event("change"));
});
</script>
</body>
</html>