endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

feat: add custom dropdown

Browse source
This commit is contained in:
reschan 2021-10-23 20:51:54 +07:00
parent 4c7a7e0939
commit cbfd8d0a4e
6 changed files with 157 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
sq2bs.css
View file

@ -145,12 +145,39 @@
}
/* equipment field specifics */
/* inputs and dropdowns */
.form-control {
transition: none !important;
box-shadow: none !important;
width: 95% !important;
}
ul {
list-style-type: none;
}
ul.search-box {
position: absolute;
padding: 0;
}
li.search-item {
cursor: pointer;
}
li.search-item:hover {
background-color: hsl(0, 0%, 11%) !important;
}
input {
min-width: 0;
width: 100%;
}
input.equipment-input {
font-weight: bold;
}
.text-right {
float: right;
}
@ -168,15 +195,6 @@
font-weight: bold;
}
input {
min-width: 0;
width: 100%;
}
input.equipment-input {
font-weight: bold;
}
.scaled-font {
font-size: 2.5rem;
}

86
sq2bs.html
View file

@ -12,6 +12,7 @@
<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="sq2bs.css">
</head>
@ -29,7 +30,7 @@
<div class="col">
<div class="row row-cols-1 row-cols-xl-2 rounded gy-4 gx-5 justify-content-center">
<div class="col rounded order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded">
<div class="row h-100 dark-shadow dark-6 rounded" id="helmet-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="helmet-img-loc">
<img class="img-fluid" src="media/items/new/generic-helmet.png">
</div>
@ -46,19 +47,17 @@
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/>
<datalist id="helmet-items">
</datalist>
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/>
</div>
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="helmet-powder" name="helmet-powder" placeholder="powders" tabindex="1"/>
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="helmet-powder" name="helmet-powder" placeholder="powders" tabindex="1"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto rounded order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded">
<div class="row h-100 dark-shadow dark-6 rounded" id="ring1-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="ring1-img-loc">
<img id="ring1-img" class="img-fluid" src="media/items/new/generic-ring.png">
</div>
@ -75,19 +74,17 @@
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/>
<datalist id="ring1-items">
</datalist>
<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">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="ring1-powder" name="ring1-powder" placeholder="powders" tabindex="2"/>
<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="powders" tabindex="2"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto rounded order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded">
<div class="row h-100 dark-shadow dark-6 rounded" id="chestplate-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="chestplate-img-loc">
<img id="chestplate-img" class="img-fluid" src="media/items/new/generic-chestplate.png">
</div>
@ -104,19 +101,17 @@
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/>
<datalist id="chestplate-items">
</datalist>
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/>
</div>
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders" tabindex="1"/>
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders" tabindex="1"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto rounded order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded">
<div class="row h-100 dark-shadow dark-6 rounded" id="ring2-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="ring2-img-loc">
<img id="ring2-img" class="img-fluid" src="media/items/new/generic-ring.png">
</div>
@ -133,19 +128,17 @@
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/>
<datalist id="ring2-items">
</datalist>
<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-7 rounded scaled-font form-control form-control-sm" type="text" id="ring2-powder" name="ring2-powder" placeholder="powders" tabindex="2"/>
<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="powders" tabindex="2"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto rounded order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded">
<div class="row h-100 dark-shadow dark-6 rounded" id="leggings-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="leggings-img-loc">
<img id="leggings-img" class="img-fluid" src="media/items/new/generic-leggings.png">
</div>
@ -162,19 +155,17 @@
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/>
<datalist id="leggings-items">
</datalist>
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/>
</div>
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="leggings-powder" name="leggings-powder" placeholder="powders" tabindex="1"/>
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="leggings-powder" name="leggings-powder" placeholder="powders" tabindex="1"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto rounded order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded">
<div class="row h-100 dark-shadow dark-6 rounded" id="bracelet-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="bracelet-img-loc">
<img id="bracelet-img" class="img-fluid" src="media/items/new/generic-bracelet.png">
</div>
@ -191,19 +182,17 @@
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/>
<datalist id="bracelet-items">
</datalist>
<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-7 rounded scaled-font form-control form-control-sm" type="text" id="bracelet-powder" name="bracelet-powder" placeholder="powders" tabindex="2"/>
<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="powders" tabindex="2"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto rounded order-xl-0 order-0">
<div class="row h-100 dark-shadow dark-6 rounded">
<div class="row h-100 dark-shadow dark-6 rounded" id="boots-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="boots-img-loc">
<img id="boots-img" class="img-fluid" src="media/items/new/generic-boots.png">
</div>
@ -220,19 +209,17 @@
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="boots-items" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/>
<datalist id="boots-items">
</datalist>
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/>
</div>
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="boots-powder" name="boots-powder" placeholder="powders" tabindex="1"/>
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="boots-powder" name="boots-powder" placeholder="powders" tabindex="1"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto rounded order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded">
<div class="row h-100 dark-shadow dark-6 rounded" id="necklace-dropdown">
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="necklace-img-loc">
<img id="necklace-img" class="img-fluid" src="media/items/new/generic-necklace.png">
</div>
@ -249,19 +236,17 @@
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/>
<datalist id="necklace-items">
</datalist>
<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-7 rounded scaled-font form-control form-control-sm" type="text" id="necklace-powder" name="necklace-powder" placeholder="powders" tabindex="2"/>
<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="powders" tabindex="2"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto rounded order-xl-0 order-1">
<div class="row h-100 dark-shadow dark-6 rounded">
<div class="row h-100 dark-shadow dark-6 rounded" id='weapon-dropdown'>
<div class="col-auto g-0 dark-7 rounded-end my-auto text-center dark-shadow-sm scaled-item-icon" id="weapon-img-loc">
<img id="weapon-img" class="img-fluid" src="media/items/new/generic-wand.png">
</div>
@ -278,12 +263,10 @@
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" list="weapon-items" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/>
<datalist id="weapon-items">
</datalist>
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/>
</div>
<div class="col d-flex justify-content-end">
<input class="equipment-input border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/>
<input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/>
</div>
</div>
</div>
@ -307,10 +290,10 @@
<div class="col g-0 rounded">
<div class="row row-cols-1 h-100 align-items-center">
<div class="col d-flex justify-content-end">
<input class="border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/>
<input class="border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/>
</div>
<div class="col d-flex justify-content-end">
<input class="border-dark text-light dark-7 rounded scaled-font form-control form-control-sm" type="text" placeholder="Load from local" tabindex="2"/>
<input class="border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" placeholder="Load from local" tabindex="2"/>
</div>
</div>
</div>
@ -410,20 +393,20 @@
<div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font">
<div class="col rounded-top">
<div class="row">
<div id="tab-basic-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('minimal-stats')">
Basic
</div>
<div id="tab-offense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('minimal-offensive-stats')">
Offense
</div>
<div id="tab-defense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('minimal-defensive-stats')">
Defense
</div>
<div id="tab-basic-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4" onclick="show_tab('all-stats')">
Overall
</div>
</div>
</div>
<div style="display: none;" id="minimal-offensive-stats" class="col text-nowrap"></div>
<div style="display: none;" id="minimal-defensive-stats" class="col text-nowrap"></div>
<div id="minimal-stats" class="col text-nowrap"></div>
<div id="all-stats" class="col text-nowrap"></div>
</div>
</div>
<div class="col-xl-3">
@ -1159,6 +1142,7 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<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="sq2icons.js"></script>

