diff --git a/js/game.js b/js/game.js
index abc1df9..6db6e68 100644
--- a/js/game.js
+++ b/js/game.js
@@ -125,6 +125,47 @@ var Game = (function() {
e.preventDefault();
}
});
+
+ // Global tooltip
+ var globalTooltip = document.getElementById('global-tooltip');
+
+ document.addEventListener('mouseover', function(e) {
+ var trigger = e.target.closest('[data-tooltip]');
+ if (trigger) {
+ globalTooltip.innerHTML = trigger.getAttribute('data-tooltip');
+ globalTooltip.style.display = 'block';
+ }
+ });
+ document.addEventListener('mouseout', function(e) {
+ if (e.target.closest('[data-tooltip]')) {
+ globalTooltip.style.display = 'none';
+ }
+ });
+ document.addEventListener('mousemove', function(e) {
+ if (globalTooltip.style.display === 'block') {
+ var x = e.clientX + 18;
+ var y = e.clientY + 20;
+
+ var tipW = globalTooltip.offsetWidth;
+ var tipH = globalTooltip.offsetHeight;
+
+ // Flip left if overflowing right edge
+ if (x + tipW > window.innerWidth) {
+ x = e.clientX - tipW - 10;
+ }
+ // Flip above if overflowing bottom edge
+ if (y + tipH > window.innerHeight) {
+ y = e.clientY - tipH - 10;
+ }
+
+ // Clamp to left/top edges as a fallback
+ if (x < 0) x = 0;
+ if (y < 0) y = 0;
+
+ globalTooltip.style.left = x + 'px';
+ globalTooltip.style.top = y + 'px';
+ }
+ });
animate(currentTime);
UI.update(state, CONFIG);
diff --git a/js/ui.js b/js/ui.js
index b24ec64..f7e6c1b 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -227,16 +227,7 @@ var UI = {
const bhMassText = this.formatMass(state.blackHoleTotalMass, { forceSolarMass: true });
const consumedText = this.formatMass(state.totalMassConsumedEver);
- this.elements.totalMass.innerHTML = `
-
- Black Hole Mass: ${bhMassText}
-
- The mass of your black hole in solar masses.
- 1 Solar Mass (M☉) ≈ 1.989 × 10³⁰ kg.
- Total mass absorbed:
- ${consumedText}
-
- `;
+ this.elements.totalMass.innerHTML = '' + 'Black Hole Mass: ' + bhMassText + '';
},
updateRateDisplay: function(state, config) {
@@ -348,13 +339,7 @@ var UI = {
gameState.ktypeUpgradeLevel +
gameState.gtypeUpgradeLevel;
- el.innerHTML =
- '' +
- 'Total Level: ' + totalLevel +
- '' +
- 'Sum of all upgrades.
' +
- '' +
- '';
+ el.innerHTML = '' + 'Total Level: ' + totalLevel + '';
var starBonusEl = document.getElementById('star-bonus');
if (!starBonusEl) return;
@@ -379,11 +364,7 @@ var UI = {
starTooltip += 'G-Type: +' + gBonus.toFixed(0) + '%';
}
- starBonusEl.innerHTML =
- '' +
- '
Star Bonus: +' + totalStarBonus + '%' +
- '' + starTooltip + '' +
- '';
+ starBonusEl.innerHTML = '' + '
Star Bonus: +' + totalStarBonus + '%' + '';
},
updateActiveObjects: function() {
@@ -423,15 +404,9 @@ var UI = {
var tooltipText = 'Asteroids are rocky, airless bodies that range in size from tiny pebbles to hundreds of kilometers across. Some asteroids have moons or even binary companions.
Rate: ' + rate + '/sec
Bonus: ' + bonusPercent + '%';
if (!gameState.cometUnlocked) tooltipText += '
Unlocks Comets at level 20';
- this.elements.asteroidLevel.innerHTML = 'Asteroids: Level ' +
- gameState.asteroidUpgradeLevel +
- '' + tooltipText + '';
-
- this.elements.asteroidUpgradeBtn.textContent =
- 'Upgrade (Cost: ' + this.formatMass(gameState.asteroidUpgradeCost) + ')';
-
- this.elements.asteroidUpgradeBtn.disabled =
- gameState.totalMassConsumed < gameState.asteroidUpgradeCost;
+ this.elements.asteroidLevel.innerHTML = 'Asteroids: Level ' + gameState.asteroidUpgradeLevel + '';
+ this.elements.asteroidUpgradeBtn.textContent = 'Upgrade (Cost: ' + this.formatMass(gameState.asteroidUpgradeCost) + ')';
+ this.elements.asteroidUpgradeBtn.disabled = gameState.totalMassConsumed < gameState.asteroidUpgradeCost;
},
updateCometUpgrade: function(gameState) {
@@ -440,15 +415,9 @@ var UI = {
var tooltipText = 'Comets are small icy bodies that typically release gas and dust, forming a glowing coma and often a tail. They are composed mainly of ice, rock, and organic compounds.
Rate: ' + rate + '/min
Bonus: ' + bonusPercent + '%';
if (!gameState.planetUnlocked) tooltipText += '
Unlocks Planets at level 15';
- this.elements.cometLevel.innerHTML = 'Comets: Level ' +
- gameState.cometUpgradeLevel +
- '' + tooltipText + '';
-
- this.elements.cometUpgradeBtn.textContent =
- 'Upgrade (Cost: ' + this.formatMass(gameState.cometUpgradeCost) + ')';
-
- this.elements.cometUpgradeBtn.disabled =
- gameState.totalMassConsumed < gameState.cometUpgradeCost;
+ this.elements.cometLevel.innerHTML = 'Comets: Level ' + gameState.cometUpgradeLevel + '';
+ this.elements.cometUpgradeBtn.textContent = 'Upgrade (Cost: ' + this.formatMass(gameState.cometUpgradeCost) + ')';
+ this.elements.cometUpgradeBtn.disabled = gameState.totalMassConsumed < gameState.cometUpgradeCost;
},
updatePlanetUpgrade: function(gameState) {
@@ -457,15 +426,9 @@ var UI = {
var tooltipText = 'Planets are roughly spherical accumulations of rock and metal, with solid surfaces and relatively thin atmospheres. Local examples include Mercury, Earth, and Pluto. They may vary greatly in size.
Rate: ' + rate + '/hour
Bonus: ' + bonusPercent + '%';
if (!gameState.giantUnlocked) tooltipText += '
Unlocks Giants at level 10';
- this.elements.planetLevel.innerHTML = 'Planets: Level ' +
- gameState.planetUpgradeLevel +
- '' + tooltipText + '';
-
- this.elements.planetUpgradeBtn.textContent =
- 'Upgrade (Cost: ' + this.formatMass(gameState.planetUpgradeCost) + ')';
-
- this.elements.planetUpgradeBtn.disabled =
- gameState.totalMassConsumed < gameState.planetUpgradeCost;
+ this.elements.planetLevel.innerHTML = 'Planets: Level ' + gameState.planetUpgradeLevel + '';
+ this.elements.planetUpgradeBtn.textContent = 'Upgrade (Cost: ' + this.formatMass(gameState.planetUpgradeCost) + ')';
+ this.elements.planetUpgradeBtn.disabled = gameState.totalMassConsumed < gameState.planetUpgradeCost;
},
updateGiantUpgrade: function(gameState) {
@@ -474,15 +437,9 @@ var UI = {
var tooltipText = 'Gas giants are large planets made mostly of hydrogen and helium, with thick atmospheres and no solid surface.
Ice giants are similar but contain higher amounts of frozen materials like water, ammonia, and methane in their atmospheres.
Local examples include Jupiter and Neptune.
Rate: ' + rate + '/6hours
Bonus: ' + bonusPercent + '%';
if (!gameState.mtypeUnlocked) tooltipText += '
Unlocks M-Type at level 5';
- this.elements.giantLevel.innerHTML = 'Giants: Level ' +
- gameState.giantUpgradeLevel +
- '' + tooltipText + '';
-
- this.elements.giantUpgradeBtn.textContent =
- 'Upgrade (Cost: ' + this.formatMass(gameState.giantUpgradeCost) + ')';
-
- this.elements.giantUpgradeBtn.disabled =
- gameState.totalMassConsumed < gameState.giantUpgradeCost;
+ this.elements.giantLevel.innerHTML = 'Giants: Level ' + gameState.giantUpgradeLevel + '';
+ this.elements.giantUpgradeBtn.textContent = 'Upgrade (Cost: ' + this.formatMass(gameState.giantUpgradeCost) + ')';
+ this.elements.giantUpgradeBtn.disabled = gameState.totalMassConsumed < gameState.giantUpgradeCost;
},
updateMtypeUpgrade: function(gameState) {
@@ -491,13 +448,9 @@ var UI = {
var tooltipText = 'M-types, also known as red dwarfs, are the smallest and coolest stars with masses ranging from about 0.08 to 0.45 M☉.
They are the most common star in the universe, making up roughly three quarters of all main-sequence stars, but are not easily visible due to their low luminosity.
Rate: ' + rate + '/day
Bonus: ' + bonusPercent + '%';
if (!gameState.ktypeUnlocked) tooltipText += '
Unlocks K-Type at level 5';
- this.elements.mtypeLevel.innerHTML = 'M-Type: Level ' +
- gameState.mtypeUpgradeLevel +
- '' + tooltipText + '';
- this.elements.mtypeUpgradeBtn.textContent =
- 'Upgrade (Cost: ' + this.formatMass(gameState.mtypeUpgradeCost) + ')';
- this.elements.mtypeUpgradeBtn.disabled =
- gameState.totalMassConsumed < gameState.mtypeUpgradeCost;
+ this.elements.mtypeLevel.innerHTML = 'M-Type: Level ' + gameState.mtypeUpgradeLevel + '';
+ this.elements.mtypeUpgradeBtn.textContent = 'Upgrade (Cost: ' + this.formatMass(gameState.mtypeUpgradeCost) + ')';
+ this.elements.mtypeUpgradeBtn.disabled = gameState.totalMassConsumed < gameState.mtypeUpgradeCost;
},
updateKtypeUpgrade: function(gameState) {
@@ -506,27 +459,19 @@ var UI = {
var tooltipText = 'K-types, also known as orange dwarfs, are medium-sized stars that are cooler than the Sun, with masses ranging from about 0.45 to 0.8 M☉. They are known for their stability and long lifespans (20 to 70 billion years), making them potential candidates for supporting inhabited planets.
Rate: ' + rate + '/2days
Bonus: ' + bonusPercent + '%';
if (!gameState.gtypeUnlocked) tooltipText += '
Unlocks G-Type at level 5';
- this.elements.ktypeLevel.innerHTML = 'K-Type: Level ' +
- gameState.ktypeUpgradeLevel +
- '' + tooltipText + '';
- this.elements.ktypeUpgradeBtn.textContent =
- 'Upgrade (Cost: ' + this.formatMass(gameState.ktypeUpgradeCost) + ')';
- this.elements.ktypeUpgradeBtn.disabled =
- gameState.totalMassConsumed < gameState.ktypeUpgradeCost;
+ this.elements.ktypeLevel.innerHTML = 'K-Type: Level ' + gameState.ktypeUpgradeLevel + '';
+ this.elements.ktypeUpgradeBtn.textContent = 'Upgrade (Cost: ' + this.formatMass(gameState.ktypeUpgradeCost) + ')';
+ this.elements.ktypeUpgradeBtn.disabled = gameState.totalMassConsumed < gameState.ktypeUpgradeCost;
},
updateGtypeUpgrade: function(gameState) {
var rate = (CONFIG.BASE_GTYPE_SPAWN_INTERVAL / gameState.currentGtypeSpawnInterval).toFixed(2);
var bonusPercent = (gameState.gtypeUpgradeLevel * CONFIG.UPGRADE_BONUS_PER_LEVEL_GTYPE * 100).toFixed(0);
var tooltipText = 'G-Types, also known as yellow dwarfs, are medium-sized stars that are about the size of our Sun (~1 M☉). The term yellow dwarf is a misnomer, as most G-Types (including the Sun) are in fact white. These stars are stable and long-lived, making them strong candidates for hosting habitable planets.
Rate: ' + rate + '/3days
Bonus: ' + bonusPercent + '%';
-
- this.elements.gtypeLevel.innerHTML = 'G-Type: Level ' +
- gameState.gtypeUpgradeLevel +
- '' + tooltipText + '';
- this.elements.gtypeUpgradeBtn.textContent =
- 'Upgrade (Cost: ' + this.formatMass(gameState.gtypeUpgradeCost) + ')';
- this.elements.gtypeUpgradeBtn.disabled =
- gameState.totalMassConsumed < gameState.gtypeUpgradeCost;
+
+ this.elements.gtypeLevel.innerHTML = 'G-Type: Level ' + gameState.gtypeUpgradeLevel + '';
+ this.elements.gtypeUpgradeBtn.textContent = 'Upgrade (Cost: ' + this.formatMass(gameState.gtypeUpgradeCost) + ')';
+ this.elements.gtypeUpgradeBtn.disabled = gameState.totalMassConsumed < gameState.gtypeUpgradeCost;
},
formatMass: function(massKg, options = {}) {
diff --git a/style.css b/style.css
index 53e5ba7..7dfbcd5 100644
--- a/style.css
+++ b/style.css
@@ -37,35 +37,6 @@ canvas {
line-height: 1.6;
}
-.tooltip-trigger {
- cursor: help;
- pointer-events: auto;
- border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
- position: relative;
-}
-
-.tooltip {
- display: none;
- position: absolute;
- background: rgba(20, 20, 30, 0.69);
- backdrop-filter: blur(5px);
- border: 1px solid rgba(255, 255, 255, 0.2);
- padding: 8px 12px;
- border-radius: 4px;
- font-size: 11px;
- color: rgba(255, 255, 255, 0.7);
- width: 200px;
- z-index: 1000;
- line-height: 1.4;
- left: 0;
- top: 100%;
- margin-top: 5px;
-}
-
-.tooltip-trigger:hover .tooltip {
- display: block;
-}
-
.rate-up {
color: rgba(100, 255, 100, 0.9);
transition: color 0.5s ease;
@@ -537,3 +508,20 @@ canvas {
outline: none;
border-color: rgba(0, 255, 255, 0.42);
}
+
+#global-tooltip {
+ position: fixed;
+ z-index: 9999;
+ background: rgba(20, 20, 30, 0.69);
+ border: 1px solid rgba(255, 255, 255, 0.25);
+ backdrop-filter: blur(5px);
+ color: rgba(255, 255, 255, 0.85);
+ font-size: 11px;
+ font-family: 'Courier New', monospace;
+ padding: 8px 10px;
+ border-radius: 4px;
+ max-width: 256px;
+ pointer-events: none;
+ display: none;
+ line-height: 1.5;
+}