feat: small improvements

assets/css/global.css

@@ -8,6 +8,7 @@ body {
   font-family: "Noto Sans", sans-serif;
   background-color: var(--color-dark);
   color: var(--color-light);
+  text-align: center;
 }
 
 a {
@@ -42,6 +43,12 @@ a {
   text-shadow: 2px 2px 15px rgba(var(--color-light), 0.9);
 }
 
+.small-text {
+  font-family: "Noto Sans", sans-serif;
+  font-weight: 400;
+  font-size: 0.25em;
+}
+
 .btn {
   display: flex;
   align-items: center;
@@ -128,6 +135,7 @@ a {
   color: var(--color-dark);
   padding: 1rem;
   border-radius: 8px;
+  margin-bottom: 1rem;
 }
 
 .phone-only {

assets/css/upgrades.css

@@ -30,7 +30,7 @@
     opacity: 1;
   }
   100% {
-    left: 90%;
+    left: 80%;
     opacity: 0;
     transform: rotate(360deg);
   }
@@ -110,11 +110,10 @@
   }
 }
 
-.upg-credits-footer {
-  margin-top: 1rem;
-  text-align: center;
-}
-
 .upg-credits-play-again {
   margin-top: 2rem;
 }
+
+#upg-multiplier {
+  display: none;
+}

index.html

@@ -26,7 +26,7 @@
   </nav>
 
   <main class="main">
-    <h1 class="heading">Mood Clicker</h1>
+    <h1 class="heading">Mood Clicker <i class="small-text">(alpha?)</i></h1>
     <span class="mood-counter">Current Mood: <span id="mood-counter">0</span></span>
     <button class="click-btn" onclick="onLiftMoodClick()">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
@@ -48,6 +48,8 @@
 
   <!-- UPGRADES -->
 
+  <i id="upg-multiplier">Multiplier: x1</i>
+
   <div id="upg-saves">
     <span id="upg-saves-text"></span>
     <span id="upg-saves-reset" onclick="onResetProgressClick()">Reset progress</span>
@@ -73,22 +75,17 @@
     <div class="upg-credits-inner">
       <h1 class="heading">Mood Clicker</h1>
 
+      <p>Thanks for playing!</p>
+      <span>Programmed by <b>Kirill Siukhin</b></span>
+
       <h2>Visuals</h2>
       <span>Upgrade icons by <b>Kirill Siukhin</b></span>
       <span>Cuteface by <b>realexa770</b></span>
 
       <h2>Music</h2>
-      <span>Background music – "Mood Not Found" by <b>Kirill Siukhin</b></span>
+      <span>"Mood Not Found" by <b>Kirill Siukhin</b></span>
       <span>Rain FX by <b>Kirill Siukhin</b></span>
 
-      <h2>Other</h2>
-      <span>Programmed by <b>Kirill Siukhin</b></span>
-
-      <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,6 +1,7 @@
 let mood = 0;
-let moodPerClick = 1; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION
+let moodPerClick = 1;
 let purchasedUpgrades = [];
+let multiplier = 1;
 
 const upgradesContainer = document.getElementById('upgrades');
 const moodCounter = document.getElementById('mood-counter');
@@ -17,24 +18,26 @@ const musicRange = document.getElementById('music-range');
 const audioMusic = new Audio('./assets/audio/mood_not_found.mp3');
 const audioRain = new Audio('./assets/audio/rain.mp3');
 
