relocate toggles and sliders to active boosts section
This commit is contained in:
parent
bf28e219f4
commit
ac1d741919
3 changed files with 17 additions and 9 deletions
|
@ -947,8 +947,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col mb-1">
|
<div class="col mb-1 text-center scaled-font dark-5 rounded dark-shadow">
|
||||||
<div class="row row-cols-1 text-center scaled-font dark-5 rounded dark-shadow justify-content-center">
|
<div class="row row-cols-1 justify-content-center">
|
||||||
<div class="col fw-bold dark-4 rounded-top">
|
<div class="col fw-bold dark-4 rounded-top">
|
||||||
Active boosts
|
Active boosts
|
||||||
</div>
|
</div>
|
||||||
|
@ -972,6 +972,12 @@
|
||||||
Fortitude (+60%)
|
Fortitude (+60%)
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col" id="boost-toggles">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row row-cols-1 justify-content-center" id="boost-sliders">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col mb-1">
|
<div class="col mb-1">
|
||||||
|
|
13
js/atree.js
13
js/atree.js
|
@ -644,6 +644,9 @@ const atree_make_interactives = new (class extends ComputeNode {
|
||||||
const atree_order = input_map.get('atree-order');
|
const atree_order = input_map.get('atree-order');
|
||||||
const atree_html = input_map.get('atree-elements');
|
const atree_html = input_map.get('atree-elements');
|
||||||
|
|
||||||
|
document.getElementById("boost-sliders").innerHTML = "";
|
||||||
|
document.getElementById("boost-toggles").innerHTML = "";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* slider_info
|
* slider_info
|
||||||
* label_name: str,
|
* label_name: str,
|
||||||
|
@ -658,7 +661,7 @@ const atree_make_interactives = new (class extends ComputeNode {
|
||||||
const slider_map = new Map();
|
const slider_map = new Map();
|
||||||
const button_map = new Map();
|
const button_map = new Map();
|
||||||
|
|
||||||
// first, pull out all the sliders.
|
// first, pull out all the sliders and toggles.
|
||||||
for (const [abil_id, ability] of merged_abils.entries()) {
|
for (const [abil_id, ability] of merged_abils.entries()) {
|
||||||
for (const effect of ability.effects) {
|
for (const effect of ability.effects) {
|
||||||
if (effect['type'] === "stat_scaling" && effect['slider'] === true) {
|
if (effect['type'] === "stat_scaling" && effect['slider'] === true) {
|
||||||
|
@ -688,15 +691,15 @@ const atree_make_interactives = new (class extends ComputeNode {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// next, render the sliders onto the abilities.
|
// next, render the sliders and toggles onto the abilities.
|
||||||
for (const [slider_name, slider_info] of slider_map.entries()) {
|
for (const [slider_name, slider_info] of slider_map.entries()) {
|
||||||
let slider_container = gen_slider_labeled(slider_info);
|
let slider_container = gen_slider_labeled(slider_info);
|
||||||
atree_html.get(slider_info.abil.id).appendChild(slider_container);
|
document.getElementById("boost-sliders").appendChild(slider_container);
|
||||||
slider_info.slider = document.getElementById(slider_info.id);
|
slider_info.slider = document.getElementById(slider_info.id);
|
||||||
slider_info.slider.addEventListener("change", (e) => atree_stats.mark_dirty().update());
|
slider_info.slider.addEventListener("change", (e) => atree_stats.mark_dirty().update());
|
||||||
}
|
}
|
||||||
for (const [button_name, button_info] of button_map.entries()) {
|
for (const [button_name, button_info] of button_map.entries()) {
|
||||||
let button = make_elem('button', ["button-boost", "border-0", "text-white", "dark-8u", "dark-shadow-sm"], {
|
let button = make_elem('button', ["button-boost", "border-0", "text-white", "dark-8u", "dark-shadow-sm", "m-1"], {
|
||||||
id: button_info.abil.id,
|
id: button_info.abil.id,
|
||||||
textContent: button_name
|
textContent: button_name
|
||||||
});
|
});
|
||||||
|
@ -709,7 +712,7 @@ const atree_make_interactives = new (class extends ComputeNode {
|
||||||
atree_stats.mark_dirty().update()
|
atree_stats.mark_dirty().update()
|
||||||
});
|
});
|
||||||
button_info.button = button;
|
button_info.button = button;
|
||||||
atree_html.get(button_info.abil.id).appendChild(button);
|
document.getElementById("boost-toggles").appendChild(button);
|
||||||
}
|
}
|
||||||
return [slider_map, button_map];
|
return [slider_map, button_map];
|
||||||
}
|
}
|
||||||
|
|
|
@ -788,12 +788,11 @@ function deepcopy(obj, refs=undefined) {
|
||||||
*/
|
*/
|
||||||
function gen_slider_labeled({label_name, label_classlist = [], min = 0, max = 100, step = 1, default_val = min, id = undefined, color = "#FFFFFF", classlist = []}) {
|
function gen_slider_labeled({label_name, label_classlist = [], min = 0, max = 100, step = 1, default_val = min, id = undefined, color = "#FFFFFF", classlist = []}) {
|
||||||
let slider_container = document.createElement("div");
|
let slider_container = document.createElement("div");
|
||||||
|
slider_container.classList.add("col");
|
||||||
|
|
||||||
let buf_col = document.createElement("div");
|
let buf_col = document.createElement("div");
|
||||||
buf_col.classList.add("col");
|
|
||||||
|
|
||||||
let label = document.createElement("div");
|
let label = document.createElement("div");
|
||||||
label.classList.add("col");
|
|
||||||
label.classList.add(...label_classlist);
|
label.classList.add(...label_classlist);
|
||||||
label.textContent = label_name + ": " + default_val;
|
label.textContent = label_name + ": " + default_val;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue