Animate upgrade/building buttons a bit. Show text when buying upgrades

gorge.css

@@ -166,8 +166,16 @@ button {
   color: #1a1;
 }
 
-.building-button:hover {
-  background-color: #333;
+#buildings-area:hover > #buildings:hover ~ .building-button:not(:hover) {
+  opacity: 1;
+}
+
+#buildings-area:hover > .building-button:hover {
+  opacity: 1;
+}
+
+#buildings-area:hover > .building-button:not(:hover) {
+  opacity: 0.6;
 }
 
 .building-button-disabled:hover {
@@ -265,6 +273,11 @@ button {
   margin: 10px;
   display: block;
   background-color: #444;
+  transition: 0.2s;
+}
+
+.upgrade-button:hover {
+  transform: scale(1.25, 1.25);
 }
 
 @media (max-aspect-ratio: 1/1) {
@@ -315,6 +328,17 @@ button {
   --target: 200px;
 }
 
+.click-popup-upgrade {
+  pointer-events: none;
+  transform-origin: -50% 50%;
+  text-align: center;
+  position: fixed;
+  animation: click-popup-upgrade 2s linear;
+  animation-fill-mode: both;
+  font-size: 36px;
+  --target: -200px;
+}
+
 @keyframes click-popup-food {
   0% {
     transform: translate(0px, 0px) scale(1, 1);
@@ -337,6 +361,17 @@ button {
   }
 }
 
+@keyframes click-popup-upgrade {
+  0% {
+    transform: translate(0px, 0px) scale(1, 1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(var(--target), 200px) scale(0.5, 0.5);
+    opacity: 0;
+  }
+}
+
 
 
 div::-webkit-scrollbar {

gorge.js

@@ -224,7 +224,7 @@ function updateClickBonus() {
   clickBonus = bonus;
 }
 
-function buyUpgrade(id) {
+function buyUpgrade(id, e) {
   if (ownedUpgrades[id]) {
     return;
   }
@@ -239,6 +239,10 @@ function buyUpgrade(id) {
 
   ownedUpgrades[id] = true;
 
+  let text = "Bought " + upgrade.name + "!";
+
+  clickPopup(text, "upgrade", [e.clientX, e.clientY]);
+
   updateProductivity();
   updateClickBonus();
 }
@@ -451,7 +455,7 @@ function createUpgrades() {
 
     button.addEventListener("mousemove", function(e) { upgradeTooltip(key, e); });
     button.addEventListener("mouseleave", function() { upgradeTooltipRemove(); });
-    button.addEventListener("click", function() { buyUpgrade(key); });
+    button.addEventListener("click", function(e) { buyUpgrade(key, e); });
 
     container.appendChild(button);
   }
@@ -563,6 +567,8 @@ function clickPopup(text, type, location) {
     direction = -150;
   } else if (type == "gulp") {
     direction = -150;
+  } else if (type == "upgrade") {
+    direction = -50;
   }
 
   direction *= Math.random() * 0.5 + 1;