Create a set of powerups with effects/popup functions

constants.js

@@ -1045,4 +1045,16 @@ const news = [
       state => "You have at least 50 micros. Wow!"
     ]
   }
-]
+]
+
+const powerups = {
+  "instant-food": {
+    name: "Free Food",
+    description: "Tasty!",
+    effect: state => state.resources.food += 10000,
+    popup: (self, e) => {
+      clickPopup("GULP!", "gulp", [e.clientX, e.clientY]);
+      clickPopup("+10000 food", "food", [e.clientX, e.clientY]);
+    }
+  }
+}

gorge.css

@@ -386,10 +386,12 @@ button {
   transform-origin: 0% 0%;
   animation: click-popup-info 2s linear;
   animation-fill-mode: both;
-  font-size: 36px;
+  font-size: var(--font-size);
   --target: -200px;
+  --font-size: 36px;
 }
 
+
 @keyframes click-popup-food {
   0% {
     transform: translate(0px, 0px) scale(1, 1);

gorge.js

@@ -688,44 +688,61 @@ function showNews(text) {
 function doPowerup() {
   const lifetime = 10000;
 
-  const powerup = document.createElement("div");
+  const button = document.createElement("div");
 
   const left = Math.round(Math.random() * 50 + 25) + "%";
   const top = Math.round(Math.random() * 50 + 25) + "%";
 
-  powerup.classList.add("powerup");
+  button.classList.add("powerup");
 
-  powerup.style.setProperty("--lifetime", lifetime/1000 + "s");
-  powerup.style.setProperty("--leftpos", left);
-  powerup.style.setProperty("--toppos", top);
+  button.style.setProperty("--lifetime", lifetime/1000 + "s");
+  button.style.setProperty("--leftpos", left);
+  button.style.setProperty("--toppos", top);
   const icon = document.createElement("div");
 
   icon.classList.add("fas");
   icon.classList.add("fa-drumstick-bite");
 
-  powerup.appendChild(icon);
+  button.appendChild(icon);
 
   const body = document.querySelector("body");
 
-  body.appendChild(powerup);
+  body.appendChild(button);
+
+  const choices = [];
+
+  Object.entries(powerups).forEach(([key, val]) => {
+    choices.push(key);
+  });
+
+  const choice = Math.floor(Math.random() * choices.length);
+
+  const powerup = powerups[choices[choice]];
 
   const remove = setTimeout(() => {
-    body.removeChild(powerup);
+    body.removeChild(button);
   }, lifetime);
 
   setTimeout(() => {
     doPowerup();
   }, 20000);
 
-  powerup.addEventListener("mousedown", e => {
-    clickPopup("GULP!", "gulp", [e.clientX, e.clientY]);
-    clickPopup("+1000 food", "food", [e.clientX, e.clientY]);
-    powerup.classList.add("powerup-clicked");
+  const state = {
+    ownedUpgrades: ownedUpgrades,
+    resources: resources,
+    currentProductivity: currentProductivity,
+    belongings: belongings
+  };
+
+  button.addEventListener("mousedown", e => {
+    powerup.effect(state);
+    powerup.popup(powerup, e);
+    button.classList.add("powerup-clicked");
     resources.food += 1000;
     clearTimeout(remove);
     
     setTimeout(() => {
-      body.removeChild(powerup);
+      body.removeChild(button);
     }, 500);
   });