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
 
(151 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
        /* Estilos para exibição das tags */
  };
        .tag-checkbox {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        .tag-checkbox label {
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-right: 15px;
        }
        .tag-checkbox input[type="checkbox"] {
            margin-right: 5px;
        }
        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 5px;
        }
        .image-container .image-item {
            flex: 1 0 30%;
            text-align: center;
        }
        .image-container img {
            object-fit: cover;
            margin-bottom: 5px;
        }
        .image-info {
            margin-top: 5px;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
     <form id="mapForm">
        <!-- Seleção de Tipo de Mapa -->
        <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>


        <!-- Seleção de Opção Específica -->
  const url = window.location.origin;
        <div id="specificOptions" class="hidden input-group">
  const dzCard = document.getElementById('dz-card');
            <select id="specificOption" class="maps__select">
  const today = new Date();
                <option value="">Selecione uma opção</option>
  let actualWeekNumber = today.getWeekNumber();
                <option value="Areia">Areia</option>
                <option value="Gelo">Gelo</option>
                <option value="Grama">Grama</option>
                <option value="Pedra">Pedra</option>
                <option value="Subaquático">Subaquático</option>
                <option value="Terra">Terra</option>
                <option value="Pisos">Pisos</option>
            </select>
            <label class="maps__label" for="specificOption">Local do X</label>
        </div>
       
        <!-- Ativar Filtro -->
        <div class="filter-container">
            <input type="checkbox" id="enableFilter">
            <label for="enableFilter" class="filter-label">Ativar filtro</label>
        </div>
       
        <!-- Seção de Filtros -->
        <div id="filterSection" class="hidden">
            <div id="filterByTag" class="input-group">
                <label for="filterOption" class="maps__label">Filtrar Por Tag</label>
                <div class="tag-checkbox">
                    <label><input type="checkbox" value="Areia"> Areia</label>
                    <label><input type="checkbox" value="Grama"> Grama</label>
                    <label><input type="checkbox" value="Gelo"> Gelo</label>
                    <label><input type="checkbox" value="Árvore"> Árvore</label>
                    <label><input type="checkbox" value="Pedra"> Pedra</label>
                    <label><input type="checkbox" value="Terra"> Terra</label>
                    <label><input type="checkbox" value="Piso"> Piso</label>
                    <label><input type="checkbox" value="Construção"> Construção</label>
                    <label><input type="checkbox" value="Pântano"> Pântano</label>
                    <label><input type="checkbox" value="Pirâmide"> Pirâmide</label>
                    <label><input type="checkbox" value="Fogo"> Fogo</label>
                    <label><input type="checkbox" value="Água"> Água</label>
                </div>
            </div>
           
            <div class="d-flex justify-center align-center flex-column">
                <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>


        <!-- Contêiner de Imagens -->
  // Verificar se é sexta-feira (dia 5) e se passou das 7 da manhã
        <div id="imageContainer" class="image-container hidden">
  const isFridayAfter7AM = today.getDay() === 5 && today.getHours() >= 7;
            <!-- As imagens e suas informações serão exibidas aqui -->
        </div>
    </form>


    <script>
  // Se for sexta-feira depois das 7 da manhã, incrementa o número da semana
        const specificOptions = {
  if (isFridayAfter7AM) {
            1: {
    actualWeekNumber++;
                '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' }
                ],
                'Gelo': [
                    { id: '201', local: 'Ice Cave', coordinates: '3831, 3270, 7', tags:['Gelo'], imageUrl: 'https://wiki.pokexgames.com/images/6/67/Mapas_de_ADV_VERDE_-_3831%2C_3270%2C_7.webp' }
                ],
                'Grama': [
                    { id: '301', local: 'Green Fields', coordinates: '3950, 3200, 7', tags:['Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/7/7d/Mapas_de_ADV_VERDE_-_3950%2C_3200%2C_7.webp' }
                ]
            },
            2: {
                'Areia': [
                    { id: '104', local: 'Tropical Beach', coordinates: '3650, 3280, 7', tags:['Areia'], imageUrl: 'https://wiki.pokexgames.com/images/8/8c/Mapas_de_ADV_VERDE_-_3650%2C_3280%2C_7.webp' }
                ]
            }
        };


        function updateFilters() {
  const dzWeeks = [
            const mapType = document.getElementById('mapType').value;
    { name: 'Décima segunda semana', image: '/images/1/11/Card_DZ_D%C3%A9cima-Segunda-Semana.png' },
            const specificOption = document.getElementById('specificOption').value;
    { name: 'Primeira semana', image: '/images/b/b2/Card_DZ_Primeira-Semana.png' },
            const imageContainer = document.getElementById('imageContainer');
    { name: 'Segunda semana', image: '/images/9/97/Card_DZ_Segunda-Semana.png' },
           
    { name: 'Terceira semana', image: '/images/f/fd/Card_DZ_Terceira-Semana.png' },
            let filteredImages = [];
    { name: 'Quarta semana', image: '/images/1/17/Card_DZ_Quarta-Semana.png' },
           
    { name: 'Quinta semana', image: '/images/4/40/Card_DZ_Quinta-Semana.png' },
            if (mapType && specificOptions[mapType]) {
    { name: 'Sexta semana', image: '/images/2/23/Card_DZ_Sexta-Semana.png' },
                const selectedOptions = specificOptions[mapType];
    { 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' },
                if (specificOption) {
    { name: 'Nona semana', image: '/images/b/b3/Card_DZ_Nona-Semana.png' },
                    filteredImages = selectedOptions[specificOption] || [];
    { name: 'Décima semana', image: '/images/3/30/Card_DZ_D%C3%A9cima-Semana.png' },
                } else {
    { name: 'Décima primeira semana', image: '/images/4/49/Card_DZ_D%C3%A9cima-Primeira-Semana.png' },
                    // If no specific option is selected, get all maps for the selected type
  ];
                    for (const key in selectedOptions) {
                        filteredImages = filteredImages.concat(selectedOptions[key]);
                    }
                }
               
                imageContainer.innerHTML = '';
                filteredImages.forEach(item => {
                    const div = document.createElement('div');
                    div.classList.add('image-item');
                    div.innerHTML = `
                        <img src="${item.imageUrl}" alt="Imagem do Mapa" />
                        <div class="image-info">
                            <p>ID: ${item.id}</p>
                            <p>Local: ${item.local}</p>
                            <p>Coordenadas: ${item.coordinates}</p>
                            <p>Tags: ${item.tags.join(', ')}</p>
                        </div>
                    `;
                    imageContainer.appendChild(div);
                });
                imageContainer.classList.remove('hidden');
            } else {
                imageContainer.innerHTML = '';
                imageContainer.classList.add('hidden');
            }
        }


        document.getElementById('mapType').addEventListener('change', function() {
  // Ajuste para garantir que a "Décima segunda semana" seja a primeira exibida
            document.getElementById('specificOptions').classList.remove('hidden');
  let weekIndex = actualWeekNumber % 12;
            updateFilters();
        });


        document.getElementById('specificOption').addEventListener('change', function() {
  // Exibir a imagem correspondente à semana
            updateFilters();
  dzCard.src = url + dzWeeks[weekIndex].image;
        });
  dzCard.alt = dzWeeks[weekIndex].name;
 
});
        document.getElementById('enableFilter').addEventListener('change', function() {
</script>
            const isChecked = this.checked;
            document.getElementById('filterSection').classList.toggle('hidden', !isChecked);
        });
 
        document.getElementById('filterButton').addEventListener('click', function() {
            // Função de filtro por número e tag
        });
 
        function updateTags() {
            const filterByTag = document.getElementById('filterByTag');
            const tagCheckboxes = filterByTag.querySelectorAll('input[type="checkbox"]');
           
            tagCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateFilters();
                });
            });
        }
 
        updateTags();
    </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”