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();