Upgrades have a cost. Added cost to tooltip (so much for using the "right tense" in commit messages lul)

constants.js

@@ -1,5 +1,10 @@
 "use strict";
 
+const resourceTypes = {
+  "food": {
+    name: "Food"
+  }
+}
 const buildings = {
   "micro": {
     "name": "Micro",
@@ -48,6 +53,9 @@ const upgrades = {
   "micro-prod-1": {
     "name": "Bigger Micros",
     "desc": "A macro micro? Certainly more filling.",
+    "cost": {
+      "food": 100
+    },
     "effect": {
       "type": "prod-2x",
       "target": "micro"
@@ -56,6 +64,12 @@ const upgrades = {
   "micro-prod-2": {
     "name": "Beefy Micros",
     "desc": "25% more protein, 10% fewer carbs.",
-    "effect": "prod-2x"
+    "cost": {
+      "food": 500
+    },
+    "effect": {
+      "type": "prod-2x",
+      "target": "micro"
+    }
   }
 }

gorge.css

@@ -91,6 +91,13 @@ body.dark {
   position: absolute;
   top: 50px;
 }
+
+#upgrade-tooltip-cost {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+}
+
 .upgrade-button {
   width: 75px;
   height: 75px;

gorge.html

@@ -31,6 +31,7 @@
     <div id="upgrade-tooltip">
       <div id="upgrade-tooltip-desc"></div>
       <div id="upgrade-tooltip-effect"></div>
+      <div id="upgrade-tooltip-cost"></div>
     </div>
     <div id="upgrades-list"></div>
   </div>

gorge.js

@@ -123,6 +123,16 @@ function createBuildings() {
   }
 }
 
+function renderCost(cost) {
+  let list = [];
+
+  for (const [key, value] of Object.entries(cost)) {
+    list.push(value + " " + resourceTypes[key].name);
+  }
+
+  return list.join(", ");
+}
+
 function upgradeTooltip(id, event) {
   console.log(upgrades[id].desc);
   console.log(event.clientX, event.clientY);
@@ -138,6 +148,11 @@ function upgradeTooltip(id, event) {
   let tooltipEffect = document.querySelector("#upgrade-tooltip-effect");
 
   tooltipEffect.innerText = upgrade_types[upgrades[id].effect.type].desc(buildings[upgrades[id].effect.target].name);
+
+  let tooltipCost = document.querySelector("#upgrade-tooltip-cost");
+
+  tooltipCost.innerText = renderCost(upgrades[id].cost);
+
   let yOffset = tooltip.parentElement.getBoundingClientRect().y;
 
   let yTrans = Math.round(event.clientY - yOffset);