5 805
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 209: | Linha 209: | ||
<label for="filterOption" class="maps__label">Filtrar Por</label> | <label for="filterOption" class="maps__label">Filtrar Por</label> | ||
<select id="filterOption" class="maps__select"> | <select id="filterOption" class="maps__select"> | ||
<option value="number">Filtrar por Número</option> | <option value="number">Filtrar por Número</option> | ||
<option value="tag">Filtrar por Tag</option> | <option value="tag">Filtrar por Tag</option> | ||
</select> | </select> | ||
<input type="text" id="searchIds" placeholder="Digite os números separados por vírgula" | <input type="text" id="searchIds" placeholder="Digite os números ou tags separados por vírgula" | ||
class="mapsCalc__select"> | class="mapsCalc__select"> | ||
</div> | </div> | ||
<div class="d-flex justify-center align-center flex-column"> | <div class="d-flex justify-center align-center flex-column"> | ||
<button type="button" id="filterButton" class="hover-minimize"> | <button type="button" id="filterButton" class="hover-minimize"> | ||
Linha 234: | Linha 232: | ||
1: { // Mapa Vermelho | 1: { // Mapa Vermelho | ||
'Areia': [ | 'Areia': [ | ||
{ id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png | { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', tag: 'Areia', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' }, | ||
], | ], | ||
// Outras opções do Mapa Vermelho | // Outras opções do Mapa Vermelho | ||
} | } | ||
}; | }; | ||
Linha 272: | Linha 258: | ||
const specificOptionSelect = document.getElementById('specificOption'); | const specificOptionSelect = document.getElementById('specificOption'); | ||
if (selectedMapType | if (selectedMapType) { | ||
specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>'; | specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>'; | ||
const options = Object.keys(specificOptions[selectedMapType]); | const options = Object.keys(specificOptions[selectedMapType]); | ||
Linha 289: | Linha 275: | ||
const imageContainer = document.getElementById('imageContainer'); | const imageContainer = document.getElementById('imageContainer'); | ||
if (selectedMapType && selectedOption | if (selectedMapType && selectedOption) { | ||
const images = specificOptions[selectedMapType][selectedOption]; | const images = specificOptions[selectedMapType][selectedOption]; | ||
let imagesHtml = ''; | let imagesHtml = ''; | ||
Linha 314: | Linha 300: | ||
<b>Número do Mapa</b>: ${images.id} <br> | <b>Número do Mapa</b>: ${images.id} <br> | ||
<b>Local</b>: ${images.local} <br> | <b>Local</b>: ${images.local} <br> | ||
<b>Coordenada</b>: ${images.coordinates} | <b>Coordenada</b>: ${images.coordinates}<br> | ||
<b>Tag(s)</b>: ${images.tag} | |||
</div> | </div> | ||
</div> | </div> | ||
Linha 327: | Linha 314: | ||
document.getElementById('filterButton').addEventListener('click', function () { | document.getElementById('filterButton').addEventListener('click', function () { | ||
const | const filterOption = document.getElementById('filterOption').value; | ||
const searchIdsOrTags = document.getElementById('searchIds').value.split(',').map(item => item.trim()); | |||
const imageContainer = document.getElementById('imageContainer'); | const imageContainer = document.getElementById('imageContainer'); | ||
let imagesHtml = ''; | |||
let allImages = []; | |||
if ( | if (filterOption === 'number' && searchIdsOrTags.length > 0) { | ||
// Filtrar por números | |||
Object.keys(specificOptions).forEach(mapType => { | |||
const mapOptions = specificOptions[mapType]; | |||
// | Object.keys(mapOptions).forEach(option => { | ||
const images = mapOptions[option].filter(image => searchIdsOrTags.includes(image.id)); | |||
allImages = allImages.concat(images); | |||
}); | |||
}); | |||
} else if (filterOption === 'tag' && searchIdsOrTags.length > 0) { | |||
// Filtrar por tags | |||
Object.keys(specificOptions).forEach(mapType => { | Object.keys(specificOptions).forEach(mapType => { | ||
const mapOptions = specificOptions[mapType]; | const mapOptions = specificOptions[mapType]; | ||
Object.keys(mapOptions).forEach(option => { | Object.keys(mapOptions).forEach(option => { | ||
const images = mapOptions[option].filter(image => | const images = mapOptions[option].filter(image => { | ||
return searchIdsOrTags.some(tag => image.tag && image.tag.toLowerCase().includes(tag.toLowerCase())); | |||
}); | |||
allImages = allImages.concat(images); | allImages = allImages.concat(images); | ||
}); | }); | ||
}); | }); | ||
} | |||
// Ordenar as imagens pelo nome do local | |||
allImages.sort((a, b) => a.local.localeCompare(b.local)); | |||
// Gerar o HTML para exibir as imagens ordenadas | |||
allImages.forEach(image => { | |||
imagesHtml += ` | |||
<div class="image-item"> | |||
<img src="${image.imageUrl}" alt="Imagem ID ${image.id}"> | |||
<div class="image-info"> | |||
<b>Número do Mapa</b>: ${image.id} <br> | |||
<b>Local</b>: ${image.local} <br> | |||
<b>Coordenada</b>: ${image.coordinates}<br> | |||
<b>Tag(s)</b>: ${image.tag} | |||
</div> | </div> | ||
`; | </div> | ||
`; | |||
}); | |||
imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com os números ou tags fornecidos.'; | |||
imageContainer.classList.remove('hidden'); | |||
}); | }); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |