From 5b94564e860012d0480efee6e4fdc1d38ee3e39f Mon Sep 17 00:00:00 2001
From: fin444 <fin444@users.noreply.github.com>
Date: Tue, 19 Jul 2022 11:40:37 -0700
Subject: [PATCH] ability requirements in tooltip

---
 js/atree.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 54 insertions(+), 4 deletions(-)

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 += "<br/><br/>";
 
+    // 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 = "<span class = 'mc-green'>&#10004;</span>" // green check mark
+    let reqNo = "<span class = 'mc-red'>&#10006;</span>" // 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 += " <span class = 'mc-gray'>Ability Points:</span> " + (maxAP - apUsed) + "<span class = 'mc-gray'>/" + 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 += " <span class = 'mc-gray'>Min " + ability.archetype + " Archetype:</span> " + archChosen + "<span class = 'mc-gray'>/" + 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 + " <span class = 'mc-gray'>Blocked By:</span> " + blockedBy[i];
+        container.appendChild(blocker);
+    }
 
     UI_elem.appendChild(container);
     return container;