diff --git a/gorge.css b/gorge.css index 4aaab8d..fe09e9a 100644 --- a/gorge.css +++ b/gorge.css @@ -697,8 +697,26 @@ div::-webkit-scrollbar-corner { --progress: 0%; background: linear-gradient(to left, #000 0%, #000 var(--progress), #555 var(--progress), #555 100%); transition: 1s; - height: 50px; - max-height: 50px; + width: 80px; + height: 80px; + max-height: 80px; +} + +.powerup-entry > .powerup-entry-icon-holder { + width: 80px; + height: 80px; + opacity: 1; + pointer-events: none; + position: absolute; + display: flex; + transform: translate(0, 10px); +} + + +.powerup-entry-icon-holder > .fas { + position: absolute; + font-size: 60px; + text-align: center; } .powerup-entry-done { diff --git a/gorge.js b/gorge.js index 8b740a9..e8043ff 100644 --- a/gorge.js +++ b/gorge.js @@ -125,7 +125,16 @@ function addPowerup(key, powerup) { const powerupEntry = document.createElement("div"); powerupEntry.classList.add("powerup-entry"); - powerupEntry.innerText = powerup.name; + + const powerupIconHolder = document.createElement("div"); + powerupIconHolder.classList.add("powerup-entry-icon-holder"); + + const powerupIcon = document.createElement("i"); + powerupIcon.classList.add("fas"); + powerupIcon.classList.add(powerup.icon); + + powerupIconHolder.appendChild(powerupIcon); + powerupEntry.appendChild(powerupIconHolder); powerupList.appendChild(powerupEntry); @@ -532,7 +541,6 @@ function setup() { updateAll(); } - const cache = {}; function initializeCaches() {