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
 
(59 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<!DOCTYPE html> <html lang="pt-BR"> <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Seleção de Mapas</title>
    <style>
      .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; /* Mantém a proporção da imagem, cortando se necessário */
  margin-bottom: 5px;
}
      .image-info {
          margin-top: 5px;
      }
      select,
      input[type="text"],
      button {
          margin: 5px;
      }
      #filterButton {
          background: none;
          border: none;
          padding: 0;
          cursor: pointer;
          margin-top: 5px;
          display: flex;
          align-items: center;
      }
      #filterButton img {
          border-radius: 12px;
          margin-right: 5px;
          align-items: center;
      }
      #filterButton span {
          font-size: 16px;
          color: #0d0d0d;
      }
filterOptions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}
      .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;
      }
      /* Estilo para os botões de tags */
      .tag-buttons {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          justify-content: center;
          margin-top: 10px;
      }
      .tag-buttons button {
          background-color: #f0f0f0;
          border: 1px solid #ccc;
          border-radius: 5px;
          padding: 5px 10px;
          font-size: 14px;
          cursor: pointer;
          transition: background-color 0.3s, color 0.3s;
      }
      .tag-buttons button:hover {
          background-color: #ddd;
          color: #333;
      }
      .tag-buttons button.selected {
          background-color: #007bff;
          color: #fff;
          border-color: #007bff;
      }
      .tag-buttons button.disabled {
          background-color: #e0e0e0;
          color: #a0a0a0;
          border-color: #d0d0d0;
          cursor: not-allowed;
      }
  </style>
</head> <body>
      <label for="mapType">Tipo de Mapa</label>
      <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 for="specificOption">Local do X</label>
      <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>
      <input type="checkbox" id="enableFilter">
      <label for="enableFilter">Ativar filtro</label>
      <label for="filterType">Filtrar Por</label>
      <select id="filterType" class="maps__select">
          <option value="number">Filtrar por Número</option>
      </select>
      <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula">
     
<button id="filterButton">
  <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Filtrar">
