Working armor special sliders (don't reset properly i think)
This commit is contained in:
hppeng
parent
e4466d8095
commit
9227dd0f56
4 changed files with 94 additions and 54 deletions
|
|
@ -944,27 +944,27 @@
|
|||
<div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
|
||||
<div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
|
||||
<div class="col-auto p-1">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="vanish-boost" onclick="updateBoosts('vanish-boost')">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="vanish-boost" onclick="update_boosts('vanish-boost')">
|
||||
Vanish (+80%)
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="updateBoosts('warscream-boost')">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="update_boosts('warscream-boost')">
|
||||
War Scream (+10%)
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="yourtotem-boost" onclick="updateBoosts('yourtotem-boost')">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="yourtotem-boost" onclick="update_boosts('yourtotem-boost')">
|
||||
Your Totem (+35%)
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="allytotem-boost" onclick="updateBoosts('allytotem-boost')">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="allytotem-boost" onclick="update_boosts('allytotem-boost')">
|
||||
Ally Totem (+15%)
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto p-1">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="bash-boost" onclick="updateBoosts('bash-boost')">
|
||||
<button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="bash-boost" onclick="update_boosts('bash-boost')">
|
||||
Bash (+50%)
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -1031,7 +1031,7 @@
|
|||
Rage (Passive)
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type = "range" class = "e_slider" id = "str_boost_armor" name = "str-boost-armor" autocomplete = "off" min = '0' max = '400' value = '0' step = '1' onchange = "updateArmorPowderSpecials('str_boost_armor')">
|
||||
<input type = "range" class = "e_slider" id = "str_boost_armor" name = "str-boost-armor" autocomplete = "off" min = '0' max = '400' value = '0' step = '1' onchange = "update_armor_powder_specials('str_boost_armor')">
|
||||
<input type="text" id="str_boost_armor_prev" autocomplete = "off" value="0" style = "display:none;">
|
||||
<label id = "str_boost_armor_label" for="str-boost-armor">% Earth Dmg Boost: 0</label>
|
||||
</div>
|
||||
|
|
@ -1075,7 +1075,7 @@
|
|||
Kill Streak (Passive)
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type = "range" class = "t_slider" id = "dex_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('dex_boost_armor')">
|
||||
<input type = "range" class = "t_slider" id = "dex_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "update_armor_powder_specials('dex_boost_armor')">
|
||||
<input type="text" id="dex_boost_armor_prev" autocomplete = "off" value="0" style = "display:none;">
|
||||
<label id = "dex_boost_armor_label" for="dex-boost-armor">% Thunder Dmg Boost: 0</label>
|
||||
</div>
|
||||
|
|
@ -1119,7 +1119,7 @@
|
|||
Concentration (Passive)
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type = "range" class = "w_slider" id = "int_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('int_boost_armor')">
|
||||
<input type = "range" class = "w_slider" id = "int_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "update_armor_powder_specials('int_boost_armor')">
|
||||
<input type="text" id="int_boost_armor_prev" autocomplete = "off" value="0" style = "display:none;">
|
||||
<label id = "int_boost_armor_label" for="dex-boost-armor">% Water Dmg Boost: 0</label>
|
||||
</div>
|
||||
|
|
@ -1163,7 +1163,7 @@
|
|||
Endurance (Passive)
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type = "range" class = "f_slider" id = "def_boost_armor" name = "def-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('def_boost_armor')">
|
||||
<input type = "range" class = "f_slider" id = "def_boost_armor" name = "def-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "update_armor_powder_specials('def_boost_armor')">
|
||||
<input type="text" id="def_boost_armor_prev" autocomplete = "off" value="0" style = "display:none;">
|
||||
<label id = "def_boost_armor_label" for="def-boost-armor">% Fire Dmg Boost: 0</label>
|
||||
</div>
|
||||
|
|
@ -1207,7 +1207,7 @@
|
|||
Dodge (Passive)
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type = "range" class = "a_slider" id = "agi_boost_armor" name = "agi-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('agi_boost_armor')">
|
||||
<input type = "range" class = "a_slider" id = "agi_boost_armor" name = "agi-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "update_armor_powder_specials('agi_boost_armor')">
|
||||
<input type="text" id="agi_boost_armor_prev" autocomplete = "off" value="0" style = "display:none;">
|
||||
<label id = "agi_boost_armor_label" for="agi-boost-armor">% Air Dmg Boost: 0</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,42 @@
|
|||
let boosts_node;
|
||||
/* Updates all spell boosts
|
||||
*/
|
||||
function updateBoosts(buttonId) {
|
||||
let elem = document.getElementById(buttonId);
|
||||
if (elem.classList.contains("toggleOn")) {
|
||||
elem.classList.remove("toggleOn");
|
||||
} else {
|
||||
elem.classList.add("toggleOn");
|
||||
let armor_powder_node = new (class extends ComputeNode {
|
||||
constructor() { super('builder-armor-powder-input'); }
|
||||
|
||||
compute_func(input_map) {
|
||||
let damage_boost = 0;
|
||||
let def_boost = 0;
|
||||
let statMap = new Map();
|
||||
for (const [e, elem] of zip2(skp_elements, skp_order)) {
|
||||
let val = parseInt(document.getElementById(elem+"_boost_armor").value);
|
||||
statMap.set(e+'DamPct', val);
|
||||
}
|
||||
boosts_node.mark_dirty();
|
||||
boosts_node.update();
|
||||
return statMap;
|
||||
}
|
||||
})().update();
|
||||
|
||||
/* Updates PASSIVE powder special boosts (armors)
|
||||
*/
|
||||
function update_armor_powder_specials(elem_id) {
|
||||
//we only update the powder special + external stats if the player has a build
|
||||
let wynn_elem = elem_id.split("_")[0]; //str, dex, int, def, agi
|
||||
|
||||
//update the label associated w/ the slider
|
||||
let elem = document.getElementById(elem_id);
|
||||
let label = document.getElementById(elem_id + "_label");
|
||||
|
||||
let value = elem.value;
|
||||
|
||||
label.textContent = label.textContent.split(":")[0] + ": " + value
|
||||
|
||||
//update the slider's graphics
|
||||
let bg_color = elem_colors[skp_order.indexOf(wynn_elem)];
|
||||
let pct = Math.round(100 * value / powderSpecialStats[skp_order.indexOf(wynn_elem)].cap);
|
||||
elem.style.background = `linear-gradient(to right, ${bg_color}, ${bg_color} ${pct}%, #AAAAAA ${pct}%, #AAAAAA 100%)`;
|
||||
|
||||
armor_powder_node.mark_dirty().update();
|
||||
}
|
||||
|
||||
class BoostsInputNode extends ComputeNode {
|
||||
|
||||
let boosts_node = new (class extends ComputeNode {
|
||||
constructor() { super('builder-boost-input'); }
|
||||
|
||||
compute_func(input_map) {
|
||||
|
|
@ -28,14 +52,40 @@ class BoostsInputNode extends ComputeNode {
|
|||
}
|
||||
return [damage_boost, def_boost];
|
||||
}
|
||||
})().update();
|
||||
|
||||
/* Updates all spell boosts
|
||||
*/
|
||||
function update_boosts(buttonId) {
|
||||
let elem = document.getElementById(buttonId);
|
||||
if (elem.classList.contains("toggleOn")) {
|
||||
elem.classList.remove("toggleOn");
|
||||
} else {
|
||||
elem.classList.add("toggleOn");
|
||||
}
|
||||
boosts_node.mark_dirty().update();
|
||||
}
|
||||
|
||||
let powder_special_input;
|
||||
let specialNames = ["Quake", "Chain Lightning", "Curse", "Courage", "Wind Prison"];
|
||||
let powder_special_input = new (class extends ComputeNode {
|
||||
constructor() { super('builder-powder-special-input'); }
|
||||
|
||||
compute_func(input_map) {
|
||||
let powder_specials = []; // [ [special, power], [special, power]]
|
||||
for (const sName of specialNames) {
|
||||
for (let i = 1;i < 6; i++) {
|
||||
if (document.getElementById(sName.replace(" ","_") + "-" + i).classList.contains("toggleOn")) {
|
||||
let powder_special = powderSpecialStats[specialNames.indexOf(sName.replace("_"," "))];
|
||||
powder_specials.push([powder_special, i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return powder_specials;
|
||||
}
|
||||
})();
|
||||
|
||||
function updatePowderSpecials(buttonId) {
|
||||
//console.log(player_build.statMap);
|
||||
|
||||
let name = (buttonId).split("-")[0];
|
||||
let power = (buttonId).split("-")[1]; // [1, 5]
|
||||
|
||||
|
|
@ -53,26 +103,7 @@ function updatePowderSpecials(buttonId) {
|
|||
elem.classList.add("toggleOn");
|
||||
}
|
||||
|
||||
powder_special_input.mark_dirty();
|
||||
powder_special_input.update();
|
||||
}
|
||||
|
||||
class PowderSpecialInputNode extends ComputeNode {
|
||||
constructor() { super('builder-powder-special-input'); }
|
||||
|
||||
compute_func(input_map) {
|
||||
let powder_specials = []; // [ [special, power], [special, power]]
|
||||
for (const sName of specialNames) {
|
||||
for (let i = 1;i < 6; i++) {
|
||||
if (document.getElementById(sName.replace(" ","_") + "-" + i).classList.contains("toggleOn")) {
|
||||
let powder_special = powderSpecialStats[specialNames.indexOf(sName.replace("_"," "))];
|
||||
powder_specials.push([powder_special, i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return powder_specials;
|
||||
}
|
||||
powder_special_input.mark_dirty().update();
|
||||
}
|
||||
|
||||
class PowderSpecialCalcNode extends ComputeNode {
|
||||
|
|
@ -988,17 +1019,15 @@ function builder_graph_init() {
|
|||
level_input.update();
|
||||
|
||||
// Powder specials.
|
||||
powder_special_input = new PowderSpecialInputNode();
|
||||
let powder_special_calc = new PowderSpecialCalcNode().link_to(powder_special_input, 'powder-specials');
|
||||
new PowderSpecialDisplayNode().link_to(powder_special_input, 'powder-specials')
|
||||
.link_to(stat_agg_node, 'stats').link_to(item_nodes[8], 'weapon');
|
||||
stat_agg_node.link_to(powder_special_calc, 'powder-boost');
|
||||
stat_agg_node.link_to(armor_powder_node, 'armor-powder');
|
||||
powder_special_input.update();
|
||||
|
||||
// Potion boost.
|
||||
boosts_node = new BoostsInputNode();
|
||||
stat_agg_node.link_to(boosts_node, 'potion-boost');
|
||||
boosts_node.update();
|
||||
|
||||
// Also do something similar for skill points
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ class ComputeNode {
|
|||
for (const child of this.children) {
|
||||
child.mark_input_clean(this.name, this.value);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -69,6 +70,7 @@ class ComputeNode {
|
|||
child.mark_dirty();
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -212,20 +212,21 @@ let posModSuffixes = {
|
|||
let build_all_display_commands = [
|
||||
"#defense-stats",
|
||||
"str", "dex", "int", "def", "agi",
|
||||
"!spacer",
|
||||
"mr", "ms",
|
||||
"hprRaw", "hprPct",
|
||||
"ls",
|
||||
"sdRaw", "sdPct",
|
||||
"mdRaw", "mdPct",
|
||||
"ref", "thorns",
|
||||
"ls",
|
||||
"poison",
|
||||
"expd",
|
||||
"spd",
|
||||
"atkTier",
|
||||
"!elemental",
|
||||
"fDamPct", "wDamPct", "aDamPct", "tDamPct", "eDamPct",
|
||||
"!elemental",
|
||||
"spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4",
|
||||
"atkTier",
|
||||
"poison",
|
||||
"ref", "thorns",
|
||||
"expd",
|
||||
"spd",
|
||||
"rainbowRaw",
|
||||
"sprint", "sprintReg",
|
||||
"jh",
|
||||
|
|
@ -325,3 +326,11 @@ let sq2_ing_display_order = [
|
|||
"lvl",
|
||||
"skills",
|
||||
]
|
||||
|
||||
let elem_colors = [
|
||||
"#00AA00",
|
||||
"#FFFF55",
|
||||
"#55FFFF",
|
||||
"#FF5555",
|
||||
"#FFFFFF"
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in a new issue