Display resources without creating new html elements every tick

gorge.js

@@ -225,7 +225,10 @@ function addResources(delta) {
 function displayResources() {
   document.title = "Gorge - " + round(resources.food) + " food";
 
-  replaceChildren(document.querySelector("#resource-list"), renderResources());
+  Object.keys(resources).forEach(key => {
+    cache.resourceLabels[key].quantity.innerText = render(resources[key]) + " " + resourceTypes[key].name;
+    cache.resourceLabels[key].rate.innerText = render(currentProductivity[key]) + " " + resourceTypes[key].name + "/sec";
+  })
 }
 
 function renderResources() {
@@ -479,6 +482,17 @@ function initializeCaches() {
   });
 
   cache.upgradeButtons = upgradeButtons;
+
+  const resourceLabels = {};
+
+  Object.keys(resourceTypes).forEach(key => {
+    resourceLabels[key] = {
+      quantity: document.querySelector("#resource-quantity-" + key),
+      rate: document.querySelector("#resource-rate-" + key)
+    }
+  });
+
+  cache.resourceLabels = resourceLabels;
 }
 
 const states = {};
@@ -739,7 +753,18 @@ function createUpgrades() {
 }
 
 function createDisplays() {
-  // nop
+  const resourceList = document.querySelector("#resource-list");
+
+  Object.keys(resourceTypes).forEach(key => {
+    const quantity = document.createElement("div");
+    const rate = document.createElement("div");
+    quantity.classList.add("resource-quantity");
+    quantity.id = "resource-quantity-" + key;
+    rate.classList.add("resource-rate");
+    rate.id = "resource-rate-" + key;
+    resourceList.appendChild(quantity);
+    resourceList.appendChild(rate);
+  })
 }
 
 function renderLine(line) {