wynnatlas item search now in bootstrap; minor item js refactoring

This commit is contained in:
ferricles 2022-05-12 16:41:45 -07:00
parent a5093a3329
commit 3f1ed1b8d9
12 changed files with 186 additions and 163 deletions

View file

@ -41,7 +41,7 @@
<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 = "../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 = "/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>

View file

@ -23,7 +23,7 @@
<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 = ""><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 = "/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>

View file

@ -10,7 +10,6 @@
/* builder containers */
.e_slider, .t_slider, .w_slider, .f_slider, .a_slider {
-webkit-appearance: none;
background: #AAAAAA;
@ -350,4 +349,10 @@ input.equipment-input {
.box-title {
text-align: center;
font-size: 1.25rem;
}
.item-title {
text-align: center;
overflow-wrap: break-word;
font-size: 1rem;
}

View file

@ -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
View 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
View file

View file

@ -367,7 +367,7 @@ function init_autocomplete() {
console.log('init dropdown for '+i+"-choice" )
dropdowns.set(i+"-choice", new autoComplete({
data: {
src: itemFilters,
src: sq2ItemFilters,
},
selector: "#"+i+"-choice",
wrapper: false,

View file

@ -245,16 +245,25 @@ function displaysq2ExpandedItem(item, parent_id){
let row = document.createElement("div");
let p_elem = document.createElement("div");
let plusminus = document.createElement("div");
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.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:
plusminus.id = parent_div.id.split("-")[0] + "-pm";
plusminus.classList.add("col", "plus_minus", "text_end");
plusminus.style.flexGrow = 0;
plusminus.textContent = "\u2795";
// let plusminus = document.createElement("div");
// plusminus.id = parent_div.id.split("-")[0] + "-pm";
// plusminus.classList.add("col", "plus_minus", "text_end");
// plusminus.style.flexGrow = 0;
// plusminus.textContent = "\u2795";
// row.appendChild(plusminus);
if (item.get("custom")) {
// 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);
row.appendChild(p_elem);
row.appendChild(plusminus);
let img = document.createElement("img");
if (item && item.has("type")) {

View file

@ -1,6 +1,6 @@
const translate_mappings = {
const sq2_translate_mappings = {
//"Name": "name",
//"Display Name": "displayName",
//"tier"Tier": ",
@ -92,7 +92,7 @@ const translate_mappings = {
"Gather Speed Bonus": "gSpd",
};
const special_mappings = {
const sq2_special_mappings = {
"Sum (skill points)": new SumQuery(["str", "dex", "int", "def", "agi"]),
"Sum (Mana Sustain)": new SumQuery(["mr", "ms"]),
"Sum (Life Sustain)": new SumQuery(["hpr", "ls"]),
@ -104,16 +104,14 @@ const special_mappings = {
"No Defense Req": new NegateQuery("defReq"),
};
let itemFilters = []
for (let x in translate_mappings) {
itemFilters.push(x);
let sq2ItemFilters = []
for (let x in sq2_translate_mappings) {
sq2ItemFilters.push(x);
}
for (let x in special_mappings) {
itemFilters.push(x);
for (let x in sq2_special_mappings) {
sq2ItemFilters.push(x);
}
let itemCategories = [ "armor", "accessory", "weapon" ];
function applyQuery(items, query) {
return items.filter(query.filter, query).sort(query.compare);
}
@ -124,12 +122,16 @@ function displayItems(items_copy) {
if (i > 200) {break;}
let item = items_copy[i];
let box = document.createElement("div");
box.classList.add("col-auto", "dark-7", "dark-shadow");
box.style.position = "absolute";
box.classList.add("col-lg-3", "col-sm-6", "p-2");
box.id = "item"+i;
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);
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])));
for (let i = 1; i <= 4; ++i) {
@ -184,7 +186,7 @@ function doItemSearch() {
items_copy = applyQuery(items_copy, query);
console.log(items_copy.length);
}
// document.getElementById("summary").textContent = items_copy.length + " results."
document.getElementById("summary").textContent = items_copy.length + " results:"
displayItems(items_copy);
}