Upgrade for anthros, fixes to layout, micro upgrades buff clicks

constants.js

@@ -114,7 +114,7 @@ const upgrades = {
     "name": "Bigger Micros",
     "desc": "A macro micro? Certainly more filling.",
     "cost": {
-      "food": 100
+      "food": buildings.micro.cost * 5
     },
     "effect": {
       "type": "prod-2x",
@@ -130,7 +130,7 @@ const upgrades = {
     "name": "Beefy Micros",
     "desc": "25% more protein, 10% fewer carbs.",
     "cost": {
-      "food": 500
+      "food": buildings.micro.cost * 50
     },
     "effect": {
       "type": "prod-2x",
@@ -141,5 +141,21 @@ const upgrades = {
         "micro": 10
       }
     }
+  },
+  "anthro-prod-1": {
+    "name": "Willing Prey",
+    "desc": "Why bother chasing it down?",
+    "cost": {
+      "food": buildings.anthro.cost * 5
+    },
+    "effect": {
+      "type": "prod-2x",
+      "target": "anthro"
+    },
+    "prereqs": {
+      "buildings": {
+        "anthro": 1
+      }
+    }
   }
 }

gorge.css

@@ -122,37 +122,37 @@ body.dark {
 #upgrade-tooltip {
   position: absolute;
   width: 200px;
-  height: 300px;
-  background: #222;
+  height: 125%;
+  background: #333;
   display: none;
   z-index: 1;
   left: 0px;
   top: 0px;
-  border: 5px;
-  border-color: #fff;
 }
 
 #upgrade-tooltip-desc {
-  position:absolute;
-  top: 0px;
-  left: 0px;
+  font-size: 14px;
+  color: #bbb;
+  margin: 10px;
+  top: 50%;
+  left: 10px;
 }
 
 #upgrade-tooltip-effect {
-  position: absolute;
-  top: 50px;
+  font-size: 20px;
+  margin: 10px;
 }
 
 #upgrade-tooltip-cost {
   position: absolute;
-  right: 0px;
-  bottom: 0px;
+  right: 10px;
+  bottom: 10px;
 }
 
 #upgrade-tooltip-prereqs {
   position: absolute;
-  left: 0px;
-  bottom: 0px;
+  left: 10px;
+  bottom: 10px;
 }
 
 .cost-met {
@@ -174,6 +174,7 @@ body.dark {
 
 .upgrade-button-inactive {
   background-color: #222 !important;
+  color: #999 !important;
 }
 
 .upgrade-button-name {

gorge.html

@@ -35,8 +35,8 @@
   <div id="upgrades-area">
     <div id="upgrades" class="title">Upgrades</div>
     <div id="upgrade-tooltip">
-      <div id="upgrade-tooltip-desc"></div>
       <div id="upgrade-tooltip-effect"></div>
+      <div id="upgrade-tooltip-desc"></div>
       <div id="upgrade-tooltip-prereqs"></div>
       <div id="upgrade-tooltip-cost"></div>
     </div>

gorge.js

@@ -20,8 +20,8 @@ function calculateProductivity() {
 
 // here's where upgrades will go :3
 
-function productivityOf(type) {
-  let baseProd = buildings[type].prod;
+function productivityMultiplierOf(type) {
+  let base = 1;
 
   for (const [key, value] of Object.entries(upgrades)) {
     if (!ownedUpgrades[key]) {
@@ -31,11 +31,20 @@ function productivityOf(type) {
 
     if (value.effect.type == "prod-2x") {
       if (value.effect.target == type) {
-        baseProd *= 2;
+        base *= 2;
       }
     }
   }
-  return baseProd * belongings[type].count;
+
+  return base;
+}
+
+function productivityOf(type) {
+  let baseProd = buildings[type].prod;
+
+  let prod = baseProd * productivityMultiplierOf(type);
+
+  return prod * belongings[type].count;
 }
 
 function costOfBuilding(type) {
@@ -148,7 +157,7 @@ function buyUpgrade(id) {
 }
 
 function eatMicro() {
-  resources.food += 1;
+  resources.food += productivityMultiplierOf("micro");
 }
 // setup stuff lol
 
@@ -332,7 +341,7 @@ function upgradeTooltip(id, event) {
 
   let tooltip = document.querySelector("#upgrade-tooltip");
 
-  tooltip.style.setProperty("display", "block");
+  tooltip.style.setProperty("display", "inline-block");
 
   let tooltipDesc = document.querySelector("#upgrade-tooltip-desc");