Button status: fancier. Updated cost growth to 15% each; costs are rounded

constants.js

@@ -27,3 +27,27 @@ const buildings = {
     "prod": 100
   }
 }
+
+const upgrade_descs = {
+  "prod-2x": {
+    "apply": function(productivity) {
+      return productivity * 2;
+    },
+    "desc": function(name) {
+      return "2x food production from " + name;
+    }
+  }
+}
+
+const upgrade_info = {
+  "micro-prod-1": {
+    "name": "Bigger Micros",
+    "desc": "A macro micro? Certainly more filling.",
+    "effect": "prod-2x"
+  },
+  "micro-prod-2": {
+    "name": "Beefy Micros",
+    "desc": "25% more protein, 10% fewer carbs.",
+    "effect": "prod-2x"
+  }
+}

design/overview.md

@@ -19,7 +19,7 @@ Each tier of building:
 
 The cost for a building is:
 
-$$1.02^{\textrm{count}} \times \textrm{base cost}$$
+$$1.15^{\textrm{count}} \times \textrm{base cost}$$
 
 ### Upgrades
 

gorge.css

@@ -17,14 +17,37 @@ body.dark {
   width: 100px;
   height: 75px;
 }
-#buildings-area button {
+
+.building-button {
   display: block;
   width: 100%;
-  height: 50px;
+  height: 150px;
   background-color: #222;
   color: #eee;
+  border: 5px;
+  border-color: #666;
+  border-style: solid;
+}
+
+.building-button .building-button-name {
+  font-size: 24px;
+  position: relative;
+  left: 25%;
+  top: 10%;
 }
 
-#buildings-area button:not(:last-child) {
+.building-button .building-button-cost {
+  font-size: 18px;
+  position: relative;
+  left: 25%;
+  top: 40%;
+}
+
+.building-button:hover {
+  background-color: #333;
+}
 
+.building-button:active {
+  border-color: #333;
+  background-color: #111;
 }

gorge.html

@@ -23,10 +23,21 @@
   <button id="tasty-micro">Eat Micro</button>
   <div id="buildings-area">
     <div id="buildings">Buildings</div>
-    <button class="building-button" id="building-micro"></button>
-    <button class="building-button" id="building-anthro"></button>
-    <button class="building-button" id="building-car"></button>
-    <button class="building-button" id="building-train"></button>
-    <button class="building-button" id="building-house"></button>
+    <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>
 </body>

gorge.js

@@ -1,10 +1,12 @@
 "use strict";
 
-let belongings = {}
+let belongings = {};
+
+let upgrades = [];
 
 let resources = {
   "food": 0
-}
+};
 
 let updateRate = 60;
 
@@ -27,9 +29,9 @@ function productivityOf(type) {
 function costOf(type) {
   let baseCost =  buildings[type].cost
 
-  let countCost = baseCost * Math.pow(1.02, belongings[type].count);
+  let countCost = baseCost * Math.pow(1.15, belongings[type].count);
 
-  return countCost;
+  return Math.round(countCost);
 }
 
 function buyBuilding(type) {
@@ -61,7 +63,8 @@ function displayResources() {
 
 function displayBuildings() {
   for (const [key, value] of Object.entries(belongings)) {
-    document.getElementById("building-" + key).innerText = buildings[key].name + ": " + belongings[key].count;
+    document.querySelector("#building-" + key + " > .building-button-name").innerText = value.count + " " + buildings[key].name + (value.count == 1 ? "" : "s");
+    document.querySelector("#building-" + key + " > .building-button-cost").innerText = costOf(key) + " food";
   }
 }