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

ability requirements in tooltip

Browse source
This commit is contained in:
fin444 2022-07-19 11:40:37 -07:00
parent 3e14609627
commit 5b94564e86
1 changed files with 54 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
js/atree.js
View file

@ -1020,7 +1020,7 @@ function render_AT(UI_elem, list_elem, tree) {
node_wrap.tooltip_elem.remove(); node_wrap.tooltip_elem.remove();
delete node_wrap.tooltip_elem; 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) { hitbox.addEventListener('mouseout', function(e) {
@ -1040,12 +1040,13 @@ function render_AT(UI_elem, list_elem, tree) {
return atree_map; 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;"}); 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.top = (node_elem.getBoundingClientRect().top + window.pageYOffset + 50) + "px";
container.style.left = UI_elem.getBoundingClientRect().left + "px"; container.style.left = UI_elem.getBoundingClientRect().left + "px";
container.style.width = UI_elem.getBoundingClientRect().width * 0.95 + "px"; container.style.width = UI_elem.getBoundingClientRect().width * 0.95 + "px";
// title
let title = make_elem("b", ["scaled-font", "mx-1"], {}); let title = make_elem("b", ["scaled-font", "mx-1"], {});
title.innerHTML = ability.display_name; title.innerHTML = ability.display_name;
switch(ability.display.icon) { switch(ability.display.icon) {
@ -1073,12 +1074,14 @@ function generateTooltip(UI_elem, node_elem, ability) {
container.innerHTML += "<br/><br/>"; container.innerHTML += "<br/><br/>";
// description
let description = make_elem("p", ["scaled-font-sm", "my-0", "mx-1", "text-wrap"], {}); let description = make_elem("p", ["scaled-font-sm", "my-0", "mx-1", "text-wrap"], {});
description.innerHTML = ability.desc; description.innerHTML = ability.desc;
container.appendChild(description); container.appendChild(description);
container.appendChild(document.createElement("br")); container.appendChild(document.createElement("br"));
// archetype
if ("archetype" in ability && ability.archetype !== "") { if ("archetype" in ability && ability.archetype !== "") {
let archetype = make_elem("p", ["scaled-font-sm", "my-0", "mx-1"], {}); let archetype = make_elem("p", ["scaled-font-sm", "my-0", "mx-1"], {});
archetype.innerHTML = ability.archetype + " Archetype"; archetype.innerHTML = ability.archetype + " Archetype";
@ -1111,8 +1114,55 @@ function generateTooltip(UI_elem, node_elem, ability) {
container.appendChild(document.createElement("br")); container.appendChild(document.createElement("br"));
} }
// requirements // calculate if requirements are satisfied
// TODO 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); UI_elem.appendChild(container);
return container; return container;