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


        .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;
    { 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;
            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>
    <div>
        <label>
            <input type="checkbox" id="filterActive"> Ativar Filtro
        </label>
        <div id="mapTypeContainer" class="hidden">
            <label>
                Tipo de Mapa:
                <select id="mapType">
                    <option value="">Selecione</option>
                    <option value="1">Mapa Vermelho</option>
                    <!-- Adicione outras opções de mapa conforme necessário -->
                </select>
            </label>
        </div>
        <div id="specificOptionsContainer" class="hidden">
            <label>
                Local do X:
                <select id="specificOption">
                    <option value="">Selecione</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>
            <div id="tagButtons" class="hidden">
                <!-- Tags serão adicionadas dinamicamente aqui -->
            </div>
        </div>
        <button id="filterButton" class="hidden">Filtrar</button>
    </div>
    <div id="imageContainer"></div>
 
    <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' }
                ],
                'Gelo': [
                    { id: '201', local: 'Frozen Tundra', coordinates: '5600, 5200, 7', tags: ['Gelo'], imageUrl: 'https://wiki.pokexgames.com/images/6/6f/Mapas_de_ADV_VERDE_-_5600%2C_5200%2C_7.webp' }
                ],
                'Grama': [
                    { id: '301', local: 'Grassland Fields', coordinates: '3300, 2200, 7', tags: ['Grama'], imageUrl: 'https://wiki.pokexgames.com/images/7/70/Mapas_de_ADV_ROXO_-_3300%2C_2200%2C_7.webp' }
                ],
                'Pedra': [
                    { id: '401', local: 'Rocky Ridge', coordinates: '4800, 4600, 7', tags: ['Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/80/Mapas_de_ADV_VERMELHO_-_4800%2C_4600%2C_7.webp' }
                ],
                'Subaquático': [
                    { id: '501', local: 'Underwater Cave', coordinates: '5700, 5200, 7', tags: ['Água'], imageUrl: 'https://wiki.pokexgames.com/images/9/90/Mapas_de_ADV_VERMELHO_-_5700%2C_5200%2C_7.webp' }
                ],
                'Terra': [
                    { id: '601', local: 'Mountain Pass', coordinates: '6100, 5300, 7', tags: ['Terra'], imageUrl: 'https://wiki.pokexgames.com/images/a/a0/Mapas_de_ADV_VERMELHO_-_6100%2C_5300%2C_7.webp' }
                ],
                'Pisos': [
                    { id: '701', local: 'Concrete Jungle', coordinates: '6000, 5500, 7', tags: ['Piso'], imageUrl: 'https://wiki.pokexgames.com/images/b/b0/Mapas_de_ADV_VERMELHO_-_6000%2C_5500%2C_7.webp' }
                ]
            }
        };
 
        const tagMap = {
            'Areia': 'Areia',
            'Gelo': 'Gelo',
            'Grama': 'Grama',
            'Pedra': 'Pedra',
            'Subaquático': 'Água',
            'Terra': 'Terra',
            'Pisos': 'Piso'
        };
 
        function updateTagButtons() {
            const specificOption = document.getElementById('specificOption').value;
            const tagButtons = document.querySelectorAll('.tag-button');
           
            tagButtons.forEach(button => {
                const tagValue = button.getAttribute('data-value');
                if (tagMap[specificOption] === tagValue) {
                    button.classList.add('selected');
                    button.classList.add('disabled');
                    button.setAttribute('disabled', 'true');
                } else {
                    button.classList.remove('disabled');
                    button.removeAttribute('disabled');
                }
            });
        }
 
        function toggleTagButton(e) {
            if (e.target.classList.contains('tag-button')) {
                if (e.target.classList.contains('disabled')) return;
                e.target.classList.toggle('selected');
                filterImages();
            }
        }
 
        function filterImages() {
            const mapType = document.getElementById('mapType').value;
            const specificOption = document.getElementById('specificOption').value;
            const selectedTags = Array.from(document.querySelectorAll('.tag-button.selected')).map(button => button.getAttribute('data-value'));
 
            let filteredMaps = [];
 
            if (mapType && specificOption) {
                filteredMaps = specificOptions[mapType][specificOption] || [];
            }
 
            if (selectedTags.length > 0) {
                filteredMaps = filteredMaps.filter(map => {
                    return selectedTags.some(tag => map.tags.includes(tag));
                });
            }
 
            displayMaps(filteredMaps);
        }
 
        function displayMaps(maps) {
            const container = document.getElementById('imageContainer');
            container.innerHTML = ''; // Clear previous results
 
            maps.forEach(map => {
                const imageItem = document.createElement('div');
                imageItem.className = 'image-item';
 
                const image = document.createElement('img');
                image.src = map.imageUrl;
                image.alt = map.local;
                image.className = 'map-image';
 
                const info = document.createElement('div');
                info.className = 'image-info';
                info.innerHTML = `
                    <b>Número do Mapa</b>: ${map.id} <br>
                    <b>Local</b>: ${map.local} <br>
                    <b>Coordenada</b>: ${map.coordinates}<br>
                    <b>Tag(s)</b>: ${map.tags.join(', ') || 'Nenhuma'}
                `;
 
                imageItem.appendChild(image);
                imageItem.appendChild(info);
 
                container.appendChild(imageItem);
            });
 
            container.classList.remove('hidden');
        }
 
        document.getElementById('filterActive').addEventListener('change', function () {
            const isActive = this.checked;
            document.getElementById('mapTypeContainer').classList.toggle('hidden', !isActive);
            document.getElementById('specificOptionsContainer').classList.toggle('hidden', !isActive);
            document.getElementById('filterButton').classList.toggle('hidden', !isActive);
        });
 
        document.getElementById('mapType').addEventListener('change', function () {
            document.getElementById('specificOptionsContainer').classList.remove('hidden');
            updateTagButtons();
            filterImages();
        });
 
        document.getElementById('specificOption').addEventListener('change', function () {
            updateTagButtons();
            filterImages();
        });
 
        document.getElementById('filterButton').addEventListener('click', filterImages);
 
        // Dynamically add tag buttons
        function populateTagButtons() {
            const tags = Object.keys(tagMap);
            const container = document.getElementById('tagButtons');
            container.innerHTML = ''; // Clear existing buttons
 
            tags.forEach(tag => {
                const button = document.createElement('div');
                button.className = 'tag-button';
                button.setAttribute('data-value', tag);
                button.textContent = tag;
                container.appendChild(button);
            });
        }
 
        populateTagButtons();
 
        document.getElementById('tagButtons').addEventListener('click', toggleTagButton);
    </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”