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
 
(123 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>Filtro de Mapas</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
        .hidden { display: none; }
  };
        .tag-button.selected { background-color: lightblue; }
        .image-item { margin-bottom: 10px; }
        .image-item img { max-width: 200px; }
        .filter-section, .tag-section { margin-bottom: 20px; }
     </style>
</head>
<body>
     <div class="filter-section">
        <label for="mapType">Tipo de Mapa:</label>
        <select id="mapType">
            <option value="">Selecione um Tipo de Mapa</option>
            <option value="1">Tipo 1</option>
            <!-- Adicione outros tipos de mapas aqui -->
        </select>
       
        <label for="specificOption">Local do X:</label>
        <select id="specificOption">
            <option value="">Selecione um Local do X</option>
            <!-- As opções serão preenchidas dinamicamente -->
        </select>
    </div>


    <div id="tagSection" class="tag-section hidden">
  const url = window.location.origin;
        <label>Selecione as Tags:</label>
  const dzCard = document.getElementById('dz-card');
        <div id="tagButtons"></div>
  const today = new Date();
    </div>
  let actualWeekNumber = today.getWeekNumber();


    <button id="filterButton" class="hidden">Filtrar</button>
  // Verificar se é sexta-feira (dia 5) e se passou das 7 da manhã
  const isFridayAfter7AM = today.getDay() === 5 && today.getHours() >= 7;


     <div id="imageContainer" class="hidden"></div>
  // Se for sexta-feira depois das 7 da manhã, incrementa o número da semana
  if (isFridayAfter7AM) {
     actualWeekNumber++;
  }


    <script>
  const dzWeeks = [
        const specificOptions = {
    { name: 'Décima segunda semana', image: '/images/1/11/Card_DZ_D%C3%A9cima-Segunda-Semana.png' },
            1: {
    { name: 'Primeira semana', image: '/images/b/b2/Card_DZ_Primeira-Semana.png' },
                'Areia': [
    { name: 'Segunda semana', image: '/images/9/97/Card_DZ_Segunda-Semana.png' },
                    { 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' },
    { name: 'Terceira semana', image: '/images/f/fd/Card_DZ_Terceira-Semana.png' },
                    { 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' },
    { name: 'Quarta semana', image: '/images/1/17/Card_DZ_Quarta-Semana.png' },
                    { 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' },
    { name: 'Quinta semana', image: '/images/4/40/Card_DZ_Quinta-Semana.png' },
                    { 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' },
    { name: 'Sexta semana', image: '/images/2/23/Card_DZ_Sexta-Semana.png' },
                    { id: '105', local: 'Hurricane Island', coordinates: '3750, 3450, 7', tags: ['Areia', 'Grama'], imageUrl: 'https://wiki.pokexgames.com/images/6/6b/Mapas_de_ADV_VERMELHO_-_3750%2C_3450%2C_7.webp' }
    { 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' },
                'Gelo': [
    { name: 'Nona semana', image: '/images/b/b3/Card_DZ_Nona-Semana.png' },
                    { id: '201', local: 'Snowy Hill', coordinates: '3050, 3575, 7', tags: ['Gelo', 'Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/a/aa/Mapas_de_ADV_VERMELHO_-_3050%2C_3575%2C_7.webp' },
    { name: 'Décima semana', image: '/images/3/30/Card_DZ_D%C3%A9cima-Semana.png' },
                    { id: '202', local: 'Frozen Lake', coordinates: '2900, 3400, 7', tags: ['Gelo', 'Água'], imageUrl: 'https://wiki.pokexgames.com/images/2/2a/Mapas_de_ADV_VERMELHO_-_2900%2C_3400%2C_7.webp' }
    { name: 'Décima primeira semana', image: '/images/4/49/Card_DZ_D%C3%A9cima-Primeira-Semana.png' },
                ],
  ];
                // Adicione outros tipos de mapas e locais aqui
            }
        };


        // Atualiza o dropdown de opções baseado no Tipo de Mapa selecionado
  // Ajuste para garantir que a "Décima segunda semana" seja a primeira exibida
        function updateSpecificOptions() {
  let weekIndex = actualWeekNumber % 12;
            const mapType = document.getElementById('mapType').value;
            const specificOptionSelect = document.getElementById('specificOption');
            specificOptionSelect.innerHTML = '<option value="">Selecione um Local do X</option>'; // Limpa e define opção padrão


            if (mapType) {
  // Exibir a imagem correspondente à semana
                const options = Object.keys(specificOptions[mapType]);
  dzCard.src = url + dzWeeks[weekIndex].image;
                options.forEach(option => {
  dzCard.alt = dzWeeks[weekIndex].name;
                    const opt = document.createElement('option');
});
                    opt.value = option;
</script>
                    opt.textContent = option;
                    specificOptionSelect.appendChild(opt);
                });
            }
            document.getElementById('tagSection').classList.add('hidden');
            document.getElementById('imageContainer').classList.add('hidden');
        }
 
        // Atualiza o dropdown de tags baseado no Tipo de Mapa e Local do X selecionados
        function updateTagButtons() {
            const mapType = document.getElementById('mapType').value;
            const specificOption = document.getElementById('specificOption').value;
            const tagButtonsContainer = document.getElementById('tagButtons');
 
            tagButtonsContainer.innerHTML = '';
 
            if (mapType && specificOption) {
                const tags = specificOptions[mapType][specificOption].map(option => option.tags).flat();
                const uniqueTags = [...new Set(tags)];
 
                uniqueTags.forEach(tag => {
                    const button = document.createElement('button');
                    button.classList.add('tag-button');
                    button.textContent = tag;
                    tagButtonsContainer.appendChild(button);
                });
 
                document.getElementById('tagSection').classList.remove('hidden');
                document.getElementById('filterButton').classList.remove('hidden');
            } else {
                document.getElementById('tagSection').classList.add('hidden');
                document.getElementById('filterButton').classList.add('hidden');
            }
        }
 
        // Atualiza o estado dos botões de tags ao selecionar uma tag
        function toggleTagButton(e) {
            if (e.target.classList.contains('tag-button')) {
                e.target.classList.toggle('selected');
                filterImages();
            }
        }
 
        // Filtra as imagens baseadas no Tipo de Mapa, Local do X e Tags selecionadas
        function filterImages() {
            const mapType = document.getElementById('mapType').value;
            const specificOption = document.getElementById('specificOption').value;
            const selectedTags = Array.from(document.querySelectorAll('.tag-button.selected')).map(button => button.textContent);
 
            const imageContainer = document.getElementById('imageContainer');
            imageContainer.innerHTML = '';
 
            if (mapType && specificOption) {
                const images = specificOptions[mapType][specificOption] || [];
 
                const filteredImages = images.filter(image => {
                    if (selectedTags.length > 0) {
                        return selectedTags.some(tag => image.tags.includes(tag));
                    }
                    return true;
                });
 
                filteredImages.forEach(image => {
                    const div = document.createElement('div');
                    div.classList.add('image-item');
                    div.innerHTML = `
                        <img src="${image.imageUrl}" alt="Imagem do Mapa">
                        <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.tags.join(', ') || 'Nenhuma'}
                        </div>
                    `;
                    imageContainer.appendChild(div);
                });
 
                imageContainer.classList.remove('hidden');
            } else {
                imageContainer.classList.add('hidden');
            }
        }
 
        // Inicializa os eventos
        document.getElementById('mapType').addEventListener('change', () => {
            updateSpecificOptions();
            updateTagButtons();
        });
        document.getElementById('specificOption').addEventListener('change', updateTagButtons);
        document.getElementById('filterButton').addEventListener('click', filterImages);
        document.getElementById('tagButtons').addEventListener('click', toggleTagButton);
    </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”