atree initial commit
This commit is contained in:
reschan
parent
9f399846a3
commit
8108f033e5
7 changed files with 182 additions and 4 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -448,3 +448,28 @@ 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
70
js/atree_constants.js
Normal 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
|
||||
},
|
||||
];
|
||||
66
js/sq2bs.js
66
js/sq2bs.js
|
|
@ -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);
|
||||
};
|
||||
};
|
||||
|
|
|
|||
BIN
media/atree/connect_angle.png
Normal file
BIN
media/atree/connect_angle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
BIN
media/atree/connect_line.png
Normal file
BIN
media/atree/connect_line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
media/atree/node.png
Normal file
BIN
media/atree/node.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Loading…
Reference in a new issue