+const upgMultiplier = document.getElementById('upg-multiplier');
+
 function updateMoodCounter() {
-  moodCounter.innerText = mood;
+  moodCounter.innerText = Math.floor(mood);
 
   updateUpgrades();
 
-  if (mood < 100) {
+  if (mood < 50) {
     favicon.setAttribute('href', './assets/favicons/1.ico');
-  } else if (mood < 1e3) {
+  } else if (mood < 500) {
     favicon.setAttribute('href', './assets/favicons/2.ico');
-  } else if (mood < 1e5) {
+  } else if (mood < 1500) {
     favicon.setAttribute('href', './assets/favicons/3.ico');
-  } else if (mood < 1e9) {
+  } else if (mood < 4000) {
     favicon.setAttribute('href', './assets/favicons/4.ico');
-  } else if (mood < 1e16) {
+  } else if (mood < 80000) {
     favicon.setAttribute('href', './assets/favicons/5.ico');
-  } else if (mood < 1e19) {
+  } else if (mood < 300000) {
     favicon.setAttribute('href', './assets/favicons/6.ico');
-  } else if (mood < 1e22) {
+  } else if (mood < 2000000) {
     favicon.setAttribute('href', './assets/favicons/7.ico');
   }
 }
@@ -77,7 +80,7 @@ function updateUpgrades() {
 }
 
 function onLiftMoodClick() {
-  mood += moodPerClick;
+  mood += moodPerClick * multiplier;
   updateMoodCounter();
 }
 
@@ -113,6 +116,9 @@ function enableSaves() {
       const save = {
         mood,
         purchasedUpgrades,
+        multiplier: +multiplier,
+        musicVolume: audioMusic.volume,
+        rainVolume: audioRain.volume,
       };
 
       localStorage.setItem('save', JSON.stringify(save));
@@ -133,6 +139,11 @@ function loadSave() {
   if (save) {
     const decodedSave = JSON.parse(save);
     mood = decodedSave.mood;
+    audioMusic.volume = decodedSave.musicVolume;
+    audioRain.volume = decodedSave.rainVolume;
+
+    multiplier = decodedSave.multiplier;
+    upgMultiplier.innerText = 'Multiplier: x' + multiplier.toFixed(1);
 
     const needUpgrades = upgrades.filter((upgrade) => decodedSave.purchasedUpgrades.includes(upgrade.id));
     needUpgrades.forEach((nUpgrade) => {
@@ -165,23 +176,29 @@ function getRandomEmoji() {
   return emojis[Math.floor(Math.random() * emojis.length)];
 }
 
-function addEmoji() {
+function addEmoji(count = 1) {
   const upgEmojis = document.getElementById('upg-emojis');
   upgEmojis.style.display = 'block';
 
+  for (let i = 0; i < count; i++) {
+    setTimeout(() => {
       const emoji = document.createElement('span');
       emoji.innerText = getRandomEmoji();
       emoji.className = 'upg-emojis';
-
-  setTimeout(() => {
       upgEmojis.append(emoji);
-  }, Math.random() * 1000);
 
       setInterval(() => {
-    mood += Math.floor(Math.random() * 1000);
+        mood += Math.floor(Math.random() * 1000) * multiplier;
         emoji.innerText = getRandomEmoji();
         updateMoodCounter();
+
+        if (purchasedUpgrades.includes('multiplier')) {
+          multiplier += 0.1;
+          upgMultiplier.innerText = 'Multiplier: x' + multiplier.toFixed(1);
+        }
       }, 5000);
+    }, Math.floor(Math.random() * 4000) + 1000);
+  }
 }
 
 // rain
@@ -233,6 +250,7 @@ function showCuteface() {
   const cuteface = document.getElementById('upg-cuteface');
   cuteface.style.visibility = 'visible';
   document.body.style.backgroundColor = '#93560e';
+  moodPerClick += 600;
 }
 
 // credits
@@ -245,12 +263,20 @@ function showCredits() {
 // cursor
 
 function enableCursor() {
+  moodPerClick += 800;
   var allElements = document.querySelectorAll('body, .btn, .click-btn');
   for (var i = 0; i < allElements.length; i++) {
     allElements[i].style.cursor = 'url("./assets/img/cursors/cursor.png"), auto';
   }
 }
 
+// multiplier
+
+function enableMultiplier() {
+  const upgMultiplier = document.getElementById('upg-multiplier');
+  upgMultiplier.style.display = 'block';
+}
+
 
 let upgrades = [
   {
@@ -291,7 +317,7 @@ let upgrades = [
     description: 'Let the emojis flyyyyyyy-- and get some more mood',
     image: '../assets/img/upgrades/emojis2.png',
     cost: 1500,
-    onPurchase: addEmoji,
+    onPurchase: () => addEmoji(5),
   },
   {
     id: 'calm_music',
@@ -304,7 +330,7 @@ let upgrades = [
   {
     id: 'cursor',
     name: 'Cursor',
-    description: 'Click Clack. +400 mood/click',
+    description: 'Click Clack. +800 mood/click',
     image: '../assets/img/upgrades/cursor.png',
     cost: 4000,
     onPurchase: enableCursor,
@@ -314,7 +340,7 @@ let upgrades = [
     name: 'Mixer',
     description: 'Control the sounds',
     image: '../assets/img/upgrades/mixer.png',
-    cost: 4500,
+    cost: 50000,
     onPurchase: enableMixer,
   },
   {
@@ -322,15 +348,31 @@ let upgrades = [
     name: 'Cuteface',
     description: 'A little bit... unusual background... no?..',
     image: '../assets/img/upgrades/cuteface.png',
-    cost: 8000,
+    cost: 80000,
     onPurchase: showCuteface,
   },
+  {
+    id: 'emojis3',
+    name: 'Even More Emoji Thrusters',
+    description: 'mayhem but more mood',
+    image: '../assets/img/upgrades/emojis3.png',
+    cost: 100000,
+    onPurchase: () => addEmoji(20),
+  },
+  {
+    id: 'multiplier',
+    name: 'Mood Multiplier',
+    description: 'Even more mood with time',
+    image: '../assets/img/upgrades/multiplier.png',
+    cost: 300000,
+    onPurchase: enableMultiplier,
+  },
   {
     id: 'credits',
-    name: 'Credits',
+    name: 'The End',
-    description: 'Congratulations!',
+    description: 'it\'s alpha',
     image: '../assets/img/upgrades/credits.png',
-    cost: 1,
+    cost: 15000000,
     onPurchase: showCredits,
   },
 ];