Generating upgrade buttons

constants.js

@@ -33,7 +33,7 @@ const buildings = {
   }
 }
 
-const upgrade_descs = {
+const upgrade_types = {
   "prod-2x": {
     "apply": function(productivity) {
       return productivity * 2;
@@ -44,7 +44,7 @@ const upgrade_descs = {
   }
 }
 
-const upgrade_info = {
+const upgrades = {
   "micro-prod-1": {
     "name": "Bigger Micros",
     "desc": "A macro micro? Certainly more filling.",

gorge.css

@@ -7,10 +7,6 @@ body.dark {
   color: #eee;
 }
 
-#buildings-area {
-  width: 20%;
-}
-
 #tasty-micro {
   color: #ddd;
   background-color: #211;
@@ -18,15 +14,22 @@ body.dark {
   height: 75px;
 }
 
+#buildings-area {
+  position: absolute;
+  width: 20%;
+  right: 5%;
+}
+
 .building-button {
   display: block;
   width: 100%;
-  height: 150px;
+  height: 75px;
   background-color: #222;
   color: #eee;
   border: 5px;
   border-color: #666;
   border-style: solid;
+  user-select: none;
 }
 
 .building-button .building-button-name {
@@ -34,13 +37,15 @@ body.dark {
   position: relative;
   left: 25%;
   top: 10%;
+  user-select: none;
+  -moz-user-select: none;
 }
 
 .building-button .building-button-cost {
   font-size: 18px;
   position: relative;
   left: 25%;
-  top: 40%;
+  top: 20px;
 }
 
 .building-button:hover {
@@ -51,3 +56,30 @@ body.dark {
   border-color: #333;
   background-color: #111;
 }
+
+#upgrades-area {
+  position: absolute;
+  width: 20%;
+  right: 35%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.upgrade-button {
+  width: 75px;
+  height: 75px;
+  display: block;
+  background-color: #444;
+  user-select: none;
+  -moz-user-select: none;
+}
+
+.upgrade-button-name {
+  position: relative;
+  text-align: center;
+  width: 75px;
+  height: 75px
+  top: 50%;
+  left: 50%;
+  margin: 18.75px -37.5px;
+}

gorge.js

@@ -2,7 +2,7 @@
 
 let belongings = {};
 
-let upgrades = [];
+let ownedUpgrades = [];
 
 let resources = {
   "food": 0
@@ -108,7 +108,6 @@ 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;
@@ -125,7 +124,19 @@ function createBuildings() {
 }
 
 function createUpgrades() {
-  // wat
+  let container = document.querySelector("#upgrades-area");
+
+  for (const [key, value] of Object.entries(upgrades)) {
+    let button = document.createElement("div");
+    button.classList.add("upgrade-button");
+    button.id = "building-" + key;
+    let buttonName = document.createElement("div");
+    buttonName.classList.add("upgrade-button-name");
+    buttonName.innerText = value.name;
+    button.appendChild(buttonName);
+
+    container.appendChild(button);
+  }
 }
 
 window.onload = function() {