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

Edição das 02h18min 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>SelectItem</title>
   <style>
       /* Estilos similares aos fornecidos */
       .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;
       }
   </style>

</head>

<body>

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

   <script>
       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"
     },
     {
       "id": 2,
       "icon": "https://wiki.pokexgames.com/images/c/c6/003-Venusaur.png",
       "link": "https://wiki.pokexgames.com/index.php/Venusaur",
       "name": "Venusaur"
     },
     {
       "id": 3,
       "icon": "https://wiki.pokexgames.com/images/f/f0/003-MegaVenusaur.png",
       "link": "https://wiki.pokexgames.com/index.php/Mega_Venusaur",
       "name": "Mega Venusaur"
     },
     {
       "id": 4,
       "icon": "https://wiki.pokexgames.com/images/2/2a/Sh_venu.png",
       "link": "https://wiki.pokexgames.com/index.php/Shiny_Venusaur",
       "name": "Shiny Venusaur"
     },
     {
       "id": 5,
       "icon": "https://wiki.pokexgames.com/images/4/4e/012-Butterfree.png",
       "link": "https://wiki.pokexgames.com/index.php/Butterfree",
       "name": "Butterfree"
     },
     {
       "id": 6,
       "icon": "https://wiki.pokexgames.com/images/2/27/012-Sh_Butterfree.png",
       "link": "https://wiki.pokexgames.com/index.php/Shiny_Butterfree",
       "name": "Shiny Butterfree"
     },
     {
       "id": 7,
       "icon": "https://wiki.pokexgames.com/images/a/ad/015-Beedrill.png",
       "link": "https://wiki.pokexgames.com/index.php/Beedrill",
       "name": "Beedrill"
     },
     {
       "id": 8,
       "icon": "https://wiki.pokexgames.com/images/b/ba/015-Sh_Beedrill.png",
       "link": "https://wiki.pokexgames.com/index.php/Shiny_Beedrill",
       "name": "Shiny Beedrill"
     },
     {
       "id": 9,
       "icon": "https://wiki.pokexgames.com/images/1/1a/043-Oddish.png",
       "link": "https://wiki.pokexgames.com/index.php/Oddish",
       "name": "Oddish"
     },
     {
       "id": 10,
       "icon": "https://wiki.pokexgames.com/images/c/cc/043-Sh_Oddish.png",
       "link": "https://wiki.pokexgames.com/index.php/Shiny_Oddish",
       "name": "Shiny Oddish"
     },
     {
       "id": 11,
       "icon": "https://wiki.pokexgames.com/images/9/92/044-Gloom.png",
       "link": "https://wiki.pokexgames.com/index.php/Gloom",
       "name": "Gloom"
     },
     {
       "id": 12,
       "icon": "https://wiki.pokexgames.com/images/a/ab/045-Vileplume.png",
       "link": "https://wiki.pokexgames.com/index.php/Vileplume",
       "name": "Vileplume"
     },
     {
       "id": 13,
       "icon": "https://wiki.pokexgames.com/images/8/8e/Shinyvil.png",
       "link": "https://wiki.pokexgames.com/index.php/Shiny_Vileplume",
       "name": "Shiny Vileplume"
     },
     {
       "id": 14,
       "icon": "https://wiki.pokexgames.com/images/e/e7/046-Paras.png",
       "link": "https://wiki.pokexgames.com/index.php/Paras",
       "name": "Paras"
     },
     {
       "id": 15,
       "icon": "https://wiki.pokexgames.com/images/5/56/047-Parasect.png",
       "link": "https://wiki.pokexgames.com/index.php/Parasect",
       "name": "Parasect"
     },
     {
       "id": 16,
       "icon": "https://wiki.pokexgames.com/images/a/ab/048-Venonat.png",
       "link": "https://wiki.pokexgames.com/index.php/Venonat",
       "name": "Venonat"
     },
     {
       "id": 17,
       "icon": "https://wiki.pokexgames.com/images/e/ec/049-Venomoth.png",
       "link": "https://wiki.pokexgames.com/index.php/Venomoth",
       "name": "Venomoth"
     },
     {
       "id": 18,
       "icon": "https://wiki.pokexgames.com/images/0/03/049-Sh_Venomoth.png",
       "link": "https://wiki.pokexgames.com/index.php/Shiny_Venomoth",
       "name": "Shiny Venomoth"
     },
     {
       "id": 19,
       "icon": "https://wiki.pokexgames.com/images/b/bf/152-Chikorita.png",
       "link": "https://wiki.pokexgames.com/index.php/Chikorita",
       "name": "Chikorita"
     },
     {
       "id": 20,
       "icon": "https://wiki.pokexgames.com/images/f/fc/153-Bayleef.png",
       "link": "https://wiki.pokexgames.com/index.php/Bayleef",
       "name": "Bayleef"
     },
     {
       "id": 21,
       "icon": "https://wiki.pokexgames.com/images/2/2f/154-Meganium.png",
       "link": "https://wiki.pokexgames.com/index.php/Meganium",
       "name": "Meganium"
     },
     {
       "id": 22,
       "icon": "https://wiki.pokexgames.com/images/1/1b/154-Sh_Meganium.png",
       "link": "https://wiki.pokexgames.com/index.php/Shiny_Meganium",
       "name": "Shiny Meganium"
     },
     {
       "id": 23,
       "icon": "https://wiki.pokexgames.com/images/c/c7/187-Hoppip.png",
       "link": "https://wiki.pokexgames.com/index.php/Hoppip",
       "name": "Hoppip"
     },
     {
       "id": 24,
       "icon": "https://wiki.pokexgames.com/images/1/14/188-Skiploom.png",
       "link": "https://wiki.pokexgames.com/index.php/Skiploom",
       "name": "Skiploom"
     },
     {
       "id": 25,
       "icon": "https://wiki.pokexgames.com/images/e/ee/189-Jumpluff.png",
       "link": "https://wiki.pokexgames.com/index.php/Jumpluff",
       "name": "Jumpluff"
     },
     {
       "id": 26,
       "icon": "https://wiki.pokexgames.com/images/5/52/407-Roserade.png",
       "link": "https://wiki.pokexgames.com/index.php/Roserade",
       "name": "Roserade"
     },
     {
       "id": 27,
       "icon": "https://wiki.pokexgames.com/images/d/dc/412-Burmy.png",
       "link": "https://wiki.pokexgames.com/index.php/Burmy",
       "name": "Burmy"
     },
     {
       "id": 28,
       "icon": "https://wiki.pokexgames.com/images/c/cf/616-Shelmet.png",
       "link": "https://wiki.pokexgames.com/index.php/Shelmet",
       "name": "Shelmet"
     }
   ]
 },
           {
               "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...
                   ]
               }
           },
           {
               "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.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("")}

`;

           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>

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

Edição das 02h18min de 23 de agosto de 2024

Craft

Usado para craftar

Menu de navegação

Pesquisa