basic color stuff

This commit is contained in:
fin444 2022-07-18 15:45:12 -07:00
parent 167dc838f1
commit 3e14609627
2 changed files with 89 additions and 32 deletions

View file

@ -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; }

View file

@ -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.