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
 
(60 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
        .hidden {
  };
            display: none;
        }
        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }
        .image-item {
            flex: 1 0 30%;
            text-align: center;
        }
        .image-item img {
            max-width: 100%;
            height: auto;
            margin-bottom: 5px;
        }
        .input-group {
            margin: 10px 0;
        }
        .maps__select {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .tag-button {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 20px;
            padding: 5px 15px;
            font-size: 14px;
            cursor: pointer;
            margin: 5px;
            transition: background-color 0.3s, color 0.3s;
        }
        .tag-button.selected {
            background-color: #007bff;
            color: #fff;
        }
        .tag-button.disabled {
            background-color: #e0e0e0;
            color: #a0a0a0;
            border-color: #d0d0d0;
            cursor: not-allowed;
        }
    </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 for="mapType">Tipo de Mapa</label>
        </div>
        <div id="specificOptions" class="hidden input-group">
            <select id="specificOption" class="maps__select">
                <option value="">Selecione uma opção</option>
                <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 for="specificOption">Local do X</label>
        </div>
        <div class="input-group">
            <input type="checkbox" id="enableFilter">
            <label for="enableFilter">Ativar filtro</label>
        </div>
        <div id="filterSection" class="hidden input-group">
            <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="maps__select">
            <button type="button" id="filterButton">Filtrar</button>
        </div>
        <div id="imageContainer" class="image-container hidden"></div>
        <div id="tagButtonsContainer" class="input-group">
            <!-- Botões de tags serão inseridos aqui pelo JavaScript -->
        </div>
    </form>


    <script>
  const url = window.location.origin;
        const specificOptions = {
  const dzCard = document.getElementById('dz-card');
            1: {
  const today = new Date();
                'Areia': [
  let actualWeekNumber = today.getWeekNumber();
                    { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', tags: ['Areia'], 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'], imageUrl: 'https://wiki.pokexgames.com/images/5/58/Mapas_de_ADV_VERMELHO_-_3969%2C_3300%2C_7.webp' }
                ],
                'Gelo': [
                    { id: '103', local: 'Snowy Mountain', coordinates: '3500, 3400, 7', tags: ['Gelo'], imageUrl: 'https://wiki.pokexgames.com/images/7/74/Mapas_de_ADV_VERDE_-_3500%2C_3400%2C_7.webp' }
                ]
            },
            2: {
                'Grama': [
                    { id: '104', local: 'Green Forest', coordinates: '3000, 3100, 7', tags: ['Grama'], imageUrl: 'https://wiki.pokexgames.com/images/9/94/Mapas_de_ADV_VERDE_-_3000%2C_3100%2C_7.webp' }
                ],
                'Pedra': [
                    { id: '105', local: 'Rocky Terrain', coordinates: '3200, 3400, 7', tags: ['Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/1/12/Mapas_de_ADV_VERDE_-_3200%2C_3400%2C_7.webp' }
                ]
            }
        };


        const tagButtonsContainer = document.getElementById('tagButtonsContainer');
  // Verificar se é sexta-feira (dia 5) e se passou das 7 da manhã
        const filterButton = document.getElementById('filterButton');
  const isFridayAfter7AM = today.getDay() === 5 && today.getHours() >= 7;
        const filterOption = document.getElementById('filterOption');
        const searchIds = document.getElementById('searchIds');
        const imageContainer = document.getElementById('imageContainer');
        const mapType = document.getElementById('mapType');
        const specificOption = document.getElementById('specificOption');
        const enableFilter = document.getElementById('enableFilter');
        const filterSection = document.getElementById('filterSection');
        const mapTypeSelection = document.getElementById('mapTypeSelection');
        const specificOptionsSection = document.getElementById('specificOptions');


        const tags = ['Areia', 'Gelo', 'Grama', 'Pedra', 'Subaquático', 'Terra', 'Pisos'];
  // Se for sexta-feira depois das 7 da manhã, incrementa o número da semana
  if (isFridayAfter7AM) {
    actualWeekNumber++;
  }


        function renderTagButtons() {
  const dzWeeks = [
            tags.forEach(tag => {
    { name: 'Décima segunda semana', image: '/images/1/11/Card_DZ_D%C3%A9cima-Segunda-Semana.png' },
                const button = document.createElement('button');
    { name: 'Primeira semana', image: '/images/b/b2/Card_DZ_Primeira-Semana.png' },
                button.className = 'tag-button';
    { name: 'Segunda semana', image: '/images/9/97/Card_DZ_Segunda-Semana.png' },
                button.dataset.value = tag;
    { name: 'Terceira semana', image: '/images/f/fd/Card_DZ_Terceira-Semana.png' },
                button.textContent = tag;
    { name: 'Quarta semana', image: '/images/1/17/Card_DZ_Quarta-Semana.png' },
                button.addEventListener('click', function() {
    { name: 'Quinta semana', image: '/images/4/40/Card_DZ_Quinta-Semana.png' },
                    this.classList.toggle('selected');
    { name: 'Sexta semana', image: '/images/2/23/Card_DZ_Sexta-Semana.png' },
                    filterImages();
    { 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' },
                tagButtonsContainer.appendChild(button);
    { 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' },
  ];


        function filterImages() {
  // Ajuste para garantir que a "Décima segunda semana" seja a primeira exibida
            imageContainer.innerHTML = '';
  let weekIndex = actualWeekNumber % 12;
            const selectedMapType = mapType.value;
            const selectedLocal = specificOption.value;
            const filterByNumber = filterOption.value === 'number';
            const filterByTag = filterOption.value === 'tag';


            let selectedTags = [];
  // Exibir a imagem correspondente à semana
            document.querySelectorAll('.tag-button.selected').forEach(button => {
  dzCard.src = url + dzWeeks[weekIndex].image;
                selectedTags.push(button.dataset.value);
  dzCard.alt = dzWeeks[weekIndex].name;
            });
});
 
</script>
            let filteredImages = [];
            for (const [mapTypeKey, locales] of Object.entries(specificOptions)) {
                if (selectedMapType && selectedMapType !== mapTypeKey) continue;
 
                for (const [local, items] of Object.entries(locales)) {
                    if (selectedLocal && selectedLocal !== local) continue;
 
                    items.forEach(item => {
                        if (filterByNumber && searchIds.value.split(',').map(id => id.trim()).includes(item.id)) {
                            filteredImages.push(item);
                        } else if (filterByTag && selectedTags.some(tag => item.tags.includes(tag))) {
                            filteredImages.push(item);
                        } else if (!filterByNumber && !filterByTag) {
                            filteredImages.push(item);
                        }
                    });
                }
            }
 
            displayImages(filteredImages);
        }
 
        function displayImages(images) {
            images.forEach(image => {
                const imageItem = document.createElement('div');
                imageItem.className = 'image-item';
                imageItem.innerHTML = `
                    <img src="${image.imageUrl}" alt="Map Image">
                    <div>
                        <p>Número do Mapa: ${image.id}</p>
                        <p>Local: ${image.local}</p>
                        <p>Coordenada: ${image.coordinates}</p>
                        <p>Tag(s): ${image.tags.join(', ')}</p>
                    </div>
                `;
                imageContainer.appendChild(imageItem);
            });
            imageContainer.classList.remove('hidden');
        }
 
        renderTagButtons();
 
        filterButton.addEventListener('click', filterImages);
 
        enableFilter.addEventListener('change', function() {
            if (this.checked) {
                mapTypeSelection.classList.add('hidden');
                specificOptionsSection.classList.add('hidden');
                filterSection.classList.remove('hidden');
                imageContainer.innerHTML = '';
                imageContainer.classList.remove('hidden');
            } else {
                mapTypeSelection.classList.remove('hidden');
                specificOptionsSection.classList.remove('hidden');
                filterSection.classList.add('hidden');
                imageContainer.classList.add('hidden');
                searchIds.value = '';
                document.querySelectorAll('.tag-button.selected').forEach(button => button.classList.remove('selected'));
            }
        });
    </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”