Widget:Test2: mudanças entre as edições

Ir para navegação Ir para pesquisar

Widget:Test2 (ver código-fonte)

Edição das 20h18min de 13 de setembro de 2024

1 230 bytes removidos ,  13 setembro
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 4: Linha 4:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Seleção e Exibição de Imagens</title>
     <title>Seleção de Mapas</title>
     <style>
     <style>
         .d-flex {
 
         .mw-body-content {
             display: 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 */
         }
         }
 
        .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;
            width: 100%;
            min-height: 620px;
          }
         .hidden {
         .hidden {
             display: none;
             display: none;
         }
         }


        .input-group {
            margin: 20px 0;
        }
        .maps__select,
        .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;
          appearance: none;
          background-color: #fff;
          margin-top: 15px;
          /* Adiciona um fundo branco */
          box-sizing: border-box;
          /* Inclui o padding e a borda na largura total */
        }
        .input-group button {
            margin-top: 15px;
            background: none;
            width: 100%;
            border: none;
        }
        .input-group button img {
            border-radius: 14px;
        }
         .image-container {
         .image-container {
             display: flex;
             display: flex;
             flex-wrap: wrap;
             flex-wrap: wrap;
            justify-content: center;
             gap: 10px;
             gap: 10px;
             margin-top: 5px;
             margin-top: 20px;
         }
         }


         .image-container .image-item {
         .image-item {
             flex: 1 0 30%;
             flex: 1 0 30%;
             text-align: center;
             text-align: center;
         }
         }


.image-container img {
        .image-item img {
    object-fit: cover; /* Mantém a proporção da imagem, cortando se necessário */
            max-width: 100%;
    margin-bottom: 5px;
            height: auto;
}
        }


         .image-info {
         .image-info {
Linha 41: Linha 75:
         }
         }


         select,
         .tag-button {
        input[type="text"],
            display: inline-block;
        button {
            background-color: #f1f1f1;
            color: #333;
            padding: 10px 20px;
             margin: 5px;
             margin: 5px;
        }
             border: 1px solid #ccc;
 
             border-radius: 20px;
        #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;
             cursor: pointer;
             /* Mostra o cursor de ponteiro ao passar sobre o botão */
             font-size: 16px;
             margin-top: 5px;
             margin-bottom: 15px;
            /* Ajuste a margem superior para subir o botão */
         }
         }


         #filterButton img,
         .tag-button.selected {
        #searchButton img {
             background-color: #d586e1;
             border-radius: 12px;
             color: #050000;
             width: auto;
             border: #9d4cea solid 2px;
             /* Garante que a largura se ajuste ao tamanho original da imagem */
             font-weight: bolder;
             height: auto;
            /* Garante que a altura se ajuste ao tamanho original da imagem */
         }
         }


         .mw-body-content {
         .filter-container {
             display: flex;
             display: flex;
            align-items: center;
            margin-bottom: 20px;
         }
         }


      .mw-parser-output {
        .filter-container input[type="checkbox"] {
            display: inline-block;
             margin-right: 10px;
            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;
            /* Ajuste a margem para mover o campo para cima */
         }
         }


         .input-group label {
         .filter-container label {
            position: absolute;
             font-size: 16px;
            top: -18px;
            /* Eleva o texto para cima */
            background: none;
            padding: 0 5px;
             font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
         }
         }


         .maps__select {
         .selected-tags {
             width: 100%;
             margin: 20px;
            /* Mantém a largura total disponível */
             padding: 10px;
             padding: 10px;
             font-size: 16px;
             background-color: #f9f9f9;
            border-radius: 5px;
             border: 1px solid #ccc;
             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-radius: 5px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            /* Inclui o padding e a borda na largura total */
         }
         }


         .maps__label {
         .tag-item {
             position: absolute;
             display: inline-block;
             top: -18px;
             background-color: #007BFF;
             /* Eleva o texto um pouco mais para cima */
             color: white;
             background: none;
             padding: 5px 10px;
             padding: 0 5px;
             margin-right: 5px;
            border-radius: 3px;
             font-size: 14px;
             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 */
         }
         }
.tag-button.disabled {
    background-color: #e0e0e0;
    color: #b0b0b0;
    cursor: not-allowed;
    border: 1px solid #ccc;
}
     </style>
     </style>
</head>
</head>
<body>
<body>
    <div class="input-group">
        <label for="mapType"><b>Tipo de Mapa:</b></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>
    </div>
    <div class="input-group">
        <label for="specificOption"><b>Local do X:</b></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="Piso">Piso</option>
        </select>
    </div>
    <div id="tagButtons" class="hidden">
        <!-- Botões de tag serão exibidos aqui -->
    </div>


     <form id="mapForm">
     <div class="filter-container">
        <div id="mapTypeSelection" class="input-group">
        <input type="checkbox" id="enableFilter">
            <select id="mapType" class="maps__select">
        <label for="enableFilter"><b>Buscar por número</b></label>
                <option value="">Selecione um mapa</option>
    </div>
                <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">
    <div id="filterOptions" class="input-group hidden">
            <select id="specificOption" class="maps__select">
          <label for="number" id="filterType" ><b>Após anotar os números dos seus mapas, adicione-o aqui:</b></label>
                <option value="">Selecione uma opção</option>
      <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula">
                <option value="Areia">Areia</option>
        <button id="filterButton">
                <option value="Gelo">Gelo</option>
    <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Filtrar" style="vertical-align: middle; ">
                <option value="Grama">Grama</option>
    </button>
                <option value="Pedra">Pedra</option>
    </div>
                <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">
    <div id="imageContainer" class="image-container">
            <!-- As imagens e suas informações serão exibidas aqui -->
        <!-- As imagens e suas informações serão exibidas aqui -->
        </div>
    </div>
    </form>


    <script>
  <script>
