feat: add upgrades, fix emojis upgrade

assets/css/upgrades.css

@@ -15,6 +15,56 @@
   text-decoration: underline;
 }
 
+#upg-emojis {
+  display: none;
+  position: absolute;
+  font-size: 2em;
+  animation: 5s emojis linear infinite;
+}
+@keyframes emojis {
+  0% {
+    left: 0;
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  100% {
+    left: 100%;
+    opacity: 1;
+    transform: rotate(360deg);
+  }
+}
+
+#upg-music {
+  position: absolute;
+  top: 6rem;
+  left: 1rem;
+  opacity: 0.6;
+}
+#upg-music > img {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+#upg-mixer {
+  visibility: hidden;
+  display: flex;
+  gap: 0.6rem;
+  flex-direction: column;
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+}
+#upg-mixer > div {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+#upg-mixer > div > img {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 8px;
+}
+
 #upg-cuteface {
   visibility: hidden;
   position: absolute;

index.html

@@ -52,6 +52,20 @@
     <span id="upg-saves-reset" onclick="onResetProgressClick()">Reset progress</span>
   </div>
 
+  <div id="upg-emojis">😆</div>
+
+  <div id="upg-mixer">
+    <b>Mixer</b>
+    <div>
+      <img src="./assets/img/upgrades/rain.png" alt="Rain">
+      <input type="range" id="rain-range" value="100" onchange="rainRangeChange(this.value)">
+    </div>
+    <div>
+      <img src="./assets/img/upgrades/calm_music.png" alt="Old radio">
+      <input type="range" id="music-range" value="100" onchange="musicRangeChange(this.value)">
+    </div>
+  </div>
+
   <img src="./assets/img/bg/cuteface.png" alt="Cuteface" id="upg-cuteface">
 
   <div id="upg-credits">
@@ -69,12 +83,12 @@
       <h2>Other</h2>
       <span>Programmed by <b>Kirill Siukhin</b></span>
 
-      <button class="btn upg-credits-play-again" onclick="resetProgress()">Play again</button>
-
       <div class="upg-credits-footer">
         <p>Made with ❤️ by <a href="https://misterkirill.com" class="link">Mister Kirill</a></p>
         <p>Thanks for playing!</p>
       </div>
+
+      <button class="btn upg-credits-play-again" onclick="resetProgress()">Play again</button>
     </div>
   </div>
 

js/game.js

@@ -1,5 +1,5 @@
 let mood = 0;
-let moodPerClick = 50; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION
+let moodPerClick = 1; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION
 let purchasedUpgrades = [];
 
 const upgradesContainer = document.getElementById('upgrades');
@@ -11,7 +11,11 @@ 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');
+const rainRange = document.getElementById('rain-range');
+const musicRange = document.getElementById('music-range');
+
+const audioMusic = new Audio('./assets/audio/mood_not_found.mp3');
+const audioRain = new Audio('./assets/audio/rain.mp3');
 
 function updateMoodCounter() {
   moodCounter.innerText = mood;
@@ -144,6 +148,8 @@ function resetProgress() {
 }
 
 function onResetProgressClick() {
+  const upgSavesReset = document.getElementById('upg-saves-reset');
+
   if (upgSavesReset.innerText === 'Reset progress') {
     upgSavesReset.innerText = 'Reset progress (are you sure?)';
   } else {
@@ -154,24 +160,62 @@ function onResetProgressClick() {
 // emojis
 
 function enableEmojis() {
+  const upgEmojis = document.getElementById('upg-emojis');
+  upgEmojis.style.display = 'block';
+
+  const emojis = ['😎', '😆', '😛', '😏', '😔', '🥲', '😔', '😒', '😍', '😃', '🤓', '😊', '😁', '😄'];
+  var randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
+
   setInterval(() => {
-    mood += 250;
+    mood += 200;
+    upgEmojis.innerText = randomEmoji;
     updateMoodCounter();
   }, 5000);
 }
 
-// calm_music, rain
+// rain
 
-function enableAudio(name) {
+function enableRain() {
-  const audio = new Audio('./assets/audio/' + name);
+  audioRain.play();
+  audioRain.loop = true;
 
   setInterval(() => {
-    if (audio.paused) {
+    if (audioRain.paused) {
-      audio.play();
+      audioRain.play();
+      rainRange.value = audioRain.volume * 100;
     }
   }, 1000);
 }
 
+// calm_music
+
+function enableMusic() {
+  audioMusic.play();
+  audioMusic.loop = true;
+
+  setInterval(() => {
+    if (audioMusic.paused) {
+      audioMusic.play();
+      musicRange.value = audioMusic.volume * 100;
+    }
+  }, 1000);
+}
+
+// mixer
+
+function enableMixer() {
+  const upgMixer = document.getElementById('upg-mixer');
+  upgMixer.style.visibility = 'visible';
+}
+
+function rainRangeChange(value) {
+  audioRain.volume = value / 100;
+}
+
+function musicRangeChange(value) {
+  audioMusic.volume = value / 100;
+}
+
 // cuteface
 
 function showCuteface() {
@@ -208,33 +252,41 @@ let upgrades = [
   {
     id: 'emojis',
     name: 'Emoji Thruster',
-    description: 'Let the emotions flyyyyyyy- +250mood/5s',
+    description: 'Let the emotions flyyyyyyy +200mood/5s',
     image: '../assets/img/upgrades/emojis.png',
     cost: 500,
     onPurchase: enableEmojis,
   },
-  {
-    id: 'calm_music',
-    name: 'Old Radio',
-    description: 'Listen to the hand-made music',
-    image: '../assets/img/upgrades/calm_music.png',
-    cost: 1000,
-    onPurchase: () => enableAudio('mood_not_found.mp3'),
-  },
   {
     id: 'rain',
     name: 'Rain',
     description: 'It\'s rainy outside...',
     image: '../assets/img/upgrades/rain.png',
-    cost: 5000,
+    cost: 1000,
-    onPurchase: () => {},
+    onPurchase: enableRain,
+  },
+  {
+    id: 'calm_music',
+    name: 'Old Radio',
+    description: 'Listen to the hand-made music',
+    image: '../assets/img/upgrades/calm_music.png',
+    cost: 1500,
+    onPurchase: enableMusic,
+  },
+  {
+    id: 'mixer',
+    name: 'Mixer',
+    description: 'Control the sounds',
+    image: '../assets/img/upgrades/mixer.png',
+    cost: 3000,
+    onPurchase: enableMixer,
   },
   {
     id: 'cuteface',
     name: 'Cuteface',
     description: 'A little bit... unusual background... no?..',
     image: '../assets/img/upgrades/cuteface.png',
-    cost: 1e4,
+    cost: 15000,
     onPurchase: showCuteface,
   },
   {