diff --git a/js/atree.js b/js/atree.js index 53eebed..cb3517f 100644 --- a/js/atree.js +++ b/js/atree.js @@ -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); } } diff --git a/js/utils.js b/js/utils.js index fc9cf19..87f6c84 100644 --- a/js/utils.js +++ b/js/utils.js @@ -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} 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; + } +}