Made the popups prettier

gorge.css

@@ -256,18 +256,44 @@ button {
   margin: -25px -50px;
 }
 
-.click-popup {
+.click-popup-food {
+  pointer-events: none;
+  transform-origin: -100% 50%;
+  text-align: center;
+  position: fixed;
+  animation: click-popup-food 2s linear;
+  animation-fill-mode: both;
+  font-size: 36px;
+}
+
+.click-popup-gulp {
+  pointer-events: none;
+  transform-origin: -100% 50%;
+  text-align: center;
   position: fixed;
-  animation: click-popup 2s linear;
+  animation: click-popup-gulp 2s linear;
+  animation-fill-mode: both;
+  font-size: 36px;
+}
+
+@keyframes click-popup-food {
+  0% {
+    transform: translate(0px, 0px) scale(1, 1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0px, -200px) scale(0.5, 0.5);
+    opacity: 0;
+  }
 }
 
-@keyframes click-popup {
+@keyframes click-popup-gulp {
   0% {
-    transform: translate(0px, 0px);
+    transform: translate(0px, 0px) scale(1, 1);
     opacity: 1;
   }
   100% {
-    transform: translate(0px, -200px);
+    transform: translate(0px, 200px) scale(0.5, 0.5);
     opacity: 0;
   }
 }

gorge.js

@@ -322,7 +322,10 @@ function initializeData() {
 function registerListeners() {
   document.querySelector("#tasty-micro").addEventListener("click", (e) => {
     const add = eatMicro();
-    clickPopup("+" + round(add, 1) + " food", [e.clientX, e.clientY]);
+    const text = "+" + round(add, 1) + " food";
+    const gulp = "*glp*";
+    clickPopup(text, "food", [e.clientX, e.clientY]);
+    clickPopup(gulp, "gulp", [e.clientX, e.clientY]);
   });
 
   document.querySelector("#save").addEventListener("click", save);
@@ -539,11 +542,11 @@ function renderEffects(effectList) {
   return renderLines(list);
 }
 
-function clickPopup(text, location) {
+function clickPopup(text, type, location) {
   const div = document.createElement("div");
   div.textContent = text;
 
-  div.classList.add("click-popup");
+  div.classList.add("click-popup-" + type);
 
   div.style.left = location[0] + "px";
   div.style.top = location[1] + "px";