Cache references to the building buttons

gorge.js

@@ -243,8 +243,11 @@ function renderResources() {
   return renderLines(list);
 }
 
+const buildingButtons = {}
+
 function displayBuildings() {
   const count = buildingCount();
+
   for (const [key, value] of Object.entries(belongings)) {
 
     if (!belongings[key].visible) {
@@ -256,23 +259,23 @@ function displayBuildings() {
         continue;
       }
       belongings[key].visible = true;
-      document.querySelector("#building-" + key).classList.remove("hidden");
+      let button = buildingButtons[key].button;
+      button.classList.remove("hidden");
     }
 
-    let button = document.querySelector("#building-" + key);
-
-    let name = document.querySelector("#building-" + key + " > .building-button-name");
-    let cost = document.querySelector("#building-" + key + " > .building-button-cost");
+    let button = buildingButtons[key].button;
+    let name = buildingButtons[key].name;
+    let cost = buildingButtons[key].cost;
 
     const buildingCost = costOfBuilding(key, count);
 
     name.innerText = value.count + " " + (value.count == 1 ? buildings[key].name : buildings[key].plural);
     cost.innerText = render(buildingCost.food) + " food";
 
-    if (canAfford(buildingCost)) {
+    if (canAfford(buildingCost) && button.classList.contains("building-button-disabled")) {
       button.classList.remove("building-button-disabled");
       cost.classList.add("building-button-cost-valid");
-    } else {
+    } else if (!canAfford(buildingCost) && !button.classList.contains("building-button-disabled")) {
       button.classList.add("building-button-disabled");
       cost.classList.add("building-button-cost-invalid");
     }
@@ -417,10 +420,27 @@ function setup() {
   registerListeners();
   load();
   unlockAtStart();
+  initializeCaches();
   updateAll();
 
 }
 
+function initializeCaches() {
+  for (const [key, value] of Object.entries(belongings)) {
+
+    let button = document.querySelector("#building-" + key);
+    let name = document.querySelector("#building-" + key + " > .building-button-name");
+    let cost = document.querySelector("#building-" + key + " > .building-button-cost");
+
+    buildingButtons[key] = {
+      button: button,
+      name: name,
+      cost: cost
+    }
+  }
+
+}
+
 function unlockAtStart() {
   unlockBuilding("micro");