Buildings have tooltips, and also have descriptions

constants.js

@@ -9,90 +9,105 @@ const buildings = {
   "micro": {
     "name": "Micro",
     "plural": "Micros",
+    "desc": "A tasty, squirmy treat.",
     "cost": 1e1,
     "prod": 1e-1/1
   },
   "anthro": {
     "name": "Anthro",
     "plural": "Anthros",
+    "desc": "Something more substantial to sate your hunger.",
     "cost": 1e2,
     "prod": 1e0/1.1
   },
   "car": {
     "name": "Car",
     "plural": "Cars",
+    "desc": "Crunchy shell, tasty center.",
     "cost": 1e3,
     "prod": 1e1/1.2
   },
   "bus": {
     "name": "Bus",
     "plural": "Buses",
+    "desc": "Probably the worst place to be when a macro is aroud.",
     "cost": 1e4,
     "prod": 1e2/1.3
   },
   "house": {
     "name": "House",
     "plural": "Houses",
+    "desc": "Home sweet home - but it doesn't taste sweet?",
     "cost": 1e5,
     "prod": 1e3/1.4
   },
   "apartment": {
     "name": "Apartment",
     "plural": "Apartments",
+    "desc": "More snacks, less packaging.",
     "cost": 1e6,
     "prod": 1e4/1.5
   },
   "block": {
     "name": "Block",
     "plural": "Blocks",
+    "desc": "A whole pile of buildings.",
     "cost": 1e7,
     "prod": 1e5/1.6
   },
   "town": {
     "name": "Town",
     "plural": "Towns",
+    "desc": "'Tourist trap' has never been this literal.",
     "cost": 1e8,
     "prod": 1e6/1.7
   },
   "city": {
     "name": "City",
     "plural": "Cities",
+    "desc": "Please no sitty on our city.",
     "cost": 1e9,
     "prod": 1e7/1.8
   },
   "metro": {
     "name": "Metropolis",
     "plural": "Metropolises",
+    "desc": "A big ol' city. Tasty, too.",
     "cost": 1e10,
     "prod": 1e8/1.9
   },
   "county": {
     "name": "County",
     "plural": "Counties",
+    "desc": "Why salt the land when you can slurp it?",
     "cost": 1e11,
     "prod": 1e9/2
   },
   "state": {
     "name": "State",
     "plural": "States",
+    "desc": "The United States is made up of...43 states - no, 42...",
     "cost": 1e12,
     "prod": 1e10/2.1
   },
   "country": {
     "name": "Country",
     "plural": "Countries",
+    "desc": "One nation, under paw.",
     "cost": 1e13,
     "prod": 1e11/2.2
   },
   "continent": {
     "name": "Continent",
     "plural": "Continents",
+    "desc": "Earth-shattering appetite!",
     "cost": 1e14,
     "prod": 1e12/2.3
   },
   "planet": {
     "name": "Planet",
     "plural": "Planets",
+    "desc": "Earth appetite!",
     "cost": 1e15,
     "prod": 1e13/2.4
   }

gorge.css

@@ -55,6 +55,43 @@ body.dark {
   overflow-y: scroll;
 }
 
+#building-tooltip {
+  position: fixed;
+  width: 400px;
+  background: #333;
+  display: none;
+  z-index: 1;
+  left: 0px;
+  top: 0px;
+}
+
+#building-tooltip-name {
+  font-size: 24px;
+  color: #eee;
+  margin: 10px;
+  top: 10px;
+  left: 10px;
+}
+
+#building-tooltip-desc {
+  font-size: 18px;
+  color: #bbb;
+  margin: 10px;
+  left: 10px;
+}
+
+#building-tooltip-cost {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+}
+
+#building-tooltip-prod {
+  font-size: 20px;
+  margin: 10px;
+}
+
 .building-button {
   position: relative;
   display: block;
@@ -89,13 +126,6 @@ body.dark {
   bottom: 15%;
 }
 
-.building-button .building-button-prod {
-  font-size: 16px;
-  position: absolute;
-  right: 10%;
-  bottom: 20px;
-}
-
 .building-button:hover {
   background-color: #333;
 }

gorge.html

@@ -28,9 +28,6 @@
     <div id="productivity"></div>
   </div>
   <button id="tasty-micro">Eat Micro</button>
-  <div id="buildings-area">
-    <div id="buildings" class="title">Buildings</div>
-  </div>
 
   <div id="upgrades-area">
     <div id="upgrades" class="title">Upgrades</div>
@@ -42,5 +39,14 @@
     </div>
     <div id="upgrades-list"></div>
   </div>
+  <div id="buildings-area">
+    <div id="buildings" class="title">Buildings</div>
+    <div id="building-tooltip">
+      <div id="building-tooltip-name"></div>
+      <div id="building-tooltip-desc"></div>
+      <div id="building-tooltip-cost"></div>
+      <div id="building-tooltip-prod"></div>
+    </div>
+  </div>
 
 </body>

gorge.js

@@ -91,7 +91,6 @@ function displayBuildings() {
 
     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";
-    document.querySelector("#building-" + key + " > .building-button-prod").innerText = Math.round(productivityMultiplierOf(key) * buildings[key].prod * 10) / 10 + " food/sec";
 
     if (costOfBuilding(key) > resources.food) {
       button.classList.add("building-button-disabled");
@@ -184,11 +183,6 @@ function initializeData() {
 }
 
 function registerListeners() {
-  document.querySelectorAll(".building-button").forEach(function(button) {
-    let id = button.id.replace("building-", "");
-    button.addEventListener("click", function() { buyBuilding(id); });
-  });
-
   document.querySelector("#tasty-micro").addEventListener("click", eatMicro);
 }
 
@@ -208,13 +202,14 @@ function createBuildings() {
     buttonName.classList.add("building-button-name");
     let buttonCost = document.createElement("div");
     buttonCost.classList.add("building-button-cost");
-    let buttonProd = document.createElement("div");
-    buttonProd.classList.add("building-button-prod");
-
 
     button.appendChild(buttonName);
     button.appendChild(buttonCost);
-    button.appendChild(buttonProd);
+
+    button.addEventListener("mousemove", function(e) { buildingTooltip(key, e); });
+    button.addEventListener("mouseleave", function() { buildingTooltipRemove(); });
+    button.addEventListener("click", function() { buyBuilding(key); });
+    button.addEventListener("click", function(e) { buildingTooltip(key, e); });
 
     container.appendChild(button);
   }
@@ -342,39 +337,57 @@ function renderPrereqs(prereqs) {
   return renderLines(list);
 }
 
+function fillTooltip(type, field, content) {
+  let item = document.querySelector("#" + type + "-tooltip-" + field);
+  if (typeof(content) === "string") {
+    item.innerText = content;
+  } else {
+    replaceChildren(item, content);
+  }
+}
+
 function upgradeTooltip(id, event) {
 
   let tooltip = document.querySelector("#upgrade-tooltip");
-
   tooltip.style.setProperty("display", "inline-block");
 
-  let tooltipDesc = document.querySelector("#upgrade-tooltip-desc");
-
-  tooltipDesc.innerText = upgrades[id].desc;
+  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));
+  fillTooltip("upgrade", "prereqs", renderPrereqs(upgrades[id].prereqs));
 
-  let tooltipEffect = document.querySelector("#upgrade-tooltip-effect");
+  let yOffset = tooltip.parentElement.getBoundingClientRect().y;
 
-  tooltipEffect.innerText = upgrade_types[upgrades[id].effect.type].desc(buildings[upgrades[id].effect.target].name);
+  let yTrans = Math.round(event.clientY - yOffset);
+  tooltip.style.setProperty("transform", "translate(-220px, " + yTrans + "px)");
+}
 
-  let tooltipCost = document.querySelector("#upgrade-tooltip-cost");
+function upgradeTooltipRemove() {
+  let tooltip = document.querySelector("#upgrade-tooltip");
 
-  replaceChildren(tooltipCost, renderCost(upgrades[id].cost));
+  tooltip.style.setProperty("display", "none");
+}
 
-  let tooltipPrereqs = document.querySelector("#upgrade-tooltip-prereqs");
+function buildingTooltip(id, event) {
 
-  replaceChildren(tooltipPrereqs, renderPrereqs(upgrades[id].prereqs));
+  let tooltip = document.querySelector("#building-tooltip");
+  tooltip.style.setProperty("display", "inline-block");
 
+  fillTooltip("building", "name", buildings[id].name);
+  fillTooltip("building", "desc", buildings[id].desc);
+  fillTooltip("building", "cost", costOfBuilding(id) + " food");
   let yOffset = tooltip.parentElement.getBoundingClientRect().y;
 
-  let yTrans = Math.round(event.clientY - yOffset);
-  tooltip.style.setProperty("transform", "translate(-220px, " + yTrans + "px)");
+  let xPos = tooltip.parentElement.getBoundingClientRect().x - 450;
+  let yPos = event.clientY;
+
+  tooltip.style.setProperty("transform", "translate(" + xPos + "px, " + yPos  + "px)")
 }
 
-function upgradeTooltipRemove() {
-  let tooltip = document.querySelector("#upgrade-tooltip");
+function buildingTooltipRemove() {
+  let tooltip = document.querySelector("#building-tooltip");
 
   tooltip.style.setProperty("display", "none");
-
 }
 
 window.onload = function() {