Add rudimentary tooltips to resources

constants.js

@@ -26,10 +26,12 @@ const tiers = [
 const resourceTypes = {
   "food": {
     name: "food",
+    desc: "Earned from eating. Pays for lots of things.",
     generated: true
   },
   "powerups": {
     name: "power crystals",
+    desc: "Earned from clicking powerups. Pays for powerup upgrades.",
     generated: false
   }
 }

gorge.css

@@ -824,3 +824,14 @@ div::-webkit-scrollbar-corner {
   box-sizing: border-box;
   float: right;
 }
+
+.has-help {
+  
+}
+
+#help-tooltip {
+  color: #888;
+  background: #000;
+  max-width: 400px;
+  font-size: 16pt;
+}

gorge.html

@@ -49,6 +49,9 @@
     </div>
   </div>
 
+  <div id="help-tooltip">
+    <div id="help-tooltip-help"></div>
+  </div>
   <div id="upgrades-area">
     <div id="upgrades" class="title switcher-button">Upgrades</div>
     <div id="upgrade-tooltip">

gorge.js

@@ -758,6 +758,11 @@ function registerListeners() {
       mouseTarget.dispatchEvent(new Event("mousemove"));
     return true;
   });
+
+  document.querySelectorAll(".help-tooltip").forEach(element => {
+    element.addEventListener("mousemove", e => helpTooltip(element, e));
+    element.addEventListener("moveleave", e => helpTooltipRemove(element, e));
+  });
 }
 
 function openOptions() {
@@ -938,6 +943,8 @@ function createDisplays() {
   Object.keys(resourceTypes).forEach(key => {
     const quantity = document.createElement("div");
     quantity.classList.add("resource-quantity");
+    quantity.classList.add("help-tooltip");
+    quantity.dataset.tooltip =  resourceTypes[key].desc;
     quantity.id = "resource-quantity-" + key;
     resourceList.appendChild(quantity);
 
@@ -1381,6 +1388,38 @@ function powerupTooltipRemove() {
   tooltip.style.setProperty("display", "none");
 }
 
+function helpTooltip(element, event) {
+
+  const text = element.dataset.tooltip;
+
+  let tooltip = document.querySelector("#help-tooltip");
+  tooltip.style.setProperty("display", "inline-block");
+
+  const count = buildingCount();
+
+  fillTooltip("help", "help", text);
+
+  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 helpTooltipRemove() {
+  let tooltip = document.querySelector("#help-tooltip");
+
+  tooltip.style.setProperty("display", "none");
+}
+
+
 window.onload = function () {
   setup();