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

weapon display + stats tab changes

Browse source
This commit is contained in:
ferricles 2022-01-07 00:12:00 -08:00
parent 839620b8ba
commit de7013b099
6 changed files with 159 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
sq2bs.css
View file

@ -136,6 +136,7 @@
content: "\2724" ' '; content: "\2724" ' ';
} }
.Mana { .Mana {
color: #5ff; color: #5ff;
} }
@ -347,10 +348,11 @@ input.equipment-input {
cursor: pointer; cursor: pointer;
} }
.fake-button:hover { .fake-button:hover, .selected-btn{
background-color: hsl(0, 0%, 14%) !important; background-color: hsl(0, 0%, 14%) !important;
} }
/* material design dark mode */ /* material design dark mode */
.dark-1 { .dark-1 {
background-color: hsl(0, 0%, 5%) !important; background-color: hsl(0, 0%, 5%) !important;

62
sq2bs.html
View file

@ -40,10 +40,10 @@
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col text-nowrap scaled-font Health fw-bold gx-3" id="helmet-health"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="helmet-health">
09000 0
</div> </div>
<div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="helmet-lv"> <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="helmet-lv">
Lv. 123 0
</div> </div>
</div> </div>
</div> </div>
@ -67,10 +67,10 @@
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring1-health"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring1-health">
09000 0
</div> </div>
<div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring1-lv"> <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring1-lv">
Lv. 123 0
</div> </div>
</div> </div>
</div> </div>
@ -80,7 +80,7 @@
<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"/> <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>
<div class="col d-flex justify-content-end"> <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="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="no powders" tabindex="2"/> -->
</div> </div>
</div> </div>
</div> </div>
@ -94,10 +94,10 @@
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col text-nowrap scaled-font Health fw-bold gx-3" id="chestplate-health"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="chestplate-health">
09000 0
</div> </div>
<div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="chestplate-lv"> <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="chestplate-lv">
Lv. 123 0
</div> </div>
</div> </div>
</div> </div>
@ -121,10 +121,10 @@
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring2-health"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring2-health">
09000 0
</div> </div>
<div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring2-lv"> <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring2-lv">
Lv. 123 0
</div> </div>
</div> </div>
</div> </div>
@ -134,7 +134,7 @@
<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"/> <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>
<div class="col d-flex justify-content-end"> <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="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="no powders" tabindex="2"/> -->
</div> </div>
</div> </div>
</div> </div>
@ -148,10 +148,10 @@
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col text-nowrap scaled-font Health fw-bold gx-3" id="leggings-health"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="leggings-health">
09000 0
</div> </div>
<div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="leggings-lv"> <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="leggings-lv">
Lv. 123 0
</div> </div>
</div> </div>
</div> </div>
@ -161,7 +161,7 @@
<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"/> <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>
<div class="col d-flex justify-content-end"> <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="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="no powders" tabindex="1"/>
</div> </div>
</div> </div>
</div> </div>
@ -175,10 +175,10 @@
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col text-nowrap scaled-font Health fw-bold gx-3" id="bracelet-health"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="bracelet-health">
09000 0
</div> </div>
<div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="bracelet-lv"> <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="bracelet-lv">
Lv. 123 0
</div> </div>
</div> </div>
</div> </div>
@ -188,7 +188,7 @@
<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"/> <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>
<div class="col d-flex justify-content-end"> <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="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="no powders" tabindex="2"/> -->
</div> </div>
</div> </div>
</div> </div>
@ -202,10 +202,10 @@
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col text-nowrap scaled-font Health fw-bold gx-3" id="boots-health"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="boots-health">
09000 0
</div> </div>
<div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="boots-lv"> <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="boots-lv">
Lv. 123 0
</div> </div>
</div> </div>
</div> </div>
@ -229,10 +229,10 @@
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col text-nowrap scaled-font Health fw-bold gx-3" id="necklace-health"> <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="necklace-health">
09000 0
</div> </div>
<div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="necklace-lv"> <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="necklace-lv">
Lv. 123 0
</div> </div>
</div> </div>
</div> </div>
@ -242,7 +242,7 @@
<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"/> <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>
<div class="col d-flex justify-content-end"> <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="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="no powders" tabindex="2"/> -->
</div> </div>
</div> </div>
</div> </div>
@ -255,11 +255,11 @@
</div> </div>
<div class="col-3"> <div class="col-3">
<div class="row row-cols-1 h-100 align-items-center"> <div class="row row-cols-1 h-100 align-items-center">
<div class="col text-nowrap scaled-font fw-bold gx-3" id="weapon-dps"> <div class="col scaled-font fw-bold gx-3" id="weapon-dps">
base?? base dps: 0
</div> </div>
<div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="weapon-lv"> <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="weapon-lv">
?? 0
</div> </div>
</div> </div>
</div> </div>
@ -667,20 +667,20 @@
<div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font"> <div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font">
<div class="col rounded-top"> <div class="col rounded-top">
<div class="row"> <div class="row">
<div id="tab-offense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4 border border-2 border-dark-7" onclick="show_tab('minimal-offensive-stats')"> <div id="tab-offensive-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('offensive-stats')">
Offense Offense
</div> </div>
<div id="tab-defense-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4 border border-2 border-dark-7" onclick="show_tab('minimal-defensive-stats')"> <div id="tab-defensive-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('defensive-stats')">
Defense Defense
</div> </div>
<div id="tab-basic-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4 border border-2 border-dark-7" onclick="show_tab('all-stats')"> <div id="tab-overall-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('overall-stats')">
Overall Overall
</div> </div>
</div> </div>
</div> </div>
<div style="display: none;" id="minimal-offensive-stats" class="col text-nowrap"></div> <div style="display: none;" id="offensive-stats" class="col text-nowrap"></div>
<div style="display: none;" id="minimal-defensive-stats" class="col text-nowrap"></div> <div style="display: none;" id="defensive-stats" class="col text-nowrap"></div>
<div id="all-stats" class="col text-nowrap"></div> <div id="overall-stats" class="col text-nowrap"></div>
</div> </div>
</div> </div>
<div class="col-xl-3"> <div class="col-xl-3">
@ -737,7 +737,7 @@
</div> </div>
<div class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id = "build-order"> <div class="rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id = "build-order">
</div> </div>
<div class = "rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark p-3" id = "set-info">Set info</div> <div class = "rounded row row-cols-1 g-0 scaled-font float-tooltip border border-3 border-dark p-3" id = "set-info"></div>
</div> </div>
<div class="col dark-5 scaled-font"> <div class="col dark-5 scaled-font">
<footer class="text-center"> <footer class="text-center">

65
sq2bs.js
View file

@ -1,6 +1,9 @@
let equipment_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace', 'weapon'];
let weapon_keys = ['dagger', 'wand', 'bow', 'relik', 'spear']; let weapon_keys = ['dagger', 'wand', 'bow', 'relik', 'spear'];
let armor_keys = ['helmet', 'chestplate', 'leggings', 'boots'];
let skp_keys = ['str', 'dex', 'int', 'def', 'agi']; let skp_keys = ['str', 'dex', 'int', 'def', 'agi'];
let accessory_keys= ['ring1', 'ring2', 'bracelet', 'necklace'];
let powderable_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'weapon'];
let equipment_keys = ['helmet', 'chestplate', 'leggings', 'boots', 'ring1', 'ring2', 'bracelet', 'necklace', 'weapon'];
let spell_disp = ['spell0-info', 'spell1-info', 'spell2-info', 'spell3-info']; let spell_disp = ['spell0-info', 'spell1-info', 'spell2-info', 'spell3-info'];
let other_disp = ['build-order', 'set-info', 'int-info']; let other_disp = ['build-order', 'set-info', 'int-info'];
@ -9,8 +12,11 @@ document.addEventListener('DOMContentLoaded', function() {
for (const eq of equipment_keys) { for (const eq of equipment_keys) {
document.querySelector("#"+eq+"-choice").setAttribute("oninput", "update_field('"+ eq +"'); calcBuildSchedule();"); document.querySelector("#"+eq+"-choice").setAttribute("oninput", "update_field('"+ eq +"'); calcBuildSchedule();");
document.querySelector("#"+eq+"-powder").setAttribute("oninput", "calcBuildSchedule();"); document.querySelector("#"+eq+"-tooltip").setAttribute("onclick", "collapse_element('#"+ eq +"-tooltip'); toggle_plus_minus('" + eq + "-pm'); ");
document.querySelector("#"+eq+"-tooltip").setAttribute("onclick", "collapse_element('#"+ eq +"-tooltip')"); }
for (const eq of powderable_keys) {
document.querySelector("#"+eq+"-powder").setAttribute("oninput", "calcBuildSchedule(); updatePowders(" + eq + "-powder)");
} }
for (const i of spell_disp) { for (const i of spell_disp) {
@ -137,28 +143,34 @@ function update_field(field) {
document.querySelector("#"+field+"-choice").classList.add("text-light"); document.querySelector("#"+field+"-choice").classList.add("text-light");
if (item) { document.querySelector("#"+field+"-choice").classList.add("is-invalid"); } if (item) { document.querySelector("#"+field+"-choice").classList.add("is-invalid"); }
document.querySelector("#"+equipment_keys[i]+"-powder").disabled = true; /*if (!accessory_keys.contains(type.toLowerCase())) {
document.querySelector("#"+type+"-powder").disabled = true;
}*/
return false; return false;
} }
if ((type != field.replace(/[0-9]/g, '')) && (category != field.replace(/[0-9]/g, ''))) { if ((type != field.replace(/[0-9]/g, '')) && (category != field.replace(/[0-9]/g, ''))) {
document.querySelector("#"+field+"-choice").classList.add("text-light"); document.querySelector("#"+field+"-choice").classList.add("text-light");
if (item) { document.querySelector("#"+field+"-choice").classList.add("is-invalid"); } if (item) { document.querySelector("#"+field+"-choice").classList.add("is-invalid"); }
document.querySelector("#"+equipment_keys[i]+"-powder").disabled = true; //document.querySelector("#"+equipment_keys[i]+"-powder").disabled = true;
return false; return false;
} }
// set item color // set item color
document.querySelector("#"+field+"-choice").classList.add(tier); document.querySelector("#"+field+"-choice").classList.add(tier);
// set powder slots
document.querySelector("#"+field+"-powder").setAttribute("placeholder", powder_slots+" slots");
if (powder_slots == 0) { if (powderable_keys.includes(field)) {
document.querySelector("#"+field+"-powder").disabled = true; // set powder slots
} else { document.querySelector("#"+field+"-powder").setAttribute("placeholder", powder_slots+" slots");
document.querySelector("#"+field+"-powder").disabled = false;
if (powder_slots == 0) {
document.querySelector("#"+field+"-powder").disabled = true;
} else {
document.querySelector("#"+field+"-powder").disabled = false;
}
} }
// set weapon img // set weapon img
@ -170,14 +182,18 @@ function update_field(field) {
} }
/* tabulars | man i hate this code but too lazy to fix /shrug */ /* tabulars | man i hate this code but too lazy to fix /shrug */
let tabs = ['all-stats', 'minimal-offensive-stats', 'minimal-defensive-stats']; let tabs = ['overall-stats', 'offensive-stats', 'defensive-stats'];
function show_tab(tab) { function show_tab(tab) {
console.log(itemFilters) //console.log(itemFilters)
//hide all tabs, then show the tab of the div clicked and highlight the correct button
for (const i in tabs) { for (const i in tabs) {
document.querySelector("#"+tabs[i]).style.display = "none"; document.querySelector("#" + tabs[i]).style.display = "none";
document.getElementById("tab-" + tabs[i].split("-")[0] + "-btn").classList.remove("selected-btn");
} }
document.querySelector("#"+tab).style.display = ""; document.querySelector("#" + tab).style.display = "";
document.getElementById("tab-" + tab.split("-")[0] + "-btn").classList.add("selected-btn");
} }
function toggle_spell_tab(tab) { function toggle_spell_tab(tab) {
@ -206,19 +222,20 @@ function toggle_tab(tab) {
function collapse_element(elmnt) { function collapse_element(elmnt) {
elem_list = document.querySelector(elmnt).children; elem_list = document.querySelector(elmnt).children;
if (elem_list) {
for (elem of elem_list) { for (elem of elem_list) {
if (elem.classList.contains("no-collapse")) { continue; } if (elem.classList.contains("no-collapse")) { continue; }
if (elem.style.display == "none") { if (elem.style.display == "none") {
elem.style.display = ""; elem.style.display = "";
} else { } else {
elem.style.display = "none"; elem.style.display = "none";
} }
}
} }
// macy quirk // macy quirk
window.dispatchEvent(new Event('resize')); window.dispatchEvent(new Event('resize'));
// weird bug where display: none overrides?? // weird bug where display: none overrides??
document.querySelector(elmnt).style.display = ""; document.querySelector(elmnt).style.removeProperty('display');
} }
// search misc // search misc

7
sq2builder.js
View file

@ -748,14 +748,15 @@ function calculateBuildStats() {
} }
displaysq2ArmorStats(player_build); displaysq2ArmorStats(player_build);
displaysq2BuildStats("all-stats", player_build, build_all_display_commands); displaysq2BuildStats('overall-stats', player_build, build_all_display_commands);
displaysq2BuildStats("minimal-offensive-stats",player_build, build_offensive_display_commands); displaysq2BuildStats("offensive-stats",player_build, build_offensive_display_commands);
displaysq2SetBonuses("set-info",player_build); displaysq2SetBonuses("set-info",player_build);
displaysq2WeaponStats(player_build);
let meleeStats = player_build.getMeleeStats(); let meleeStats = player_build.getMeleeStats();
displaysq2MeleeDamage(document.getElementById("build-melee-stats"), document.getElementById("build-melee-statsAvg"), meleeStats); displaysq2MeleeDamage(document.getElementById("build-melee-stats"), document.getElementById("build-melee-statsAvg"), meleeStats);
displaysq2DefenseStats(document.getElementById("minimal-defensive-stats"),player_build); displaysq2DefenseStats(document.getElementById("defensive-stats"),player_build);
displaysq2PoisonDamage(document.getElementById("build-poison-stats"),player_build); displaysq2PoisonDamage(document.getElementById("build-poison-stats"),player_build);

85
sq2display.js
View file

@ -5,14 +5,17 @@ function displaysq2BuildStats(parent_id,build,command_group){
// normals just display a thing. // normals just display a thing.
let display_commands = command_group; let display_commands = command_group;
console.log(display_commands); //console.log(display_commands);
// Clear the parent div.
setHTML(parent_id, "");
let parent_div = document.getElementById(parent_id); let parent_div = document.getElementById(parent_id);
// Clear the parent div.
if (parent_div != null) {
setHTML(parent_id, "");
}
let stats = build.statMap; let stats = build.statMap;
console.log(build.statMap); //console.log(build.statMap);
let active_elem; let active_elem;
let elemental_format = false; let elemental_format = false;
@ -207,7 +210,7 @@ function displaysq2ExpandedItem(item, parent_id){
p_elem.textContent = "Set: " + item.get(id).toString(); p_elem.textContent = "Set: " + item.get(id).toString();
parent_div.appendChild(p_elem); parent_div.appendChild(p_elem);
} else if (id === "majorIds") { } else if (id === "majorIds") {
console.log(item.get(id)); //console.log(item.get(id));
for (let majorID of item.get(id)) { for (let majorID of item.get(id)) {
let p_elem = document.createElement("div"); let p_elem = document.createElement("div");
p_elem.classList.add("col"); p_elem.classList.add("col");
@ -239,10 +242,20 @@ function displaysq2ExpandedItem(item, parent_id){
p_elem.textContent = "Combat Level Min: " + item.get("lvlLow") + "-" + item.get(id); p_elem.textContent = "Combat Level Min: " + item.get("lvlLow") + "-" + item.get(id);
parent_div.appendChild(p_elem); parent_div.appendChild(p_elem);
} else if (id === "displayName") { } else if (id === "displayName") {
let row = document.createElement("div");
let p_elem = document.createElement("div"); let p_elem = document.createElement("div");
p_elem.classList.add("col", "text-center", "no-collapse"); let plusminus = document.createElement("div");
row.classList.add("row", "no-collapse");
p_elem.classList.add("col", "text-center");
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;
//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";
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");
p_elem.textContent = item.get("displayName"); p_elem.textContent = item.get("displayName");
@ -254,17 +267,25 @@ function displaysq2ExpandedItem(item, parent_id){
p_elem.textContent = item.get("displayName"); p_elem.textContent = item.get("displayName");
} }
parent_div.appendChild(p_elem);
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")) {
img.src = "./media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png"; img.src = "./media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png";
img.alt = item.get("type"); img.alt = item.get("type");
img.style = " z=index: 1; position: relative;"; img.style = " z=index: 1; position: relative;";
let container = document.createElement("div");
let bckgrd = document.createElement("div"); let bckgrd = document.createElement("div");
bckgrd.classList.add("col", "px-0", "d-flex", "align-items-center", "justify-content-center", "no-collapse"); bckgrd.classList.add("col", "px-0", "d-flex", "align-items-center", "justify-content-center");// , "no-collapse");
bckgrd.style = "border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "hsl(0, 0%, 16%) 80%); margin-left: auto; margin-right: auto;" bckgrd.style = "border-radius: 50%;background-image: radial-gradient(closest-side, " + colorMap.get(item.get("tier")) + " 20%," + "hsl(0, 0%, 16%) 80%); margin-left: auto; margin-right: auto;"
bckgrd.classList.add("scaled-bckgrd"); bckgrd.classList.add("scaled-bckgrd");
parent_div.appendChild(bckgrd); parent_div.appendChild(container);
container.appendChild(bckgrd);
bckgrd.appendChild(img); bckgrd.appendChild(img);
} }
} else { } else {
@ -499,7 +520,7 @@ function displaysq2RolledID(item, id, elemental_format) {
return row; return row;
} }
function displaysq2WeaponBase(build) { function displaysq2WeaponStats(build) {
// let base_damage = build.get('damageRaw'); // let base_damage = build.get('damageRaw');
let damage_keys = [ "nDam", "eDam", "tDam", "wDam", "fDam", "aDam" ]; let damage_keys = [ "nDam", "eDam", "tDam", "wDam", "fDam", "aDam" ];
@ -522,8 +543,25 @@ function displaysq2WeaponBase(build) {
powdered_map.set('aDam', powdered_base[5][0]+'-'+powdered_base[5][1]); powdered_map.set('aDam', powdered_base[5][0]+'-'+powdered_base[5][1]);
// display // display
for (const i in damage_keys) {
//I think this is res's code? in any case it doesn't work - ferri
/* for (const i in damage_keys) {
document.getElementById(damage_keys[i]+"-base").textContent = powdered_map.get(damage_keys[i]); document.getElementById(damage_keys[i]+"-base").textContent = powdered_map.get(damage_keys[i]);
} */
let tot = 0;
//sum up elemental damages to get sum of base dps's
for (let i = 0; i < 6; i++) {
tot += powdered_base[i][0] + powdered_base[i][1];
}
tot /= 2;
let dps = Math.max(0, Math.round(tot * baseDamageMultiplier[attackSpeeds.indexOf(item.get("atkSpd"))] )); //atkspeeds
document.getElementById("weapon-dps").textContent = "base dps: " + dps;
document.getElementById("weapon-lv").textContent = item.get("lvl");
if (item.get("type")) {
document.getElementById("weapon-img").src = "./media/items/" + (newIcons ? "new/":"old/") + "generic-" + item.get("type") + ".png";
} }
} }
@ -1433,11 +1471,13 @@ function displaysq2SetBonuses(parent_id,build) {
set_summary_elem.textContent = "Set Bonuses"; set_summary_elem.textContent = "Set Bonuses";
parent_div.append(set_summary_elem); parent_div.append(set_summary_elem);
/*
if (build.activeSetCounts.size) { if (build.activeSetCounts.size) {
parent_div.parentElement.style.display = "block"; parent_div.parentElement.style.display = "block";
} else { } else {
parent_div.parentElement.style.display = "none"; parent_div.parentElement.style.display = "none";
} }
*/
for (const [setName, count] of build.activeSetCounts) { for (const [setName, count] of build.activeSetCounts) {
const active_set = sets[setName]; const active_set = sets[setName];
@ -1469,3 +1509,22 @@ function displaysq2SetBonuses(parent_id,build) {
console.log(mock_item); console.log(mock_item);
} }
} }
function toggle_plus_minus(elem_id) {
let elem = document.getElementById(elem_id);
if (elem.classList.contains("plus_minus")) {
if (elem.textContent == "\u2795") {
elem.textContent = "\u2796";
} else if (elem.textContent == "\u2796"){
elem.textContent = "\u2795";
} else {
// ????
}
}
}
// updates the powders within this element. Attempts to do so using textContent and innerHTML.
function updatePowders(elem_id) {
elem = document.getElementById(elem_id);
}

8
sq2display_constants.js
View file

@ -1,3 +1,11 @@
let powder_chars = [
'\u2724',
'\u2726',
'\u2749',
'\u2739',
'\u274b'
]
/* /*
* Display commands * Display commands
*/ */