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

sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
// Base de dados local
<!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;
        }
    </style>
</head>
<body>
    <input type="text" id="search" placeholder="Busque um item..." />
    <div id="suggest"></div>
    <div id="content"></div>
    <script>
        // Base de dados local
         const allData = [
         const allData = [
             {
             {
Linha 8: Linha 70:
                 "link": "https://wiki.pokexgames.com/index.php/Bag_Of_Pollem",
                 "link": "https://wiki.pokexgames.com/index.php/Bag_Of_Pollem",
                 "isNightmare": false,
                 "isNightmare": false,
                 "whoDrops":[
                 "whoDrops": [
      {
                    {
        "id": 1,
                        "id": 1,
        "icon": "https://wiki.pokexgames.com/images/5/5c/001-Bulbasaur.png",
                        "icon": "https://wiki.pokexgames.com/images/5/5c/001-Bulbasaur.png",
        "link": "https://wiki.pokexgames.com/index.php/Bulbasaur",
                        "link": "https://wiki.pokexgames.com/index.php/Bulbasaur",
        "name": "Bulbasaur"
                        "name": "Bulbasaur"
      },
                    },
      {
                    // outros dados omitidos para simplicidade...
        "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,
                 "id": 1884,
Linha 199: Linha 100:
                             "id": 532
                             "id": 532
                         },
                         },
                         // Outros materiais...
                         // outros materiais omitidos para simplicidade...
                     ]
                     ]
                 }
                 }
Linha 212: Linha 113:
         ];
         ];


const search = document.getElementById("search");
        const search = document.getElementById("search");
const suggest = document.getElementById("suggest");
        const suggest = document.getElementById("suggest");
const content = document.getElementById("content");
        const content = document.getElementById("content");


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


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


    content.innerHTML = `
            content.innerHTML = `
    <div class="item-name">
            <div class="item-name">
        <img class="item-name-icon" src="${data.icon}" />
                <img class="item-name-icon" src="${data.icon}" />
        <span>${data.name}</span>
                <span>${data.name}</span>
    </div>`;
            </div>`;


    if (data.craft) {
            if (data.craft) {
        content.innerHTML += `
                content.innerHTML += `
        <h3>Craft</h3>
                <h3>Craft</h3>
        <div class="craft">
                <div class="craft">
            <p><b>Quantidade:</b> ${data.craft.quantity}</p>
                    <p><b>Quantidade:</b> ${data.craft.quantity}</p>
            <p><b>Skill:</b> ${data.craft.skill} - Rank ${data.craft.rank}</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>Tempo de Craft:</b> ${data.craft.cooldownText}</p>
            <p><b>Profissão:</b> ${data.craft.profession}</p>
                    <p><b>Profissão:</b> ${data.craft.profession}</p>
            <p><b>Materiais:</b></p>
                    <p><b>Materiais:</b></p>
            <div class="materials">
                    <div class="materials">
                ${data.craft.materials.map((material) => `
                        ${data.craft.materials.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>
                            ${material.quantity}x ${material.name}
                        </div>`).join("")}
                     </div>
                     </div>
                    ${material.quantity}x ${material.name}
                 </div>`;
                 </div>`).join("")}
             }
             </div>
        </div>`;
    }


    const materialTo = allData.filter((item) => {
            const materialTo = allData.filter((item) => {
        if (!item.craft?.materials) return false;
                if (!item.craft?.materials) return false;
        return item.craft.materials.some((m) => m.id == id);
                return item.craft.materials.some((m) => m.id == id);
    });
            });


    if (materialTo.length) {
            if (materialTo.length) {
        content.innerHTML += `
                content.innerHTML += `
        <h3>Usado para craftar</h3>
                <h3>Usado para craftar</h3>
        <div class="materials">
                <div class="materials">
            ${materialTo.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.name}
                        ${material.name}
            </div>`).join("")}
                    </div>`).join("")}
        </div>`;
                </div>`;
    }
            }
};
        };


document.addEventListener("click", (e) => {
        document.addEventListener("click", (e) => {
    if (e.target.classList.contains("suggest-item")) {
            if (e.target.classList.contains("suggest-item")) {
        e.preventDefault();
                e.preventDefault();
        setItem(e.target.dataset.itemId);
                setItem(e.target.dataset.itemId);
    }
            }
});
        });


search.addEventListener("input", () => {
        search.addEventListener("input", () => {
    const value = search.value?.toLowerCase();
            const value = search.value?.toLowerCase();
    suggest.innerHTML = "";
            suggest.innerHTML = "";
    allData.forEach((data) => {
            allData.forEach((data) => {
        if (data.name.toLowerCase().includes(value)) {
                if (data.name.toLowerCase().includes(value)) {
            const div = document.createElement("div");
                    const div = document.createElement("div");
            div.innerHTML = `
                    div.innerHTML = `
            <img src="${data.icon}" class="suggest-icon" lazy />
                    <img src="${data.icon}" class="suggest-icon" lazy />
            <a class="suggest-item" href="#" data-item-id="${data.id}">${data.name}</a>`;
                    <a class="suggest-item" href="#" data-item-id="${data.id}">${data.name}</a>`;
            suggest.appendChild(div);
                    suggest.appendChild(div);
        }
                }
    });
            });
});
        });
    </script>
</body>
</html>
5 802

edições