diff --git a/gorge.css b/gorge.css
index 09b29e9..11205ef 100644
--- a/gorge.css
+++ b/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;
}
\ No newline at end of file
diff --git a/gorge.html b/gorge.html
index 2bf0f4a..c762ecb 100644
--- a/gorge.html
+++ b/gorge.html
@@ -32,6 +32,7 @@
+ Powerups
diff --git a/gorge.js b/gorge.js
index 26fe685..bd4d608 100644
--- a/gorge.js
+++ b/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();
}