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

Merge pull request #165 from hppeng-wynn/atree-ui-tweaks

Browse source 
relocate ability toggles and sliders to active boosts section
This commit is contained in:
hppeng-wynn 2022-07-22 20:26:34 -07:00 committed by GitHub
commit 7d7ecc5085
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
builder/index_full.html
View file

@ -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">

15
js/atree.js
View file

@ -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) {
@ -671,7 +674,7 @@ const atree_make_interactives = new (class extends ComputeNode {
} }
else if (slider_behavior === 'merge') { else if (slider_behavior === 'merge') {
slider_map.set(slider_name, { slider_map.set(slider_name, {
label_name: slider_name, label_name: slider_name+' ('+ability.display_name+')',
max: slider_max, max: slider_max,
step: slider_step, step: slider_step,
id: "ability-slider"+ability.id, id: "ability-slider"+ability.id,
@ -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];
} }

3
js/utils.js
View file

@ -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;