Add tooltips to powerups

gorge.css

@@ -135,6 +135,31 @@ button {
   margin: 10px;
 }
 
+#powerup-tooltip {
+  position: fixed;
+  width: 400px;
+  background: #333;
+  display: none;
+  z-index: 1;
+  left: 0px;
+  top: 0px;
+}
+
+#powerup-tooltip-name {
+  font-size: 24px;
+  color: #eee;
+  margin: 10px;
+  top: 10px;
+  left: 10px;
+}
+
+#powerup-tooltip-desc {
+  font-size: 18px;
+  color: #bbb;
+  margin: 10px;
+  left: 10px;
+}
+
 .building-button {
   position: relative;
   display: block;
@@ -602,4 +627,4 @@ div::-webkit-scrollbar-corner {
 .powerup-entry-done {
   transform: scale(1, 0);
   max-height: 0px;
-}
+}

gorge.html

@@ -35,6 +35,10 @@
     <button id="tasty-micro">Eat Micro</button>
     <div id="powerups" class="title">Powerups</div>
     <div id="powerup-list"></div>
+    <div id="powerup-tooltip">
+      <div id="powerup-tooltip-name"></div>
+      <div id="powerup-tooltip-desc"></div>
+    </div>
   </div>
 
   <div id="upgrades-area">

gorge.js

@@ -110,7 +110,10 @@ function addPowerup(key, powerup) {
     powerupList.appendChild(powerupEntry);
   
     activePowerups[key] = {powerup: powerup, life: powerup.duration, maxLife: powerup.duration, element: powerupEntry };
-  
+    
+    powerupEntry.addEventListener("mousemove", function (e) { powerupTooltip(key, e); });
+    powerupEntry.addEventListener("mouseleave", function () { powerupTooltipRemove(); });
+
     updateAll();
   }
   
@@ -1157,6 +1160,36 @@ function buildingTooltipRemove() {
   tooltip.style.setProperty("display", "none");
 }
 
+function powerupTooltip(id, event) {
+
+  let tooltip = document.querySelector("#powerup-tooltip");
+  tooltip.style.setProperty("display", "inline-block");
+
+  const count = buildingCount();
+
+  fillTooltip("powerup", "name", powerups[id].name);
+  fillTooltip("powerup", "desc", powerups[id].description);
+
+  let xPos = tooltip.parentElement.getBoundingClientRect().x + 450;
+
+  // wow browsers are bad
+
+  var body = document.body,
+    html = document.documentElement;
+
+  var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+
+  let yPos = Math.min(event.clientY, height - 200);
+
+  tooltip.style.setProperty("transform", "translate(" + xPos + "px, " + yPos + "px)")
+}
+
+function powerupTooltipRemove() {
+  let tooltip = document.querySelector("#powerup-tooltip");
+
+  tooltip.style.setProperty("display", "none");
+}
+
 window.onload = function () {
   setup();