Upgrade costs and requirements are shown as a list of divs

gorge.css

@@ -122,7 +122,7 @@ body.dark {
 #upgrade-tooltip {
   position: absolute;
   width: 200px;
-  height: 100px;
+  height: 300px;
   background: #222;
   display: none;
   z-index: 1;
@@ -149,6 +149,13 @@ body.dark {
   bottom: 0px;
 }
 
+#upgrade-tooltip-prereqs {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+}
+
+
 .upgrade-button {
   width: 75px;
   height: 75px;

gorge.html

@@ -6,6 +6,7 @@
   <title>Gorge</title>
   <link rel="stylesheet" href="gorge.css">
   <script src="polyfill.js"></script>
+  <script src="util.js"></script>
   <script src="constants.js"></script>
   <script src="numbers.js"></script>
   <script src="gorge.js"></script>
@@ -36,6 +37,7 @@
     <div id="upgrade-tooltip">
       <div id="upgrade-tooltip-desc"></div>
       <div id="upgrade-tooltip-effect"></div>
+      <div id="upgrade-tooltip-prereqs"></div>
       <div id="upgrade-tooltip-cost"></div>
     </div>
     <div id="upgrades-list"></div>

gorge.js

@@ -262,6 +262,7 @@ function createDisplays() {
     resourceList.appendChild(line);
   }
 }
+
 function renderCost(cost) {
   let list = [];
 
@@ -269,7 +270,38 @@ function renderCost(cost) {
     list.push(value + " " + resourceTypes[key].name);
   }
 
-  return list.join(", ");
+  let divs = [];
+
+  for (let line of list) {
+    let div = document.createElement("div");
+    div.innerText = line;
+    divs.push(div);
+  }
+
+  return divs;
+}
+
+function renderPrereqs(prereqs) {
+  let list = [];
+
+  for (const [key, value] of Object.entries(prereqs)) {
+    if (key == "buildings") {
+      for (const [building, amount] of Object.entries(prereqs.buildings)) {
+        list.push(buildings[building].name + " x" + amount);
+      }
+    }
+  }
+
+  let divs = [];
+
+  for (let line of list) {
+    let div = document.createElement("div");
+    div.innerText = line;
+    divs.push(div);
+  }
+
+
+  return divs;
 }
 
 function upgradeTooltip(id, event) {
@@ -288,7 +320,11 @@ function upgradeTooltip(id, event) {
 
   let tooltipCost = document.querySelector("#upgrade-tooltip-cost");
 
-  tooltipCost.innerText = renderCost(upgrades[id].cost);
+  replaceChildren(tooltipCost, renderCost(upgrades[id].cost));
+
+  let tooltipPrereqs = document.querySelector("#upgrade-tooltip-prereqs");
+
+  replaceChildren(tooltipPrereqs, renderPrereqs(upgrades[id].prereqs));
 
   let yOffset = tooltip.parentElement.getBoundingClientRect().y;
 

util.js

@@ -0,0 +1,16 @@
+function replaceChildren(element, newChildren) {
+  removeChildren(element);
+  addChildren(element, newChildren);
+}
+
+function addChildren(element, children) {
+  for (let child of children) {
+    element.appendChild(child);
+  }
+}
+
+function removeChildren(element) {
+  while (element.lastChild) {
+    element.removeChild(element.lastChild);
+  }
+}