Added popup when clicking. Fixed click bonus not updating on purchase

constants.js

@@ -417,22 +417,22 @@ let prodAllUpgradeText = [
 const clickUpgradeText = [
   {
     "name": "Grabby Hands",
-    "desc": ""
+    "desc": "Gathers prey, opens rooftops"
   },
   {
-    "name": "",
-    "desc": ""
+    "name": "Long Tongue",
+    "desc": "Catches stragglers, tastes architecture"
   },
   {
-    "name": "",
-    "desc": ""
+    "name": "Sharp Eyes",
+    "desc": "Spots snacks, probably unblinking"
   },
   {
-    "name": "",
-    "desc": ""
+    "name": "Keen Nose",
+    "desc": "Sniffs meals, savors scents"
   },
   {
-    "name": "",
-    "desc": ""
+    "name": "Sensitive Ears",
+    "desc": "Hears screams, finds leftovers"
   },
 ]

gorge.css

@@ -255,3 +255,19 @@ button {
   left: 50%;
   margin: -25px -50px;
 }
+
+.click-popup {
+  position: fixed;
+  animation: click-popup 2s linear;
+}
+
+@keyframes click-popup {
+  0% {
+    transform: translate(0px, 0px);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0px, -200px);
+    opacity: 0;
+  }
+}

gorge.js

@@ -78,6 +78,7 @@ function buyBuilding(type) {
   }
 
   updateProductivity();
+  updateClickBonus();
 
 }
 // update stuff
@@ -235,8 +236,11 @@ function buyUpgrade(id) {
 }
 
 function eatMicro() {
-  resources.food += productivityMultiplierOf("micro") + clickBonus;
+  const add = productivityMultiplierOf("micro") + clickBonus;
+  resources.food += add;
+  return add;
 }
+
 // setup stuff lol
 
 // we'll initialize the dict of buildings we can own
@@ -316,7 +320,10 @@ function initializeData() {
 }
 
 function registerListeners() {
-  document.querySelector("#tasty-micro").addEventListener("click", eatMicro);
+  document.querySelector("#tasty-micro").addEventListener("click", (e) => {
+    const add = eatMicro();
+    clickPopup("+" + round(add, 1) + " food", [e.clientX, e.clientY]);
+  });
 
   document.querySelector("#save").addEventListener("click", save);
 
@@ -532,6 +539,24 @@ function renderEffects(effectList) {
   return renderLines(list);
 }
 
+function clickPopup(text, location) {
+  const div = document.createElement("div");
+  div.textContent = text;
+
+  div.classList.add("click-popup");
+
+  div.style.left = location[0] + "px";
+  div.style.top = location[1] + "px";
+
+  const body = document.querySelector("body");
+
+  body.appendChild(div);
+
+  setTimeout(() => {
+    body.removeChild(div);
+  }, 2000);
+}
+
 function fillTooltip(type, field, content) {
   let item = document.querySelector("#" + type + "-tooltip-" + field);
   if (typeof(content) === "string") {