diff --git a/gorge.css b/gorge.css index 11205ef..54fca8b 100644 --- a/gorge.css +++ b/gorge.css @@ -135,6 +135,31 @@ button { margin: 10px; } +#powerup-tooltip { + position: fixed; + width: 400px; + background: #333; + display: none; + z-index: 1; + left: 0px; + top: 0px; +} + +#powerup-tooltip-name { + font-size: 24px; + color: #eee; + margin: 10px; + top: 10px; + left: 10px; +} + +#powerup-tooltip-desc { + font-size: 18px; + color: #bbb; + margin: 10px; + left: 10px; +} + .building-button { position: relative; display: block; @@ -602,4 +627,4 @@ div::-webkit-scrollbar-corner { .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 4f8edd5..c0c76ea 100644 --- a/gorge.html +++ b/gorge.html @@ -35,6 +35,10 @@
Powerups
+
+
+
+
diff --git a/gorge.js b/gorge.js index 5eb7439..bb304fa 100644 --- a/gorge.js +++ b/gorge.js @@ -110,7 +110,10 @@ function addPowerup(key, powerup) { powerupList.appendChild(powerupEntry); activePowerups[key] = {powerup: powerup, life: powerup.duration, maxLife: powerup.duration, element: powerupEntry }; - + + powerupEntry.addEventListener("mousemove", function (e) { powerupTooltip(key, e); }); + powerupEntry.addEventListener("mouseleave", function () { powerupTooltipRemove(); }); + updateAll(); } @@ -1157,6 +1160,36 @@ function buildingTooltipRemove() { tooltip.style.setProperty("display", "none"); } +function powerupTooltip(id, event) { + + let tooltip = document.querySelector("#powerup-tooltip"); + tooltip.style.setProperty("display", "inline-block"); + + const count = buildingCount(); + + fillTooltip("powerup", "name", powerups[id].name); + fillTooltip("powerup", "desc", powerups[id].description); + + let xPos = tooltip.parentElement.getBoundingClientRect().x + 450; + + // wow browsers are bad + + var body = document.body, + html = document.documentElement; + + var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); + + let yPos = Math.min(event.clientY, height - 200); + + tooltip.style.setProperty("transform", "translate(" + xPos + "px, " + yPos + "px)") +} + +function powerupTooltipRemove() { + let tooltip = document.querySelector("#powerup-tooltip"); + + tooltip.style.setProperty("display", "none"); +} + window.onload = function () { setup();