More formatting work; resources are listed automatically

gorge.css

@@ -7,6 +7,10 @@ body.dark {
   color: #eee;
 }
 
+.hidden {
+  display: none !important;
+}
+
 #tasty-micro {
   color: #ddd;
   background-color: #211;
@@ -37,6 +41,7 @@ body.dark {
   width: 20%;
   left: 0%;
   top: 10%;
+  height: 90%;
   margin: auto;
 }
 
@@ -45,7 +50,8 @@ body.dark {
   width: 20%;
   right: 5%;
   top: 10%;
-  height: 100%;
+  height: 90%;
+  overflow-x: hidden;
   overflow-y: scroll;
 }
 
@@ -102,6 +108,12 @@ body.dark {
   top: 10%;
 }
 
+.title {
+  font-size: 48px;
+  height: 10%;
+  text-align: center;
+}
+
 #upgrades-list {
   display: flex;
   flex-wrap: wrap;

gorge.html

@@ -22,17 +22,17 @@
     vidya gaem
   </div>
   <div id="resources-area">
-    <div id="resources">Resources</div>
-    <div id="resource-food">Food: 0</div>
+    <div id="resources" class="title">Resources</div>
+    <div id="resource-list"></div>
     <div id="productivity"></div>
   </div>
   <button id="tasty-micro">Eat Micro</button>
   <div id="buildings-area">
-    <div id="buildings">Buildings</div>
+    <div id="buildings" class="title">Buildings</div>
   </div>
 
   <div id="upgrades-area">
-    <div id="upgrades">Upgrades</div>
+    <div id="upgrades" class="title">Upgrades</div>
     <div id="upgrade-tooltip">
       <div id="upgrade-tooltip-desc"></div>
       <div id="upgrade-tooltip-effect"></div>

gorge.js

@@ -4,9 +4,7 @@ let belongings = {};
 
 let ownedUpgrades = {};
 
-let resources = {
-  "food": 0
-};
+let resources = {};
 
 let updateRate = 60;
 
@@ -23,6 +21,17 @@ function calculateProductivity() {
 function productivityOf(type) {
   let baseProd = buildings[type].prod;
 
+  for (const [key, value] of Object.entries(upgrades)) {
+    if (!ownedUpgrades[key]) {
+      continue;
+    }
+    console.log(value);
+    if (value.effect.type == "prod-2x") {
+      if (value.effect.target == key) {
+        baseProd *= 2;
+      }
+    }
+  }
   return baseProd * belongings[type].count;
 }
 
@@ -66,19 +75,20 @@ function displayResources() {
 
 function displayBuildings() {
   for (const [key, value] of Object.entries(belongings)) {
+    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);
     document.querySelector("#building-" + key + " > .building-button-cost").innerText = costOfBuilding(key) + " food";
 
     if (costOfBuilding(key) > resources.food) {
-      document.querySelector("#building-" + key).classList.add("building-button-disabled");
+      button.classList.add("building-button-disabled");
     } else {
-      document.querySelector("#building-" + key).classList.remove("building-button-disabled");
+      button.classList.remove("building-button-disabled");
     }
   }
 }
 
 function canAfford(cost) {
-  console.log(cost)
   for (const [resource, amount] of Object.entries(cost)) {
     if (resources[resource] < amount) {
       return false;
@@ -136,6 +146,7 @@ function eatMicro() {
 function setup() {
   initializeData();
   createButtons();
+  createDisplays();
   registerListeners();
 
 }
@@ -184,6 +195,39 @@ function createBuildings() {
   }
 }
 
+function createUpgrades() {
+  let container = document.querySelector("#upgrades-list");
+
+  for (const [key, value] of Object.entries(upgrades)) {
+    let button = document.createElement("div");
+    button.classList.add("upgrade-button");
+    button.id = "upgrade-" + key;
+    let buttonName = document.createElement("div");
+    buttonName.classList.add("upgrade-button-name");
+    buttonName.innerText = value.name;
+    button.appendChild(buttonName);
+
+    button.addEventListener("mousemove", function(e) { upgradeTooltip(key, e); });
+    button.addEventListener("mouseleave", function() { upgradeTooltipRemove(); });
+    button.addEventListener("click", function() { buyUpgrade(key); });
+
+    container.appendChild(button);
+  }
+}
+
+function createDisplays() {
+  let resourceList = document.querySelector("#resource-list");
+
+  for (const [key, value] of Object.entries(resourceTypes)) {
+    resources[key] = 0;
+
+    let line = document.createElement("div");
+
+    line.id = "resource-" + key;
+
+    resourceList.appendChild(line);
+  }
+}
 function renderCost(cost) {
   let list = [];
 
@@ -225,26 +269,6 @@ function upgradeTooltipRemove() {
 
 }
 
-function createUpgrades() {
-  let container = document.querySelector("#upgrades-list");
-
-  for (const [key, value] of Object.entries(upgrades)) {
-    let button = document.createElement("div");
-    button.classList.add("upgrade-button");
-    button.id = "upgrade-" + key;
-    let buttonName = document.createElement("div");
-    buttonName.classList.add("upgrade-button-name");
-    buttonName.innerText = value.name;
-    button.appendChild(buttonName);
-
-    button.addEventListener("mousemove", function(e) { upgradeTooltip(key, e); });
-    button.addEventListener("mouseleave", function() { upgradeTooltipRemove(); });
-    button.addEventListener("click", function() { buyUpgrade(key); });
-
-    container.appendChild(button);
-  }
-}
-
 window.onload = function() {
   setup();