feat: add basic upgrades functionality

assets/css/style.css

@@ -89,7 +89,7 @@ a {
   margin-bottom: 1rem;
 }
 
-.upgrades {
+#upgrades {
   display: flex;
   align-items: center;
   gap: 0.8rem;
@@ -99,7 +99,7 @@ a {
   padding: 0;
   width: 3.6rem;
   height: 3.6rem;
-  border: 2px solid var(--color-light);
+  border: none;
   border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
@@ -110,7 +110,7 @@ a {
   height: 100%;
 }
 .upgrade:hover {
-  transform: scale(1.05);
+  transform: scale(1.08);
 }
 .upgrade:active {
   transform: scale(0.95);

index.html

@@ -36,10 +36,10 @@
         <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/>
       </svg>
     </button>
-    <div class="upgrades">
-      <button class="upgrade" onclick="purchaseUpgrade('mood_lifter')">
+    <div id="upgrades">
+      <!-- <button class="upgrade" onclick="purchaseUpgrade('mood_lifter')">
         <img src="./assets/img/upgrades/mood_lifter.png" alt="Mood Lifter Upgrade">
-      </button>
+      </button> -->
     </div>
   </main>
 

js/game.js

@@ -1,12 +1,15 @@
 let mood = 0;
-let moodPerClick = 1;
+let moodPerClick = 50; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION
 
+const upgradesContainer = document.getElementById('upgrades');
 const moodCounter = document.getElementById('mood-counter');
 const favicon = document.getElementById('favicon');
 
 function updateMoodCounter() {
   moodCounter.innerText = mood;
 
+  updateUpgrades();
+
   if (mood < 100) {
     favicon.setAttribute('href', './assets/favicons/1.ico');
   } else if (mood < 1e3) {
@@ -24,6 +27,29 @@ function updateMoodCounter() {
   }
 }
 
+function updateUpgrades() {
+  upgradesContainer.innerHTML = '';
+
+  upgrades.slice(0, 4).forEach((upgrade) => {
+    const upgradeBtn = document.createElement('button');
+    upgradeBtn.id = upgrade.id;
+    upgradeBtn.className = 'upgrade';
+    upgradeBtn.onclick = () => purchaseUpgrade(upgrade.id);
+    
+    if (mood < upgrade.cost) {
+      upgradeBtn.style.opacity = 0.6;
+      upgradeBtn.style.cursor = 'not-allowed';
+    }
+
+    const upgradeImg = document.createElement('img');
+    upgradeImg.src = upgrade.image;
+    upgradeImg.alt = upgrade.name + ' Upgrade';
+    upgradeBtn.append(upgradeImg);
+
+    upgradesContainer.append(upgradeBtn);
+  });
+}
+
 function onLiftMoodClick() {
   mood += moodPerClick;
   updateMoodCounter();
@@ -34,6 +60,7 @@ function purchaseUpgrade(id) {
 
   if (mood >= upgrade.cost) {
     mood -= upgrade.cost;
+    upgrades.shift();
     updateMoodCounter();
     upgrade.onPurchase();
   }
@@ -41,17 +68,37 @@ function purchaseUpgrade(id) {
 
 // UPGRADES
 
-const upgrades = [
+function enableSaves() {
+}
+
+function enableMusic() {
+}
+
+let upgrades = [
   {
     id: 'mood_lifter',
     name: 'Mood Lifter',
-    description: 'Lift your Mood. +5/Click.',
+    description: 'Lift your Mood. +5/click',
     image: '../assets/img/upgrades/mood_lifter.png',
     cost: 50,
-    onPurchase: moodLifterUpgrade,
+    onPurchase: () => moodPerClick += 5,
+  },
+  {
+    id: 'saves',
+    name: 'Free Disk Space',
+    description: 'Enable saves',
+    image: '../assets/img/upgrades/saves.png',
+    cost: 300,
+    onPurchase: enableSaves,
+  },
+    {
+    id: 'calm_music',
+    name: 'Old Radio',
+    description: 'Turn on calm lo-fi music',
+    image: '../assets/img/upgrades/calm_music.png',
+    cost: 1000,
+    onPurchase: enableMusic,
   },
 ];
 
-function moodLifterUpgrade() {
-  moodPerClick = 5;
-}
+updateUpgrades();