atree initial commit

This commit is contained in:
reschan 2022-06-13 16:21:01 +07:00
parent 9f399846a3
commit 8108f033e5
7 changed files with 182 additions and 4 deletions

View file

@ -418,17 +418,22 @@
<div class="row row-cols-1 row-cols-1 text-center scaled-font dark-5 rounded dark-shadow">
<div class="col fw-bold dark-4 rounded-top">
<div class = "row">
<div class = "col-4 py-2">
<div class = "col-3 py-2">
<button class = "col-auto button rounded scaled-font fw-bold text-light dark-5" id = "toggle-tomes" onclick = "toggle_tab('tomes-dropdown'); toggleButton('toggle-tomes')">
Show Tomes
</button>
</div>
<div class = "col-4 py-2">
<div class = "col-3 py-2">
<button class = "col-auto button rounded scaled-font fw-bold text-light dark-5" id = "toggle-atree" onclick = "toggle_tab('atree-dropdown'); toggleButton('toggle-atree')">
Show Ability Tree
</button>
</div>
<div class = "col-3 py-2">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "edit-ID-button" onclick = "toggle_tab('edit_id_tab'); toggleButton('edit-ID-button')">
Edit IDs
</button>
</div>
<div class = "col-4 py-2">
<div class = "col-3 py-2">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "edit-ID-button" onclick = "resetEditableIDs(); updateStats();">
Reset Edited IDs
</button>
@ -607,6 +612,16 @@
</div>
</div>
</div>
<div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "atree-dropdown">
<div class="row row-cols-1 row-cols-xl-2">
<div class="col dark-8 rounded" id="atree-ui">
</div>
<div class="col">
Active:
</div>
</div>
</div>
<div class="col dark-6 rounded-bottom my-3 my-xl-1" id = "edit_id_tab" style = "display:none;">
<div class = "row big-title justify-content-center">
Damage Stats
@ -1387,6 +1402,8 @@
<script type="text/javascript" src="../js/skillpoints.js"></script>
<script type="text/javascript" src="../js/damage_calc.js"></script>
<script type="text/javascript" src="../js/atree_constants.js"></script>
<script type="text/javascript" src="../js/display_constants.js"></script>
<script type="text/javascript" src="../js/sq2display_constants.js"></script>

View file

@ -447,4 +447,29 @@ a:hover {
.button {
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);
}

70
js/atree_constants.js Normal file
View file

@ -0,0 +1,70 @@
const atree_example = [
{
"title": "skill",
"desc": "desc",
"image": "../media/atree/node.png",
"connector": false,
"row": 5,
"col": 3,
},
{
"image": "../media/atree/connect_angle.png",
"connector": true,
"rotate": "270",
"row": 4,
"col": 3,
},
{
"title": "skill2",
"desc": "desc",
"image": "../media/atree/node.png",
"connector": false,
"row": 0,
"col": 2
},
{
"image": "../media/atree/connect_line.png",
"connector": true,
"rotate": 0,
"row": 1,
"col": 2
},
{
"title": "skill3",
"desc": "desc",
"image": "../media/atree/node.png",
"connector": false,
"row": 2,
"col": 2
},
{
"image": "../media/atree/connect_line.png",
"connector": true,
"rotate": 90,
"row": 2,
"col": 3
},
{
"title": "skill4",
"desc": "desc",
"image": "../media/atree/node.png",
"connector": false,
"row": 2,
"col": 4
},
{
"image": "../media/atree/connect_line.png",
"connector": true,
"rotate": 0,
"row": 3,
"col": 2
},
{
"title": "skill5",
"desc": "desc",
"image": "../media/atree/node.png",
"connector": false,
"row": 4,
"col": 2
},
];

View file

@ -73,6 +73,8 @@ document.addEventListener('DOMContentLoaded', function() {
};
});
construct_AT(document.getElementById("atree-ui"), atree_example);
document.getElementById("atree-dropdown").style.display = "none";
});
// phanta scheduler
@ -530,3 +532,67 @@ function init_autocomplete() {
}
}
// atree parsing
function construct_AT(elem, tree) {
for (let i = 0; i < tree.length; i++) {
let node = tree[i];
// create rows if not exist
if (document.getElementById("atree-row-" + node.row) == null) {
for (let j = 0; j <= node.row; j++) {
if (document.getElementById("atree-row-" + j) == null) {
let row = document.createElement('div');
row.classList.add("row");
row.id = "atree-row-" + j;
row.style.height = elem.getBoundingClientRect().width / 5 + "px";
for (let k = 0; k < 5; k++) {
col = document.createElement('div');
col.classList.add('col', 'px-0');
row.appendChild(col);
};
elem.appendChild(row);
};
};
};
// create node
let node_elem = document.createElement('div')
node_elem.className = "atree-node";
node_elem.style = "background-image: url('" + node.image + "'); background-size: cover; width: 100%; height: 100%;";
if (node.connector && node.rotate != 0) {
node_elem.classList.add("rotate-" + node.rotate);
};
// add tooltip
if (!node.connector) {
node_elem.addEventListener('mouseover', function(e) {
if (e.target !== this) {return;}
let tooltip = this.children[0];
tooltip.style.top = this.getBoundingClientRect().bottom + window.scrollY + "px";
tooltip.style.left = this.parentElement.parentElement.getBoundingClientRect().left + "px";
tooltip.style.display = "block";
});
node_elem.addEventListener('mouseout', function(e) {
if (e.target !== this) {return;}
let tooltip = this.children[0];
tooltip.style.display = "none";
});
let node_tooltip = document.createElement('div');
node_tooltip.addEventListener('mouseover', function() {});
node_tooltip.style.backgroundColor = "#444444";
node_tooltip.style.color = "#ffffff";
node_tooltip.style.position = "absolute";
node_tooltip.style.width = elem.getBoundingClientRect().width + "px";
node_tooltip.style.display = "none";
node_tooltip.textContent = node.title;
node_elem.appendChild(node_tooltip);
};
document.getElementById("atree-row-" + node.row).children[node.col].appendChild(node_elem);
};
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
media/atree/node.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB