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
 
(171 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<!DOCTYPE html>
<script>
<html lang="pt-BR">
document.addEventListener('DOMContentLoaded', function () {
<head>
  Date.prototype.getWeekNumber = function () {
    <meta charset="UTF-8">
     let d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    let dayNum = d.getUTCDay() || 7; // Garante que domingo (0) seja o último dia da semana
    <title>Seleção e Exibição de Imagens</title>
    let yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
    <style>
     return Math.ceil((((d - yearStart) / 86400000) + 1) / 7); // Calcula o número da semana
        .d-flex {
  };
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: -15px;
        }
        .image-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .image-item img {
            max-width: 100px;
            margin-right: 15px;
            cursor: pointer;
        }
        .hidden {
            display: none;
        }
        .selected {
            border: 2px solid #4CAF50;
        }
        .filter-container {
            margin-bottom: 15px;
        }
     </style>
</head>
<body>
    <form id="mapForm">
        <div id="mapTypeSelection" class="input-group">
            <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>
        </div>


        <div id="specificOptions" class="hidden input-group">
  const url = window.location.origin;
            <select id="specificOption" class="maps__select">
  const dzCard = document.getElementById('dz-card');
                <option value="">Selecione uma opção</option>
  const today = new Date();
            </select>
  let actualWeekNumber = today.getWeekNumber();
            <label class="maps__label" for="specificOption">Local do X</label>
        </div>


        <div class="filter-container">
  // Verificar se é sexta-feira (dia 5) e se passou das 7 da manhã
            <input type="checkbox" id="enableFilter">
  const isFridayAfter7AM = today.getDay() === 5 && today.getHours() >= 7;
            <label for="enableFilter" class="filter-label">Ativar filtro</label>
        </div>


        <div id="filterSection" class="hidden">
  // Se for sexta-feira depois das 7 da manhã, incrementa o número da semana
            <div id="filterById" class="input-group">
  if (isFridayAfter7AM) {
                <label for="filterOption" class="maps__label">Filtrar Por</label>
    actualWeekNumber++;
                <select id="filterOption" class="maps__select">
  }
                    <option value="">Escolha uma Opção</option>
                    <option value="number">Filtrar por Número</option>
                    <option value="tag">Filtrar por Tag</option>
                </select>
                <input type="text" id="searchIds" placeholder="Digite os números ou tags separados por vírgula" class="mapsCalc__select">
            </div>
           
            <div class="d-flex">
                <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="mapContainer" class="hidden">
  const dzWeeks = [
            <!-- As imagens e suas informações serão exibidas aqui -->
    { name: 'Décima segunda semana', image: '/images/1/11/Card_DZ_D%C3%A9cima-Segunda-Semana.png' },
        </div>
    { name: 'Primeira semana', image: '/images/b/b2/Card_DZ_Primeira-Semana.png' },
    { name: 'Segunda semana', image: '/images/9/97/Card_DZ_Segunda-Semana.png' },
    { name: 'Terceira semana', image: '/images/f/fd/Card_DZ_Terceira-Semana.png' },
    { name: 'Quarta semana', image: '/images/1/17/Card_DZ_Quarta-Semana.png' },
    { name: 'Quinta semana', image: '/images/4/40/Card_DZ_Quinta-Semana.png' },
    { name: 'Sexta semana', image: '/images/2/23/Card_DZ_Sexta-Semana.png' },
    { name: 'Sétima semana', image: '/images/f/f2/Card_DZ_S%C3%A9tima-Semana.png' },
    { name: 'Oitava semana', image: '/images/9/97/Card_DZ_Oitava-Semana.png' },
    { name: 'Nona semana', image: '/images/b/b3/Card_DZ_Nona-Semana.png' },
    { name: 'Décima semana', image: '/images/3/30/Card_DZ_D%C3%A9cima-Semana.png' },
    { name: 'Décima primeira semana', image: '/images/4/49/Card_DZ_D%C3%A9cima-Primeira-Semana.png' },
  ];


        <div id="imageContainer" class="hidden">
  // Ajuste para garantir que a "Décima segunda semana" seja a primeira exibida
            <!-- As imagens e suas informações serão exibidas aqui -->
  let weekIndex = actualWeekNumber % 12;
        </div>


        <div class="d-flex">
  // Exibir a imagem correspondente à semana
            <button type="button" id="showSelectedMaps" class="hover-minimize">
  dzCard.src = url + dzWeeks[weekIndex].image;
                <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão exibir mapas selecionados">
  dzCard.alt = dzWeeks[weekIndex].name;
            </button>
});
            <button type="button" id="clearSelectedMaps" class="hover-minimize">
</script>
                <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão limpar seleção">
            </button>
        </div>
    </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' }
                ],
            },
            2: { // Adicione os dados para o Mapa Verde aqui
                'Grama': [
                    { id: '201', local: 'Verde Valley', coordinates: '5000, 5000, 7', tags:['Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/2/23/Mapas_de_ADV_VERDE_-_5000%2C_5000%2C_7.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' }
                ]
            }
        };
 
        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}" />
                    <div>
                        <p><b>Local:</b> ${map.local}</p>
                        <p><b>Coordenadas:</b> ${map.coordinates}</p>
                        <p><b>Tags:</b> ${map.tags.join(', ')}</p>
                    </div>
                `;
                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();
        }
 
        function updateSpecificOptions() {
            const mapType = document.getElementById('mapType').value;
            const specificOptionSelect = document.getElementById('specificOption');
            specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>'; // Reset options
            if (mapType && specificOptions[mapType]) {
                Object.keys(specificOptions[mapType]).forEach(option => {
                    const optionElement = document.createElement('option');
                    optionElement.value = option;
                    optionElement.textContent = option;
                    specificOptionSelect.appendChild(optionElement);
                });
                document.getElementById('specificOptions').classList.remove('hidden');
            } else {
                document.getElementById('specificOptions').classList.add('hidden');
            }
        }
 
        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}" />
                        <div>
                            <p><b>Local:</b> ${map.local}</p>
                            <p><b>Coordenadas:</b> ${map.coordinates}</p>
                            <p><b>Tags:</b> ${map.tags.join(', ')}</p>
                        </div>
                    `;
 
                    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}" />
                    <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);
            });
 
            mapContainer.classList.remove('hidden');
        }
 
        document.getElementById('filterButton').addEventListener('click', filterMaps);
 
        // Inicialize as opções específicas no carregamento da página
        updateSpecificOptions();
    </script>
</body>
</html>

Edição atual tal como às 15h45min de 7 de setembro de 2024

<script> document.addEventListener('DOMContentLoaded', function () { 

 Date.prototype.getWeekNumber = function () {
   let d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
   let dayNum = d.getUTCDay() || 7; // Garante que domingo (0) seja o último dia da semana
   let yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
   return Math.ceil((((d - yearStart) / 86400000) + 1) / 7); // Calcula o número da semana
 };

 const url = window.location.origin;
 const dzCard = document.getElementById('dz-card');
 const today = new Date();
 let actualWeekNumber = today.getWeekNumber();

 // Verificar se é sexta-feira (dia 5) e se passou das 7 da manhã
 const isFridayAfter7AM = today.getDay() === 5 && today.getHours() >= 7;

 // Se for sexta-feira depois das 7 da manhã, incrementa o número da semana
 if (isFridayAfter7AM) {
   actualWeekNumber++;
 }

 const dzWeeks = [
   { name: 'Décima segunda semana', image: '/images/1/11/Card_DZ_D%C3%A9cima-Segunda-Semana.png' },
   { name: 'Primeira semana', image: '/images/b/b2/Card_DZ_Primeira-Semana.png' },
   { name: 'Segunda semana', image: '/images/9/97/Card_DZ_Segunda-Semana.png' },
   { name: 'Terceira semana', image: '/images/f/fd/Card_DZ_Terceira-Semana.png' },
   { name: 'Quarta semana', image: '/images/1/17/Card_DZ_Quarta-Semana.png' },
   { name: 'Quinta semana', image: '/images/4/40/Card_DZ_Quinta-Semana.png' },
   { name: 'Sexta semana', image: '/images/2/23/Card_DZ_Sexta-Semana.png' },
   { name: 'Sétima semana', image: '/images/f/f2/Card_DZ_S%C3%A9tima-Semana.png' },
   { name: 'Oitava semana', image: '/images/9/97/Card_DZ_Oitava-Semana.png' },
   { name: 'Nona semana', image: '/images/b/b3/Card_DZ_Nona-Semana.png' },
   { name: 'Décima semana', image: '/images/3/30/Card_DZ_D%C3%A9cima-Semana.png' },
   { name: 'Décima primeira semana', image: '/images/4/49/Card_DZ_D%C3%A9cima-Primeira-Semana.png' },
 ];

 // Ajuste para garantir que a "Décima segunda semana" seja a primeira exibida
 let weekIndex = actualWeekNumber % 12;

 // Exibir a imagem correspondente à semana
 dzCard.src = url + dzWeeks[weekIndex].image;
 dzCard.alt = dzWeeks[weekIndex].name;

}); </script>

Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:Test3&oldid=86839”