feat: add some upgrades

assets/css/upgrades.css

@@ -1,7 +1,17 @@
 #upg-saves {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.9em;
   visibility: hidden;
   position: absolute;
   left: 1rem;
   bottom: 1rem;
   opacity: 0.6;
 }
+
+#upg-saves-reset {
+  cursor: pointer;
+}
+#upg-saves-reset:hover {
+  text-decoration: underline;
+}

index.html

@@ -49,6 +49,7 @@
 
   <div id="upg-saves">
     <span id="upg-saves-text"></span>
+    <span id="upg-saves-reset" onclick="onResetProgressClick()">Reset progress</span>
   </div>
 
   <script src="./js/game.js"></script>

js/game.js

@@ -11,6 +11,8 @@ const upgradeName = document.getElementById('upgrade-name');
 const upgradeDesc = document.getElementById('upgrade-desc');
 const upgradeCost = document.getElementById('upgrade-cost');
 
+const upgSavesReset = document.getElementById('upg-saves-reset');
+
 function updateMoodCounter() {
   moodCounter.innerText = mood;
 
@@ -74,30 +76,34 @@ function onLiftMoodClick() {
   updateMoodCounter();
 }
 
+function applyUpgrade(upgrade) {
+  const upgradeIndex = upgrades.indexOf(upgrade);
+  purchasedUpgrades.push(upgrade.id);
+  upgrades.splice(upgradeIndex, 1);
+
+  updateMoodCounter();
+  clearUpgradeInfo();
+  upgrade.onPurchase();
+}
+
 function purchaseUpgrade(upgrade) {
   if (mood >= upgrade.cost) {
     mood -= upgrade.cost;
-
+    applyUpgrade(upgrade);
-    const upgradeIndex = upgrades.indexOf(upgrade);
-    purchasedUpgrades.push(upgrade.id);
-    upgrades.splice(upgradeIndex, 1);
-
-    updateMoodCounter();
-    clearUpgradeInfo();
-    upgrade.onPurchase();
   }
 }
 
 // UPGRADES
+// saves
 
 function enableSaves() {
   const saves = document.getElementById('upg-saves');
   const savesText = document.getElementById('upg-saves-text');
   saves.style.visibility = 'visible';
 
-  let counter = 10;
+  let counter = 5;
 
-  setInterval(() => {
+  const updateCounter = () => {
     if (counter === 0) {
       const save = {
         mood,
@@ -105,16 +111,61 @@ function enableSaves() {
       };
 
       localStorage.setItem('save', JSON.stringify(save));
-      counter = 11;
+      counter = 6;
       savesText.innerText = 'Saved!';
     } else {
       counter--;
       savesText.innerText = 'Auto save in ' + counter;
     }
-  }, 1000);
+  }
+
+  setInterval(updateCounter, 1000);
+  updateCounter();
 }
 
-function enableMusic() {
+function loadSave() {
+  const save = localStorage.getItem('save');
+  if (save) {
+    const decodedSave = JSON.parse(save);
+    mood = decodedSave.mood;
+
+    const needUpgrades = upgrades.filter((upgrade) => decodedSave.purchasedUpgrades.includes(upgrade.id));
+    needUpgrades.forEach((nUpgrade) => {
+      applyUpgrade(nUpgrade);
+    });
+
+    updateMoodCounter();
+  }
+}
+
+function onResetProgressClick() {
+  if (upgSavesReset.innerText === 'Reset progress') {
+    upgSavesReset.innerText = 'Reset progress (are you sure?)';
+  } else {
+    localStorage.removeItem('save');
+    location.reload();
+  }
+}
+
+// emojis
+
+function enableEmojis() {
+  setInterval(() => {
+    mood += 500;
+    updateMoodCounter();
+  }, 10000);
+}
+
+// calm_music, rain
+
+function enableAudio(name) {
+  const audio = new Audio('./assets/audio/' + name);
+
+  setInterval(() => {
+    if (audio.paused) {
+      audio.play();
+    }
+  }, 5000);
 }
 
 let upgrades = [
@@ -134,14 +185,47 @@ let upgrades = [
     cost: 300,
     onPurchase: enableSaves,
   },
-    {
+  {
+    id: 'emojis',
+    name: 'Emoji Thruster',
+    description: 'Let the emotions flyyyyyyy. +500mood/10s',
+    image: '../assets/img/upgrades/emojis.png',
+    cost: 500,
+    onPurchase: enableEmojis,
+  },
+  {
     id: 'calm_music',
-    name: 'Megaphone',
+    name: 'Old Radio',
-    description: 'Turn on calm lo-fi music',
+    description: 'Listen to the hand-made music',
     image: '../assets/img/upgrades/calm_music.png',
     cost: 1000,
-    onPurchase: enableMusic,
+    onPurchase: () => enableAudio('mood_not_found.mp3'),
+  },
+  {
+    id: 'rain',
+    name: 'Rain',
+    description: 'It\'s rainy outside...',
+    image: '../assets/img/upgrades/rain.png',
+    cost: 5000,
+    onPurchase: () => enableAudio(''),
+  },
+  {
+    id: 'cuteface',
+    name: 'Cuteface',
+    description: 'A little bit... unusual background... no?..',
+    image: '../assets/img/upgrades/cuteface.png',
+    cost: 1e4,
+    onPurchase: () => {},
+  },
+  {
+    id: 'credits',
+    name: 'Credits',
+    description: 'Congratulations!',
+    image: '../assets/img/upgrades/credits.png',
+    cost: 1e22,
+    onPurchase: () => {},
   },
 ];
 
+loadSave();
 updateUpgrades();