endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

atlas revamp functionality (except filters)

Browse source
This commit is contained in:
fin444 2022-08-13 11:48:16 -07:00
parent e071140680
commit ce0b3d4464
2 changed files with 149 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
items/index.html
View file

@ -50,30 +50,30 @@
</div> </div>
<div class = "row"> <div class = "row">
<div class = "col-lg col-sm-12"> <div class = "col-lg col-sm-12">
<div class = "col"><span class = "fw-bold">Type:</span> <span style = "cursor: pointer; float: right;"><span>All</span> &nbsp; <span>None</span></span></div> <div class = "col"><span class = "fw-bold">Type:</span> <span style = "cursor: pointer; float: right;"><span id = "all-types">All</span> &nbsp; <span id = "none-types">None</span></span></div>
<div id = "type-box"> <div id = "type-box">
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 0 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 0 0;" id = "type-bow"></div>
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 9.09091% 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 9.09091% 0;" id = "type-spear"></div>
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 18.1818% 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 18.1818% 0;" id = "type-wand"></div>
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 27.2727% 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 27.2727% 0;" id = "type-dagger"></div>
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 36.3636% 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 36.3636% 0;" id = "type-relik"></div>
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 45.4545% 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 45.4545% 0;" id = "type-helmet"></div>
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 54.5455% 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 54.5455% 0;" id = "type-chestplate"></div>
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 63.6364% 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 63.6364% 0;" id = "type-leggings"></div>
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 72.7273% 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 72.7273% 0;" id = "type-boots"></div>
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 81.8182% 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 81.8182% 0;" id = "type-ring"></div>
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 90.9091% 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 90.9091% 0;" id = "type-bracelet"></div>
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 100% 0;"></div> <div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/old.png'); background-position: 100% 0;" id = "type-necklace"></div>
</div> </div>
<p class="error col-auto"></p> <p class="error col-auto"></p>
</div> </div>
</div> </div>
<div class = "row"> <div class = "row">
<div class = "col-lg col-sm-12"> <div class = "col-lg col-sm-12">
<div class = "col"><span class = "fw-bold">Rarity:</span> <span style = "cursor: pointer; float: right;"><span>All</span> &nbsp; <span>None</span></span></div> <div class = "col"><span class = "fw-bold">Rarity:</span> <span style = "cursor: pointer; float: right;"><span id = "all-rarities">All</span> &nbsp; <span id = "none-rarities">None</span></span></div>
<div id = "rarity-box"> <div id = "rarity-box">
<!-- unfortunately they must be stacked up like this because newlines are considered spaces and muck up the organization --> <!-- unfortunately they must be stacked up like this because newlines are considered spaces and muck up the organization -->
<div id = "rarity-normal"><b>N</b></div><div id = "rarity-unique"><b>U</b></div><div id = "rarity-set"><b>S</b></div><div id = "rarity-rare"><b>R</b></div><div id = "rarity-legendary"><b>L</b></div><div id = "rarity-fabled"><b>F</b></div><div id = "rarity-mythic"><b>M</b></div> <div id = "rarity-normal" class = "rarity-selected"><b>N</b></div><div id = "rarity-unique" class = "rarity-selected"><b>U</b></div><div id = "rarity-set" class = "rarity-selected"><b>S</b></div><div id = "rarity-rare" class = "rarity-selected"><b>R</b></div><div id = "rarity-legendary" class = "rarity-selected"><b>L</b></div><div id = "rarity-fabled" class = "rarity-selected"><b>F</b></div><div id = "rarity-mythic" class = "rarity-selected"><b>M</b></div>
</div> </div>
<p class="error col-auto"></p> <p class="error col-auto"></p>
</div> </div>
@ -101,12 +101,12 @@
<div class = "row"> <div class = "row">
<div class = "col-auto" style = "width: 12.5%;"></div> <div class = "col-auto" style = "width: 12.5%;"></div>
<div class = "col-auto"> <div class = "col-auto">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "search-button" onclick = "doItemSearch()"> <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "search-button" onclick = "do_item_search()">
Search! Search!
</button> </button>
</div> </div>
<div class = "col-auto"> <div class = "col-auto">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetItemSearch()"> <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "reset_item_search()">
Reset Reset
</button> </button>
</div> </div>

