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

More convenience functions for creating html elements

Browse source
This commit is contained in:
hppeng 2022-07-06 20:04:53 -07:00
parent 148d51924e
commit e69039eabd
3 changed files with 24 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
css/sq2bs.css
View file

@ -21,7 +21,6 @@
background:transparent; background:transparent;
height: 0.5rem; height: 0.5rem;
} }
/******** Firefox **** **/ /******** Firefox **** **/
.slider::-moz-range-track { .slider::-moz-range-track {

32
js/atree.js
View file

@ -700,32 +700,16 @@ class AbilityTreeEnsureNodesNode extends ComputeNode {
function render_AT(UI_elem, list_elem, tree) { function render_AT(UI_elem, list_elem, tree) {
console.log("constructing ability tree UI"); console.log("constructing ability tree UI");
// add in the "Active" title to atree // add in the "Active" title to atree
let active_row = document.createElement("div"); let active_row = make_elem("div", ["row", "item-title", "mx-auto", "justify-content-center"]);
active_row.classList.add("row", "item-title", "mx-auto", "justify-content-center"); let active_word = make_elem("div", ["col-auto"], {textContent: "Active Abilities:"});
let active_word = document.createElement("div");
active_word.classList.add("col-auto");
active_word.textContent = "Active Abilities:";
let active_AP_container = document.createElement("div"); let active_AP_container = make_elem("div", ["col-auto"]);
active_AP_container.classList.add("col-auto"); let active_AP_subcontainer = make_elem("div", ["row"]);
let active_AP_cost = make_elem("div", ["col-auto", "mx-0", "px-0"], {id: "active_AP_cost", textContent: "0"});
let active_AP_subcontainer = document.createElement("div"); let active_AP_slash = make_elem("div", ["col-auto", "mx-0", "px-0"], {textContent: "/"});
active_AP_subcontainer.classList.add("row"); let active_AP_cap = make_elem("div", ["col-auto", "mx-0", "px-0"], {id: "active_AP_cap", textContent: "45"});
let active_AP_end = make_elem("div", ["col-auto", "mx-0", "px-0"], {textContent: " AP"});
let active_AP_cost = document.createElement("div");
active_AP_cost.classList.add("col-auto", "mx-0", "px-0");
active_AP_cost.id = "active_AP_cost";
active_AP_cost.textContent = "0";
let active_AP_slash = document.createElement("div");
active_AP_slash.classList.add("col-auto", "mx-0", "px-0");
active_AP_slash.textContent = "/";
let active_AP_cap = document.createElement("div");
active_AP_cap.classList.add("col-auto", "mx-0", "px-0");
active_AP_cap.id = "active_AP_cap";
active_AP_cap.textContent = "45";
let active_AP_end = document.createElement("div");
active_AP_end.classList.add("col-auto", "mx-0", "px-0");
active_AP_end.textContent = " AP";
active_AP_container.appendChild(active_AP_subcontainer); active_AP_container.appendChild(active_AP_subcontainer);
active_AP_subcontainer.append(active_AP_cost, active_AP_slash, active_AP_cap, active_AP_end); active_AP_subcontainer.append(active_AP_cost, active_AP_slash, active_AP_cap, active_AP_end);

16
js/utils.js
View file

@ -846,3 +846,19 @@ function recolor_slider(slider, label) {
label.textContent = label.textContent.split(":")[0] + ": " + slider.value; label.textContent = label.textContent.split(":")[0] + ": " + slider.value;
} }
} }
/**
* Shorthand for making an element in html.
*
* @param {String} type : type of element
* @param {List[String]} classlist : css classes for element
* @param {Map[String, String]} args : Properties for the element
*/
function make_elem(type, classlist = [], args = {}) {
const ret_elem = document.createElement(type);
ret_elem.classList.add(...classlist);
for (const i in args) {
ret_elem[i] = args[i];
}
return ret_elem;
}