Unmet upgrade costs gray out the button

gorge.css

@@ -107,6 +107,10 @@ body.dark {
   -moz-user-select: none;
 }
 
+.upgrade-button-inactive {
+  background-color: #222 !important;
+}
+
 .upgrade-button-name {
   position: relative;
   text-align: center;

gorge.js

@@ -49,6 +49,7 @@ function updateResources() {
   addResources();
   displayResources();
   displayBuildings();
+  displayUpgrades();
 
   setTimeout(updateResources, 1000/updateRate);
 }
@@ -68,6 +69,26 @@ function displayBuildings() {
   }
 }
 
+function displayUpgrades() {
+  for (const [key, value] of Object.entries(upgrades)) {
+    let button = document.querySelector("#upgrade-" + key);
+
+    let valid = true;
+    for (const [resource, amount] of Object.entries(upgrades[key].cost)) {
+      if (resources[resource] < amount) {
+        valid = false;
+        break;
+      }
+    }
+
+    if (valid) {
+      button.classList.remove("upgrade-button-inactive");
+    } else {
+      button.classList.add("upgrade-button-inactive");
+    }
+  }
+}
+
 function eatMicro() {
   resources.food += 1;
 }
@@ -80,7 +101,6 @@ function setup() {
   createButtons();
   registerListeners();
 
-  console.log(belongings)
 }
 
 function initializeData() {
@@ -134,8 +154,6 @@ function renderCost(cost) {
 }
 
 function upgradeTooltip(id, event) {
-  console.log(upgrades[id].desc);
-  console.log(event.clientX, event.clientY);
 
   let tooltip = document.querySelector("#upgrade-tooltip");
 
@@ -172,7 +190,7 @@ function createUpgrades() {
   for (const [key, value] of Object.entries(upgrades)) {
     let button = document.createElement("div");
     button.classList.add("upgrade-button");
-    button.id = "building-" + key;
+    button.id = "upgrade-" + key;
     let buttonName = document.createElement("div");
     buttonName.classList.add("upgrade-button-name");
     buttonName.innerText = value.name;