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
 
(94 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 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;
        }


        .input-group {
  const url = window.location.origin;
            margin: 20px 0;
  const dzCard = document.getElementById('dz-card');
        }
  const today = new Date();
  let actualWeekNumber = today.getWeekNumber();


        .maps__select,
  // Verificar se é sexta-feira (dia 5) e se passou das 7 da manhã
        .input-group input[type="text"] {
  const isFridayAfter7AM = today.getDay() === 5 && today.getHours() >= 7;
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }


        .image-container {
  // Se for sexta-feira depois das 7 da manhã, incrementa o número da semana
            display: flex;
  if (isFridayAfter7AM) {
            flex-wrap: wrap;
    actualWeekNumber++;
            gap: 10px;
  }
            margin-top: 20px;
        }


        .image-item {
  const dzWeeks = [
            flex: 1 0 30%;
    { name: 'Décima segunda semana', image: '/images/1/11/Card_DZ_D%C3%A9cima-Segunda-Semana.png' },
            text-align: center;
    { 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' },
  ];


        .image-item img {
  // Ajuste para garantir que a "Décima segunda semana" seja a primeira exibida
            max-width: 100%;
  let weekIndex = actualWeekNumber % 12;
            height: auto;
        }


        .image-info {
  // Exibir a imagem correspondente à semana
            margin-top: 5px;
  dzCard.src = url + dzWeeks[weekIndex].image;
        }
  dzCard.alt = dzWeeks[weekIndex].name;
 
});
        .tag-button {
</script>
            display: inline-block;
            background-color: #f1f1f1;
            color: #333;
            padding: 10px 20px;
            margin: 5px;
            border: 1px solid #ccc;
            border-radius: 20px;
            cursor: pointer;
            font-size: 16px;
        }
 
        .tag-button.selected {
            background-color: #15864e;
            color: #fff;
        }
 
        .tag-button.disabled {
            background-color: #ddd;
            color: #999;
            cursor: not-allowed;
        }
 
        .filter-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
 
        .filter-container input[type="checkbox"] {
            margin-right: 10px;
        }
 
        .filter-container label {
            font-size: 16px;
        }
 
        .selected-tags {
            margin: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
 
        .tag-item {
            display: inline-block;
            background-color: #007BFF;
            color: white;
            padding: 5px 10px;
            margin-right: 5px;
            border-radius: 3px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="input-group">
        <label for="mapType">Tipo de Mapa</label>
        <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>
    </div>
 
    <div class="input-group">
        <label for="specificOption">Local do X</label>
        <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>
    </div>
 
    <div class="filter-container">
        <input type="checkbox" id="enableFilter">
        <label for="enableFilter">Ativar filtro</label>
    </div>
 
    <div id="filterOptions" class="input-group hidden">
        <label for="filterType">Filtrar Por</label>
        <select id="filterType" class="maps__select">
            <option value="">Escolha uma Opção</option>
            <option value="number">Filtrar por Número</option>
        </select>
        <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula">
    </div>
 
    <div id="tagButtons" class="hidden">
        <!-- Botões de tag serão exibidos aqui -->
    </div>
 
    <div id="imageContainer" class="image-container">
        <!-- As imagens e suas informações serão exibidas aqui -->
    </div>
 
    <script>
        const tagMap = {
            'Areia': 'Areia',
            'Gelo': 'Gelo',
            'Grama': 'Grama',
            'Pedra': 'Pedra',
            'Subaquático': 'Água',
            'Terra': 'Terra',
            'Pisos': 'Piso'
        };
 
        const specificOptions = {
            1: { // Mapa Vermelho
                '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: 'Desert', coordinates: '4500, 5300, 5', tags: ['Areia'], imageUrl: 'https://wiki.pokexgames.com/images/5/55/Mapa_Vermelho_ADV_-_4500%2C_5300%2C_5.webp' }
                ],
                'Grama': [
                    { id: '103', local: 'Grassland', coordinates: '5600, 4700, 8', tags: ['Grama'], imageUrl: 'https://wiki.pokexgames.com/images/6/67/Mapa_Vermelho_ADV_-_5600%2C_4700%2C_8.webp' }
                ]
            },
            2: { // Mapa Verde
                'Gelo': [
                    { id: '201', local: 'Snowy Peak', coordinates: '2050, 4850, 10', tags: ['Gelo'], imageUrl: 'https://wiki.pokexgames.com/images/5/56/Mapa_Verde_ADV_-_2050%2C_4850%2C_10.webp' }
                ]
            }
        };
 
        const imageContainer = document.getElementById('imageContainer');
        const tagButtons = document.getElementById('tagButtons');
        const filterOptions = document.getElementById('filterOptions');
        const mapTypeSelect = document.getElementById('mapType');
        const specificOptionSelect = document.getElementById('specificOption');
        const enableFilter = document.getElementById('enableFilter');
        const searchIdsInput = document.getElementById('searchIds');
 
        function updateTags() {
            const selectedMapType = mapTypeSelect.value;
            const selectedOption = specificOptionSelect.value;
 
            let tags = [];
            if (selectedMapType && selectedOption) {
                const options = specificOptions[selectedMapType];
                if (options && options[selectedOption]) {
                    options[selectedOption].forEach(item => {
                        tags = [...new Set([...tags, ...item.tags])];
                    });
                }
            }
 
            tagButtons.innerHTML = '';
            tags.forEach(tag => {
                const button = document.createElement('button');
                button.textContent = tag;
                button.classList.add('tag-button');
                button.addEventListener('click', () => {
                    if (!button.classList.contains('disabled')) {
                        button.classList.toggle('selected');
                        filterImages();
                    }
                });
                tagButtons.appendChild(button);
            });
 
            // Automatically disable the tag corresponding to the selected option
            if (selectedOption && tagMap[selectedOption]) {
                const autoDisabledTag = tagMap[selectedOption];
                const tagButton = Array.from(tagButtons.children).find(btn => btn.textContent === autoDisabledTag);
 
                if (tagButton) {
                    tagButton.classList.add('disabled');
                    tagButton.removeEventListener('click', () => {
                        // Prevent clicks on the disabled button
                    });
                }
            }
 
            tagButtons.classList.toggle('hidden', tags.length === 0);
        }
 
        function filterImages() {
            const selectedTags = Array.from(document.querySelectorAll('.tag-button.selected')).map(btn => btn.textContent);
            const selectedMapType = mapTypeSelect.value;
            const selectedOption = specificOptionSelect.value;
            const filterById = searchIdsInput.value.trim();
 
            imageContainer.innerHTML = '';
 
            let itemsToFilter = [];
 
            if (selectedMapType) {
                const options = specificOptions[selectedMapType];
                if (options) {
                    if (selectedOption && options[selectedOption]) {
                        itemsToFilter = options[selectedOption];
                    }
                }
            }
 
            if (filterById) {
                const ids = filterById.split(',').map(id => id.trim());
                itemsToFilter = itemsToFilter.filter(item => ids.includes(item.id));
            }
 
            if (selectedTags.length) {
                itemsToFilter = itemsToFilter.filter(item => selectedTags.some(tag => item.tags.includes(tag)));
            }
 
            itemsToFilter.forEach(item => {
                const imgItem = document.createElement('div');
                imgItem.classList.add('image-item');
                imgItem.innerHTML = `
                    <img src="${item.imageUrl}" alt="Mapa">
                    <div class="image-info">
                        <p><strong>Número:</strong> ${item.id}</p>
                        <p><strong>Local:</strong> ${item.local}</p>
                        <p><strong>Coordenada:</strong> ${item.coordinates}</p>
                        <p><strong>Tag(s):</strong> ${item.tags.join(', ')}</p>
                    </div>
                `;
                imageContainer.appendChild(imgItem);
            });
        }
 
        mapTypeSelect.addEventListener('change', updateTags);
        specificOptionSelect.addEventListener('change', updateTags);
 
        enableFilter.addEventListener('change', () => {
            const isActive = enableFilter.checked;
            document.querySelectorAll('.input-group select').forEach(select => {
                select.disabled = isActive;
                if (isActive) select.value = ''; // Reset selects
            });
 
            if (isActive) {
                filterOptions.classList.remove('hidden');
                tagButtons.classList.add('hidden');
                searchIdsInput.addEventListener('input', filterImages);
                filterImages(); // Inicialmente não exibe mapas
            } else {
                filterOptions.classList.add('hidden');
                tagButtons.classList.remove('hidden');
                searchIdsInput.value = '';
                document.querySelectorAll('.tag-button.selected').forEach(button => {
                    button.classList.remove('selected');
                });
                filterImages(); // Exibe todos os mapas
            }
        });
 
        searchIdsInput.addEventListener('input', filterImages);
    </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”