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
 
(153 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 e Exibição de Imagens</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
        /* Adicione seu estilo aqui */
  };
        .d-flex {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: -15px;
        }
        .hidden {
            display: none;
        }
        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 5px;
        }
        .image-container .image-item {
            flex: 1 0 30%;
            text-align: center;
        }
        .image-container img {
            object-fit: cover;
            margin-bottom: 5px;
        }
        .image-info {
            margin-top: 5px;
        }
        select,
        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-checkbox {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .tag-checkbox label {
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        .tag-checkbox input[type="checkbox"] {
            margin-right: 5px;
        }
    </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">
  const url = window.location.origin;
            <select id="specificOption" class="maps__select">
  const dzCard = document.getElementById('dz-card');
                <option value="">Selecione uma opção</option>
  const today = new Date();
                <option value="Areia">Areia</option>
  let actualWeekNumber = today.getWeekNumber();
                <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="filterByTag" class="input-group">
                <label for="filterOption" class="maps__label">Filtrar Por Tag</label>
                <div class="tag-checkbox">
                    <label><input type="checkbox" value="Areia"> Areia</label>
                    <label><input type="checkbox" value="Grama"> Grama</label>
                    <label><input type="checkbox" value="Gelo"> Gelo</label>
                    <label><input type="checkbox" value="Árvore"> Árvore</label>
                    <label><input type="checkbox" value="Pedra"> Pedra</label>
                    <label><input type="checkbox" value="Terra"> Terra</label>
                    <label><input type="checkbox" value="Piso"> Piso</label>
                    <label><input type="checkbox" value="Construção"> Construção</label>
                    <label><input type="checkbox" value="Pântano"> Pântano</label>
                    <label><input type="checkbox" value="Pirâmide"> Pirâmide</label>
                    <label><input type="checkbox" value="Fogo"> Fogo</label>
                    <label><input type="checkbox" value="Água"> Água</label>
                </div>
            </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">
  // Verificar se é sexta-feira (dia 5) e se passou das 7 da manhã
            <!-- As imagens e suas informações serão exibidas aqui -->
  const isFridayAfter7AM = today.getDay() === 5 && today.getHours() >= 7;
        </div>
    </form>


  // Se for sexta-feira depois das 7 da manhã, incrementa o número da semana
  if (isFridayAfter7AM) {
    actualWeekNumber++;
  }


    <script>
  const dzWeeks = [
const specificOptions = {
     { name: 'Décima segunda semana', image: '/images/1/11/Card_DZ_D%C3%A9cima-Segunda-Semana.png' },
     1: {
    { name: 'Primeira semana', image: '/images/b/b2/Card_DZ_Primeira-Semana.png' },
        'Areia': [
    { name: 'Segunda semana', image: '/images/9/97/Card_DZ_Segunda-Semana.png' },
            { 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' },  
    { name: 'Terceira semana', image: '/images/f/fd/Card_DZ_Terceira-Semana.png' },
            { 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' },  
    { name: 'Quarta semana', image: '/images/1/17/Card_DZ_Quarta-Semana.png' },
            { 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' },  
    { name: 'Quinta semana', image: '/images/4/40/Card_DZ_Quinta-Semana.png' },
            { id: '104', local: 'Desert Oasis', coordinates: '3870, 3120, 7', tags:['Areia','Água'], imageUrl: 'https://wiki.pokexgames.com/images/9/90/Mapas_de_ADV_VERMELHO_-_3870%2C_3120%2C_7.webp' }
    { 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' },
        'Grama': [
    { name: 'Oitava semana', image: '/images/9/97/Card_DZ_Oitava-Semana.png' },
            { id: '201', local: 'Forest Area', coordinates: '3590, 2880, 7', tags:['Grama','Árvore','Piso'], imageUrl: 'https://wiki.pokexgames.com/images/6/6a/Mapas_de_ADV_VERMELHO_-_3590%2C_2880%2C_7.webp' },
    { name: 'Nona semana', image: '/images/b/b3/Card_DZ_Nona-Semana.png' },
            { id: '202', local: 'Green Meadow', coordinates: '3650, 2950, 7', tags:['Grama','Árvore','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/7/7d/Mapas_de_ADV_VERMELHO_-_3650%2C_2950%2C_7.webp' }
     { 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' },
        // Adicione mais locais para outras tags conforme necessário
  ];
     },
    2: {
        'Gelo': [
            { id: '301', local: 'Ice Cave', coordinates: '2970, 3580, 7', tags:['Gelo','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/80/Mapas_de_ADV_VERMELHO_-_2970%2C_3580%2C_7.webp' },
            { id: '302', local: 'Frozen Lake', coordinates: '3100, 3650, 7', tags:['Gelo','Água'], imageUrl: 'https://wiki.pokexgames.com/images/9/9f/Mapas_de_ADV_VERMELHO_-_3100%2C_3650%2C_7.webp' }
        ],
        // Adicione mais locais para outras tags conforme necessário
    },
    // Adicione mais tipos de mapa conforme necessário
};


function updateFilters() {
  // Ajuste para garantir que a "Décima segunda semana" seja a primeira exibida
    const mapType = document.getElementById('mapType').value;
  let weekIndex = actualWeekNumber % 12;
    const specificOption = document.getElementById('specificOption').value;
    const selectedTags = Array.from(document.querySelectorAll('#filterByTag input[type="checkbox"]:checked')).map(cb => cb.value);


    const filteredData = [];
  // Exibir a imagem correspondente à semana
 
  dzCard.src = url + dzWeeks[weekIndex].image;
    if (mapType && specificOption && specificOptions[mapType] && specificOptions[mapType][specificOption]) {
  dzCard.alt = dzWeeks[weekIndex].name;
        filteredData.push(...specificOptions[mapType][specificOption]);
    }
 
    if (selectedTags.length > 0) {
        filteredData = filteredData.filter(item =>
            item.tags.some(tag => selectedTags.includes(tag))
        );
    }
 
    displayImages(filteredData);
}
 
function displayImages(data) {
    const imageContainer = document.getElementById('imageContainer');
    imageContainer.innerHTML = '';
   
    if (data.length === 0) {
        imageContainer.classList.add('hidden');
        return;
    }
 
    imageContainer.classList.remove('hidden');
   
    data.forEach(item => {
        const imageItem = document.createElement('div');
        imageItem.className = 'image-item';
       
        const img = document.createElement('img');
        img.src = item.imageUrl;
        img.alt = item.local;
        img.width = 200;  // Ajuste o tamanho conforme necessário
        img.height = 150; // Ajuste o tamanho conforme necessário
 
        const info = document.createElement('div');
        info.className = 'image-info';
        info.innerHTML = `<strong>Local:</strong> ${item.local} <br> <strong>Coordenadas:</strong> ${item.coordinates}`;
       
        imageItem.appendChild(img);
        imageItem.appendChild(info);
        imageContainer.appendChild(imageItem);
    });
}
 
document.getElementById('enableFilter').addEventListener('change', function() {
    const filterSection = document.getElementById('filterSection');
    filterSection.classList.toggle('hidden', !this.checked);
});
});
document.getElementById('filterButton').addEventListener('click', updateFilters);
document.getElementById('mapType').addEventListener('change', updateFilters);
document.getElementById('specificOption').addEventListener('change', updateFilters);
updateFilters(); // Inicializa com os valores padrão
</script>
</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”