Add tooltips for the upgrades. Change how upgrades store their effect

constants.js

@@ -48,7 +48,10 @@ const upgrades = {
   "micro-prod-1": {
     "name": "Bigger Micros",
     "desc": "A macro micro? Certainly more filling.",
-    "effect": "prod-2x"
+    "effect": {
+      "type": "prod-2x",
+      "target": "micro"
+    }
   },
   "micro-prod-2": {
     "name": "Beefy Micros",

gorge.css

@@ -61,10 +61,36 @@ body.dark {
   position: absolute;
   width: 20%;
   right: 35%;
+}
+
+#upgrades-list {
   display: flex;
   flex-wrap: wrap;
 }
 
+#upgrade-tooltip {
+  position: absolute;
+  width: 200px;
+  height: 100px;
+  background: #222;
+  display: none;
+  z-index: 1;
+  left: 0px;
+  top: 0px;
+  border: 5px;
+  border-color: #fff;
+}
+
+#upgrade-tooltip-desc {
+  position:absolute;
+  top: 0px;
+  left: 0px;
+}
+
+#upgrade-tooltip-effect {
+  position: absolute;
+  top: 50px;
+}
 .upgrade-button {
   width: 75px;
   height: 75px;

gorge.html

@@ -28,6 +28,11 @@
 
   <div id="upgrades-area">
     <div id="upgrades">Upgrades</div>
+    <div id="upgrade-tooltip">
+      <div id="upgrade-tooltip-desc"></div>
+      <div id="upgrade-tooltip-effect"></div>
+    </div>
+    <div id="upgrades-list"></div>
   </div>
-  
+
 </body>

gorge.js

@@ -123,8 +123,36 @@ function createBuildings() {
   }
 }
 
+function upgradeTooltip(id, event) {
+  console.log(upgrades[id].desc);
+  console.log(event.clientX, event.clientY);
+
+  let tooltip = document.querySelector("#upgrade-tooltip");
+
+  tooltip.style.setProperty("display", "block");
+
+  let tooltipDesc = document.querySelector("#upgrade-tooltip-desc");
+
+  tooltipDesc.innerText = upgrades[id].desc;
+
+  let tooltipEffect = document.querySelector("#upgrade-tooltip-effect");
+
+  tooltipEffect.innerText = upgrade_types[upgrades[id].effect.type].desc(buildings[upgrades[id].effect.target].name);
+  let yOffset = tooltip.parentElement.getBoundingClientRect().y;
+
+  let yTrans = Math.round(event.clientY - yOffset);
+  tooltip.style.setProperty("transform", "translate(-220px, " + yTrans + "px)");
+}
+
+function upgradeTooltipRemove() {
+  let tooltip = document.querySelector("#upgrade-tooltip");
+
+  tooltip.style.setProperty("display", "none");
+
+}
+
 function createUpgrades() {
-  let container = document.querySelector("#upgrades-area");
+  let container = document.querySelector("#upgrades-list");
 
   for (const [key, value] of Object.entries(upgrades)) {
     let button = document.createElement("div");
@@ -135,6 +163,9 @@ function createUpgrades() {
     buttonName.innerText = value.name;
     button.appendChild(buttonName);
 
+    button.addEventListener("mousemove", function(e) { upgradeTooltip(key, event); });
+    button.addEventListener("mouseleave", function() { upgradeTooltipRemove(); });
+
     container.appendChild(button);
   }
 }