basic color stuff
This commit is contained in:
fin444
parent
167dc838f1
commit
3e14609627
2 changed files with 89 additions and 32 deletions
|
|
@ -181,4 +181,23 @@ Wynn-Related CSS
|
|||
|
||||
.restrict {
|
||||
color: #ff8180;
|
||||
}
|
||||
}
|
||||
|
||||
/* Every text color in Minecraft */
|
||||
|
||||
.mc-black { color: #000000 !important; }
|
||||
.mc-dark-blue { color: #0000AA !important; }
|
||||
.mc-dark-green { color: #00AA00 !important; }
|
||||
.mc-dark-aqua { color: #00AAAA !important; }
|
||||
.mc-dark-red { color: #AA0000 !important; }
|
||||
.mc-dark-purple { color: #AA00AA !important; }
|
||||
.mc-gold { color: #FFAA00 !important; }
|
||||
.mc-gray { color: #AAAAAA !important; }
|
||||
.mc-dark-gray { color: #555555 !important; }
|
||||
.mc-blue { color: #5555FF !important; }
|
||||
.mc-green { color: #55FF55 !important; }
|
||||
.mc-aqua { color: #55FFFF !important; }
|
||||
.mc-red { color: #FF5555 !important; }
|
||||
.mc-light-purple { color: #FF55FF !important; }
|
||||
.mc-yellow { color: #FFFF55 !important; }
|
||||
.mc-white { color: #FFFFFF !important; }
|
||||
100
js/atree.js
100
js/atree.js
|
|
@ -1012,8 +1012,6 @@ function render_AT(UI_elem, list_elem, tree) {
|
|||
});
|
||||
|
||||
// add tooltip
|
||||
// tooltips are being changed to generate on mouseover for fin444's future style updates
|
||||
// this is being implemented before those updates since it helps with a hotfix
|
||||
hitbox.addEventListener('mouseover', function(e) {
|
||||
if (e.target !== this) {
|
||||
return;
|
||||
|
|
@ -1043,41 +1041,81 @@ function render_AT(UI_elem, list_elem, tree) {
|
|||
};
|
||||
|
||||
function generateTooltip(UI_elem, node_elem, ability) {
|
||||
let tooltip = document.createElement('div');
|
||||
tooltip.classList.add("rounded-bottom", "dark-4", "border", "p-0", "mx-2", "my-4", "dark-shadow");
|
||||
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";
|
||||
|
||||
// tooltip text formatting
|
||||
let title = make_elem("b", ["scaled-font", "mx-1"], {});
|
||||
title.innerHTML = ability.display_name;
|
||||
switch(ability.display.icon) {
|
||||
case "node_1":
|
||||
title.classList.add("mc-gold");
|
||||
break;
|
||||
case "node_2":
|
||||
title.classList.add("mc-light-purple");
|
||||
break;
|
||||
case "node_3":
|
||||
title.classList.add("mc-red");
|
||||
break;
|
||||
case "node_warrior":
|
||||
case "node_archer":
|
||||
case "node_mage":
|
||||
case "node_assassin":
|
||||
case "node_shaman":
|
||||
title.classList.add("mc-green");
|
||||
break;
|
||||
case "0":
|
||||
// already white
|
||||
break;
|
||||
}
|
||||
container.appendChild(title);
|
||||
|
||||
let tooltip_title = document.createElement('b');
|
||||
tooltip_title.classList.add("scaled-font");
|
||||
tooltip_title.innerHTML = ability.display_name;
|
||||
tooltip.appendChild(tooltip_title);
|
||||
container.innerHTML += "<br/><br/>";
|
||||
|
||||
if ('archetype' in ability && ability.archetype !== "") {
|
||||
let tooltip_archetype = document.createElement('p');
|
||||
tooltip_archetype.classList.add("scaled-font");
|
||||
tooltip_archetype.innerHTML = "(Archetype: " + ability.archetype+")";
|
||||
tooltip.appendChild(tooltip_archetype);
|
||||
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"));
|
||||
|
||||
if ("archetype" in ability && ability.archetype !== "") {
|
||||
let archetype = make_elem("p", ["scaled-font-sm", "my-0", "mx-1"], {});
|
||||
archetype.innerHTML = ability.archetype + " Archetype";
|
||||
switch(ability.archetype) {
|
||||
case "Riftwalker":
|
||||
case "Paladin":
|
||||
archetype.classList.add("mc-aqua");
|
||||
break;
|
||||
case "Fallen":
|
||||
archetype.classList.add("mc-red");
|
||||
break;
|
||||
case "Boltslinger":
|
||||
case "Battle Monk":
|
||||
archetype.classList.add("mc-yellow");
|
||||
break;
|
||||
case "Trapper":
|
||||
archetype.classList.add("mc-dark-green");
|
||||
break;
|
||||
case "Sharpshooter":
|
||||
archetype.classList.add("mc-light-purple");
|
||||
break;
|
||||
case "Arcanist":
|
||||
archetype.classList.add("mc-dark-purple");
|
||||
break;
|
||||
case "Light Bender":
|
||||
// already white
|
||||
break;
|
||||
}
|
||||
container.appendChild(archetype);
|
||||
container.appendChild(document.createElement("br"));
|
||||
}
|
||||
|
||||
let tooltip_desc = document.createElement('p');
|
||||
tooltip_desc.classList.add("scaled-font-sm", "my-0", "mx-1", "text-wrap");
|
||||
tooltip_desc.textContent = ability.desc;
|
||||
tooltip.appendChild(tooltip_desc);
|
||||
// requirements
|
||||
// TODO
|
||||
|
||||
let tooltip_cost = document.createElement('p');
|
||||
tooltip_cost.classList.add("scaled-font-sm", "my-0", "mx-1", "text-start");
|
||||
tooltip_cost.textContent = "Cost: " + ability.cost + " AP";
|
||||
tooltip.appendChild(tooltip_cost);
|
||||
|
||||
tooltip.style.position = "absolute";
|
||||
tooltip.style.zIndex = "100";
|
||||
tooltip.style.top = (node_elem.getBoundingClientRect().top + window.pageYOffset + 50) + "px";
|
||||
tooltip.style.left = UI_elem.getBoundingClientRect().left + "px";
|
||||
tooltip.style.width = UI_elem.getBoundingClientRect().width * 0.95 + "px";
|
||||
|
||||
UI_elem.appendChild(tooltip);
|
||||
return tooltip;
|
||||
UI_elem.appendChild(container);
|
||||
return container;
|
||||
}
|
||||
|
||||
// resolve connector conflict, when they occupy the same cell.
|
||||
|
|
|
|||
Loading…
Reference in a new issue