diff --git a/constants.js b/constants.js
index 477ba30..ebd7d31 100644
--- a/constants.js
+++ b/constants.js
@@ -9,90 +9,105 @@ const buildings = {
"micro": {
"name": "Micro",
"plural": "Micros",
+ "desc": "A tasty, squirmy treat.",
"cost": 1e1,
"prod": 1e-1/1
},
"anthro": {
"name": "Anthro",
"plural": "Anthros",
+ "desc": "Something more substantial to sate your hunger.",
"cost": 1e2,
"prod": 1e0/1.1
},
"car": {
"name": "Car",
"plural": "Cars",
+ "desc": "Crunchy shell, tasty center.",
"cost": 1e3,
"prod": 1e1/1.2
},
"bus": {
"name": "Bus",
"plural": "Buses",
+ "desc": "Probably the worst place to be when a macro is aroud.",
"cost": 1e4,
"prod": 1e2/1.3
},
"house": {
"name": "House",
"plural": "Houses",
+ "desc": "Home sweet home - but it doesn't taste sweet?",
"cost": 1e5,
"prod": 1e3/1.4
},
"apartment": {
"name": "Apartment",
"plural": "Apartments",
+ "desc": "More snacks, less packaging.",
"cost": 1e6,
"prod": 1e4/1.5
},
"block": {
"name": "Block",
"plural": "Blocks",
+ "desc": "A whole pile of buildings.",
"cost": 1e7,
"prod": 1e5/1.6
},
"town": {
"name": "Town",
"plural": "Towns",
+ "desc": "'Tourist trap' has never been this literal.",
"cost": 1e8,
"prod": 1e6/1.7
},
"city": {
"name": "City",
"plural": "Cities",
+ "desc": "Please no sitty on our city.",
"cost": 1e9,
"prod": 1e7/1.8
},
"metro": {
"name": "Metropolis",
"plural": "Metropolises",
+ "desc": "A big ol' city. Tasty, too.",
"cost": 1e10,
"prod": 1e8/1.9
},
"county": {
"name": "County",
"plural": "Counties",
+ "desc": "Why salt the land when you can slurp it?",
"cost": 1e11,
"prod": 1e9/2
},
"state": {
"name": "State",
"plural": "States",
+ "desc": "The United States is made up of...43 states - no, 42...",
"cost": 1e12,
"prod": 1e10/2.1
},
"country": {
"name": "Country",
"plural": "Countries",
+ "desc": "One nation, under paw.",
"cost": 1e13,
"prod": 1e11/2.2
},
"continent": {
"name": "Continent",
"plural": "Continents",
+ "desc": "Earth-shattering appetite!",
"cost": 1e14,
"prod": 1e12/2.3
},
"planet": {
"name": "Planet",
"plural": "Planets",
+ "desc": "Earth appetite!",
"cost": 1e15,
"prod": 1e13/2.4
}
diff --git a/gorge.css b/gorge.css
index edb6388..e102b38 100644
--- a/gorge.css
+++ b/gorge.css
@@ -55,6 +55,43 @@ body.dark {
overflow-y: scroll;
}
+#building-tooltip {
+ position: fixed;
+ width: 400px;
+ background: #333;
+ display: none;
+ z-index: 1;
+ left: 0px;
+ top: 0px;
+}
+
+#building-tooltip-name {
+ font-size: 24px;
+ color: #eee;
+ margin: 10px;
+ top: 10px;
+ left: 10px;
+}
+
+#building-tooltip-desc {
+ font-size: 18px;
+ color: #bbb;
+ margin: 10px;
+ left: 10px;
+}
+
+#building-tooltip-cost {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ font-size: 20px;
+}
+
+#building-tooltip-prod {
+ font-size: 20px;
+ margin: 10px;
+}
+
.building-button {
position: relative;
display: block;
@@ -89,13 +126,6 @@ body.dark {
bottom: 15%;
}
-.building-button .building-button-prod {
- font-size: 16px;
- position: absolute;
- right: 10%;
- bottom: 20px;
-}
-
.building-button:hover {
background-color: #333;
}
diff --git a/gorge.html b/gorge.html
index 6ef39a2..16027ff 100644
--- a/gorge.html
+++ b/gorge.html
@@ -28,9 +28,6 @@
-
Upgrades
@@ -42,5 +39,14 @@
+
diff --git a/gorge.js b/gorge.js
index a075fa7..469b779 100644
--- a/gorge.js
+++ b/gorge.js
@@ -91,7 +91,6 @@ function displayBuildings() {
document.querySelector("#building-" + key + " > .building-button-name").innerText = value.count + " " + (value.count == 1 ? buildings[key].name : buildings[key].plural);
document.querySelector("#building-" + key + " > .building-button-cost").innerText = costOfBuilding(key) + " food";
- document.querySelector("#building-" + key + " > .building-button-prod").innerText = Math.round(productivityMultiplierOf(key) * buildings[key].prod * 10) / 10 + " food/sec";
if (costOfBuilding(key) > resources.food) {
button.classList.add("building-button-disabled");
@@ -184,11 +183,6 @@ function initializeData() {
}
function registerListeners() {
- document.querySelectorAll(".building-button").forEach(function(button) {
- let id = button.id.replace("building-", "");
- button.addEventListener("click", function() { buyBuilding(id); });
- });
-
document.querySelector("#tasty-micro").addEventListener("click", eatMicro);
}
@@ -208,13 +202,14 @@ function createBuildings() {
buttonName.classList.add("building-button-name");
let buttonCost = document.createElement("div");
buttonCost.classList.add("building-button-cost");
- let buttonProd = document.createElement("div");
- buttonProd.classList.add("building-button-prod");
-
button.appendChild(buttonName);
button.appendChild(buttonCost);
- button.appendChild(buttonProd);
+
+ button.addEventListener("mousemove", function(e) { buildingTooltip(key, e); });
+ button.addEventListener("mouseleave", function() { buildingTooltipRemove(); });
+ button.addEventListener("click", function() { buyBuilding(key); });
+ button.addEventListener("click", function(e) { buildingTooltip(key, e); });
container.appendChild(button);
}
@@ -342,39 +337,57 @@ function renderPrereqs(prereqs) {
return renderLines(list);
}
+function fillTooltip(type, field, content) {
+ let item = document.querySelector("#" + type + "-tooltip-" + field);
+ if (typeof(content) === "string") {
+ item.innerText = content;
+ } else {
+ replaceChildren(item, content);
+ }
+}
+
function upgradeTooltip(id, event) {
let tooltip = document.querySelector("#upgrade-tooltip");
-
tooltip.style.setProperty("display", "inline-block");
- let tooltipDesc = document.querySelector("#upgrade-tooltip-desc");
-
- tooltipDesc.innerText = upgrades[id].desc;
+ fillTooltip("upgrade", "desc", upgrades[id].desc);
+ fillTooltip("upgrade", "effect", upgrade_types[upgrades[id].effect.type].desc(buildings[upgrades[id].effect.target].name));
+ fillTooltip("upgrade", "cost", renderCost(upgrades[id].cost));
+ fillTooltip("upgrade", "prereqs", renderPrereqs(upgrades[id].prereqs));
- let tooltipEffect = document.querySelector("#upgrade-tooltip-effect");
+ let yOffset = tooltip.parentElement.getBoundingClientRect().y;
- tooltipEffect.innerText = upgrade_types[upgrades[id].effect.type].desc(buildings[upgrades[id].effect.target].name);
+ let yTrans = Math.round(event.clientY - yOffset);
+ tooltip.style.setProperty("transform", "translate(-220px, " + yTrans + "px)");
+}
- let tooltipCost = document.querySelector("#upgrade-tooltip-cost");
+function upgradeTooltipRemove() {
+ let tooltip = document.querySelector("#upgrade-tooltip");
- replaceChildren(tooltipCost, renderCost(upgrades[id].cost));
+ tooltip.style.setProperty("display", "none");
+}
- let tooltipPrereqs = document.querySelector("#upgrade-tooltip-prereqs");
+function buildingTooltip(id, event) {
- replaceChildren(tooltipPrereqs, renderPrereqs(upgrades[id].prereqs));
+ let tooltip = document.querySelector("#building-tooltip");
+ tooltip.style.setProperty("display", "inline-block");
+ fillTooltip("building", "name", buildings[id].name);
+ fillTooltip("building", "desc", buildings[id].desc);
+ fillTooltip("building", "cost", costOfBuilding(id) + " food");
let yOffset = tooltip.parentElement.getBoundingClientRect().y;
- let yTrans = Math.round(event.clientY - yOffset);
- tooltip.style.setProperty("transform", "translate(-220px, " + yTrans + "px)");
+ let xPos = tooltip.parentElement.getBoundingClientRect().x - 450;
+ let yPos = event.clientY;
+
+ tooltip.style.setProperty("transform", "translate(" + xPos + "px, " + yPos + "px)")
}
-function upgradeTooltipRemove() {
- let tooltip = document.querySelector("#upgrade-tooltip");
+function buildingTooltipRemove() {
+ let tooltip = document.querySelector("#building-tooltip");
tooltip.style.setProperty("display", "none");
-
}
window.onload = function() {