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
 
(163 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 () {
  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
  };


<head>
  const url = window.location.origin;
    <meta charset="UTF-8">
  const dzCard = document.getElementById('dz-card');
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  const today = new Date();
    <title>Seleção e Exibição de Imagens</title>
  let actualWeekNumber = today.getWeekNumber();
    <style>
        /* Estilos mantidos conforme necessário */
        .d-flex { /* seu código */ }
        .hidden { /* seu código */ }
        .image-container { /* seu código */ }
        .image-container img { /* seu código */ }
        .image-info { /* seu código */ }
        select, input[type="text"], button { /* seu código */ }
        #filterButton, #searchButton { /* seu código */ }
        #filterButton img, #searchButton img { /* seu código */ }
        .mw-body-content { /* seu código */ }
        .mw-parser-output { /* seu código */ }
        .input-group { /* seu código */ }
        .input-group label { /* seu código */ }
        .maps__select { /* seu código */ }
        .input-group input[type="text"] { /* seu código */ }
        .maps__label { /* seu código */ }
        .hover-minimize:hover { /* seu código */ }
        .filter-container { /* seu código */ }
        .filter-container input[type="checkbox"] { /* seu código */ }
        .filter-label { /* seu código */ }
    </style>
</head>


<body>
  // Verificar se é sexta-feira (dia 5) e se passou das 7 da manhã
    <form id="mapForm">
  const isFridayAfter7AM = today.getDay() === 5 && today.getHours() >= 7;
        <!-- Outros elementos do formulário mantidos -->
        <div id="mapTypeSelection" class="input-group">
            <!-- seu código -->
        </div>


        <div id="specificOptions" class="hidden input-group">
  // Se for sexta-feira depois das 7 da manhã, incrementa o número da semana
            <!-- seu código -->
  if (isFridayAfter7AM) {
        </div>
    actualWeekNumber++;
       
  }
        <div class="filter-container">
            <input type="checkbox" id="enableFilter">
            <label for="enableFilter" class="filter-label">Ativar filtro</label>
        </div>
       
        <div id="filterSection" class="hidden">
            <div id="filterById" class="input-group">
                <label for="filterOption" class="maps__label">Filtrar Por</label>
                <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>
            </div>


            <div id="tagCheckboxes" class="input-group hidden">
  const dzWeeks = [
                <!-- Checkboxes serão gerados 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 class="d-flex justify-center align-center flex-column">
  // Ajuste para garantir que a "Décima segunda semana" seja a primeira exibida
                <button type="button" id="filterButton" class="hover-minimize">
  let weekIndex = actualWeekNumber % 12;
                    <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">
  // Exibir a imagem correspondente à semana
            <!-- As imagens e suas informações serão exibidas aqui -->
  dzCard.src = url + dzWeeks[weekIndex].image;
        </div>
  dzCard.alt = dzWeeks[weekIndex].name;
    </form>
});
 
</script>
    <script>
        const specificOptions = {
            // Seu código para specificOptions
        };
 
        document.getElementById('enableFilter').addEventListener('change', function () {
            const filterSection = document.getElementById('filterSection');
            if (this.checked) {
                filterSection.classList.remove('hidden');
            } else {
                filterSection.classList.add('hidden');
            }
        });
 
        document.getElementById('filterOption').addEventListener('change', function () {
            const selectedOption = this.value;
            const tagCheckboxes = document.getElementById('tagCheckboxes');
 
            if (selectedOption === 'tag') {
                const selectedMapType = document.getElementById('mapType').value;
                const specificOption = document.getElementById('specificOption').value;
               
                if (selectedMapType && specificOption) {
                    tagCheckboxes.innerHTML = ''; // Limpa as checkboxes anteriores
 
                    const images = specificOptions[selectedMapType][specificOption];
                    const tags = new Set(); // Usado para evitar tags duplicadas
 
                    images.forEach(image => {
                        image.tags.forEach(tag => tags.add(tag));
                    });
 
                    tags.forEach(tag => {
                        const checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.value = tag;
                        checkbox.id = `tag_${tag}`;
 
                        const label = document.createElement('label');
                        label.htmlFor = `tag_${tag}`;
                        label.textContent = tag;
 
                        tagCheckboxes.appendChild(checkbox);
                        tagCheckboxes.appendChild(label);
                        tagCheckboxes.appendChild(document.createElement('br'));
                    });
 
                    tagCheckboxes.classList.remove('hidden');
                }
            } else {
                tagCheckboxes.classList.add('hidden');
            }
        });
 
        document.getElementById('filterButton').addEventListener('click', function () {
            const selectedMapType = document.getElementById('mapType').value;
            const specificOption = document.getElementById('specificOption').value;
            const selectedOption = document.getElementById('filterOption').value;
            const imageContainer = document.getElementById('imageContainer');
 
            if (selectedOption === 'tag') {
                const checkboxes = document.querySelectorAll('#tagCheckboxes input[type="checkbox"]:checked');
                const selectedTags = Array.from(checkboxes).map(checkbox => checkbox.value);
 
                if (selectedTags.length > 0 && selectedMapType && specificOption) {
                    const images = specificOptions[selectedMapType][specificOption].filter(image => {
                        return selectedTags.every(tag => image.tags.includes(tag));
                    });
 
                    imageContainer.innerHTML = ''; // Limpa as imagens anteriores
 
                    if (images.length > 0) {
                        images.forEach(image => {
                            const imageItem = document.createElement('div');
                            imageItem.className = 'image-item';
 
                            const img = document.createElement('img');
                            img.src = image.imageUrl;
                            img.alt = image.local;
 
                            const info = document.createElement('div');
                            info.className = 'image-info';
                            info.textContent = `${image.local} (${image.coordinates}) - Tags: ${image.tags.join(', ')}`;
 
                            imageItem.appendChild(img);
                            imageItem.appendChild(info);
                            imageContainer.appendChild(imageItem);
                        });
 
                        imageContainer.classList.remove('hidden');
                    } else {
                        imageContainer.innerHTML = 'Nenhum mapa encontrado com essas tags.';
                        imageContainer.classList.remove('hidden');
                    }
                }
            } else if (selectedOption === 'number') {
                // Implementação existente para números
            }
        });
    </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”