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

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
Linha 182: Linha 182:
     </style>
     </style>
</head>
</head>
<body>
<body>
     <form id="mapForm">
     <form id="mapForm">
Linha 198: Linha 197:
             <select id="specificOption" class="maps__select">
             <select id="specificOption" class="maps__select">
                 <option value="">Selecione uma opção</option>
                 <option value="">Selecione uma opção</option>
                 <!-- Options will be populated dynamically -->
                 <option value="Areia">Areia</option>
                <option value="Gelo">Gelo</option>
                <option value="Grama">Grama</option>
                <option value="Pedra">Pedra</option>
                <option value="Subaquático">Subaquático</option>
                <option value="Terra">Terra</option>
                <option value="Pisos">Pisos</option>
             </select>
             </select>
             <label class="maps__label" for="specificOption">Local do X</label>
             <label class="maps__label" for="specificOption">Local do X</label>
Linha 218: Linha 223:
                 <input type="text" id="searchIds" placeholder="Digite os números ou tags separados por vírgula" class="mapsCalc__select">
                 <input type="text" id="searchIds" placeholder="Digite os números ou tags separados por vírgula" class="mapsCalc__select">
             </div>
             </div>
 
           
             <div class="d-flex">
             <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">
                     <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão filtrar">
                     <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão filtrar">
Linha 229: Linha 234:
             <!-- As imagens e suas informações serão exibidas aqui -->
             <!-- As imagens e suas informações serão exibidas aqui -->
         </div>
         </div>
 
       
         <div class="d-flex">
         <div class="d-flex justify-center align-center flex-column">
             <button type="button" id="clearSavedMaps">Limpar Mapas Salvos</button>
            <button type="button" id="showSelectedMaps" class="hover-minimize">
                <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão exibir mapas selecionados">
            </button>
             <button type="button" id="clearSelectedMaps" class="hover-minimize">
                <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão limpar seleção">
            </button>
         </div>
         </div>
     </form>
     </form>
