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 146: Linha 146:
             </div>`;
             </div>`;


             if (data.craft) {
             if (data.name === "Bag of Pollen") {
                 content.innerHTML += `
                 content.innerHTML += `
                 <h3>Craft</h3>
                 <h3>Comando</h3>
                <div class="craft">
                <div class="item-name">
                    <p><b>Quantidade:</b> ${data.craft.quantity}</p>
                    <span>{{:Bag_Of_Pollen}}</span>
                    <p><b>Skill:</b> ${data.craft.skill} - Rank ${data.craft.rank}</p>
                </div>`;
                    <p><b>Tempo de Craft:</b> ${data.craft.cooldownText}</p>
            } else {
                    <p><b>Profissão:</b> ${data.craft.profession}</p>
                if (data.craft) {
                    <p><b>Materiais:</b></p>
                    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>`;
                }
 
                if (data.whoDrops) {
                    content.innerHTML += `
                    <h3>Quem Droppa</h3>
                    <div class="who-drops">
                        ${data.whoDrops.map((drop) => `
                        <div class="who-drops-item">
                            <a href="${drop.link}" target="_blank" rel="noopener noreferrer">
                                <img class="item-name-icon" src="${drop.icon}" />
                                ${drop.name}
                            </a>
                        </div>`).join("")}
                    </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">
                     <div class="materials">
                         ${data.craft.materials.map((material) => `
                         ${materialTo.map((material) => `
                         <div class="item-from-craft">
                         <div class="item-from-craft">
                             <div class="material-icon-container">
                             <div class="material-icon-container">
                                 <img class="item-name-icon" src="${material.icon}" />
                                 <img class="item-name-icon" src="${material.icon}" />
                             </div>
                             </div>
                             ${material.quantity}x ${material.name}
                             ${material.name}
                         </div>`).join("")}
                         </div>`).join("")}
                     </div>
                     </div>`;
                </div>`;
                 }
            }
 
            if (data.whoDrops) {
                content.innerHTML += `
                 <h3>Quem Droppa</h3>
                <div class="who-drops">
                    ${data.whoDrops.map((drop) => `
                    <div class="who-drops-item">
                        <a href="${drop.link}" target="_blank" rel="noopener noreferrer">
                            <img class="item-name-icon" src="${drop.icon}" />
                            ${drop.name}
                        </a>
                    </div>`).join("")}
                </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>`;
             }
             }
         };
         };

Edição das 02h39min 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>Item Search</title>
   <style>
       .suggest-icon {
           max-width: 20px;
           max-height: 20px;
       }

       #suggest {
           max-height: 300px;
           max-width: 300px;
           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>

</head> <body> 

   <input type="text" id="search" placeholder="Busque um item..." />

   <script>
       // Base de dados local
       const allData = [
           {
               "id": 18,
               "name": "Bag of Pollen",
               "icon": "https://wiki.pokexgames.com/images/b/bc/BagOfPollem.png",
               "link": "https://wiki.pokexgames.com/index.php/Bag_Of_Pollem",
               "isNightmare": false,
               "whoDrops": [
                   {
                       "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");
       const suggest = document.getElementById("suggest");
       const content = document.getElementById("content");

       const clearSuggestions = () => {
           suggest.innerHTML = "";
       };

       const setItem = (id) => {
           const data = allData.find((data) => data.id == id);
           if (!data) return;
           clearSuggestions();

           content.innerHTML = `

               <img class="item-name-icon" src="${data.icon}" />
               ${data.name}

`; 

           if (data.name === "Bag of Pollen") {
               content.innerHTML += `

Comando

BagOfPollem.png
Bag Of Pollen
Informações Importantes
Como obter
001-Bulbasaur.png 002-Ivysaur.png 003-Venusaur.png 003-MegaVenusaur.png Sh venu.png 012-Butterfree.png 012-Sh Butterfree.png 015-Beedrill.png 015-Sh Beedrill.png 043-Oddish.png 043-Sh Oddish.png 044-Gloom.png 045-Vileplume.png Shinyvil.png 046-Paras.png 047-Parasect.png 048-Venonat.png 049-Venomoth.png 049-Sh Venomoth.png 152-Chikorita.png 153-Bayleef.png 154-Meganium.png 154-Sh Meganium.png 187-Hoppip.png 188-Skiploom.png 189-Jumpluff.png 407-Roserade.png 412-Burmy.png 549-Lilligant.png 549-Shiny Lilligant.png 616-Shelmet.png
Preço NPC 40 dólares
Onde vender NPC Mark (Itens)
Utilidade É um item muito usado em craft de profissões, principalmente por Professores. Pode ser vendido em NPC, ou por um preço um pouco maior no Market para outros jogadores.


Telekinetic-compass.gif Veja mais: NPC Mark (Itens) - Profissões - Quests - Market

`; 

           } else {
               if (data.craft) {
                   content.innerHTML += `

Craft

Quantidade: ${data.craft.quantity}

Skill: ${data.craft.skill} - Rank ${data.craft.rank}

Tempo de Craft: ${data.craft.cooldownText}

Profissão: ${data.craft.profession}

Materiais:

                           ${data.craft.materials.map((material) => `

                                   <img class="item-name-icon" src="${material.icon}" />

                               ${material.quantity}x ${material.name}
`).join("")}

`; 

               }

               if (data.whoDrops) {
                   content.innerHTML += `

Quem Droppa

                       ${data.whoDrops.map((drop) => `

                           <a href="${drop.link}" target="_blank" rel="noopener noreferrer">
                               <img class="item-name-icon" src="${drop.icon}" />
                               ${drop.name}
                           </a>
`).join("")}

`; 

               }

               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 += `

Usado para craftar

                       ${materialTo.map((material) => `

                               <img class="item-name-icon" src="${material.icon}" />

                           ${material.name}
`).join("")}

`; 

               }
           }
       };

       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>

</body> </html>

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