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

.image-container img {

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

    margin-bottom: 5px;

}

          }

                 <label for="searchIds" class="mapsCalc__label">Buscar por Nº do Mapa:</label>

                     class="mapsCalc__select">

          2: {  

                { id: '1001', local: ' Outland Water', coordinates: '2847, 2827, 6', imageUrl: 'https://wiki.pokexgames.com/images/b/b9/Mapa_Verde_ADV_-_2847%2C_2827%2C_6.webp' },

{ id: '1002', local: ' Outland Water', coordinates: '2863, 2850, 6', imageUrl: 'https://wiki.pokexgames.com/images/c/c9/Mapa_Verde_ADV_-_2863%2C_2850%2C_6.webp' },

{ id: '1003', local: ' Respawn de Baltoy', coordinates: '5575, 5658, 5', imageUrl: 'https://wiki.pokexgames.com/images/3/3f/Mapa_Verde_ADV_-_5575%2C_5658%2C_5.webp' },

{ id: '1004', local: ' Respawn de Vibrava', coordinates: '5616, 5729, 7', imageUrl: 'https://wiki.pokexgames.com/images/6/67/Mapa_Verde_ADV_-_5616%2C_5729%2C_7.webp' },

{ id: '1006', local: ' Respawn de Pelipper', coordinates: '5814, 6111, 7', imageUrl: 'https://wiki.pokexgames.com/images/0/06/Mapa_Verde_ADV_-_5814%2C_6111%2C_7.webp' },

                 'Gelo': [

                { id: '2001', local: ' Outland Ice', coordinates: '2562, 3244, 6', imageUrl: 'https://wiki.pokexgames.com/images/4/40/Mapa_Verde_ADV_-_2562%2C_3244%2C_6.webp' },

{ id: '2002', local: ' Outland Ice', coordinates: '2670, 3318, 8', imageUrl: 'https://wiki.pokexgames.com/images/7/71/Mapa_Verde_ADV_-_2670%2C_3318%2C_8.webp' },

{ id: '2003', local: ' Outland Ice', coordinates: '2695, 3286, 7', imageUrl: 'https://wiki.pokexgames.com/images/e/e5/Mapa_Verde_ADV_-_2695%2C_3286%2C_7.webp' },

{ id: '2004', local: ' Outland Dragon', coordinates: '2710, 3287, 4', imageUrl: 'https://wiki.pokexgames.com/images/9/94/Mapa_Verde_ADV_-_2710%2C_3287%2C_4.webp' },

{ id: '2005', local: ' Respawn de Swellow', coordinates: '5047, 5744, 5', imageUrl: 'https://wiki.pokexgames.com/images/7/7c/Mapa_Verde_ADV_-_5047%2C_5744%2C_5.webp' },

{ id: '2006', local: ' Respawn de Walrein', coordinates: '5845, 5800, 7', imageUrl: 'https://wiki.pokexgames.com/images/9/93/Mapa_Verde_ADV_-_5845%2C_5800%2C_7.webp' },

                 'Grama': [

                { id: '3001', local: ' Outland Bug', coordinates: '2633, 3039, 7', imageUrl: 'https://wiki.pokexgames.com/images/4/40/Mapa_Verde_ADV_-_2633%2C_3039%2C_7.webp' },

 

                // Adicionar dados para o Mapa Roxo aqui

         document.getElementById('enableFilter').addEventListener('change', function () {

             const filterSection = document.getElementById('filterSection');

             if (this.checked) {

                filterSection.classList.remove('hidden');

             } else {

                 filterSection.classList.add('hidden');

        document.getElementById('searchIds').addEventListener('keypress', function (event) {

            if (event.key === 'Enter') {

                event.preventDefault();

                document.getElementById('filterButton').click();

             if (selectedMapType) {

                 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');

                document.getElementById('specificOptions').classList.add('hidden');

             const selectedMapType = document.getElementById('mapType').value;

            if (selectedMapType && selectedOption) {

                const images = specificOptions[selectedMapType][selectedOption];

                let imagesHtml = '';

 

                if (Array.isArray(images)) {

                    images.forEach(image => {

                        imagesHtml += `

                            <div class="image-item">

                                <img src="${image.imageUrl}" alt="${selectedOption}">

                                <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>

                        `;

                     });

                     imagesHtml = `

                         <div class="image-item">

                            <img src="${images.imageUrl}" alt="${selectedOption}">

                            <div class="image-info">

                                <b>Número do Mapa</b>: ${images.id} <br>

                                <b>Local</b>: ${images.local} <br>

                                <b>Coordenada</b>: ${images.coordinates}

                            </div>

                imageContainer.classList.remove('hidden');

            } else {

                imageContainer.classList.add('hidden');

         });

         document.getElementById('filterButton').addEventListener('click', function () {

            const imageContainer = document.getElementById('imageContainer');

            if (searchIds.length > 0) {

                let imagesHtml = '';

                let allImages = [];

                Object.keys(specificOptions).forEach(mapType => {

                    Object.keys(mapOptions).forEach(option => {

                        const images = mapOptions[option].filter(image => searchIds.includes(image.id));

                        allImages = allImages.concat(images);

                    });

                });

                allImages.sort((a, b) => a.local.localeCompare(b.local));

                // Gera o HTML para exibir as imagens ordenadas

                                <b>Tag(s)</b>: ${image.tag}

 

        });