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(); }