157
js/items.js
View file

@ -112,9 +112,9 @@ for (let x in special_mappings) {
let item_categories = ["armor", "accessory", "weapon"]; let item_categories = ["armor", "accessory", "weapon"];
function applyQuery(items, query) { const types = {bow: true, spear: true, wand: true, dagger: true, relik: true, helmet: true, chestplate: true, leggings: true, boots: true, ring: true, bracelet: true, necklace: true};
return items.filter(query.filter, query).sort(query.compare); const rarities = {normal: true, unique: true, set: true, rare: true, legendary: true, fabled: true, mythic: true};
} const filters = [];
function displayItems(items_copy) { function displayItems(items_copy) {
let items_parent = document.getElementById("search-results"); let items_parent = document.getElementById("search-results");
@ -141,48 +141,55 @@ let expr_parser;
function do_item_search() { function do_item_search() {
window.scrollTo(0, 0); window.scrollTo(0, 0);
let queries = []; let queries = [];
queries.push('f:name?="'+document.getElementById("item-name-choice").value.trim()+'"');
const cat_or_type = document.getElementById("item-category-choice").value; // name
if (item_types.includes(cat_or_type)) { if (document.getElementById("item-name-choice").value != "") {
queries.push('f:type="'+cat_or_type+'"'); queries.push("f:name?=\"" + document.getElementById("item-name-choice").value.trim() + "\"");
}
else if (item_categories.includes(cat_or_type)) {
queries.push('f:cat="'+cat_or_type+'"');
} }
let rarity = document.getElementById("item-rarity-choice").value; // types
if (rarity) { let allTypes = true;
if (rarity === "ANY") { let typeQuery = "f:("
for (const type of Object.keys(types)) {
if (types[type]) {
typeQuery += "type=\"" + type + "\"|";
} else {
allTypes = false;
} }
else if (rarity === "Sane") {
queries.push('f:tiername!="mythic"');
}
else {
queries.push('f:tiername="'+rarity+'"');
} }
if (!allTypes) {
queries.push(typeQuery.substring(0, typeQuery.length - 1) + ")");
} }
let level_raw = document.getElementById("item-level-choice").value; // rarities
if (!level_raw) { level_raw = '1-106'; }; let allRarities = true;
const level_dat = level_raw.split("-"); let rarityQuery = "f:("
queries.push('f:(lvl>='+parseInt(level_dat[0])+'&lvl<='+parseInt(level_dat[1])+')'); for (const rarity of Object.keys(rarities)) {
if (rarities[rarity]) {
rarityQuery += "tiername=\"" + rarity + "\"|";
} else {
allRarities = false;
}
}
if (!allRarities) {
queries.push(rarityQuery.substring(0, rarityQuery.length - 1) + ")");
}
for (let i = 1; i <= 4; ++i) { // filters
let raw_dat = document.getElementById("filter"+i+"-choice").value; // for (let i = 1; i <= 4; ++i) {
let filter_dat = translate_mappings[raw_dat]; // let raw_dat = document.getElementById("filter"+i+"-choice").value;
if (filter_dat !== undefined) { // let filter_dat = translate_mappings[raw_dat];
queries.push("s:"+filter_dat); // if (filter_dat !== undefined) {
queries.push("f:"+filter_dat+"!=0"); // queries.push("s:"+filter_dat);
continue; // queries.push("f:"+filter_dat+"!=0");
} // continue;
filter_dat = special_mappings[raw_dat]; // }
if (filter_dat !== undefined) { // filter_dat = special_mappings[raw_dat];
queries.push(filter_dat); // if (filter_dat !== undefined) {
continue; // queries.push(filter_dat);
} // continue;
} // }
// }
let filter_query = "true"; let filter_query = "true";
let sort_queries = []; let sort_queries = [];
@ -218,30 +225,63 @@ function do_item_search() {
displayItems(results); displayItems(results);
} }
function reset_item_search() {
const reset_fields = ["item-name-choice", "item-category-choice", "item-rarity-choice", "item-level-choice", "filter1-choice", "filter2-choice", "filter3-choice", "filter4-choice"]
for (const field of reset_fields) {
document.getElementById(field).value = "";
}
}
function init_items() { function init_items() {
search_db = items.filter( i => ! i.remapID ).map( i => [i, expandItem(i, [])] ); search_db = items.filter( i => ! i.remapID ).map( i => [i, expandItem(i, [])] );
expr_parser = new ExprParser(itemQueryProps, itemQueryFuncs); expr_parser = new ExprParser(itemQueryProps, itemQueryFuncs);
//init dropdowns
let filter_inputs = new Map([["item-category", ["ALL", "armor", "helmet", "chestplate", "leggings", "boots", "accessory", "ring", "bracelet", "necklace", "weapon", "wand", "spear", "bow", "dagger", "relik"]], // init type buttons
["item-rarity", ["ANY", "Normal", "Unique", "Set", "Rare", "Legendary", "Fabled", "Mythic", "Sane"]], for (const type of Object.keys(types)) {
["filter1", item_filters], document.getElementById("type-" + type).addEventListener("click", function() {
["filter2", item_filters], types[type] = !types[type];
["filter3", item_filters], this.classList.toggle("type-selected");
["filter4", item_filters]]); });
for (const [field, data] of filter_inputs) { }
let field_choice = document.getElementById(field+"-choice"); document.getElementById("all-types").addEventListener("click", function() {
// show dropdown on click for (const type of Object.keys(types)) {
types[type] = true;
document.getElementById("type-" + type).classList.add("type-selected");
}
});
document.getElementById("none-types").addEventListener("click", function() {
for (const type of Object.keys(types)) {
types[type] = false;
document.getElementById("type-" + type).classList.remove("type-selected");
}
});
// init rarity buttons
for (const rarity of Object.keys(rarities)) {
document.getElementById("rarity-" + rarity).addEventListener("click", function() {
rarities[rarity] = !rarities[rarity];
this.classList.toggle("rarity-selected");
});
}
document.getElementById("all-rarities").addEventListener("click", function() {
for (const rarity of Object.keys(rarities)) {
rarities[rarity] = true;
document.getElementById("rarity-" + rarity).classList.add("rarity-selected");
}
});
document.getElementById("none-rarities").addEventListener("click", function() {
for (const rarity of Object.keys(rarities)) {
rarities[rarity] = false;
document.getElementById("rarity-" + rarity).classList.remove("rarity-selected");
}
});
}
function reset_item_search() {
document.getElementById("item-name-choice").value = "";
document.getElementById("all-types").click();
document.getElementById("all-rarities").click();
}
function initFilterDropdown(filter) {
let field_choice = filter.input_elem;
field_choice.onclick = function() {field_choice.dispatchEvent(new Event('input', {bubbles:true}));}; field_choice.onclick = function() {field_choice.dispatchEvent(new Event('input', {bubbles:true}));};
filter_inputs.set(field, new autoComplete({ filter.autoComplete = new autoComplete({
data: { data: {
src: data, src: item_filters,
}, },
threshold: 0, threshold: 0,
selector: "#"+ field +"-choice", selector: "#"+ field +"-choice",
@ -258,7 +298,7 @@ function init_items() {
list.style.width = position.width+"px"; list.style.width = position.width+"px";
list.style.maxHeight = position.height * 4 +"px"; list.style.maxHeight = position.height * 4 +"px";
if (!data.results.length) { if (!item_filters.results.length) {
const message = make_elem('li', ['scaled-font'], {textContent: "No results found!"}); const message = make_elem('li', ['scaled-font'], {textContent: "No results found!"});
list.prepend(message); list.prepend(message);
}; };
@ -277,8 +317,7 @@ function init_items() {
}, },
}, },
} }
})); });
}
} }
(async function() { (async function() {