Upgrades require each other. Only reachable ones are shown

constants.js

@@ -154,7 +154,10 @@ const upgrades = {
     "prereqs": {
       "buildings": {
         "micro": 10
-      }
+      },
+      "upgrades": [
+        "micro-prod-1"
+      ]
     }
   },
   "anthro-prod-1": {
@@ -186,7 +189,10 @@ const upgrades = {
     "prereqs": {
       "buildings": {
         "anthro": 10
-      }
+      },
+      "upgrades": [
+        "anthro-prod-1"
+      ]
     }
   }
 }

gorge.js

@@ -66,13 +66,13 @@ function buyBuilding(type) {
 }
 // update stuff
 
-function updateResources() {
+function updateDisplay() {
   addResources();
   displayResources();
   displayBuildings();
   displayUpgrades();
 
-  setTimeout(updateResources, 1000/updateRate);
+  setTimeout(updateDisplay, 1000/updateRate);
 }
 
 function addResources() {
@@ -87,6 +87,17 @@ function displayResources() {
 
 function displayBuildings() {
   for (const [key, value] of Object.entries(belongings)) {
+
+    if (!belongings[key].visible) {
+      if (resources.food * 10 >= costOfBuilding(key)) {
+        unlockBuilding(key);
+      } else {
+        continue;
+      }
+        belongings[key].visible = true;
+        document.querySelector("#building-" + key).classList.remove("hidden");
+    }
+
     let button = document.querySelector("#building-" + key);
 
     document.querySelector("#building-" + key + " > .building-button-name").innerText = value.count + " " + (value.count == 1 ? buildings[key].name : buildings[key].plural);
@@ -124,6 +135,11 @@ function displayUpgrades() {
       button.style.display = "none";
       continue;
     }
+    if (upgradeReachable(id)) {
+      button.classList.remove("hidden");
+    } else {
+      button.classList.add("hidden");
+    }
     if (upgradeAvailable(id)) {
       button.classList.remove("upgrade-button-inactive");
     } else {
@@ -168,13 +184,24 @@ function setup() {
   createButtons();
   createDisplays();
   registerListeners();
+  unlockAtStart();
+
+}
 
+function unlockAtStart() {
+  unlockBuilding("micro");
+}
+
+function unlockBuilding(id) {
+  belongings[id].visible = true;
+  document.querySelector("#building-" + id).classList.remove("hidden");
 }
 
 function initializeData() {
   for (const [key, value] of Object.entries(buildings)) {
     belongings[key] = {};
     belongings[key].count = 0;
+    belongings[key].visible = false;
   }
 
   for (const [key, value] of Object.entries(upgrades)) {
@@ -197,6 +224,7 @@ function createBuildings() {
   for (const [key, value] of Object.entries(buildings)) {
     let button = document.createElement("div");
     button.classList.add("building-button");
+    button.classList.add("hidden");
     button.id = "building-" + key;
     let buttonName = document.createElement("div");
     buttonName.classList.add("building-button-name");
@@ -215,11 +243,39 @@ function createBuildings() {
   }
 }
 
-function upgradeAvailable(id) {
+// do we have previous techs and at least one of each building?
+
+function upgradeReachable(id) {
+
   if (ownedUpgrades[id]) {
     return false;
   }
 
+  for (const [type, reqs] of Object.entries(upgrades[id].prereqs)) {
+    if (type == "buildings") {
+      for (const [building, amount] of Object.entries(reqs)) {
+        if (belongings[building].count == 0) {
+          return false;
+        }
+      }
+    }
+    else if (type == "upgrades") {
+      for (let upgrade of reqs) {
+        if (!ownedUpgrades[upgrade]) {
+          return false;
+        }
+      }
+    }
+  }
+
+  return true;
+}
+function upgradeAvailable(id) {
+
+  if (!upgradeReachable(id)) {
+    return false;
+  }
+
   if (!canAfford(upgrades[id].cost)) {
     return false;
   }
@@ -246,6 +302,7 @@ function createUpgrades() {
 
     let button = document.createElement("div");
     button.classList.add("upgrade-button");
+    button.classList.add("hidden");
     button.id = "upgrade-" + key;
     let buttonName = document.createElement("div");
     buttonName.classList.add("upgrade-button-name");
@@ -394,5 +451,5 @@ function buildingTooltipRemove() {
 window.onload = function() {
   setup();
 
-  setTimeout(updateResources, 1000/updateRate);
+  setTimeout(updateDisplay, 1000/updateRate);
 }