const specificOptions = {
const specificOptions = {
1: {  
1: {  
Linha 353: Linha 306:
     { id: '421', local: 'Desert Island', coordinates: '4596, 3656, 8',tags:['Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/2/2f/Mapas_de_ADV_VERMELHO_-_4596%2C_3656%2C_8.webp' },  
     { id: '421', local: 'Desert Island', coordinates: '4596, 3656, 8',tags:['Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/2/2f/Mapas_de_ADV_VERMELHO_-_4596%2C_3656%2C_8.webp' },  
     ],  
     ],  
     'Subaquáticos': [  
     'Subaquático': [  
     { id: '501', local: 'Pewter', coordinates: '3469, 3454, 8',tags:['Água','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/8e/Mapas_de_ADV_VERMELHO_-_3469%2C_3454%2C_8.webp' },  
     { id: '501', local: 'Pewter', coordinates: '3469, 3454, 8',tags:['Subaquático','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/8e/Mapas_de_ADV_VERMELHO_-_3469%2C_3454%2C_8.webp' },  
     { id: '502', local: 'Pewter', coordinates: '3595, 3562, 8',tags:['Água'], imageUrl: 'https://wiki.pokexgames.com/images/d/d3/Mapas_de_ADV_VERMELHO_-_3595%2C_3562%2C_8.webp' },  
     { id: '502', local: 'Pewter', coordinates: '3595, 3562, 8',tags:['Subaquático'], imageUrl: 'https://wiki.pokexgames.com/images/d/d3/Mapas_de_ADV_VERMELHO_-_3595%2C_3562%2C_8.webp' },  
     { id: '503', local: 'Shell Island', coordinates: '4278, 3327, 7',tags:['Água','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/0/04/Mapas_de_ADV_VERMELHO_-_4278%2C_3327%2C_7.webp' },  
     { id: '503', local: 'Shell Island', coordinates: '4278, 3327, 7',tags:['Subaquático','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/0/04/Mapas_de_ADV_VERMELHO_-_4278%2C_3327%2C_7.webp' },  
     { id: '504', local: 'Shell Island', coordinates: '4352, 3351, 7',tags:['Água','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/6/68/Mapas_de_ADV_VERMELHO_-_4352%2C_3351%2C_7.webp' },  
     { id: '504', local: 'Shell Island', coordinates: '4352, 3351, 7',tags:['Subaquático','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/6/68/Mapas_de_ADV_VERMELHO_-_4352%2C_3351%2C_7.webp' },  
     { id: '505', local: 'Pewter (Omastar)', coordinates: '3507, 3579, 8',tags:['Água','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/0/04/Mapas_de_ADV_VERMELHO_-_3507%2C_3579%2C_8.webp' },  
     { id: '505', local: 'Pewter (Omastar)', coordinates: '3507, 3579, 8',tags:['Subaquático','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/0/04/Mapas_de_ADV_VERMELHO_-_3507%2C_3579%2C_8.webp' },  
     { id: '506', local: 'Cerulean', coordinates: '4078, 3557, 9',tags:['Água','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/3/33/Mapas_de_ADV_VERMELHO_-_4078%2C_3557%2C_9.webp' },  
     { id: '506', local: 'Cerulean', coordinates: '4078, 3557, 9',tags:['Subaquático','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/3/33/Mapas_de_ADV_VERMELHO_-_4078%2C_3557%2C_9.webp' },  
     { id: '507', local: 'Cerulean', coordinates: '4105, 3593, 9',tags:['Água','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/1/1c/Mapas_de_ADV_VERMELHO_-_4105%2C_3593%2C_9.webp' },  
     { id: '507', local: 'Cerulean', coordinates: '4105, 3593, 9',tags:['Subaquático','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/1/1c/Mapas_de_ADV_VERMELHO_-_4105%2C_3593%2C_9.webp' },  
     ],  
     ],  
     'Terra': [  
     'Terra': [  
Linha 403: Linha 356:
     { id: '638', local: 'Lost Island', coordinates: '4580, 4061, 8',tags:['Terra', 'Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/8f/Mapas_de_ADV_VERMELHO_-_4580%2C_4061%2C_8.webp' },  
     { id: '638', local: 'Lost Island', coordinates: '4580, 4061, 8',tags:['Terra', 'Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/8f/Mapas_de_ADV_VERMELHO_-_4580%2C_4061%2C_8.webp' },  
         ],  
         ],  
     'Pisos':[  
     'Piso':[  
     { id: '701', local: 'Pewter', coordinates: '3698, 3447, 8', tags:['Piso','Construção'], imageUrl: 'https://wiki.pokexgames.com/images/e/ea/Mapas_de_ADV_VERMELHO_-_3698%2C_3447%2C_8.webp' },  
     { id: '701', local: 'Pewter', coordinates: '3698, 3447, 8', tags:['Piso','Construção'], imageUrl: 'https://wiki.pokexgames.com/images/e/ea/Mapas_de_ADV_VERMELHO_-_3698%2C_3447%2C_8.webp' },  
     { id: '702', local: 'Cemitério de Lavender', coordinates: '4302, 3662, 8', tags:['Piso','Construção', 'Fogo'], imageUrl: 'https://wiki.pokexgames.com/images/f/f7/Mapas_de_ADV_VERMELHO_-_4302%2C_3662%2C_8.webp' },  
     { id: '702', local: 'Cemitério de Lavender', coordinates: '4302, 3662, 8', tags:['Piso','Construção', 'Fogo'], imageUrl: 'https://wiki.pokexgames.com/images/f/f7/Mapas_de_ADV_VERMELHO_-_4302%2C_3662%2C_8.webp' },  
Linha 488: Linha 441:
{ id: '4019', local: ' Respawn de Sableye', coordinates: '5462, 5553, 7', tags: ['Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/c/ca/Mapa_Verde_ADV_-_5462%2C_5553%2C_7.webp' },
{ id: '4019', local: ' Respawn de Sableye', coordinates: '5462, 5553, 7', tags: ['Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/c/ca/Mapa_Verde_ADV_-_5462%2C_5553%2C_7.webp' },
                 ],
                 ],
                 'Subaquáticos': [
                 'Subaquático': [
                 { id: '5001', local: ' Caminho da Outland North', coordinates: '4204, 4404, 12', tags: ['Água', 'Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/4/4b/Mapa_Verde_ADV_-_4204%2C_4404%2C_12.webp' },
                 { id: '5001', local: ' Caminho da Outland North', coordinates: '4204, 4404, 12', tags: ['Subaquático', 'Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/4/4b/Mapa_Verde_ADV_-_4204%2C_4404%2C_12.webp' },
{ id: '5002', local: ' Área subaquática próximo aos Zangoose', coordinates: '5425, 5747, 8', tags: ['Água', 'Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/6/63/Mapa_Verde_ADV_-_5425%2C_5747%2C_8.webp' },
{ id: '5002', local: ' Área subaquática próximo aos Zangoose', coordinates: '5425, 5747, 8', tags: ['Subaquático', 'Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/6/63/Mapa_Verde_ADV_-_5425%2C_5747%2C_8.webp' },
   
   
                 ],
                 ],
Linha 511: Linha 464:
{ id: '6016', local: ' Respawn de Banette', coordinates: '5510, 5611, 8', tags: ['Terra', 'Piso'], imageUrl: 'https://wiki.pokexgames.com/images/2/21/Mapa_Verde_ADV_-_5510%2C_5611%2C_8.webp' },
{ id: '6016', local: ' Respawn de Banette', coordinates: '5510, 5611, 8', tags: ['Terra', 'Piso'], imageUrl: 'https://wiki.pokexgames.com/images/2/21/Mapa_Verde_ADV_-_5510%2C_5611%2C_8.webp' },
                 ],
                 ],
                 'Pisos':[
                 'Piso':[
                 { id: '7001', local: ' Outland Electric', coordinates: '2505, 3105, 10', tags: ['Piso', 'Construção'], imageUrl: 'https://wiki.pokexgames.com/images/b/b8/Mapa_Verde_ADV_-_2505%2C_3105%2C_10.webp' },
                 { id: '7001', local: ' Outland Electric', coordinates: '2505, 3105, 10', tags: ['Piso', 'Construção'], imageUrl: 'https://wiki.pokexgames.com/images/b/b8/Mapa_Verde_ADV_-_2505%2C_3105%2C_10.webp' },
                 { id: '7002', local: ' Outland Psychic', coordinates: '2586, 2968, 7', tags: ['Piso', 'Pirâmide'], imageUrl: 'https://wiki.pokexgames.com/images/8/84/Mapa_Verde_ADV_-_2586%2C_2968%2C_7.webp' },
                 { id: '7002', local: ' Outland Psychic', coordinates: '2586, 2968, 7', tags: ['Piso', 'Pirâmide'], imageUrl: 'https://wiki.pokexgames.com/images/8/84/Mapa_Verde_ADV_-_2586%2C_2968%2C_7.webp' },
Linha 615: Linha 568:


                 ],
                 ],
                 'Subaquáticos': [
                 'Subaquático': [
                 { id: '50001', local: ' Respawn de Sharpedo', coordinates: '30488, 20415, 7',tags:['Água','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/e/e4/Mapas_de_ADV_ROXO_-_30488%2C_20415%2C_7.webp' },
                 { id: '50001', local: ' Respawn de Sharpedo', coordinates: '30488, 20415, 7',tags:['Subaquático','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/e/e4/Mapas_de_ADV_ROXO_-_30488%2C_20415%2C_7.webp' },
{ id: '50002', local: ' Respawn de Eelektross', coordinates: '30597, 20645, 9',tags:['Água','Construção'], imageUrl: 'https://wiki.pokexgames.com/images/7/73/Mapas_de_ADV_ROXO_-_30597%2C_20645%2C_9.webp' },
{ id: '50002', local: ' Respawn de Eelektross', coordinates: '30597, 20645, 9',tags:['Subaquático','Construção'], imageUrl: 'https://wiki.pokexgames.com/images/7/73/Mapas_de_ADV_ROXO_-_30597%2C_20645%2C_9.webp' },
{ id: '50003', local: ' Respawn de Barboach', coordinates: '30341, 20384, 7',tags:['Água','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/6/64/Mapas_de_ADV_ROXO_-_30341%2C_20384%2C_7.webp' },
{ id: '50003', local: ' Respawn de Barboach', coordinates: '30341, 20384, 7',tags:['Subaquático','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/6/64/Mapas_de_ADV_ROXO_-_30341%2C_20384%2C_7.webp' },
{ id: '50004', local: ' Respawn de Carvanha', coordinates: '30379, 20411, 6',tags:['Água'], imageUrl: 'https://wiki.pokexgames.com/images/7/7a/Mapas_de_ADV_ROXO_-_30379%2C_20411%2C_6.webp' },
{ id: '50004', local: ' Respawn de Carvanha', coordinates: '30379, 20411, 6',tags:['Subaquático'], imageUrl: 'https://wiki.pokexgames.com/images/7/7a/Mapas_de_ADV_ROXO_-_30379%2C_20411%2C_6.webp' },


                 ],
                 ],
Linha 663: Linha 616:


                 ],
                 ],
                 'Pisos':[
                 'Piso':[
                 { id: '70001', local: ' Respawn de Infernape', coordinates: '30793, 20532, 3', tags:['Piso','Construção', 'Fogo'], imageUrl: 'https://wiki.pokexgames.com/images/6/6f/Mapas_de_ADV_ROXO_-_30793%2C_20532%2C_3.webp' },
                 { id: '70001', local: ' Respawn de Infernape', coordinates: '30793, 20532, 3', tags:['Piso','Construção', 'Fogo'], imageUrl: 'https://wiki.pokexgames.com/images/6/6f/Mapas_de_ADV_ROXO_-_30793%2C_20532%2C_3.webp' },
{ id: '70002', local: ' Respawn de Steelix', coordinates: '30805, 20398, 7', tags:['Piso','Construção','Pedra','Terra'], imageUrl: 'https://wiki.pokexgames.com/images/0/06/Mapas_de_ADV_ROXO_-_30805%2C_20398%2C_7.webp' },
{ id: '70002', local: ' Respawn de Steelix', coordinates: '30805, 20398, 7', tags:['Piso','Construção','Pedra','Terra'], imageUrl: 'https://wiki.pokexgames.com/images/0/06/Mapas_de_ADV_ROXO_-_30805%2C_20398%2C_7.webp' },
Linha 712: Linha 665:
};
};


        document.getElementById('enableFilter').addEventListener('change', function () {
            const filterSection = document.getElementById('filterSection');
            if (this.checked) {
                filterSection.classList.remove('hidden');
            } else {
                filterSection.classList.add('hidden');
            }
        });


        document.getElementById('searchIds').addEventListener('keypress', function (event) {
    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');
 
    document.getElementById('searchIds').addEventListener('keypress', function (event) {
             if (event.key === 'Enter') {
             if (event.key === 'Enter') {
                 event.preventDefault();
                 event.preventDefault();
Linha 728: Linha 683:
         });
         });


        document.getElementById('mapType').addEventListener('change', function () {
    function updateTags() {
            const selectedMapType = this.value;
        const selectedMapType = mapTypeSelect.value;
            const specificOptionSelect = document.getElementById('specificOption');
        const selectedOption = specificOptionSelect.value;


            if (selectedMapType) {
        let tags = [];
                specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
        if (selectedMapType && selectedOption) {
                const options = Object.keys(specificOptions[selectedMapType]);
            const options = specificOptions[selectedMapType];
                 options.forEach(option => {
            if (options && options[selectedOption]) {
                     specificOptionSelect.innerHTML += `<option value="${option}">${option}</option>`;
                 options[selectedOption].forEach(item => {
                     tags = [...new Set([...tags, ...item.tags])];
                 });
                 });
                document.getElementById('specificOptions').classList.remove('hidden');
            } else {
                document.getElementById('specificOptions').classList.add('hidden');
             }
             }
         });
         }
      // Ordena as tags em ordem alfabética
  tags.sort((a, b) => a.localeCompare(b));


         document.getElementById('specificOption').addEventListener('change', function () {
         tagButtons.innerHTML = '';
            const selectedMapType = document.getElementById('mapType').value;
            const selectedOption = this.value;
            const imageContainer = document.getElementById('imageContainer');


             if (selectedMapType && selectedOption) {
        const disabledTags = {
                const images = specificOptions[selectedMapType][selectedOption];
            'Areia': 'Areia',
                let imagesHtml = '';
             'Gelo': 'Gelo',
            'Grama': 'Grama',
            'Pedra': 'Pedra',
            'Subaquático': 'Subaquático',
            'Terra': 'Terra',
            'Piso': 'Piso'
        };


                if (Array.isArray(images)) {
        tags.forEach(tag => {
                    images.forEach(image => {
            const button = document.createElement('button');
                        imagesHtml += `
            button.textContent = tag;
                            <div class="image-item">
            button.classList.add('tag-button');
                                <img src="${image.imageUrl}" alt="${selectedOption}">
            if (disabledTags[selectedOption] === tag) {
                                <div class="image-info">
                button.disabled = true;
                        <b>Número do Mapa</b>: ${image.id} <br>
                button.classList.add('disabled');
                        <b>Local</b>: ${image.local} <br>
            }
                        <b>Coordenada</b>: ${image.coordinates}<br>
            button.addEventListener('click', () => {
                        <b>Tag(s)</b>: ${image.tags.join(', ') || 'Nenhuma'}
                if (!button.disabled) {
                                </div>
                    button.classList.toggle('selected');
                            </div>
                     filterImages();
                        `;
                     });
                 }
                 }
            });
            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 = imagesHtml;
        imageContainer.innerHTML = '';
                imageContainer.classList.remove('hidden');
            } else {
                imageContainer.classList.add('hidden');
            }
        });


document.getElementById('filterButton').addEventListener('click', function () {
        let itemsToFilter = [];  
    const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim().toLowerCase());
    const filterOption = document.getElementById('filterOption').value;
    const selectedMapType = document.getElementById('mapType').value;
    const selectedSpecificOption = document.getElementById('specificOption').value;
    const imageContainer = document.getElementById('imageContainer');
    let imagesHtml = '';
    let allImages = [];


    if (filterOption === 'tag') {
         if (selectedMapType) {
         if (selectedMapType) {
             const mapOptions = specificOptions[selectedMapType];
             const options = specificOptions[selectedMapType];
             if (selectedSpecificOption) {
             if (options) {
                 const images = mapOptions[selectedSpecificOption].filter(image =>
                 if (selectedOption && options[selectedOption]) {
                     searchIds.some(tag => image.tags.map(t => t.toLowerCase()).includes(tag))
                     itemsToFilter = options[selectedOption];
                );
                 }
                 allImages = allImages.concat(images);
             }
             } else {
        } else {
                Object.keys(mapOptions).forEach(option => {
            // Se nenhum tipo de mapa for selecionado, reunir itens de todos os tipos de mapa
                    const images = mapOptions[option].filter(image =>
            for (const mapType in specificOptions) {
                        searchIds.some(tag => image.tags.map(t => t.toLowerCase()).includes(tag))
                for (const local in specificOptions[mapType]) {
                    );
                     itemsToFilter = itemsToFilter.concat(specificOptions[mapType][local]);
                     allImages = allImages.concat(images);
                 }
                 });
             }
             }
         }
         }
    } else if (filterOption === 'number') {
 
         if (searchIds.length > 0) {
  if (itemsToFilter.length > 0) {
            Object.keys(specificOptions).forEach(mapType => {
        const filteredItems = itemsToFilter.filter(item => {
                const mapOptions = specificOptions[mapType];
        const hasAllTags = selectedTags.length === 0 || selectedTags.every(tag => item.tags.includes(tag));
                Object.keys(mapOptions).forEach(option => {
        const matchesId = filterById === '' || filterById.split(',').map(id => id.trim()).includes(item.id);
                    const images = mapOptions[option].filter(image => searchIds.includes(image.id));
        const matchesLocal = selectedOption === '' || item.tags.includes(selectedOption);
                    allImages = allImages.concat(images);
       
                });
         return hasAllTags && matchesId && matchesLocal;
            });
    });
         }
 
    // Ordena os itens filtrados por 'local'
    const isFilterEnabled = enableFilter.checked;
 
    if (isFilterEnabled){
    filteredItems.sort((a, b) => a.local.localeCompare(b.local));
    }
else{
filteredItems.sort((a, b) => parseInt(a.id) - parseInt(b.id));
    }
    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 sortedTags = item.tags.slice().sort((a, b) => a.localeCompare(b));
 
        const infoDiv = document.createElement('div');
        infoDiv.classList.add('image-info');
        infoDiv.innerHTML = `
            <strong>Número do Mapa:</strong> ${item.id}<br>
            <strong>Local:</strong> ${item.local}<br>
            <strong>Coordenada:</strong> ${item.coordinates}<br>
            <strong>Tag(s):</strong> ${sortedTags.join(', ')}
        `;
        itemDiv.appendChild(infoDiv);
 
        imageContainer.appendChild(itemDiv);
   
  });
 
    if (filteredItems.length === 0) {
         imageContainer.innerHTML = '<p>Nenhuma imagem encontrada para os critérios selecionados.</p>';
     }
     }
}
}
    function handleFilterChange() {
        const isFilterEnabled = enableFilter.checked;
        if (isFilterEnabled) {
            mapTypeSelect.disabled = true;
            specificOptionSelect.disabled = true;
            filterOptions.classList.remove('hidden');
            tagButtons.classList.add('hidden');


    if (allImages.length > 0) {
            filterTypeSelect.value = 'number';
        allImages.sort((a, b) => a.local.localeCompare(b.local));
            filterButton.addEventListener('click', () => {
    const filterById = searchIdsInput.value.trim(); // Obtém o valor do campo de busca


        allImages.forEach(image => {
    // Verifica se o valor é vazio, nulo ou igual a '0'
            imagesHtml += `
    if (!filterById || filterById === '0') {
                <div class="image-item">
        imageContainer.innerHTML = '<p>Nenhuma imagem encontrada para os critérios selecionados.</p>';
                    <img src="${image.imageUrl}" alt="Imagem ID ${image.id}">
                    <div class="image-info">
                        <b>Número do Mapa</b>: ${image.id} <br>
                        <b>Local</b>: ${image.local} <br>
                        <b>Coordenada</b>: ${image.coordinates}<br>
                        <b>Tag(s)</b>: ${image.tags.join(', ') || 'Nenhuma'}
                    </div>
                </div>
            `;
        });
     } else {
     } else {
         imagesHtml = 'Nenhuma imagem encontrada com os critérios fornecidos.';
         filterImages(); // Chama a função para filtrar os mapas
    }
});
 
            mapTypeSelect.value = '';
            specificOptionSelect.value = '';
            searchIdsInput.value = '';
            imageContainer.innerHTML = '';
            tagButtons.value = '';
            updateTags();
        } else {
            mapTypeSelect.disabled = false;
            specificOptionSelect.disabled = false;
            filterOptions.classList.add('hidden');
            tagButtons.classList.remove('hidden');
 
            searchIdsInput.value = '';
            imageContainer.innerHTML = '';
            updateTags();
        }
     }
     }


     imageContainer.innerHTML = imagesHtml;
     enableFilter.addEventListener('change', handleFilterChange);
     imageContainer.classList.toggle('hidden', allImages.length === 0);
     mapTypeSelect.addEventListener('change', () => {
});
        updateTags();
     </script>
        filterImages();
<table class="seeMore">
     });
  <tr>
     specificOptionSelect.addEventListener('change', () => {
     <td class="seeMore__image">
         updateTags();
      <a href="https://wiki.pokexgames.com/index.php/Mapas_de_Aventureiro">
         filterImages();
         <img src="https://wiki.pokexgames.com/images/e/e8/Telekinetic-compass.gif" alt="Telekinetic Compass">
     });
      </a>
    </td>
    <td>
      <strong>Veja mais:
         <a href="https://wiki.pokexgames.com/index.php/Mapas_de_Aventureiro">Mapas de Aventureiro</a>
      </strong>
     </td>
  </tr>
</table>


    // Inicializa a exibição das tags e imagens
    updateTags();
</script>


</body>
</body>
</html>
</html>
Renee
Administradores
5 805

edições

Disponível em “https://wiki.pokexgames.com/index.php/Especial:MobileDiff/86997”

Menu de navegação