92
sq2bs.js
View file

@ -1,11 +1,14 @@
let equipment_keys = ['weapon', 'helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace'];
let weapon_keys = ['dagger', 'wand', 'bow', 'relik', 'spear']
let skp_keys = ['str', 'dex', 'int', 'def', 'agi'];
document.addEventListener('DOMContentLoaded', function() {
for (const i in equipment_keys) {
document.querySelector("#"+equipment_keys[i]+"-choice").setAttribute("oninput", "update_fields('"+equipment_keys[i]+"'); calcBuildSchedule()");
document.querySelector("#"+equipment_keys[i]+"-powder").setAttribute("oninput", "calcBuildSchedule()");
}
document.querySelector("#level-choice").setAttribute("oninput", "calcBuildSchedule()")
let skp_fields = document.getElementsByClassName("skp-update");
@ -26,7 +29,7 @@ function calcBuildSchedule(){
calcBuildTask = setTimeout(function(){
calcBuildTask = null;
calculateBuild();
}, 500);
}, 1000);
}
function updateStatSchedule(){
@ -52,16 +55,26 @@ function doSearchSchedule(){
// equipment field dynamic styling
function update_fields(type, alt="") {
let item = itemMap.get(document.querySelector("#"+type+"-choice").value);
if (item) {
if (item && ((item.type == type.replace(/[0-9]/g, '')) || (item.category == type))) {
// powder styling
document.querySelector("#"+type+"-powder").setAttribute("placeholder", item["slots"]+" slots"+alt);
document.querySelector("#"+type+"-choice").classList.remove("text-light", "is-invalid");
if (item['slots'] == 0) {
document.querySelector("#"+type+"-powder").disabled = true;
} else {
document.querySelector("#"+type+"-powder").disabled = false;
}
// input box styling
document.querySelector("#"+type+"-choice").classList.remove("text-light", "is-invalid", 'Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set');
document.querySelector("#"+type+"-choice").classList.add(item.tier);
if (type == 'weapon') {
document.querySelector("#"+type+"-img").setAttribute('src', 'media/items/new/generic-'+item.type+'.png');
}
} else if (document.querySelector("#"+type+"-choice").value == '') {
document.querySelector("#"+type+"-choice").classList.remove("is-invalid");
document.querySelector("#"+type+"-choice").classList.remove("is-invalid", 'Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set');
document.querySelector("#"+type+"-powder").setAttribute("placeholder", '0 slots');
}
else {
document.querySelector("#"+type+"-choice").classList.remove('Normal', 'Unique', 'Rare', 'Legendary', 'Fabled', 'Mythic', 'Set');
@ -75,8 +88,13 @@ function init_field_styles() {
}
}
function get_item_color(item) {
item = itemMap.get(item);
if (item) {return item.tier} else {return ''}
}
// tabular stats
let tabs = ['minimal-stats', 'minimal-offensive-stats', 'minimal-defensive-stats'];
let tabs = ['all-stats', 'minimal-offensive-stats', 'minimal-defensive-stats'];
function show_tab(tab) {
for (const i in tabs) {
@ -84,3 +102,67 @@ function show_tab(tab) {
}
document.querySelector("#"+tab).style.display = "";
}
// autocomplete initialize
function init_autocomplete() {
let dropdowns = new Map()
for (const i in equipment_keys) {
// build dropdown
let item_arr = [];
if (equipment_keys[i] == 'weapon') {
for (const weaponType of weapon_keys) {
for (const weapon of itemLists.get(weaponType)) {
let item_obj = itemMap.get(weapon);
if (item_obj["restrict"] && item_obj["restrict"] === "DEPRECATED") {
continue;
}
item_arr.push(weapon);
}
}
} else {
for (const item of itemLists.get(equipment_keys[i].replace(/[0-9]/g, ''))) {
let item_obj = itemMap.get(item);
if (item_obj["restrict"] && item_obj["restrict"] === "DEPRECATED") {
continue;
}
item_arr.push(item)
}
}
// create dropdown
dropdowns.set(equipment_keys[i], new autoComplete({
data: {
src: item_arr
},
selector: "#"+ equipment_keys[i] +"-choice",
wrapper: false,
resultsList: {
tabSelect: true,
class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm",
element: (list, data) => {
// dynamic result loc
let position = document.getElementById(equipment_keys[i]+'-dropdown').getBoundingClientRect();
list.style.top = position.bottom + window.scrollY +"px";
list.style.left = position.x+"px";
list.style.width = position.width+"px";
},
},
resultItem: {
class: "scaled-font search-item",
selected: "dark-5",
element: (item, data) => {
item.classList.add(get_item_color(data.value));
},
},
events: {
input: {
selection: (event) => {
event.target.value = event.detail.selection.value;
update_fields(equipment_keys[i]);
calcBuildSchedule();
},
},
}
}));
}
}

4
sq2build.js
View file

@ -317,12 +317,12 @@ class Build{
}
this.powders[4] = this.powders[4].slice(0,this.weapon.get("slots"));
this.weapon.set("powders",this.powders[4].slice());
document.getElementsByClassName("powder-specials")[0].style.display = "grid";
// document.getElementsByClassName("powder-specials")[0].style.display = "grid";
} catch (Error) {
const weapon = itemMap.get("No Weapon");
this.powders[4] = this.powders[4].slice(0,weapon.slots);
this.weapon = expandItem(weapon, this.powders[4]);
document.getElementsByClassName("powder-specials")[0].style.display = "none";
// document.getElementsByClassName("powder-specials")[0].style.display = "none";
errors.push(new ItemNotFound(equipment[8], "weapon", true));
}
}

101
sq2builder.js
View file

@ -69,103 +69,11 @@ let powderInputs = [
"weapon-powder",
];
/*
* Function that takes an item list and populates its corresponding dropdown.
* Used for armors and bracelet/necklace.
*/
function populateItemList(type) {
let item_list = document.getElementById(type+"-items");
for (const item of itemLists.get(type)) {
let item_obj = itemMap.get(item);
if (item_obj["restrict"] && item_obj["restrict"] === "DEPRECATED") {
continue;
}
let el = document.createElement("option");
el.value = item;
item_list.appendChild(el);
}
}
/*
* Populate dropdowns, add listeners, etc.
*/
function init() {
console.log("builder.js init");
for (const armorType of armorTypes) {
populateItemList(armorType);
// Add change listener to update armor slots.
/*
document.getElementById(armorType+"-choice").addEventListener("change", (event) => {
let item_name = event.target.value;
let nSlots = undefined;
if (itemMap.has(item_name)) {
let item = itemMap.get(item_name);
nSlots = item["slots"];
//console.log(item);
}
else {
let crafted_custom_item = getCraftFromHash(item_name) !== undefined ? getCraftFromHash(item_name) : (getCustomFromHash(item_name) !== undefined ? getCustomFromHash(item_name) : undefined);
if (crafted_custom_item !== undefined) {
nSlots = crafted_custom_item.statMap.get("slots");
}
}
if (nSlots !== undefined) {
document.getElementById(armorType+"-slots").textContent = nSlots + " slots";
}
else {
document.getElementById(armorType+"-slots").textContent = "X slots";
}
});*/
}
let ring1_list = document.getElementById("ring1-items");
let ring2_list = document.getElementById("ring2-items");
for (const ring of itemLists.get("ring")) {
let item_obj = itemMap.get(ring);
if (item_obj["restrict"] && item_obj["restrict"] === "DEPRECATED") {
continue;
}
let el1 = document.createElement("option");
let el2 = document.createElement("option");
el1.value = ring;
el2.value = ring;
ring1_list.appendChild(el1);
ring2_list.appendChild(el2);
}
populateItemList("bracelet");
populateItemList("necklace");
let weapon_list = document.getElementById("weapon-items");
for (const weaponType of weaponTypes) {
for (const weapon of itemLists.get(weaponType)) {
let item_obj = itemMap.get(weapon);
if (item_obj["restrict"] && item_obj["restrict"] === "DEPRECATED") {
continue;
}
let el = document.createElement("option");
el.value = weapon;
weapon_list.appendChild(el);
}
}
// Add change listener to update weapon slots.
/*
document.getElementById("weapon-choice").addEventListener("change", (event) => {
let item_name = event.target.value;
let item = itemMap.has(item_name) ? itemMap.get(item_name) : (getCraftFromHash(item_name) ? getCraftFromHash(item_name) : (getCustomFromHash(item_name) ? getCustomFromHash(item_name) : undefined));
if (item !== undefined && event.target.value !== "") {
document.getElementById("weapon-slots").textContent = (item["slots"] ? item["slots"] : (item.statMap !== undefined ? ( item.statMap.has("slots") ? item.statMap.get("slots") : 0): 0) )+ " slots";
} else {
document.getElementById("weapon-slots").textContent = "X slots";
}
});*/
decodeBuild(url_tag);
init_field_styles();
init_autocomplete();
decodeBuild(url_tag);
}
function getItemNameFromID(id) {
@ -833,10 +741,11 @@ function calculateBuildStats() {
for (let i in player_build.items) {
// displaysq2ExpandedItem(player_build.items[i], buildFields[i], true);
}
console.log(player_build)
console.log("build")
displaysq2ArmorStats(player_build);
displaysq2BuildStats("all-stats", player_build, build_all_display_commands);
displaysq2BuildStats("minimal-stats", player_build, build_basic_display_commands);
// displaysq2BuildStats("minimal-stats", player_build, build_basic_display_commands);
displaysq2BuildStats("minimal-offensive-stats",player_build, build_offensive_display_commands);
displaySetBonuses("set-info",player_build);
displayNextCosts("int-info",player_build);

2
sq2display_constants.js
View file

@ -2,7 +2,6 @@
* Display commands
*/
let build_all_display_commands = [
"#table",
"#defense-stats",
"str", "dex", "int", "def", "agi",
"mr", "ms",
@ -29,7 +28,6 @@ let build_all_display_commands = [
];
let build_offensive_display_commands = [
'#table',
"str", "dex", "int", "def", "agi",
"mr", "ms",
"sdRaw", "sdPct",