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
 
(135 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
            display: flex;
  if (isFridayAfter7AM) {
            flex-wrap: wrap;
    actualWeekNumber++;
            justify-content: center;
  }
            gap: 10px;
            margin-top: 5px;
        }


        .image-container .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-container img {
  // Ajuste para garantir que a "Décima segunda semana" seja a primeira exibida
            object-fit: cover;
  let weekIndex = actualWeekNumber % 12;
            margin-bottom: 5px;
        }


        .image-info {
  // Exibir a imagem correspondente à semana
            margin-top: 5px;
  dzCard.src = url + dzWeeks[weekIndex].image;
        }
  dzCard.alt = dzWeeks[weekIndex].name;
 
});
        select,
</script>
        input[type="text"],
        button {
            margin: 5px;
        }
 
        #filterButton,
        #searchButton {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            margin-top: 5px;
        }
 
        #filterButton img,
        #searchButton img {
            border-radius: 12px;
            width: auto;
            height: auto;
        }
 
        .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: 410px;
            min-height: 320px;
        }
 
        .input-group {
            position: relative;
            margin: 20px 0;
        }
 
        .input-group label {
            position: absolute;
            top: -18px;
            background: none;
            padding: 0 5px;
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
        }
 
        .maps__select {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            appearance: none;
            background-color: #fff;
            box-sizing: border-box;
        }
 
        .input-group input[type="text"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
 
        .maps__label {
            position: absolute;
            top: -18px;
            background: none;
            padding: 0 5px;
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
        }
 
        .hover-minimize:hover {
            transform: scale(0.95);
        }
 
        .filter-container {
            display: flex;
            align-items: center;
        }
 
        .filter-container input[type="checkbox"] {
            margin: 0;
            padding: 0;
            width: auto;
            height: auto;
            vertical-align: middle;
        }
 
        .filter-label {
            margin-left: 10px;
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
            line-height: 1.5;
        }
 
        .tag-button {
            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: rgb(159, 5, 219);
        }
 
        .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>
    <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="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="tagSection" class="hidden">
            <div class="input-group">
                <label for="tagSelect">Selecione as Tags:</label>
                <div id="tagButtons">
                    <div class="tag-button" data-value="Areia">Areia</div>
                    <div class="tag-button" data-value="Grama">Grama</div>
                    <div class="tag-button" data-value="Gelo">Gelo</div>
                    <div class="tag-button" data-value="Árvore">Árvore</div>
                    <div class="tag-button" data-value="Pedra">Pedra</div>
                    <div class="tag-button" data-value="Terra">Terra</div>
                    <div class="tag-button" data-value="Piso">Piso</div>
                    <div class="tag-button" data-value="Construção">Construção</div>
                    <div class="tag-button" data-value="Pântano">Pântano</div>
                    <div class="tag-button" data-value="Pirâmide">Pirâmide</div>
                    <div class="tag-button" data-value="Fogo">Fogo</div>
                    <div class="tag-button" data-value="Água">Água</div>
                </div>
            </div>
        </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="maps__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="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: 'Sandy Desert', coordinates: '5000, 5000, 7', tags: ['Areia'], imageUrl: 'https://wiki.pokexgames.com/images/3/36/Mapa_Verde_ADV_-_5000%2C_5000%2C_7.webp' }
                ],
                'Gelo': [
                    { id: '102', local: 'Snow Valley', coordinates: '4521, 3400, 7', tags: ['Gelo'], imageUrl: 'https://wiki.pokexgames.com/images/2/2a/Mapa_Verde_ADV_-_4521%2C_3400%2C_7.webp' }
                ]
            },
            2: {
                'Areia': [
                    { id: '201', local: 'Sunny Desert', coordinates: '5000, 5000, 7', tags: ['Areia'], imageUrl: 'https://wiki.pokexgames.com/images/3/36/Mapa_Verde_ADV_-_5000%2C_5000%2C_7.webp' }
                ]
            },
            3: {
                'Gelo': [
                    { id: '301', local: 'Icy Peaks', coordinates: '3200, 4200, 7', tags: ['Gelo'], imageUrl: 'https://wiki.pokexgames.com/images/9/98/Mapa_Vermelho_ADV_-_3200%2C_4200%2C_7.webp' }
                ]
            }
        };
 
        document.getElementById('enableFilter').addEventListener('change', function () {
            const filterSection = document.getElementById('filterSection');
            const tagSection = document.getElementById('tagSection');
            const specificOptionsSection = document.getElementById('specificOptions');
 
            if (this.checked) {
                filterSection.classList.remove('hidden');
                const mapTypeSelect = document.getElementById('mapType').value;
                const specificOptionSelect = document.getElementById('specificOption').value;
                if (mapTypeSelect && specificOptionSelect) {
                    tagSection.classList.remove('hidden');
                }
                specificOptionsSection.classList.remove('hidden');
            } else {
                filterSection.classList.add('hidden');
                tagSection.classList.add('hidden');
                specificOptionsSection.classList.add('hidden');
                document.getElementById('searchIds').value = '';
                document.getElementById('imageContainer').innerHTML = '';
            }
        });
 
        document.getElementById('mapType').addEventListener('change', function () {
            const specificOptionsSelect = document.getElementById('specificOption');
            const specificOptionsSection = document.getElementById('specificOptions');
            const tagSection = document.getElementById('tagSection');
 
            if (this.value) {
                specificOptionsSection.classList.remove('hidden');
                if (specificOptionsSelect.value) {
                    tagSection.classList.remove('hidden');
                } else {
                    tagSection.classList.add('hidden');
                }
            } else {
                specificOptionsSection.classList.add('hidden');
                tagSection.classList.add('hidden');
            }
        });
 
        document.getElementById('specificOption').addEventListener('change', function () {
            const tagSection = document.getElementById('tagSection');
            const imageContainer = document.getElementById('imageContainer');
 
            if (this.value) {
                tagSection.classList.remove('hidden');
                // Mostrar mapas ao selecionar Local do X
                const selectedType = document.getElementById('mapType').value;
                if (selectedType) {
                    const images = specificOptions[selectedType][this.value] || [];
                    imageContainer.innerHTML = '';
                    if (images.length > 0) {
                        images.forEach(image => {
                            const imageItem = document.createElement('div');
                            imageItem.className = 'image-item';
                            imageItem.innerHTML = `
                                <img src="${image.imageUrl}" alt="Imagem do mapa">
                                <div class="image-info">
                                    <p>Local: ${image.local}</p>
                                    <p>Coordenadas: ${image.coordinates}</p>
                                </div>
                            `;
                            imageContainer.appendChild(imageItem);
                        });
                        imageContainer.classList.remove('hidden');
                    } else {
                        imageContainer.innerHTML = '<p>Nenhuma imagem encontrada.</p>';
                    }
                }
            } else {
                tagSection.classList.add('hidden');
                imageContainer.classList.add('hidden');
            }
        });
 
        document.getElementById('filterOption').addEventListener('change', function () {
            const searchInput = document.getElementById('searchIds');
            if (this.value === 'number') {
                searchInput.setAttribute('placeholder', 'Digite os números separados por vírgula');
            } else if (this.value === 'tag') {
                searchInput.setAttribute('placeholder', 'Digite as tags separadas por vírgula');
            }
        });
 
        document.getElementById('filterButton').addEventListener('click', function () {
            const selectedType = document.getElementById('mapType').value;
            const selectedSpecificOption = document.getElementById('specificOption').value;
            const filterOption = document.getElementById('filterOption').value;
            const searchValue = document.getElementById('searchIds').value.trim().toLowerCase();
            const imageContainer = document.getElementById('imageContainer');
 
            if (selectedType && selectedSpecificOption) {
                let filteredImages = [];
                const types = specificOptions[selectedType];
 
                for (const option in types) {
                    if (types.hasOwnProperty(option) && (selectedSpecificOption === option || selectedSpecificOption === '')) {
                        const images = types[option];
                        images.forEach(image => {
                            if (filterOption === 'number' && searchValue) {
                                if (searchValue.split(',').includes(image.id)) {
                                    filteredImages.push(image);
                                }
                            } else if (filterOption === 'tag' && searchValue) {
                                const tags = searchValue.split(',').map(tag => tag.trim().toLowerCase());
                                if (tags.some(tag => image.tags.includes(tag))) {
                                    filteredImages.push(image);
                                }
                            } else {
                                filteredImages.push(image);
                            }
                        });
                    }
                }
 
                imageContainer.innerHTML = '';
                if (filteredImages.length > 0) {
                    filteredImages.forEach(image => {
                        const imageItem = document.createElement('div');
                        imageItem.className = 'image-item';
                        imageItem.innerHTML = `
                            <img src="${image.imageUrl}" alt="Imagem do mapa">
                            <div class="image-info">
                                <p>Local: ${image.local}</p>
                                <p>Coordenadas: ${image.coordinates}</p>
                            </div>
                        `;
                        imageContainer.appendChild(imageItem);
                    });
                    imageContainer.classList.remove('hidden');
                } else {
                    imageContainer.innerHTML = '<p>Nenhuma imagem encontrada.</p>';
                }
            } else {
                alert('Selecione pelo menos um tipo de mapa e local do X.');
            }
        });
 
        document.querySelectorAll('.tag-button').forEach(button => {
            button.addEventListener('click', function () {
                this.classList.toggle('selected');
                filterImages();
            });
        });
 
        function filterImages() {
            const selectedType = document.getElementById('mapType').value;
            const selectedSpecificOption = document.getElementById('specificOption').value;
            const tagButtons = document.querySelectorAll('.tag-button.selected');
            const selectedTags = Array.from(tagButtons).map(button => button.getAttribute('data-value').toLowerCase());
 
            const imageContainer = document.getElementById('imageContainer');
            imageContainer.innerHTML = '';
 
            if (selectedType && selectedSpecificOption) {
                const images = specificOptions[selectedType][selectedSpecificOption] || [];
                const filteredImages = images.filter(image => {
                    return selectedTags.every(tag => image.tags.includes(tag));
                });
 
                if (filteredImages.length > 0) {
                    filteredImages.forEach(image => {
                        const imageItem = document.createElement('div');
                        imageItem.className = 'image-item';
                        imageItem.innerHTML = `
                            <img src="${image.imageUrl}" alt="Imagem do mapa">
                            <div class="image-info">
                                <p>Local: ${image.local}</p>
                                <p>Coordenadas: ${image.coordinates}</p>
                            </div>
                        `;
                        imageContainer.appendChild(imageItem);
                    });
                    imageContainer.classList.remove('hidden');
                } else {
                    imageContainer.innerHTML = '<p>Nenhuma imagem encontrada.</p>';
                }
            }
        }
    </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”