7 894
edições
Sem resumo de edição Etiqueta: Revertido |
Sem resumo de edição Etiqueta: Reversão manual |
||
Linha 184: | Linha 184: | ||
</select> | </select> | ||
</div> | </div> | ||
<div class="input-group"> | <div class="input-group"> | ||
<div class="toggle-group"> | <div class="toggle-group"> | ||
<label><b>Mostrar | <label><b>Mostrar hunts neutras </b></label> | ||
< | <div class="toggle-container" id="toggleNeutro"> | ||
< | <img src="https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png" alt="Desativado" | ||
</ | id="toggleNeutroIcon"> | ||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
Linha 209: | Linha 209: | ||
</div> | </div> | ||
<div id="clanFilter" class="input-group"> | <div id="clanFilter" class="input-group"> | ||
<label><b>Filtro de clãs do jogador:</b></label> | |||
<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> | |||
<div id="typeButtons"></div> | |||
</div> | </div> | ||
<div id="imageContainer" class="image-container"></div> | <div id="imageContainer" class="image-container"></div> | ||
Linha 261: | Linha 260: | ||
document.addEventListener("DOMContentLoaded", function () { | document.addEventListener("DOMContentLoaded", function () { | ||
const difficultySelect = document.getElementById("difficulty"); | const difficultySelect = document.getElementById("difficulty"); | ||
const | const tagButtonsContainer = document.getElementById("tagButtons"); | ||
const | const typeButtonsContainer = document.getElementById("typeButtons"); | ||
const imageContainer = document.getElementById("imageContainer"); | const imageContainer = document.getElementById("imageContainer"); | ||
const toggleNeutro = document.getElementById("toggleNeutro"); | const toggleNeutro = document.getElementById("toggleNeutro"); | ||
const toggleNeutroIcon = document.getElementById("toggleNeutroIcon"); | |||
const searchInput = document.getElementById("search"); | const searchInput = document.getElementById("search"); | ||
const switchClans = document.getElementById("switchClans"); | const switchClans = document.getElementById("switchClans"); | ||
Linha 274: | Linha 274: | ||
let selectedTypes = []; | let selectedTypes = []; | ||
let showNeutro = false; | let showNeutro = false; | ||
toggleNeutro.addEventListener(" | 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]) => { | |||
Object.entries( | 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", () => { | switchClans.addEventListener("click", () => { | ||
Linha 336: | Linha 354: | ||
}); | }); | ||
function | function filterHunts() { | ||
const selectedDifficulty = difficultySelect.value; | |||
. | const searchTerm = searchInput.value.toLowerCase(); | ||
imageContainer.innerHTML = ""; | |||
// Se nenhuma dificuldade for selecionada, não exibe nada | |||
if (!selectedDifficulty) { | |||
return; | |||
} | |||
const huntList = hunts["NW"]; // Assume que a database é sempre "NW" | |||
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 = 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 = ` | |||
<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: </b> ${hunt.huntTypes.includes("Todos") ? "Todos" : hunt.huntTypes.map(type => `<img src="${typeIcons[type]}" alt="${type}" title="${type}" class="class-icon">`).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}" title="${cls}" class="class-icon">`).join("")} | |||
</div> | |||
</div> | |||
</div> | |||
`; | |||
imageContainer.appendChild(imageItem); | |||
} | |||
}); | |||
} | |||
difficultySelect.addEventListener("change", filterHunts); | difficultySelect.addEventListener("change", filterHunts); |