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

final style touches

Browse source
This commit is contained in:
fin444 2022-07-12 14:09:09 -07:00
parent 2aee7ca589
commit 4ae9655a3f
2 changed files with 7 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
css/sq2bs.css
View file

@ -449,36 +449,6 @@ a:hover {
border-color: #fff; border-color: #fff;
} }
/* atree connector rotations */
.rotate-90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-270 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate-flip {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.hide-scroll { .hide-scroll {
@ -489,12 +459,6 @@ a:hover {
display: none; /* Safari and Chrome */ display: none; /* Safari and Chrome */
} }
.atree-circle {
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}
.hppeng{ .hppeng{
color: #20c2b6; color: #20c2b6;
} }

9
js/atree.js
View file

@ -665,6 +665,12 @@ 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");
// increase padding, since images are larger than the space provided
UI_elem.style.paddingRight = "calc(var(--bs-gutter-x) * 1)";
UI_elem.style.paddingLeft = "calc(var(--bs-gutter-x) * 1)";
UI_elem.style.paddingTop = "calc(var(--bs-gutter-x) * .5)";
// add in the "Active" title to atree // add in the "Active" title to atree
let active_row = document.createElement("div"); let active_row = document.createElement("div");
active_row.classList.add("row", "item-title", "mx-auto", "justify-content-center"); active_row.classList.add("row", "item-title", "mx-auto", "justify-content-center");
@ -799,7 +805,6 @@ function render_AT(UI_elem, list_elem, tree) {
node_img.src = '../media/atree/'+icon+'.png'; node_img.src = '../media/atree/'+icon+'.png';
node_img.style = "width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated; z-index: 1;"; node_img.style = "width: 200%; height: 200%; position: absolute; top: -50%; left: -50%; image-rendering: pixelated; z-index: 1;";
node_elem.appendChild(node_img); node_elem.appendChild(node_img);
node_elem.classList.add("atree-circle");
// create hitbox // create hitbox
// this is necessary since images exceed the size of their square, but should only be interactible within that square // this is necessary since images exceed the size of their square, but should only be interactible within that square
@ -857,7 +862,7 @@ function render_AT(UI_elem, list_elem, tree) {
let tooltip = this.parentElement.children[this.parentElement.children.length - 1]; let tooltip = this.parentElement.children[this.parentElement.children.length - 1];
tooltip.style.top = "50px"; tooltip.style.top = "50px";
tooltip.style.left = (this.parentElement.parentElement.parentElement.getBoundingClientRect().left - this.getBoundingClientRect().left) + "px"; tooltip.style.left = (this.parentElement.parentElement.parentElement.getBoundingClientRect().left - this.getBoundingClientRect().left) + "px";
tooltip.style.width = UI_elem.getBoundingClientRect().width * .95 + "px"; tooltip.style.width = UI_elem.getBoundingClientRect().width * .9 + "px";
tooltip.style.display = "block"; tooltip.style.display = "block";
}); });