Buttons are now generated live

constants.js

@@ -25,6 +25,11 @@ const buildings = {
     "name": "House",
     "cost": 1e5,
     "prod": 100
+  },
+  "universe": {
+    "name": "Universe",
+    "cost": 1e15,
+    "prod": 1e14
   }
 }
 

gorge.html

@@ -21,23 +21,13 @@
   <div id="resources">Resources</div>
   <div id="resource-food">Food: 0</div>
   <button id="tasty-micro">Eat Micro</button>
+
   <div id="buildings-area">
     <div id="buildings">Buildings</div>
-    <div class="building-button" id="building-micro">
-      <div class="building-button-name">Tasty micro</div>
-      <div class="building-button-cost">potatoes?</div>
-    </div>
-    <div class="building-button" id="building-anthro">
-      <div class="building-button-name">Tasty micro</div>
-      <div class="building-button-cost">potatoes?</div></div>
-    <div class="building-button" id="building-car">
-      <div class="building-button-name">Tasty micro</div>
-      <div class="building-button-cost">potatoes?</div></div>
-    <div class="building-button" id="building-train">
-      <div class="building-button-name">Tasty micro</div>
-      <div class="building-button-cost">potatoes?</div></div>
-    <div class="building-button" id="building-house">
-      <div class="building-button-name">Tasty micro</div>
-      <div class="building-button-cost">potatoes?</div></div>
   </div>
+
+  <div id="upgrades-area">
+    <div id="upgrades">Upgrades</div>
+  </div>
+  
 </body>

gorge.js

@@ -77,6 +77,7 @@ function eatMicro() {
 
 function setup() {
   initializeData();
+  createButtons();
   registerListeners();
 
   console.log(belongings)
@@ -98,6 +99,35 @@ function registerListeners() {
   document.querySelector("#tasty-micro").addEventListener("click", eatMicro);
 }
 
+function createButtons() {
+  createBuildings();
+  createUpgrades();
+}
+
+function createBuildings() {
+  let container = document.querySelector("#buildings-area");
+
+  for (const [key, value] of Object.entries(buildings)) {
+    console.log(key, value)
+    let button = document.createElement("div");
+    button.classList.add("building-button");
+    button.id = "building-" + key;
+    let buttonName = document.createElement("div");
+    buttonName.classList.add("building-button-name");
+    let buttonCost = document.createElement("div");
+    buttonCost.classList.add("building-button-cost");
+
+    button.appendChild(buttonName);
+    button.appendChild(buttonCost);
+
+    container.appendChild(button);
+  }
+}
+
+function createUpgrades() {
+  // wat
+}
+
 window.onload = function() {
   setup();