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

De PokeXGames
Ir para navegação Ir para pesquisar
(Limpou toda a página)
Etiquetas: anulando Reversão manual
Sem resumo de edição
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>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..." />
    <div id="suggest"></div>
    <div id="content"></div>
    <!-- Base de dados será carregada de uma outra página -->
    <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": [
                    // Dados dos drops...
                ]
            },
            {
                "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 = `
            <div class="item-name">
                <img class="item-name-icon" src="${data.icon}" />
                <span>${data.name}</span>
            </div>`;
            if (data.craft) {
                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>`;
            }
            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>
</body>
</html>

Edição das 02h16min 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": [
                   // Dados dos drops...
               ]
           },
           {
               "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>