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

slider generator functional

Browse source
This commit is contained in:
ferricles 2022-07-01 15:52:13 -07:00
parent e9acb79f4b
commit 91407766cb
2 changed files with 103 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
js/atree.js
View file

@ -594,15 +594,15 @@ function render_AT(UI_elem, list_elem, tree) {
let tooltip_title = document.createElement('div');
tooltip_title.classList.add("row", "justify-content-center", "fw-bold");
tooltip_title.textContent = node.display_name;
tooltip_title.textContent = ability.display_name;
let tooltip_desc = document.createElement('div');
tooltip_desc.classList.add("row", "mx-1", "text-wrap");
tooltip_desc.textContent = node.desc;
tooltip_desc.textContent = ability.desc;
let tooltip_cost = document.createElement('div');
tooltip_cost.classList.add("row", "mx-1", "text-start");
tooltip_cost.textContent = "Cost: " + node.cost + " AP";
tooltip_cost.textContent = "Cost: " + ability.cost + " AP";
//create node tooltip
let node_tooltip = document.createElement('div');
@ -619,22 +619,19 @@ function render_AT(UI_elem, list_elem, tree) {
node_tooltip.appendChild(tooltip_cost);
//add in anything new for active tooltips
active_tooltip.id = "atree-ab-" + node.id;
active_tooltip.id = "atree-ab-" + ability.id;
if (node.blockers.length > 0) {
if (ability.blockers.length > 0) {
let active_tooltip_blockers = document.createElement("div");
active_tooltip_blockers.classList.add("row", "mx-1", "text-start");
active_tooltip_blockers.textContent = "Blockers: " + node.blockers.join(", ");
active_tooltip_blockers.textContent = "Blockers: " + ability.blockers.join(", ");
active_tooltip.append(active_tooltip_blockers);
}
//add in slider(s)
for (const effect of node.effects) {
if (effect.type === "stat_scaling") {
//TOOD: write boilerplate function for generating sliders + slider wrappers and call that function here
let slider_container = document.createElement("div");
slider_container.classList.add("row", "mx-1");
slider_container.textContent = "There will be a slider here eventually";
for (const effect of ability.effects) {
if (effect['type'] === "stat_scaling" && effect['slider'] === true) {
let slider_container = gen_slider_labeled(effect['slider_name'], [], effect['min'], effect['max'], effect['slider_step'], effect['default_val'], "ability-slider" + ability.id, effect['slider_color'], []);
active_tooltip.appendChild(slider_container);
}
}

94
js/utils.js
View file

@ -513,3 +513,97 @@ function deepcopy(obj) {
}
return ret;
}
/**
*
*/
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");
slider_container.classList.add("row");
let buf_col = document.createElement("div");
buf_col.classList.add("col", "mx-1");
let slider = gen_slider(min, max, step, default_val, id, color, classlist);
let label = document.createElement("div");
label.classList.add("col");
label.classList.add(...label_classlist);
label.textContent = label_name + ": " + default_val;
//we set IDs here because the slider's id is potentially only meaningful after gen_slider() is called
label.id = slider.id + "-label";
slider_container.id = slider.id + "-container";
buf_col.append(slider, label);
slider_container.appendChild(buf_col);
return slider_container;
}
/** Creates a slider input (input type = range) given styling parameters
*
* @param {Number | String} min - The minimum value for the slider. defaults to 0
* @param {Number | String} max - The maximum value for the slider. defaults to 100
* @param {Number | String} step - The granularity between possible values. defaults to 1
* @param {Number | String} default_val - The default value to set the slider to.
* @param {String} id - The element ID to use for the slider. defaults to the current date time
* @param {String} color - The hex color to use for the slider. Needs the # character.
* @param {Array<String>} classlist - A list of classes to add to the slider.
* @returns
*/
function gen_slider(min = 0, max = 100, step = 1, default_val = min, id = undefined, color = "#FFFFFF", classlist = []) {
//simple attribute vals
let slider = document.createElement("input");
slider.type = "range";
slider.min = min;
slider.max = max;
slider.step = step;
slider.value = default_val;
slider.autocomplete = "off";
if (id) {
if (document.getElementById(id)) {
throw new Error("ID " + id + " already exists within the DOM.")
} else {
slider.id = id;
}
} else {
slider.id = new Date().toLocaleTimeString();
}
slider.color = color;
slider.classList.add(...classlist); //special spread operator -
//necessary for display purposes
slider.style.webkitAppearance = "none";
slider.style.borderRadius = "30px";
slider.style.height = "0.5rem";
slider.classList.add("px-0");
//set up recoloring
slider.addEventListener("change", function(e) {
recolor_slider(slider.id);
});
//do recoloring for the default val
let pct = Math.round(100 * (parseInt(slider.value) - parseInt(slider.min)) / (parseInt(slider.max) - parseInt(slider.min)));
slider.style.background = `rgba(0, 0, 0, 0) linear-gradient(to right, ${color}, ${color} ${pct}%, #AAAAAA ${pct}%, #AAAAAA 100%)`;
//return slider
return slider;
}
/** Recolors a slider. If the corresponding label exists, also update that.
*
* @param {String} id - the ID of the slider
*/
function recolor_slider(id) {
let slider = document.getElementById(id);
let color = slider.color;
let pct = Math.round(100 * (parseInt(slider.value) - parseInt(slider.min)) / (parseInt(slider.max) - parseInt(slider.min)));
slider.style.background = `rgba(0, 0, 0, 0) linear-gradient(to right, ${color}, ${color} ${pct}%, #AAAAAA ${pct}%, #AAAAAA 100%)`;
let label = document.getElementById(id + "-label");
if (label) {
//convention is that the number goes at the end... I parse by separating it at ':'
label.textContent = label.textContent.split(":")[0] + ": " + slider.value;
}
}