diff --git a/constants.js b/constants.js index 7b12116..f65a2ef 100644 --- a/constants.js +++ b/constants.js @@ -26,10 +26,12 @@ const tiers = [ const resourceTypes = { "food": { name: "food", + desc: "Earned from eating. Pays for lots of things.", generated: true }, "powerups": { name: "power crystals", + desc: "Earned from clicking powerups. Pays for powerup upgrades.", generated: false } } diff --git a/gorge.css b/gorge.css index 31aa99b..c5250d8 100644 --- a/gorge.css +++ b/gorge.css @@ -824,3 +824,14 @@ div::-webkit-scrollbar-corner { box-sizing: border-box; float: right; } + +.has-help { + +} + +#help-tooltip { + color: #888; + background: #000; + max-width: 400px; + font-size: 16pt; +} diff --git a/gorge.html b/gorge.html index 3e51459..f51cb0d 100644 --- a/gorge.html +++ b/gorge.html @@ -49,6 +49,9 @@ +
+
+
Upgrades
diff --git a/gorge.js b/gorge.js index a3fe9c8..0a399a6 100644 --- a/gorge.js +++ b/gorge.js @@ -758,6 +758,11 @@ function registerListeners() { mouseTarget.dispatchEvent(new Event("mousemove")); return true; }); + + document.querySelectorAll(".help-tooltip").forEach(element => { + element.addEventListener("mousemove", e => helpTooltip(element, e)); + element.addEventListener("moveleave", e => helpTooltipRemove(element, e)); + }); } function openOptions() { @@ -938,6 +943,8 @@ function createDisplays() { Object.keys(resourceTypes).forEach(key => { const quantity = document.createElement("div"); quantity.classList.add("resource-quantity"); + quantity.classList.add("help-tooltip"); + quantity.dataset.tooltip = resourceTypes[key].desc; quantity.id = "resource-quantity-" + key; resourceList.appendChild(quantity); @@ -1381,6 +1388,38 @@ function powerupTooltipRemove() { tooltip.style.setProperty("display", "none"); } +function helpTooltip(element, event) { + + const text = element.dataset.tooltip; + + let tooltip = document.querySelector("#help-tooltip"); + tooltip.style.setProperty("display", "inline-block"); + + const count = buildingCount(); + + fillTooltip("help", "help", text); + + 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 helpTooltipRemove() { + let tooltip = document.querySelector("#help-tooltip"); + + tooltip.style.setProperty("display", "none"); +} + + window.onload = function () { setup();