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

@ -22,7 +22,6 @@
height: 0.5rem;
}
/******** Firefox **** **/
.slider::-moz-range-track {
-webkit-appearance: none;

32
js/atree.js
View file

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