Improved how resources get displayed

gorge.css

@@ -23,10 +23,8 @@ button {
   background-color: #211;
   width: 300px;
   height: 200px;
-  position: fixed;
-  left: 15%;
-  top: 50%;
-  bottom: 50%;
+  position: relative;
+  top: 30px;
   margin: auto;
   font-size: 60px;
 }
@@ -45,11 +43,12 @@ button {
 #resources-area {
   position: absolute;
   text-align: center;
-  width: 20%;
+  width: 35%;
   left: 0%;
   top: 10%;
   height: 90%;
   margin: auto;
+  font-size: 36px;
 }
 
 #buildings-area {

gorge.html

@@ -28,8 +28,8 @@
     <div id="resources" class="title">Resources</div>
     <div id="resource-list"></div>
     <div id="productivity"></div>
+    <button id="tasty-micro">Eat Micro</button>
   </div>
-  <button id="tasty-micro">Eat Micro</button>
 
   <div id="upgrades-area">
     <div id="upgrades" class="title">Upgrades</div>

gorge.js

@@ -99,9 +99,24 @@ function addResources(delta) {
 
 function displayResources() {
   document.title = "Gorge - " + round(resources.food) + " food";
-  document.getElementById("resource-food").innerText = "Food: " + render(resources.food);
 
-  document.getElementById("productivity").innerText = round(calculateProductivity(), 1) + " food/sec";
+  replaceChildren(document.querySelector("#resource-list"), renderResources());
+}
+
+function renderResources() {
+  let list = [];
+
+
+  for (const [key, value] of Object.entries(resources)) {
+
+    let line1 = round(value) + " " + resourceTypes[key].name;
+    let line2 = round(currentProductivity[key],1) + " " + resourceTypes[key].name + "/sec";
+
+    list.push({"text": line1});
+    list.push({"text": line2});
+  }
+
+  return renderLines(list);
 }
 
 function displayBuildings() {
@@ -225,6 +240,7 @@ function initializeData() {
   }
 
   for (const [key, value] of Object.entries(resourceTypes)) {
+    resources[key] = 0;
     currentProductivity[key] = 0;
   }
 
@@ -376,17 +392,7 @@ function createUpgrades() {
 }
 
 function createDisplays() {
-  let resourceList = document.querySelector("#resource-list");
-
-  for (const [key, value] of Object.entries(resourceTypes)) {
-    resources[key] = 0;
-
-    let line = document.createElement("div");
-
-    line.id = "resource-" + key;
-
-    resourceList.appendChild(line);
-  }
+  // nop
 }
 
 function renderLine(line) {