Linha 239: Linha 249:
             1: {  
             1: {  
                 'Areia': [  
                 'Areia': [  
                     { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', tags: ['Areia','Água','Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/4/4c/Mapas_de_ADV_VERMELHO_-_3780%2C_3326%2C_7.webp' },  
                     { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', tags:['Areia','Água','Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/4/4c/Mapas_de_ADV_VERMELHO_-_3780%2C_3326%2C_7.webp' },  
                     { id: '102', local: 'Wildwind Island', coordinates: '3969, 3300, 7', tags: ['Areia','Terra','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/5/58/Mapas_de_ADV_VERMELHO_-_3969%2C_3300%2C_7.webp' },  
                     { id: '102', local: 'Wildwind Island', coordinates: '3969, 3300, 7', tags:['Areia','Terra','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/5/58/Mapas_de_ADV_VERMELHO_-_3969%2C_3300%2C_7.webp' },  
                     // Add more images as needed
                     { id: '103', local: 'Wildwind Island', coordinates: '4002, 3320, 7', tags:['Areia','Árvore','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/0/07/Mapas_de_ADV_VERMELHO_-_4002%2C_3320%2C_7.webp' },
                 ]
                    { id: '104', local: 'Saffron', coordinates: '4009, 3601, 7', tags:['Areia','Árvore','Terra','Água'], imageUrl: 'https://wiki.pokexgames.com/images/f/f5/Mapas_de_ADV_VERMELHO_-_4009%2C_3601%2C_7.webp' },
                    { id: '105', local: 'Hurricane Island', coordinates: '4166, 3302, 7', tags:['Areia','Árvore','Água'], imageUrl: 'https://wiki.pokexgames.com/images/0/0d/Mapas_de_ADV_VERMELHO_-_4166%2C_3302%2C_7.webp' },
                    { id: '106', local: 'Shell Island', coordinates: '4266, 3359, 7', tags:['Areia','Água'], imageUrl: 'https://wiki.pokexgames.com/images/b/b1/Mapas_de_ADV_VERMELHO_-_4266%2C_3359%2C_7.webp' },
                    { id: '107', local: 'Shell Island', coordinates: '4299, 3333, 6', tags:['Areia','Água','Terra','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/c/c4/Mapas_de_ADV_VERMELHO_-_4299%2C_3333%2C_6.webp' },
                    { id: '108', local: 'Shell Island', coordinates: '4342, 3311, 6', tags:['Areia','Água','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/86/Mapas_de_ADV_VERMELHO_-_4342%2C_3311%2C_6.webp' }
                 ],
             },
             },
             3: {
             3: {
                 'Grama': [
                 'Grama': [
                     { id: '30001', local: 'Respawn de Darkrai', coordinates: '30792, 20621, 5', tags: ['Grama','Árvore','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/2/23/Mapas_de_ADV_ROXO_-_30792%2C_20621%2C_5.webp' },
                     { id: '30001', local: ' Respawn de Darkrai', coordinates: '30792, 20621, 5', tags:['Grama','Árvore','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/2/23/Mapas_de_ADV_ROXO_-_30792%2C_20621%2C_5.webp' },
                     // Add more images as needed
                     { id: '30002', local: ' Respawn de Darkrai', coordinates: '30823, 20758, 5', tags:['Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/e/ee/Mapas_de_ADV_ROXO_-_30823%2C_20758%2C_5.webp' },
                ],
                    { id: '30003', local: ' Respawn de Galarian Farfetch᾿d', coordinates: '30697, 20083, 1', tags:['Grama','Pedra','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/b/b5/Mapas_de_ADV_ROXO_-_30697%2C_20083%2C_1.webp' },
                'Pisos': [
                    { id: '30004', local: ' Respawn de Darkrai', coordinates: '30710, 20430, 5', tags:['Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/b/bd/Mapas_de_ADV_ROXO_-_30710%2C_20430%2C_5.webp' },
                     { id: '70001', local: 'Respawn de Infernape', coordinates: '30793, 20532, 3', tags: ['Piso','Construção', 'Fogo'], imageUrl: 'https://wiki.pokexgames.com/images/6/6f/Mapas_de_ADV_ROXO_-_30793%2C_20532%2C_3.webp' },
                     { id: '30005', local: ' Respawn de Miltank', coordinates: '30740, 20691, 5', tags:['Grama','Árvore','Construção'], imageUrl: 'https://wiki.pokexgames.com/images/f/f8/Mapas_de_ADV_ROXO_-_30740%2C_20691%2C_5.webp' },
                    // Add more images as needed
                 ]
                 ]
             }
             }
         };
         };


         let savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || {};
         let selectedMaps = JSON.parse(localStorage.getItem('selectedMaps')) || {};


         function renderSavedMaps() {
         function updateLocalStorage() {
            localStorage.setItem('selectedMaps', JSON.stringify(selectedMaps));
        }
 
        function renderMapImages() {
             const imageContainer = document.getElementById('imageContainer');
             const imageContainer = document.getElementById('imageContainer');
             let imagesHtml = '';
             imageContainer.innerHTML = '';
             for (const mapId in savedMaps) {
             Object.keys(selectedMaps).forEach(id => {
                 const map = savedMaps[mapId];
                 const map = selectedMaps[id];
                 imagesHtml += `
                 const mapDiv = document.createElement('div');
                    <div class="image-item">
                mapDiv.className = 'image-item';
                        <img src="${map.imageUrl}" alt="Imagem ID ${map.id}" class="selected-image">
                mapDiv.innerHTML = `
                        <div class="image-info">
                    <img src="${map.imageUrl}" alt="${map.local}" />
                            <b>Número do Mapa</b>: ${map.id} <br>
                    <div>
                            <b>Local</b>: ${map.local} <br>
                        <p><b>Local:</b> ${map.local}</p>
                            <b>Coordenada</b>: ${map.coordinates}<br>
                        <p><b>Coordenadas:</b> ${map.coordinates}</p>
                            <b>Tag(s)</b>: ${map.tags.join(', ') || 'Nenhuma'}
                        <p><b>Tags:</b> ${map.tags.join(', ')}</p>
                        </div>
                     </div>
                     </div>
                 `;
                 `;
             }
                imageContainer.appendChild(mapDiv);
            imageContainer.innerHTML = imagesHtml;
             });
             imageContainer.classList.toggle('hidden', !Object.keys(savedMaps).length);
             imageContainer.classList.remove('hidden');
         }
         }


         function toggleMapSelection(mapId, mapData) {
         function toggleMapSelection(id, mapData) {
             if (savedMaps[mapId]) {
            const img = document.querySelector(`img[data-id="${id}"]`);
                 delete savedMaps[mapId];
             if (selectedMaps[id]) {
                 delete selectedMaps[id];
                img.src = 'https://wiki.pokexgames.com/images/2/26/Semvip.png'; // Imagem de não selecionado
             } else {
             } else {
                 savedMaps[mapId] = mapData;
                 selectedMaps[id] = mapData;
                img.src = 'https://wiki.pokexgames.com/images/2/2d/Comvip.png'; // Imagem de selecionado
             }
             }
             localStorage.setItem('savedMaps', JSON.stringify(savedMaps));
             updateLocalStorage();
            renderSavedMaps();
         }
         }


         function handleImageClick(event) {
         document.getElementById('mapForm').addEventListener('change', function(event) {
             const mapId = event.target.dataset.mapId;
             const mapType = document.getElementById('mapType').value;
             const mapData = event.target.dataset.mapData;
             const specificOption = document.getElementById('specificOption').value;
             if (mapId && mapData) {
 
                 toggleMapSelection(mapId, JSON.parse(mapData));
             if (mapType && specificOption) {
                 event.target.src = savedMaps[mapId] ? 'https://wiki.pokexgames.com/images/2/2d/Comvip.png' : 'https://wiki.pokexgames.com/images/2/26/Semvip.png';
                 const maps = specificOptions[mapType] && specificOptions[mapType][specificOption] || [];
            }
                const mapContainer = document.getElementById('mapContainer');
        }
                 mapContainer.innerHTML = '';


        document.getElementById('enableFilter').addEventListener('change', function () {
                maps.forEach(map => {
            const filterSection = document.getElementById('filterSection');
                    const mapDiv = document.createElement('div');
            filterSection.classList.toggle('hidden', !this.checked);
                    mapDiv.className = 'image-item';
        });


        document.getElementById('searchIds').addEventListener('keypress', function (event) {
                    mapDiv.innerHTML = `
            if (event.key === 'Enter') {
                        <img src="${map.imageUrl}" alt="${map.local}" data-id="${map.id}" />
                event.preventDefault();
                        <div>
                document.getElementById('filterButton').click();
                            <p><b>Local:</b> ${map.local}</p>
            }
                            <p><b>Coordenadas:</b> ${map.coordinates}</p>
        });
                            <p><b>Tags:</b> ${map.tags.join(', ')}</p>
                        </div>
                    `;


        document.getElementById('mapType').addEventListener('change', function () {
                    mapDiv.querySelector('img').addEventListener('click', function() {
            const selectedMapType = this.value;
                        toggleMapSelection(map.id, map);
            const specificOptionSelect = document.getElementById('specificOption');
                    });


            if (selectedMapType) {
                    mapContainer.appendChild(mapDiv);
                specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
                const options = Object.keys(specificOptions[selectedMapType]);
                options.forEach(option => {
                    specificOptionSelect.innerHTML += `<option value="${option}">${option}</option>`;
                 });
                 });
                 document.getElementById('specificOptions').classList.remove('hidden');
 
            } else {
                 document.getElementById('mapContainer').classList.remove('hidden');
                document.getElementById('specificOptions').classList.add('hidden');
             }
             }
         });
         });


         document.getElementById('specificOption').addEventListener('change', function () {
         document.getElementById('showSelectedMaps').addEventListener('click', function() {
             const selectedMapType = document.getElementById('mapType').value;
             renderMapImages();
            const selectedOption = this.value;
        });
            const imageContainer = document.getElementById('imageContainer');


            if (selectedMapType && selectedOption) {
        document.getElementById('clearSelectedMaps').addEventListener('click', function() {
                const images = specificOptions[selectedMapType][selectedOption];
            selectedMaps = {};
                let imagesHtml = '';
            updateLocalStorage();
            document.getElementById('imageContainer').innerHTML = '';
            document.getElementById('imageContainer').classList.add('hidden');
        });


                if (Array.isArray(images)) {
        document.getElementById('enableFilter').addEventListener('change', function() {
                    images.forEach(image => {
            const filterSection = document.getElementById('filterSection');
                        imagesHtml += `
             filterSection.classList.toggle('hidden', !this.checked);
                            <div class="image-item map-selection">
                                <img src="${savedMaps[image.id] ? 'https://wiki.pokexgames.com/images/2/2d/Comvip.png' : 'https://wiki.pokexgames.com/images/2/26/Semvip.png'}"
                                    alt="Selecionar/Desmarcar Mapa"
                                    data-map-id="${image.id}"
                                    data-map-data='${JSON.stringify(image)}'
                                    onclick="handleImageClick(event)">
                                <img src="${image.imageUrl}" alt="${selectedOption}">
                                <div class="image-info">
                                    <b>ID</b>: ${image.id} <br>
                                    <b>Local</b>: ${image.local} <br>
                                    <b>Coordenadas</b>: ${image.coordinates}<br>
                                    <b>Tag(s)</b>: ${image.tags.join(', ') || 'Nenhuma'}
                                </div>
                            </div>
                        `;
                    });
                }
 
                imageContainer.innerHTML = imagesHtml;
                imageContainer.classList.remove('hidden');
             } else {
                imageContainer.classList.add('hidden');
            }
         });
         });


         document.getElementById('filterButton').addEventListener('click', function () {
         function filterMaps() {
             const filterOption = document.getElementById('filterOption').value;
             const filterOption = document.getElementById('filterOption').value;
             const searchIds = document.getElementById('searchIds').value.trim().toLowerCase().split(',').map(id => id.trim());
             const searchText = document.getElementById('searchIds').value.toLowerCase().trim();
           
            const filterOptionValue = filterOption || '';
            if (filterOption === 'tag' && searchIds.length > 0) {
 
                const images = Object.values(specificOptions).flat().flatMap(option => option.filter(map => map.tags.some(tag => searchIds.includes(tag.toLowerCase()))));
            const filteredMaps = Object.values(specificOptions).flatMap(option =>
                // Render images based on the tags
                Object.values(option).flatMap(mapList =>
             } else if (filterOption === 'number' && searchIds.length > 0) {
                    mapList.filter(map => {
                 const images = Object.values(specificOptions).flat().flatMap(option => option.filter(map => searchIds.includes(map.id)));
                        if (filterOptionValue === 'number') {
                 // Render images based on the numbers
                            return searchText.split(',').map(s => s.trim()).includes(map.id);
             }
                        } else if (filterOptionValue === 'tag') {
        });
                            return searchText.split(',').map(s => s.trim()).some(tag => map.tags.map(t => t.toLowerCase()).includes(tag));
                        }
                        return false;
                    })
                )
            );
 
             const mapContainer = document.getElementById('mapContainer');
            mapContainer.innerHTML = '';
 
            filteredMaps.forEach(map => {
                 const mapDiv = document.createElement('div');
                mapDiv.className = 'image-item';
 
                mapDiv.innerHTML = `
                    <img src="${map.imageUrl}" alt="${map.local}" />
                    <div>
                        <p><b>Local:</b> ${map.local}</p>
                        <p><b>Coordenadas:</b> ${map.coordinates}</p>
                        <p><b>Tags:</b> ${map.tags.join(', ')}</p>
                    </div>
                `;
 
                 mapContainer.appendChild(mapDiv);
             });


        document.getElementById('clearSavedMaps').addEventListener('click', function () {
            mapContainer.classList.remove('hidden');
            savedMaps = {};
         }
            localStorage.removeItem('savedMaps');
            renderSavedMaps();
         });


         renderSavedMaps();
         document.getElementById('filterButton').addEventListener('click', filterMaps);
     </script>
     </script>
</body>
</body>
</html>
</html>

Edição das 02h53min de 3 de setembro de 2024

<!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 e Exibição de Imagens</title>
   <style>
       .d-flex {
           display: flex;
           justify-content: center;
           align-items: center;
           flex-direction: column;
           margin-top: -15px;
           /* Ajuste este valor conforme necessário para subir o botão */
       }
       .hidden {
           display: none;
       }
       .image-container {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           gap: 10px;
           margin-top: 5px;
       }
       .image-container .image-item {
           flex: 1 0 30%;
           text-align: center;
       }

.image-container img {

   object-fit: cover; /* Mantém a proporção da imagem, cortando se necessário */
   margin-bottom: 5px;

}

       .image-info {
           margin-top: 5px;
       }
       select,
       input[type="text"],
       button {
           margin: 5px;
       }
       #filterButton,
       #searchButton {
           background: none;
           /* Remove o fundo do botão */
           border: none;
           /* Remove a borda do botão */
           padding: 0;
           /* Remove o padding do botão */
           cursor: pointer;
           /* Mostra o cursor de ponteiro ao passar sobre o botão */
           margin-top: 5px;
           /* Ajuste a margem superior para subir o botão */
       }
       #filterButton img,
       #searchButton img {
           border-radius: 12px;
           width: auto;
           /* Garante que a largura se ajuste ao tamanho original da imagem */
           height: auto;
           /* Garante que a altura se ajuste ao tamanho original da imagem */
       }
       .mw-body-content {
           display: flex;
       }
       .mw-parser-output {
           display: inline-block;
           padding: .5rem 2rem;
           margin: 0 auto;
           border: 30px solid transparent;
           border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
           min-width: 340px;
           min-height: 270px;
         }
       .input-group {
           position: relative;
           margin: 20px 0;
           /* Ajuste a margem para mover o campo para cima */
       }
       .input-group label {
           position: absolute;
           top: -18px;
           /* Eleva o texto para cima */
           background: none;
           padding: 0 5px;
           font-size: 14px;
           font-weight: bold;
           color: #0d0d0d;
       }
       .maps__select {
           width: 100%;
           /* Mantém a largura total disponível */
           padding: 10px;
           font-size: 16px;
           border-radius: 5px;
           border: 1px solid #ccc;
           appearance: none;
           background-color: #fff;
           /* Adiciona um fundo branco */
           box-sizing: border-box;
           /* Inclui o padding e a borda na largura total */
       }


       .input-group input[type="text"] {
           width: 100%;
           /* Mantém a largura total disponível */
           padding: 10px;
           font-size: 16px;
           border-radius: 5px;
           border: 1px solid #ccc;
           box-sizing: border-box;
           /* Inclui o padding e a borda na largura total */
       }
       .maps__label {
           position: absolute;
           top: -18px;
           /* Eleva o texto um pouco mais para cima */
           background: none;
           padding: 0 5px;
           font-size: 14px;
           font-weight: bold;
           /* Deixa o texto em negrito */
           color: #0d0d0d;
       }
       .hover-minimize:hover {
           transform: scale(0.95);
           /* Adiciona um efeito de minimizar ao passar o mouse */
       }
       .filter-container {
           display: flex;
           align-items: center;
       }
       .filter-container input[type="checkbox"] {
           margin: 0;
           padding: 0;
           width: auto;
           /* Ajusta o tamanho da checkbox conforme necessário */
           height: auto;
           /* Ajusta o tamanho da checkbox conforme necessário */
           /* Alinha verticalmente a checkbox com o texto */
           vertical-align: middle;
       }
       .filter-label {
           margin-left: 10px;
           /* Espaço entre a checkbox e o texto */
           font-size: 14px;
           font-weight: bold;
           color: #0d0d0d;
           line-height: 1.5;
           /* Ajusta a altura da linha para um alinhamento adequado */
       }
       .selected-image {
           border: 2px solid green;
       }
       .unselected-image {
           border: 2px solid red;
       }
       .hidden {
           display: none;
       } 
   </style>

</head> <body>

   <form id="mapForm">
           <select id="mapType" class="maps__select">
               <option value="">Selecione um mapa</option>
               <option value="1">Mapa Vermelho</option>
               <option value="2">Mapa Verde</option>
               <option value="3">Mapa Roxo</option>
           </select>
           <label class="maps__label" for="mapType">Tipo de Mapa</label>
           <input type="checkbox" id="enableFilter">
           <label for="enableFilter" class="filter-label">Ativar filtro</label>
           <button type="button" id="showSelectedMaps" class="hover-minimize">
               <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão exibir mapas selecionados">
           </button>
           <button type="button" id="clearSelectedMaps" class="hover-minimize">
               <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão limpar seleção">
           </button>
   </form>
   <script>
       const specificOptions = {
           1: { 
               'Areia': [ 
                   { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', tags:['Areia','Água','Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/4/4c/Mapas_de_ADV_VERMELHO_-_3780%2C_3326%2C_7.webp' }, 
                   { id: '102', local: 'Wildwind Island', coordinates: '3969, 3300, 7', tags:['Areia','Terra','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/5/58/Mapas_de_ADV_VERMELHO_-_3969%2C_3300%2C_7.webp' }, 
                   { id: '103', local: 'Wildwind Island', coordinates: '4002, 3320, 7', tags:['Areia','Árvore','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/0/07/Mapas_de_ADV_VERMELHO_-_4002%2C_3320%2C_7.webp' }, 
                   { id: '104', local: 'Saffron', coordinates: '4009, 3601, 7', tags:['Areia','Árvore','Terra','Água'], imageUrl: 'https://wiki.pokexgames.com/images/f/f5/Mapas_de_ADV_VERMELHO_-_4009%2C_3601%2C_7.webp' }, 
                   { id: '105', local: 'Hurricane Island', coordinates: '4166, 3302, 7', tags:['Areia','Árvore','Água'], imageUrl: 'https://wiki.pokexgames.com/images/0/0d/Mapas_de_ADV_VERMELHO_-_4166%2C_3302%2C_7.webp' }, 
                   { id: '106', local: 'Shell Island', coordinates: '4266, 3359, 7', tags:['Areia','Água'], imageUrl: 'https://wiki.pokexgames.com/images/b/b1/Mapas_de_ADV_VERMELHO_-_4266%2C_3359%2C_7.webp' }, 
                   { id: '107', local: 'Shell Island', coordinates: '4299, 3333, 6', tags:['Areia','Água','Terra','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/c/c4/Mapas_de_ADV_VERMELHO_-_4299%2C_3333%2C_6.webp' }, 
                   { id: '108', local: 'Shell Island', coordinates: '4342, 3311, 6', tags:['Areia','Água','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/86/Mapas_de_ADV_VERMELHO_-_4342%2C_3311%2C_6.webp' }
               ],
           },
           3: {
               'Grama': [
                   { id: '30001', local: ' Respawn de Darkrai', coordinates: '30792, 20621, 5', tags:['Grama','Árvore','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/2/23/Mapas_de_ADV_ROXO_-_30792%2C_20621%2C_5.webp' },
                   { id: '30002', local: ' Respawn de Darkrai', coordinates: '30823, 20758, 5', tags:['Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/e/ee/Mapas_de_ADV_ROXO_-_30823%2C_20758%2C_5.webp' },
                   { id: '30003', local: ' Respawn de Galarian Farfetch᾿d', coordinates: '30697, 20083, 1', tags:['Grama','Pedra','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/b/b5/Mapas_de_ADV_ROXO_-_30697%2C_20083%2C_1.webp' },
                   { id: '30004', local: ' Respawn de Darkrai', coordinates: '30710, 20430, 5', tags:['Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/b/bd/Mapas_de_ADV_ROXO_-_30710%2C_20430%2C_5.webp' },
                   { id: '30005', local: ' Respawn de Miltank', coordinates: '30740, 20691, 5', tags:['Grama','Árvore','Construção'], imageUrl: 'https://wiki.pokexgames.com/images/f/f8/Mapas_de_ADV_ROXO_-_30740%2C_20691%2C_5.webp' },
               ]
           }
       };
       let selectedMaps = JSON.parse(localStorage.getItem('selectedMaps')) || {};
       function updateLocalStorage() {
           localStorage.setItem('selectedMaps', JSON.stringify(selectedMaps));
       }
       function renderMapImages() {
           const imageContainer = document.getElementById('imageContainer');
           imageContainer.innerHTML = ;
           Object.keys(selectedMaps).forEach(id => {
               const map = selectedMaps[id];
               const mapDiv = document.createElement('div');
               mapDiv.className = 'image-item';
               mapDiv.innerHTML = `
                   <img src="${map.imageUrl}" alt="${map.local}" />

Local: ${map.local}

Coordenadas: ${map.coordinates}

Tags: ${map.tags.join(', ')}

               `;
               imageContainer.appendChild(mapDiv);
           });
           imageContainer.classList.remove('hidden');
       }
       function toggleMapSelection(id, mapData) {
           const img = document.querySelector(`img[data-id="${id}"]`);
           if (selectedMaps[id]) {
               delete selectedMaps[id];
               img.src = 'https://wiki.pokexgames.com/images/2/26/Semvip.png'; // Imagem de não selecionado
           } else {
               selectedMaps[id] = mapData;
               img.src = 'https://wiki.pokexgames.com/images/2/2d/Comvip.png'; // Imagem de selecionado
           }
           updateLocalStorage();
       }
       document.getElementById('mapForm').addEventListener('change', function(event) {
           const mapType = document.getElementById('mapType').value;
           const specificOption = document.getElementById('specificOption').value;
           if (mapType && specificOption) {
               const maps = specificOptions[mapType] && specificOptions[mapType][specificOption] || [];
               const mapContainer = document.getElementById('mapContainer');
               mapContainer.innerHTML = ;
               maps.forEach(map => {
                   const mapDiv = document.createElement('div');
                   mapDiv.className = 'image-item';
                   mapDiv.innerHTML = `
                       <img src="${map.imageUrl}" alt="${map.local}" data-id="${map.id}" />

Local: ${map.local}

Coordenadas: ${map.coordinates}

Tags: ${map.tags.join(', ')}

                   `;
                   mapDiv.querySelector('img').addEventListener('click', function() {
                       toggleMapSelection(map.id, map);
                   });
                   mapContainer.appendChild(mapDiv);
               });
               document.getElementById('mapContainer').classList.remove('hidden');
           }
       });
       document.getElementById('showSelectedMaps').addEventListener('click', function() {
           renderMapImages();
       });
       document.getElementById('clearSelectedMaps').addEventListener('click', function() {
           selectedMaps = {};
           updateLocalStorage();
           document.getElementById('imageContainer').innerHTML = ;
           document.getElementById('imageContainer').classList.add('hidden');
       });
       document.getElementById('enableFilter').addEventListener('change', function() {
           const filterSection = document.getElementById('filterSection');
           filterSection.classList.toggle('hidden', !this.checked);
       });
       function filterMaps() {
           const filterOption = document.getElementById('filterOption').value;
           const searchText = document.getElementById('searchIds').value.toLowerCase().trim();
           const filterOptionValue = filterOption || ;
           const filteredMaps = Object.values(specificOptions).flatMap(option => 
               Object.values(option).flatMap(mapList => 
                   mapList.filter(map => {
                       if (filterOptionValue === 'number') {
                           return searchText.split(',').map(s => s.trim()).includes(map.id);
                       } else if (filterOptionValue === 'tag') {
                           return searchText.split(',').map(s => s.trim()).some(tag => map.tags.map(t => t.toLowerCase()).includes(tag));
                       }
                       return false;
                   })
               )
           );
           const mapContainer = document.getElementById('mapContainer');
           mapContainer.innerHTML = ;
           filteredMaps.forEach(map => {
               const mapDiv = document.createElement('div');
               mapDiv.className = 'image-item';
               mapDiv.innerHTML = `
                   <img src="${map.imageUrl}" alt="${map.local}" />

Local: ${map.local}

Coordenadas: ${map.coordinates}

Tags: ${map.tags.join(', ')}

               `;
               mapContainer.appendChild(mapDiv);
           });
           mapContainer.classList.remove('hidden');
       }
       document.getElementById('filterButton').addEventListener('click', filterMaps);
   </script>

</body> </html>