diff --git a/assets/css/style.css b/assets/css/global.css similarity index 89% rename from assets/css/style.css rename to assets/css/global.css index 5ac1044..7bf873a 100644 --- a/assets/css/style.css +++ b/assets/css/global.css @@ -93,6 +93,7 @@ a { display: flex; align-items: center; gap: 0.8rem; + margin-bottom: 1rem; } .upgrade { @@ -115,3 +116,14 @@ a { .upgrade:active { transform: scale(0.95); } + +#upgrade-info { + visibility: hidden; + display: flex; + flex-direction: column; + align-items: center; + background-color: var(--color-light); + color: var(--color-dark); + padding: 1rem; + border-radius: 8px; +} diff --git a/assets/css/upgrades.css b/assets/css/upgrades.css new file mode 100644 index 0000000..620aad3 --- /dev/null +++ b/assets/css/upgrades.css @@ -0,0 +1,7 @@ +#upg-saves { + visibility: hidden; + position: absolute; + left: 1rem; + bottom: 1rem; + opacity: 0.6; +} diff --git a/index.html b/index.html index 0b35b79..96f17ed 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,8 @@ - + + Mood Clicker @@ -36,13 +37,20 @@ -
- +
+
+ Upgrade name + Upgrade description + 500 Mood
+ + +
+ +
+ diff --git a/js/game.js b/js/game.js index 6c6f514..d03e9dd 100644 --- a/js/game.js +++ b/js/game.js @@ -1,10 +1,16 @@ let mood = 0; let moodPerClick = 50; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION +let purchasedUpgrades = []; const upgradesContainer = document.getElementById('upgrades'); const moodCounter = document.getElementById('mood-counter'); const favicon = document.getElementById('favicon'); +const upgradeInfoContainer = document.getElementById('upgrade-info'); +const upgradeName = document.getElementById('upgrade-name'); +const upgradeDesc = document.getElementById('upgrade-desc'); +const upgradeCost = document.getElementById('upgrade-cost'); + function updateMoodCounter() { moodCounter.innerText = mood; @@ -27,6 +33,17 @@ function updateMoodCounter() { } } +function updateUpgradeInfo(upgrade) { + upgradeInfoContainer.style.visibility = 'visible'; + upgradeName.innerText = upgrade.name; + upgradeDesc.innerText = upgrade.description; + upgradeCost.innerText = upgrade.cost + ' Mood'; +} + +function clearUpgradeInfo() { + upgradeInfoContainer.style.visibility = 'hidden'; +} + function updateUpgrades() { upgradesContainer.innerHTML = ''; @@ -34,7 +51,9 @@ function updateUpgrades() { const upgradeBtn = document.createElement('button'); upgradeBtn.id = upgrade.id; upgradeBtn.className = 'upgrade'; - upgradeBtn.onclick = () => purchaseUpgrade(upgrade.id); + upgradeBtn.onclick = () => purchaseUpgrade(upgrade); + upgradeBtn.onmouseenter = () => updateUpgradeInfo(upgrade); + upgradeBtn.onmouseleave = clearUpgradeInfo; if (mood < upgrade.cost) { upgradeBtn.style.opacity = 0.6; @@ -55,13 +74,16 @@ function onLiftMoodClick() { updateMoodCounter(); } -function purchaseUpgrade(id) { - const upgrade = upgrades.filter((upgrade) => upgrade.id === id)[0]; - +function purchaseUpgrade(upgrade) { if (mood >= upgrade.cost) { mood -= upgrade.cost; - upgrades.shift(); + + const upgradeIndex = upgrades.indexOf(upgrade); + purchasedUpgrades.push(upgrade.id); + upgrades.splice(upgradeIndex, 1); + updateMoodCounter(); + clearUpgradeInfo(); upgrade.onPurchase(); } } @@ -69,6 +91,27 @@ function purchaseUpgrade(id) { // UPGRADES function enableSaves() { + const saves = document.getElementById('upg-saves'); + const savesText = document.getElementById('upg-saves-text'); + saves.style.visibility = 'visible'; + + let counter = 10; + + setInterval(() => { + if (counter === 0) { + const save = { + mood, + purchasedUpgrades, + }; + + localStorage.setItem('save', JSON.stringify(save)); + counter = 11; + savesText.innerText = 'Saved!'; + } else { + counter--; + savesText.innerText = 'Auto save in ' + counter; + } + }, 1000); } function enableMusic() { @@ -93,7 +136,7 @@ let upgrades = [ }, { id: 'calm_music', - name: 'Old Radio', + name: 'Megaphone', description: 'Turn on calm lo-fi music', image: '../assets/img/upgrades/calm_music.png', cost: 1000,