Upgrades have a name now, and expand better

constants.js

@@ -172,5 +172,21 @@ const upgrades = {
         "anthro": 1
       }
     }
+  },
+  "anthro-prod-2": {
+    "name": "Mesmerized Prey",
+    "desc": "Why bother walking over to it?",
+    "cost": {
+      "food": buildings.anthro.cost * 50
+    },
+    "effect": {
+      "type": "prod-2x",
+      "target": "anthro"
+    },
+    "prereqs": {
+      "buildings": {
+        "anthro": 10
+      }
+    }
   }
 }

gorge.css

@@ -165,7 +165,7 @@ body.dark {
 #upgrade-tooltip {
   position: absolute;
   width: 200px;
-  height: 125%;
+  padding-bottom: 50px;
   background: #333;
   display: none;
   z-index: 1;
@@ -173,12 +173,18 @@ body.dark {
   top: 0px;
 }
 
+#upgrade-tooltip-name {
+  font-size: 24px;
+  color: #eee;
+  margin: 10px;
+  top: 50%;
+  left: 10px;
+}
+
 #upgrade-tooltip-desc {
   font-size: 14px;
   color: #bbb;
   margin: 10px;
-  top: 50%;
-  left: 10px;
 }
 
 #upgrade-tooltip-effect {

gorge.html

@@ -32,6 +32,7 @@
   <div id="upgrades-area">
     <div id="upgrades" class="title">Upgrades</div>
     <div id="upgrade-tooltip">
+      <div id="upgrade-tooltip-name"></div>
       <div id="upgrade-tooltip-effect"></div>
       <div id="upgrade-tooltip-desc"></div>
       <div id="upgrade-tooltip-prereqs"></div>

gorge.js

@@ -351,6 +351,7 @@ function upgradeTooltip(id, event) {
   let tooltip = document.querySelector("#upgrade-tooltip");
   tooltip.style.setProperty("display", "inline-block");
 
+  fillTooltip("upgrade", "name", upgrades[id].name);
   fillTooltip("upgrade", "desc", upgrades[id].desc);
   fillTooltip("upgrade", "effect", upgrade_types[upgrades[id].effect.type].desc(buildings[upgrades[id].effect.target].name));
   fillTooltip("upgrade", "cost", renderCost(upgrades[id].cost));