Add powerup display.

gorge.css

@@ -581,4 +581,25 @@ div::-webkit-scrollbar-corner {
   text-align: center;
   color: green;
   transform: translate(0, 17.5px);
+}
+
+#powerups {
+  margin-top: 100px;
+}
+
+#powerup-list {
+
+}
+
+.powerup-entry {
+  --progress: 0%;
+  background: linear-gradient(to left, #000 0%, #000 var(--progress), #555 var(--progress), #555 100%);
+  transition: 1s;
+  height: 50px;
+  max-height: 50px;
+}
+
+.powerup-entry-done {
+  transform: scale(1, 0);
+  max-height: 0px;
 }

gorge.html

@@ -32,6 +32,7 @@
     <div id="resource-list"></div>
     <div id="productivity"></div>
     <button id="tasty-micro">Eat Micro</button>
+    <div id="powerups" class="title">Powerups</div>
     <div id="powerup-list"></div>
   </div>
 

gorge.js

@@ -28,11 +28,18 @@ function tickPowerups(delta) {
   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);
+      const entry = activePowerups[i];
+      setTimeout(() => {
+        powerupList.removeChild(entry.element);
+      }, 1000);
+      entry.element.classList.add("powerup-entry-done");
       activePowerups.splice(i, 1);
       changed = true;
+    } else {
+      const frac = (activePowerups[i].powerup.duration - activePowerups[i].lifetime) / (activePowerups[i].powerup.duration);
+      activePowerups[i].element.style.setProperty("--progress", frac * 100 + "%")
     }
+
   }
 
   if (changed) {
@@ -44,13 +51,14 @@ function addPowerup(powerup) {
   const powerupList = document.querySelector("#powerup-list");
 
   const powerupEntry = document.createElement("div");
+  powerupEntry.classList.add("powerup-entry");
   
   powerupEntry.innerText = powerup.name;
 
   powerupList.appendChild(powerupEntry);
 
   activePowerups.push({powerup: powerup, lifetime: powerup.duration, element: powerupEntry});
-  
+
   updateAll();
 }