Searching Changes (#248)
* fix sort keys not clearing * ingredient searching * add dura and charges * modify comment * fix effectiveness formula) * remove comment
This commit is contained in:
Incompleteusern
GitHub
parent
88fe5217d2
commit
bf29018a60
14 changed files with 1476 additions and 750 deletions
|
|
@ -16,41 +16,49 @@
|
||||||
|
|
||||||
/* rarity selectors */
|
/* rarity selectors */
|
||||||
|
|
||||||
#rarity-box {
|
#tier-box {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 58.33%;
|
width: 58.33%;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
#rarity-box > div {
|
#tier-box > div {
|
||||||
width: calc(100% / 7);
|
width: calc(100% / 7);
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
#rarity-box > div > b {
|
#tier-box > div > b {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
#rarity-box > div.rarity-selected > b {
|
#tier-box > div.tier-selected > b {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
#rarity-normal { color: #FFFFFF; }
|
#tier-normal { color: #FFFFFF; }
|
||||||
#rarity-normal.rarity-selected { background-color: #FFFFFF; }
|
#tier-normal.tier-selected { background-color: #FFFFFF; }
|
||||||
#rarity-unique { color: #FFFF55; }
|
#tier-unique { color: #FFFF55; }
|
||||||
#rarity-unique.rarity-selected { background-color: #FFFF55; }
|
#tier-unique.tier-selected { background-color: #FFFF55; }
|
||||||
#rarity-set { color: #55FF55; }
|
#tier-set { color: #55FF55; }
|
||||||
#rarity-set.rarity-selected { background-color: #55FF55; }
|
#tier-set.tier-selected { background-color: #55FF55; }
|
||||||
#rarity-rare { color: #FF55FF; }
|
#tier-rare { color: #FF55FF; }
|
||||||
#rarity-rare.rarity-selected { background-color: #FF55FF; }
|
#tier-rare.tier-selected { background-color: #FF55FF; }
|
||||||
#rarity-legendary { color: #55FFFF; }
|
#tier-legendary { color: #55FFFF; }
|
||||||
#rarity-legendary.rarity-selected { background-color: #55FFFF; }
|
#tier-legendary.tier-selected { background-color: #55FFFF; }
|
||||||
#rarity-fabled { color: #FF5555; }
|
#tier-fabled { color: #FF5555; }
|
||||||
#rarity-fabled.rarity-selected { background-color: #FF5555; }
|
#tier-fabled.tier-selected { background-color: #FF5555; }
|
||||||
#rarity-mythic { color: #AA00AA; }
|
#tier-mythic { color: #AA00AA; }
|
||||||
#rarity-mythic.rarity-selected { background-color: #AA00AA; }
|
#tier-mythic.tier-selected { background-color: #AA00AA; }
|
||||||
|
|
||||||
|
#tier-zero { color: #FFFFFF; }
|
||||||
|
#tier-zero.tier-selected { background-color: #FFFFFF; }
|
||||||
|
#tier-one { color: #FFFFBB; }
|
||||||
|
#tier-one.tier-selected { background-color: #FFFFBB; }
|
||||||
|
#tier-two { color: #FFFF88; }
|
||||||
|
#tier-two.tier-selected { background-color: #FFFF88; }
|
||||||
|
#tier-three { color: #FFFF55; }
|
||||||
|
#tier-three.tier-selected { background-color: #FFFF55; }
|
||||||
|
|
||||||
/* filters */
|
/* filters */
|
||||||
.filter-row {
|
.filter-row {
|
||||||
174
ingredients/index.html
Normal file
174
ingredients/index.html
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html scroll-behavior="smooth">
|
||||||
|
<head>
|
||||||
|
<title>WynnAtlas</title>
|
||||||
|
<link rel="icon" href="../media/icons/new/searcher.png" type="image/icon type">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no">
|
||||||
|
|
||||||
|
<!-- nunito font, copying wynnbuilder, which is copying wynndata -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
|
||||||
|
|
||||||
|
|
||||||
|
<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/search.css">
|
||||||
|
</head>
|
||||||
|
<body class = "text-light d-flex justify-content-center" id = "body">
|
||||||
|
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||||
|
<a href = "../builder/"><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
|
||||||
|
<a href = "../crafter/"><img src = "../media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||||
|
<a href = "../items/"><img src = "../media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
|
||||||
|
<a href = "../custom/"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||||
|
<a href = "../map/"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||||
|
<a href = "../wynnfo/"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "Wynnfo"><b>Wynnfo</b></a>
|
||||||
|
<a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
|
||||||
|
<hr/>
|
||||||
|
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||||
|
</div>
|
||||||
|
<div id="mobile-navbar" class="navbar dark-5 dark-shadow fixed-top d-lg-none pb-0">
|
||||||
|
<div class="container-fluid scaled-font justify-content-center" style="height: 5vh;">
|
||||||
|
<button class="btn dropdown-toggle dark-2 px-4 text-white scaled-font border-dark border-3" onclick="toggle_tab('mobile-navbar-dropdown');"></button>
|
||||||
|
</div>
|
||||||
|
<div class="container-fluid scaled-font dark-3 px-3 py-3" id="mobile-navbar-dropdown" style="display: none;">
|
||||||
|
<a href="../builder/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||||
|
<img src="../media/icons/new/builder.png" alt="" style="height: 100%;">
|
||||||
|
<span>WynnBuilder</span>
|
||||||
|
</a>
|
||||||
|
<a href="../crafter/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||||
|
<img src="../media/icons/new/crafter.png" alt="" style="height: 100%;">
|
||||||
|
<span>WynnCrafter</span>
|
||||||
|
</a>
|
||||||
|
<a href="../items/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||||
|
<img src="../media/icons/new/searcher.png" alt="" style="height: 100%;">
|
||||||
|
<span>WynnAtlas</span>
|
||||||
|
</a>
|
||||||
|
<a href="../custom/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||||
|
<img src="../media/icons/new/custom.png" alt="" style="height: 100%;">
|
||||||
|
<span>WynnCustom</span>
|
||||||
|
</a>
|
||||||
|
<a href="../map/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||||
|
<img src="../media/icons/new/compass.png" alt="" style="height: 100%;">
|
||||||
|
<span>WynnGPS</span>
|
||||||
|
</a>
|
||||||
|
<a href="../wynnfo/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||||
|
<img src="../media/icons/new/book.png" alt="" style="height: 100%;">
|
||||||
|
<span>WynnFo</span>
|
||||||
|
</a>g
|
||||||
|
<a onclick = "toggleIcons()" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||||
|
<img src="../media/icons/new/reload.png" alt="" style="height: 100%;">
|
||||||
|
<span>Swap Icon Style</span>
|
||||||
|
</a>
|
||||||
|
<a href="https://discord.gg/CGavnAnerv" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
|
||||||
|
<img src="../media/icons/discord.png" alt="" style="height: 100%;">
|
||||||
|
<span>Discord</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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-start" id = "credits">
|
||||||
|
<a href="../items/" class="link">Item Searching</a>
|
||||||
|
</div>
|
||||||
|
<div class = "col text-end">
|
||||||
|
<a href = "../ingredients_adv/">Advanced Ingredient Search</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "col-auto" style = "width: 12.5%;"></div>
|
||||||
|
<div class = "col-lg-4">
|
||||||
|
<div class = "row">
|
||||||
|
<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" style="width: 100%!important;" type="text" id="item-name-choice" name="item-name-choice" placeholder="Ingredient name (case insensitive)"/>
|
||||||
|
<p class="error col-auto"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col-lg col-sm-12">
|
||||||
|
<div class = "col"><span class = "fw-bold">Types:</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">
|
||||||
|
<p id = "type-armouring" style = "margin: 0; ">Armouring</p>
|
||||||
|
<p id = "type-tailoring" style = "margin: 0;">Tailoring</p>
|
||||||
|
<p id = "type-weaponsmithing" style = "margin: 0;">Weaponsmithing</p>
|
||||||
|
<p id = "type-woodworking" style = "margin: 0;">Woodworking</p>
|
||||||
|
<p id = "type-jeweling" style = "margin: 0;">Jeweling</p>
|
||||||
|
<p id = "type-cooking" style = "margin: 0;">Cooking</p>
|
||||||
|
<p id = "type-alchemism" style = "margin: 0;">Alchemism</p>
|
||||||
|
<p id = "type-scribing" style = "margin: 0;">Scribing</p>
|
||||||
|
</div>
|
||||||
|
<p class="error col-auto"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col-lg col-sm-12">
|
||||||
|
<div class = "col"><span class = "fw-bold">Stars:</span> <span style = "cursor: pointer; float: right;"><span id = "all-tiers">All</span> <span id = "none-tiers">None</span></span></div>
|
||||||
|
<div id = "tier-box">
|
||||||
|
<!-- unfortunately they must be stacked up like this because newlines are considered spaces and muck up the organization -->
|
||||||
|
<div id = "tier-zero" class = "tier-selected"><b>0</b></div><div id = "tier-one" class = "tier-selected"><b>1</b></div><div id = "tier-two" class = "tier-selected"><b>2</b></div><div id = "tier-three" class = "tier-selected"><b>3</b></div>
|
||||||
|
</div>
|
||||||
|
<p class="error col-auto"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<script type="text/javascript" src="../js/damage_calc.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/display_constants.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/display.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/query.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/expr_parser.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/load_ing.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/search.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/ingredients.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/powders.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
87
ingredients_adv/index.html
Normal file
87
ingredients_adv/index.html
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html scroll-behavior="smooth">
|
||||||
|
<head>
|
||||||
|
<title>WynnAtlas</title>
|
||||||
|
<link rel="icon" href="../media/icons/new/searcher.png" type="image/icon type">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=.45, user-scalable=no">
|
||||||
|
|
||||||
|
<!-- nunito font, copying wynnbuilder, which is copying wynndata -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/sq2bs.css">
|
||||||
|
<link rel="stylesheet" href="../css/items_adv.css">
|
||||||
|
<link rel="stylesheet" href="../css/sidebar.css">
|
||||||
|
<link rel="stylesheet" href="../css/wynnstyles.css">
|
||||||
|
</head>
|
||||||
|
<body class = "text-light d-flex justify-content-center" id = "body">
|
||||||
|
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||||
|
<a href = "../builder/"><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
|
||||||
|
<a href = "../crafter/"><img src = "../media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||||
|
<a href = "../items/"><img src = "../media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</b></a>
|
||||||
|
<a href = "/customizer.html"><img src = "../media/icons/new/custom.png" alt = "WynnCustom" title = "WynnCustom"><b>WynnCustom</b></a>
|
||||||
|
<a href = "/map.html"><img src = "../media/icons/new/compass.png" alt = "WynnGPS" title = "WynnGPS"><b>WynnGPS</b></a>
|
||||||
|
<a href = "/wynnfo/index.html"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||||
|
<a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
|
||||||
|
<hr/>
|
||||||
|
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||||
|
</div>
|
||||||
|
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
|
||||||
|
<div class = "col">
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col text-start" id = "credits">
|
||||||
|
<a href="../credits.txt" class="link">Additional credits</a>
|
||||||
|
</div>
|
||||||
|
<div class = "col text-end">
|
||||||
|
<a href = "../ingredients/">Basic Ingredient Search</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row">
|
||||||
|
<div class="col" id="main">
|
||||||
|
<div class = "row" id="search-container">
|
||||||
|
<div class="col search-field-container" id="search-filter">
|
||||||
|
<div class="col fw-bold">Filter By:</div>
|
||||||
|
<input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="search-filter-field" type="text" autofocus="true"
|
||||||
|
placeholder="name ?= "blue" & str >= 15 & dex >= 10">
|
||||||
|
<div class="search-field-error" id="search-filter-error"></div>
|
||||||
|
<div class="search-field-compl" id="search-filter-compl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col search-field-container" id="search-sort">
|
||||||
|
<div class="col fw-bold">Sort By:</div>
|
||||||
|
<input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="search-sort-field" type="text"
|
||||||
|
placeholder="str + dex; meleerawdmg + spellrawdmg">
|
||||||
|
<div class="search-field-error" id="search-sort-error"></div>
|
||||||
|
<div class="search-field-compl" id="search-sort-compl"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row" id="item-list-container">
|
||||||
|
<div class="row" id="item-list"></div>
|
||||||
|
<div class="row" id="item-list-footer"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row" id="scroll-up">↑</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<script type="text/javascript" src="/js/powders.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/damage_calc.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/display_constants.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/display.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/query.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/expr_parser.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/load_ing.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/search_adv.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/ingredients_adv.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<link rel="stylesheet" href="../css/sq2bs.css">
|
<link rel="stylesheet" href="../css/sq2bs.css">
|
||||||
<link rel="stylesheet" href="../css/sidebar.css">
|
<link rel="stylesheet" href="../css/sidebar.css">
|
||||||
<link rel="stylesheet" href="../css/wynnstyles.css">
|
<link rel="stylesheet" href="../css/wynnstyles.css">
|
||||||
<link rel="stylesheet" href="../css/items.css">
|
<link rel="stylesheet" href="../css/search.css">
|
||||||
</head>
|
</head>
|
||||||
<body class = "text-light d-flex justify-content-center" id = "body">
|
<body class = "text-light d-flex justify-content-center" id = "body">
|
||||||
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||||
|
|
@ -78,6 +78,9 @@
|
||||||
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
|
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
|
||||||
<div class = "row">
|
<div class = "row">
|
||||||
<div class = "row" style = "margin-top: 3ch;">
|
<div class = "row" style = "margin-top: 3ch;">
|
||||||
|
<div class = "col text-start" id = "credits">
|
||||||
|
<a href="../ingredients/" class="link">Ingredient Searching</a>
|
||||||
|
</div>
|
||||||
<div class = "col text-end">
|
<div class = "col text-end">
|
||||||
<a href = "../items_adv/">Advanced Item Search</a>
|
<a href = "../items_adv/">Advanced Item Search</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -113,10 +116,10 @@
|
||||||
</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 id = "all-rarities">All</span> <span id = "none-rarities">None</span></span></div>
|
<div class = "col"><span class = "fw-bold">Rarity:</span> <span style = "cursor: pointer; float: right;"><span id = "all-tiers">All</span> <span id = "none-tiers">None</span></span></div>
|
||||||
<div id = "rarity-box">
|
<div id = "tier-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" 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 id = "tier-normal" class = "tier-selected"><b>N</b></div><div id = "tier-unique" class = "tier-selected"><b>U</b></div><div id = "tier-set" class = "tier-selected"><b>S</b></div><div id = "tier-rare" class = "tier-selected"><b>R</b></div><div id = "tier-legendary" class = "tier-selected"><b>L</b></div><div id = "tier-fabled" class = "tier-selected"><b>F</b></div><div id = "tier-mythic" class = "tier-selected"><b>M</b></div>
|
||||||
</div>
|
</div>
|
||||||
<p class="error col-auto"></p>
|
<p class="error col-auto"></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -172,6 +175,7 @@
|
||||||
<script type="text/javascript" src="../js/query.js"></script>
|
<script type="text/javascript" src="../js/query.js"></script>
|
||||||
<script type="text/javascript" src="../js/expr_parser.js"></script>
|
<script type="text/javascript" src="../js/expr_parser.js"></script>
|
||||||
<script type="text/javascript" src="../js/load.js"></script>
|
<script type="text/javascript" src="../js/load.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/search.js"></script>
|
||||||
<script type="text/javascript" src="../js/items.js"></script>
|
<script type="text/javascript" src="../js/items.js"></script>
|
||||||
<script type="text/javascript" src="../js/powders.js"></script>
|
<script type="text/javascript" src="../js/powders.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -84,6 +84,7 @@
|
||||||
<script type="text/javascript" src="/js/query.js"></script>
|
<script type="text/javascript" src="/js/query.js"></script>
|
||||||
<script type="text/javascript" src="/js/expr_parser.js"></script>
|
<script type="text/javascript" src="/js/expr_parser.js"></script>
|
||||||
<script type="text/javascript" src="/js/load.js"></script>
|
<script type="text/javascript" src="/js/load.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/search_adv.js"></script>
|
||||||
<script type="text/javascript" src="/js/items_adv.js"></script>
|
<script type="text/javascript" src="/js/items_adv.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -178,6 +178,8 @@ let rolledIDs = [
|
||||||
];
|
];
|
||||||
let reversedIDs = [ "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4" ];
|
let reversedIDs = [ "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4" ];
|
||||||
|
|
||||||
|
let ingFields = ["fDefPct", "wDefPct", "aDefPct", "tDefPct", "eDefPct", "hprPct", "mr", "sdPct", "mdPct", "ls", "ms", "xpb", "lb", "lq", "ref", "str", "dex", "int", "agi", "def", "thorns", "expd", "spd", "atkTier", "poison", "hpBonus", "spRegen", "eSteal", "hprRaw", "sdRaw", "mdRaw", "fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct", "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4", "jh", "sprint", "sprintReg", "gXp", "gSpd"];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Take an item with id list and turn it into a set of minrolls and maxrolls.
|
* Take an item with id list and turn it into a set of minrolls and maxrolls.
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
let recipeTypes = ["HELMET","CHESTPLATE","LEGGINGS","BOOTS","RELIK","WAND","SPEAR","DAGGER","BOW","RING","NECKLACE","BRACELET","SCROLL","FOOD","POTION"];
|
let recipeTypes = ["HELMET","CHESTPLATE","LEGGINGS","BOOTS","RELIK","WAND","SPEAR","DAGGER","BOW","RING","NECKLACE","BRACELET","SCROLL","FOOD","POTION"];
|
||||||
let levelTypes = ["1-3","3-5","5-7","7-9","10-13","13-15","15-17","17-19","20-23","23-25","25-27","27-29","30-33","33-35","35-37","37-39","40-43","43-45","45-47","47-49","50-53","53-55","55-57","57-59","60-63","63-65","65-67","67-69","70-73","73-75","75-77","77-79","80-83","83-85","85-87","87-89","90-93","93-95","95-97","97-99","100-103","103-105",]
|
let levelTypes = ["1-3","3-5","5-7","7-9","10-13","13-15","15-17","17-19","20-23","23-25","25-27","27-29","30-33","33-35","35-37","37-39","40-43","43-45","45-47","47-49","50-53","53-55","55-57","57-59","60-63","63-65","65-67","67-69","70-73","73-75","75-77","77-79","80-83","83-85","85-87","87-89","90-93","93-95","95-97","97-99","100-103","103-105",]
|
||||||
let ingFields = ["fDefPct", "wDefPct", "aDefPct", "tDefPct", "eDefPct", "hprPct", "mr", "sdPct", "mdPct", "ls", "ms", "xpb", "lb", "lq", "ref", "str", "dex", "int", "agi", "def", "thorns", "expd", "spd", "atkTier", "poison", "hpBonus", "spRegen", "eSteal", "hprRaw", "sdRaw", "mdRaw", "fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct", "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4", "jh", "sprint", "sprintReg", "gXp", "gSpd"];
|
|
||||||
|
|
||||||
function encodeCraft(craft) {
|
function encodeCraft(craft) {
|
||||||
if (craft) {
|
if (craft) {
|
||||||
|
|
|
||||||
163
js/ingredients.js
Normal file
163
js/ingredients.js
Normal file
|
|
@ -0,0 +1,163 @@
|
||||||
|
// commented out filters
|
||||||
|
// "Name": "name",
|
||||||
|
// "Display Name": "displayName",
|
||||||
|
// "Tier": "stars",
|
||||||
|
// "Powder Slots": "slots",
|
||||||
|
// "Health": "hp",
|
||||||
|
// "Raw Fire Defense": "fDef",
|
||||||
|
// "Raw Water Defense": "wDef",
|
||||||
|
//"Raw Air Defense": "aDef",
|
||||||
|
// "Raw Thunder Defense": "tDef",
|
||||||
|
// "Raw Earth Defense": "eDef",
|
||||||
|
|
||||||
|
const translate_mappings = {
|
||||||
|
"Durability": "durability",
|
||||||
|
"Duration": "duration",
|
||||||
|
"Charges": "charges",
|
||||||
|
"Effectiveness Left": "left",
|
||||||
|
"Effectiveness Right": "right",
|
||||||
|
"Effectiveness Above": "above",
|
||||||
|
"Effectiveness Under": "under",
|
||||||
|
"Effectiveness Touching": "touching",
|
||||||
|
"Effectiveness Not Touching": "nottouching",
|
||||||
|
"Combat Level": "lvl",
|
||||||
|
"Req Strength": "strReq",
|
||||||
|
"Req Dexterity": "dexReq",
|
||||||
|
"Req Intelligence": "intReq",
|
||||||
|
"Req Agility": "agiReq",
|
||||||
|
"Req Defense": "defReq",
|
||||||
|
"% Health Regen": "hprPct",
|
||||||
|
"Mana Regen": "mr",
|
||||||
|
"% Spell Damage": "sdPct",
|
||||||
|
"% Melee Damage": "mdPct",
|
||||||
|
"Life Steal": "ls",
|
||||||
|
"Mana Steal": "ms",
|
||||||
|
"XP Bonus": "xpb",
|
||||||
|
"Loot Bonus": "lb",
|
||||||
|
"Reflection": "ref",
|
||||||
|
"Strength": "str",
|
||||||
|
"Dexterity": "dex",
|
||||||
|
"Intelligence": "int",
|
||||||
|
"Agility": "agi",
|
||||||
|
"Defense": "def",
|
||||||
|
"Thorns": "thorns",
|
||||||
|
"Exploding": "expd",
|
||||||
|
"Walk Speed": "spd",
|
||||||
|
"Attack Speed Bonus": "atkTier",
|
||||||
|
"Poison": "poison",
|
||||||
|
"Health Bonus": "hpBonus",
|
||||||
|
"Soul Point Regen": "spRegen",
|
||||||
|
"Stealing": "eSteal",
|
||||||
|
"Raw Health Regen": "hprRaw",
|
||||||
|
"Raw Spell": "sdRaw",
|
||||||
|
"Raw Melee": "mdRaw",
|
||||||
|
"% Fire Damage": "fDamPct",
|
||||||
|
"% Water Damage": "wDamPct",
|
||||||
|
"% Air Damage": "aDamPct",
|
||||||
|
"% Thunder Damage": "tDamPct",
|
||||||
|
"% Earth Damage": "eDamPct",
|
||||||
|
"% Fire Defense": "fDefPct",
|
||||||
|
"% Water Defense": "wDefPct",
|
||||||
|
"% Air Defense": "aDefPct",
|
||||||
|
"% Thunder Defense": "tDefPct",
|
||||||
|
"% Earth Defense": "eDefPct",
|
||||||
|
"1st Spell Cost %": "-spPct1",
|
||||||
|
"1st Spell Cost Raw": "-spRaw1",
|
||||||
|
"2nd Spell Cost %": "-spPct2",
|
||||||
|
"2nd Spell Cost Raw": "-spRaw2",
|
||||||
|
"3rd Spell Cost %": "-spPct3",
|
||||||
|
"3rd Spell Cost Raw": "-spRaw3",
|
||||||
|
"4th Spell Cost %": "-spPct4",
|
||||||
|
"4th Spell Cost Raw": "-spRaw4",
|
||||||
|
"Rainbow Spell Damage Raw": "rainbowRaw",
|
||||||
|
"Sprint": "sprint",
|
||||||
|
"Sprint Regen": "sprintReg",
|
||||||
|
"Jump Height": "jh",
|
||||||
|
"Loot Quality": "lq",
|
||||||
|
"Gather XP Bonus": "gXp",
|
||||||
|
"Gather Speed Bonus": "gSpd"
|
||||||
|
};
|
||||||
|
|
||||||
|
const special_mappings = {
|
||||||
|
"Sum (skill points)": "str+dex+int+def+agi",
|
||||||
|
"Sum (Mana Sustain)": "mr+ms",
|
||||||
|
"Sum (Life Sustain)": "hpr+ls",
|
||||||
|
"Sum (Effectiveness)": "7/3 * touching + 8/3 * nottouching + 2/3 * (top + bottom) + 1/2 * (left + right)"
|
||||||
|
};
|
||||||
|
|
||||||
|
for (let x in translate_mappings) {
|
||||||
|
item_filters.push(x);
|
||||||
|
}
|
||||||
|
for (let x in special_mappings) {
|
||||||
|
item_filters.push(x);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
types = {armouring: false, tailoring: false, weaponsmithing: false, woodworking: false, jeweling: false, cooking: false, alchemism: false, scribing: false};
|
||||||
|
search_tiers = {zero: true, one: true, two: true, three: true};
|
||||||
|
|
||||||
|
function display(ing_copy) {
|
||||||
|
let ing_parent = document.getElementById("search-results");
|
||||||
|
for (let i in ing_copy) {
|
||||||
|
if (i > 200) {break;}
|
||||||
|
let ing = ing_copy[i].itemExp;
|
||||||
|
let box = make_elem('div', ['ing-stats', 'col-lg-3', 'p-2', 'col-sm-6'], {id: 'ing'+i});
|
||||||
|
|
||||||
|
let bckgrdbox = make_elem('div', ["rounded", "g-0", "dark-7", "border", "border-dark", "dark-shadow", "p-3", "col-auto"], {id: 'ing'+i+'b'});
|
||||||
|
box.append(bckgrdbox);
|
||||||
|
ing_parent.appendChild(box);
|
||||||
|
|
||||||
|
displayExpandedIngredient(ing, bckgrdbox.id, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function filter_types_tiers(queries) {
|
||||||
|
// type
|
||||||
|
let allTypes = true, noTypes = true;
|
||||||
|
let typeQuery = "f:("
|
||||||
|
for (const type of Object.keys(types)) {
|
||||||
|
if (types[type]) {
|
||||||
|
typeQuery += type + "|";
|
||||||
|
noTypes = false;
|
||||||
|
} else {
|
||||||
|
allTypes = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (noTypes) {
|
||||||
|
document.getElementById("summary").innerHTML = "Error: Cannot search without at least 1 type selected";
|
||||||
|
return false;
|
||||||
|
} else if (!allTypes) {
|
||||||
|
queries.push(typeQuery.substring(0, typeQuery.length - 1) + ")");
|
||||||
|
}
|
||||||
|
|
||||||
|
// stars
|
||||||
|
let allStars = true, noStars = true;
|
||||||
|
let starQuery = "f:("
|
||||||
|
for (const star of Object.keys(search_tiers)) {
|
||||||
|
if (search_tiers[star]) {
|
||||||
|
starQuery += "starsname=\"" + star + "\"|";
|
||||||
|
noStars = false;
|
||||||
|
} else {
|
||||||
|
allStars = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (noStars) {
|
||||||
|
document.getElementById("summary").innerHTML = "Error: Cannot search without at least 1 star selected";
|
||||||
|
return false;
|
||||||
|
} else if (!allStars) {
|
||||||
|
queries.push(starQuery.substring(0, starQuery.length - 1) + ")");
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function init_values() {
|
||||||
|
search_db = ings.filter( i => ! i.remapID ).map( i => [i, expandIngredient(i, [])] );
|
||||||
|
expr_parser = new ExprParser(ingredientQueryProps, queryFuncs);
|
||||||
|
}
|
||||||
|
|
||||||
|
(async function() {
|
||||||
|
await Promise.resolve(load_ing_init());
|
||||||
|
init_search();
|
||||||
|
})();
|
||||||
|
|
||||||
54
js/ingredients_adv.js
Normal file
54
js/ingredients_adv.js
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
const getQueryIdentifiers = (function() {
|
||||||
|
let identCache = null;
|
||||||
|
return function() {
|
||||||
|
if (identCache === null) {
|
||||||
|
const idents = new Set();
|
||||||
|
for (const ident of Object.keys(ingredientQueryProps)) {
|
||||||
|
idents.add(ident);
|
||||||
|
}
|
||||||
|
for (const ident of Object.keys(queryFuncs)) {
|
||||||
|
idents.add(ident);
|
||||||
|
}
|
||||||
|
identCache = [...idents].sort(); // might use a trie optimally, but the set is probably small enough...
|
||||||
|
}
|
||||||
|
return identCache;
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
function generateEntries(size, itemList, itemEntries) {
|
||||||
|
for (let i = 0; i < size; i++) {
|
||||||
|
const itemElem = document.createElement('div');
|
||||||
|
itemElem.classList.add('col-lg-3', 'col-sm-6', "p-2", "ing-stats");
|
||||||
|
// itemElem.setAttribute('id', `item-entry-${i}`);
|
||||||
|
itemList.append(itemElem);
|
||||||
|
itemEntries.push(itemElem);
|
||||||
|
|
||||||
|
const itemElemContained = document.createElement("div");
|
||||||
|
itemElemContained.classList.add("dark-7", "rounded", "p-3", "col-auto", "g-0", "border", "border-dark", "dark-shadow");
|
||||||
|
|
||||||
|
itemElemContained.setAttribute('id', `item-entry-${i}`);
|
||||||
|
itemElem.appendChild(itemElemContained);
|
||||||
|
|
||||||
|
const sortKeyListContainer = document.createElement('div');
|
||||||
|
sortKeyListContainer.classList.add('row');
|
||||||
|
sortKeyListContainer.setAttribute('id', `item-sort-entry-${i}`);
|
||||||
|
itemEntries[i].append(sortKeyListContainer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function init_values() {
|
||||||
|
// compile the search db from the item db
|
||||||
|
searchDb = ings.filter(i => !i.remapID).map(i => [i, expandIngredient(i)]);
|
||||||
|
|
||||||
|
// create the expression parser
|
||||||
|
exprParser = new ExprParser(ingredientQueryProps, queryFuncs);
|
||||||
|
}
|
||||||
|
|
||||||
|
function display(itemExp, id) {
|
||||||
|
displayExpandedIngredient(itemExp, id);
|
||||||
|
}
|
||||||
|
|
||||||
|
(async function() {
|
||||||
|
await Promise.resolve(load_ing_init());
|
||||||
|
init_items_adv();
|
||||||
|
})();
|
||||||
377
js/items.js
377
js/items.js
|
|
@ -93,7 +93,6 @@ const special_mappings = {
|
||||||
"Base DPS": "(nDam+fDam+wDam+aDam+tDam+eDam) * atkspdmod(atkspd)"
|
"Base DPS": "(nDam+fDam+wDam+aDam+tDam+eDam) * atkspdmod(atkspd)"
|
||||||
};
|
};
|
||||||
|
|
||||||
let item_filters = [];
|
|
||||||
for (let x in translate_mappings) {
|
for (let x in translate_mappings) {
|
||||||
item_filters.push(x);
|
item_filters.push(x);
|
||||||
}
|
}
|
||||||
|
|
@ -101,18 +100,17 @@ for (let x in special_mappings) {
|
||||||
item_filters.push(x);
|
item_filters.push(x);
|
||||||
}
|
}
|
||||||
|
|
||||||
let item_categories = ["armor", "accessory", "weapon"];
|
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};
|
||||||
|
search_tiers = {normal: true, unique: true, set: true, rare: true, legendary: true, fabled: true, mythic: 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};
|
function display(items_copy) {
|
||||||
const rarities = {normal: true, unique: true, set: true, rare: true, legendary: true, fabled: true, mythic: true};
|
|
||||||
const filters = [], excludes = [];
|
|
||||||
let filter_id_counter = 0;
|
|
||||||
|
|
||||||
function displayItems(items_copy) {
|
|
||||||
let items_parent = document.getElementById("search-results");
|
let items_parent = document.getElementById("search-results");
|
||||||
for (let i in items_copy) {
|
for (let i in items_copy) {
|
||||||
if (i > 200) {break;}
|
if (i > 200) {break;}
|
||||||
let item = items_copy[i].itemExp;
|
let item = items_copy[i].itemExp;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let box = make_elem('div', ['col-lg-3', 'col-sm-6', 'p-2'], {id: 'item'+i});
|
let box = make_elem('div', ['col-lg-3', 'col-sm-6', 'p-2'], {id: 'item'+i});
|
||||||
|
|
||||||
let bckgrdbox = make_elem("div", ["dark-7", "rounded", "px-2", "col-auto"], {id: 'item'+i+'b'});
|
let bckgrdbox = make_elem("div", ["dark-7", "rounded", "px-2", "col-auto"], {id: 'item'+i+'b'});
|
||||||
|
|
@ -126,19 +124,7 @@ function displayItems(items_copy) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let search_db;
|
function filter_types_tiers(queries) {
|
||||||
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 = [];
|
|
||||||
|
|
||||||
// name
|
|
||||||
if (document.getElementById("item-name-choice").value != "") {
|
|
||||||
queries.push("f:name?=\"" + document.getElementById("item-name-choice").value.trim() + "\"");
|
|
||||||
}
|
|
||||||
|
|
||||||
// types
|
// types
|
||||||
let allTypes = true, noTypes = true;
|
let allTypes = true, noTypes = true;
|
||||||
let typeQuery = "f:("
|
let typeQuery = "f:("
|
||||||
|
|
@ -152,7 +138,7 @@ function do_item_search() {
|
||||||
}
|
}
|
||||||
if (noTypes) {
|
if (noTypes) {
|
||||||
document.getElementById("summary").innerHTML = "Error: Cannot search without at least 1 type selected";
|
document.getElementById("summary").innerHTML = "Error: Cannot search without at least 1 type selected";
|
||||||
return;
|
return false;
|
||||||
} else if (!allTypes) {
|
} else if (!allTypes) {
|
||||||
queries.push(typeQuery.substring(0, typeQuery.length - 1) + ")");
|
queries.push(typeQuery.substring(0, typeQuery.length - 1) + ")");
|
||||||
}
|
}
|
||||||
|
|
@ -160,8 +146,8 @@ function do_item_search() {
|
||||||
// rarities
|
// rarities
|
||||||
let allRarities = true, noRarities = true;
|
let allRarities = true, noRarities = true;
|
||||||
let rarityQuery = "f:("
|
let rarityQuery = "f:("
|
||||||
for (const rarity of Object.keys(rarities)) {
|
for (const rarity of Object.keys(search_tiers)) {
|
||||||
if (rarities[rarity]) {
|
if (search_tiers[rarity]) {
|
||||||
rarityQuery += "tiername=\"" + rarity + "\"|";
|
rarityQuery += "tiername=\"" + rarity + "\"|";
|
||||||
noRarities = false;
|
noRarities = false;
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -170,353 +156,20 @@ function do_item_search() {
|
||||||
}
|
}
|
||||||
if (noRarities) {
|
if (noRarities) {
|
||||||
document.getElementById("summary").innerHTML = "Error: Cannot search without at least 1 rarity selected";
|
document.getElementById("summary").innerHTML = "Error: Cannot search without at least 1 rarity selected";
|
||||||
return;
|
return false;
|
||||||
} else if (!allRarities) {
|
} else if (!allRarities) {
|
||||||
queries.push(rarityQuery.substring(0, rarityQuery.length - 1) + ")");
|
queries.push(rarityQuery.substring(0, rarityQuery.length - 1) + ")");
|
||||||
}
|
}
|
||||||
|
|
||||||
// filters
|
return true;
|
||||||
for (const filter of filters) {
|
|
||||||
let min = parseInt(filter.min_elem.value);
|
|
||||||
let max = parseInt(filter.max_elem.value);
|
|
||||||
if (min > max) {
|
|
||||||
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);
|
|
||||||
|
|
||||||
let raw_name = filter.input_elem.value;
|
|
||||||
if (raw_name == "") {
|
|
||||||
continue; // empty
|
|
||||||
}
|
|
||||||
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 filter \"" + filter.input_elem.value + "\" is not recognized";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
// excludes
|
|
||||||
for (const exclude of excludes) {
|
|
||||||
let raw_name = exclude.input_elem.value;
|
|
||||||
if (raw_name == "") {
|
|
||||||
continue; // empty
|
|
||||||
}
|
|
||||||
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);
|
|
||||||
for (const query of queries) {
|
|
||||||
if (query.startsWith("s:")) {
|
|
||||||
sort_queries.push(query.slice(2));
|
|
||||||
}
|
|
||||||
else if (query.startsWith("f:")) {
|
|
||||||
filter_query = filter_query + "&" + query.slice(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
document.getElementById("search-results").textContent = "";
|
|
||||||
let results = [];
|
|
||||||
try {
|
|
||||||
const filter_expr = expr_parser.parse(filter_query);
|
|
||||||
const sort_exprs = sort_queries.map(q => expr_parser.parse(q));
|
|
||||||
for (let i = 0; i < search_db.length; ++i) {
|
|
||||||
const item = search_db[i][0];
|
|
||||||
const itemExp = search_db[i][1];
|
|
||||||
if (checkBool(filter_expr.resolve(item, itemExp))) {
|
|
||||||
results.push({ item, itemExp, sortKeys: sort_exprs.map(e => e.resolve(item, itemExp)) });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
results.sort((a, b) => {
|
|
||||||
return compareLexico(a.item, a.sortKeys, b.item, b.sortKeys);
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
document.getElementById("summary").textContent = e.message;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
document.getElementById("summary").textContent = results.length + " results:";
|
|
||||||
document.getElementById("summary").style.color = "white";
|
|
||||||
displayItems(results);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function init_items() {
|
function init_values() {
|
||||||
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, queryFuncs);
|
||||||
|
|
||||||
// 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);
|
|
||||||
document.getElementById("add-exclude").addEventListener("click", create_exclude);
|
|
||||||
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;
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 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}));};
|
|
||||||
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;
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
(async function() {
|
(async function() {
|
||||||
await Promise.resolve(load_init());
|
await Promise.resolve(load_init());
|
||||||
init_items();
|
init_search();
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
383
js/items_adv.js
383
js/items_adv.js
|
|
@ -1,103 +1,3 @@
|
||||||
function isIdentifierChar(character) {
|
|
||||||
return /[\w\d%]/i.test(character);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isIdentifierFirstChar(character) {
|
|
||||||
return /\w/i.test(character);
|
|
||||||
}
|
|
||||||
|
|
||||||
class AutocompleteContext {
|
|
||||||
constructor(field) {
|
|
||||||
this.field = field;
|
|
||||||
this.text = field.value;
|
|
||||||
this.cursorPos = this.startIndex = this.endIndex = field.selectionEnd;
|
|
||||||
while (this.startIndex > 0 && isIdentifierChar(this.text.charAt(this.startIndex - 1))) {
|
|
||||||
--this.startIndex;
|
|
||||||
}
|
|
||||||
if (!isIdentifierFirstChar(this.text.charAt(this.startIndex))) {
|
|
||||||
this.startIndex = this.cursorPos;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
while (this.endIndex < this.text.length && isIdentifierChar(this.text.charAt(this.endIndex))) {
|
|
||||||
++this.endIndex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get valid() {
|
|
||||||
return this.endIndex > this.startIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
get complText() {
|
|
||||||
return this.text.substring(this.startIndex, this.cursorPos);
|
|
||||||
}
|
|
||||||
|
|
||||||
insert(completion, supplant) {
|
|
||||||
this.field.setRangeText(completion, this.startIndex, supplant ? this.endIndex : this.cursorPos, 'end');
|
|
||||||
this.field.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
|
|
||||||
this.startIndex = this.endIndex = -1;
|
|
||||||
setTimeout(() => this.field.focus(), 5); // no idea why i need a delay here
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class AutocompleteController {
|
|
||||||
constructor(ctx, completions, exprField) {
|
|
||||||
this.ctx = ctx;
|
|
||||||
this.completions = completions;
|
|
||||||
this.exprField = exprField;
|
|
||||||
this.currentFocus = null;
|
|
||||||
|
|
||||||
for (const completion of completions) {
|
|
||||||
const complElem = document.createElement('div');
|
|
||||||
complElem.classList.add('search-field-compl-entry')
|
|
||||||
complElem.setAttribute('data-compl', completion);
|
|
||||||
complElem.innerText = completion;
|
|
||||||
complElem.addEventListener('mousemove', e => this.focus(complElem));
|
|
||||||
complElem.addEventListener('mousedown', e => this.complete(completion, true));
|
|
||||||
exprField.completions.append(complElem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get valid() {
|
|
||||||
return this.ctx.valid && this.completions.length > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
focus(complElem) {
|
|
||||||
if (this.currentFocus !== null) {
|
|
||||||
this.currentFocus.classList.remove('focused');
|
|
||||||
}
|
|
||||||
this.currentFocus = complElem;
|
|
||||||
complElem.classList.add('focused');
|
|
||||||
complElem.scrollIntoView({ block: 'nearest' });
|
|
||||||
}
|
|
||||||
|
|
||||||
focusNext() {
|
|
||||||
if (this.currentFocus === null || !this.currentFocus.nextSibling) {
|
|
||||||
this.focus(this.exprField.completions.firstChild);
|
|
||||||
} else {
|
|
||||||
this.focus(this.currentFocus.nextSibling);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
focusPrev() {
|
|
||||||
if (this.currentFocus === null || !this.currentFocus.previousSibling) {
|
|
||||||
this.focus(this.exprField.completions.lastChild);
|
|
||||||
} else {
|
|
||||||
this.focus(this.currentFocus.previousSibling);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
complete(completion, supplant) {
|
|
||||||
if (completion === null) {
|
|
||||||
completion = this.currentFocus.getAttribute('data-compl');
|
|
||||||
if (completion === null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.ctx.insert(completion, supplant);
|
|
||||||
this.exprField.clearAutocomplete();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getQueryIdentifiers = (function() {
|
const getQueryIdentifiers = (function() {
|
||||||
let identCache = null;
|
let identCache = null;
|
||||||
return function() {
|
return function() {
|
||||||
|
|
@ -106,7 +6,7 @@ const getQueryIdentifiers = (function() {
|
||||||
for (const ident of Object.keys(itemQueryProps)) {
|
for (const ident of Object.keys(itemQueryProps)) {
|
||||||
idents.add(ident);
|
idents.add(ident);
|
||||||
}
|
}
|
||||||
for (const ident of Object.keys(itemQueryFuncs)) {
|
for (const ident of Object.keys(queryFuncs)) {
|
||||||
idents.add(ident);
|
idents.add(ident);
|
||||||
}
|
}
|
||||||
identCache = [...idents].sort(); // might use a trie optimally, but the set is probably small enough...
|
identCache = [...idents].sort(); // might use a trie optimally, but the set is probably small enough...
|
||||||
|
|
@ -115,136 +15,8 @@ const getQueryIdentifiers = (function() {
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
||||||
// represents a field containing a query expression string
|
function generateEntries(size, itemList, itemEntries) {
|
||||||
class ExprField {
|
for (let i = 0; i < size; i++) {
|
||||||
constructor(key, compiler) {
|
|
||||||
this.field = document.getElementById(`search-${key}-field`);
|
|
||||||
this.completions = document.getElementById(`search-${key}-compl`);
|
|
||||||
this.errorText = document.getElementById(`search-${key}-error`);
|
|
||||||
this.prevComplText = null;
|
|
||||||
this.prevComplPos = null;
|
|
||||||
this.complCtrl = null;
|
|
||||||
this.compiler = compiler;
|
|
||||||
this.output = null;
|
|
||||||
this.text = null;
|
|
||||||
|
|
||||||
this.field.addEventListener('focus', e => this.scheduleAutocomplete());
|
|
||||||
this.field.addEventListener('change', e => this.scheduleAutocomplete());
|
|
||||||
this.field.addEventListener('keydown', e => {
|
|
||||||
if (this.complCtrl !== null && this.complCtrl.valid) {
|
|
||||||
switch (e.key) {
|
|
||||||
case 'Up':
|
|
||||||
case 'ArrowUp':
|
|
||||||
this.complCtrl.focusPrev();
|
|
||||||
break;
|
|
||||||
case 'Down':
|
|
||||||
case 'ArrowDown':
|
|
||||||
this.complCtrl.focusNext();
|
|
||||||
break;
|
|
||||||
case 'Tab':
|
|
||||||
this.complCtrl.complete(null, true);
|
|
||||||
break;
|
|
||||||
case 'Enter':
|
|
||||||
this.complCtrl.complete(null, false);
|
|
||||||
break;
|
|
||||||
case 'Escape':
|
|
||||||
this.clearAutocomplete();
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
this.scheduleAutocomplete();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
e.preventDefault();
|
|
||||||
} else {
|
|
||||||
switch (e.key) {
|
|
||||||
case 'Spacebar':
|
|
||||||
case ' ':
|
|
||||||
if (e.ctrlKey) {
|
|
||||||
this.autocomplete();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.scheduleAutocomplete()
|
|
||||||
});
|
|
||||||
this.field.addEventListener('mousedown', e => this.scheduleAutocomplete());
|
|
||||||
this.field.addEventListener('blur', e => this.clearAutocomplete());
|
|
||||||
}
|
|
||||||
|
|
||||||
get value() {
|
|
||||||
return this.field.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
scheduleAutocomplete() {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (this.field.value !== this.prevComplText || this.field.selectionEnd !== this.prevComplPos) {
|
|
||||||
this.prevComplText = this.field.value;
|
|
||||||
this.prevComplPos = this.field.selectionEnd;
|
|
||||||
this.autocomplete();
|
|
||||||
}
|
|
||||||
}, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
autocomplete() {
|
|
||||||
while (this.completions.lastChild) {
|
|
||||||
this.completions.removeChild(this.completions.lastChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
const complCtx = new AutocompleteContext(this.field);
|
|
||||||
if (!complCtx.valid) {
|
|
||||||
this.clearAutocomplete();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const complText = complCtx.complText;
|
|
||||||
const completions = getQueryIdentifiers().filter(ident => ident.startsWith(complText));
|
|
||||||
if (completions.length === 0) {
|
|
||||||
this.clearAutocomplete();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.complCtrl = new AutocompleteController(complCtx, completions, this);
|
|
||||||
this.complCtrl.focusNext();
|
|
||||||
this.completions.classList.add('visible');
|
|
||||||
}
|
|
||||||
|
|
||||||
clearAutocomplete() {
|
|
||||||
this.completions.classList.remove('visible');
|
|
||||||
this.prevComplText = this.field.value;
|
|
||||||
this.prevComplPos = this.field.selectionEnd;
|
|
||||||
this.complCtrl = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
compile() {
|
|
||||||
if (this.value === this.text) return false;
|
|
||||||
this.text = this.value;
|
|
||||||
this.errorText.innerText = '';
|
|
||||||
try {
|
|
||||||
this.output = this.compiler(this.text);
|
|
||||||
} catch (e) {
|
|
||||||
this.errorText.innerText = e.message;
|
|
||||||
this.output = null;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function stringify(v) {
|
|
||||||
return typeof v === 'number' ? (Math.round(v * 100) / 100).toString() : v;
|
|
||||||
}
|
|
||||||
|
|
||||||
function init_items_adv() {
|
|
||||||
const itemList = document.getElementById('item-list');
|
|
||||||
const itemListFooter = document.getElementById('item-list-footer');
|
|
||||||
|
|
||||||
// compile the search db from the item db
|
|
||||||
const searchDb = items.filter(i => !i.remapID).map(i => [i, expandItem(i)]);
|
|
||||||
|
|
||||||
// init item list elements
|
|
||||||
const ITEM_LIST_SIZE = 64;
|
|
||||||
const itemEntries = [];
|
|
||||||
for (let i = 0; i < ITEM_LIST_SIZE; i++) {
|
|
||||||
const itemElem = document.createElement('div');
|
const itemElem = document.createElement('div');
|
||||||
itemElem.classList.add('col-lg-3', 'col-sm-auto', "p-2");
|
itemElem.classList.add('col-lg-3', 'col-sm-auto', "p-2");
|
||||||
// itemElem.setAttribute('id', `item-entry-${i}`);
|
// itemElem.setAttribute('id', `item-entry-${i}`);
|
||||||
|
|
@ -255,144 +27,29 @@ function init_items_adv() {
|
||||||
itemElemContained.classList.add("dark-7", "rounded", "px-2", "col-auto");
|
itemElemContained.classList.add("dark-7", "rounded", "px-2", "col-auto");
|
||||||
itemElemContained.setAttribute('id', `item-entry-${i}`);
|
itemElemContained.setAttribute('id', `item-entry-${i}`);
|
||||||
itemElem.appendChild(itemElemContained);
|
itemElem.appendChild(itemElemContained);
|
||||||
|
|
||||||
|
const sortKeyListContainer = document.createElement('div');
|
||||||
|
sortKeyListContainer.classList.add('row');
|
||||||
|
sortKeyListContainer.setAttribute('id', `item-sort-entry-${i}`);
|
||||||
|
itemEntries[i].append(sortKeyListContainer);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function init_values() {
|
||||||
|
// compile the search db from the item db
|
||||||
|
searchDb = items.filter(i => !i.remapID).map(i => [i, expandItem(i)]);
|
||||||
|
|
||||||
// create the expression parser
|
// create the expression parser
|
||||||
const exprParser = new ExprParser(itemQueryProps, itemQueryFuncs);
|
exprParser = new ExprParser(itemQueryProps, queryFuncs);
|
||||||
|
}
|
||||||
|
|
||||||
// the two search query input boxes
|
function display(itemExp, id) {
|
||||||
const searchFilterField = new ExprField('filter', function(exprStr) {
|
itemExp.set("powders", []);
|
||||||
const expr = exprParser.parse(exprStr);
|
if (itemExp.get("category") == "weapon") {
|
||||||
return expr !== null ? expr : new BoolLitTerm(true);
|
apply_weapon_powders(itemExp);
|
||||||
});
|
|
||||||
const searchSortField = new ExprField('sort', function(exprStr) {
|
|
||||||
const subExprs = exprStr.split(';').map(e => exprParser.parse(e)).filter(f => f != null);
|
|
||||||
return {
|
|
||||||
type: 'array',
|
|
||||||
resolve(i, ie) {
|
|
||||||
const sortKeys = [];
|
|
||||||
for (let k = 0; k < subExprs.length; k++) sortKeys.push(subExprs[k].resolve(i, ie));
|
|
||||||
return sortKeys;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// updates the current search state from the search query input boxes
|
|
||||||
function updateSearch() {
|
|
||||||
// compile query expressions, aborting if nothing has changed or either fails to compile
|
|
||||||
const changed = searchFilterField.compile() | searchSortField.compile();
|
|
||||||
if (!changed || searchFilterField.output === null || searchSortField.output === null) return;
|
|
||||||
|
|
||||||
// update url query string
|
|
||||||
const newUrl = `${window.location.protocol}//${window.location.host}${window.location.pathname}`
|
|
||||||
+ `?f=${encodeURIComponent(searchFilterField.value)}&s=${encodeURIComponent(searchSortField.value)}`;
|
|
||||||
window.history.pushState({ path: newUrl }, '', newUrl);
|
|
||||||
|
|
||||||
// hide old search results
|
|
||||||
itemListFooter.innerText = '';
|
|
||||||
for (const itemEntry of itemEntries) itemEntry.classList.remove('visible');
|
|
||||||
|
|
||||||
// index and sort search results
|
|
||||||
const searchResults = [];
|
|
||||||
try {
|
|
||||||
for (let i = 0; i < searchDb.length; i++) {
|
|
||||||
const item = searchDb[i][0], itemExp = searchDb[i][1];
|
|
||||||
if (checkBool(searchFilterField.output.resolve(item, itemExp))) {
|
|
||||||
searchResults.push({ item, itemExp, sortKeys: searchSortField.output.resolve(item, itemExp) });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
searchFilterField.errorText.innerText = e.message;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (searchResults.length === 0) {
|
|
||||||
itemListFooter.innerText = 'No results!';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
searchResults.sort((a, b) => {
|
|
||||||
try {
|
|
||||||
return compareLexico(a.item, a.sortKeys, b.item, b.sortKeys);
|
|
||||||
} catch (e) {
|
|
||||||
console.log(a.item, b.item);
|
|
||||||
throw e;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
searchSortField.errorText.innerText = e.message;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// display search results
|
|
||||||
const searchMax = Math.min(searchResults.length, ITEM_LIST_SIZE);
|
|
||||||
for (let i = 0; i < searchMax; i++) {
|
|
||||||
const result = searchResults[i];
|
|
||||||
itemEntries[i].classList.add('visible');
|
|
||||||
result.itemExp.set("powders", []);
|
|
||||||
if (result.itemExp.get("category") == "weapon") {
|
|
||||||
apply_weapon_powders(result.itemExp);
|
|
||||||
}
|
|
||||||
displayExpandedItem(result.itemExp, `item-entry-${i}`);
|
|
||||||
if (result.sortKeys.length > 0) {
|
|
||||||
const sortKeyListContainer = document.createElement('div');
|
|
||||||
sortKeyListContainer.classList.add('row');
|
|
||||||
const sortKeyList = document.createElement('ul');
|
|
||||||
sortKeyList.classList.add('item-entry-sort-key', 'itemp', 'T0');
|
|
||||||
sortKeyListContainer.append(sortKeyList);
|
|
||||||
for (let j = 0; j < result.sortKeys.length; j++) {
|
|
||||||
const sortKeyElem = document.createElement('li');
|
|
||||||
sortKeyElem.innerText = stringify(result.sortKeys[j]);
|
|
||||||
sortKeyList.append(sortKeyElem);
|
|
||||||
}
|
|
||||||
itemEntries[i].append(sortKeyListContainer);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (searchMax < searchResults.length) {
|
|
||||||
itemListFooter.innerText = `${searchResults.length - searchMax} more...`;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// updates the search state from the input boxes after a brief delay, to prevent excessive DOM updates
|
displayExpandedItem(itemExp, id);
|
||||||
let updateSearchTask = null;
|
|
||||||
|
|
||||||
function scheduleSearchUpdate() {
|
|
||||||
if (updateSearchTask !== null) {
|
|
||||||
clearTimeout(updateSearchTask);
|
|
||||||
}
|
|
||||||
updateSearchTask = setTimeout(() => {
|
|
||||||
updateSearchTask = null;
|
|
||||||
updateSearch();
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
|
|
||||||
searchFilterField.field.addEventListener('input', e => scheduleSearchUpdate());
|
|
||||||
searchSortField.field.addEventListener('input', e => scheduleSearchUpdate());
|
|
||||||
|
|
||||||
// parse query string, display initial search results
|
|
||||||
if (window.location.search.startsWith('?')) {
|
|
||||||
for (const entryStr of window.location.search.substring(1).split('&')) {
|
|
||||||
const ndx = entryStr.indexOf('=');
|
|
||||||
if (ndx !== -1) {
|
|
||||||
switch (entryStr.substring(0, ndx)) {
|
|
||||||
case 'f':
|
|
||||||
searchFilterField.field.value = decodeURIComponent(entryStr.substring(ndx + 1));
|
|
||||||
break;
|
|
||||||
case 's':
|
|
||||||
searchSortField.field.value = decodeURIComponent(entryStr.substring(ndx + 1));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
updateSearch();
|
|
||||||
|
|
||||||
// focus the query filter text box
|
|
||||||
searchFilterField.field.focus();
|
|
||||||
searchFilterField.field.select();
|
|
||||||
|
|
||||||
// scroll-to-top button
|
|
||||||
document.getElementById('scroll-up')
|
|
||||||
.addEventListener('mousedown', e => scrollTo({ top: 0, behavior: 'smooth' }));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
(async function() {
|
(async function() {
|
||||||
|
|
|
||||||
168
js/query.js
168
js/query.js
|
|
@ -172,8 +172,174 @@ const itemQueryProps = (function() {
|
||||||
return props;
|
return props;
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
// properties of ingredients that can be looked up
|
||||||
|
// each entry is a function `(item, extended item) -> value`
|
||||||
|
const ingredientQueryProps = (function() {
|
||||||
|
const props = {};
|
||||||
|
|
||||||
|
function prop(names, type, resolve) {
|
||||||
|
if (Array.isArray(names)) {
|
||||||
|
for (name of names) {
|
||||||
|
props[name] = { type, resolve };
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
props[names] = { type, resolve };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function typeProp(names, idKey) {
|
||||||
|
prop(names, 'boolean', (i, ie) => ie.get('skills').filter(i => i === idKey).length > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function modProp(names, idKey) {
|
||||||
|
prop(names, 'boolean', (i, ie) => ie.get('posMods').get(idKey) || 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function maxId(names, idKey) {
|
||||||
|
prop(names, 'number', (i, ie) => ie.get("ids").get('maxRolls').get(idKey) || 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function minId(names, idKey) {
|
||||||
|
prop(names, 'number', (i, ie) => ie.get("ids").get('minRolls').get(idKey) || 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function rangeAvg(names, getProp) {
|
||||||
|
prop(names, 'number', (i, ie) => {
|
||||||
|
const range = getProp(i, ie);
|
||||||
|
if (!range) return 0;
|
||||||
|
const ndx = range.indexOf('-');
|
||||||
|
return (parseInt(range.substring(0, ndx), 10) + parseInt(range.substring(ndx + 1), 10)) / 2;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function map(names, comps, outType, f) {
|
||||||
|
return prop(names, outType, (i, ie) => {
|
||||||
|
const args = [];
|
||||||
|
for (let k = 0; k < comps.length; k++) args.push(comps[k].resolve(i, ie));
|
||||||
|
return f.apply(null, args);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function sum(names, ...comps) {
|
||||||
|
return map(names, comps, 'number', (...summands) => {
|
||||||
|
let total = 0;
|
||||||
|
for (let i = 0; i < summands.length; i++) total += summands[i];
|
||||||
|
return total;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
prop('name', 'string', (i, ie) => i.displayName || i.name);
|
||||||
|
const starIndices = { 0: "zero", 1: "one", 2: "two", 3: "three" };
|
||||||
|
prop(['starsname', 'starsstr', 'tiername', 'tierstr'], 'string', (i, ie) => starIndices[i.tier]);
|
||||||
|
prop(['stars', 'tier'], 'number', (i, ie) => i.tier);
|
||||||
|
prop(['level', 'lvl', 'combatlevel', 'combatlvl'], 'number', (i, ie) => i.lvl);
|
||||||
|
|
||||||
|
// TODO allow specification of item types
|
||||||
|
for (const entry of [
|
||||||
|
["armouring", "helmet", "chestplate"],
|
||||||
|
["tailoring", "leggings", "boots"],
|
||||||
|
["weaponsmithing", "spear", "dagger"],
|
||||||
|
["woodworking", "bow", "relik", "wand"],
|
||||||
|
["jeweling", "ring", "bracelet", "necklace"],
|
||||||
|
["cooking", "food"],
|
||||||
|
["alchemism", "potion"],
|
||||||
|
["scribing", "scroll"]
|
||||||
|
]) {
|
||||||
|
typeProp(entry, entry[0].toUpperCase());
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const entry of [
|
||||||
|
["left"],
|
||||||
|
["right"],
|
||||||
|
["above", "top"],
|
||||||
|
["under", "bottom"],
|
||||||
|
["touching", "touch"],
|
||||||
|
["notTouching", "notTouch"]
|
||||||
|
]) {
|
||||||
|
modProp(entry.map(i => i.toLowerCase()), entry[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
prop(['strmin', 'strreq'], 'number', (i, ie) => i["itemIDs"].strReq);
|
||||||
|
prop(['dexmin', 'dexreq'], 'number', (i, ie) => i["itemIDs"].dexReq);
|
||||||
|
prop(['intmin', 'intreq'], 'number', (i, ie) => i["itemIDs"].intReq);
|
||||||
|
prop(['defmin', 'defreq'], 'number', (i, ie) => i["itemIDs"].defReq);
|
||||||
|
prop(['agimin', 'agireq'], 'number', (i, ie) => i["itemIDs"].agiReq);
|
||||||
|
|
||||||
|
prop(['durability'], 'number', (i, ie) => i["itemIDs"].dura || 0);
|
||||||
|
|
||||||
|
prop(['charges'], 'number', (i, ie) => i["consumableIDs"].charges || 0);
|
||||||
|
prop(['duration'], 'number', (i, ie) => i["consumableIDs"].dura || 0);
|
||||||
|
|
||||||
|
sum(['summin', 'sumreq', 'totalmin', 'totalreq'], props.strmin, props.dexmin, props.intmin, props.defmin, props.agimin);
|
||||||
|
|
||||||
|
maxId('str', 'str');
|
||||||
|
maxId('dex', 'dex');
|
||||||
|
maxId('int', 'int');
|
||||||
|
maxId('def', 'def');
|
||||||
|
maxId('agi', 'agi');
|
||||||
|
sum(['skillpoints', 'skillpts', 'attributes', 'attrs'], props.str, props.dex, props.int, props.def, props.agi);
|
||||||
|
|
||||||
|
maxId(['earthdmg%', 'earthdam%', 'edmg%', 'edam%', 'edampct'], 'eDamPct');
|
||||||
|
maxId(['thunderdmg%', 'thunderdam%', 'tdmg%', 'tdam%', 'tdampct'], 'tDamPct');
|
||||||
|
maxId(['waterdmg%', 'waterdam%', 'wdmg%', 'wdam%', 'wdampct'], 'wDamPct');
|
||||||
|
maxId(['firedmg%', 'firedam%', 'fdmg%', 'fdam%', 'fdampct'], 'fDamPct');
|
||||||
|
maxId(['airdmg%', 'airdam%', 'admg%', 'adam%', 'adampct'], 'aDamPct');
|
||||||
|
sum(['sumdmg%', 'sumdam%', 'totaldmg%', 'totaldam%', 'sumdampct', 'totaldampct'], props.edampct, props.tdampct, props.wdampct, props.fdampct, props.adampct);
|
||||||
|
|
||||||
|
maxId(['mainatkdmg', 'mainatkdam', 'mainatkdmg%', 'mainatkdam%', 'meleedmg', 'meleedam', 'meleedmg%', 'meleedam%', 'mdpct'], 'mdPct');
|
||||||
|
maxId(['mainatkrawdmg', 'mainatkrawdam', 'mainatkneutraldmg', 'mainatkneutraldam', 'meleerawdmg', 'meleerawdam', 'meleeneutraldmg', 'meleeneutraldam', 'mdraw'], 'mdRaw');
|
||||||
|
maxId(['spelldmg', 'spelldam', 'spelldmg%', 'spelldam%', 'sdpct'], 'sdPct');
|
||||||
|
maxId(['spellrawdmg', 'spellrawdam', 'spellneutraldmg', 'spellneutraldam', 'sdraw'], 'sdRaw');
|
||||||
|
maxId(['rainbowraw'], 'rSdRaw');
|
||||||
|
|
||||||
|
maxId(['bonusattackspeed', 'bonusatkspd', 'attackspeedid', 'atkspdid', 'atktier'], 'atkTier');
|
||||||
|
|
||||||
|
maxId(['earthdef%', 'edef%', 'edefpct'], 'eDefPct');
|
||||||
|
maxId(['thunderdef%', 'tdef%', 'tdefpct'], 'tDefPct');
|
||||||
|
maxId(['waterdef%', 'wdef%', 'wdefpct'], 'wDefPct');
|
||||||
|
maxId(['firedef%', 'fdef%', 'fdefpct'], 'fDefPct');
|
||||||
|
maxId(['airdef%', 'adef%', 'adefpct'], 'aDefPct');
|
||||||
|
sum(['sumdef%', 'totaldef%', 'sumdefpct', 'totaldefpct'], props.edefpct, props.tdefpct, props.wdefpct, props.fdefpct, props.adefpct);
|
||||||
|
|
||||||
|
maxId(['bonushealth', 'healthid', 'bonushp', 'hpid', 'hpbonus'], 'hpBonus');
|
||||||
|
|
||||||
|
maxId(['hpregen', 'hpr', 'hr', 'hprraw'], 'hprRaw');
|
||||||
|
maxId(['hpregen%', 'hpr%', 'hr%', 'hprpct'], 'hprPct');
|
||||||
|
maxId(['lifesteal', 'ls'], 'ls');
|
||||||
|
maxId(['manaregen', 'mr'], 'mr');
|
||||||
|
maxId(['manasteal', 'ms'], 'ms');
|
||||||
|
|
||||||
|
maxId(['walkspeed', 'movespeed', 'ws', 'spd'], 'spd');
|
||||||
|
maxId('sprint', 'sprint');
|
||||||
|
maxId(['sprintregen', 'sprintreg'], 'sprintReg');
|
||||||
|
maxId(['jumpheight', 'jh'], 'jh');
|
||||||
|
|
||||||
|
maxId(['spellcost1', 'rawspellcost1', 'spcost1', 'spraw1'], 'spRaw1');
|
||||||
|
maxId(['spellcost1%', 'spcost1%', 'sppct1'], 'spPct1');
|
||||||
|
maxId(['spellcost2', 'rawspellcost2', 'spcost2', 'spraw2'], 'spRaw2');
|
||||||
|
maxId(['spellcost2%', 'spcost2%', 'sppct2'], 'spPct2');
|
||||||
|
maxId(['spellcost3', 'rawspellcost3', 'spcost3', 'spraw3'], 'spRaw3');
|
||||||
|
maxId(['spellcost3%', 'spcost3%', 'sppct3'], 'spPct3');
|
||||||
|
maxId(['spellcost4', 'rawspellcost4', 'spcost4', 'spraw4'], 'spRaw4');
|
||||||
|
maxId(['spellcost4%', 'spcost4%', 'sppct4'], 'spPct4');
|
||||||
|
sum(['sumspellcost', 'totalspellcost', 'sumrawspellcost', 'totalrawspellcost', 'sumspcost', 'totalspcost', 'sumspraw', 'totalspraw'], props.spraw1, props.spraw2, props.spraw3, props.spraw4);
|
||||||
|
sum(['sumspellcost%', 'totalspellcost%', 'sumspcost%', 'totalspcost%', 'sumsppct', 'totalsppct'], props.sppct1, props.sppct2, props.sppct3, props.sppct4);
|
||||||
|
|
||||||
|
maxId(['exploding', 'expl', 'expd'], 'expd');
|
||||||
|
maxId('poison', 'poison');
|
||||||
|
maxId('thorns', 'thorns');
|
||||||
|
maxId(['reflection', 'refl', 'ref'], 'ref');
|
||||||
|
maxId(['soulpointregen', 'spr', 'spregen'], 'spRegen');
|
||||||
|
maxId(['lootbonus', 'lb'], 'lb');
|
||||||
|
maxId(['xpbonus', 'xpb', 'xb'], 'xpb');
|
||||||
|
maxId(['stealing', 'esteal'], 'eSteal');
|
||||||
|
|
||||||
|
|
||||||
|
return props;
|
||||||
|
})();
|
||||||
|
|
||||||
// functions that can be called in query expressions
|
// functions that can be called in query expressions
|
||||||
const itemQueryFuncs = {
|
const queryFuncs = {
|
||||||
max: {
|
max: {
|
||||||
type: 'number',
|
type: 'number',
|
||||||
fn: function(item, itemExp, args) {
|
fn: function(item, itemExp, args) {
|
||||||
|
|
|
||||||
365
js/search.js
Normal file
365
js/search.js
Normal file
|
|
@ -0,0 +1,365 @@
|
||||||
|
|
||||||
|
let types;
|
||||||
|
let search_tiers;
|
||||||
|
const filters = [], excludes = [];
|
||||||
|
let item_filters = [];
|
||||||
|
let filter_id_counter = 0;
|
||||||
|
|
||||||
|
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 = [];
|
||||||
|
|
||||||
|
// name
|
||||||
|
if (document.getElementById("item-name-choice").value != "") {
|
||||||
|
queries.push("f:name?=\"" + document.getElementById("item-name-choice").value.trim() + "\"");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!filter_types_tiers(queries)) return;
|
||||||
|
|
||||||
|
|
||||||
|
// filters
|
||||||
|
for (const filter of filters) {
|
||||||
|
let min = parseInt(filter.min_elem.value);
|
||||||
|
let max = parseInt(filter.max_elem.value);
|
||||||
|
if (min > max) {
|
||||||
|
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);
|
||||||
|
|
||||||
|
let raw_name = filter.input_elem.value;
|
||||||
|
if (raw_name == "") {
|
||||||
|
continue; // empty
|
||||||
|
}
|
||||||
|
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 filter \"" + filter.input_elem.value + "\" is not recognized";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
// excludes
|
||||||
|
for (const exclude of excludes) {
|
||||||
|
let raw_name = exclude.input_elem.value;
|
||||||
|
if (raw_name == "") {
|
||||||
|
continue; // empty
|
||||||
|
}
|
||||||
|
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);
|
||||||
|
for (const query of queries) {
|
||||||
|
if (query.startsWith("s:")) {
|
||||||
|
sort_queries.push(query.slice(2));
|
||||||
|
}
|
||||||
|
else if (query.startsWith("f:")) {
|
||||||
|
filter_query = filter_query + "&" + query.slice(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.getElementById("search-results").textContent = "";
|
||||||
|
let results = [];
|
||||||
|
try {
|
||||||
|
const filter_expr = expr_parser.parse(filter_query);
|
||||||
|
const sort_exprs = sort_queries.map(q => expr_parser.parse(q));
|
||||||
|
for (let i = 0; i < search_db.length; ++i) {
|
||||||
|
const item = search_db[i][0];
|
||||||
|
const itemExp = search_db[i][1];
|
||||||
|
if (checkBool(filter_expr.resolve(item, itemExp))) {
|
||||||
|
results.push({ item, itemExp, sortKeys: sort_exprs.map(e => e.resolve(item, itemExp)) });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
results.sort((a, b) => {
|
||||||
|
return compareLexico(a.item, a.sortKeys, b.item, b.sortKeys);
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
document.getElementById("summary").textContent = e.message;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
document.getElementById("summary").textContent = results.length + " results:";
|
||||||
|
document.getElementById("summary").style.color = "white";
|
||||||
|
display(results);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function init_search() {
|
||||||
|
init_values();
|
||||||
|
|
||||||
|
// 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 tier of Object.keys(search_tiers)) {
|
||||||
|
document.getElementById("tier-" + tier).addEventListener("click", function() {
|
||||||
|
search_tiers[tier] = !search_tiers[tier];
|
||||||
|
this.classList.toggle("tier-selected");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
document.getElementById("all-tiers").addEventListener("click", function() {
|
||||||
|
for (const tier of Object.keys(search_tiers)) {
|
||||||
|
search_tiers[tier] = true;
|
||||||
|
document.getElementById("tier-" + tier).classList.add("tier-selected");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.getElementById("none-tiers").addEventListener("click", function() {
|
||||||
|
for (const tier of Object.keys(search_tiers)) {
|
||||||
|
search_tiers[tier] = false;
|
||||||
|
document.getElementById("tier-" + tier).classList.remove("tier-selected");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset_item_search() {
|
||||||
|
document.getElementById("item-name-choice").value = "";
|
||||||
|
document.getElementById("all-types").click();
|
||||||
|
document.getElementById("all-tiers").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;
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 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}));};
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
393
js/search_adv.js
Normal file
393
js/search_adv.js
Normal file
|
|
@ -0,0 +1,393 @@
|
||||||
|
function isIdentifierChar(character) {
|
||||||
|
return /[\w\d%]/i.test(character);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isIdentifierFirstChar(character) {
|
||||||
|
return /\w/i.test(character);
|
||||||
|
}
|
||||||
|
|
||||||
|
class AutocompleteContext {
|
||||||
|
constructor(field) {
|
||||||
|
this.field = field;
|
||||||
|
this.text = field.value;
|
||||||
|
this.cursorPos = this.startIndex = this.endIndex = field.selectionEnd;
|
||||||
|
while (this.startIndex > 0 && isIdentifierChar(this.text.charAt(this.startIndex - 1))) {
|
||||||
|
--this.startIndex;
|
||||||
|
}
|
||||||
|
if (!isIdentifierFirstChar(this.text.charAt(this.startIndex))) {
|
||||||
|
this.startIndex = this.cursorPos;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
while (this.endIndex < this.text.length && isIdentifierChar(this.text.charAt(this.endIndex))) {
|
||||||
|
++this.endIndex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get valid() {
|
||||||
|
return this.endIndex > this.startIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
get complText() {
|
||||||
|
return this.text.substring(this.startIndex, this.cursorPos);
|
||||||
|
}
|
||||||
|
|
||||||
|
insert(completion, supplant) {
|
||||||
|
this.field.setRangeText(completion, this.startIndex, supplant ? this.endIndex : this.cursorPos, 'end');
|
||||||
|
this.field.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
|
||||||
|
this.startIndex = this.endIndex = -1;
|
||||||
|
setTimeout(() => this.field.focus(), 5); // no idea why i need a delay here
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class AutocompleteController {
|
||||||
|
constructor(ctx, completions, exprField) {
|
||||||
|
this.ctx = ctx;
|
||||||
|
this.completions = completions;
|
||||||
|
this.exprField = exprField;
|
||||||
|
this.currentFocus = null;
|
||||||
|
|
||||||
|
for (const completion of completions) {
|
||||||
|
const complElem = document.createElement('div');
|
||||||
|
complElem.classList.add('search-field-compl-entry')
|
||||||
|
complElem.setAttribute('data-compl', completion);
|
||||||
|
complElem.innerText = completion;
|
||||||
|
complElem.addEventListener('mousemove', e => this.focus(complElem));
|
||||||
|
complElem.addEventListener('mousedown', e => this.complete(completion, true));
|
||||||
|
exprField.completions.append(complElem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get valid() {
|
||||||
|
return this.ctx.valid && this.completions.length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
focus(complElem) {
|
||||||
|
if (this.currentFocus !== null) {
|
||||||
|
this.currentFocus.classList.remove('focused');
|
||||||
|
}
|
||||||
|
this.currentFocus = complElem;
|
||||||
|
complElem.classList.add('focused');
|
||||||
|
complElem.scrollIntoView({ block: 'nearest' });
|
||||||
|
}
|
||||||
|
|
||||||
|
focusNext() {
|
||||||
|
if (this.currentFocus === null || !this.currentFocus.nextSibling) {
|
||||||
|
this.focus(this.exprField.completions.firstChild);
|
||||||
|
} else {
|
||||||
|
this.focus(this.currentFocus.nextSibling);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
focusPrev() {
|
||||||
|
if (this.currentFocus === null || !this.currentFocus.previousSibling) {
|
||||||
|
this.focus(this.exprField.completions.lastChild);
|
||||||
|
} else {
|
||||||
|
this.focus(this.currentFocus.previousSibling);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
complete(completion, supplant) {
|
||||||
|
if (completion === null) {
|
||||||
|
completion = this.currentFocus.getAttribute('data-compl');
|
||||||
|
if (completion === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.ctx.insert(completion, supplant);
|
||||||
|
this.exprField.clearAutocomplete();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// represents a field containing a query expression string
|
||||||
|
class ExprField {
|
||||||
|
constructor(key, compiler) {
|
||||||
|
this.field = document.getElementById(`search-${key}-field`);
|
||||||
|
this.completions = document.getElementById(`search-${key}-compl`);
|
||||||
|
this.errorText = document.getElementById(`search-${key}-error`);
|
||||||
|
this.prevComplText = null;
|
||||||
|
this.prevComplPos = null;
|
||||||
|
this.complCtrl = null;
|
||||||
|
this.compiler = compiler;
|
||||||
|
this.output = null;
|
||||||
|
this.text = null;
|
||||||
|
|
||||||
|
this.field.addEventListener('focus', e => this.scheduleAutocomplete());
|
||||||
|
this.field.addEventListener('change', e => this.scheduleAutocomplete());
|
||||||
|
this.field.addEventListener('keydown', e => {
|
||||||
|
if (this.complCtrl !== null && this.complCtrl.valid) {
|
||||||
|
switch (e.key) {
|
||||||
|
case 'Up':
|
||||||
|
case 'ArrowUp':
|
||||||
|
this.complCtrl.focusPrev();
|
||||||
|
break;
|
||||||
|
case 'Down':
|
||||||
|
case 'ArrowDown':
|
||||||
|
this.complCtrl.focusNext();
|
||||||
|
break;
|
||||||
|
case 'Tab':
|
||||||
|
this.complCtrl.complete(null, true);
|
||||||
|
break;
|
||||||
|
case 'Enter':
|
||||||
|
this.complCtrl.complete(null, false);
|
||||||
|
break;
|
||||||
|
case 'Escape':
|
||||||
|
this.clearAutocomplete();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
this.scheduleAutocomplete();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
} else {
|
||||||
|
switch (e.key) {
|
||||||
|
case 'Spacebar':
|
||||||
|
case ' ':
|
||||||
|
if (e.ctrlKey) {
|
||||||
|
this.autocomplete();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.scheduleAutocomplete()
|
||||||
|
});
|
||||||
|
this.field.addEventListener('mousedown', e => this.scheduleAutocomplete());
|
||||||
|
this.field.addEventListener('blur', e => this.clearAutocomplete());
|
||||||
|
}
|
||||||
|
|
||||||
|
get value() {
|
||||||
|
return this.field.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
scheduleAutocomplete() {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.field.value !== this.prevComplText || this.field.selectionEnd !== this.prevComplPos) {
|
||||||
|
this.prevComplText = this.field.value;
|
||||||
|
this.prevComplPos = this.field.selectionEnd;
|
||||||
|
this.autocomplete();
|
||||||
|
}
|
||||||
|
}, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
autocomplete() {
|
||||||
|
while (this.completions.lastChild) {
|
||||||
|
this.completions.removeChild(this.completions.lastChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
const complCtx = new AutocompleteContext(this.field);
|
||||||
|
if (!complCtx.valid) {
|
||||||
|
this.clearAutocomplete();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const complText = complCtx.complText;
|
||||||
|
const completions = getQueryIdentifiers().filter(ident => ident.startsWith(complText));
|
||||||
|
if (completions.length === 0) {
|
||||||
|
this.clearAutocomplete();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.complCtrl = new AutocompleteController(complCtx, completions, this);
|
||||||
|
this.complCtrl.focusNext();
|
||||||
|
this.completions.classList.add('visible');
|
||||||
|
}
|
||||||
|
|
||||||
|
clearAutocomplete() {
|
||||||
|
this.completions.classList.remove('visible');
|
||||||
|
this.prevComplText = this.field.value;
|
||||||
|
this.prevComplPos = this.field.selectionEnd;
|
||||||
|
this.complCtrl = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
compile() {
|
||||||
|
if (this.value === this.text) return false;
|
||||||
|
this.text = this.value;
|
||||||
|
this.errorText.innerText = '';
|
||||||
|
try {
|
||||||
|
this.output = this.compiler(this.text);
|
||||||
|
} catch (e) {
|
||||||
|
this.errorText.innerText = e.message;
|
||||||
|
this.output = null;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function stringify(v) {
|
||||||
|
return typeof v === 'number' ? (Math.round(v * 100) / 100).toString() : v;
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateEntries(size, itemList, itemEntries) {
|
||||||
|
for (let i = 0; i < size; i++) {
|
||||||
|
const itemElem = document.createElement('div');
|
||||||
|
itemElem.classList.add('col-lg-3', 'col-sm-6', "p-2", "ing-stats");
|
||||||
|
// itemElem.setAttribute('id', `item-entry-${i}`);
|
||||||
|
itemList.append(itemElem);
|
||||||
|
itemEntries.push(itemElem);
|
||||||
|
|
||||||
|
const itemElemContained = document.createElement("div");
|
||||||
|
itemElemContained.classList.add("dark-7", "rounded", "p-3", "col-auto", "g-0", "border", "border-dark", "dark-shadow");
|
||||||
|
|
||||||
|
itemElemContained.setAttribute('id', `item-entry-${i}`);
|
||||||
|
itemElem.appendChild(itemElemContained);
|
||||||
|
|
||||||
|
const sortKeyListContainer = document.createElement('div');
|
||||||
|
sortKeyListContainer.classList.add('row');
|
||||||
|
sortKeyListContainer.setAttribute('id', `item-sort-entry-${i}`);
|
||||||
|
itemEntries[i].append(sortKeyListContainer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let searchDb;
|
||||||
|
let exprParser;
|
||||||
|
|
||||||
|
function init_items_adv() {
|
||||||
|
const itemList = document.getElementById('item-list');
|
||||||
|
const itemListFooter = document.getElementById('item-list-footer');
|
||||||
|
|
||||||
|
// init item list elements
|
||||||
|
const ITEM_LIST_SIZE = 64;
|
||||||
|
const itemEntries = [];
|
||||||
|
|
||||||
|
init_values();
|
||||||
|
|
||||||
|
generateEntries(ITEM_LIST_SIZE, itemList, itemEntries);
|
||||||
|
|
||||||
|
|
||||||
|
// the two search query input boxes
|
||||||
|
const searchFilterField = new ExprField('filter', function(exprStr) {
|
||||||
|
const expr = exprParser.parse(exprStr);
|
||||||
|
return expr !== null ? expr : new BoolLitTerm(true);
|
||||||
|
});
|
||||||
|
const searchSortField = new ExprField('sort', function(exprStr) {
|
||||||
|
const subExprs = exprStr.split(';').map(e => exprParser.parse(e)).filter(f => f != null);
|
||||||
|
return {
|
||||||
|
type: 'array',
|
||||||
|
resolve(i, ie) {
|
||||||
|
const sortKeys = [];
|
||||||
|
for (let k = 0; k < subExprs.length; k++) sortKeys.push(subExprs[k].resolve(i, ie));
|
||||||
|
return sortKeys;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// updates the current search state from the search query input boxes
|
||||||
|
function updateSearch() {
|
||||||
|
// compile query expressions, aborting if nothing has changed or either fails to compile
|
||||||
|
const changed = searchFilterField.compile() | searchSortField.compile();
|
||||||
|
if (!changed || searchFilterField.output === null || searchSortField.output === null) return;
|
||||||
|
|
||||||
|
// update url query string
|
||||||
|
const newUrl = `${window.location.protocol}//${window.location.host}${window.location.pathname}`
|
||||||
|
+ `?f=${encodeURIComponent(searchFilterField.value)}&s=${encodeURIComponent(searchSortField.value)}`;
|
||||||
|
window.history.pushState({ path: newUrl }, '', newUrl);
|
||||||
|
|
||||||
|
// hide old search results
|
||||||
|
itemListFooter.innerText = '';
|
||||||
|
for (let i = 0; i < ITEM_LIST_SIZE; i++) {
|
||||||
|
// Clear old entries
|
||||||
|
setHTML(`item-entry-${i}`, "");
|
||||||
|
itemEntries[i].classList.remove('visible');
|
||||||
|
|
||||||
|
// Clear old sort keys
|
||||||
|
setHTML(`item-sort-entry-${i}`, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
// index and sort search results
|
||||||
|
const searchResults = [];
|
||||||
|
try {
|
||||||
|
for (let i = 0; i < searchDb.length; i++) {
|
||||||
|
const item = searchDb[i][0], itemExp = searchDb[i][1];
|
||||||
|
if (checkBool(searchFilterField.output.resolve(item, itemExp))) {
|
||||||
|
searchResults.push({ item, itemExp, sortKeys: searchSortField.output.resolve(item, itemExp) });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
searchFilterField.errorText.innerText = e.message;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (searchResults.length === 0) {
|
||||||
|
itemListFooter.innerText = 'No results!';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
searchResults.sort((a, b) => {
|
||||||
|
try {
|
||||||
|
return compareLexico(a.item, a.sortKeys, b.item, b.sortKeys);
|
||||||
|
} catch (e) {
|
||||||
|
console.log(a.item, b.item);
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
searchSortField.errorText.innerText = e.message;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// display search results
|
||||||
|
const searchMax = Math.min(searchResults.length, ITEM_LIST_SIZE);
|
||||||
|
for (let i = 0; i < searchMax; i++) {
|
||||||
|
const result = searchResults[i];
|
||||||
|
itemEntries[i].classList.add('visible');
|
||||||
|
display(result.itemExp, `item-entry-${i}`);
|
||||||
|
|
||||||
|
// Add new sort keys if present
|
||||||
|
if (result.sortKeys.length > 0) {
|
||||||
|
const sortKeyList = document.createElement('ul');
|
||||||
|
sortKeyList.classList.add('item-entry-sort-key', 'itemp', 'T0');
|
||||||
|
const sortKeyListContainer = document.getElementById(`item-sort-entry-${i}`);
|
||||||
|
sortKeyListContainer.append(sortKeyList);
|
||||||
|
for (let j = 0; j < result.sortKeys.length; j++) {
|
||||||
|
const sortKeyElem = document.createElement('li');
|
||||||
|
sortKeyElem.innerText = stringify(result.sortKeys[j]);
|
||||||
|
sortKeyList.append(sortKeyElem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (searchMax < searchResults.length) {
|
||||||
|
itemListFooter.innerText = `${searchResults.length - searchMax} more...`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// updates the search state from the input boxes after a brief delay, to prevent excessive DOM updates
|
||||||
|
let updateSearchTask = null;
|
||||||
|
|
||||||
|
function scheduleSearchUpdate() {
|
||||||
|
if (updateSearchTask !== null) {
|
||||||
|
clearTimeout(updateSearchTask);
|
||||||
|
}
|
||||||
|
updateSearchTask = setTimeout(() => {
|
||||||
|
updateSearchTask = null;
|
||||||
|
updateSearch();
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
searchFilterField.field.addEventListener('input', e => scheduleSearchUpdate());
|
||||||
|
searchSortField.field.addEventListener('input', e => scheduleSearchUpdate());
|
||||||
|
|
||||||
|
// parse query string, display initial search results
|
||||||
|
if (window.location.search.startsWith('?')) {
|
||||||
|
for (const entryStr of window.location.search.substring(1).split('&')) {
|
||||||
|
const ndx = entryStr.indexOf('=');
|
||||||
|
if (ndx !== -1) {
|
||||||
|
switch (entryStr.substring(0, ndx)) {
|
||||||
|
case 'f':
|
||||||
|
searchFilterField.field.value = decodeURIComponent(entryStr.substring(ndx + 1));
|
||||||
|
break;
|
||||||
|
case 's':
|
||||||
|
searchSortField.field.value = decodeURIComponent(entryStr.substring(ndx + 1));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
updateSearch();
|
||||||
|
|
||||||
|
// focus the query filter text box
|
||||||
|
searchFilterField.field.focus();
|
||||||
|
searchFilterField.field.select();
|
||||||
|
|
||||||
|
// scroll-to-top button
|
||||||
|
document.getElementById('scroll-up')
|
||||||
|
.addEventListener('mousedown', e => scrollTo({ top: 0, behavior: 'smooth' }));
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue