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
 
(183 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>
        .d-flex {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: -15px;
        }


        .hidden {
  // Verificar se é sexta-feira (dia 5) e se passou das 7 da manhã
            display: none;
  const isFridayAfter7AM = today.getDay() === 5 && today.getHours() >= 7;
        }


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


        .image-item {
  const dzWeeks = [
            margin: 10px;
    { 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' },
  ];


        .hover-minimize {
  // Ajuste para garantir que a "Décima segunda semana" seja a primeira exibida
            cursor: pointer;
  let weekIndex = actualWeekNumber % 12;
        }
    </style>
</head>


<body>
  // Exibir a imagem correspondente à semana
    <form id="mapForm">
  dzCard.src = url + dzWeeks[weekIndex].image;
        <div id="mapTypeSelection" class="input-group">
  dzCard.alt = dzWeeks[weekIndex].name;
            <select id="mapType" class="maps__select">
});
                <option value="">Selecione um mapa</option>
</script>
                <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>
 
        <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 class="maps__label" for="specificOption">Local do X</label>
        </div>
 
        <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>
                <input type="text" id="searchIds" placeholder="Digite os números ou tags separados por vírgula" class="mapsCalc__select">
            </div>
 
            <div class="d-flex">
                <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>
 
        <div id="saveSection" class="d-flex">
            <button type="button" id="saveButton" class="hover-minimize">
                <img src="https://wiki.pokexgames.com/images/6/6f/Save_Icon.png" alt="Salvar Mapas">
                <span>Salvar Mapas Selecionados</span>
            </button>
            <button type="button" id="loadButton" class="hover-minimize">
                <img src="https://wiki.pokexgames.com/images/6/6f/Load_Icon.png" alt="Carregar Mapas">
                <span>Carregar Mapas Selecionados</span>
            </button>
        </div>
 
        <div id="imageContainer" class="image-container hidden">
            <!-- As imagens e suas informações serão exibidas aqui -->
        </div>
    </form>
 
    <script>
        const specificOptions = {
            1: {
                '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' },
                    // ... (outros itens)
                ],
            },
            3: {
                'Grama': [
                    { id: '30001', local: 'Respawn de Darkrai', coordinates: '30792, 20621, 5', tags: ['Grama', 'Árvore', 'Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/2/23/Mapas_de_ADV_ROXO_-_30792%2C_20621%2C_5.webp' },
                    // ... (outros itens)
                ],
                'Pisos': [
                    { id: '70001', local: 'Respawn de Infernape', coordinates: '30793, 20532, 3', tags: ['Piso', 'Construção', 'Fogo'], imageUrl: 'https://wiki.pokexgames.com/images/6/6f/Mapas_de_ADV_ROXO_-_30793%2C_20532%2C_3.webp' },
                    // ... (outros itens)
                ],
            },
        };
 
        const enableFilter = document.getElementById('enableFilter');
        const filterSection = document.getElementById('filterSection');
        const mapType = document.getElementById('mapType');
        const specificOption = document.getElementById('specificOption');
        const filterButton = document.getElementById('filterButton');
        const imageContainer = document.getElementById('imageContainer');
        const searchIds = document.getElementById('searchIds');
        const filterOption = document.getElementById('filterOption');
        const saveButton = document.getElementById('saveButton');
        const loadButton = document.getElementById('loadButton');
 
        let savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || [];
 
        // Função para salvar mapas selecionados
        saveButton.addEventListener('click', () => {
            const mapId = specificOption.value;
            const mapTypeValue = mapType.value;
 
            if (mapId && mapTypeValue) {
                const selectedMaps = specificOptions[mapTypeValue][mapId] || [];
                selectedMaps.forEach(map => {
                    if (!savedMaps.includes(map.id)) {
                        savedMaps.push(map.id);
                    }
                });
                localStorage.setItem('savedMaps', JSON.stringify(savedMaps));
                alert('Mapas selecionados foram salvos!');
            } else {
                alert('Selecione um tipo de mapa e uma opção específica antes de salvar.');
            }
        });
 
        // Função para carregar mapas salvos
        loadButton.addEventListener('click', () => {
            imageContainer.innerHTML = ''; // Limpar imagens anteriores
 
            if (savedMaps.length > 0) {
                Object.values(specificOptions).forEach(optionGroup => {
                    Object.values(optionGroup).forEach(itemList => {
                        itemList.forEach(item => {
                            if (savedMaps.includes(item.id)) {
                                const imageItem = document.createElement('div');
                                imageItem.classList.add('image-item');
 
                                const img = document.createElement('img');
                                img.src = item.imageUrl;
                                img.alt = `Imagem do local ${item.local}`;
                                img.style.display = 'block';
                                img.style.margin = '0 auto'; // Centraliza a imagem
 
                                const info = document.createElement('p');
                                info.innerHTML = `<b>Local:</b> ${item.local} <br> <b>Coordenadas:</b> ${item.coordinates} <br> <b>Tags:</b> ${item.tags.join(', ')}`;
 
                                imageItem.appendChild(img);
                                imageItem.appendChild(info);
                                imageContainer.appendChild(imageItem);
                            }
                        });
                    });
                });
 
                imageContainer.classList.remove('hidden');
            } else {
                imageContainer.classList.add('hidden');
                alert('Nenhum mapa salvo encontrado.');
            }
        });
 
        // Função para atualizar o campo Local do X conforme o Tipo de Mapa selecionado
        mapType.addEventListener('change', () => {
            specificOption.innerHTML = '<option value="">Selecione uma opção</option>'; // Resetar opções
 
            if (mapType.value) {
                specificOptionsDiv.classList.remove('hidden');
 
                const options = specificOptions[mapType.value];
                for (const option in options) {
                    const newOption = document.createElement('option');
                    newOption.value = option;
                    newOption.textContent = option;
                    specificOption.appendChild(newOption);
                }
            } else {
                specificOptionsDiv.classList.add('hidden');
            }
        });
 
        // Função para exibir as imagens correspondentes ao Local do X selecionado
        specificOption.addEventListener('change', () => {
            imageContainer.innerHTML = ''; // Limpar imagens anteriores
            const selectedType = specificOptions[mapType.value];
            if (selectedType && selectedType[specificOption.value]) {
                imageContainer.classList.remove('hidden');
                selectedType[specificOption.value].forEach(item => {
                    const imageItem = document.createElement('div');
                    imageItem.classList.add('image-item');
 
                    const img = document.createElement('img');
                    img.src = item.imageUrl;
                    img.alt = `Imagem do local ${item.local}`;
                    img.style.display = 'block';
                    img.style.margin = '0 auto'; // Centraliza a imagem
 
                    const info = document.createElement('p');
                    info.innerHTML = `<b>Local:</b> ${item.local} <br> <b>Coordenadas:</b> ${item.coordinates} <br> <b>Tags:</b> ${item.tags.join(', ')}`;
 
                    imageItem.appendChild(img);
                    imageItem.appendChild(info);
                    imageContainer.appendChild(imageItem);
                });
            } else {
                imageContainer.classList.add('hidden');
            }
        });
 
        // Função para filtrar as imagens conforme a opção selecionada
        filterButton.addEventListener('click', () => {
            const selectedFilter = filterOption.value;
            const searchValues = searchIds.value.split(',').map(val => val.trim());
 
            if (!selectedFilter || !searchValues.length) return;
 
            let filteredItems = [];
 
            for (const typeKey in specificOptions) {
                const type = specificOptions[typeKey];
                for (const optionKey in type) {
                    const items = type[optionKey];
 
                    const filtered = items.filter(item => {
                        if (selectedFilter === 'number') {
                            return searchValues.includes(item.id);
                        } else if (selectedFilter === 'tag') {
                            return searchValues.every(tag => item.tags.includes(tag));
                        }
                    });
 
                    filteredItems = [...filteredItems, ...filtered];
                }
            }
 
            imageContainer.innerHTML = ''; // Limpar imagens anteriores
            if (filteredItems.length > 0) {
                imageContainer.classList.remove('hidden');
                filteredItems.forEach(item => {
                    const imageItem = document.createElement('div');
                    imageItem.classList.add('image-item');
 
                    const img = document.createElement('img');
                    img.src = item.imageUrl;
                    img.alt = `Imagem do local ${item.local}`;
                    img.style.display = 'block';
                    img.style.margin = '0 auto'; // Centraliza a imagem
 
                    const info = document.createElement('p');
                    info.innerHTML = `<b>Local:</b> ${item.local} <br> <b>Coordenadas:</b> ${item.coordinates} <br> <b>Tags:</b> ${item.tags.join(', ')}`;
 
                    imageItem.appendChild(img);
                    imageItem.appendChild(info);
                    imageContainer.appendChild(imageItem);
                });
            } else {
                imageContainer.classList.add('hidden');
            }
        });
 
        // Carregar mapas salvos ao iniciar a página
        document.addEventListener('DOMContentLoaded', () => {
            if (savedMaps.length > 0) {
                loadButton.click(); // Simula um clique no botão de carregar para exibir os mapas salvos
            }
        });
    </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”