Widget:Test: 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
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>Item Search</title>
     <title>Seleção e Exibição de Imagens</title>
     <style>
     <style>
         .suggest-icon {
         .hidden {
             max-width: 20px;
             display: none;
            max-height: 20px;
         }
         }
 
         .image-container img {
        #suggest {
             width: 100px;
            max-height: 300px;
             height: 100px;
            max-width: 300px;
             margin: 5px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
 
        .item-name {
            display: flex;
            align-items: center;
        }
 
        .item-name-icon {
            max-width: 30px;
            margin-right: 8px;
        }
 
        .craft p {
            margin: 0;
        }
 
         .materials {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
 
        .item-from-craft {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }
 
        .material-icon-container {
            display: flex;
            align-items: center;
            justify-content: center;
             width: 30px;
             height: 30px;
        }
 
        .who-drops {
             display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
 
        .who-drops-item {
            display: flex;
            align-items: center;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 8px;
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
     <input type="text" id="search" placeholder="Busque um item..." />
     <h1>Selecione o Tipo de Mapa</h1>
    <div id="suggest"></div>
    <div id="content"></div>


     <script>
     <form id="mapForm">
         const allData = [
         <div id="mapTypeSelection">
             {
             <label><input type="radio" name="mapType" value="1" class="map-type"> Tipo de Mapa 1</label>
                "id": 18,
             <label><input type="radio" name="mapType" value="2" class="map-type"> Tipo de Mapa 2</label>
                "name": "Bag of Pollen",
            <label><input type="radio" name="mapType" value="3" class="map-type"> Tipo de Mapa 3</label>
                "icon": "https://wiki.pokexgames.com/images/b/bc/BagOfPollem.png",
        </div>
                "link": "https://wiki.pokexgames.com/index.php/Bag_Of_Pollem",
 
                "isNightmare": false,
        <div id="specificOptions" class="hidden">
                "whoDrops": [
             <!-- Opções específicas aparecerão aqui -->
                    {
         </div>
                        "id": 1,
                        "icon": "https://wiki.pokexgames.com/images/5/5c/001-Bulbasaur.png",
                        "link": "https://wiki.pokexgames.com/index.php/Bulbasaur",
                        "name": "Bulbasaur"
                    },
                    // outros dados omitidos para simplicidade...
                ]
             },
            {
                "id": 1884,
                "name": "Anya Outfit (female)",
                "icon": "https://wiki.pokexgames.com/images/8/8a/Anya_Outfit_Designer.png",
                "link": null,
                "isNightmare": false,
                "craft": {
                    "quantity": 1,
                    "skill": "100",
                    "cooldownText": "5 dias",
                    "rank": "S",
                    "profession": "Stylist",
                    "materials": [
                        {
                            "name": "Lovely Topknot",
                            "icon": "https://wiki.pokexgames.com/images/e/e9/Lovely_Topknot.png",
                            "isNightmare": true,
                            "quantity": 10,
                            "id": 532
                        },
                        // outros materiais omitidos para simplicidade...
                    ]
                }
            },
            {
                "id": 1912,
                "name": "Catcher Token",
                "icon": "https://wiki.pokexgames.com/images/f/fd/Catcher_Token.png",
                "link": "https://wiki.pokexgames.com/index.php/Tokens",
                "isNightmare": false
             }
         ];


         const search = document.getElementById("search");
         <div id="imageContainer" class="image-container hidden">
        const suggest = document.getElementById("suggest");
            <!-- As imagens filtradas serão exibidas aqui -->
         const content = document.getElementById("content");
         </div>
    </form>


         const clearSuggestions = () => {
    <script>
             suggest.innerHTML = "";
         const specificOptions = {
             1: ['Option 1-1', 'Option 1-2', 'Option 1-3'],
            2: ['Option 2-1', 'Option 2-2', 'Option 2-3', 'Option 2-4'],
            3: ['Option 3-1', 'Option 3-2']
         };
         };


         const setItem = (id) => {
         const images = {
             const data = allData.find((data) => data.id == id);
             'Option 1-1': 'https://wiki.pokexgames.com/images/b/bc/BagOfPollem.png',
             if (!data) return;
            'Option 1-2': 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png',
             clearSuggestions();
            'Option 1-3': 'https://wiki.pokexgames.com/images/3/34/DifferentImage.png',
            'Option 2-1': 'https://wiki.pokexgames.com/images/c/c4/ExampleImage.png',
            'Option 2-2': 'https://wiki.pokexgames.com/images/5/56/AnotherExample.png',
            'Option 2-3': 'https://wiki.pokexgames.com/images/a/a6/SampleImage.png',
            'Option 2-4': 'https://wiki.pokexgames.com/images/d/d7/FinalExample.png',
             'Option 3-1': 'https://wiki.pokexgames.com/images/e/e8/MapType3Option1.png',
             'Option 3-2': 'https://wiki.pokexgames.com/images/f/f9/MapType3Option2.png'
        };


             if (data.name === "Bag of Pollen") {
        document.querySelectorAll('.map-type').forEach(radio => {
                 // Exibe o link para a página MediaWiki com o comando
             radio.addEventListener('change', function() {
                 content.innerHTML = `
                const selectedMapType = this.value;
                 <div class="item-name">
                const optionsDiv = document.getElementById('specificOptions');
                     <a href="${data.link}" target="_blank" rel="noopener noreferrer"> {{:Bag_Of_Pollen}} </a>
                const imageContainer = document.getElementById('imageContainer');
                </div>`;
                  
            } else {
                 optionsDiv.innerHTML = '';
                content.innerHTML = `
                 imageContainer.innerHTML = '';
                <div class="item-name">
               
                    <img class="item-name-icon" src="${data.icon}" />
                if (selectedMapType) {
                    <span>${data.name}</span>
                     const options = specificOptions[selectedMapType];
                </div>`;
                    options.forEach(option => {
                        optionsDiv.innerHTML += `
                            <label>
                                <input type="radio" name="specificOption" value="${option}" class="specific-option"> ${option}
                            </label>
                        `;
                    });


                if (data.craft) {
                     optionsDiv.classList.remove('hidden');
                     content.innerHTML += `
                    <h3>Craft</h3>
                    <div class="craft">
                        <p><b>Quantidade:</b> ${data.craft.quantity}</p>
                        <p><b>Skill:</b> ${data.craft.skill} - Rank ${data.craft.rank}</p>
                        <p><b>Tempo de Craft:</b> ${data.craft.cooldownText}</p>
                        <p><b>Profissão:</b> ${data.craft.profession}</p>
                        <p><b>Materiais:</b></p>
                        <div class="materials">
                            ${data.craft.materials.map((material) => `
                            <div class="item-from-craft">
                                <div class="material-icon-container">
                                    <img class="item-name-icon" src="${material.icon}" />
                                </div>
                                ${material.quantity}x ${material.name}
                            </div>`).join("")}
                        </div>
                    </div>`;
                 }
                 }
               
                imageContainer.classList.add('hidden');
            });
        });


                if (data.whoDrops) {
        document.getElementById('specificOptions').addEventListener('change', function() {
                    content.innerHTML += `
            const selectedOption = document.querySelector('input[name="specificOption"]:checked');
                    <h3>Quem Droppa</h3>
            const imageContainer = document.getElementById('imageContainer');
                    <div class="who-drops">
           
                        ${data.whoDrops.map((drop) => `
            imageContainer.innerHTML = '';
                        <div class="who-drops-item">
           
                            <a href="${drop.link}" target="_blank" rel="noopener noreferrer">
            if (selectedOption) {
                                <img class="item-name-icon" src="${drop.icon}" />
                const optionValue = selectedOption.value;
                                ${drop.name}
                if (images[optionValue]) {
                            </a>
                    imageContainer.innerHTML = `<img src="${images[optionValue]}" alt="${optionValue}">`;
                        </div>`).join("")}
                    imageContainer.classList.remove('hidden');
                    </div>`;
                 }
                 }
                const materialTo = allData.filter((item) => {
                    if (!item.craft?.materials) return false;
                    return item.craft.materials.some((m) => m.id == id);
                });
                if (materialTo.length) {
                    content.innerHTML += `
                    <h3>Usado para craftar</h3>
                    <div class="materials">
                        ${materialTo.map((material) => `
                        <div class="item-from-craft">
                            <div class="material-icon-container">
                                <img class="item-name-icon" src="${material.icon}" />
                            </div>
                            ${material.name}
                        </div>`).join("")}
                    </div>`;
                }
            }
        };
        document.addEventListener("click", (e) => {
            if (e.target.classList.contains("suggest-item")) {
                e.preventDefault();
                setItem(e.target.dataset.itemId);
             }
             }
        });
        search.addEventListener("input", () => {
            const value = search.value?.toLowerCase();
            suggest.innerHTML = "";
            allData.forEach((data) => {
                if (data.name.toLowerCase().includes(value)) {
                    const div = document.createElement("div");
                    div.innerHTML = `
                    <img src="${data.icon}" class="suggest-icon" lazy />
                    <a class="suggest-item" href="#" data-item-id="${data.id}">${data.name}</a>`;
                    suggest.appendChild(div);
                }
            });
         });
         });
     </script>
     </script>
</body>
</body>
</html>
</html>

Edição das 03h13min de 23 de agosto de 2024

<!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 e Exibição de Imagens</title>
   <style>
       .hidden {
           display: none;
       }
       .image-container img {
           width: 100px;
           height: 100px;
           margin: 5px;
       }
   </style>

</head> <body>

Selecione o Tipo de Mapa

   <form id="mapForm">

           <label><input type="radio" name="mapType" value="1" class="map-type"> Tipo de Mapa 1</label>
           <label><input type="radio" name="mapType" value="2" class="map-type"> Tipo de Mapa 2</label>
           <label><input type="radio" name="mapType" value="3" class="map-type"> Tipo de Mapa 3</label>

   </form>

   <script>
       const specificOptions = {
           1: ['Option 1-1', 'Option 1-2', 'Option 1-3'],
           2: ['Option 2-1', 'Option 2-2', 'Option 2-3', 'Option 2-4'],
           3: ['Option 3-1', 'Option 3-2']
       };

       const images = {
           'Option 1-1': 'https://wiki.pokexgames.com/images/b/bc/BagOfPollem.png',
           'Option 1-2': 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png',
           'Option 1-3': 'https://wiki.pokexgames.com/images/3/34/DifferentImage.png',
           'Option 2-1': 'https://wiki.pokexgames.com/images/c/c4/ExampleImage.png',
           'Option 2-2': 'https://wiki.pokexgames.com/images/5/56/AnotherExample.png',
           'Option 2-3': 'https://wiki.pokexgames.com/images/a/a6/SampleImage.png',
           'Option 2-4': 'https://wiki.pokexgames.com/images/d/d7/FinalExample.png',
           'Option 3-1': 'https://wiki.pokexgames.com/images/e/e8/MapType3Option1.png',
           'Option 3-2': 'https://wiki.pokexgames.com/images/f/f9/MapType3Option2.png'
       };

       document.querySelectorAll('.map-type').forEach(radio => {
           radio.addEventListener('change', function() {
               const selectedMapType = this.value;
               const optionsDiv = document.getElementById('specificOptions');
               const imageContainer = document.getElementById('imageContainer');
               
               optionsDiv.innerHTML = ;
               imageContainer.innerHTML = ;
               
               if (selectedMapType) {
                   const options = specificOptions[selectedMapType];
                   options.forEach(option => {
                       optionsDiv.innerHTML += `
                           <label>
                               <input type="radio" name="specificOption" value="${option}" class="specific-option"> ${option}
                           </label>
                       `;
                   });

                   optionsDiv.classList.remove('hidden');
               }
               
               imageContainer.classList.add('hidden');
           });
       });

       document.getElementById('specificOptions').addEventListener('change', function() {
           const selectedOption = document.querySelector('input[name="specificOption"]:checked');
           const imageContainer = document.getElementById('imageContainer');
           
           imageContainer.innerHTML = ;
           
           if (selectedOption) {
               const optionValue = selectedOption.value;
               if (images[optionValue]) {
                   imageContainer.innerHTML = `<img src="${images[optionValue]}" alt="${optionValue}">`;
                   imageContainer.classList.remove('hidden');
               }
           }
       });
   </script>

</body> </html>

Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:Test&oldid=85390”