diff --git a/gorge.css b/gorge.css
index 8d0e43f..9244f25 100644
--- a/gorge.css
+++ b/gorge.css
@@ -527,20 +527,38 @@ div::-webkit-scrollbar-corner {
}
}
-.popup-micro {
+.powerup {
position: fixed;
--leftpos: 50%;
--toppos: 50%;
--lifetime: 10s;
left: var(--leftpos);
top: var(--toppos);
- width: 100px;
- height: 100px;
+ width: 125px;
+ height: 125px;
font-size: 80px;
- animation: popup-micro-frames var(--lifetime) linear;
+ animation: powerup-frames var(--lifetime) linear;
+ transition: 0.25s;
+ border-radius: 50%;
+ background: #611;
+ border: 150px;
+ z-index: 10;
+}
+
+.powerup:hover {
+ transform: scale(1.25, 1.25);
+}
+
+.powerup:active {
+ transform: scale(0, 0);
+}
+
+.powerup.powerup-clicked {
+ transform: scale(0, 0);
+ pointer-events: none;
}
-@keyframes popup-micro-frames {
+@keyframes powerup-frames {
0% {
opacity: 0;
}
@@ -555,6 +573,10 @@ div::-webkit-scrollbar-corner {
}
}
-.popup-micro > .fas {
+.powerup > .fas {
+ width: 100%;
+ height: 100%;
text-align: center;
+ transform: translate(0, 17.5px);
+ -webkit-text-stroke: 10px green;
}
\ No newline at end of file
diff --git a/gorge.html b/gorge.html
index 0d2569c..508ff50 100644
--- a/gorge.html
+++ b/gorge.html
@@ -4,6 +4,7 @@
Gorge
+
diff --git a/gorge.js b/gorge.js
index 1be4a34..963776b 100644
--- a/gorge.js
+++ b/gorge.js
@@ -685,44 +685,48 @@ function showNews(text) {
}, 10000);
}
-function doPopupMicro() {
+function doPowerup() {
const lifetime = 10000;
- const div = document.createElement("div");
+ const powerup = document.createElement("div");
const left = Math.round(Math.random() * 50 + 25) + "%";
const top = Math.round(Math.random() * 50 + 25) + "%";
- div.classList.add("popup-micro");
+ powerup.classList.add("powerup");
- div.style.setProperty("--lifetime", lifetime/1000 + "s");
- div.style.setProperty("--leftpos", left);
- div.style.setProperty("--toppos", top);
+ powerup.style.setProperty("--lifetime", lifetime/1000 + "s");
+ powerup.style.setProperty("--leftpos", left);
+ powerup.style.setProperty("--toppos", top);
const icon = document.createElement("div");
icon.classList.add("fas");
icon.classList.add("fa-drumstick-bite");
- div.appendChild(icon);
+ powerup.appendChild(icon);
const body = document.querySelector("body");
- body.appendChild(div);
+ body.appendChild(powerup);
const remove = setTimeout(() => {
- body.removeChild(div);
+ body.removeChild(powerup);
}, lifetime);
setTimeout(() => {
- doPopupMicro();
+ doPowerup();
}, 20000);
- div.addEventListener("click", e => {
+ powerup.addEventListener("mousedown", e => {
clickPopup("GULP!", "gulp", [e.clientX, e.clientY]);
clickPopup("+1000 food", "food", [e.clientX, e.clientY]);
+ powerup.classList.add("powerup-clicked");
resources.food += 1000;
clearTimeout(remove);
- body.removeChild(div);
+
+ setTimeout(() => {
+ body.removeChild(powerup);
+ }, 500);
});
}
@@ -829,7 +833,7 @@ window.onload = function() {
lastTime = performance.now();
doNews();
- doPopupMicro();
+ doPowerup();
setTimeout(updateDisplay, 1000/updateRate);