diff --git a/gorge.css b/gorge.css index aaede5e..52d6346 100644 --- a/gorge.css +++ b/gorge.css @@ -256,18 +256,44 @@ button { margin: -25px -50px; } -.click-popup { +.click-popup-food { + pointer-events: none; + transform-origin: -100% 50%; + text-align: center; + position: fixed; + animation: click-popup-food 2s linear; + animation-fill-mode: both; + font-size: 36px; +} + +.click-popup-gulp { + pointer-events: none; + transform-origin: -100% 50%; + text-align: center; position: fixed; - animation: click-popup 2s linear; + animation: click-popup-gulp 2s linear; + animation-fill-mode: both; + font-size: 36px; +} + +@keyframes click-popup-food { + 0% { + transform: translate(0px, 0px) scale(1, 1); + opacity: 1; + } + 100% { + transform: translate(0px, -200px) scale(0.5, 0.5); + opacity: 0; + } } -@keyframes click-popup { +@keyframes click-popup-gulp { 0% { - transform: translate(0px, 0px); + transform: translate(0px, 0px) scale(1, 1); opacity: 1; } 100% { - transform: translate(0px, -200px); + transform: translate(0px, 200px) scale(0.5, 0.5); opacity: 0; } } diff --git a/gorge.js b/gorge.js index 563b153..795502e 100644 --- a/gorge.js +++ b/gorge.js @@ -322,7 +322,10 @@ function initializeData() { function registerListeners() { document.querySelector("#tasty-micro").addEventListener("click", (e) => { const add = eatMicro(); - clickPopup("+" + round(add, 1) + " food", [e.clientX, e.clientY]); + const text = "+" + round(add, 1) + " food"; + const gulp = "*glp*"; + clickPopup(text, "food", [e.clientX, e.clientY]); + clickPopup(gulp, "gulp", [e.clientX, e.clientY]); }); document.querySelector("#save").addEventListener("click", save); @@ -539,11 +542,11 @@ function renderEffects(effectList) { return renderLines(list); } -function clickPopup(text, location) { +function clickPopup(text, type, location) { const div = document.createElement("div"); div.textContent = text; - div.classList.add("click-popup"); + div.classList.add("click-popup-" + type); div.style.left = location[0] + "px"; div.style.top = location[1] + "px";