Building tooltips show prod stats

gorge.css

@@ -90,7 +90,8 @@ body.dark {
 }
 
 #building-tooltip-prod {
-  font-size: 20px;
+  font-size: 14px;
+  color: #ccc;
   margin: 10px;
 }
 

gorge.js

@@ -70,6 +70,8 @@ function buyBuilding(type) {
     resources.food -= cost;
   }
 
+  updateProductivity();
+
 }
 // update stuff
 
@@ -495,6 +497,29 @@ function upgradeTooltipRemove() {
   tooltip.style.setProperty("display", "none");
 }
 
+function prodSummary(id) {
+  let list = [];
+
+  list.push(
+    {"text": "Each " + buildings[id].name + " produces " + round(productivityMultiplierOf(id) * buildings[id].prod,1) + " food/sec"}
+  );
+
+  list.push(
+    {"text": "Your " + belongings[id].count + " " + (belongings[id].count == 1 ? buildings[id].name + " is": buildings[id].plural + " are") + " producing " + round(productivityOf(id),1) + " food/sec"}
+  );
+
+  let percentage = round(100 * productivityOf(id) / currentProductivity["food"], 2);
+
+  if (isNaN(percentage)) {
+    percentage = 0;
+  }
+  list.push(
+    {"text": "(" + percentage + "% of all food)"}
+  );
+
+  return renderLines(list);
+}
+
 function buildingTooltip(id, event) {
 
   let tooltip = document.querySelector("#building-tooltip");
@@ -503,6 +528,8 @@ function buildingTooltip(id, event) {
   fillTooltip("building", "name", buildings[id].name);
   fillTooltip("building", "desc", buildings[id].desc);
   fillTooltip("building", "cost", costOfBuilding(id) + " food");
+  fillTooltip("building", "prod", prodSummary(id));
+
   let yOffset = tooltip.parentElement.getBoundingClientRect().y;
 
   let xPos = tooltip.parentElement.getBoundingClientRect().x - 450;