Add a powerup that doubles food production for 10 seconds

constants.js

@@ -1068,15 +1068,14 @@ const powerups = {
       clickPopup("+1 car", "food", [e.clientX, e.clientY]);
     }
   },
-  "nothing": {
-    name: "Nothing",
-    description: "Does nothing for 10 seconds",
-    icon: "fa-car",
+  "double": {
+    name: "Double Dip",
+    description: "Doubled productivity!",
+    icon: "fa-cogs",
     duration: 10000,
-    effect: state => state.belongings.car.count += 1,
+    effect: state => state.currentProductivity.food *= 2,
     popup: (self, e) => {
-      clickPopup("CAR!", "gulp", [e.clientX, e.clientY]);
-      clickPopup("+1 car", "food", [e.clientX, e.clientY]);
+      clickPopup("VROOM!", "gulp", [e.clientX, e.clientY]);
     }
   }
 }

gorge.html

@@ -32,6 +32,7 @@
     <div id="resource-list"></div>
     <div id="productivity"></div>
     <button id="tasty-micro">Eat Micro</button>
+    <div id="powerup-list"></div>
   </div>
 
   <div id="upgrades-area">

gorge.js

@@ -22,18 +22,36 @@ let lastTime = 0;
 const activePowerups = [];
 
 function tickPowerups(delta) {
+  const powerupList = document.querySelector("#powerup-list");
+  let changed = false;
   // I love mutating arrays as I traverse them.
   for (let i = activePowerups.length-1; i >= 0; i--) {
     activePowerups[i].lifetime -= delta;
     if (activePowerups[i].lifetime <= 0) {
       clickPopup("OOF", "info", [500, 500]);
+      powerupList.removeChild(activePowerups[i].element);
       activePowerups.splice(i, 1);
+      changed = true;
     }
   }
+
+  if (changed) {
+    updateAll();
+  }
 }
 
 function addPowerup(powerup) {
-  activePowerups.push({powerup: powerup, lifetime: powerup.duration});
+  const powerupList = document.querySelector("#powerup-list");
+
+  const powerupEntry = document.createElement("div");
+  
+  powerupEntry.innerText = powerup.name;
+
+  powerupList.appendChild(powerupEntry);
+
+  activePowerups.push({powerup: powerup, lifetime: powerup.duration, element: powerupEntry});
+  
+  updateAll();
 }
 
 function applyGlobalProdBonuses(productivity) {
@@ -133,6 +151,23 @@ function updateDisplay() {
 
 function updateProductivity() {
   currentProductivity["food"] = calculateProductivity();
+
+  activePowerups.forEach(entry => {
+    const powerup = entry.powerup;
+    
+    const state = {
+      ownedUpgrades: ownedUpgrades,
+      resources: resources,
+      currentProductivity: currentProductivity,
+      belongings: belongings
+    };
+
+    console.log(currentProductivity);
+
+    powerup.effect(state);
+    
+    console.log(currentProductivity);
+  })
 }
 
 function addResources(delta) {
@@ -754,7 +789,12 @@ function doPowerup() {
   };
 
   button.addEventListener("mousedown", e => {
-    powerup.effect(state);
+    if (powerup.duration !== undefined) {
+      addPowerup(powerup);
+    } else {
+      powerup.effect(state);
+    }
+    
     powerup.popup(powerup, e);
     button.classList.add("powerup-clicked");
     resources.food += 1000;