basic color stuff

css/wynnstyles.css

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

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');
+    let container = make_elem("div", ["rounded-bottom", "dark-4", "border", "mx-2", "my-4", "dark-shadow", "text-start"], {"style": "position: absolute; z-index: 100;"});
-    tooltip.classList.add("rounded-bottom", "dark-4", "border", "p-0", "mx-2", "my-4", "dark-shadow");
+    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');
+    container.innerHTML += "<br/><br/>";
-    tooltip_title.classList.add("scaled-font");
-    tooltip_title.innerHTML = ability.display_name;
-    tooltip.appendChild(tooltip_title);
 
-    if ('archetype' in ability && ability.archetype !== "") {
+    let description = make_elem("p", ["scaled-font-sm", "my-0", "mx-1", "text-wrap"], {});
-        let tooltip_archetype = document.createElement('p');
+    description.innerHTML = ability.desc;
-        tooltip_archetype.classList.add("scaled-font");
+    container.appendChild(description);
-        tooltip_archetype.innerHTML = "(Archetype: " + ability.archetype+")";
+
-        tooltip.appendChild(tooltip_archetype);
+    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');
+    // requirements
-    tooltip_desc.classList.add("scaled-font-sm", "my-0", "mx-1", "text-wrap");
+    // TODO
-    tooltip_desc.textContent = ability.desc;
-    tooltip.appendChild(tooltip_desc);
 
-    let tooltip_cost = document.createElement('p');
+    UI_elem.appendChild(container);
-    tooltip_cost.classList.add("scaled-font-sm", "my-0", "mx-1", "text-start");
+    return container;
-    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;
 }
 
 // resolve connector conflict, when they occupy the same cell.