From e1a35da3d5bd0ad48c4e56f5f2cdcedbba921bec Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Tue, 24 Dec 2019 19:51:40 -0600
Subject: [PATCH] Display resources without creating new html elements every
 tick

---
 gorge.js | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/gorge.js b/gorge.js
index 416921c..8efdec0 100644
--- a/gorge.js
+++ b/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) {