5 802
edições
sem sumário de edição
(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> | |||