wynnatlas item search now in bootstrap; minor item js refactoring
This commit is contained in:
ferricles
parent
a5093a3329
commit
3f1ed1b8d9
12 changed files with 186 additions and 163 deletions
|
|
@ -41,7 +41,7 @@
|
||||||
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||||
<a href = ""><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
|
<a href = ""><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 = "../crafter/"><img src = "../media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||||
<a href = "/items.html"><img src = "../media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</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 = "/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 = "/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 href = "/wynnfo/index.html"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
<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 = "../builder/"><img src="../media/icons/new/builder.png" alt = "WynnBuilder" title = "WynnBuilder"><b>WynnBuilder</b></a>
|
||||||
<a href = ""><img src = "../media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
<a href = ""><img src = "../media/icons/new/crafter.png" alt = "WynnCrafter" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||||
<a href = "/items.html"><img src = "../media/icons/new/searcher.png" alt = "WynnAtlas" title = "WynnAtlas"><b>WynnAtlas</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 = "/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 = "/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 href = "/wynnfo/index.html"><img src = "../media/icons/new/book.png" alt = "Wynnfo" title = "WynnCrafter"><b>WynnCrafter</b></a>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@
|
||||||
/* builder containers */
|
/* builder containers */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.e_slider, .t_slider, .w_slider, .f_slider, .a_slider {
|
.e_slider, .t_slider, .w_slider, .f_slider, .a_slider {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
background: #AAAAAA;
|
background: #AAAAAA;
|
||||||
|
|
@ -351,3 +350,9 @@ input.equipment-input {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-title {
|
||||||
|
text-align: center;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
137
items.html
137
items.html
|
|
@ -1,137 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html scroll-behavior="smooth">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="HandheldFriendly" content="true" />
|
|
||||||
<meta name="MobileOptimized" content="320" />
|
|
||||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
|
|
||||||
<!-- nunito font, copying wynndata -->
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="/css/styles.css">
|
|
||||||
<link rel="stylesheet" href="/css/items.css">
|
|
||||||
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="/css/items-wide.css"/>
|
|
||||||
<link rel="stylesheet" media="screen and (max-width: 1099px)" href="/css/items-narrow.css"/>
|
|
||||||
<link rel="icon" href="./media/icons/new/searcher.png">
|
|
||||||
<link rel="manifest" href="manifest.json">
|
|
||||||
<title>Wynn Clientside</title>
|
|
||||||
</head>
|
|
||||||
<body class="all">
|
|
||||||
<div class="center">
|
|
||||||
<header class = "header nomarginp">
|
|
||||||
<div class = "headerleft" id = "headerleft">
|
|
||||||
</div>
|
|
||||||
<div class = "headercenter" id = "headercenter">
|
|
||||||
<div >
|
|
||||||
<p class = "itemp" id = "header">WynnAtlas</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class = "headerright" id = "headerright">
|
|
||||||
<div class="center" id="advanced">
|
|
||||||
<a href="./items_2.html" class = "link">Advanced Search</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<div class="itemsearch">
|
|
||||||
<div class="searchbox">
|
|
||||||
<div class="left">
|
|
||||||
<label for="name-choice">Name:</label><br>
|
|
||||||
<input class="searchinput" type="text" id="name-choice" name="name-choice" placeholder="Item name (case insensitive)" tabindex="1" autofocus/>
|
|
||||||
<p class="error"></p>
|
|
||||||
</div>
|
|
||||||
<div class="left">
|
|
||||||
<label for="category-choice">Category:</label><br>
|
|
||||||
<input class="searchinput" list="category-items" id="category-choice" name="category-choice" placeholder="ALL" tabindex="2"/>
|
|
||||||
<datalist id="category-items">
|
|
||||||
<option value="ALL">
|
|
||||||
<option value="armor">
|
|
||||||
<option value="helmet">
|
|
||||||
<option value="chestplate">
|
|
||||||
<option value="leggings">
|
|
||||||
<option value="boots">
|
|
||||||
<option value="accessory">
|
|
||||||
<option value="ring">
|
|
||||||
<option value="bracelet">
|
|
||||||
<option value="necklace">
|
|
||||||
<option value="weapon">
|
|
||||||
<option value="wand">
|
|
||||||
<option value="spear">
|
|
||||||
<option value="bow">
|
|
||||||
<option value="dagger">
|
|
||||||
<option value="relik">
|
|
||||||
</datalist>
|
|
||||||
<p class="error"></p>
|
|
||||||
</div>
|
|
||||||
<div class="left">
|
|
||||||
<label for="rarity-choice">Rarity:</label><br>
|
|
||||||
<input class="searchinput" list="rarity-items" id="rarity-choice" name="rarity-choice" placeholder="ANY" tabindex="3"/>
|
|
||||||
<datalist id="rarity-items">
|
|
||||||
<option value="ANY">
|
|
||||||
<option value="Normal">
|
|
||||||
<option value="Unique">
|
|
||||||
<option value="Set">
|
|
||||||
<option value="Rare">
|
|
||||||
<option value="Legendary">
|
|
||||||
<option value="Fabled">
|
|
||||||
<option value="Mythic">
|
|
||||||
<option value="Sane">
|
|
||||||
</datalist>
|
|
||||||
<p class="error"></p>
|
|
||||||
</div>
|
|
||||||
<div class="left">
|
|
||||||
<label for="level-choice">Level:</label><br>
|
|
||||||
<input class="searchinput" type="text" id="level-choice" name="level-choice" value="1-106" tabindex="4"/>
|
|
||||||
<p class="error"></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<datalist id="filter-items">
|
|
||||||
</datalist>
|
|
||||||
<div class="left">
|
|
||||||
<label for="filter1-choice">Filter 1:</label><br>
|
|
||||||
<input class="searchinput" list="filter-items" id="filter1-choice" name="filter1-choice" placeholder="ANY" tabindex="5"/>
|
|
||||||
<p class="error"></p>
|
|
||||||
</div>
|
|
||||||
<div class="left">
|
|
||||||
<label for="filter2-choice">Filter 2:</label><br>
|
|
||||||
<input class="searchinput" list="filter-items" id="filter2-choice" name="filter2-choice" placeholder="ANY" tabindex="6"/>
|
|
||||||
<p class="error"></p>
|
|
||||||
</div>
|
|
||||||
<div class="left">
|
|
||||||
<label for="filter3-choice">Filter 3:</label><br>
|
|
||||||
<input class="searchinput" list="filter-items" id="filter3-choice" name="filter3-choice" placeholder="ANY" tabindex="7"/>
|
|
||||||
<p class="error"></p>
|
|
||||||
</div>
|
|
||||||
<div class="left">
|
|
||||||
<label for="filter4-choice">Filter 4:</label><br>
|
|
||||||
<input class="searchinput" list="filter-items" id="filter4-choice" name="filter4-choice" placeholder="ANY" tabindex="8"/>
|
|
||||||
<p class="error"></p>
|
|
||||||
</div>
|
|
||||||
<div class="right" style="grid-column:1/span 2">
|
|
||||||
<button class = "button" id = "search-button" onclick = "doItemSearch()" tabindex="9">
|
|
||||||
Search!
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="summary" class="left" style="grid-column:3/span 2">
|
|
||||||
Hello!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="center items" id="main">
|
|
||||||
</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/loadheader.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_2.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/items.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
146
items/index.html
Normal file
146
items/index.html
Normal file
|
|
@ -0,0 +1,146 @@
|
||||||
|
<!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">
|
||||||
|
</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 = ""><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 = "document.querySelector('#search-container').style.display = '';"><img src="../media/icons/new/searcher.png" alt="" title="Item Search"><b>WynnAtlas Mini</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/>
|
||||||
|
</div>
|
||||||
|
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
|
||||||
|
<div class = "col">
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col-lg-3 col-sm-12">
|
||||||
|
<div class = "col fw-bold">Name:</div>
|
||||||
|
<input class = "col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="name-choice" name="name-choice" placeholder="Item name (case insensitive)"/>
|
||||||
|
<p class="error col"></p>
|
||||||
|
</div>
|
||||||
|
<div class = "col-lg-3 col-sm-12">
|
||||||
|
<div class = "col fw-bold">Category:</div>
|
||||||
|
<input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="category-items" id="category-choice" name="category-choice" placeholder="ALL"/>
|
||||||
|
<datalist id="category-items">
|
||||||
|
<option value="ALL">
|
||||||
|
<option value="armor">
|
||||||
|
<option value="helmet">
|
||||||
|
<option value="chestplate">
|
||||||
|
<option value="leggings">
|
||||||
|
<option value="boots">
|
||||||
|
<option value="accessory">
|
||||||
|
<option value="ring">
|
||||||
|
<option value="bracelet">
|
||||||
|
<option value="necklace">
|
||||||
|
<option value="weapon">
|
||||||
|
<option value="wand">
|
||||||
|
<option value="spear">
|
||||||
|
<option value="bow">
|
||||||
|
<option value="dagger">
|
||||||
|
<option value="relik">
|
||||||
|
</datalist>
|
||||||
|
<p class="error"></p>
|
||||||
|
</div>
|
||||||
|
<div class = "col-lg-3 col-sm-12">
|
||||||
|
<div class = "col fw-bold">Rarity:</div>
|
||||||
|
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="rarity-items" id="rarity-choice" name="rarity-choice" placeholder="ANY"/>
|
||||||
|
<datalist id = "rarity-items">
|
||||||
|
<option value="ANY">
|
||||||
|
<option value="Normal">
|
||||||
|
<option value="Unique">
|
||||||
|
<option value="Set">
|
||||||
|
<option value="Rare">
|
||||||
|
<option value="Legendary">
|
||||||
|
<option value="Fabled">
|
||||||
|
<option value="Mythic">
|
||||||
|
<option value="Sane">
|
||||||
|
</datalist>
|
||||||
|
<p class="error col-auto"></p>
|
||||||
|
</div>
|
||||||
|
<div class = "col-lg-3 col-sm-12">
|
||||||
|
<div class = "col fw-bold">Level Range:</div>
|
||||||
|
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="level-choice" name="level-choice" placeholder = "1-106"/>
|
||||||
|
<p class="error col-auto"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col-lg-3 col-sm-12">
|
||||||
|
<div class = "col fw-bold">Filter 1:</div>
|
||||||
|
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter1-choice" name="filter1-choice" placeholder="ANY"/>
|
||||||
|
<p class="error col-auto"></p>
|
||||||
|
</div>
|
||||||
|
<div class = "col-lg-3 col-sm-12">
|
||||||
|
<div class = "col fw-bold">Filter 2:</div>
|
||||||
|
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter2-choice" name="filter2-choice" placeholder="ANY"/>
|
||||||
|
<p class="error col-auto"></p>
|
||||||
|
</div>
|
||||||
|
<div class = "col-lg-3 col-sm-12">
|
||||||
|
<div class = "col fw-bold">Filter 3:</div>
|
||||||
|
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter3-choice" name="filter3-choice" placeholder="ANY"/>
|
||||||
|
<p class="error col-auto"></p>
|
||||||
|
</div>
|
||||||
|
<div class = "col-lg-3 col-sm-12">
|
||||||
|
<div class = "col fw-bold">Filter 4:</div>
|
||||||
|
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter4-choice" name="filter4-choice" placeholder="ANY"/>
|
||||||
|
<p class="error col-auto"></p>
|
||||||
|
</div>
|
||||||
|
<datalist id = "filter-items"></datalist>
|
||||||
|
</div>
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col-auto">
|
||||||
|
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "search-button" onclick = "doItemSearch()">
|
||||||
|
Search!
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class = "col-auto">
|
||||||
|
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetItemSearch()">
|
||||||
|
Reset
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row box-title justify-content-center" id = "summary">
|
||||||
|
</div>
|
||||||
|
<div class = "row" id = "search-results">
|
||||||
|
|
||||||
|
</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/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/sq2display_constants.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/sq2display.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/query.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/query_2.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/items.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/sq2Items.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
0
items/temp.html
Normal file
0
items/temp.html
Normal file
|
|
@ -367,7 +367,7 @@ function init_autocomplete() {
|
||||||
console.log('init dropdown for '+i+"-choice" )
|
console.log('init dropdown for '+i+"-choice" )
|
||||||
dropdowns.set(i+"-choice", new autoComplete({
|
dropdowns.set(i+"-choice", new autoComplete({
|
||||||
data: {
|
data: {
|
||||||
src: itemFilters,
|
src: sq2ItemFilters,
|
||||||
},
|
},
|
||||||
selector: "#"+i+"-choice",
|
selector: "#"+i+"-choice",
|
||||||
wrapper: false,
|
wrapper: false,
|
||||||
|
|
|
||||||
|
|
@ -245,16 +245,25 @@ function displaysq2ExpandedItem(item, parent_id){
|
||||||
let row = document.createElement("div");
|
let row = document.createElement("div");
|
||||||
|
|
||||||
let p_elem = document.createElement("div");
|
let p_elem = document.createElement("div");
|
||||||
let plusminus = document.createElement("div");
|
|
||||||
row.classList.add("row", "no-collapse");
|
row.classList.add("row", "no-collapse");
|
||||||
p_elem.classList.add("col", "text-center");
|
p_elem.classList.add("col", "text-center", "item-title");
|
||||||
p_elem.classList.add(item.has("tier") ? item.get("tier").replace(" ","") : "none");
|
p_elem.classList.add(item.has("tier") ? item.get("tier").replace(" ","") : "none");
|
||||||
p_elem.style.textGrow = 1;
|
p_elem.style.textGrow = 1;
|
||||||
|
|
||||||
|
row.appendChild(p_elem);
|
||||||
|
|
||||||
|
/*
|
||||||
|
FUNCTIONALITY FOR THIS FEATURE HAS SINCE BEEN REMOVED (WITH SQ2).
|
||||||
|
IF WE WANT TO USE IT IN THE FUTURE, I'VE LEFT THE CODE TO ADD IT IN HERE
|
||||||
|
*/
|
||||||
|
|
||||||
//allow the plus minus element to toggle upon click: ➕➖
|
//allow the plus minus element to toggle upon click: ➕➖
|
||||||
plusminus.id = parent_div.id.split("-")[0] + "-pm";
|
// let plusminus = document.createElement("div");
|
||||||
plusminus.classList.add("col", "plus_minus", "text_end");
|
// plusminus.id = parent_div.id.split("-")[0] + "-pm";
|
||||||
plusminus.style.flexGrow = 0;
|
// plusminus.classList.add("col", "plus_minus", "text_end");
|
||||||
plusminus.textContent = "\u2795";
|
// plusminus.style.flexGrow = 0;
|
||||||
|
// plusminus.textContent = "\u2795";
|
||||||
|
// row.appendChild(plusminus);
|
||||||
|
|
||||||
if (item.get("custom")) {
|
if (item.get("custom")) {
|
||||||
// p_elem.href = url_base.replace(/\w+.html/, "") + "customizer.html#" + item.get("hash");
|
// p_elem.href = url_base.replace(/\w+.html/, "") + "customizer.html#" + item.get("hash");
|
||||||
|
|
@ -270,8 +279,6 @@ function displaysq2ExpandedItem(item, parent_id){
|
||||||
|
|
||||||
|
|
||||||
parent_div.appendChild(row);
|
parent_div.appendChild(row);
|
||||||
row.appendChild(p_elem);
|
|
||||||
row.appendChild(plusminus);
|
|
||||||
|
|
||||||
let img = document.createElement("img");
|
let img = document.createElement("img");
|
||||||
if (item && item.has("type")) {
|
if (item && item.has("type")) {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
|
|
||||||
|
|
||||||
const translate_mappings = {
|
const sq2_translate_mappings = {
|
||||||
//"Name": "name",
|
//"Name": "name",
|
||||||
//"Display Name": "displayName",
|
//"Display Name": "displayName",
|
||||||
//"tier"Tier": ",
|
//"tier"Tier": ",
|
||||||
|
|
@ -92,7 +92,7 @@ const translate_mappings = {
|
||||||
"Gather Speed Bonus": "gSpd",
|
"Gather Speed Bonus": "gSpd",
|
||||||
};
|
};
|
||||||
|
|
||||||
const special_mappings = {
|
const sq2_special_mappings = {
|
||||||
"Sum (skill points)": new SumQuery(["str", "dex", "int", "def", "agi"]),
|
"Sum (skill points)": new SumQuery(["str", "dex", "int", "def", "agi"]),
|
||||||
"Sum (Mana Sustain)": new SumQuery(["mr", "ms"]),
|
"Sum (Mana Sustain)": new SumQuery(["mr", "ms"]),
|
||||||
"Sum (Life Sustain)": new SumQuery(["hpr", "ls"]),
|
"Sum (Life Sustain)": new SumQuery(["hpr", "ls"]),
|
||||||
|
|
@ -104,16 +104,14 @@ const special_mappings = {
|
||||||
"No Defense Req": new NegateQuery("defReq"),
|
"No Defense Req": new NegateQuery("defReq"),
|
||||||
};
|
};
|
||||||
|
|
||||||
let itemFilters = []
|
let sq2ItemFilters = []
|
||||||
for (let x in translate_mappings) {
|
for (let x in sq2_translate_mappings) {
|
||||||
itemFilters.push(x);
|
sq2ItemFilters.push(x);
|
||||||
}
|
}
|
||||||
for (let x in special_mappings) {
|
for (let x in sq2_special_mappings) {
|
||||||
itemFilters.push(x);
|
sq2ItemFilters.push(x);
|
||||||
}
|
}
|
||||||
|
|
||||||
let itemCategories = [ "armor", "accessory", "weapon" ];
|
|
||||||
|
|
||||||
function applyQuery(items, query) {
|
function applyQuery(items, query) {
|
||||||
return items.filter(query.filter, query).sort(query.compare);
|
return items.filter(query.filter, query).sort(query.compare);
|
||||||
}
|
}
|
||||||
|
|
@ -124,12 +122,16 @@ function displayItems(items_copy) {
|
||||||
if (i > 200) {break;}
|
if (i > 200) {break;}
|
||||||
let item = items_copy[i];
|
let item = items_copy[i];
|
||||||
let box = document.createElement("div");
|
let box = document.createElement("div");
|
||||||
box.classList.add("col-auto", "dark-7", "dark-shadow");
|
box.classList.add("col-lg-3", "col-sm-6", "p-2");
|
||||||
box.style.position = "absolute";
|
|
||||||
box.id = "item"+i;
|
box.id = "item"+i;
|
||||||
box.addEventListener("dblclick", function() {set_item(item);});
|
box.addEventListener("dblclick", function() {set_item(item);});
|
||||||
|
|
||||||
|
let bckgrdbox = document.createElement("div");
|
||||||
|
bckgrdbox.classList.add("dark-7", "rounded", "px-2", "col-auto");
|
||||||
|
box.appendChild(bckgrdbox);
|
||||||
|
bckgrdbox.id = "item"+i+"b";
|
||||||
items_parent.appendChild(box);
|
items_parent.appendChild(box);
|
||||||
displaysq2ExpandedItem(item, box.id);
|
displaysq2ExpandedItem(item, bckgrdbox.id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -158,7 +160,7 @@ function doItemSearch() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let level_dat = document.getElementById("search-level-choice").value.split("-");
|
let level_dat = document.getElementById("level-choice").value ? document.getElementById("level-choice").value.split("-") : [1, 106];
|
||||||
queries.push(new LevelRangeQuery(parseInt(level_dat[0]), parseInt(level_dat[1])));
|
queries.push(new LevelRangeQuery(parseInt(level_dat[0]), parseInt(level_dat[1])));
|
||||||
|
|
||||||
for (let i = 1; i <= 4; ++i) {
|
for (let i = 1; i <= 4; ++i) {
|
||||||
|
|
@ -184,7 +186,7 @@ function doItemSearch() {
|
||||||
items_copy = applyQuery(items_copy, query);
|
items_copy = applyQuery(items_copy, query);
|
||||||
console.log(items_copy.length);
|
console.log(items_copy.length);
|
||||||
}
|
}
|
||||||
// document.getElementById("summary").textContent = items_copy.length + " results."
|
document.getElementById("summary").textContent = items_copy.length + " results:"
|
||||||
displayItems(items_copy);
|
displayItems(items_copy);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue