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
 
(170 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 => {
                    const opt = document.createElement('option');
                    opt.value = option;
                    opt.textContent = option;
                    specificOptionsSelect.appendChild(opt);
                });
                document.getElementById('specificOptions').classList.remove('hidden');
            } else {
                document.getElementById('specificOptions').classList.add('hidden');
            }
 
            // Clear map container
            document.getElementById('mapContainer').innerHTML = '';
        }
 
        function filterMaps() {
            const mapType = document.getElementById('mapType').value;
            const specificOption = document.getElementById('specificOption').value;
            const searchIds = document.getElementById('searchIds').value.toLowerCase().split(',').map(id => id.trim());
            const enableFilter = document.getElementById('enableFilter').checked;
            const filterBy = document.getElementById('filterOption').value;
 
            let filteredMaps = [];
            if (mapType && specificOptions[mapType]) {
                const maps = specificOptions[mapType][specificOption] || [];
 
                filteredMaps = maps.filter(map => {
                    if (filterBy === 'number') {
                        return searchIds.includes(map.id.toLowerCase());
                    } else if (filterBy === 'tag') {
                        return searchIds.every(tag => map.tags.map(t => t.toLowerCase()).includes(tag));
                    } else {
                        return true;
                    }
                });
            }
 
            // Render the filtered maps
            renderMaps(filteredMaps);
        }
 
        function renderMaps(maps) {
            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}" class="map-image">
                    <div>
                        <p><b>Local:</b> ${map.local}</p>
                        <p><b>Coordenadas:</b> ${map.coordinates}</p>
                        <p><b>Tags:</b> ${map.tags.join(', ')}</p>
                        <p><b>Como Obter:</b> <a href="URL">Texto do Link</a></p>
                    </div>
                `;
                mapContainer.appendChild(mapDiv);
            });
 
            mapContainer.classList.remove('hidden');
        }
 
        document.getElementById('mapType').addEventListener('change', updateSpecificOptions);
        document.getElementById('specificOption').addEventListener('change', filterMaps);
        document.getElementById('filterButton').addEventListener('click', filterMaps);
        document.getElementById('enableFilter').addEventListener('change', () => {
            document.getElementById('filterSection').classList.toggle('hidden', !document.getElementById('enableFilter').checked);
        });
    </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”