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

Ir para navegação Ir para pesquisar

Widget:Test (ver código-fonte)

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

2 078 bytes removidos ,  23 agosto
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
<!DOCTYPE html>
// Base de dados local
<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 = [
         const allData = [
             {
             {
Linha 278: Linha 212:
         ];
         ];


        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>
                 </div>`;
                    ${material.quantity}x ${material.name}
            }
                 </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) {
                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 (materialTo.length) {
             if (e.target.classList.contains("suggest-item")) {
         content.innerHTML += `
                 e.preventDefault();
        <h3>Usado para craftar</h3>
                 setItem(e.target.dataset.itemId);
        <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>`;
    }
};


        search.addEventListener("input", () => {
document.addEventListener("click", (e) => {
            const value = search.value?.toLowerCase();
    if (e.target.classList.contains("suggest-item")) {
            suggest.innerHTML = "";
        e.preventDefault();
            allData.forEach((data) => {
        setItem(e.target.dataset.itemId);
                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>
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);
        }
    });
});
Renee
Administradores
5 802

edições

Disponível em “https://wiki.pokexgames.com/index.php/Especial:MobileDiff/85365”

Menu de navegação