diff --git a/js/atree.js b/js/atree.js
index 70d89e8..4421b61 100644
--- a/js/atree.js
+++ b/js/atree.js
@@ -1020,7 +1020,7 @@ function render_AT(UI_elem, list_elem, tree) {
node_wrap.tooltip_elem.remove();
delete node_wrap.tooltip_elem;
}
- node_wrap.tooltip_elem = generateTooltip(UI_elem, node_elem, ability);
+ node_wrap.tooltip_elem = generateTooltip(UI_elem, node_elem, ability, atree_map);
});
hitbox.addEventListener('mouseout', function(e) {
@@ -1040,12 +1040,13 @@ function render_AT(UI_elem, list_elem, tree) {
return atree_map;
};
-function generateTooltip(UI_elem, node_elem, ability) {
+function generateTooltip(UI_elem, node_elem, ability, atree_map) {
let container = make_elem("div", ["rounded-bottom", "dark-4", "border", "mx-2", "my-4", "dark-shadow", "text-start"], {"style": "position: absolute; z-index: 100;"});
container.style.top = (node_elem.getBoundingClientRect().top + window.pageYOffset + 50) + "px";
container.style.left = UI_elem.getBoundingClientRect().left + "px";
container.style.width = UI_elem.getBoundingClientRect().width * 0.95 + "px";
+ // title
let title = make_elem("b", ["scaled-font", "mx-1"], {});
title.innerHTML = ability.display_name;
switch(ability.display.icon) {
@@ -1073,12 +1074,14 @@ function generateTooltip(UI_elem, node_elem, ability) {
container.innerHTML += "
";
+ // description
let description = make_elem("p", ["scaled-font-sm", "my-0", "mx-1", "text-wrap"], {});
description.innerHTML = ability.desc;
container.appendChild(description);
container.appendChild(document.createElement("br"));
+ // archetype
if ("archetype" in ability && ability.archetype !== "") {
let archetype = make_elem("p", ["scaled-font-sm", "my-0", "mx-1"], {});
archetype.innerHTML = ability.archetype + " Archetype";
@@ -1111,8 +1114,55 @@ function generateTooltip(UI_elem, node_elem, ability) {
container.appendChild(document.createElement("br"));
}
- // requirements
- // TODO
+ // calculate if requirements are satisfied
+ let apUsed = 0;
+ let maxAP = parseInt(document.getElementById("active_AP_cap").innerHTML);
+ let archChosen = 0;
+ let blockedBy = [];
+ for (let [id, node_wrap] of atree_map.entries()) {
+ if (!node_wrap.active || id == ability.id) {
+ continue; // we don't want to count abilities that are not selected, and an ability should not count towards itself
+ }
+ apUsed += node_wrap.ability.cost;
+ if (node_wrap.ability.archetype == ability.archetype) {
+ archChosen++;
+ }
+ if (ability.blockers.includes(id)) {
+ blockedBy.push(node_wrap.ability.display_name);
+ }
+ }
+
+ let reqYes = "✔" // green check mark
+ let reqNo = "✖" // red x
+
+ // cost
+ let cost = make_elem("p", ["scaled-font-sm", "my-0", "mx-1"], {});
+ if (apUsed + ability.cost > maxAP) {
+ cost.innerHTML = reqNo;
+ } else {
+ cost.innerHTML = reqYes;
+ }
+ cost.innerHTML += " Ability Points: " + (maxAP - apUsed) + "/" + ability.cost;
+ container.appendChild(cost);
+
+ // archetype req
+ if (ability.archetype_req > 0 && ability.archetype != null) {
+ let archReq = make_elem("p", ["scaled-font-sm", "my-0", "mx-1"], {});
+ if (archChosen >= ability.archetype_req) {
+ archReq.innerHTML = reqYes;
+ } else {
+ archReq.innerHTML = reqNo;
+ }
+ archReq.innerHTML += " Min " + ability.archetype + " Archetype: " + archChosen + "/" + ability.archetype_req;
+ container.appendChild(archReq);
+ }
+
+ // blockers
+ for (let i = 0; i < blockedBy.length; i++) {
+ let blocker = make_elem("p", ["scaled-font-sm", "my-0", "mx-1"], {});
+ blocker.innerHTML = reqNo + " Blocked By: " + blockedBy[i];
+ container.appendChild(blocker);
+ }
UI_elem.appendChild(container);
return container;