Merge pull request #222 from hppeng-wynn/atlas-upgrades
misc atlas improvements
This commit is contained in:
hppeng-wynn
GitHub
commit
b32cd242df
4 changed files with 116 additions and 32 deletions
|
|
@ -89,7 +89,11 @@ input.min-max-input {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
#filter-container > div > div > * {
|
||||
.delete-filter {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#filter-container > div > div > *, #exclude-container > div > div > * {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -95,18 +95,18 @@
|
|||
<div class = "col-lg col-sm-12">
|
||||
<div class = "col"><span class = "fw-bold">Type:</span> <span style = "cursor: pointer; float: right;"><span id = "all-types">All</span> <span id = "none-types">None</span></span></div>
|
||||
<div id = "type-box">
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 0 0;" id = "type-bow"></div>
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 9.09091% 0;" id = "type-spear"></div>
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 18.1818% 0;" id = "type-wand"></div>
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 27.2727% 0;" id = "type-dagger"></div>
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 36.3636% 0;" id = "type-relik"></div>
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 45.4545% 0;" id = "type-helmet"></div>
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 54.5455% 0;" id = "type-chestplate"></div>
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 63.6364% 0;" id = "type-leggings"></div>
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 72.7273% 0;" id = "type-boots"></div>
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 81.8182% 0;" id = "type-ring"></div>
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 90.9091% 0;" id = "type-bracelet"></div>
|
||||
<div class = "item-display-new-toggleable type-selected" style = "background-image: url('../media/items/new.png'); background-position: 100% 0;" id = "type-necklace"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 0 0;" id = "type-bow"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 9.09091% 0;" id = "type-spear"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 18.1818% 0;" id = "type-wand"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 27.2727% 0;" id = "type-dagger"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 36.3636% 0;" id = "type-relik"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 45.4545% 0;" id = "type-helmet"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 54.5455% 0;" id = "type-chestplate"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 63.6364% 0;" id = "type-leggings"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 72.7273% 0;" id = "type-boots"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 81.8182% 0;" id = "type-ring"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 90.9091% 0;" id = "type-bracelet"></div>
|
||||
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/new.png'); background-position: 100% 0;" id = "type-necklace"></div>
|
||||
</div>
|
||||
<p class="error col-auto"></p>
|
||||
</div>
|
||||
|
|
@ -122,11 +122,22 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id = "filter-container" class = "col-lg-5">
|
||||
<div class = "col fw-bold">Filters:</div>
|
||||
<div class = "row">
|
||||
<div id = "add-filter" class = "col fw-bold" style = "cursor: pointer; padding-top: 5px;">
|
||||
+ Add Filter
|
||||
<div class = "col-lg-5">
|
||||
<div id = "filter-container" class = "col">
|
||||
<div class = "col fw-bold">Filters:</div>
|
||||
<div class = "row">
|
||||
<div id = "add-filter" class = "col fw-bold" style = "cursor: pointer; padding-top: 5px;">
|
||||
+ Add Filter
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div id = "exclude-container" class = "col">
|
||||
<div class = "col fw-bold">Excluded Filters:</div>
|
||||
<div class = "row">
|
||||
<div id = "add-exclude" class = "col fw-bold" style = "cursor: pointer; padding-top: 5px;">
|
||||
+ Add Excluded Filter
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
90
js/items.js
90
js/items.js
|
|
@ -5,9 +5,9 @@ const translate_mappings = {
|
|||
//"Set": "set",
|
||||
"Powder Slots": "slots",
|
||||
//"Type": "type",
|
||||
"Drop type": "drop",
|
||||
"Quest requirement": "quest",
|
||||
"Restriction": "restrict",
|
||||
//"Drop type": "drop", BROKEN
|
||||
//"Quest requirement": "quest", BROKEN
|
||||
//"Restriction": "restrict", BROKEN
|
||||
//"Base Neutral Damage": "nDam",
|
||||
//"Base Fire Damage": "fDam",
|
||||
//"Base Water Damage": "wDam",
|
||||
|
|
@ -98,7 +98,7 @@ const special_mappings = {
|
|||
// "No Defense Req": "defReq=0",
|
||||
};
|
||||
|
||||
let item_filters = []
|
||||
let item_filters = [];
|
||||
for (let x in translate_mappings) {
|
||||
item_filters.push(x);
|
||||
}
|
||||
|
|
@ -108,9 +108,9 @@ for (let x in special_mappings) {
|
|||
|
||||
let item_categories = ["armor", "accessory", "weapon"];
|
||||
|
||||
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};
|
||||
const types = {bow: false, spear: false, wand: false, dagger: false, relik: false, helmet: false, chestplate: false, leggings: false, boots: false, ring: false, bracelet: false, necklace: false};
|
||||
const rarities = {normal: true, unique: true, set: true, rare: true, legendary: true, fabled: true, mythic: true};
|
||||
const filters = [];
|
||||
const filters = [], excludes = [];
|
||||
let filter_id_counter = 0;
|
||||
|
||||
function displayItems(items_copy) {
|
||||
|
|
@ -135,6 +135,7 @@ let search_db;
|
|||
let expr_parser;
|
||||
|
||||
function do_item_search() {
|
||||
document.getElementById("summary").style.color = "red"; // to display errors, changed to white if search successful
|
||||
window.scrollTo(0, 0);
|
||||
let queries = [];
|
||||
|
||||
|
|
@ -144,30 +145,38 @@ function do_item_search() {
|
|||
}
|
||||
|
||||
// types
|
||||
let allTypes = true;
|
||||
let allTypes = true, noTypes = true;
|
||||
let typeQuery = "f:("
|
||||
for (const type of Object.keys(types)) {
|
||||
if (types[type]) {
|
||||
typeQuery += "type=\"" + type + "\"|";
|
||||
noTypes = false;
|
||||
} else {
|
||||
allTypes = false;
|
||||
}
|
||||
}
|
||||
if (!allTypes) {
|
||||
if (noTypes) {
|
||||
document.getElementById("summary").innerHTML = "Error: Cannot search without at least 1 type selected";
|
||||
return;
|
||||
} else if (!allTypes) {
|
||||
queries.push(typeQuery.substring(0, typeQuery.length - 1) + ")");
|
||||
}
|
||||
|
||||
// rarities
|
||||
let allRarities = true;
|
||||
let allRarities = true, noRarities = true;
|
||||
let rarityQuery = "f:("
|
||||
for (const rarity of Object.keys(rarities)) {
|
||||
if (rarities[rarity]) {
|
||||
rarityQuery += "tiername=\"" + rarity + "\"|";
|
||||
noRarities = false;
|
||||
} else {
|
||||
allRarities = false;
|
||||
}
|
||||
}
|
||||
if (!allRarities) {
|
||||
if (noRarities) {
|
||||
document.getElementById("summary").innerHTML = "Error: Cannot search without at least 1 rarity selected";
|
||||
return;
|
||||
} else if (!allRarities) {
|
||||
queries.push(rarityQuery.substring(0, rarityQuery.length - 1) + ")");
|
||||
}
|
||||
|
||||
|
|
@ -176,7 +185,8 @@ function do_item_search() {
|
|||
let min = parseInt(filter.min_elem.value);
|
||||
let max = parseInt(filter.max_elem.value);
|
||||
if (min > max) {
|
||||
continue; // invalid range
|
||||
document.getElementById("summary").innerHTML = "Error: The minimum of filter " + filter.input_elem.value + " (" + min + ") is greater than its maximum (" + max + ")";
|
||||
return;
|
||||
}
|
||||
let zero_in_min_max = (isNaN(min) || min < 0) && (isNaN(max) || max > 0);
|
||||
|
||||
|
|
@ -185,7 +195,8 @@ function do_item_search() {
|
|||
if (filter_name === undefined) {
|
||||
filter_name = special_mappings[raw_name];
|
||||
if (filter_name === undefined) {
|
||||
continue; // not a valid filter
|
||||
document.getElementById("summary").innerHTML = "Error: The filter \"" + filter.input_elem.value + "\" is not recognized";
|
||||
return;
|
||||
}
|
||||
filter_name = "(" + filter_name + ")";
|
||||
}
|
||||
|
|
@ -202,6 +213,21 @@ function do_item_search() {
|
|||
queries.push("s:" + (filter.ascending ? "0-" : "") + filter_name);
|
||||
}
|
||||
|
||||
// excludes
|
||||
for (const exclude of excludes) {
|
||||
let raw_name = exclude.input_elem.value;
|
||||
let filter_name = translate_mappings[raw_name];
|
||||
if (filter_name === undefined) {
|
||||
filter_name = special_mappings[raw_name];
|
||||
if (filter_name === undefined) {
|
||||
document.getElementById("summary").innerHTML = "Error: The excluded filter \"" + exclude.input_elem.value + "\" is not recognized";
|
||||
return;
|
||||
}
|
||||
filter_name = "(" + filter_name + ")";
|
||||
}
|
||||
queries.push("f:" + filter_name + "!=0");
|
||||
}
|
||||
|
||||
let filter_query = "true";
|
||||
let sort_queries = [];
|
||||
console.log(queries);
|
||||
|
|
@ -232,7 +258,8 @@ function do_item_search() {
|
|||
document.getElementById("summary").textContent = e.message;
|
||||
return;
|
||||
}
|
||||
document.getElementById("summary").textContent = results.length + " results:"
|
||||
document.getElementById("summary").textContent = results.length + " results:";
|
||||
document.getElementById("summary").style.color = "white";
|
||||
displayItems(results);
|
||||
}
|
||||
|
||||
|
|
@ -282,6 +309,7 @@ function init_items() {
|
|||
|
||||
// filters
|
||||
document.getElementById("add-filter").addEventListener("click", create_filter);
|
||||
document.getElementById("add-exclude").addEventListener("click", create_exclude);
|
||||
create_filter();
|
||||
filters[0].input_elem.value = "Combat Level";
|
||||
init_filter_drag();
|
||||
|
|
@ -339,8 +367,14 @@ function create_filter() {
|
|||
col.appendChild(max);
|
||||
data.max_elem = max;
|
||||
|
||||
document.getElementById("filter-container").insertBefore(row, document.getElementById("add-filter").parentElement);
|
||||
let trash = make_elem("img", ["delete-filter"], {src: "../media/icons/trash.svg"});
|
||||
trash.addEventListener("click", function() {
|
||||
filters.splice(Array.from(row.parentElement.children).indexOf(row) - 1, 1);
|
||||
row.remove();
|
||||
});
|
||||
col.appendChild(trash);
|
||||
|
||||
document.getElementById("filter-container").insertBefore(row, document.getElementById("add-filter").parentElement);
|
||||
filters.push(data);
|
||||
init_filter_dropdown(data);
|
||||
}
|
||||
|
|
@ -410,6 +444,34 @@ function init_filter_drag() {
|
|||
});
|
||||
}
|
||||
|
||||
function create_exclude() {
|
||||
let data = {};
|
||||
|
||||
let row = make_elem("div", ["row", "filter-row"], {});
|
||||
let col = make_elem("div", ["col"], {});
|
||||
row.appendChild(col);
|
||||
data.div = row;
|
||||
|
||||
let filter_input = make_elem("input",
|
||||
["col", "border-dark", "text-light", "dark-5", "rounded", "scaled-font", "form-control", "form-control-sm", "filter-input"],
|
||||
{id: "filter-input-" + filter_id_counter, type: "text", placeholder: "Excluded Filter"}
|
||||
);
|
||||
filter_id_counter++;
|
||||
col.appendChild(filter_input);
|
||||
data.input_elem = filter_input;
|
||||
|
||||
let trash = make_elem("img", ["delete-filter"], {src: "../media/icons/trash.svg"});
|
||||
trash.addEventListener("click", function() {
|
||||
excludes.splice(Array.from(row.parentElement.children).indexOf(row) - 1, 1);
|
||||
row.remove();
|
||||
});
|
||||
col.appendChild(trash);
|
||||
|
||||
document.getElementById("exclude-container").insertBefore(row, document.getElementById("add-exclude").parentElement);
|
||||
excludes.push(data);
|
||||
init_filter_dropdown(data);
|
||||
}
|
||||
|
||||
function init_filter_dropdown(filter) {
|
||||
let field_choice = filter.input_elem;
|
||||
field_choice.onclick = function() {field_choice.dispatchEvent(new Event('input', {bubbles:true}));};
|
||||
|
|
|
|||
7
media/icons/trash.svg
Normal file
7
media/icons/trash.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 6H20L18.4199 20.2209C18.3074 21.2337 17.4512 22 16.4321 22H7.56786C6.54876 22 5.69264 21.2337 5.5801 20.2209L4 6Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.34491 3.14716C7.67506 2.44685 8.37973 2 9.15396 2H14.846C15.6203 2 16.3249 2.44685 16.6551 3.14716L18 6H6L7.34491 3.14716Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2 6H22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 11V16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14 11V16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 833 B |
Loading…
Reference in a new issue