morphNon/wynnbuilder-idk
2
0
Fork 1
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge branch 'UI_test' of https://github.com/hppeng-wynn/hppeng-wynn.github.io into UI_test

Browse source
This commit is contained in:
ferricles 2022-05-13 20:14:37 -07:00
parent ba068a62ae ef180987a6
commit 652991067f
3 changed files with 62 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
builder/index.html
View file

@ -103,7 +103,7 @@
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/>
</div>
<div class="col d-flex justify-content-end">
<div class="col d-flex justify-content-end" style="height: 100%;">
<!-- <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="ring1-powder" name="ring1-powder" placeholder="no powders" tabindex="2"/> -->
</div>
</div>
@ -157,8 +157,7 @@
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/>
</div>
<div class="col d-flex justify-content-end">
<!-- <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="ring2-powder" name="ring2-powder" placeholder="no powders" tabindex="2"/> -->
<div class="col d-flex justify-content-end" style="height: 100%;">
</div>
</div>
</div>
@ -211,8 +210,8 @@
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/>
</div>
<div class="col d-flex justify-content-end">
<!-- <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="bracelet-powder" name="bracelet-powder" placeholder="no powders" tabindex="2"/> -->
<div class="col d-flex justify-content-end" style="height: 100%;">
</div>
</div>
</div>
@ -265,8 +264,7 @@
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/>
</div>
<div class="col d-flex justify-content-end">
<!-- <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="necklace-powder" name="necklace-powder" placeholder="no powders" tabindex="2"/> -->
<div class="col d-flex justify-content-end" style="height: 100%;">
</div>
</div>
</div>

13
items/index.html
View file

@ -47,7 +47,7 @@
</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"/>
<input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="category-choice" name="category-choice" placeholder="ALL"/>
<datalist id="category-items">
<option value="ALL">
<option value="armor">
@ -70,7 +70,7 @@
</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"/>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="rarity-choice" name="rarity-choice" placeholder="ANY"/>
<datalist id = "rarity-items">
<option value="ANY">
<option value="Normal">
@ -93,22 +93,22 @@
<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"/>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" 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"/>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter2-choice" name="filter2-choice" placeholder="ANY"/>
<p class="error col-auto"></p>
</div>
<div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Filter 3:</div>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter3-choice" name="filter3-choice" placeholder="ANY"/>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter3-choice" name="filter3-choice" placeholder="ANY"/>
<p class="error col-auto"></p>
</div>
<div class = "col-lg-3 col-sm-12">
<div class = "col fw-bold">Filter 4:</div>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter4-choice" name="filter4-choice" placeholder="ANY"/>
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter4-choice" name="filter4-choice" placeholder="ANY"/>
<p class="error col-auto"></p>
</div>
<datalist id = "filter-items"></datalist>
@ -133,6 +133,7 @@
</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/utils.js"></script>
<script type="text/javascript" src="../js/build_utils.js"></script>
<script type="text/javascript" src="../js/icons.js"></script>

50
js/sq2items.js
View file

@ -1,4 +1,54 @@
document.addEventListener("DOMContentLoaded", function() {
let filterInputs = new Map([["category", ["ALL", "armor", "helmet", "chestplate", "leggings", "boots", "accessory", "ring", "bracelet", "weapon", "wand", "spear", "bow", "dagger", "relik"]],
["rarity", ["ANY", "Normal", "Unique", "Set", "Rare", "Legendary", "Fabled", "Mythic", "Sane"]],
["filter1", sq2ItemFilters],
["filter2", sq2ItemFilters],
["filter3", sq2ItemFilters],
["filter4", sq2ItemFilters]]);
for (const [field, data] of filterInputs) {
filterInputs.set(field, new autoComplete({
data: {
src: data,
},
threshold: 0,
selector: "#"+ field +"-choice",
wrapper: false,
resultsList: {
maxResults: 100,
tabSelect: true,
noResults: true,
class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm",
element: (list, data) => {
let position = document.getElementById(field+'-choice').getBoundingClientRect();
list.style.top = position.bottom + window.scrollY +"px";
list.style.left = position.x+"px";
list.style.width = position.width+"px";
list.style.maxHeight = position.height * 4 +"px";
if (!data.results.length) {
message = document.createElement('li');
message.classList.add('scaled-font');
message.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;
};
},
},
}
}));
};
});
const sq2_translate_mappings = {
//"Name": "name",