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
 
(169 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: {
                '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' }
                ]
            }
        };
        function updateSpecificOptions() {
            const mapType = document.getElementById('mapType').value;
            const specificOptionsSelect = document.getElementById('specificOption');
            specificOptionsSelect.innerHTML = '<option value="">Selecione uma opção</option>';
 
            if (mapType && specificOptions[mapType]) {
                const options = Object.keys(specificOptions[mapType]);
                options.forEach(option => {
                    specificOptionsSelect.innerHTML += `<option value="${option}">${option}</option>`;
                });
                document.getElementById('specificOptions').classList.remove('hidden');
            } else {
                document.getElementById('specificOptions').classList.add('hidden');
            }
 
            // Limpar a visualização de imagens quando a opção muda
            document.getElementById('mapContainer').innerHTML = '';
        }
 
        function displayMaps() {
            const mapType = document.getElementById('mapType').value;
            const specificOption = document.getElementById('specificOption').value;
            const mapContainer = document.getElementById('mapContainer');
            mapContainer.innerHTML = '';
 
            if (mapType && specificOptions[mapType] && specificOption) {
                const maps = specificOptions[mapType][specificOption];
                maps.forEach(map => {
                    const mapDiv = document.createElement('div');
                    mapDiv.classList.add('image-item');
                   
                    const img = document.createElement('img');
                    img.src = map.imageUrl;
                    img.alt = `Mapa ${map.id}`;
                    img.dataset.mapId = map.id;
                    img.addEventListener('click', () => toggleSelection(map.id, img));
                   
                    const details = document.createElement('div');
                    details.innerHTML = `
                        <p>ID: ${map.id}</p>
                        <p>Local: ${map.local}</p>
                        <p>Coordenadas: ${map.coordinates}</p>
                        <p>Tags: ${map.tags.join(', ')}</p>
                    `;
                   
                    mapDiv.appendChild(img);
                    mapDiv.appendChild(details);
                    mapContainer.appendChild(mapDiv);
                });
                mapContainer.classList.remove('hidden');
            } else {
                mapContainer.classList.add('hidden');
            }
        }
 
        function toggleSelection(mapId, imgElement) {
            const selectedMaps = JSON.parse(localStorage.getItem('selectedMaps')) || [];
            const index = selectedMaps.indexOf(mapId);
 
            if (index === -1) {
                selectedMaps.push(mapId);
                imgElement.src = 'https://wiki.pokexgames.com/images/2/2d/Comvip.png'; // Imagem selecionado
            } else {
                selectedMaps.splice(index, 1);
                imgElement.src = 'https://wiki.pokexgames.com/images/2/26/Semvip.png'; // Imagem não selecionado
            }
 
            localStorage.setItem('selectedMaps', JSON.stringify(selectedMaps));
        }
 
        function loadSelectedMaps() {
            const selectedMaps = JSON.parse(localStorage.getItem('selectedMaps')) || [];
            const mapImages = document.querySelectorAll('#mapContainer img');
 
            mapImages.forEach(img => {
                if (selectedMaps.includes(img.dataset.mapId)) {
                    img.src = 'https://wiki.pokexgames.com/images/2/2d/Comvip.png'; // Imagem selecionado
                }
            });
        }
 
        function applyFilter() {
            const filterOption = document.getElementById('filterOption').value;
            const searchIds = document.getElementById('searchIds').value.trim();
            const mapType = document.getElementById('mapType').value;
            const specificOption = document.getElementById('specificOption').value;
            const mapContainer = document.getElementById('mapContainer');
            mapContainer.innerHTML = '';
 
            if (filterOption === 'number' && searchIds) {
                const ids = searchIds.split(',').map(id => id.trim());
                const maps = specificOptions[mapType] && specificOptions[mapType][specificOption];
                const filteredMaps = maps.filter(map => ids.includes(map.id));
                filteredMaps.forEach(map => {
                    displayMap(map);
                });
            } else if (filterOption === 'tag' && searchIds) {
                const tags = searchIds.split(',').map(tag => tag.trim().toLowerCase());
                const maps = specificOptions[mapType] && specificOptions[mapType][specificOption];
                const filteredMaps = maps.filter(map => tags.some(tag => map.tags.map(t => t.toLowerCase()).includes(tag)));
                filteredMaps.forEach(map => {
                    displayMap(map);
                });
            }
        }
 
        function displayMap(map) {
            const mapContainer = document.getElementById('mapContainer');
            const mapDiv = document.createElement('div');
            mapDiv.classList.add('image-item');
           
            const img = document.createElement('img');
            img.src = map.imageUrl;
            img.alt = `Mapa ${map.id}`;
            img.dataset.mapId = map.id;
            img.addEventListener('click', () => toggleSelection(map.id, img));
           
            const details = document.createElement('div');
            details.innerHTML = `
                <p>ID: ${map.id}</p>
                <p>Local: ${map.local}</p>
                <p>Coordenadas: ${map.coordinates}</p>
                <p>Tags: ${map.tags.join(', ')}</p>
            `;
           
            mapDiv.appendChild(img);
            mapDiv.appendChild(details);
            mapContainer.appendChild(mapDiv);
        }
 
        document.getElementById('mapType').addEventListener('change', () => {
            updateSpecificOptions();
            displayMaps();
        });
 
        document.getElementById('specificOption').addEventListener('change', displayMaps);
        document.getElementById('filterButton').addEventListener('click', applyFilter);
        document.getElementById('showSelectedMaps').addEventListener('click', loadSelectedMaps);
        document.getElementById('clearSelectedMaps').addEventListener('click', () => {
            localStorage.removeItem('selectedMaps');
            loadSelectedMaps();
        });
 
        document.getElementById('enableFilter').addEventListener('change', (event) => {
            const isChecked = event.target.checked;
            document.getElementById('filterSection').classList.toggle('hidden', !isChecked);
            document.getElementById('searchIds').value = '';
            if (!isChecked) {
                applyFilter();
            }
        });
 
        // Inicialize a exibição dos mapas selecionados ao carregar a página
        document.addEventListener('DOMContentLoaded', loadSelectedMaps);
    </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”