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
 
(176 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 () {
<head>
     let d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
    <meta charset="UTF-8">
     let dayNum = d.getUTCDay() || 7; // Garante que domingo (0) seja o último dia da semana
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     let yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
     <title>Seleção e Exibição de Imagens</title>
    return Math.ceil((((d - yearStart) / 86400000) + 1) / 7); // Calcula o número da semana
     <style>
  };
        .d-flex {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: -15px;
            /* Ajuste este valor conforme necessário para subir o botão */
        }


        .hidden {
  const url = window.location.origin;
            display: none;
  const dzCard = document.getElementById('dz-card');
        }
  const today = new Date();
  let actualWeekNumber = today.getWeekNumber();


        .image-container {
  // Verificar se é sexta-feira (dia 5) e se passou das 7 da manhã
            display: flex;
  const isFridayAfter7AM = today.getDay() === 5 && today.getHours() >= 7;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 5px;
        }


        .image-container .image-item {
  // Se for sexta-feira depois das 7 da manhã, incrementa o número da semana
            flex: 1 0 30%;
  if (isFridayAfter7AM) {
            text-align: center;
    actualWeekNumber++;
        }
  }


.image-container img {
  const dzWeeks = [
     object-fit: cover; /* Mantém a proporção da imagem, cortando se necessário */
    { name: 'Décima segunda semana', image: '/images/1/11/Card_DZ_D%C3%A9cima-Segunda-Semana.png' },
     margin-bottom: 5px;
    { 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-info {
  // Ajuste para garantir que a "Décima segunda semana" seja a primeira exibida
            margin-top: 5px;
  let weekIndex = actualWeekNumber % 12;
        }


        select,
  // Exibir a imagem correspondente à semana
        input[type="text"],
  dzCard.src = url + dzWeeks[weekIndex].image;
        button {
  dzCard.alt = dzWeeks[weekIndex].name;
            margin: 5px;
});
        }
</script>
 
        #filterButton,
        #searchButton {
            background: none;
            /* Remove o fundo do botão */
            border: none;
            /* Remove a borda do botão */
            padding: 0;
            /* Remove o padding do botão */
            cursor: pointer;
            /* Mostra o cursor de ponteiro ao passar sobre o botão */
            margin-top: 5px;
            /* Ajuste a margem superior para subir o botão */
        }
 
        #filterButton img,
        #searchButton img {
            border-radius: 12px;
            width: auto;
            /* Garante que a largura se ajuste ao tamanho original da imagem */
            height: auto;
            /* Garante que a altura se ajuste ao tamanho original da imagem */
        }
 
        .mw-body-content {
            display: flex;
        }
 
        .mw-parser-output {
            display: inline-block;
            padding: .5rem 2rem;
            margin: 0 auto;
            border: 30px solid transparent;
            border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
            min-width: 340px;
            min-height: 270px;
          }
 
        .input-group {
            position: relative;
            margin: 20px 0;
            /* Ajuste a margem para mover o campo para cima */
        }
 
        .input-group label {
            position: absolute;
            top: -18px;
            /* Eleva o texto para cima */
            background: none;
            padding: 0 5px;
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
        }
 
        .maps__select {
            width: 100%;
            /* Mantém a largura total disponível */
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            appearance: none;
            background-color: #fff;
            /* Adiciona um fundo branco */
            box-sizing: border-box;
            /* Inclui o padding e a borda na largura total */
        }
 
 
        .input-group input[type="text"] {
            width: 100%;
            /* Mantém a largura total disponível */
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            /* Inclui o padding e a borda na largura total */
        }
 
        .maps__label {
            position: absolute;
            top: -18px;
            /* Eleva o texto um pouco mais para cima */
            background: none;
            padding: 0 5px;
            font-size: 14px;
            font-weight: bold;
            /* Deixa o texto em negrito */
            color: #0d0d0d;
        }
 
        .hover-minimize:hover {
            transform: scale(0.95);
            /* Adiciona um efeito de minimizar ao passar o mouse */
        }
 
        .filter-container {
            display: flex;
            align-items: center;
 
        }
 
        .filter-container input[type="checkbox"] {
            margin: 0;
            padding: 0;
            width: auto;
            /* Ajusta o tamanho da checkbox conforme necessário */
            height: auto;
            /* Ajusta o tamanho da checkbox conforme necessário */
            /* Alinha verticalmente a checkbox com o texto */
            vertical-align: middle;
        }
 
        .filter-label {
            margin-left: 10px;
            /* Espaço entre a checkbox e o texto */
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
            line-height: 1.5;
            /* Ajusta a altura da linha para um alinhamento adequado */
        }
        .selected-image {
            border: 2px solid green;
        }
        .unselected-image {
            border: 2px solid red;
        }
        .hidden {
            display: none;
        }
    </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 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 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>
 
        <div id="imageContainer" class="image-container hidden">
            <!-- As imagens e suas informações serão exibidas aqui -->
        </div>
       
        <div class="d-flex justify-center align-center flex-column">
            <button type="button" id="showSelectedMaps" class="hover-minimize">
                <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão exibir mapas selecionados">
            </button>
            <button type="button" id="clearSelectedMaps" class="hover-minimize">
                <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão limpar seleção">
            </button>
        </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' },
                    { 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' },
                    { id: '104', local: 'Saffron', coordinates: '4009, 3601, 7', tags:['Areia','Árvore','Terra','Água'], imageUrl: 'https://wiki.pokexgames.com/images/f/f5/Mapas_de_ADV_VERMELHO_-_4009%2C_3601%2C_7.webp' },
                    { id: '105', local: 'Hurricane Island', coordinates: '4166, 3302, 7', tags:['Areia','Árvore','Água'], imageUrl: 'https://wiki.pokexgames.com/images/0/0d/Mapas_de_ADV_VERMELHO_-_4166%2C_3302%2C_7.webp' },
                    { id: '106', local: 'Shell Island', coordinates: '4266, 3359, 7', tags:['Areia','Água'], imageUrl: 'https://wiki.pokexgames.com/images/b/b1/Mapas_de_ADV_VERMELHO_-_4266%2C_3359%2C_7.webp' },
                    { id: '107', local: 'Shell Island', coordinates: '4299, 3333, 6', tags:['Areia','Água','Terra','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/c/c4/Mapas_de_ADV_VERMELHO_-_4299%2C_3333%2C_6.webp' },
                    { id: '108', local: 'Shell Island', coordinates: '4342, 3311, 6', tags:['Areia','Água','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/86/Mapas_de_ADV_VERMELHO_-_4342%2C_3311%2C_6.webp' }
                ],
            },
            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' },
                    { id: '30002', local: ' Respawn de Darkrai', coordinates: '30823, 20758, 5', tags:['Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/e/ee/Mapas_de_ADV_ROXO_-_30823%2C_20758%2C_5.webp' },
                    { id: '30003', local: ' Respawn de Galarian Farfetch᾿d', coordinates: '30697, 20083, 1', tags:['Grama','Pedra','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/b/b5/Mapas_de_ADV_ROXO_-_30697%2C_20083%2C_1.webp' },
                    { id: '30004', local: ' Respawn de Darkrai', coordinates: '30710, 20430, 5', tags:['Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/b/bd/Mapas_de_ADV_ROXO_-_30710%2C_20430%2C_5.webp' },
                    { id: '30005', local: ' Respawn de Miltank', coordinates: '30740, 20691, 5', tags:['Grama','Árvore','Construção'], imageUrl: 'https://wiki.pokexgames.com/images/f/f8/Mapas_de_ADV_ROXO_-_30740%2C_20691%2C_5.webp' },
                ]
            }
        };
 
        let selectedMaps = JSON.parse(localStorage.getItem('selectedMaps')) || {};
 
        function updateLocalStorage() {
            localStorage.setItem('selectedMaps', JSON.stringify(selectedMaps));
        }
 
        function renderMapImages() {
            const imageContainer = document.getElementById('imageContainer');
            imageContainer.innerHTML = '';
            Object.keys(selectedMaps).forEach(id => {
                const map = selectedMaps[id];
                const mapDiv = document.createElement('div');
                mapDiv.className = 'image-item';
                mapDiv.innerHTML = `
                    <img src="${map.imageUrl}" alt="${map.local}" />
                    <div>
                        <p><b>Local:</b> ${map.local}</p>
                        <p><b>Coordenadas:</b> ${map.coordinates}</p>
                        <p><b>Tags:</b> ${map.tags.join(', ')}</p>
                    </div>
                `;
                imageContainer.appendChild(mapDiv);
            });
            imageContainer.classList.remove('hidden');
        }
 
        function toggleMapSelection(id, mapData) {
            const img = document.querySelector(`img[data-id="${id}"]`);
            if (selectedMaps[id]) {
                delete selectedMaps[id];
                img.src = 'https://wiki.pokexgames.com/images/2/26/Semvip.png'; // Imagem de não selecionado
            } else {
                selectedMaps[id] = mapData;
                img.src = 'https://wiki.pokexgames.com/images/2/2d/Comvip.png'; // Imagem de selecionado
            }
            updateLocalStorage();
        }
 
        document.getElementById('mapForm').addEventListener('change', function(event) {
            const mapType = document.getElementById('mapType').value;
            const specificOption = document.getElementById('specificOption').value;
 
            if (mapType && specificOption) {
                const maps = specificOptions[mapType] && specificOptions[mapType][specificOption] || [];
                const mapContainer = document.getElementById('mapContainer');
                mapContainer.innerHTML = '';
 
                maps.forEach(map => {
                    const mapDiv = document.createElement('div');
                    mapDiv.className = 'image-item';
 
                    mapDiv.innerHTML = `
                        <img src="${map.imageUrl}" alt="${map.local}" data-id="${map.id}" />
                        <div>
                            <p><b>Local:</b> ${map.local}</p>
                            <p><b>Coordenadas:</b> ${map.coordinates}</p>
                            <p><b>Tags:</b> ${map.tags.join(', ')}</p>
                        </div>
                    `;
 
                    mapDiv.querySelector('img').addEventListener('click', function() {
                        toggleMapSelection(map.id, map);
                    });
 
                    mapContainer.appendChild(mapDiv);
                });
 
                document.getElementById('mapContainer').classList.remove('hidden');
            }
        });
 
        document.getElementById('showSelectedMaps').addEventListener('click', function() {
            renderMapImages();
        });
 
        document.getElementById('clearSelectedMaps').addEventListener('click', function() {
            selectedMaps = {};
            updateLocalStorage();
            document.getElementById('imageContainer').innerHTML = '';
            document.getElementById('imageContainer').classList.add('hidden');
        });
 
        document.getElementById('enableFilter').addEventListener('change', function() {
            const filterSection = document.getElementById('filterSection');
            filterSection.classList.toggle('hidden', !this.checked);
        });
 
        function filterMaps() {
            const filterOption = document.getElementById('filterOption').value;
            const searchText = document.getElementById('searchIds').value.toLowerCase().trim();
            const filterOptionValue = filterOption || '';
 
            const filteredMaps = Object.values(specificOptions).flatMap(option =>
                Object.values(option).flatMap(mapList =>
                    mapList.filter(map => {
                        if (filterOptionValue === 'number') {
                            return searchText.split(',').map(s => s.trim()).includes(map.id);
                        } else if (filterOptionValue === 'tag') {
                            return searchText.split(',').map(s => s.trim()).some(tag => map.tags.map(t => t.toLowerCase()).includes(tag));
                        }
                        return false;
                    })
                )
            );
 
            const mapContainer = document.getElementById('mapContainer');
            mapContainer.innerHTML = '';
 
            filteredMaps.forEach(map => {
                const mapDiv = document.createElement('div');
                mapDiv.className = 'image-item';
 
                mapDiv.innerHTML = `
                    <img src="${map.imageUrl}" alt="${map.local}" />
                    <div>
                        <p><b>Local:</b> ${map.local}</p>
                        <p><b>Coordenadas:</b> ${map.coordinates}</p>
                        <p><b>Tags:</b> ${map.tags.join(', ')}</p>
                    </div>
                `;
 
                mapContainer.appendChild(mapDiv);
            });
 
            mapContainer.classList.remove('hidden');
        }
 
        document.getElementById('filterButton').addEventListener('click', filterMaps);
    </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>