hppeng-wynn
GitHub
commit
8449c4f0c6
6 changed files with 441 additions and 206 deletions
117
css/items.css
117
css/items.css
|
|
@ -1,32 +1,101 @@
|
|||
.searchbox {
|
||||
grid-column: 1;
|
||||
padding: 0%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
width: 100%;
|
||||
gap: 5px;
|
||||
/* type selectors */
|
||||
|
||||
#type-box {
|
||||
cursor: pointer;
|
||||
overflow: auto;
|
||||
}
|
||||
#type-box > div {
|
||||
display: inline-block;
|
||||
width: calc(100% / 12);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.items {
|
||||
grid-column: 1;
|
||||
padding: 0%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
width: 100%;
|
||||
gap: 5px;
|
||||
grid-template-rows: masonry;
|
||||
.type-selected {
|
||||
background-color: #0a0;
|
||||
}
|
||||
|
||||
.itemsearch {
|
||||
padding: 0%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
width: 100%;
|
||||
gap: 5px;
|
||||
/* rarity selectors */
|
||||
|
||||
#rarity-box {
|
||||
cursor: pointer;
|
||||
width: 58.33%;
|
||||
text-align: center;
|
||||
}
|
||||
#rarity-box > div {
|
||||
width: calc(100% / 7);
|
||||
aspect-ratio: 1/1;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
#rarity-box > div > b {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
#rarity-box > div.rarity-selected > b {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.searchinput {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
#rarity-normal { color: #FFFFFF; }
|
||||
#rarity-normal.rarity-selected { background-color: #FFFFFF; }
|
||||
#rarity-unique { color: #FFFF55; }
|
||||
#rarity-unique.rarity-selected { background-color: #FFFF55; }
|
||||
#rarity-set { color: #55FF55; }
|
||||
#rarity-set.rarity-selected { background-color: #55FF55; }
|
||||
#rarity-rare { color: #FF55FF; }
|
||||
#rarity-rare.rarity-selected { background-color: #FF55FF; }
|
||||
#rarity-legendary { color: #55FFFF; }
|
||||
#rarity-legendary.rarity-selected { background-color: #55FFFF; }
|
||||
#rarity-fabled { color: #FF5555; }
|
||||
#rarity-fabled.rarity-selected { background-color: #FF5555; }
|
||||
#rarity-mythic { color: #AA00AA; }
|
||||
#rarity-mythic.rarity-selected { background-color: #AA00AA; }
|
||||
|
||||
/* filters */
|
||||
.filter-row {
|
||||
border: 1px solid #121212;
|
||||
}
|
||||
.filter-dragged-over {
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
.reorder-filter {
|
||||
height: 2ch;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input.filter-input {
|
||||
width: 27ch!important;
|
||||
max-width: 90%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.asc-icon {
|
||||
opacity: 0.25;
|
||||
width: 1.75ch;
|
||||
}
|
||||
.desc-icon {
|
||||
opacity: 0.25;
|
||||
width: 1.75ch;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
img.asc-sel {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
input.min-max-input {
|
||||
width: 6ch!important;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#filter-container > div > div > * {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
/* item display */
|
||||
@media (min-width: 576px) and (max-width: 991px) {
|
||||
div.col-sm-6 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
129
items/index.html
129
items/index.html
|
|
@ -18,6 +18,7 @@
|
|||
<link rel="stylesheet" href="../css/sq2bs.css">
|
||||
<link rel="stylesheet" href="../css/sidebar.css">
|
||||
<link rel="stylesheet" href="../css/wynnstyles.css">
|
||||
<link rel="stylesheet" href="../css/items.css">
|
||||
</head>
|
||||
<body class = "text-light d-flex justify-content-center" id = "body">
|
||||
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||
|
|
@ -74,101 +75,74 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font mt-lg-2" style="margin-top: 6vh;">
|
||||
<div class = "col">
|
||||
<div class = "row">
|
||||
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
|
||||
<div class = "row">
|
||||
<div class = "row" style = "margin-top: 3ch;">
|
||||
<div class = "col text-end">
|
||||
<a href = "../items_adv/">Advanced Item Search</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row">
|
||||
<div class = "col-auto" style = "width: 12.5%;"></div>
|
||||
<div class = "col-lg-4">
|
||||
<div class = "row">
|
||||
<div class = "col-lg-3 col-sm-12">
|
||||
<div class = "col-lg col-sm-12">
|
||||
<div class = "col fw-bold">Name:</div>
|
||||
<input class = "col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="item-name-choice" name="item-name-choice" placeholder="Item name (case insensitive)"/>
|
||||
<p class="error col"></p>
|
||||
</div>
|
||||
<div class = "col-lg-3 col-sm-12">
|
||||
<div class = "col fw-bold">Category:</div>
|
||||
<input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="item-category-choice" name="item-category-choice" placeholder="ALL"/>
|
||||
<datalist id="category-items">
|
||||
<option value="ALL">
|
||||
<option value="armor">
|
||||
<option value="helmet">
|
||||
<option value="chestplate">
|
||||
<option value="leggings">
|
||||
<option value="boots">
|
||||
<option value="accessory">
|
||||
<option value="ring">
|
||||
<option value="bracelet">
|
||||
<option value="necklace">
|
||||
<option value="weapon">
|
||||
<option value="wand">
|
||||
<option value="spear">
|
||||
<option value="bow">
|
||||
<option value="dagger">
|
||||
<option value="relik">
|
||||
</datalist>
|
||||
<p class="error"></p>
|
||||
</div>
|
||||
<div class = "col-lg-3 col-sm-12">
|
||||
<div class = "col fw-bold">Rarity:</div>
|
||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="item-rarity-choice" name="item-rarity-choice" placeholder="ANY"/>
|
||||
<datalist id = "rarity-items">
|
||||
<option value="ANY">
|
||||
<option value="Normal">
|
||||
<option value="Unique">
|
||||
<option value="Set">
|
||||
<option value="Rare">
|
||||
<option value="Legendary">
|
||||
<option value="Fabled">
|
||||
<option value="Mythic">
|
||||
<option value="Sane">
|
||||
</datalist>
|
||||
<p class="error col-auto"></p>
|
||||
</div>
|
||||
<div class = "col-lg-3 col-sm-12">
|
||||
<div class = "col fw-bold">Level Range:</div>
|
||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="item-level-choice" name="item-level-choice" placeholder = "1-106"/>
|
||||
<input class = "col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" style="width: 100%!important;" type="text" id="item-name-choice" name="item-name-choice" placeholder="Item name (case insensitive)"/>
|
||||
<p class="error col-auto"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row">
|
||||
<div class = "col-lg-3 col-sm-12">
|
||||
<div class = "col fw-bold">Filter 1:</div>
|
||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter1-choice" name="filter1-choice" placeholder="ANY"/>
|
||||
<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>
|
||||
<p class="error col-auto"></p>
|
||||
</div>
|
||||
<div class = "col-lg-3 col-sm-12">
|
||||
<div class = "col fw-bold">Filter 2:</div>
|
||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter2-choice" name="filter2-choice" placeholder="ANY"/>
|
||||
<p class="error col-auto"></p>
|
||||
</div>
|
||||
<div class = "col-lg-3 col-sm-12">
|
||||
<div class = "col fw-bold">Filter 3:</div>
|
||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter3-choice" name="filter3-choice" placeholder="ANY"/>
|
||||
<p class="error col-auto"></p>
|
||||
</div>
|
||||
<div class = "col-lg-3 col-sm-12">
|
||||
<div class = "col fw-bold">Filter 4:</div>
|
||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter4-choice" name="filter4-choice" placeholder="ANY"/>
|
||||
<p class="error col-auto"></p>
|
||||
</div>
|
||||
<datalist id = "filter-items"></datalist>
|
||||
</div>
|
||||
<div class = "row">
|
||||
<div class = "col-auto">
|
||||
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "search-button" onclick = "do_item_search()">
|
||||
Search!
|
||||
</button>
|
||||
<div class = "col-lg col-sm-12">
|
||||
<div class = "col"><span class = "fw-bold">Rarity:</span> <span style = "cursor: pointer; float: right;"><span id = "all-rarities">All</span> <span id = "none-rarities">None</span></span></div>
|
||||
<div id = "rarity-box">
|
||||
<!-- unfortunately they must be stacked up like this because newlines are considered spaces and muck up the organization -->
|
||||
<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>
|
||||
<p class="error col-auto"></p>
|
||||
</div>
|
||||
<div class = "col-auto">
|
||||
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "reset_item_search()">
|
||||
Reset
|
||||
</button>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row">
|
||||
<div class = "col-auto" style = "width: 12.5%;"></div>
|
||||
<div class = "col-auto">
|
||||
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "search-button" onclick = "do_item_search()">
|
||||
Search!
|
||||
</button>
|
||||
</div>
|
||||
<div class = "col-auto">
|
||||
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "reset_item_search()">
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class = "row box-title justify-content-center" id = "summary">
|
||||
</div>
|
||||
<div class = "row" id = "search-results">
|
||||
|
|
@ -177,6 +151,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
|
||||
<script type="text/javascript" src="../js/drag_drop_touch.js"></script>
|
||||
<script type="text/javascript" src="../js/utils.js"></script>
|
||||
<script type="text/javascript" src="../js/build_utils.js"></script>
|
||||
<script type="text/javascript" src="../js/icons.js"></script>
|
||||
|
|
|
|||
8
js/drag_drop_touch.js
Normal file
8
js/drag_drop_touch.js
Normal file
File diff suppressed because one or more lines are too long
382
js/items.js
382
js/items.js
|
|
@ -1,14 +1,10 @@
|
|||
const translate_mappings = {
|
||||
//"Name": "name",
|
||||
//"Display Name": "displayName",
|
||||
//"tier"Tier": ",
|
||||
//"Tier": "tier",
|
||||
//"Set": "set",
|
||||
"Powder Slots": "slots",
|
||||
//"Type": "type",
|
||||
//"armorType", (deleted)
|
||||
//"color", (deleted)
|
||||
//"lore", (deleted)
|
||||
//"material", (deleted)
|
||||
"Drop type": "drop",
|
||||
"Quest requirement": "quest",
|
||||
"Restriction": "restrict",
|
||||
|
|
@ -91,15 +87,15 @@ const translate_mappings = {
|
|||
};
|
||||
|
||||
const special_mappings = {
|
||||
"Sum (skill points)": "s:str+dex+int+def+agi",
|
||||
"Sum (Mana Sustain)": "s:mr+ms",
|
||||
"Sum (Life Sustain)": "s:hpr+ls",
|
||||
"Sum (Health + Health Bonus)": "s:hp+hpBonus",
|
||||
"No Strength Req": "f:strReq=0",
|
||||
"No Dexterity Req": "f:dexReq=0",
|
||||
"No Intelligence Req": "f:intReq=0",
|
||||
"No Agility Req": "f:agiReq=0",
|
||||
"No Defense Req": "f:defReq=0",
|
||||
"Sum (skill points)": "str+dex+int+def+agi",
|
||||
"Sum (Mana Sustain)": "mr+ms",
|
||||
"Sum (Life Sustain)": "hpr+ls",
|
||||
"Sum (Health + Health Bonus)": "hp+hpBonus",
|
||||
// "No Strength Req": "strReq=0",
|
||||
// "No Dexterity Req": "dexReq=0",
|
||||
// "No Intelligence Req": "intReq=0",
|
||||
// "No Agility Req": "agiReq=0",
|
||||
// "No Defense Req": "defReq=0",
|
||||
};
|
||||
|
||||
let item_filters = []
|
||||
|
|
@ -110,11 +106,12 @@ for (let x in special_mappings) {
|
|||
item_filters.push(x);
|
||||
}
|
||||
|
||||
let item_categories = [ "armor", "accessory", "weapon" ];
|
||||
let item_categories = ["armor", "accessory", "weapon"];
|
||||
|
||||
function applyQuery(items, query) {
|
||||
return items.filter(query.filter, query).sort(query.compare);
|
||||
}
|
||||
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 rarities = {normal: true, unique: true, set: true, rare: true, legendary: true, fabled: true, mythic: true};
|
||||
const filters = [];
|
||||
let filter_id_counter = 0;
|
||||
|
||||
function displayItems(items_copy) {
|
||||
let items_parent = document.getElementById("search-results");
|
||||
|
|
@ -122,7 +119,6 @@ function displayItems(items_copy) {
|
|||
if (i > 200) {break;}
|
||||
let item = items_copy[i].itemExp;
|
||||
let box = make_elem('div', ['col-lg-3', 'col-sm-6', 'p-2'], {id: 'item'+i});
|
||||
//box.addEventListener("dblclick", function() {set_item(item);}); TODO: ??
|
||||
|
||||
let bckgrdbox = make_elem("div", ["dark-7", "rounded", "px-2", "col-auto"], {id: 'item'+i+'b'});
|
||||
box.append(bckgrdbox);
|
||||
|
|
@ -141,47 +137,69 @@ let expr_parser;
|
|||
function do_item_search() {
|
||||
window.scrollTo(0, 0);
|
||||
let queries = [];
|
||||
queries.push('f:name?="'+document.getElementById("item-name-choice").value.trim()+'"');
|
||||
|
||||
const cat_or_type = document.getElementById("item-category-choice").value;
|
||||
if (item_types.includes(cat_or_type)) {
|
||||
queries.push('f:type="'+cat_or_type+'"');
|
||||
}
|
||||
else if (item_categories.includes(cat_or_type)) {
|
||||
queries.push('f:cat="'+cat_or_type+'"');
|
||||
// name
|
||||
if (document.getElementById("item-name-choice").value != "") {
|
||||
queries.push("f:name?=\"" + document.getElementById("item-name-choice").value.trim() + "\"");
|
||||
}
|
||||
|
||||
let rarity = document.getElementById("item-rarity-choice").value;
|
||||
if (rarity) {
|
||||
if (rarity === "ANY") {
|
||||
|
||||
}
|
||||
else if (rarity === "Sane") {
|
||||
queries.push('f:tiername!="mythic"');
|
||||
}
|
||||
else {
|
||||
queries.push('f:tiername="'+rarity+'"');
|
||||
// types
|
||||
let allTypes = true;
|
||||
let typeQuery = "f:("
|
||||
for (const type of Object.keys(types)) {
|
||||
if (types[type]) {
|
||||
typeQuery += "type=\"" + type + "\"|";
|
||||
} else {
|
||||
allTypes = false;
|
||||
}
|
||||
}
|
||||
if (!allTypes) {
|
||||
queries.push(typeQuery.substring(0, typeQuery.length - 1) + ")");
|
||||
}
|
||||
|
||||
let level_raw = document.getElementById("item-level-choice").value;
|
||||
if (!level_raw) { level_raw = '1-106'; };
|
||||
const level_dat = level_raw.split("-");
|
||||
queries.push('f:(lvl>='+parseInt(level_dat[0])+'&lvl<='+parseInt(level_dat[1])+')');
|
||||
// rarities
|
||||
let allRarities = true;
|
||||
let rarityQuery = "f:("
|
||||
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) {
|
||||
let raw_dat = document.getElementById("filter"+i+"-choice").value;
|
||||
let filter_dat = translate_mappings[raw_dat];
|
||||
if (filter_dat !== undefined) {
|
||||
queries.push("s:"+filter_dat);
|
||||
queries.push("f:"+filter_dat+"!=0");
|
||||
continue;
|
||||
// filters
|
||||
for (const filter of filters) {
|
||||
let min = parseInt(filter.min_elem.value);
|
||||
let max = parseInt(filter.max_elem.value);
|
||||
if (min > max) {
|
||||
continue; // invalid range
|
||||
}
|
||||
filter_dat = special_mappings[raw_dat];
|
||||
if (filter_dat !== undefined) {
|
||||
queries.push(filter_dat);
|
||||
continue;
|
||||
let zero_in_min_max = (isNaN(min) || min <= 0) && (isNaN(max) || max >= 0);
|
||||
|
||||
let raw_name = filter.input_elem.value;
|
||||
let filter_name = translate_mappings[raw_name];
|
||||
if (filter_name === undefined) {
|
||||
filter_name = special_mappings[raw_name];
|
||||
if (filter_name === undefined) {
|
||||
continue; // not a valid filter
|
||||
}
|
||||
filter_name = "(" + filter_name + ")";
|
||||
}
|
||||
|
||||
if (!isNaN(min)) {
|
||||
queries.push("f:" + filter_name + ">=" + min);
|
||||
}
|
||||
if (!isNaN(max)) {
|
||||
queries.push("f:" + filter_name + "<=" + max);
|
||||
}
|
||||
if (zero_in_min_max) {
|
||||
queries.push("f:" + filter_name + "!=0");
|
||||
}
|
||||
queries.push("s:" + (filter.ascending ? "0-" : "") + filter_name);
|
||||
}
|
||||
|
||||
let filter_query = "true";
|
||||
|
|
@ -218,67 +236,221 @@ function do_item_search() {
|
|||
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() {
|
||||
search_db = items.filter( i => ! i.remapID ).map( i => [i, expandItem(i, [])] );
|
||||
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"]],
|
||||
["item-rarity", ["ANY", "Normal", "Unique", "Set", "Rare", "Legendary", "Fabled", "Mythic", "Sane"]],
|
||||
["filter1", item_filters],
|
||||
["filter2", item_filters],
|
||||
["filter3", item_filters],
|
||||
["filter4", item_filters]]);
|
||||
for (const [field, data] of filter_inputs) {
|
||||
let field_choice = document.getElementById(field+"-choice");
|
||||
// show dropdown on click
|
||||
field_choice.onclick = function() {field_choice.dispatchEvent(new Event('input', {bubbles:true}));};
|
||||
filter_inputs.set(field, new autoComplete({
|
||||
data: {
|
||||
src: data,
|
||||
},
|
||||
threshold: 0,
|
||||
selector: "#"+ field +"-choice",
|
||||
wrapper: false,
|
||||
resultsList: {
|
||||
maxResults: 100,
|
||||
tabSelect: true,
|
||||
noResults: true,
|
||||
class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm",
|
||||
element: (list, data) => {
|
||||
let position = document.getElementById(field+'-choice').getBoundingClientRect();
|
||||
list.style.top = position.bottom + window.scrollY +"px";
|
||||
list.style.left = position.x+"px";
|
||||
list.style.width = position.width+"px";
|
||||
list.style.maxHeight = position.height * 4 +"px";
|
||||
|
||||
if (!data.results.length) {
|
||||
const message = make_elem('li', ['scaled-font'], {textContent: "No results found!"});
|
||||
list.prepend(message);
|
||||
// init type buttons
|
||||
for (const type of Object.keys(types)) {
|
||||
document.getElementById("type-" + type).addEventListener("click", function() {
|
||||
types[type] = !types[type];
|
||||
this.classList.toggle("type-selected");
|
||||
});
|
||||
}
|
||||
document.getElementById("all-types").addEventListener("click", function() {
|
||||
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");
|
||||
}
|
||||
});
|
||||
|
||||
// filters
|
||||
document.getElementById("add-filter").addEventListener("click", create_filter);
|
||||
create_filter();
|
||||
filters[0].input_elem.value = "Combat Level";
|
||||
init_filter_drag();
|
||||
}
|
||||
|
||||
function reset_item_search() {
|
||||
document.getElementById("item-name-choice").value = "";
|
||||
document.getElementById("all-types").click();
|
||||
document.getElementById("all-rarities").click();
|
||||
}
|
||||
|
||||
function create_filter() {
|
||||
let data = {ascending: false};
|
||||
|
||||
let row = make_elem("div", ["row", "filter-row"], {});
|
||||
let col = make_elem("div", ["col"], {});
|
||||
row.appendChild(col);
|
||||
data.div = row;
|
||||
|
||||
let reorder_img = make_elem("img", ["reorder-filter"], {src: "../media/icons/3-lines.svg", draggable: "true"});
|
||||
col.appendChild(reorder_img);
|
||||
|
||||
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: "Filter"}
|
||||
);
|
||||
filter_id_counter++;
|
||||
col.appendChild(filter_input);
|
||||
data.input_elem = filter_input;
|
||||
|
||||
let asc_desc = make_elem("div", [], {style: "cursor: pointer; display: inline-block;"});
|
||||
asc_desc.appendChild(make_elem("img", ["desc-icon", "asc-sel"], {src: "../media/icons/triangle.svg"}));
|
||||
asc_desc.appendChild(make_elem("img", ["asc-icon"], {src: "../media/icons/triangle.svg"}));
|
||||
asc_desc.addEventListener("click", function() {
|
||||
data.ascending = !data.ascending;
|
||||
asc_desc.children[0].classList.toggle("asc-sel");
|
||||
asc_desc.children[1].classList.toggle("asc-sel");
|
||||
});
|
||||
col.appendChild(asc_desc);
|
||||
|
||||
let min = make_elem("input",
|
||||
["col", "border-dark", "text-light", "dark-5", "rounded", "scaled-font", "form-control", "form-control-sm", "min-max-input"],
|
||||
{type: "number", placeholder: "-\u221E"}
|
||||
);
|
||||
col.appendChild(min);
|
||||
data.min_elem = min;
|
||||
|
||||
let to = make_elem("span", [], {innerHTML: " to "});
|
||||
col.appendChild(to);
|
||||
|
||||
let max = make_elem("input",
|
||||
["col", "border-dark", "text-light", "dark-5", "rounded", "scaled-font", "form-control", "form-control-sm", "min-max-input"],
|
||||
{type: "number", placeholder: "\u221E"}
|
||||
);
|
||||
col.appendChild(max);
|
||||
data.max_elem = max;
|
||||
|
||||
document.getElementById("filter-container").insertBefore(row, document.getElementById("add-filter").parentElement);
|
||||
|
||||
filters.push(data);
|
||||
init_filter_dropdown(data);
|
||||
}
|
||||
|
||||
let currently_dragging = null;
|
||||
function init_filter_drag() {
|
||||
let container = document.getElementById("filter-container");
|
||||
|
||||
container.addEventListener("dragstart", function(e) {
|
||||
if (e.path[0].classList.contains("reorder-filter")) {
|
||||
currently_dragging = filters[Array.from(e.path[3].children).indexOf(e.path[2]) - 1];
|
||||
} else {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
container.addEventListener("dragenter", function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
container.addEventListener("dragleave", function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
container.addEventListener("dragend", function(e) {
|
||||
e.preventDefault();
|
||||
for (const el of document.getElementsByClassName("filter-dragged-over")) {
|
||||
el.classList.remove("filter-dragged-over");
|
||||
}
|
||||
currently_dragging = null;
|
||||
});
|
||||
|
||||
container.addEventListener("dragover", function(e) {
|
||||
e.preventDefault();
|
||||
for (const el of document.getElementsByClassName("filter-dragged-over")) {
|
||||
el.classList.remove("filter-dragged-over");
|
||||
}
|
||||
if (!e.path.includes(currently_dragging.div)) {
|
||||
for (let i = 0; i < e.path.length; i++) {
|
||||
if (e.path[i].classList.contains("filter-row")) {
|
||||
e.path[i].classList.add("filter-dragged-over");
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
container.addEventListener("drop", function(e) {
|
||||
e.preventDefault();
|
||||
for (const el of document.getElementsByClassName("filter-dragged-over")) {
|
||||
el.classList.remove("filter-dragged-over");
|
||||
}
|
||||
if (!e.path.includes(currently_dragging.div)) {
|
||||
for (let i = 0; i < e.path.length; i++) {
|
||||
if (e.path[i].classList.contains("filter-row")) {
|
||||
let old_index = filters.indexOf(currently_dragging);
|
||||
let new_index = Array.from(e.path[i + 1].children).indexOf(e.path[i]) - 1;
|
||||
filters.splice(old_index, 1);
|
||||
filters.splice(new_index, 0, currently_dragging);
|
||||
currently_dragging.div.remove();
|
||||
container.insertBefore(currently_dragging.div, container.children[new_index + 1]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
currently_dragging = null;
|
||||
});
|
||||
}
|
||||
|
||||
function init_filter_dropdown(filter) {
|
||||
let field_choice = filter.input_elem;
|
||||
field_choice.onclick = function() {field_choice.dispatchEvent(new Event('input', {bubbles:true}));};
|
||||
filter.autoComplete = new autoComplete({
|
||||
data: {
|
||||
src: item_filters,
|
||||
},
|
||||
threshold: 0,
|
||||
selector: "#" + field_choice.id,
|
||||
wrapper: false,
|
||||
resultsList: {
|
||||
maxResults: 100,
|
||||
tabSelect: true,
|
||||
noResults: true,
|
||||
class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm",
|
||||
element: (list, data) => {
|
||||
let position = field_choice.getBoundingClientRect();
|
||||
list.style.top = position.bottom + window.scrollY +"px";
|
||||
list.style.left = position.x+"px";
|
||||
list.style.width = position.width+"px";
|
||||
list.style.maxHeight = position.height * 4 +"px";
|
||||
if (!data.results.length) {
|
||||
const message = make_elem('li', ['scaled-font'], {textContent: "No results found!"});
|
||||
list.prepend(message);
|
||||
};
|
||||
},
|
||||
},
|
||||
resultItem: {
|
||||
class: "scaled-font search-item",
|
||||
selected: "dark-5",
|
||||
},
|
||||
events: {
|
||||
input: {
|
||||
selection: (event) => {
|
||||
if (event.detail.selection.value) {
|
||||
event.target.value = event.detail.selection.value;
|
||||
};
|
||||
},
|
||||
},
|
||||
resultItem: {
|
||||
class: "scaled-font search-item",
|
||||
selected: "dark-5",
|
||||
},
|
||||
events: {
|
||||
input: {
|
||||
selection: (event) => {
|
||||
if (event.detail.selection.value) {
|
||||
event.target.value = event.detail.selection.value;
|
||||
};
|
||||
},
|
||||
},
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
(async function() {
|
||||
|
|
|
|||
8
media/icons/3-lines.svg
Normal file
8
media/icons/3-lines.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="15px" height="15px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 575 B |
3
media/icons/triangle.svg
Normal file
3
media/icons/triangle.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.167 252.791">
|
||||
<path fill="#fff" d="M.353 252.437L252.083.707l251.731 251.73"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 143 B |
Loading…
Reference in a new issue