PokeXGames

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

Widget Discussão

Widget:Test3 (ver código-fonte)

Edição das 03h30min de 4 de setembro de 2024

5 410 bytes removidos ,  4 setembro
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pt-BR">
<html lang="pt-BR">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
Linha 7: Linha 6:
     <title>Seleção e Exibição de Imagens</title>
     <title>Seleção e Exibição de Imagens</title>
     <style>
     <style>
        .d-flex {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: -15px;
        }
         .hidden {
         .hidden {
             display: none;
             display: none;
         }
         }
         .image-container {
         .image-container {
             display: flex;
             display: flex;
Linha 24: Linha 14:
             justify-content: center;
             justify-content: center;
             gap: 10px;
             gap: 10px;
            margin-top: 5px;
         }
         }
 
         .image-item {
         .image-container .image-item {
             flex: 1 0 30%;
             flex: 1 0 30%;
             text-align: center;
             text-align: center;
         }
         }
 
         .image-item img {
         .image-container img {
             max-width: 100%;
             object-fit: cover;
            height: auto;
             margin-bottom: 5px;
             margin-bottom: 5px;
         }
         }
        .image-info {
            margin-top: 5px;
        }
        select,
        input[type="text"],
        button {
            margin: 5px;
        }
        #filterButton {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            margin-top: 5px;
            display: flex;
            align-items: center;
        }
        #filterButton img {
            border-radius: 12px;
            margin-right: 5px;
            align-items: center;
        }
        #filterButton span {
            font-size: 16px;
            color: #0d0d0d;
        }
        .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: 410px;
            min-height: 320px;
        }
         .input-group {
         .input-group {
            position: relative;
             margin: 10px 0;
             margin: 20px 0;
         }
         }
        .input-group label {
            position: absolute;
            top: -18px;
            background: none;
            padding: 0 5px;
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
        }
         .maps__select {
         .maps__select {
             width: 100%;
             width: 100%;
Linha 103: Linha 33:
             border-radius: 5px;
             border-radius: 5px;
             border: 1px solid #ccc;
             border: 1px solid #ccc;
            appearance: none;
            background-color: #fff;
            box-sizing: border-box;
        }
        .input-group input[type="text"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .maps__label {
            position: absolute;
            top: -18px;
            background: none;
            padding: 0 5px;
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
        }
        .hover-minimize:hover {
            transform: scale(0.95);
        }
        .filter-container {
            display: flex;
            align-items: center;
         }
         }
        .filter-container input[type="checkbox"] {
            margin: 0;
            padding: 0;
            width: auto;
            height: auto;
            vertical-align: middle;
        }
        .filter-label {
            margin-left: 10px;
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
            line-height: 1.5;
        }
        /* Estilo para os botões de tags */
         .tag-button {
         .tag-button {
             background-color: #f0f0f0;
             background-color: #f0f0f0;
Linha 160: Linha 41:
             font-size: 14px;
             font-size: 14px;
             cursor: pointer;
             cursor: pointer;
            margin: 5px;
             transition: background-color 0.3s, color 0.3s;
             transition: background-color 0.3s, color 0.3s;
            margin: 5px;
        }
        .tag-button:hover {
            background-color: #ddd;
            color: #333;
         }
         }
         .tag-button.selected {
         .tag-button.selected {
             background-color: #007bff;
             background-color: #007bff;
             color: #fff;
             color: #fff;
            border-color: #007bff;
         }
         }
         .tag-button.disabled {
         .tag-button.disabled {
             background-color: #e0e0e0;
             background-color: #e0e0e0;
Linha 183: Linha 56:
     </style>
     </style>
</head>
</head>
<body>
<body>
     <form id="mapForm">
     <form id="mapForm">
Linha 193: Linha 65:
                 <option value="3">Mapa Roxo</option>
                 <option value="3">Mapa Roxo</option>
             </select>
             </select>
             <label class="maps__label" for="mapType">Tipo de Mapa</label>
             <label for="mapType">Tipo de Mapa</label>
         </div>
         </div>
         <div id="specificOptions" class="hidden input-group">
         <div id="specificOptions" class="hidden input-group">
             <select id="specificOption" class="maps__select">
             <select id="specificOption" class="maps__select">
Linha 207: Linha 78:
                 <option value="Pisos">Pisos</option>
                 <option value="Pisos">Pisos</option>
             </select>
             </select>
             <label class="maps__label" for="specificOption">Local do X</label>
             <label for="specificOption">Local do X</label>
         </div>
         </div>
       
         <div class="input-group">
         <div class="filter-container">
             <input type="checkbox" id="enableFilter">
             <input type="checkbox" id="enableFilter">
             <label for="enableFilter" class="filter-label">Ativar filtro</label>
             <label for="enableFilter">Ativar filtro</label>
         </div>
         </div>
       
         <div id="filterSection" class="hidden input-group">
         <div id="filterSection" class="hidden">
            <select id="filterOption" class="maps__select">
            <div id="filterById" class="input-group">
                <option value="">Escolha uma Opção</option>
                <label for="filterOption" class="maps__label">Filtrar Por</label>
                <option value="number">Filtrar por Número</option>
                <select id="filterOption" class="maps__select">
                <option value="tag">Filtrar por Tag</option>
                    <option value="">Escolha uma Opção</option>
            </select>
                    <option value="number">Filtrar por Número</option>
            <input type="text" id="searchIds" placeholder="Digite os números ou tags separados por vírgula" class="maps__select">
                    <option value="tag">Filtrar por Tag</option>  
             <button type="button" id="filterButton">Filtrar</button>
                </select>
                <input type="text" id="searchIds" placeholder="Digite os números ou tags separados por vírgula" class="maps__select">
             </div>
 
            <div class="d-flex justify-center align-center flex-column">
                <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">
                </button>
            </div>
        </div>
 
        <div id="imageContainer" class="image-container hidden">
            <!-- As imagens e suas informações serão exibidas aqui -->
         </div>
         </div>
 
         <div id="imageContainer" class="image-container hidden"></div>
        <!-- Seção para os botões de tags -->
        <div id="tagButtonsContainer" class="input-group">
         <div id="tagButtonsContainer" class="d-flex">
             <!-- Botões de tags serão inseridos aqui pelo JavaScript -->
            <button class="tag-button" data-value="Areia">Areia</button>
            <button class="tag-button" data-value="Gelo">Gelo</button>
            <button class="tag-button" data-value="Grama">Grama</button>
            <button class="tag-button" data-value="Pedra">Pedra</button>
            <button class="tag-button" data-value="Subaquático">Subaquático</button>
            <button class="tag-button" data-value="Terra">Terra</button>
            <button class="tag-button" data-value="Pisos">Pisos</button>
             <!-- Adicione outros botões de tags conforme necessário -->
         </div>
         </div>
        <div id="selectedTags" class="d-flex"></div>
     </form>
     </form>


Linha 256: Linha 103:
             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'], 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'], imageUrl: 'https://wiki.pokexgames.com/images/5/58/Mapas_de_ADV_VERMELHO_-_3969%2C_3300%2C_7.webp' }  
                    { id: '103', local: 'Wildwind Island', coordinates: '3976, 3334, 7', tags: ['Areia'], imageUrl: 'https://wiki.pokexgames.com/images/6/62/Mapas_de_ADV_VERMELHO_-_3976%2C_3334%2C_7.webp' }  
                 ],
                 ],
                 'Gelo': [  
                 'Gelo': [  
                     { id: '104', local: 'Snowy Mountain', coordinates: '3500, 3400, 7', tags: ['Gelo'], imageUrl: 'https://wiki.pokexgames.com/images/7/74/Mapas_de_ADV_VERDE_-_3500%2C_3400%2C_7.webp' },
                     { id: '103', local: 'Snowy Mountain', coordinates: '3500, 3400, 7', tags: ['Gelo'], imageUrl: 'https://wiki.pokexgames.com/images/7/74/Mapas_de_ADV_VERDE_-_3500%2C_3400%2C_7.webp' }  
                    { id: '105', local: 'Ice Palace', coordinates: '3700, 3200, 7', tags: ['Gelo'], imageUrl: 'https://wiki.pokexgames.com/images/8/84/Mapas_de_ADV_VERDE_-_3700%2C_3200%2C_7.webp' }  
                 ]
                 ]
             },
             },
             2: {  
             2: {  
                 'Grama': [  
                 'Grama': [  
                     { id: '106', local: 'Green Forest', coordinates: '3000, 3100, 7', tags: ['Grama', 'Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/9/94/Mapas_de_ADV_VERDE_-_3000%2C_3100%2C_7.webp' }  
                     { id: '104', local: 'Green Forest', coordinates: '3000, 3100, 7', tags: ['Grama'], imageUrl: 'https://wiki.pokexgames.com/images/9/94/Mapas_de_ADV_VERDE_-_3000%2C_3100%2C_7.webp' }  
                 ],
                 ],
                 'Pedra': [  
                 'Pedra': [  
                     { id: '107', local: 'Rocky Terrain', coordinates: '3200, 3400, 7', tags: ['Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/1/12/Mapas_de_ADV_VERDE_-_3200%2C_3400%2C_7.webp' }  
                     { id: '105', local: 'Rocky Terrain', coordinates: '3200, 3400, 7', tags: ['Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/1/12/Mapas_de_ADV_VERDE_-_3200%2C_3400%2C_7.webp' }  
                 ]
                 ]
             }
             }
         };
         };


         const tagButtons = document.querySelectorAll('.tag-button');
         const tagButtonsContainer = document.getElementById('tagButtonsContainer');
        const selectedTagsDiv = document.getElementById('selectedTags');
         const filterButton = document.getElementById('filterButton');
         const filterButton = document.getElementById('filterButton');
         const filterOption = document.getElementById('filterOption');
         const filterOption = document.getElementById('filterOption');
Linha 285: Linha 129:
         const enableFilter = document.getElementById('enableFilter');
         const enableFilter = document.getElementById('enableFilter');
         const filterSection = document.getElementById('filterSection');
         const filterSection = document.getElementById('filterSection');
        const tagButtonsContainer = document.getElementById('tagButtonsContainer');
         const mapTypeSelection = document.getElementById('mapTypeSelection');
         const mapTypeSelection = document.getElementById('mapTypeSelection');
         const specificOptionsSection = document.getElementById('specificOptions');
         const specificOptionsSection = document.getElementById('specificOptions');
        const tags = ['Areia', 'Gelo', 'Grama', 'Pedra', 'Subaquático', 'Terra', 'Pisos'];
        function renderTagButtons() {
            tags.forEach(tag => {
                const button = document.createElement('button');
                button.className = 'tag-button';
                button.dataset.value = tag;
                button.textContent = tag;
                button.addEventListener('click', function() {
                    this.classList.toggle('selected');
                    filterImages();
                });
                tagButtonsContainer.appendChild(button);
            });
        }


         function filterImages() {
         function filterImages() {
Linha 297: Linha 156:


             let selectedTags = [];
             let selectedTags = [];
             tagButtons.forEach(button => {
             document.querySelectorAll('.tag-button.selected').forEach(button => {
                 if (button.classList.contains('selected')) {
                 selectedTags.push(button.dataset.value);
                    selectedTags.push(button.dataset.value);
                }
             });
             });


             if (filterByNumber) {
             let filteredImages = [];
                const ids = searchIds.value.split(',').map(id => id.trim());
            for (const [mapTypeKey, locales] of Object.entries(specificOptions)) {
                const filteredImages = Object.values(specificOptions)
                 if (selectedMapType && selectedMapType !== mapTypeKey) continue;
                    .flatMap(options => Object.values(options))
                    .flat()
                    .filter(item => ids.includes(item.id));
                displayImages(filteredImages);
            } else if (filterByTag) {
                 if (!selectedTags.length) return;
                let filteredImages = Object.values(specificOptions)
                    .flatMap(options => Object.values(options))
                    .flat()
                    .filter(item => {
                        return selectedTags.some(tag => item.tags.includes(tag));
                    });


                 if (selectedLocal) {
                 for (const [local, items] of Object.entries(locales)) {
                     filteredImages = filteredImages.filter(item => item.tags.includes(selectedLocal));
                     if (selectedLocal && selectedLocal !== local) continue;
                }


                displayImages(filteredImages);
                    items.forEach(item => {
            } else {
                        if (filterByNumber && searchIds.value.split(',').map(id => id.trim()).includes(item.id)) {
                const filteredImages = Object.values(specificOptions)
                            filteredImages.push(item);
                    .flatMap(options => Object.values(options))
                         } else if (filterByTag && selectedTags.some(tag => item.tags.includes(tag))) {
                    .flat()
                            filteredImages.push(item);
                    .filter(item => {
                        } else if (!filterByNumber && !filterByTag) {
                         return (!selectedMapType || item.mapType === selectedMapType) &&
                            filteredImages.push(item);
                              (!selectedLocal || item.local === selectedLocal) &&
                        }
                              (!selectedTags.length || selectedTags.some(tag => item.tags.includes(tag)));
                     });
                     });
                 displayImages(filteredImages);
                 }
             }
             }
            displayImages(filteredImages);
         }
         }


Linha 343: Linha 188:
                 imageItem.innerHTML = `
                 imageItem.innerHTML = `
                     <img src="${image.imageUrl}" alt="Map Image">
                     <img src="${image.imageUrl}" alt="Map Image">
                     <div class="image-info">
                     <div>
                         <p>Número do Mapa: ${image.id}</p>
                         <p>Número do Mapa: ${image.id}</p>
                         <p>Local: ${image.local}</p>
                         <p>Local: ${image.local}</p>
Linha 355: Linha 200:
         }
         }


         tagButtons.forEach(button => {
         renderTagButtons();
            button.addEventListener('click', function() {
                this.classList.toggle('selected');
                updateSelectedTags();
                filterImages();
            });
        });
 
        function updateSelectedTags() {
            selectedTagsDiv.innerHTML = '';
            tagButtons.forEach(button => {
                if (button.classList.contains('selected')) {
                    const tagItem = document.createElement('span');
                    tagItem.className = 'tag-item';
                    tagItem.textContent = button.dataset.value;
                    selectedTagsDiv.appendChild(tagItem);
                }
            });
        }


         filterButton.addEventListener('click', filterImages);
         filterButton.addEventListener('click', filterImages);
Linha 390: Linha 217:
                 imageContainer.classList.add('hidden');
                 imageContainer.classList.add('hidden');
                 searchIds.value = '';
                 searchIds.value = '';
                 tagButtons.forEach(button => button.classList.remove('selected'));
                 document.querySelectorAll('.tag-button.selected').forEach(button => button.classList.remove('selected'));
                selectedTagsDiv.innerHTML = '';
             }
             }
         });
         });
     </script>
     </script>
</body>
</body>
</html>
</html>
Renee
Administradores
5 805

edições

Disponível em “https://wiki.pokexgames.com/index.php/Especial:MobileDiff/86720”