</button>
<script>
<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 specificOptions = {
  const url = window.location.origin;
      1: { // Mapa Vermelho
  const dzCard = document.getElementById('dz-card');
          'Areia': [
  const today = new Date();
              { 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' },
  let actualWeekNumber = today.getWeekNumber();
              { id: '102', local: 'Desert', coordinates: '4500, 5300, 5', tags: ['Areia'], imageUrl: 'https://wiki.pokexgames.com/images/5/55/Mapa_Vermelho_ADV_-_4500%2C_5300%2C_5.webp' }
          ],
          'Grama': [
              { id: '103', local: 'Grassland', coordinates: '5600, 4700, 8', tags: ['Grama'], imageUrl: 'https://wiki.pokexgames.com/images/6/67/Mapa_Vermelho_ADV_-_5600%2C_4700%2C_8.webp' }
          ]
      },
      2: { // Mapa Verde
          'Gelo': [
              { id: '201', local: 'Frozen Lake', coordinates: '5100, 3300, 6', tags: ['Gelo'], imageUrl: 'https://wiki.pokexgames.com/images/7/7b/Mapa_Verde_ADV_-_5100%2C_3300%2C_6.webp' }
          ],
          'Pedra': [
              { id: '202', local: 'Rocky Mountains', coordinates: '4700, 5600, 5', tags: ['Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/8e/Mapa_Verde_ADV_-_4700%2C_5600%2C_5.webp' }
          ]
      },
      3: { // Mapa Roxo
          'Subaquático': [
              { id: '301', local: 'Underwater Cave', coordinates: '3000, 2900, 4', tags: ['Água', 'Subaquático'], imageUrl: 'https://wiki.pokexgames.com/images/9/93/Mapa_Roxo_ADV_-_3000%2C_2900%2C_4.webp' }
          ],
          'Terra': [
              { id: '302', local: 'Earth Plains', coordinates: '3400, 4400, 6', tags: ['Terra'], imageUrl: 'https://wiki.pokexgames.com/images/a/a1/Mapa_Roxo_ADV_-_3400%2C_4400%2C_6.webp' }
          ]
      }
  };
  const mapTypeSelect = document.getElementById('mapType');
  const specificOptionSelect = document.getElementById('specificOption');
  const filterOptions = document.getElementById('filterOptions');
  const tagButtons = document.getElementById('tagButtons');
  const imageContainer = document.getElementById('imageContainer');
  const enableFilter = document.getElementById('enableFilter');
  const filterTypeSelect = document.getElementById('filterType');
  const searchIdsInput = document.getElementById('searchIds');
  const filterButton = document.getElementById('filterButton');
  function updateTags() {
      const selectedMapType = mapTypeSelect.value;
      const selectedOption = specificOptionSelect.value;
      let tags = [];
      if (selectedMapType && selectedOption) {
          const options = specificOptions[selectedMapType];
          if (options && options[selectedOption]) {
              options[selectedOption].forEach(item => {
                  tags = [...new Set([...tags, ...item.tags])];
              });
          }
      }
      tagButtons.innerHTML = ;
      const disabledTags = {
          'Areia': 'Areia',
          'Gelo': 'Gelo',
          'Grama': 'Grama',
          'Pedra': 'Pedra',
          'Subaquático': 'Água',
          'Terra': 'Terra',
          'Pisos': 'Piso'
      };
      tags.forEach(tag => {
          const button = document.createElement('button');
          button.textContent = tag;
          button.classList.add('tag-button');
          if (disabledTags[selectedOption] === tag) {
              button.disabled = true; // Desabilitar a tag correspondente ao Local do X
              button.classList.add('disabled');
          }
          button.addEventListener('click', () => {
              if (!button.disabled) {
                  button.classList.toggle('selected');
              }
          });
          tagButtons.appendChild(button);
      });
      tagButtons.classList.toggle('hidden', tags.length === 0);
  }
  function filterImages() {
      const selectedTags = Array.from(document.querySelectorAll('.tag-button.selected')).map(btn => btn.textContent);
      const selectedMapType = mapTypeSelect.value;
      const selectedOption = specificOptionSelect.value;
      const filterById = searchIdsInput.value.trim();
      imageContainer.innerHTML = ;
      let itemsToFilter = [];
      if (selectedMapType) {
          const options = specificOptions[selectedMapType];
          if (options) {
              if (selectedOption && options[selectedOption]) {
                  itemsToFilter = options[selectedOption];
              }
          }
      } else {
          // Se nenhum tipo de mapa for selecionado, reunir itens de todos os tipos de mapa
          for (const mapType in specificOptions) {
              for (const local in specificOptions[mapType]) {
                  itemsToFilter = itemsToFilter.concat(specificOptions[mapType][local]);
              }
          }
      }
      if (itemsToFilter.length > 0) {
          const filteredItems = itemsToFilter.filter(item => {
              const matchesTag = selectedTags.length === 0 || selectedTags.some(tag => item.tags.includes(tag));
              const matchesId = filterById ===  || filterById.split(',').map(id => id.trim()).includes(item.id);
              const matchesLocal = selectedOption ===  || item.tags.includes(selectedOption);
             
              return matchesTag && matchesId && matchesLocal;
          });
          filteredItems.forEach(item => {
              const itemDiv = document.createElement('div');
              itemDiv.classList.add('image-item');
              const img = document.createElement('img');
              img.src = item.imageUrl;
              img.alt = `Mapa ${item.id}`;
              itemDiv.appendChild(img);
              const infoDiv = document.createElement('div');
              infoDiv.classList.add('image-info');
              infoDiv.innerHTML = `
                  Número do Mapa: ${item.id}


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


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


                  Tag(s): ${item.tags.join(', ')}
  const dzWeeks = [
              `;
    { name: 'Décima segunda semana', image: '/images/1/11/Card_DZ_D%C3%A9cima-Segunda-Semana.png' },
              itemDiv.appendChild(infoDiv);
    { name: 'Primeira semana', image: '/images/b/b2/Card_DZ_Primeira-Semana.png' },
              imageContainer.appendChild(itemDiv);
    { name: 'Segunda semana', image: '/images/9/97/Card_DZ_Segunda-Semana.png' },
          });
    { name: 'Terceira semana', image: '/images/f/fd/Card_DZ_Terceira-Semana.png' },
          if (filteredItems.length === 0) {
    { name: 'Quarta semana', image: '/images/1/17/Card_DZ_Quarta-Semana.png' },
imageContainer.innerHTML = '
    { 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' },
  ];


Nenhuma imagem encontrada para os critérios selecionados.
  // 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;
      }
  }
document.getElementById('enableFilter').addEventListener('change', function() {
 
  const filterOptions = document.getElementById('filterOptions');
  if (this.checked) {
      filterOptions.classList.remove('hidden');
  } else {
      filterOptions.classList.add('hidden');
  }
});
});
  function handleFilterChange() {
      const isFilterEnabled = enableFilter.checked;
      if (isFilterEnabled) {
          mapTypeSelect.disabled = true;
          specificOptionSelect.disabled = true;
          filterOptions.classList.remove('hidden');
          tagButtons.classList.add('hidden');
          filterTypeSelect.value = 'number';
          filterButton.addEventListener('click', () => {
              // Desmarcar todas as tags ao ativar o filtro
              document.querySelectorAll('.tag-button.selected').forEach(btn => btn.classList.remove('selected'));
              filterImages();
          });
          mapTypeSelect.value = ;
          specificOptionSelect.value = ;
          searchIdsInput.value = ;
          imageContainer.innerHTML = ;
      } else {
          mapTypeSelect.disabled = false;
          specificOptionSelect.disabled = false;
          filterOptions.classList.add('hidden');
          tagButtons.classList.remove('hidden');
          searchIdsInput.value = ;
          imageContainer.innerHTML = ;
          updateTags();
      }
  }
  enableFilter.addEventListener('change', handleFilterChange);
  mapTypeSelect.addEventListener('change', () => {
      updateTags();
      filterImages();
  });
  specificOptionSelect.addEventListener('change', () => {
      updateTags();
      filterImages();
  });
  // Inicializa a exibição das tags e imagens
  updateTags();
</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”